WWW and HTML

1
WWW and HTML
2
Annoucement

• Many people submitted the .vbp file and lost
  points
• Can resubmit the .frm file to my email,
  nanzhang_at_egr.msu.edu and get most points back.
• Deadline of Program 4 is extended to 5 PM today.
• I will hold office hour until 230PM today.

3
Infrastructure of the Internet
4
Internet connection and telephone connection

• Traditional telephone connection
• Exclusive communication channels.
• Internet connection
• Sender Digital data are separated into small
  packages and sent to the target computer.
• Receiver collect all the packages and assemble
  into original digital data.

5
Infrastructure of Internet
6
IP Address

• Each computer connected to the internet has a
  unique address.
• IP address is a 4 byte (32bits) number.
• For example 35.9.2.154 -gtmsu web server
• 24,294,967,296 possible IP addresses.
• Static IP for computers that works all day long.
• Dynamic IP only assigning an IP address when
  computer is in use.

7
Domain names

• IP address is concise, but not for human.
• 64.236.16.20 is much harder to remember than
  www.cnn.com
• Domain names are for important servers in the
  internet, like www.msu.edu.
• Domain names are stored in domain name server,
  which is a huge database.
• Domain name is unique, and can be remaped to
  different IP addresses.

8
Domain name structure

• www.microsoft.com
• .com .org .edu are top level domains, which
  specify the category of the domain name user.
• Second level domain gives the entitys name. This
  must be unique in the top level domain.
• Low level domain gives the servers name.

9
What is WWW?

• WWW World Wide Web, which is a standard for
  organizing and deliver information through the
  internet.
• HTML - HyperText Markup Language, which are
  public files on computers can be read by remote
  user
• HTTP - HyperText Transfer Protocol
• URL - Universal Resource Locator - is name of
  file on a remote computer

10
Universal Resource Locator Static
http//www.msu.edu/urquhar5/tour/active.html
http// identifies type of transfer
/urquhar5/tour/active.html File Location on
Remote Computer This part is CasE SenSiTiVe.
www.msu.edu Domain Name - name of remote computer
11
Universal Resource Locator Dynamic
http//www.msu.edu/cgi-bin/redirect.cgi?qLBSsite
Web
http// identifies type of transfer
Folder name /cgi-bin/ Server program name
redirect.cgi Argument of the server program
?qLBSsiteWeb
www.msu.edu Domain Name - name of remote computer
12
MSU Web Pages are Files in AFS
Any person on the Web can browse
to http//www.msu.edu/sparty/test.html
MSU Web Server www.msu.edu
User SPARTYs Web Page in AFS u\msu\user\s\p\spa
rty\web\test.html Or p\web\test.html
13
Web Page Development Cycle
EDIT and SAVE the file in your AFS p\web\test.htm
l
TEST by BROWSING to the page http//www.msu.edu/
msunetid/test.html
14
HTML File Structure

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

15
HTML Tags

• Each opening HTML tag has a closing HTML tag that
  matches it.
• ltHTMLgt for begin a HTML file
• lt/HTMLgt for ending a HTML file
• ltPgt goes at beginning of paragraph
• lt/Pgt goes at end of paragraph

16
Browsing to Your Web Page

• Browse to test.html with Netscape Navigator or
  Internet Explorer.
• The URL to this Web page is
• http//www.msu.edu/msunetid/test.html
• Note Tilde before your MSU NetID
• Replace msunetid with your MSU NetID
• Includes the filename for your Web page

17
Adding Text to Your HTML File

• ltHTMLgt
• ltHEADgt
• ltTITLEgtDay 6 Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• My name is your name
• My major is your major
• lt/BODYgt
• lt/HTMLgt

18
Web Page Development Cycle
EDIT and SAVE the file in your AFS p\web\test.htm
l
TEST by BROWSING to the page http//www.msu.edu/
msunetid/test.html
19
Example of Tags

• ltPgtHere is the paragraph about somethinglt/PgtltPgtHer
  e is the second paragraphlt/Pgt

What it will look like Here is the paragraph
about something. Here is the second paragraph.
20
Essential HTML Tags

• ltHTMLgt begins HTML document
• ltBODYgt begins body of document
• ltH1gtHeres a header in big typelt/H1gt
• ltPgtHeres a paragraphlt/Pgt
• lt/BODYgt ends body
• lt/HTMLgt ends HTML document

21
Browser Output of Page
If you opened that page in Netscape Navigator, it
would look like this
Heres a header in big type Heres a paragraph
22
View Page Source

• Using View Page Source allows you to see the
  HTML behind a page
• When we get into advanced HTML pages, this can be
  really important for learning how someone did
  something
• http//puffin.bird.audubon.org/

23
Your personal web space

• http//www.msu.edu/nanzhang/index.html
• Two steps
• Create a file named index.html
• Use FTP to transfer a file named index.html into
  your web directory
• If you omit the file name, web server will
  automatically return the index.html file by
  default.
• http//www.msu.edu/nanzhang/

24
Web page authoring tools

• Hacking the HTML file is difficult, so we would
  like to use some WYSIWYG (What you see is what
  you get) authoring tools.
• Common tools
• Netscape composer
• Microsoft Front page
• Macromedia Dreamweaver

25
Netscape Composer

• Netscape Composer allows WYSIWYG
  (what-you-see-is-what-you-get) editing of web
  pages
• Controls similar to Microsoft word font
  formatting, colors, etc.
• Free software.

26
Microsoft Front Page

• All-in-One program.
• Uses proprietary tags that cant be read by
  some browsers (Netscape)
• Uses non-standard HTML, style sheets, etc
• Avoid it at all costs!

27
Macromedia Dreamweaver

• Principal program we will use in class
• Pros
• Best compatibility
• Excellent Site Building Tool.
• Allows organization of files, ftp, and WYSIWYG
  editing all-in-one
• Cons
• Commercial software. Expensive.
• Free trial version available at
  www.macromedia.com. 20 days trial period.