How to make HTML Documents

Basic HTML Features for Web Pages

This is a very brief introduction on HTML written by Scott Van Bramer at Widener University. You do not have to know HTML to write web pages. But if you understand the basic features of HTML, you understand how web pages work. This will help you avoid many problems as you learn to create web pages. Be aware that not all browsers recognize all HTML tags. Each company has added tags that are not a part of the standard HTML to add features to their browser. You should take a look at your pages with several different browsers to be certain that your viewers will not encounter any problems.

About HTML Tags

HTML is a markup language that tells a browser what to do. The markup 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 <B> tag begins the bold and the </B> tag turns the bold off. HTML tags are not case sensitive. <B></B> is equivalent to <b></b>. To see how specific effects are produced, view the HTML source for this document.

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.
: Any text within  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 by search engines. The title should be short and descriptive. This tag is important for making a user friendly document that people can easily find.
<BODY> </BODY>: The body tag indicates the information to be displayed by the browser.

Document Layout Tags

Several different codes are available to help with basic document layout. These include:

Headers. <H#> </H#> Where # is any number between 1 (the largest header) and 6 (the smallest header). Examples are given below.
<H1>First Heading</H1>
First Heading
<H2>Second Heading</H2>
Second Heading
<H3>Third Heading</H3>
Third Heading
<H4>Fourth Heading</H4>
Fourth Heading
<H5>Fifth Heading</H5>
Fifth Heading
<H6>Sixth Heading</H6>
Sixth Heading
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 to fit the screen or the printed page. Since there are lots of different screen and printer sizes, you should not include breaks in a paragraph. The <br> tag is equivalent to the "enter" key.
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.
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 may 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.
<CENTER>Center Text</CENTER>

Center Text
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 break a document into small easy to read pieces.

Text Formatting Tags

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

<B>This text is Bold</B>: This text is Bold
<I>This text is italic</I>: This text is italic
This text is<SUP> superscript</SUP>: This text is^superscript
This text is <SUB>subscript</SUB>: This text is _subscript
<EM>This text has emphasis </EM>: This text has emphasis (Browser dependent, but usually displayed as italic).
<STRONG>This text has strong emphasis</STRONG>: This text has strong emphasis (Browser dependent, but usually displayed as bold).
<FONT SIZE="+2" COLOR="GRAY" FACE="TIMES NEW ROMAN, ARIAL">It is possible to specify many different features of a font </FONT>: It is possible to specify many different features of a font. Here the font size is increased by 2 points; the color is specified as gray; the font name is Times New Roman (Arial is the alternate). Some of these features can cause problems in a document. Specifying a font can cause unpredictable results if a computer does not have that font. Specifying a color can cause problems with printing. For example:
"<FONT COLOR="#FFFFFF">White text like this </FONT>" will not print or display on many browsers.: "White text like this " will not print or display on many browsers.

List Tags

These are used to make a series of points for structures similar to an outline. The list consists of several different tags. There are three common types of lists.

Ordered List

The first is the ordered list, which is used as an outline where the points are numbered. The list has three basic tags.

<OL> The beginning of the ordered list.
<LI> The list item for each item in the list.
</OL> The end of the ordered list.

Here is the code for an example.

<OL> The beginning of the ordered list.
<LI> The first item for the list.
<LI> The second item for the list.
</OL> The end of the ordered list.

That will display as:

The first item for the list.
The second item for the list.

The end of the ordered list.

You can nest subpoints and specify the symbol used for each sublevel by adding the "TYPE" specification. For example.

<ol>
<LI> This is a main point
<ol TYPE=A>
<LI>This is a subpoint
<ol TYPE=a>
<LI>This is a sub subpoint
<ol TYPE=I>
<LI>This is a sub subpoint
<ol TYPE=i>
<LI>This is a sub subpoint
</OL>
</OL>
</OL>
</OL>
</OL>

This is a main point
1. This is a subpoint
  1. This is a sub subpoint
    1. This is a sub subpoint
      1. This is a sub subpoint

Unordered List

The unordered list is for items in no specific order. It is formatted like an ordered list, but the list items are displayed with bullets rather than sequentially. As with ordered lists the labels may be specified.

