WWW and HTMLWWW and HTML

AnnoucementAnnoucement

Many people submitted the .vbp file and Many people submitted the .vbp file and lost pointslost points

Can resubmit the .frm file to my email, Can resubmit the .frm file to my email, nanzhang@egr.msu.edu and get most nanzhang@egr.msu.edu and get most points back.points back.

Deadline of Program 4 is extended to 5 Deadline of Program 4 is extended to 5 PM today. PM today.

I will hold office hour until 2:30PM I will hold office hour until 2:30PM today.today.

Infrastructure of the Infrastructure of the InternetInternet

Internet connection and Internet connection and telephone connectiontelephone connection

Traditional telephone connectionTraditional telephone connection– Exclusive communication channels.Exclusive communication channels.

Internet connectionInternet connection– SenderSender: Digital data are separated : Digital data are separated

into small packages and sent to the into small packages and sent to the target computer.target computer.

– ReceiverReceiver: collect all the packages and : collect all the packages and assemble into original digital data.assemble into original digital data.

Infrastructure of InternetInfrastructure of Internet

IP AddressIP Address

Each computer connected to the Each computer connected to the internet has a unique address.internet has a unique address.

IP address is a 4 byte (32bits) IP address is a 4 byte (32bits) number.number.– For example: 35.9.2.154 ->msu web For example: 35.9.2.154 ->msu web

serverserver– 24,294,967,296 possible IP addresses.24,294,967,296 possible IP addresses.– Static IPStatic IP: for computers that works all : for computers that works all

day long.day long.– Dynamic IPDynamic IP: only assigning an IP : only assigning an IP

address when computer is in use.address when computer is in use.

Domain namesDomain names

IP address is concise, but not for human.IP address is concise, but not for human. 64.236.16.20 is much harder to remember 64.236.16.20 is much harder to remember

than than www.cnn.comwww.cnn.com Domain names are for “important” Domain names are for “important”

servers in the internet, like servers in the internet, like www.msu.eduwww.msu.edu.. Domain names are stored in domain name Domain names are stored in domain name

server, which is a huge database.server, which is a huge database. Domain name is unique, and can be Domain name is unique, and can be

remaped to different IP addresses.remaped to different IP addresses.

Domain name structureDomain name structure

www.microsoft.comwww.microsoft.com .com .org .edu are top level .com .org .edu are top level

domains, which specify the domains, which specify the category of the domain name user.category of the domain name user.

Second level domain gives the Second level domain gives the entity’s name. This must be unique entity’s name. This must be unique in the top level domain.in the top level domain.

Low level domain gives the Low level domain gives the server’s name. server’s name.

What is WWW?What is WWW?

WWW – World Wide Web, which is a standard WWW – World Wide Web, which is a standard for organizing and deliver information for organizing and deliver information through the internet.through the internet.

HTML - HyperText Markup Language, which HTML - HyperText Markup Language, which are public files on computers can be read by are public files on computers can be read by remote user remote user

HTTP - HyperText Transfer ProtocolHTTP - HyperText Transfer Protocol URL - Universal Resource Locator - is name of URL - Universal Resource Locator - is name of

file on a remote computerfile on a remote computer

Universal Resource LocatorUniversal Resource Locator: : StaticStatic

http://www.msu.edu/~urquhar5/tour/active.html

www.msu.eduDomain Name - name of remote computer

http://identifies type of transfer

/~urquhar5/tour/active.htmlFile Location on Remote ComputerThis part is CasE SenSiTiVe.

Universal Resource LocatorUniversal Resource Locator: : DynamicDynamic

http://www.msu.edu/cgi-bin/redirect.cgi?q=LBS&site=Web

www.msu.eduDomain Name - name of remote computer

http://identifies type of transfer

Folder name /cgi-bin/

Server program name: redirect.cgi

Argument of the server program: ?q=LBS&site=Web

MSU Web Pages are MSU Web Pages are FilesFiles in AFSin AFS

User SPARTY’s Web Page in AFS:

u:\msu\user\s\p\sparty\web\test.html

Or p:\web\test.html

MSU Web Server

www.msu.edu

Any person on the Web can browse to:

http://www.msu.edu/~sparty/test.html

Web Page Development Web Page Development CycleCycle

EDIT and SAVE the file in your AFS

p:\web\test.html

TEST by BROWSING to the page

http://www.msu.edu/~msunetid/test.html

HTML File StructureHTML File Structure

<HTML><HTML>

<HEAD><HEAD>

</HEAD></HEAD>

<BODY><BODY>

</BODY></BODY>

</HTML></HTML>

HTML TagsHTML Tags

Each opening HTML tag has a Each opening HTML tag has a closing HTML tag that matches it.closing HTML tag that matches it.– <HTML> for begin a HTML file <HTML> for begin a HTML file – </HTML> for ending a HTML file</HTML> for ending a HTML file– <P> goes at beginning of paragraph<P> goes at beginning of paragraph– </P> goes at end of paragraph</P> goes at end of paragraph

