An Introductory HTML Tutorial

Tom O'Haver
Professor Emeritus
Department of Chemistry and Biochemistry
The University of Maryland at College Park
Email: toh@umd.edu
http://www.wam.umd.edu/~toh/
December, 1995. Updated May, 2008.

Table of contents

Required elements
Text content
Text Formatting
Graphics
Hypertext Links
Sound and video links
Headings
Indented paragraphs and lists
Background and text color
Background Patterns
Netscape Tables
Reference Table of HTML Tags
How to Make a Web Page
Required elements
HTML files are just plain text files - they can be prepared using any plain text editor (such as Notepad on the PC or SimpleText on the Mac). HTML files have some required elements. Every HTML file must begin with: 
<html>
<head>
<title>TITLE OF WINDOW</title>
</head>
<body>
where "TITLE OF WINDOW" is the text that you want to appear in the title bar of the browser window. This will also be the way the page is listed in Netscape's Go menu and in the Bookmarks menu, so you should choose this name with some care. Every HTML file must end with 
</body>
</html>
The content of the page goes in between the <body> and the </body> tags.

You can view an HTML file in a Web browser (Netscape or Internet Explorer) by opening it with the Open command in the File menu. When developing a Web page, it's convenient to keep the Web browser and the HTML file open in a text editor at the same time. If you want to make a change, click on the text editor window, edit the HTML text, Save it, then click on the Web browser window and click on the Reload button.

Text content
Plain text content can be typed (or Copied and Pasted from a word processor) directly into an HTML file. It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words. For example, the following text: 
It is important to realize that browsers will 
ignore 
all of the formatting and even the carriage 
returns,
 tabs, and       multiple       spaces       between       words.
will be rendered on a Web page like this:

It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words.

In order to force a line break, you must insert a <br> into the text, and to create a paragraph separation (white space between paragraphs) you must insert a <p> between the paragraphs. If you have a block of text that is already preformatted with a monospaced font and multiple spaces and line breaks (a table, for example), you can preserve the formatting by surrounding the text in <pre> and </pre> tags. The text between those tags will be rendered in a monospaced font and line breaks and multiple space runs will be preserved.

You can indent the left margin of a block of text by surrounding it in <ul> and </ul> tags. You have no control over the right margin; the text will word-wrap to fit the width of the browser window set by the user. Moreover, unless otherwise specified, the text will be rendered in whatever font has been set by the browser user as part of the browser preferences. To force the browser to use a monospaced font, surround the text in <tt> and </tt> tags.

Text Formatting
Text formatting options are controlled by pairs of tags which you use to surround the effected text, such as: 

Effect           HTML tags                          What it looks like


boldface          <b>example</b>                        example
Italic            <i>example </i>                       example
bold italic       <i><b>example</i></b>                 example
larger font       <font size="+1">example</font>        example
larger font       <font size="+2">example</font>        example
smaller font      <font size="-1">example</font>        example
Large letter      <font size="+3">E</font>xample        Example
Color text        <font color="#ff0000">example</font>  example
Centering         <center>example</center>               example
subscript         H<sub>2</sub>O                        H2O
superscript       cm<sup>2</sup>                        cm2
Symbol font       <font face="symbol;">abcde</font>     abcde


Note: subscripts and superscripts are rendered correctly in Netscape version 2 
or higher, but not in Netscape version 1 or 1.1.
Graphics
The icons and pictures on Web pages that appear right on the page along with the text (rather than in a separate window) are called "in-line graphics". They are actually separate files, in either in GIF or JPG format, that are referred to on the page by an "img src" tag. This is simplest if the graphic files are stored in the same directory as the HTML file that refers to it. For example, <img src="sun.gif"> will display the GIF file "sun.gif", if that file is in the same directory as the HTML file:

