An Introductory HTML Tutorial
Tom O'HaverProfessor 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 elementsText 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:
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 withTITLE OF WINDOW
The content of the page goes in between the and the 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
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
and
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
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 and tags. Text Formatting
Text formatting options are controlled by pairs of tags which you use to surround the effected text, such as:
example larger font example example larger font example example smaller font example example Large letter Example Example Color text example example Centering
Effect HTML tags What it looks like
boldface example example Italic example example bold italic example
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,
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:
.
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 or tags are used to force line breaks. Thus, the following HTML code:
The blue balls
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
.
You can center a graphic on the page by surrounding it in
Graphics can be aligned on the left or the page
by using the modified tag: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:
, 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 Chapter 1.
which is rendered like this:
This is discussed in Chapter 1.
Or you could write
Click here 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 . 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: . If chapter1.html is stored in a higher level directory (one level up from the current directory), then you write: .
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 White House Home Page.
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 here 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 
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:
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:
Fairland Elementary School
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:
[Click here to hear a sound bite]
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:
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!):
Heading size 1
Heading size 1
Heading size 2
Heading size 2
Heading size 3
Heading size 3
Heading size 4
Heading size 4
Heading size 5
Heading size 5
Heading size 6
Heading size 6
Headings or any other text may be centered on the page by placing the text to be centered betweenIndented paragraphs and lists
In order to create indented paragraphs, where the left margin is indented (moved to the right), surround the paragraph in
- and
-
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.
-
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.
- and
-
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.
-
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.
-
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.
-
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.
Elements
- main group
- metals
- Lithium
- Sodium
- non-metals
- Carbon
- Nitrogen
- rare gases
- metals
- transition metals
- rare earths
- actinides
- Inorganic
- Organic
produces the following result: Elements
- main group
- metals
- Lithium
- Sodium
- non-metals
- Carbon
- Nitrogen
- rare gases
- metals
- transition metals
- rare earths
- actinides
- Inorganic
- Organic
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 tag at the top of the HTML file with:
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 = orangeTo 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 tag at the top of the HTML file with:
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:
| 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 |
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.