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



Intro to the Web: Friday, Jan 16

  • Reading
    • HTML: The Definitive Guide: Chapter 4

    List Elements
    • Ordered List
      • <OL [COMPACT] [TYPE=A|a|I|i|1]> ... </OL>
        • Also a START attribute.
        • Can be nested.
      • Each item is marked by: <LI>...[<LI>]

    Example: Ordered List
      <OL TYPE=I>
      <LI>Doctor
      <LI>Lawyer
      <LI>Engineer
      <LI>Low Life
      <OL TYPE=a>
      <LI>Mugger
      <LI>Congressperson
      </OL>
      </OL>

    List Elements
    • Unordered Lists
      • <UL [COMPACT] [TYPE=disc|circle|square]> ... </UL>
        • Can be nested.
      • Each item is marked by: <LI>...[</LI>]

    Example: Unordered List
      <UL>
      <LI>Doctor
      <LI>Lawyer
      <LI>Engineer
      <LI>Low Life
      <UL>
      <LI>Mugger
      <LI>Congressperson
      </UL>
      </UL>

    List Elements
    • List Element Tag (for Ordered Lists)
      • <LI [TYPE=A|a|I|i|1] [VALUE = #]>
        • hanges all subsequent list numbering style and/or values.
    • List Element Tag (for Unordered Lists )
      • <LI [TYPE=disc|circle|square]>
        • Changes all subsequent bullets style.

List Elements
  • Definition Lists
    • <DL [COMPACT]> ... </DL>
      • may be nested.
    • Each item has two parts:
      • The term being defined: <DT>...[</DT>]
      • The definition: <DD>...[</DD>]

Examples: Definition List


Specialized Unordered Lists
  • Directory Lists
    • <DIR> ... </DIR>
  • Menu Lists
    • <MENU> ... </MENU>

Rules
  • <HR [ALIGN=left|center|right][SIZE=#][WIDTH=#] >
    • SIZE in pixels
    • WIDTH in pixels or as percentage
    • also NOSHADE option (single solid color)

Rules
    <CENTER> <P> Narrow <HR>
    <P> Wide <HR SIZE=5>
    <P> Left <HR WIDTH="50%" ALIGN=LEFT>
    <P> Right <HR WIDTH="50%" ALIGN=RIGHT>
    <P> Short <HR WIDTH="20%">
    </CENTER>
Links

The <A > Tag

  • Has many attributes, but most common is HREF
  • text between < A > and < /A > is highlighted
  • users can specify color of links in general
  • the < BODY > tag attributes LINK , ALINK and VLINK allow you to specify colors as well (user may choose to override these)


  • Universal Resource Locator
    • scheme: scheme_specific_part
    • Common schemes (protocols)
      • http Hyper Text Transport Protocol (HTTP)
      • ftp File Transport Protocol (FTP)
      • nntp Network News Transport Protocol (NNTP)
      • mailto Simple Mail Transport Protocol (SMTP)
      • gopher
      • telnet
      • file

HTTP URL
  • http://server[:port]/path[#fragment]
    • Server name is case insensitive
    • Standard port values: 80 (default), 443 (SSL).
      • Non-system administrators can usually only run Web Servers on ports > 1024
      • Port is a TCP concept, often thought of as a mailbox.
    • path is case sensitive on Unix servers.

Absolute and Relative URLs
URL Special Characters
  • Each Character in a URL can be Represented by an "Escape Sequence" (analogous to Character Entities)
    • Escape Sequence format: %#
    • # is the ASCII value of the character in hexadecimal.
    • Example: "Hello Mom" ==> "Hello%20Mom"

Example
  • On the AltaVista Main Page, search for
    • "truth"
  • URL submitted: http://altavista.digital.com/cgi-bin query?pg=q&what=web&fmt=.&q=%22truth%22
    RL Special Characters
  • Special Characters Requiring Encoding
    • ALL non-printing characters.
    • Space: %20, Semicolon: %3B, Slash: %2F, Question Mark: %3F, Colon: %3A, At Sign: %40, Equal Sign: %3D, Ampersand: %26.
  • It's Recommended You Encode These
    • <, >, ", #, %, {, }, |, \, ^, ~, [, ], `
  • Table 6-1 has list of Characters/Encodings
  • Absolute URL
    • Contains all the information need to locate a document on the Web.
    • Can (and usually does) omit the port number, which will get the default value of the scheme
    • Example
      • http://cs101.cs.uchicago.edu/assignments/asst3.html

Absolute and Relative URLs
  • Relative URL
    • Provides only some of the information required to find a document on the Web.
    • Missing information is taken for a default URL, known as the base address.
    • Base Address defaults to the URL of the document that contains the relative reference.
    • Base Address can be set explicitly with the <BASE> tag.

Relative URL's
  • Example (references file in same directory)
    • <A HREF="asst3.html">Assignment 3</A>: HTML/Images .
  • If URL starts with /, it is relative to the server root, e.g.
    • <A HREF="/~kris/cs101/">CS 101</A> references

      http://www.cs.uchicago.edu/~swain/ cs101/index.html


<BASE> Tag
  • <BASE HREF=URL>
    • Base Tag is located in the header of a HTML document.
    • Allows for common addressing in a distributed project.
    • The URL can be a relative URL itself!
      • <BASE HREF="/~kris/cs101/images">

HTTP/HTML URL Conventions
  • If the scheme is HTTP and the URL is of a directory (folder), then the server will return:
    • The directory "index page" (usually index.html).
    • A directory listing with hyperlinks to each file.
  • If the scheme is HTTP and the path begins with ~, the path is relative to the html directory of the named user (Unix only)
    • http://www.cs.uchicago.edu/~kris/cs101 ->http://www.cs.uchicago.edu/homes/swain/html/cs101/index.html

<ANCHOR> Tag
  • <A [HREF=URL] [NAME="FragmentName"] [TITLE="ReferrencedDocumentTitle"] > ... HyperLink Text or Image ... </A>
    • Place all text level elements outside of the <A> ... </A> container.
    • FragmentNames must be document unique.

Anchors as Destinations
  • <A NAME="FragmentName"> ... Optional Text or Image ...</A>
    • This creates a target for hypertext links to a specific location in the file.
    • Often used to mark headings ( <H1>...</H1> ).
    • Optional Text is displayed normally.
    • FragmentNames must be unique in each document (not across documents).

Anchors as Springboards
  • <A HREF=URL> ... HyperLink Text or Image ... </A>
    • When the HyperLink Text/Image is selected, the document at URL will be loaded.

Anchor Example
<UL>
<LI><A HREF="#title">The TITLE element</a>
<LI><A HREF="#script">The STYLE element</a>
<LI><A HREF="#script">The SCRIPT element</a>
...
</UL>
...
<h3><a name=title>TITLE</a></h3>