If the graphic file is in a subdirectory (folder), then the subdirectory name must be specified. For example, if the file "sun.gif" is in a subdirectory called "graphics", then you must write: <img src="graphics/sun.gif">. Make sure the file and subdirectory names are exact, even with respect to capitalization. Do not use spaces in file names.

Graphics are imbedded right in the text, unless <br> or <p> tags are used to force line breaks. Thus, the following HTML code:
The blue balls <img src="blueball.gif"> in the molecular model represent nitrogen atoms.
would be rendered like this:

The blue balls in the molecular model represent nitrogen atoms.

JPG files are handled the same way; if the graphic file is named "group.jpg", then the tag would be <img src="group.jpg">.

You can center a graphic on the page by surrounding it in <center> and </center> tags.

Graphics can be aligned on the left or the page by using the modified tag:
<img align=left src="sun.gif">
This is illustrated by the image on the left of this text. Or you can align a graphic on the right of the page by using the tag:
<img align=right src="sun.gif">,
as shown on the right. When using the Netscape browser, the accompanying text will automatically "wrap around" the images (If you are viewing this page on Netscape, you will be able to see this effect).

For more information about Web graphics, click here.

Hypertext Links
Hypertext links (also called hyperlinks or "hot" links) are text or graphics items that act as "buttons" that the user can click on to display another Web page (or another portion of the same page). Text links are shown as underlined text on the Web page. For example, to create a link to another HTML page called "chapter1.html" that is stored in the same directory (folder), you might write:

This is discussed in <a href="chapter1.html">Chapter 1</a>.

which is rendered like this:

This is discussed in Chapter 1.

Or you could write

Click <a href="chapter1.html">here</a> to go to Chapter 1.

which would look like this:

Click here to go to Chapter 1.

In either case, if the user clicks on the underlined text, chapter1.html is displayed. The general template for a hyperlink is <a href=""></a>. You simply put the file name between the quotes "" and the link text (the text that you want to act as the hot link) between the > and the <.

If chapter1.html is stored in a lower-level directory called "chapters" (a subdirectory within the current directory), then the directory name must be specified like so: <a href="chapters/chapter1.html"> . If chapter1.html is stored in a higher level directory (one level up from the current directory), then you write: <a href="../chapter1.html">.

If the page that you wish to go to is located on another WWW site or in a completely different area of that same server, then you can specify the complete "http" address. For example:

Pictures of the First Family may be viewed on the <a href="http://www.whitehouse.gov">White House Home Page</a>.

which looks like this on the page:

Pictures of the First Family may be viewed on the White House Home Page.

(If you are viewing this page with a browser running on a networked-connected computer, this link should work; you can click on it to "go to" the White House Home Page. Then click the Back button to return to this page).

Another useful type of hot link is the "mailto:" link, which is used to send email to a specified address from within Netscape and other browsers. For example:

Click <a href="mailto:to2@umail.umd.edu">here</a> to send email to Tom O'Haver.

Click here to send email to Tom O'Haver.

If you click on the link text, a "send mail" dialog box will be displayed with the "To:" address already filled out to to2@umail.umd.edu. This assumes that your browser has been properly configured (in Preferences/Mail and News) for email by specifying you email address and a valid mail server.

You can also have graphic hot links. Suppose you have a small GIF file, named "Smallfranklin.GIF", of the facade of the Franklin Institute Science Museum in Philadelphia. You want to make that picture a hot link so that clicking on it will display the Franklin Institute Home Page, whose address is http://sln.fi.edu:80/. You do this by creating a hyperlink to http://sln.fi.edu:80/ and then placing a graphic tag <img src="Smallfranklin.GIF"> in the place where the link text would ordinarily go:

<a href="http://sln.fi.edu:80"><img src="Smallfranklin.GIF"></a>

The result is that the graphic is displayed with a border, which indicates that it is a hot link. If the user clicks on the graphic, the link is activated and the specified site is displayed. (If you are viewing this page with a browser running on a networked-connected computer, this link should work; you can click on the graphic to "go to" the Franklin Institute Home Page. Then click the Back button to return to this page).

