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....

Putting It All Together

In this section of the tutorial you will assemble a simple Web page. Among the tasks you will perform will be placing an image, placing and formatting text, creating a table, and assigning attributes to various objects. You can see what your completed page will look like by clicking here. It will open in a new window

Thinking back to the beginning of this tutorial, you will remember that you should create a root folder for your project. Do that now.

Start NotePad, if you have not already started it, and create a new file. Name it "index.htm" and save it in the root folder.

Now type in the opening and closing HTML tags. They are shown below.

<html>
</html>

An important component of the opening HTML tag is the doctype (document type) statement. The doctype statement "tells" the browser important details about the Web page and the code that is used to make it. While it looks complicated, it really isn't. Add a doctype statement just before the opening HTML tag so that the code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</html>

Further information about the doctype statement can be found on the World Wide Web Consortium's Web site at www.w3.org/QA/Tips/Doctype.

One last technical detail will help make sure your Web page is rendered properly by the browsers. All you have to do is add an attribute to the opening HTML tag that refers to "name space." The name space is a complicated concept for novice HTML writers so we will not go into detail here. If you are interested in further information, visit www.w3.org/TR/REC-xml-names. Add the name space attribute to the opening HTML tag so that it looks like this:

<!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">
</html>

Now all the preparations are completed and you can start the "meat and potatoes" of Web page building.

Add your opening and closing head tags. The new code should look like:

<!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>
</head>
</html>

Now add the opening and closing body tags:

<!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>
</head>
<body>
</body>
</html>

If this begins to look confusing, add some spaces between the opening and closing tags of the head and body. This will help clarify where you will be adding code.

<!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>

</head>
<body>

</body>
</html>

Save your new Web page. You could view the page in your browser at this point, however because you have not added any viewable data, the page will appear blank. To test this, start your browser, click File, and then select Open File or Open, depending on which browser you use. Browse to your new Web page, then click OK or Open. A blank Web page will appear on your screen.

Adding An Image

The next thing that you will do is to add a header image to your page. You must first download and save the image into your images folder. Click here to view the header image named "garageheader.jpg." It will open in a new window. Right click on the image in your browser, then click Save Image or Save Picture As (again, depending on your browser) to save the image in the images folder in your project's root folder.

You will want the header image to appear in the center of your Web page. Add the center tag as shown 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>

</head>
<body>
<center></center>

</body>
</html>

Now add the img src (image source) tag that will place the header image into your page. Because you have saved that image into your images folder, the code will look like this:

<!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>

</head>
<body>
<center><img src="images/garageheader.jpg" /></center>

</body>
</html>

The image is 800 pixels wide and 208 pixels high. Add the dimensions attributes to the img src tag. Don't forget to add an alt tag, too. A suggestion is "Sammy's Garage."The code will now look like this:

<!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>

</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>

</body>
</html>

To see what your Web page should like like so far, click here. It will open in a new window.