Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Main Body Information

In this series of steps you will add the main table for the page that has the important information about Sammy's Garage. The table will have these attributes:

See if you can add the necessary code to make that table appear on your page. If you are not sure what the code should be, click here for the table's code.

Now you can add the text to the table and format it for appearance, with a list, h1 heading, and links. To see what the text should look like once it has been formatted, click here.

Go ahead and try it. If you are not satisfied with the results, click here for the text and HTML tags.

To see what the entire page should look like so far, click here. It will open in a new window.

Finishing Touches

There is very little left to do to complete the project. A simple paragraph at the bottom of the page with the address of Sammy's Garage will finish it. Be sure to center the paragrah, apply the strong tag to the text, and make the font Arial. The code is:

<p align="center"><strong><font face="Arial>Sammy's Garage &amp; Restoration Shop<br />
1234 Airport Avenue<br />
Los Angeles, CA 90405</font></strong></p>

All Web pages should have a title. This title displays on the top bar of the browser and may appear in the bookmarks, depending on the browser. It is also used by search engines. Add a title tag to the head part of the Web page. The code is:

<title>Sammys Garage - Demo page for IMC HTML/XHTML Tutorial</title>

To see the completed page, click here. It will open in a new window.

The code for the entire page is displayed below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sammys Garage - Demo page for IMC HTML/XHTML Tutorial</title>
</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>
<table width="800" border="0" align="center" cellpadding="6" cellspacing="0">
<tr>
<td align="center"><font face="Arial"><strong>Hours:</strong> Monday through Friday - 8:00 am to 6:00 pm<br />
Saturday - 8:00 am to 12:00 noon</font></td>
</tr>
</table>
<table width="800" border="1" align="center" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="left" valign="top"><h1 align="center">Welcome to Sammy's Garage Home Page</h1>
<p><strong><font color="#990000" size="4">Sammy's Garage &amp; Restoration Shop</font></strong> has been in business since 1957. We started in a small building just off of La Cienega Boulevard with only one bay and lift. Today we occupy a 35,000 square foot building that is centrally located near the Santa Monica Airport. No matter what your automotive needs are, we do it all!</p>
<ul>
<li>Full automobile restoration</li>
<li>Standard vehicle service</li>
<li>Show-quality detailing</li>
<li>Accident repair</li>
</ul>
<p>Although we service nearly all makes and models, our restoration shop specializes in American Iron. Included are modern manufacturers, such as <a href="http://www.ford.com">Ford</a>, <a href="http://www.gm.com">General Motors</a>, and <a href="http://www.chrysler.com">Chrysler</a>. Long-gone marques such as American Motors, Willys, Hudson, and Studebaker also find careful attention here at Sammy's.</p>
<p><em>You are invited to inspect our shop anytime during normal business hours.</em></p></td>
</tr>
</table>
<p align="center"><strong><font face="Arial, Helvetica, sans-serif">Sammy's Garage &amp; Restoration Shop<br />
1234 Airport Avenue<br />
Los Angeles, CA 90405</font></strong></p>
</body>
</html>

That's it! How does your page look?


 

If You Continue On...

If you elect to continue further exploration of HTML and XHTML you will discover how to enhance your Web pages even more. Among the things that you can do are:

There are numerous resoures on the World Wide Web. For more information, be sure to visit:

Good luck with your Web page building!