How to make HTML documents

This is a very brief introduction on how to write HTML documents for the WWW. It was written by Scott Van Bramer for a faculty development workshop at Widener University.

About HTML Tags

HTML is a "markup" language that tells a browser what to do. These tags are placed within < and > symbols. The browser looks for these symbols and uses them as instructions. Most tags include two parts. For example <B>BOLD</B> is displayed by a browser as BOLD. The first tag begins the bold and the tag with the slash [/] is the end of the bold. HTML tags are not case sensitive. <B></B> is equivalent to <b></b>. To see how specific effects are produced, viewer the HTML source for this document.

Example of HTML code

Open Netscape and go to any web page. I would suggest looking at the HTML Code Examples. This page provides examples of many HTML codes and shows how they are rendered in the browser. To see the HTML code click on "view" and then "frame source". This will display the raw HTML code that Netscape uses to determine the layout of the page. You can also see the raw HTML code. This workshop is to teach you how to write this code. If it looks confusing, don't worry, we will be using some tools to make it easier.

Basic HTML Tags

<HTML> </HTML>
This indicates the beginning and the end of the HTML markup code. If these are not present, some browsers may display the entire document as text. The <HTML> tag should be the first thing in the document and the </HTML> tag should be the last element.

<HEAD> </HEAD>
These tags indicate which part of the document contains the header information. Information between these tags is not displayed by the browser.

<!-- created: 5/9/96 6:05:51 PM -->
Any text within <!-- and --> is not displayed. This is just for comments.

<TITLE> </TITLE>
These tags indicate the title of the document. This is displayed at the top of the Browser window, used for identifying bookmarks, and used for searching. The title should be short and descriptive. This tag is important for making a user friendly document.

<BODY> </BODY>
The body tag indicates the information to be displayed by the browser.

<H1> </H1>
These tags are for a level 1 heading. The effect produced by different level headings are shown below.

Level 1 Heading

and some text

Level 2 Heading

and some text

Level 3 Heading

and some text

Level 4 Heading

and some text
Level 5 Heading
and some text
Level 6 Heading
and some text followed by a paragraph

and then some more text followed by a line break

This header is centered

<HR>
This is a horizontal rule

Last Updated: Thursday, May 09, 1996
Provides information about when the document was last updated. This helps readers quickly determine if any changes have been made.

HTML layout basics

Several different codes are available to help with basic document layout. These include:
  1. Headers. <H#> </H#> Where # is any number between 1 (the largest header) and 6 (the smallest header).

  2. Breaks <br>. This tag forces a carriage return in the browser. This is an important consideration in layout because browsers DO NOT pay attention to a regular line feed. Normally a browser will control the line wrap just like a word processor. The <br> tag is equivalent to a line feed.

    1. For example if your HTML document looks like this: A set of lines in an HTML document
      that look like they are divided into three
      lines of text.
    2. Will be displayed by the browser as:

      A set of lines in an HTML document that look like they are divided into three lines of text.

    3. To avoid this the HTML should look like this:

      A set of lines in an HTML document<br>
      that look like they are divided into three<br>
      lines of text.

    4. Will be displayed by the browser as:

      A set of lines in an HTML document
      that look like they are divided into three
      lines of text.

  3. Paragraph <p>. This tag is used to define a paragraph. Text within a paragraph is wrapped by the browser and the end of the paragraph is double spaced. This tag bay be used two different ways. You may simply place a <p> tag at the end of a paragraph. Or you may place the paragraph within a set of <p> </p> tags.

  4. Horizontal Rule <hr>. This tag places a line across the screen and is very useful for breaking up documents. This is especially important for making a document easy to read on a computer screen. Although a page of text on paper is just fine for reading, it is very difficult to read a page of text on a computer screen. Headers and horizontal rules important for presenting an effective document.

  5. Preformatted text <PRE></PRE>. Browsers normally display text using a proportional font (like the Times Roman Font this document is probably displayed in) where different letters get different spacing. This is usually easier to read, but sometimes it makes it very difficult to setup a document to look the way you want. One point that frequently causes problems for first time users is that browsers will not let you place two spaces in a line. The browser also ignores carriage returns.
     If  you  try  to  do  this.
    The browser will return.

    If you try to do this.

    This may be avoided by using preformatted text. 

    This forces the browser to use a typewriter font (like courier) 
