home -- outline -- lectures -- assignments -- discussion -- tips -- links --



Intro to the Web: Monday, Jan 12 Readings
  • HTML: The Definitive Guide
    • Chapters 1, 3
    • Skim Chapter 2

HTML: An introduction to the language of the WWW.

What is HTML?
  • HTML is a text markup language.
  • HTML generally describes the structure of a document, not its layout.
  • HTML is defined in a DTD (document type declaration) document using the SGML (standard generalized markup language) meta - language.

HTML: General Principles
  • ASCII based, tags between '<'....'>'.
  • Uses markup tags.
  • Tags generally describe document structure, not document appearance.
  • The appearance of the document is determined by the displayer (ie Web browser) used.

Anatomy of a Tag
  • Container Tags
    • < tagname [[attribute= "value"]...]> </tagname>
    • examples:
      • <h1>Any Text</h1>
      • <a href="http://cnn.com">Linktext</a>

  • on-Container Tags
    • <tagname [[attribute= "value"]...]>

HTML: Basic Skeleton


HTML: Basic Text Example


Basic Text Display - Part I


Basic Text Display - Part II


HTML: Text Block Elements
  • <p>........ </p> Paragraph.
  • <p align = "center|left|right">
  • <br> Line break.
  • <pre>.....</pre> Pre-formatted text.
  • <blockquote>..</blockquote> Quoted text.
  • <h1>...... </h1> Headings.
    • <h2>.....</h2> Sub-Headings


Text Example with Basic HTML


Display of Basic Text Elements
HTML standards
  • HTML 2.0 -- standard set by the WWW Consortium in 1995 (http://www.w3.org).
  • HTML 3.2 -- recommendation issued on Jan. 14 1997; developed in cooperation with IBM, Microsoft, Netscape, Novell, SoftQuad, Spyglass and Sun Microsystems
  • HTML 4.0 -- recommendation issued on Dec. 18 1997; HTML 4.0 makes the Web more appealing, more accessible, and more international
    • advanced forms
    • in-line frames
    • enhanced tables
    • support for objects and scripts
    • markup for multilingual documents
    • table and form text can rendered into braille or speech.

HTML -- general rules
  • Tags are not case sensitive, attributes often are.
  • When nesting HTML elements, must end tags starting with the most recent opening tag and work your way out.
    • Note: Browsers sometimes allow you to violate this and other rules.

Omitting Tags
  • HTML standard permits omitting tags when their presence can be unambiguously inferred from the surrounding context
    • e.g. </P>, <HEAD></HEAD>, < BODY></BODY>, </LI>, etc.
    • Recommend that you include all but </P> ,for clarity

Ignoring Tags
  • Browsers ignore tags that they cannot interpret. To some extent, permits extensions to the language with backwards compatibility.
  • Beware of enclosed contents,e.g.:
    • <COMMENT>I hate this class.</COMMENT> interpreted by IE; other browsers display contents of the comment.

Comments
  • Standard form: <!--, -->
  • <!-- I hate this class!!!-->

Structural Tags
  • <HTML></HTML> -- surrounds entire document, no attributes, may be omitted.
  • <HEAD></HEAD> -- encapsulates header tags, no attributes, may be omitted.
  • <BODY></BODY>
    • attributes: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK and ALINK
    • may be omitted
    • can be replaced by <FRAMESET> (non-std.)

Page with the BODY tag enhanced: Part I


Page with the BODY tag enhanced: Part II


Header Tags
  • <TITLE></TITLE> -- Can contain text only, no attributes.
    • Is displayed as title of browser window.
    • Indexes the page in the browser's history and bookmarks.
    • Is given extra emphasis by search engines.

Header tags, cont.
  • <META></META> -- contains a name, value pair; used by search engines, e.g.:
    • <META name="description" content=" We specialize in grooming pink poodles.">
    • <META name="keywords" content="pet grooming, Palo Alto, dog">
  • AltaVista indexes both fields as words,and returns the description with the URL.

<META> Example, cont.
  • e.g. AltaVista returns:
    • Pink Poodles Inc
      We specialize in grooming pink poodles.
      http://pink.poodle.org/ - size 3k - 29 Feb 96

HTML -- guidelines for working on a page
  • Work Locally: keep your pages in a special place: folder, disk etc.
  • Name your files in a clear, concise manner
  • Use comments to note special changes and document history.
  • Keep a notepad handy: write down changes you need to make as you notice problems, cross them off as you move forward. The road to hell is paved with good intentions! :)
  • Choose a format and stick to it.
    • Get in the habit of CAPITALIZING your HTML tags.
    • Write the START and END tags first, then fill inbetween (this helps you avoid dangeling tags)
    • Use the return key! White space to separate the logical parts of your documents makes it easier to read them (and comments can also help here!)
    • Indent lists and tables to reflect their organization
  • Note: It is ok to use your own guidelines, as long as you keep things organized. Be sure to think about the people who may read your pages. If they need to find a link or some code in the middle of your page, can they view the source, easily scroll down and locate it?