Browsing to Your Web Browsing to Your Web PagePage

Browse to Browse to testtest.html.html with Netscape with Netscape NavigatorNavigator or Internet Explorer. or Internet Explorer.– The URL to this Web page is:The URL to this Web page is:

http://www.msu.edu/~http://www.msu.edu/~msunetidmsunetid//testtest.html.html

Note: Note: ~ ~ Tilde Tilde beforebefore your MSU NetID your MSU NetID

Replace Replace msunetidmsunetid with with youryour MSU NetID MSU NetID Includes the filename for your Web pageIncludes the filename for your Web page

Adding Text to Your HTML Adding Text to Your HTML FileFile

<HTML><HTML><HEAD><HEAD>

<TITLE>Day 6 Page</TITLE><TITLE>Day 6 Page</TITLE></HEAD></HEAD><BODY><BODY>

My name is My name is your nameyour nameMy major is My major is your majoryour major

</BODY></BODY></HTML></HTML>

Web Page Development Web Page Development CycleCycle

EDIT and SAVE the file in your AFS

p:\web\test.html

TEST by BROWSING to the page

http://www.msu.edu/~msunetid/test.html

Example of TagsExample of Tags

<P>Here is the paragraph about <P>Here is the paragraph about something</P><P>Here is the something</P><P>Here is the second paragraph</P>second paragraph</P>

What it will look like:

Here is the paragraph about something.

Here is the second paragraph.

Essential HTML TagsEssential HTML Tags

<HTML><HTML> begins HTML document begins HTML document <BODY> begins body of document<BODY> begins body of document <H1><H1>Here’s a header in big Here’s a header in big

typetype</H1></H1> <P><P>Here’s a paragraphHere’s a paragraph</P></P> </BODY> ends body</BODY> ends body </HTML></HTML> ends HTML document ends HTML document

Browser Output of PageBrowser Output of Page

If you opened that page in Netscape Navigator, it would look like this:

Here’s a header in big typeHere’s a paragraph

View Page SourceView Page Source

Using “View Page Source” allows Using “View Page Source” allows you to see the HTML behind a pageyou to see the HTML behind a page

When we get into advanced HTML When we get into advanced HTML pages, this can be really important pages, this can be really important for learning how someone did for learning how someone did somethingsomething

http://http://puffin.bird.audubon.orgpuffin.bird.audubon.org//

Your personal web spaceYour personal web space

http://www.msu.edu/~nanzhang/index.htmlhttp://www.msu.edu/~nanzhang/index.html Two steps:Two steps:

– Create a file named Create a file named index.htmlindex.html– Use FTP to transfer a file named index.html into Use FTP to transfer a file named index.html into

your web directoryyour web directory If you omit the file name, web server will If you omit the file name, web server will

automatically return the index.html file by automatically return the index.html file by default.default.– http://www.msu.edu/~nanzhang/http://www.msu.edu/~nanzhang/

Web page authoring toolsWeb page authoring tools

Hacking the HTML file is difficult, Hacking the HTML file is difficult, so we would like to use some so we would like to use some WYSIWYG (What you see is what WYSIWYG (What you see is what you get) authoring tools.you get) authoring tools.

Common toolsCommon tools– Netscape composerNetscape composer– Microsoft Front pageMicrosoft Front page– Macromedia DreamweaverMacromedia Dreamweaver

Netscape ComposerNetscape Composer

Netscape Composer allows Netscape Composer allows WYSIWYG (what-you-see-is-what-WYSIWYG (what-you-see-is-what-you-get) editing of web pagesyou-get) editing of web pages

Controls similar to Microsoft word – Controls similar to Microsoft word – font formatting, colors, etc.font formatting, colors, etc.

Free software.Free software.

Microsoft Front PageMicrosoft Front Page

All-in-One programAll-in-One program.. Uses “proprietary tags” that can’t Uses “proprietary tags” that can’t

be read by some browsers be read by some browsers (Netscape)(Netscape)

Uses non-standard HTML, style Uses non-standard HTML, style sheets, etcsheets, etc

Avoid it at all costs!Avoid it at all costs!

Macromedia DreamweaverMacromedia Dreamweaver

Principal program we will use in classPrincipal program we will use in class ProsPros

– Best compatibilityBest compatibility– Excellent Site Building ToolExcellent Site Building Tool..– Allows organization of files, ftp, and WYSIWYG Allows organization of files, ftp, and WYSIWYG

editing all-in-oneediting all-in-one ConsCons

– Commercial software. Expensive.Commercial software. Expensive. Free trial version available at Free trial version available at

www.macromedia.comwww.macromedia.com. 20 days trial . 20 days trial period.period.