<UL> The beginning of the unordered list.

<LI> The list item for each item in the list.

</UL> The end of the unordered list.

Here is the code for an example.

<UL> The beginning of the unordered list.
<LI> The first item for the list.
<LI> The second item for the list.
</UL> The end of the unordered list.

That will display as:

The first item for the list.
The second item for the list.

The end of the unordered list.

You can nest subpoints and specify the symbol used for each sublevel by adding the "TYPE" specification. For example.

<ul>
<LI> This is a main point
<ul TYPE=disc>
<LI>This is a subpoint with a disc
<ul TYPE=circle>
<LI>This is a sub subpoint with a circle
<ul TYPE=square>
<LI>This is a sub subpoint with a square
</UL>
</UL>
</UL>
</UL>

This is a main point
- This is a subpoint with a disc
  - This is a sub subpoint with a circle
    - This is a sub subpoint with a square

Definition List

A definition list creates a list with hanging indents. This can be very useful for formatting and layout, but they are a bit confusing. The basic tags for a definition list include:

<dl> Beginning of a definition list
<dt> Definition Titles (Major Points)
<dd> Definition Items (Indented from definition titles)
</dl> End of a definition list

Here is an example of the code for a definition list.

<DL>
<DT> This is the first point (definition title)
<DD> with one subpoint (called a definition, definition)(<br>)
<br> the second subpoint should be separated by a line break .
<DT> This is the second point
<DD> with a subpoint
</dl>
And the end of the list
This code will display as:

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

And the end of the list

Link and Anchor Tags

Links direct a browser to another location. These links can be to anything anywhere on the Web. This makes the web such a useful tool since because documents can point to additional information. A basic link looks like:

<A HREF="http://science.widener.edu/~svanbram/">Scott Van Bramer's Web Page</A>

And appear in a browser as:

Scott Van Bramer's Web Page

The elements here include:

Action - (HREF in example)
1. HREF - Hypertext REFerence. Tells the browser that this is a link
2. NAME - Tells the browser to mark a location in a document with a name. This allows the HREF action to link to a specific location within a document. Place this tag at the location you want to jump to. The syntax for this tag is:
  <A NAME="end">
  <A NAME="return to here">
  The text within quotes is the name of the location. The name is not displayed by the browser, but links can point to it. There is a Name tag here with the name "return to here": and another tag with the name "end" at the end of this document.
  The HTML below will jump to the end of the document. There is a link at the very end that will return to this point.
  <A HREF="#end">Goto the end</A>
  and displays as:
  Goto the end
