An Introductory HTML Tutorial
Professor of Analytical Chemistry
Department of Chemistry and Biochemistry
and Maryland Collaborative for Teacher Preparation
The University of Maryland at College Park
December, 1995. Updated April 1999.
Table of contents
Sound and video links
Indented paragraphs and lists
Background and text color
Reference Table of HTML Tags
How to Make a Web Page
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:
<title>TITLE OF WINDOW</title>
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
in the Bookmarks menu, so you should choose this name with some care. Every HTML
file must end with
The content of the page goes in between the <body> and the
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.
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
all of the formatting and even the carriage
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
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 options are controlled by pairs of tags which you use to
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.
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:
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.
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
would be rendered like this:
The blue balls in the molecular model represent nitrogen
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">
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 (also called hyperlinks or "hot" links) are text or graphics items that
"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
The general template for a hyperlink is
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"
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:firstname.lastname@example.org">here</a> to send email to Tom
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
address already filled out to email@example.com. 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
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
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:
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
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.
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
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
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
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
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
Sound and video hyperlinks are constructed like just like conventional hyperlinks.
<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
In either case, if the file is not where it is supposed to
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.