HTML TUTORIAL

Introduction and History

File transfers were made possible with the earliest versions of internet software; the program that handles file transfers still survives more or less intact - ftp. As internet users started to place files for public access, advertising their wares on bulletin boards, some people started distributing "lists" of hot ftp material on bulletin boards.

Along came archie, a program to locate ftp sites using a keyword search. This program worked by collecting data at archie servers (located at some sites) and allowing archie clients to connect to the servers to search.

The next development was gopher(created at the University of Minnesota), a utility which combined several tools (a file viewer, ftp and telnet) in a single easy-to-use menu-driven interface.

At the same time, the publishing industry had been experimenting with so-called hypertext documents (electronic documents with nonlinear organization of data) -- on single machines. A standard called SGML (Standard Generalized Markup Language) was developed to write hypertext documents in free ascii-text (similar to Latex, troff etc).

Ideally, SGML should be integrated with TCP/IP to provide links across the network. But SGML is large and complex. Thus came HTML (HyperText Markup Language), a much simpler formatting language developed by CERN in Switzerland that uses TCP/IP.

The whole idea in using HTML is to display more than text, that is, formatted text and images. For this, a "browser" is needed - most often, a browser written for a windowing package such as xmosaic (the first browser) written for X-windows.

HTML Basics

Basic structure of an HTML document:

HTML documents are written in ascii text, with commands specified by particular sequences of characters. Commands in HTML usually consist of 3 components:

a start tag,

a middle,

and a stop tag.

For example, to specify the title of a document, such as,

Red Riding Hood

, you would use the

<title>

command:

    <title> Red Riding Hood </title>

Note that

the start tag is the keyword <title>(with triangular brackets, the signature of HTML commands),
the stop tag is the keyword </title>
and the middle is the textual data.

Some characters, such as "<", ">" and "&" are used exclusively for HTML commands. To actually display these special characters in a document, see the section on special characters below.

Here's the basic structure of an HTML document:

    <html>
      <!-- This is an internal comment; it won't be displayed -->
      <!-- Note the exclamation mark and the two dashes on either side -->
      <head>
        <title> Red Riding Hood </title>
      </head>

      <body>
        Once upon a time, in a land far far away, there lived...
      </body>
    </html>

Now, HTML is written in free text, so the above document could just as well be written into a text file as:

    <html>  <!-- This is an internal comment; it won't be displayed -->
      <!-- Note the exclamation mark and 
    the two dashes on either side -->
    
    <head>  <title> Red Riding Hood </title>  </head>  <body>
         Once upon a time, 
      in a land far far away, 
                   there lived...
                                  </body>   </html>

NOTE:

Obviously, some indentation will make the text file more readable.

The <head> blah-blah <\head>part of the document is used to specify a title (so that it can be displayed in the title window of a browser).
Thus, the bulk of the document will be in the <body> blah-blah-blah </body>part.
Typically, a file that starts with <html>and ends with </html>corresponds to one page during browsing; that is, following a link leads to a new HTML document.

Formatting:

OK, on to formatting. That is, creating paragraphs, using italics, selecting fonts, and other goodies that we all want for our cheesy documents.

An important point needs to be made here: you, the author of an HTML document, do not have much control over how a browser will display your document. Some control, but not much. This is because a browser may be dynamically configured to various window sizes and the designers of HTML wanted to keep the language simple enough to let browsers decide "what looks nice". You, the author, can decide paragraph breaks, some fonts, italics, a rough sense of font sizes and the like - but eventually a browser decides what to display. Thus, your document could look quite different when viewed through different browsers.

Let's cover a few simple HTML ideas by embellishing the example shown earlier:

    <html>
      <head>
        <title> Red Riding Hood </title>
      </head>

      <body>
        <h1> Red's Early Years </h1>
          <h2> Birth </h2>
            Once upon a time, in a land far far away, there lived...
          <h2> Pre-School </h2>
            When she was three, her mother enrolled her in 
            <i> Grimm's DayCare </i> ...
        <h1> Red Goes to High-School </h1>
           <h2> Red Sets up a Homepage </h2>
              Acquiring a 486-based Linux machine running X-windows
              was the first step in Red's long journey from internet
              initiate to system guru. <p>
              She set up the soon-to-be hottest internet site: 
               <hr>
                   http://red.hood.com
               <hr>

        <address> The Brothers Grimm </address>
      </body>
    </html>

The example shows

how top-level headings ( <h1> blah </h1>) and lower-level headings ( <h2> blah </h2>) are defined;
how to end a paragraph (with a <p>all by itself);
how to set off a phrase in italics (using <i> whatever phrase </i>);
how to create horizontal graphic lines (using <hr>).
how to specify an HMTL author's address using the <address> some internet email address </address>command.

Note that 6 levels of headings are permissible starting with

<h1>

(the largest) and ending with <h6>(the smallest).

Summary of HTML formatting commands:

         Command                Description
  Start tag    Stop tag         
  -------------------------------------------------------------------
  <html>    </html>        HTML document indicator
  <head>    </head>        Document head
  <title>   </title>       Title (usually in <head> section)
  <body>    </body>        Document body
  <address> </address>     Document author info
  <!--      -->               Comment

  <h1>      </h1>          Level-1 heading
  <h2>      </h2>          Level-2 heading
   .
   .
   .
  <h6>      </h6>          Level-6 heading

  <i>       </i>           Italics
  <em>      </em>          Emphasized text - similar to italics
  <b>       </b>           Bold face
  <strong>  </strong>      Strong - similar to bold
  <tt>      </tt>          Teletype
  <strike>  </strike>      Strike-through

  <var>     </var>         Variable - similar to italics
  <cite>    </cite>        Citation - similar to italics
  <code>    </code>        Code - similar to teletype
  <kbd>     </kbd>         Keyboard - similar to teletype
  <samp>    </samp>        Sample - similar to teletype
  <dfn>     </dfn>         Definition - for definitions
  <key>     </key>         Keyword - for keywords

  <p>                         End a paragraph, start a new one
  <br>                        Line break - start a new line
  <hr>                        Horizontal rule
  <pre>     </pre>         Preformatted text - format exactly as entered in ascii.
  <blockquote </blockquote>  To set apart a quote

Itemized lists in HTML:

To create an itemized list, consider the following example:

    <body>
      <h2> Red Riding Hood's shopping list </h2>
      <ul>
         <li> Picnic basket 
         <li> Iced tea
         <li> Red items
            <ul>
              <li> Red delicious apples
              <li> Red sneakers
              <li> Red jacket with hood
            </ul>
         <li> Safety items
            <ol>
               <li> Magnesium flare
               <li> Cellular phone
               <li> Uzi
            </ol>
      </ul>
    </body>

Observe that an unordered list list is defined by

<ul> list of things </ul>

and an ordered list by

<ol> list of ordered items </ol>

. Each item is specified by a

<li>.

Unordered lists are bulleted and ordered lists are numbered. There are also <menu>and <dir>types of lists, both being similar to unordered lists. Lists can be nested within other lists, as the example shows.

HTML also provides a description list to pair up, for example, keywords and definitions in a glossary. For example:

    <dl>
      <dt> HTML
      <dd> A language spoken by nerds
      <dt> Java
      <dd> A language spoken by major nerds
    </dl>

You get the idea.

Special characters:
To indicate special characters, an ampersand command is used. For example, < is the less-than symbol that starts an HTML command tag. Typing "& l t ;" (without the spaces and quotes) will result in the less-than symbol being displayed. Here are some useful character codes (others are available, for example, umlauts and accents for European languages):

  Character code        Description
  -----------------------------------------------------------
  & l t ;               the less-than symbol
  & g t ;               the greater-than symbol
  & a m p               the ampersand symbol

Adding Links to Documents

A simple example:

Suppose we have created the following html file (called, say, red.html) in the current directory, along with the file home.html and a subdirectory early containing the files birth.html and preschool.html.

    <html>
      <head>
        <title> Red Riding Hood </title>
      </head>

      <body>
        <h1> Red's Early Years </h1>
          <a href="early/birth.html"> Birth </a>
          <a href="early/preschool.html"> Pre-School </a>
        <h1> Red Goes to High-School </h1>
           <a href="home.html"> Red Sets up a Homepage </a>
      </body>
    </html>

Notice the new command used above - the anchor command - with the general form

<a href="an address"> some text that will be highlighted </a>.

When a browser displays this document, the text between the anchor tags will be underlined or highlighted. Mouse clicks on this portion will result in following the address to a new HTML document. The start tag provides the information needed to find the new html document (which has its own header, body etc).

What is a URL?

A URL (Universal Resource Locator) is a document name that contains complete access information such as whether the document is HTML, where it is (internet address), the path name (sequence of directories) and other information. For example, consider this URL:

     http://www.seas.gwu.edu:80/tales/fairy/modern/masterlist.html

It specifies the following:

http - the document is in HTML
www.seas.gwu.edu - the internet address or system name
80 - the port at which the httpd daemon is listening (most often the port is 80, the default port, and is left out of the URL)
tales/fairy/modern- a path name leading to a file masterlist.html- a file name

Port number 80 is the standard port number. It is not needed in the URL. It is also possible to pass parameters in a URL. This is explained later.

Two types of anchors:

There are reference anchors (the anchor in the example above) and named anchors (see below).

Named anchors allow you to mark a place in the text to point to. For example, suppose the file stories.html contains a number of stories, whereas masterlist.html contains a list of story titles such as Red Riding Hood. Each title has a link to the appropriate story in stories.html. For example, here is a portion of masterlist.html:

    <ul>
    <li> <a href="stories.html"> Hansel and Gretel <a>
    <li> <a href="stories.html"> Jack and the Beanstalk <a>
    <li> <a href="stories.html"> Red Riding Hood <a>
    <li> <a href="stories.html"> Aesop's Fables <a>
    </ul>

Let's assume that

stories.html