Protocol. (http:// in the above example) This tells the browser what type of server the link points to. This lets the browser know how to talk to the server. Options include:
- http:// This is a link to a document on a web server.
- ftp:// This is a link to a file on an FTP server.
- file:// This is a link to a file on the browser's computer (The computer the student is sitting at).
- mailto:// This informs the browser that the link is an e-mail address. If your browser is configured correctly, clicking on this link will open up an e-mail message to the address. For example the link svanbram@science.widener.edu ends an e-mail message to me. If students are using a computer in a campus laboratory, this feature may not work as you intended.
The address. This tells the browser where to go. For example the address for this page is
science.widener.edu/svb/htmltalk/ccce/introbasic.html
Addresses may be copied and pasted from the location bar in the browser. Typically the begin with the name of the server (science.widener.edu) and are followed by the file path ( /svb/htmltalk/ccce/) and a file name (introbasic.html ). If a file name is not specified (introbasic.html) the server will return a directory listing. If there is a file named index.html in the directory the server will return that file. The main document in a directory usually has the name index.html.
The address can also specify a location in the document defined with a NAME tag (detailed above). This example shows an address that will jump to a location named "link tags" in the document "basic.html" on the server "science.widener.edu" in the file directory "svb/htmltalk/ccce".
<A HREF="http://science.widener.edu/svb/htmltalk/basic.html#link tags">Examples of links</A>
The link will appear in the browser as a link to the beginning of this section
Description. 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.
Absolute vs Relative Addresses. A common source of confusion when writing HTML is the distinction between absolute addresses and relative addresses. It is possible to list addresses two different ways in a link. The difference can be very useful, but also confusing. The first is to use the absolute address. In an absolute address the entire URL is specified. This is analogous to mailing something and giving the complete postal address. The second is to use a relative address. A relative address is analogus to saying deliver the mail two houses down the street. For beginners, I suggest using absolute addresses. Relative addresses can, however, be very useful because they allow you to make references that are relative to a given directory structure. This allows you to have a seperate copy of a web site on your own computer.

Figure Tags

In addition to text, web pages can include figures. These figures may be at any location on the web, you just create a link to the figure and specify where to place it in the web page. If you use a figure from someone else, always as for permission. If you create your own graphics, keep the file size as small as possible. Large graphics files will cause slow downloads that try a reader's patience.

Most browsers can view two different types of graphics files. The GIF (Graphical Image Format) file format works best for line art and small images. This file type preserves sharp lines and gets excellent compression when there are large spaces with the same color. The gif image below is inserted with the following HTML code:

Proton NMR Spectrum of citronellal

Notice that the HTML code specifies the width and height of the image. This allows the browser to format the rest of the web page while the image downloads. If the image size is not specified the browser must wait to render the rest of the document. The ALT command in the tag specifies text to displayed until the graphic downloads. It is also important for readers with limited vision who rely upon a text to voice program to hear a web page.

The JPEG (Joint Photographic Experts Group) file format works best for photographs and color images. Some resolution is lost for line art (lines are not a crisp) but file size for photographs is dramatically reduced. This compression works by using shades of color to reduce the file size.

Taking a sextant reading

Because images files can be large, spend some time editing the graphic so that it is as small as practical and use as much compression as you can. If you really need to use a high resolution image it is good form to include a thumbnail in the web page. This small image is a link to the full size image. Interested readers can then download the high resolution figure.

In addition to figures, many other multimedia files may be inserted into a web page. This includes three dimensional renderings of molecules, spectra, video clips, and more.

Table Tags

Tables are a useful feature for formatting information. These are a bit tricky to set up but with most software it is easy to get started. Be careful exporting directly to HTML from spreadsheets and wordprocessors. Many of these programs produce HTML tables that do not work well on many browsers. Adding specifications to the table so that it is perfect on your computer will cause problems with other display sizes. Simple table layouts are much more robust. The major table 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.

The code for a finished table looks like this:

<TABLE WIDTH=60% ALIGN=center BORDER>
<CAPTION ALIGN=top>
Table Caption</CAPTION>
<TR>
<TH>Col 1 header</TD>
<TH>Col 2 header</TD>
<TH>Col 3 header</TD>
</TR>
<TR>
<TD>data 1a</TD>
<TD>data 2a</TD>
<TD>data 3a</TD>
</TR>
<TR>
<TD>data 1b</TD>
<TD>data 2b</TD>
<TD>data 3b</TD>
</TR>
<TR>
<TD>data 1c</TD>
<TD>data 2c</TD>
<TD>data 3c</TD>
</TR>
</TABLE>

And the table itself displays in a browser as:

Table Caption
Col 1 header Col 2 header Col 3 header

data 1a data 2a data 3a

data 1b data 2b data 3b

data 1c data 2c data 3c

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

Counter Scripts

Most web servers allow counters to be inserted into web pages. This is a handy way to track usage of a web page. The exact details are a function of the software on your web server. It usually involves CGI scripts accessed using special links. See your system administrator for details. The counter on this page uses the following script.

Controlling Access to Web Pages

It is also possible to control access to web pages. There are several different ways to do this. Consult your system administrator for exact details. Most web server software allows access to be restricted by password or by domain. If a web page is restricted by password the user will be prompted for a userid and password. The userid and password must match a list of approved users and passwords. This works well but is somewhat tedious to setup and maintain. Restricting access by domain limits access to a range of IP addresses. For example restricting by domain to 147.31 limits access to computers connected to the Widener University network. No password is required for domain access, so it is easier for students who are on campus. However, if students are off campus they will not be able to view the web page. I use domain restriction for multimedia files to satisfy the copyright concerns of the publisher.

Web Page 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 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 Tuesday, January 15, 2002 4:37:01 PM This page has been accessed times since 5/29/96 .

Return to links