Another good use of graphic hot links is to allow a large graphic to be accessed by clicking on a small "thumbnail" image. The use of the small image greatly reduces the time required to access the image. Users can decide for themselves whether to access the larger (and thus slower-loading) full-size image. For example:
<a href="Cheaart.JPG"><img src="Cheaicon.JPG"></a>
In this case "Cheaart.JPG" is the original full-size picture and "Cheaicon.JPG" is the smaller "thumbnail" image (created by reducing the original image by 4-fold in a graphics program such as Graphic Converter). Clicking on the small image brings up the original large version. (Click on the Back button to return to this page). The file size of the full-size image is 22 Kbytes, while that of the small thumbnail is only 3 Kbyes.

The above structures are examples of "nesting" one HTML tag within another. You can nest just about anything within anything in HTML to acheive combined effects. For example:

<FONT SIZE="+2"><i><a href="http://www.wam.umd.edu/~toh/Fairland.html"><img src="blueball.gif"> Fairland Elementary School</a></i></FONT>

Fairland Elementary School

This creates a large-font italic hyperlink with both graphic and text link (you can click on either the graphic or the underlined text).

Sound and video links
Sound and video links are hyperlinks that you click on to hear a sound or view a digital video clip. To hear a sound link you must have a sound-equipped computer ( a Mac or a PC with a sound card installed). To see digital video you must have a digital video capable computer (e.g. with Quicktime or Quicktime for Windows software installed).

Netscape 3.0 and Internet Explorer 3.0 have built-in support for the play-back of sound clips (in ".au", ".wav", and ".aiff" formats) and Quicktime digital video clips (in ".mov" format). Earlier versions of those browsers utilize external players or "helper" applications, which are small separate programs that are called by the browser when needed. For example, the most commonly used sound player for the Macintosh is "Sound Machine", which can play ".au" and ".aiff" files, the two types of sound files are used most often in Web pages. The most commonly used video players for the Macintosh are "Movie Player", which can play ".mov" files, and "Sparkle", which can play ".mpeg" files. These are all shareware or freeware programs that can be downloaded freely from various sources. Similar programs exist for Windows machines. The user is responsible for obtaining those helper applications and configuring the browser to use them. (In Netscape this is done in Options/General Preferences/Helper Applications). The Web page authors usually assume that most users have already set up their browsers for sound and video. For more information about presenting multimedia content on Web pages, click here.

Sound and video hyperlinks are constructed like just like conventional hyperlinks. For example:

<a href="sound1.au">[Click here to hear a sound bite]</a>

This creates a hyperlink to the sound file "sound1.au", assuming that it is stored in the same directory as the calling page.

[Click here to hear a sound byte]

When the user clicks on the link, the browser downloads the file, looks at the file extension (".au"), determines what helper application is designated for ".au" files, launches it (if it is not already open), and then loads and plays the sound file.

Video links work exactly the same way, except that the file name would be a ".mov" or ".mpeg" file. Here is a very short example. In either case, if the file is not where it is supposed to be, or if the browser is not configured for that file type, then it won't work.

Alternatively, you can integrate a sound player right into your Web page by using an "embeded" player controller:

<embed src="sound1.au" width=144 height=30 autostart=false>

where "sound1.au" is the name of the sound file. This puts a small player controller on your page that allows the reader to start and stop the sound at will. Here is an example, using the same sound file as above. This works only with recent versions of Web browsers. The same technique works with movie clips; simply replace the file name with the name of a MOV or AVI movie clip and increase the width= and height= numbers to equal the size of the entire video frame. The disadvantage of this technique is that the sound file (or movie clip) downloads as soon as the page is viewed, whether or not the reader intends to play it. This can slow down the viewing of pages, especially on a slow Internet connection.