contains the tales (each with hyperlinks to other files. Now, by clicking on any stories in

masterlist.html

, the browser will take you to the top of the stories.html file. You then have to scroll down to the story you want. To avoid this problem, we simply mark each story beginning in the file stories.html and use the mark in the href specification. For example, in stories.html, let us mark

Red Riding Hood

as follows:

    <h1> <a NAME="red"> Red Riding Hood <a> </h1>

Now, in the appropriate href part in masterlist.html, we specify this mark:

    <li> <a href="stories.html#red"> Red Riding Hood <a>

Observe the hash symbol being used to specify a named anchor. You can use named anchors for rapid movement within a single HTML document.

Relative addressing:

Suppose the address of the current document is

     http://www.seas.gwu.edu/tales/fairy/modern/masterlist.html

Then, we have seen that links in the file masterlist.html are created by giving an address in the href part of an anchor. We can either provide a full address or a partial or relative address. Above, we saw an example of a relative address:

    <a href="stories.html"> Red Riding Hood <a>

We could have also given the complete address:

    <a href="http://www.seas.gwu.edu/tales/fairy/modern/stories.html"> Red Riding Hood <a>

Images and Other Things

What is MIME?

MIME (Multipurpose Internet Mail Extensions) is a standard that incorporates many well-known file formats. The idea is that the browser doesn't handle these formats and instead calls a "plug-in", a program that knows what to do with the data. Thus, for "postscript" files, a postscript viewer is called by the browser. You can, by setting options in the browser, decide which application programs (plug-ins) handle which file extensions. Here are some common extensions (some of which, like .gif, are directly handled by the browser).

gif - .gif files are graphics or bitmap files in the GIF (Graphics Interchange Format) format.
jpeg - a bitmap format for still images.
mpeg - format for motion pictures.
ps - postscript
pdf - the format used by Adobe Acrobat documents

How to display in-lined images:

In-lined images are images are images within the HTML document (as opposed to spawning a viewer). Consider the following example, which displays an image in the file

mypicture.gif:

    <body>
      <h1> The Next President of the United Brewpub Tasters of America </h1>
      <img alt="my mugshot" align=bottom src="mypicture.gif">
    </body>

With the

<img ... >

command, we specify the source file (

mypicture.gif

), an alignment for the first following line of text, and an alternate ascii string (

my mugshot

) for browsers that don't support images.

Adding links to images (simulating buttons):

This is easy: simply enclose the entire image command inside an anchor command. For example:

    <body>
      <h1> The Next President of the United Brewpub Tasters of America </h1>
      <a href="bio.html"> 
        <img alt="my mugshot" align=bottom src="mypicture.gif">
      </a>
      Click on my picture to get my biodata
    </body>

Homepages

You now want to know where to place files that others can view: your homepages.

In Unix, you need to create a subdirectory off of your main directory and call it public_html.

Note: webservers differ in what they want you to use as "home" directories.

In the subdirectory public_html, create a file called index.html. When someone accesses your homepage by just giving your username, it is this file that is brought up. Thus, the URL

    http://www.seas.gwu.edu/~simha

is really the file public_html/index.html, which the webserver knows to get. (You don't have to understand this last point). Make sure that you grant public access to this directory and to the files you place in the directory.

You can now place all other files you want others to access in the directory public_html. For example, if I create my CV in an HTML file called cv.html, put the file in the directory public_html, and refer to it by the URL:

    http://www.seas.gwu.edu/~simha/cv.html

then others can `open' this URL and get the file.

Advanced Stuff

Creating tables: Here is an example of a table in ascii that we will write in HTML:

    BEER                  RATING
                     Chilled  Cool
    ----------------------------------
    Dork Pilsener    5.6      6.7
    Blech Dark       7.3      7.1
    Bugwizer         1.2      0.5
    Handiken         4.4      6.5

Now, in HTML:

    <table border>
      <th> BEER </th>  <th colspan=2> RATING </th>  <tr>
      <th>  </th>  <th> Chilled </th> <th> Cool </th> <tr>
      <td> Dork Pilsener </td>  <td> 5.6 </td>  <td> 6.7 </td> <tr>
      <td> Blech Dark </td>  <td> 7.3 </td>  <td> 7.1 </td> <tr>
      <td> Bugwizer </td>  <td> 1.2 </td>  <td> 0.5 </td> <tr>
      <td> Handiken </td>  <td> 4.4 </td>  <td 6.5 </td> <tr>
    </table>

And now the explanation:

Use the border keyword if you want lines boxing in the table and its rows and columns.
Each row of the table is ended with a <tr>.
If no headings are desired, simply place each entry within table data tags, for example, <td> Blech Dark </td>.
Use table heading tags for headings; to span multiple columns use the colspan keyword, as above.
To span multiple rows, use rowspan (not shown in above example).

Including files:

Editing a large HTML document everytime a change is required can be annonying. Better to use a bunch of includes and edit the includes whenever needed. Some includes will never changes; others will be changed frequently (perhaps even by programs). For example:

    <body>
      <h1> The Next President of the United Brewpub Tasters of America </h1>
      <a href="bio.html"> 
        <img alt="my mugshot" align=bottom src="mypicture.gif">
      </a>
      Click on my picture to get my biodata

      <h1> What's new in this homepage </h1>
        <!--#include file="whatsnew.html">
    </body>

The

whatsnew.html

is continually updated.

Fonts and colors.
The <font>tag can be used to specify a font type and a color. (We have already seen how to specify font styles like italic). The color attribute sets the color of the font. The string is really an RGB value (intensities of red, blue and green). Here are some common colors:

    <FONT COLOR="#000000">black </FONT>
    <FONT COLOR="#FFFFFF">white</FONT>
    <FONT COLOR="#FFFF00">yellow</FONT>
    <FONT COLOR="#FFDEAD">beige</FONT>
    <FONT COLOR="#CD853F">dark beige</FONT>
    <FONT COLOR="#00FF00">bright green</FONT>
    <FONT COLOR="#008000">dark green</FONT>
    <FONT COLOR="#00FFFF">light blue</FONT>
    <FONT COLOR="#000060">navy blue</FONT>
    <FONT COLOR="#000080">dark blue</FONT>
    <FONT COLOR="#FFB6C1">light pink</FONT>
    <FONT COLOR="#FF1493">dark pink</FONT>
    <FONT COLOR="#FF0000">red</FONT>
    <FONT COLOR="#B22222">dark brick red</FONT>
    <FONT COLOR="#FFF8DC">lightly off-white</FONT>
    <FONT COLOR="#FA8072">flesh-pink</FONT>
    <FONT COLOR="#FFF8DC"></FONT><FONT COLOR="#00FF00"></FONT>

Fonts also come in "faces" such as

roman

helvetica

. Use the

face

attribute for a font family and the

size

attribute for a size.

Note that both face and size depend entirely on what the browser supports. For example, Netscape 3.0 only supports roman and helvetica. Here are some examples:

   <font face="verdana" size=3> [verdana] </font>
   <font face="arial" size=3> [arial] </font>
   <font face="helvetica" size=3> [helvetica] </font>
   <font face="roman" size=3> [roman] </font>
   <font face="roman" size=1> [roman1] </font>
   <font face="roman" size=5> [roman5] </font>
   <font face="helvetica" size=4> [helvetica4] </font>

Background colors.
Background color can be specified with several HTML tags. For example, the background of the entire document can be set inside the <body>tag:

    <body bgcolor="#FFFFFF">

Similarly the background for table or even a row inside a table can be set. (More detail below).

Advanced tables. Since HTML provides very few formatting commands and almost none for layout, tables are really the only way to create interesting layouts. For example, suppose you want to leave a few lines of empty space between paragraphs. There is no "vspace" type of HTML tag. Instead, you can create an empty table of the desired height:

    <table height=30>
      <tr>
        <td>
        </td>
      </tr>
    </table>

If you look at the source for almost any sophisticated page, you will find tables being used for layout. Typically, a top "bar" contains information related to an organization and a "side bar" contains navigational help.

Use cellpadding and cellspacing to determine the white space around the table data and the spacing between individual cells.

Use border to specify the thickness of a border. For example:

    <table cellpadding=2 cellspacing=5 border=10>
      <tr> 
        <td>
          A1
        </td>
        <td>
          A2
        </td>
        <td>
          A3
        </td>
     </tr>
     <tr>
        <td>
          B1
        </td>
        <td>
          B2
        </td>
        <td>
          B3
        </td>
     </tr>
   </table>

Although a table will expand to contain its elements, you can fix the width and height, with

width

and

height

tags, e.g.

    <table cellpadding=10 cellspacing=3 border=1 width=100>
      ...
    </table>

Likewise, a background for the table can be specified with the bgcolor attribute, e.g.,

    <table cellpadding=10 cellspacing=3 border=1 width=500 bgcolor=FFFF00>
      ...
    </table>

Suppose you want to color the border. You can do this by placing a table inside another. For example, to get the borders to be red, place the table inside another table whose background color is red.

    <table bgcolor=DC143C>
      <tr>
        <td>
           <table border=1>
             ...
           </table>
        </td>
      </tr>
    </table>

Use

rowspan

and

colspan

for entries that span multiple columns or multiple rows.

Similarly use the align attribute to decide how each entry is justified within a cell.

The following complex example demonstrates many of these features: Here,

the td-tag for A1 has colspan=2, align=right.
The td-tag for A2 has align=center.
The td-tag for B2 has bgcolor=FFDEAD (beige).
The td-tag for B3 has width=100 which forces the width of that column to be 100.

   <table bgcolor=DC143C>
     <tr>
       <td>
         <table cellpadding=10 cellspacing=3 border=1 width=500 bgcolor=FFFF00>
           <tr> 
             <td colspan=2 align=right>
               A1
             </td>
             <td align=center>
               A2
             </td>
          </tr>
          <tr>
            <td valign=bottom>
               B1
            </td>
            <td bgcolor=FFDEAD>
               B2
            </td>
            <td width=100>
               B3
            </td>
         </tr>
        </table>
       </td>
     </tr>
   </table>