<<< PreviousNext >>>

3.0 Shaping the Pieces

1.0 Welcome! 3.1.0 Hypertext Markup Language (HTML)
3.1.1 Zen and the Art of HTML
3.2.0 Page Anatomy and HTML command tags
3.2.1 Head and 3.2.2 Body
3.2.2a Text and 3.2.2b Image
3.2.2c Anchors
3.2.2d Lists and 3.2.2e Tables
Table of HTML Commands
2.0 Envisioning Your Web Presence
4.0 Finishing Touches
Index of Terms and Resources

<<< TopNext>>>

3.1.0 Hypertext Markup Language (HTML)

3.1.1 Zen and the Art of HTML:

Rein in your desire to control every detail of the layout, and trust the browsers to present your content in a readable format, or resign yourself to a lot of frustration, because a markup language by definition marks categories of material--not their precise position, color, or size.

<<< PreviousNext >>>

3.2.0 Page Anatomy and HTML Command Tags

All HTML commands appear within tags that look like this:

<tag> [content/object of command] </tag>

For an overview of tag placement, visit our quick reference guide to HTML tags.

Balanced and Empty Tags

Almost always, these tags come in pairs, like bookends, and usually the closing tag will begin with a slash. These pairs of tags should be balanced; that is, they need to be nested within each other, and not overlapping, to work.

Yes! <tag1> content... <tag2>special content</tag2>...</tag1>
No:[x] <tag1>....<tag2>...</tag1>....</tag2>

Some tags are empty, not balanced, because they signify a single interruption rather than the start and end of a particular type of content.

Comment Tags

Comment tags allow you to insert comments within the text of your document that browsers will ignore. These tags look like this:

<!-- [your comment here]-- >

Tag Attributes

Many commands can be modified with an attribute indicating its object's size, alignment, or other features. Attributes are included within the opening tag, as follows:

<tag attribute="value"> ... </tag>

Document Boundaries

To create a Web page, first you'll need to tell your machine when to start and stop reading HTML, by tagging the opening and closing of your page:



Type these two lines, and presto!--you have a blank page to work with. Two parallel organs sustain the page: a "body" of material that will appear in browser windows, and a "head" of information that tells machines global information or "metacontent" about the document itself. Create these organs by tagging their boundaries:







<<< PreviousNext >>>

3.2.1 Head

The most common command in the head of an HTML document is the title. To assign a name (other than the default title, which is the filename) that will appear in the title bar of browser windows, frame it with title tags inside the head of your document:

<head> <title>[Page Name Here]</title> </head>

We'll discuss other less widely-used metacontent later.

<<< PreviousNext >>>

3.2.2 Body

The body of your document produces everything in the visitor's browser window. All your content will go in between <body> and </body>. The bgcolor="#hexadecimal color code" and background="image file" attributes to the <body> tag allow you to choose a background color or a "wallpaper" image for your site. Victor Engel's Non-Dithering Color page is an excellent interactive color selection tool.

You can also designate a default font size for the entire page with the <basefont size="[number]"> Netscape extension (font sizes go from 0 to 7, with 3 as the default).

<<< PreviousNext >>>

3.2.2a Text

Forgotten Space

Before we review more commands, you should know that blank space you type into the body of your page disappears in the browser window. You can type five carriage-returns and it won't make a difference: the next characters will appear right after the last one you typed.

To save your viewers from eyestrain, you'll need to employ


for a single non-breaking space

for paragraph breaks;
<br> for line breaks;
to set off block quotations; and
<hr> to divide sections with a horizontal rule line. (the WIDTH=, SIZE=, and NOSHADE Netscape extensions can be used to tweak the appearance of the line.)

Preserving the spacing of your text is possible; just surround the space-sensitive text with <pre>...</pre> tags.

Logical Style

Remember the trust the browser koan? Well, logical style tags tell the browser something about the content (e.g., that it should be emphasized), but they don't demand that the browser display the content a certain way. Logical style tags include:

Forced Style

Forced style tags force browsers to show the enclosed characters in a particular way. You may flaunt your wanton disregard for HTML dharma with the following codes:

Our Maximizing Meaning page offers some advice on composing and editing text.

<<< PreviousNext >>>

3.2.2b Anchors and URLs

Anchors, marked with the <a>...</a> tags and (usually) the href= attribute, create the links within and between HTML documents. Each anchor refers either to the Uniform Resource Locator (URL) of another document, to a file on the same server as your document, or to a specific place within your document.

protocolhost name[:port]directory/filename[subsection of the document]

Remember when you're organizing your document and placing your links to provide some navigation tools at the beginning and ending of every document, and not to bewilder your guests with unnecessary--or inoperative--links.

<<< PreviousNext >>>

3.2.2c Images

Images can appear in your documents in a number of ways:

<<< PreviousNext >>>

3.2.2d Lists

Lists allow you to underscore parallel or sequential relationships between bits of content by showing those relationships visually.

  1. unordered lists are bounded by <ul>...</ul> tags and mark list items (<li>) with

  2. ordered lists are bounded by <ol>...</ol> tags and mark list items with sequential numbers or letters.

  3. definition lists (<dl>...</dl>) consist of
    "terms" (<dt>...</dt>)
    and indented "definitions".(<dd>...</dd>).

  4. menus and directory lists are being phased out of the HTML 3.0 standards.

  5. Some Netscape extensions allow you to control some cosmetic features of your lists:

    The type= extension,
    when inserted as an attribute to the <li> tag, sets the type of number or bullet (1, A, a, i, disc, circle, square) marking each list item;
    The value="(number or letter)"
    extension determines the number or letter to start with in an ordered list.

<<< PreviousNext >>>

3.2.2e Tables

Sometimes a list isn't good enough. For example, what if you want to post seven employees' monthly work schedules to your site? If you were to present all that information in a series of lists, your online guests would have to scroll through lots of irrelevant material to find the pieces of information they were looking for.

When you need to show gradual changes in, or several parallel relationships between, your content--be it text, images, anchors, forms, or horizontal rule lines--spread it across the page in a table.

  1. First, make a space for your table with <table>...</table> tags. You may also consider using one of these attributes to the table tag:

  2. Then, if you'd like to label your table with a caption above or below your data, deploy the optional <caption>...</caption> tags, with the align= attribute indicating whether to put the caption at the "top" or "bottom" of your table.

  3. How many horizontal rows of data and/or headings will you want to include? Mark the beginning and ending of each row with <tr>...</tr>.

  4. Each row will contain a certain number of data cells or heading cells, bounded by <td>...</td> or <th>...</th>, respectively. These attributes allow you to adjust how the table is displayed:

    Sometimes you'll find it useful to include empty cells, marked with tags with no data inside.

Tables work very well as navigation menus, because they present your links in a minimum of vertical space, minimizing scrolling. For more complex effects, tables can be nested inside table data cells; as long as all the coding is correct, it'll display properly.

a navigation menu table
The NCSA Mosaic
Tables Tutorial
Urb LeJeune's
HTML Tables Tutorial


When you're typing table tags into your document, the forgotten space principle works to your advantage: you can separate your rows with blank lines to make sure you're including a consistent number of cells in each one.

<<< Envisioning Your Web PresenceMaximizing

in Your Text
HomeTop return to

Touches >>>