You can create (digitize) your own sound and video files if you have the proper hardware and software. The helper application Sound Machine, for example, can record as well as play back sounds on any Mac with a microphone. Digitizing video requires the installation of an add-in video digitizer card and a suitable video source (camera or VCR). See "How to Make a Web Page" (http://www.wam.umd.edu/~toh/HowToMakeAWebPage.html) for instructions. Sound (and especially video) files tend to be very large and take a long time to download; therefore care should be taken to keep them as short and to-the-point as possible.

Headings
Headings can be used to create titles in various sizes. They are automatically left-aligned and followed by a line break. They come in 6 sizes (Note: the smallest heading size number is the largest, which seems a little backwards!):

<h1>Heading size 1</h1>

Heading size 1

<h2>Heading size 2</h2>

Heading size 2

<h3>Heading size 3</h3>

Heading size 3

<h4>Heading size 4</h4>

Heading size 4

<h5>Heading size 5</h5>
Heading size 5
<h6>Heading size 6</h6>
Heading size 6

Headings or any other text may be centered on the page by placing the text to be centered between <center> and </center> tags.

Indented paragraphs and lists
In order to create indented paragraphs, where the left margin is indented (moved to the right), surround the paragraph in <ul> and </ul> tags. Thus: 
<ul>
This is an example of an indented paragraph.  Note that the 
left margin is indented.  This is an example of an 
indented paragraph.  Note that the left margin is indented.
</ul>
produces the following result: The <ul> and </ul> tags may also be "nested". Thus: 
<ul>
This is an example of an indented paragraph.  Note that the left margin is indented.
This is an example of an indented paragraph.  Note that the left margin is indented.
<ul> 
Indented paragraphs can also be nested.    Note that the left margin is
indented
even more.  Indented paragraphs can also be nested.  Note that the left margin is
indented
even more. 
</ul>
This is an example of an indented paragraph.  Note that the left margin is indented.
This is an example of an indented paragraph.  Note that the left margin is indented.
</ul>
produces the following result: Bulleted indented list may be created by inserting a <li> tag before each bulleted line. Thus: 
Elements
<ul>
<li>main group
<ul>
<li>metals
<ul>
<li>Lithium<li>Sodium
</ul>
<li>non-metals
<ul>
<li>Carbon<li>Nitrogen
</ul>
<li>rare gases
</ul>
<li>transition metals<li>rare earths<li>actinides
</ul>
Compounds
<ul>
<li>Inorganic<li>Organic
</ul>
</ul>
produces the following result:

Elements

Compounds Note that each level of indentation automatically has its own bullet symbol. Recall that spaces, tabs, and line break characters within the text are ignored.
Background and text color
The default (standard) color scheme on Web pages is black text on a light gray background. If you get bored with that color scheme, it's easy to change it. Simply replace the <BODY> tag at the top of the HTML file with:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX">

where #XXXXXX are codes that determines the color of the background color (BGCOLOR) and text, respectively. Here are a few examples of some codes for familiar colors that can be used for background color or text color: 

000000 = black           ffffff = white          404040 = dark gray
808080 = medium gray     B0B0B0 = light gray     ff0000 = red
ff8080 = pink            00ff00 = green          80ff80 = pale green
0000ff = blue            8080ff = pale blue      ffff00 = yellow
ffff80 = pale yellow     ff00ff = magenta        00ffff = cyan
800080 = purple          401000 = brown          ff7000 = orange
To see how these background colors look, click here. You are not limited to these standard colors. Any other color you can imagine can be made by "mixing" the three additive primary colors red, green, and blue. As you can see from the above table of colors, the first two characters in the code determines the amount of red in the mix, the middle two control the green, and the last two control the blue. ("FF" is maximum; "00" is zero - none of that color; 80 is "half-strength", etc). Thus black is "000000" (none of any color), white is "FFFFFF" (maximum of all colors), "pure" red is "FF0000" (max red but no green or blue), and so on.

Any of these colors can be used for the text, also. Obviously the text color has to contrast with the background color, if the text is to bee seen clearly. Note: it is best to avoid pure red or blue as background colors, because those colors are the standard colors of hyperlinks, and the links would be invisible against those colors.

Background Patterns
You can also specify a graphic (GIF or JPG file) to be used as a background pattern for a page. Simply replace the <BODY> tag at the top of the HTML file with:

<BODY background="xxxx.gif">

where "xxxx.gif" ("xxxx.jpg") or is the name of a graphic file in gif (or jpg) format that is to be used as the background pattern. The graphic will be "tiled" to fill the page. For an example, click here. Please do not over-use background patterns - they take time to download and typically do not add anything to the content of your page. Take care that the background pattern is not so strong as to be distracting and that the text color stands out well enough to be easily read. Use a graphic utility program to adjust the brightness and reduce the contrast of your image until it makes a suitable background for text.

Netscape Tables
Here is a table with 4 rows and 3 columns:

Channel 4 Channel 5
6:00 pm
6:30 pm		 News Rosanne
Fresh Prince
7:00 pm
7:30 pm		 NBC News
Inside Edition		 Simpsons
Seinfeld
8:00 pm Sequest Beverly Hills, 90210

This table is coded like so: 

<TABLE BORDER=1>
  <TR>
     <TH></TH> <TH>Channel 4</TH> <TH>Channel 5</TH> 
  </TR>
  <TR>
     <TH>6:00 pm<br>6:30 pm</TH> <TD>News</TD> <TD>Rosanne<br>Fresh Prince</TD>
  </TR>
  <TR>
     <TH>7:00 pm<br>7:30 pm</TH> <TD>NBC News<br>Inside Edition</TD> <TD>Simpsons<br>Seinfeld</TD>
  </TR>
  <TR>
     <TH>8:00 pm</TH> <TD>Sequest</TD> <TD>Beverly Hills, 90210</TD>
  </TR>
</TABLE>
This looks confusing at first but is actually very logical. The entire table structure is enclosed in <TABLE BORDER=1> and </TABLE> tags. Each row is enclosed in <TR> and </TR> tags. Within each row, each cell is enclosed in<TH> and </TH> tags if it contains a heading or title, and by <TD> and </TD> tags if it contains regular data (the former are automatically boldfaced). You can add as many rows and columns as required; the cells will automatically expand to fit the data they contain. Multiple lines of text within one cell are separated by <br> tags. Cells can contain just about anything: formatted text, graphics, hyperlinks, whatever. To make a table like this in your own pages, you can Copy and Paste this code, change the cell contents, and add or subtract rows and cells as needed.

Very important note! It's important to realize that when viewing a table on a Web page, the table will not appear until the entire table loads. This can result in a very annoying blank-screen delay for the viewer, especially if the table contains slow-loading graphics. (Some fancy commercial sites make the mistake of putting their entire pages into gigantic tables - when you go to their sites, you'll see a black page for several minutes before anything shows up at all. Most people won't hang around that long). To avoid this problem when you are creating HTML tables, break up large multiple-row tables into several separate tables of one horizontal row each. That way the first rows will be displayed while the later rows are loading.

A Final Plea
Whatever you do, please test your pages for readability and loading speed on a typical low-end user's machine - i.e. with a 28 KBaud modem connection and a 14", 640 X 480 screen. Don't assume everyone has a computer as powerful as yours. If your graphics and tables are too big, and your color scheme and background patterns too hard on the eyes, people will become upset with you and won't enjoy your page.

RETURN to the Workshop Handouts page.

Belorussian translation
This page is maintained by Prof. Tom O'Haver , Department of Chemistry and Biochemistry, The University of Maryland at College Park. Comments, suggestions and questions should be directed to Prof. O'Haver at toh@umd.edu. Number of unique visits since May 29, 2008: