Intermediate HTML Tutorial

Introduction

The purpose of this tutorial is to introduce a few more commands and concepts to give HTML authors more flexibility to create documents. Several other guides attempt to provide more thorough coverage, including NCSA's "A Beginner's Guide To HTML" which is available at the URL http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.

More Commands and Concepts

This tutorial covers the following 11 topics:

Nesting
Inlined Images
Aligning Inlined Images and Text
Aligning Headers
Link To Specific Locations Within A Document
Additional Lists
Text Formatting
Character Formatting
Special Characters
Background Color
Author/Signature Blocks

1. Nesting

Nesting refers to organizing a set of commands inside of other commands. For example, if you wanted to create a list under one item already within a list, it might look like this:

<ol>
<li>Weather
<ul>
<li>Local
<li>National
</ul>
<li>Physics
<li>Chemistry
</ol> The HTML commands to the left will look something like this within a web browser:

Weather

Local
National

Physics
Chemistry

As long as you begin and end one command set completely within another (for example, <ol>..<ul>...</ul>..</ol>), you can nest as many commands as you need. However, you cannot overlap command sets (e.g., <ol>..<ul>...</ol>..</ul>).

2. Inlined Images

Indicate that you want to include an image within the document itself by using the command <img src=" filename"> where filename is the name of the image file. For instance,

<img src="logo.gif">

will display the image file called logo.gif from the same directory as the current document. If the image file is in a different directory, then include the image's URL. For example,

<img src="http://141.142.20.152/document_images/logo.gif">

Try the following web site for some clipart to use on your new web pages:

http://www.barrysclipart.com/

3. Aligning Inlined Images and Text

In the Basic HTML Tutorial, you learned to insert an inlined image with the following command:

<img src="image_name.gif">

If you followed the previous command with a paragraph tag (i.e., <p>), then any text following the image would appear on the next line. However, without the paragraph tag, text would follow immediately after the image, aligning itself along the lower right-hand edge:

<img src="astro.gif"> Astronomy is one of my favorite subjects!

which displays:

Astronomy is one of my favorite subjects!

You may find it desirable to align the text with the upper right-hand edge instead. In this case, you need to include the align=top parameter within the command as follows:

<img align=top src="astro.gif"> Astronomy is one of my favorite subjects!

which will tell a Web browser to display:

Astronomy is one of my favorite subjects!

It is also possible to align the image to the left or right and text will wrap around the image:

<img align=right src="astro.gif"> Even though Astronomy is one of my favorite subjects, and even though I find it very interesting, I have to work very hard to understand all the concepts!

which will tell a Web browser to display:

Even though Astronomy is one of my favorite subjects, and even though I find it very interesting, I have to work very hard to understand the difficult concepts!

4. Aligning Headers

It is possible to add an attribute to header tags (<H1>...</H1>) to align headers at the left margin, right margin, or center. In the following, a level 3 header is centered:

<H3 align=center> The Solar System</H3>

which will tell a Web browser to display:

The Solar System

5. Link To Specific Locations Within A Document

Besides linking to a specific document, an anchor can point to a specific location within that document. A specific location in the current document can also be linked.

To do this there needs to be a name label in the document being linked to. For example, supposed the document I wanted to link to (e.g., space.html) has a header called "The Solar System" and I want to link directly to that header. In the document with the header "The Solar System" (space.html) I would need to label that location with the following command:

<a name="location-1"><h3> The Solar System</h3></a>

Note that "<h3>The Solar System</h3>" could be any text at all; it need not be a header.

Then, in the document that I am linking from I would use the command:

<a href="space.html#location-1"> Go To The Solar System</a>

Note the similarity to the standard anchor command and the addition of the # character to indicate specific location within the document.

6. Additional Lists

Definition (or Descriptive) List

A definition list is a list of items that includes extra information about each item. This is usually used for definitions of terms or descriptions of related items. For example:

Stella: Modeling tool from High Performance Systems,Inc.
Excel: Spreadsheet package from Microsoft Corporation.

A description list usually consists of alternating a description title (abbreviated as dt) and a description description (abbreviated as dd). The description generally starts on a new line, because the viewer allows the full line width for the contents of the dt field.

The <DT> and <DD> entries can contain multiple paragraphs (separated by paragraph tags), lists, or other description information.

Use <DL> and </DL> to begin and end a definition list.

The HTML source for the above example:

<DL>

<DT> Stella

<DD> Modeling tool from High Performance Systems,Inc.

<DT> Excel

<DD> Spreadsheet package from Microsoft Corporation.

</DL>

7. Text Formatting

Preformatted Text

Use the pre tag (which stands for "preformatted") to include text in a fixed-width font and to cause spaces, new lines, and tabs to be significant. This is useful for program listings. For example, the following lines in your source file:

<PRE>
<ol>
<li>Weather Images
<ul>
<li>Local
<li>National
</ul>
<li>Physics
<li>Chemistry
</ol>
</PRE>
display as:

<ol>
<li>Weather
<ul>
<li>Local
<li>National
</ul>
<li>Physics
<li>Chemistry
</ol>

Block Quotes

Use the <blockquote> and </blockquote> tags to include quotations in a separate block on the screen.

For example

<blockquote>

Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow. <P>

I still have a dream. It is a dream deeply rooted in the American dream.<P>

I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal. <P>

</blockquote>

The result is

Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow.

I still have a dream. It is a dream deeply rooted in the American dream.

I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

8. Character Formatting

Individual words or sentences can be put in special styles. Logical styles are those that are configured by your viewer. For example, <CITE> may be defined as italic by your viewer. Each time you enter <CITE> tags, the viewer automatically displays the text in italics.

A physical style is one that you determine, and the viewer displays what you have coded. For example <I> tells the viewer to display your text in italics.

For HTML-coded documents, you should use logical styles whenever possible. Future implementations of HTML may not implement physical styles at all.

Italic

<I>text</i> puts text in italics (HTML Primer)

<cite>text</cite> is used for citations of names of manuals, sections, or books (HTML Primer)

<var>text</var> indicates a variable (filename )

Bold

<b>text</b> puts text in bold (Important)

<strong>text</strong> also emphasizes text (Note:)

Fixed width font

<tt>text</tt> puts text in a fixed-width font (1 SU = 1 CPU hour)

<code>text</code> also puts text in a fixed-width font (1 SU = 1 CPU hour)

<samp>text</samp> formats text for samples (-la)

<kbd>text</kbd> displays the names of keys on the keyboard (HELP)

9. Special Characters

Three characters out of the entire ASCII (or ISO 8859) character set are special and cannot be used "as-is" within an HTML document. These characters are left angle bracket (<), right angle bracket (>), ampersand (&), and a blank space ( ).

The angle brackets are used to specify HTML tags (as shown above), while the ampersand is used as the escape mechanism for these and other characters. Use the following sequences if you want to print those characters on the screen:

< is the escape sequence for <

> is the escape sequence for >

& is the escape sequence for &

  is the escape sequence for " ";

Note that "escape sequence" means that the given sequence of characters represents the single character in an HTML document and that the semicolon is required. The conversion to the single character itself takes place when the document is formatted for display by a reader.

There are additional escape sequences, such as a whole set of sequences to support 8-bit character sets (ISO 8859-1). For example:

ö is the escape sequence for a lowercase o with an umlaut: ö

ñ is the escape sequence for a lowercase n with an tilde: ñ

È is the escape sequence for an uppercase E with a grave mark: È

Many such escapes exist and are available in a listing from CERN.

10. Background Color

It is possible for the html author to specificy the background color to be displayed by the user's browser. This done by using an attribute in the body tag. The attribute specificies a 6 digit hexidecimal RGB value of a color (hexidecimal is base 16--letters A-F are used for digits above 9). The first two numbers is a 2-digit hexidecimal value corresponding to the amount of red in the desired color, the second two numbers is a hexidecimal value corresponding to the amount of green in the desired color, the final set of two numbers is a hexidecimal value corresponding to the amount of blue in the desired color. So, for example, white, which is all of each of color, would have the value FFFFFF, and black, which is none of each color, would have the value 000000. Purple would be a range of values around A50085. For a table of colors with corresponding values see the following web site:

http://www.hypersolutions.org/rgb.html

The Shodor Education Foundation, Inc. provides a useful RGB color tool to combine various combinations of reb, blue, and green and see the resulting colors and the resulting code to use in an html source file.

11. Author/Signature Blocks

A good HTML document will end with information about the author so that people know who to contact for more information. You may also wish to display copyright information. Three commands are useful here:

<hr> creates a horizontal rule across the screen. This is nice because it sets apart the author block from the rest of the document

<address> ... </address> defines the way your signature text will look.

<a href "mailto:... ">...</a>defines an e-mail link.

For example, as part of NCSA's Education Group, I would use the following standard for ending HTML documents:

<hr>
<address>
Copyright 1994, 2002, University of Illinois Board of Trustees<br>
National Center for Supercomputing Applications, Education, Outreach and Training Division<br>
<a href "mailto:bievenue@ncsa.uiuc.edu">bievenue@ncsa.uiuc.edu</a>
</address>

With a web browser, this typically displays as:

Copyright 1994, 2002, University of Illinois Board of Trustees
National Center for Supercomputing Applications, Education, Outreach and Training Division.
bievenue@ncsa.uiuc.edu

Of course, the three tags, <hr>, <address>, and mailto, can be used anywhere within your documents. We discussed them in this format because they work nicely together to create a signature block.

Back to Table of Contents