</BODY>
</HTML>

Note that each HTML (HyperText Markup Language) command has a corresponding "/" command. This is the most difficult part of home page development - remembering to "close" each command.

Headings, Lists, and Paragraphs

Headings

<h1>This is an H1 heading</h1>

<h2>This is an H2 heading</h2>

<h3>This is an H3 heading</h3>

<h4>This is an H4 heading</h4>

<h5>This is an H5 heading</h5>

<h6>This is an H6 heading</h6>

<h3 align=center>This is an H3 heading that is centered</h3>

Paragraphs

<p>This is a paragraph marker. It inserts a blank line between the paragraphs in the document. It doesn't absolutely require a "/" command to close it</p>

Lists

• Unnumbered Lists
• Numbered Lists
• Definition Lists

The Unnumbered List begins with a <ul> command.
Each item of the list begins with a <li> command.
The unnumbered list ends with the corresponding </ul> command.

For example, these HTML commands will produce the example list below:
<ul>
<li>First List Item
<li>Second List Item
<li>Third List Item
</ul>

• First List Item
• Second List Item
• Third List Item

Numbered lists are identical to unnumbered lists. The <ol> and </ol> commands define the numbered list. For example:

1. First List Item
2. Second List Item
3. Third List Item

The Definition List has three elements:

• The <dl> and </dl> commands define the list.
• The <dt> command is the "definition term" command.
• The <dd> command is the "definition definition" command.

For example, the following HTML commands will produce the list below:

<dl>
<dt>Definition 1 Term
<dd>Definition 1 definition. This definition can be any length that you desire.
<dt>Definition 2 Term
<dd>Definition 2 definition. This definition can be any length that you desire.
</dl>

Definition 1 Term

Definition 1 definition. This definition can be any length that you desire.

Definition 2 Term

Definition 2 definition. This definition can be any length that you desire.

Bold, Italic Text, Breaks, Pictures,
and Links to Other Pages

Bold and Italic Commands

The <i> and </i> commands mark text that is to be displayed as italic text.

You can, of course, use both commands for bold italic text.

Break Command

For example, the following text appears as below:

This is an example of text that utilizes the break command. By inserting a break command into text it creates a "hard return" or break.<br>This line of text will appear on the next line when rendered.

This is an example of text that utilizes the break command. By inserting a break command into text it creates a "hard return" or break.
This line of text will appear on the next line when rendered.

Tables

HTML is "space insensitive." This means that data or information presented in a tabular format must use the "Table" command. The command has several subcommands, but successful use quickly builds familiarity.

You must organize your data into a table format, typically in rows and columns, forming "cells." You then specify the entries into the cells. In the example below, each table cell contains text to indicate the column and row, such as "Col 1, Row 1."

The <TABLE> command starts the Table building process.
The <CAPTION> command usually follows and specifies the Table Caption or Title.
The <TH> command, which specifies the "Table column Headings", follows. You can have as many <TH> commands as you have columns in the table.
The <TR> command, which specifies a "Table Row" of data, defines each row within the table. Each <TR> command has to have, at the end of each table row, a corresponding </TR> command.
The <TD> command, which specifies each individual "Table Data" item, follows. You can have as many <TD> commands as you have data items per row. Each <TD> command doesn't strictly have to have a corresponding </TD> command.

The following example illustrates a small but complete Table.

<table width=100% border=1>
<caption><b>Sample Table Caption or Heading</b></caption>
<th align=center>First Column Heading</th><th>Second Column Heading</th><th>Third Column Heading</th>
<tr><td>Col 1, Row 1 Data</td><td>Col 2, Row 1 Data</td><td>Col 3, Row 1 Data</td></tr>
<tr><td>Col 1, Row 2 Data</td><td>Col 2, Row 2 Data</td><td>Col 3, Row 2 Data</td></tr>
</table>

The result of the Table definition is illustrated below:

Sample Table Caption or Heading

First Column Heading	Second Column Heading	Third Column Heading
Col 1, Row 1 Data	Col 2, Row 1 Data	Col 3, Row 1 Data
Col 1, Row 2 Data	Col 2, Row 2 Data	Col 3, Row 2 Data

There is a strict requirement of matching "Slash" commands for each table command. For example, every row must begin with a <TR> command and end with a </TR> command.

Note in the <TABLE> command the use of the "width" option. You can specify what percent of the screen is to be used to format the table. The "border" option specifies the width of the borders around the table cells. "border=0" results in no borders. The higher the number, the thicker the borders.

Including Graphics in Your Home Page

<img src="wbjag.gif">

will include the picture of a Jaguar stored in the file "wbjag.gif" in the document.

Linking to Other Home Pages

<a href="http://www.uwf.edu">Link to the University of West Florida Home Page</a>

will link to the University of West Florida Home Page. The text "Link to West Florida Home Page" is the text that will form the link to the specified home page. The user clicks on the text to cause HTML to reference the specified page. The text that forms the link can be anything you wish and can be any length from one letter to an entire paragraph.

Link to the University of West Florida Home Page

The text that forms the link is displayed in a different color, usually blue, and changes colors when referenced.

One excellent document that is a (relatively) complete guide to HTML is "A Beginner's Guide to HTML." You can print out the entire 26 page document and have lots of fun!

Return to Home Page Assignment Page