that looks like this.  Any carriage returns  spacing       like this
and


white space is preserved.
    It is not as easy to read, but it is easier to control how something looks.

Basics of text formatting

The following HTML codes are available for controlling the appearance of text.

<B></B>
This text is Bold

<I></I>
This text is italic

<SUP></SUP>
This text is superscript

<SUB></SUB>
This text is subscript

<TT></TT>
This text is in a typewriter font.

<U></U>
This text is underlined (Does not work with most browsers)

<BLINK></BLINK>
This makes text blink on and off. This is usually irritating to the viewer and is often a topic of hate mail. Please, only use it if you must.

<EM></EM>
This text has emphasis (Browser dependent, but usually displayed as italic).

<STRONG></STRONG>
This text has strong emphasis (Browser dependent, but usually displayed as bold).

<FONT SIZE="+2" COLOR="GRAY" FACE="TIMES NEW ROMAN, ARIAL"> </FONT>
It is possible to specify many different features of a font. Here the font size for the text is increased by 2 points; the color of the text is specified as gray; the font is specified as Times New Roman (Arial is the alternative if this is not available). Some of these features can cause problems in a document. Specifying a font will cause unpredictable results if the browser does not have the specified font. Specifying a color can cause problems with printing (and can be visually repulsive). For example white text like this WILL not print.

<CENTER></CENTER>
This tag center justifies any text or figures. This tag is only used by Netscape.

Lists

These are used to make a series of points for structures similar to an outline. The list consists of several different tags. The list header uses the (<lh>) tag. Each list item is preceded by a list item (<li>) tag. And the list is defined using a list tag. Possible tags include:
<ol> </ol>
This is an ordered list with sequentially labeled list items. Ordered lists are useful for laying out an ordered list that looks like this:

    The list header
  1. This is the first point
  2. This is the second point
  3. This is the third point
    1. it is possible to nest points like this subpoint
    2. and this second subpoint.
  4. and return to the fourth point

In a list you may want to specify the type of symbol used for each level.

  1. This list is in capital letters
  1. This list is in small letters
  1. This list is in large roman numerals
  1. This list is in small roman numerals

<ul> </ul>
This is an unordered list for items in no specific order. The next type of list is an unordered list. It is formatted like an ordered list, but the list items are displayed with bullets rather than sequential numbers (or letters). As with ordered lists the default is for the browser to choose the labels, but they may be specified.
  • This is a default unordered list
  • This is the second element
    • This is a nested sublevel
    • With a second statement

<dl> </dl>
This is a definition list which contains the following items
<dt>
Definition Titles (Major Points)
<dd>
Definition Items (Indented from definition titles)
The formatting of this list is a little different as is shown below.

This is the first point (definition title)
with one subpoint (called a definition, definition)
the second subpoint should be separated by a line break (<br>).
This is the second point
with a subpoint

Links (or anchors)

Links have several different features. They are used to direct a browser to another location. This is the feature that makes the web so useful. These links can be to anything on your computer, your server, or anywhere on the WWW. The URL (Universal Resource Locator) in webedit makes these much easier to produce. Link elements include:

<A HREF="http://science.widener.edu/">description</A>
  1. The <A> and </A> is for the beginning and end of the "anchor". An anchor connects this HTML document to something else.

  2. Action. (HREF in the above example)
    1. HREF Hypertext REFerence. Tells the browser that this is a link.
    2. NAME Defines the name of a location within a document. This is then used by a HREF tag to jump to a specific location within a document. The location in the document that you want to reference must have a NAME tag. The syntax for this tag is:

      <A NAME="beginning">

  3. Protocol. (http:// in the above example) This tells the browser what to do with the anchor.
    http://
    Chemistry 146 This is a link to a document on a web server. For standard usage the link should be descriptive. Avoid saying "click here", the link is highlighted by the browser and it is obvious where to click.

    ftp://
    Acid Spreadsheet (*.wk4 155k) This is a link to a file on an FTP server. *.wk4 in the name is a clue that this is a Lotus spreadsheet. The 155k is the file size. (this is good form so someone with a modem does not try to download a 10 MB file.)

    mailto://
    svanbram@science.widener.edu This link sends an e-mail message using the mail software for the browser. Note: The student labs at Widener are not configured with mail, so do not expect students to use this link in the lab.

  4. The address. This tells the browser where to go. (These may be copied and pasted from the location bar in the browser.) The URL builder is helpful for writing these. Typically the begin with the name of ther server (science.widener.edu) and are followed by the file path ( /svb/htmltalk/ ) using the unix / separator for directories [Rather than the dos \ separator]. If a file is not specified (testdoc.html) the browser will return a directory listing. If there is a file named index.html, that HTML document is returned.

    The address may also specify a location in the document to go to. This location must be defined with a NAME tag (detailed above). There is a name tag at the top of this document and you may use link to go to the beginning of the page. Elements of this tag include:

    <A HREF="#beginning">beginning</A>

    For the address "#beginning". The # tells the browser that this is a location in the document. This location does not have to be within the current document.

    The example show below will jump do a section named "links" in the document "testdoc.html" on the server "science.widener.edu" in the file directory "svb/htmltalk". Examples of links The link may also be formatted like this: Examples of links. The HTML code for these two examples is shown below:

    <A HREF="http://science.widener.edu/svb/htmltalk/testdoc.html#links">Examples of links</A>

    <A HREF="http://science.widener.edu/svb/htmltalk/testdoc.html" NAME="links">Examples of links.</A>

  5. The description. This part is displayed by the browser.

    Figures

    Most browsers can view two different types of graphics files. These two different file types have different strengths and weaknesses. The figures may be located at any location on the web, you just have to create a link to the file. Keep in mind that graphics files may be very large. This causes very slow downloads that may try a reader's patience.

    Graphics files may be found by searching the web. A number of large libraries are available. You may also use clipart, drawing programs, or a scanner to create files.

    GIF (Graphical Image Format). This format works best for line art and small images. The image below is created with the following HTML code:

    <IMG SRC="oldmain.gif" WIDTH=200 HEIGHT=112>

    JPEG (Joint Photographic Experts Group). This format works best for photographs and color images. Some resolution is lost for line art (lines are not a crisp).

    <IMG SRC="oldmain.jpg" WIDTH=540 HEIGHT=303>

    Because images files are very large it is not "good form" to place a large image in a document. A common solution is to use a small "thumbnail" of the image that loads quickly and gives the viewer some idea what the image is. This is linked to the full size figure for interested viewers. Notice the blue border around the image below. This shows that it is a link. THE HTML for this link is:

    <A HREF="oldmain.jpg"><IMG SRC="oldmain.gif" ALT="Text for non-graphics browsers" WIDTH=100 HEIGHT=56></A>
    Text for non-graphics browsers

    Tables

    Tables are a useful feature for formatting information. These are a bit tricky to set up but with the table builder in Webedit it is easy to get started. The major tags include:

    <TABLE WIDTH=60% ALIGN=center BORDER></TABLE>
    The tags to define the beginning table, the width, the alignment, the border, and the end of the table.

    <CAPTION ALIGN=top></CAPTION>
    The table caption

    <TR></TR>
    A single row of the table.

    <TH></TH>
    A single element (cell) of the table that is a header for a column or row. This element is usually displayed with a bold font and centered in the cell.

    <TD></TD>
    A single data element (cell) of the table.

    A finished table looks like this:

    Table Caption
    Top Col 1 Top Col 2 Top Col 3
    data 1a data 2a data 3a
    data 1b data 2b data 3b
    data 1c data 2c data 3c

    Counter and usage statistics

    1. You may add a counter to your web page by inserting the following code. Replace "USERID" with your login ID (i.e. sev0001)
      <img src="/cgi-bin/Count.cgi?df=USERID.dat">

    2. Statistics about web page usage are available for Muse at: http://muse.widener.edu/stats

    Controling access

    This feature is under development.

    Maintenance

    I highly recommend that you periodically browse through your web pages to find any old links that are no longer valid. There are software programs that will automate this process. I use a program called LinkBot.
    This document was prepared by
    Scott Van Bramer
    Widener University
    Department of Chemistry
    svanbram@science.widener.edu
    Last Updated 5/20/98