0% found this document useful (0 votes)

90 views

Dopp XHTML Tutorial

XHTML (extensible hypertext markup language) is a standard for creating and editing web pages. XHTML is used to describe the structure of a web page.

Uploaded by

Zeshan Ahmad Khan

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

90 views

Dopp XHTML Tutorial

XHTML (extensible hypertext markup language) is a standard for creating and editing web pages. XHTML is used to describe the structure of a web page.

Uploaded by

Zeshan Ahmad Khan

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 38

Intro to XHTML

A Tutorial for the Beginner

Presented by
Sarah Dopp

August 20, 2005

Supplementary Website:
www.SeattlePies.com

For more information, contact:

Sarah Dopp
Website Developer
sarah@sarahdopp.com
http://www.sarahdopp.com
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

TABLE OF CONTENTS
INTRODUCTION
Why Learn XHTML? ..................................................................................2
What This Tutorial is Not ............................................................................3
What We’ll Do..............................................................................................3
How to Use This Tutorial.............................................................................4
Useful Tools ..................................................................................................4
PART 1: Planning A Website ............................................................................7
PART 2: Creating A New Webpage..................................................................9
New tags: <!DOCTYPE>, <html>, <head>, <body>, <p>
PART 3: Creating A Layout............................................................................ 12
New tags: <table>, <tr>, <td>
New attributes: valign, cellpadding, cellspacing, width
PART 4: Adding An Image ............................................................................. 16
New tags: <img />
New attributes: src, alt, height
PART 5: Adding Style ..................................................................................... 18
New tags: <br />, <h1>, <h2>, <font>, <hr />
New attributes: size, face, bgcolor, color
PART 6: Adding Links .................................................................................... 22
New tags: <a>
New attributes: href, link, alink, vlink
PART 7: Adding Content ................................................................................ 24
New tags: <center>, <ul>, <li>, <b>
New attributes: align
AFTERWORD: What’s Next? ........................................................................ 31
APPENDIX I: FINISHED PROJECT CODE ................................................ 32
APPENDIX II: XHTML REFERENCE GUIDE ........................................... 36
WORKS CITED .............................................................................................. 37

1
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

INTRODUCTION

Why Learn XHTML?

XHTML (Extensible Hypertext Markup Language) is a clean, powerful, and reliable language
used for programming websites. It’s actually a hybrid of HTML and XML (see descriptions
below), designed to work with both older and newer ways of viewing the Internet. XHTML can
be used to build reliable websites with links, text, and images in the format you desire. Once
you know XHTML, you will understand how and why most websites looks the way they do,
and you’ll be able to customize your own website. Best of all, XHTML is easy to learn. If you
can spend just an afternoon with this tutorial, you’ll have a basic website built by dinnertime.

What is HTML? Why Not Learn That?

HTML (Hypertext Markup Language) is widely known as the language for displaying content in
websites. Unfortunately, it has its drawbacks. The language does not have strict rules for how
to program a website, making it easy to build webpages with sloppy code. While this is fine for
most web browsers, it causes problems with cell phones, PDAs, XML readers, and other new
technology that can access the Internet. XHTML is almost identical to HTML, except that it
follows stricter rules. Many HTML programmers are now learning XHTML so that their
websites can be stable in the new generations of technology.

Here are the main differences between HTML and XHTML:

XHTML HTML
Elements must be in lowercase. Case doesn’t matter.
Tags must be closed. Closing tags doesn’t always matter.
Documents must be properly formed. Documents can have inconsistent nesting and
elements outside of their proper locations.
Attributes need quotation marks. Quotations marks aren’t important.

What is XML? Why Not Learn That?

If HTML is a language for displaying content, XML (Extensible Markup Language) is a
language for organizing content. XML follows strict regulations for labeling different types of
content within a document, so that it can be shared in a consistent way. It does not, however,
state how that information will be displayed. That’s up to the audience to define with their
XML readers. An increasing number of people find useful applications for XML today. It’s not
yet the norm, however, because most people still prefer to view information in an attractive
website through their web browsers. XHTML is a bridge between HTML and XML. It
combines the organizational rules of XML with the display flexibility of HTML. Building your
websites in XHTML will ensure that most Internet devices can view them properly.

Why Not Use Software that Builds Websites Automatically?

Software companies have developed a number of powerful programs for building websites.
These include Macromedia Dreamweaver, Adobe GoLive, and Microsoft FrontPage. While all
of these will help you create a website without asking you to touch programming code, it’s
common to run into problems with them. Often times, the software will create formats over
formats and styles over styles, leaving you with a design mess that isn’t easily fixed. It’s okay

2
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

to use these programs to speed up the development process, but it’s also important to know your
website’s programming language so you can handle situations when problems arise. You can
compare building a website to translating a story from another language. If you do it with a
computer program and you don’t know the language, it’s hard to get it just right.

What This Tutorial is Not

This tutorial is not an exhaustive study of XHTML. It also doesn’t address other programming
languages commonly used with XHTML, or explain how to edit images for the web. This
tutorial will simply provide you with the basic foundation for web development by teaching you
the most common uses for XHTML. When you finish this tutorial, you will have the knowledge
you need to study other aspects of website programming and understand them in context.

Please take note that this tutorial will not cover CSS (Cascading Style Sheets). CSS is used in
conjunction with XHTML. It is the most effective and powerful language for editing the colors,
fonts, and even some layout aspects of a website. We will cover some basic methods for
handling style in this tutorial, but these methods will not have the power and capabilities of
CSS. If you plan to continue studying web development after this tutorial, CSS should be your
next topic.

This tutorial also doesn’t cover languages that make your website more interactive, like PHP,
ASP, and JavaScript. These languages are all more difficult to learn, and are not necessary for
becoming an effective web developer. Many useful website programs have already been
developed in these languages, and are freely available on the Internet.

What We’ll Do

We’re going to build a website for a fictional company called Seattle Pies. The final product
will have four pages: Home, About, Pies, and Locations. Here’s what the Home page will look
like when we’re finished:

Screenshot of index.html in final form.

Using XHTML, we’ll develop a layout with two table cells and add some color. We’ll then
grab the images from the SeattlePies.com website, where our final product already exists for
your reference. Finally, we’ll use links, fonts, and some useful formatting techniques to put
3
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

together our content and complete the website. This tutorial will teach you the most common
uses for XHTML so you can later apply your skills to your own web design projects.

How to Use This Tutorial

This tutorial will guide you through the process of creating an easy website in XHTML. You
may have your own website project that you want to work on, and it will be useful for you to
keep that in mind. However, we recommend you put that website aside until you complete this
tutorial. Every website is different. If you try to apply our instructions for the fictional Seattle
Pies website to the development of your own website as you read this for the first time, you may
find yourself confused and frustrated. Once you’ve completed your first website through this
tutorial, you’ll find it easy to apply your new skills to your own project.

We’ve divided this tutorial into several sections: Planning A Website, Creating a New
Webpage, Creating a Layout, Adding an Image, Adding Style, Adding Links, and Adding
Content. Each section is further broken down into steps, with actual code and screenshots
displayed wherever they will help you learn. At the end of most sections, you’ll have an
opportunity to compare your work with screenshots of the website, as it should appear at that
stage. This constant system of checking will keep you aware of any mistakes you’ve made as
you go. You’ll also be able to watch the gradual progression of your work to the final product.

While each of these sections is a separate task, they build on each other in the order they’re
presented to create the final website product. You will gain the most from this tutorial if you
follow all of the steps in order from beginning to end. Once you’ve completed the tutorial, you
can use the final Appendix II: XHTML Reference Guide as a quick cheat-sheet for future work
with XHTML.

This tutorial also comes with a supplementary website, which shows the website that you’re
building for your reference. You can visit this website at:

http://www.seattlepies.com

Useful Tools

Text Editor
You need a text editor to write the XHTML code for your website. Often times with text
editors, simpler is better. Avoid Microsoft Word because its formatting features often cause
problems. There are many different options available for you. Here are some popular choices:

Program System Where is it? Comments & Tips

Notepad PC It’s probably already installed This is the simplest and
in your system. Go to “Run” most popular text editor for
and type “Notepad,” or web design. When saving
browse your Start Menu for it. your files, make sure your
document type is “all files.”
UltraEdit PC http://www.ultraedit.com This is a powerful HTML
editor, so it has more
features to make your work
easier. Try their free “lite”
4
version to see if you like it.
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

easier. Try their free “lite”

version to see if you like it.
TextEdit Mac It’s probably already installed This is also a great, simple
in your system. Browse your text editor. Just remember
applications for its title. that when you first create a
new file, you need to go to
the “Format” menu and
choose “Make Plain Text.”
Text- Mac http://www.barebones.com This has more features than
Wrangler TextEdit, and is also free.
BBEdit Mac http://www.barebones.com This is a powerful HTML
editor, so it has more
features to make your work
easier. You can download
the demo from their
website.

In Part 2, you’ll learn how to create HTML files in these programs. Take some time to
familiarize yourself with your favorite text editor before you begin.

Image Editor
It helps to have an image editor on your computer for modifying website images. Most digital
cameras and scanners come bundled with some kind of software that can crop, edit, resize, and
reformat images. This is often enough to meet your needs as a new web developer. The most
powerful image editor on the market is Adobe Photoshop, and it’s also very expensive. Adobe
Photoshop Elements is a more affordable version, and it can probably handle most of your
needs.

Since graphic design requires an entirely different set of skills than website programming, we’re
not going to cover image editing in this tutorial. For an introduction to image editing, start with
the manual and help files associated with your image editor.

FTP Program
When you’re ready to publish your new website on the Internet, you’ll probably need an FTP
(File Transfer Protocol) program to connect to your web space (if you don’t already have web
space, you need to first browse the Internet for “web hosts” and choose a provider). There are a
number of options available for FTP Programs. Here are some of the most popular:

Program System Where is it? Comments & Tips

FileZilla Mac/PC http://filezilla.sourceforge.net/ This is a free program with
many features. It may seem
a little more complicated
than other programs,
though.
CuteFTP Mac/PC http://www.cuteftp.com This is an easy-to-use
program with a free 30-day
trial.
WS_FTP PC http://www.ipswitch.com This is a popular FTP
program for PC. It has a
5 free 30-day trial.
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

program for PC. It has a

free 30-day trial.
Fetch Mac http://fetchsoftworks.com/ This is a popular FTP
program for Mac. It has a
free 15-day trial.

Since all FTP programs are different, we’re not going to talk about their specific processes in
this tutorial. Check your program’s manual for instructions. To connect your FTP program to
your web space, talk to your web hosting provider for the information you need.

Web Browser
Your web browser is the program you use to explore the Internet. It’s also the program you will
use to check your progress on your web development. Fortunately, your webpages do not need
to be on the Internet in order to be viewed in a web browser. You can view them directly on
your hard drive.

Here are some of the most popular web browsers:

Program System Where is it?

Internet Mac/PC http://www.microsoft.com
Explorer
Firefox Mac/PC http://www.getfirefox.com
Opera Mac/PC http://www.opera.com
Safari Mac Already installed on your Mac system.

Not all web browsers display pages in the same way. Since each of these is used by large
numbers of people, it’s important to know how your website looks on all of them. Web
developers highly recommend you install all of these web browsers on your computer, if
possible. That way, you can check your website for inconsistencies across web browsers.

Are you ready to get started? Great! In Part 1 we’ll talk about planning a website.

6
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

PART 1: Planning A Website

We’ll begin by developing a plan for your website. Planning the details of your website before you
begin programming is the most effective way to save time and money. Since you’ll be building a
pre-planned website for this tutorial, we’re simply going to walk through the process of how we
developed that plan here. When you’re ready to build your own website, this will be the most
crucial stage in its creation, so read these steps carefully.

1. Define your objectives. Are you trying to share information? Increase business? Gather
contacts? Narrow your ideas down to specific results. What outcomes do you want to see
from your website?

With our website for Seattle Pies, we want to

- Inform the customer about their services.
- Tell the customer how they can find or contact Seattle Pies.
- Create interest in their pies.
- Entice visitors to call the phone number or visit one of their stores today.

It’s important to recognize the boundaries of your objectives. For example, Seattle Pies is
not interested in collecting email addresses from its visitors, and it doesn’t want to sell pies
online. Defining your goals makes the your final product attainable. This is a very
important step.

2. Gather your resources. Start with what you have. What images and text do you already
have for the website? Do you have a logo in a web-friendly format? Do you have a sales
description for your products and company? Do you have a staff on call for creating new
material as you need it?

Once you know what you have, consider what you need. Do you need to hire copywriters
and graphic designers to get the website you desire? Do you need to spend more time
learning the about the product or company before you can comfortably sell it? Do you need
to interview key people for help defining the look and feel of the site?

Seattle Pies has provided us with

- Their logo in .gif format.
- Some other clip art images to represent their company.
- A description of their company.
- Their contact information.
- A list of their pies.

Between these resources and our soon-to-be-acquired XHTML skills, we have everything
we need for the project.

3. Define your webpage organization. Here you need to organize your website by
determining how you will divide the content into pages. This organization should address
the objectives you defined in Step 1 and work with the material you gathered in Step 2. For
example, if you aim to share information about the company and you have a clear
description of it, make sure there is an “About” page to your website. Your pages don’t

7
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

need to line up with your objectives and materials point-by-point, but they do need to
encompass the needs of both your company and your visitor. List your pages by the title
you will refer to them by in a navigation menu. They should be short and easy to
understand.

We’re going to use four pages for our Seattle Pies website:
- Home (the first page a visitor sees)
- About
- Pies
- Locations

These pages address Seattle Pies’s objectives in a way that a visitor can easily understand.

4. Define your content organization. Take a moment to compile the actual content for your
website. It may be helpful to type each page of content out in a word processing program as
you’d like it to appear on the website. Notice the places where text should be emphasized or
laid out differently (such as in bulleted list).

Tech Tip: Website content should be easy to skim. Use small paragraphs, short
sentences, bold headings, and lists where possible.

In Seattle Pies’s website, we plan to use a large header for each page, as well as the
occasional smaller sub-header. One of our pages will require bulleted lists and one will
require a non-bulleted list. For the sake of moving you onto the next step, we’ll wait until
“Part 7: Adding Content” before we discuss the actual text we’ve developed for Seattle
Pies’s website.

Concept Review

1. Why is it important to plan your website before you begin? Planning your website will
save you time and money in the long run. If you plan as you go or change your plans
midway through, you may eventually need to throw out your own work and start from
scratch. If you have a clear plan for organization, design, development, and content before
you begin, you’ll find that building your website is much easier.

What’s Next?

In Part 2, you’ll learn how to save webpages in the proper format, as well as how to code the basics
of an XHTML document. When you’re finished with Part 2, you’ll have created your first basic
webpage.

8
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

PART 2: Creating a New Webpage

In this section, you’ll learn to use your text editor to create XHTML pages. You’ll also learn
the basic format for an XHTML page. As we mentioned in the introduction, you can choose
between a number of programs for editing your XHTML pages. Since each text editor is
different, we won’t go very deep into detail about the actual functions for each one. Check your
program’s manual to learn more.

1. Create a new folder for your website. You can name it anything you like and store it
anywhere on your hard drive. Just make sure you’ll remember where it is.

2. Open your text editor. See “Useful Tools” in the Introduction of this tutorial for help in
choosing and locating a text editor.

3. Open a new document. This command is usually in the “File” menu, listed as “New”.

4. Save your document to your new folder as index.html. This can be tricky, so take your
time with it. If you’re using TextEdit, you need to first choose “Make Plain Text” from the
“Format” menu, and then choose “Save As…” from the “File” Menu. In notepad, choose
“Save As…” from the “File” menu, and change the Document Type to “All Files.” The
filename, when finished, should simply be index.html without any additional text. If it turns
out with an extra extension like index.html.rtf, check your program’s manual for more tips
on how to save an HTML file.

Tech Tip: The filename for the home page of a website is usually index.html.

5. Repeat steps 3 and 4 for the rest of your future webpages. Save these each as
about.html, locations.html, and pies.html.

6. Close all windows except for index.html. You won’t do anything with the others until Part
7: Adding Content.

7. Enter the basic information for an XHTML website. Copy the following information
exactly as we’ve presented it here. See below for an explanation of its pieces.

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

<html>

<head>
<title>Basic XHTML Page</title>
</head>

<body>
<p>Hello World!</p>
</body>

</html>
Complete text of index.html.

9
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

What does that stuff mean?

You’ll notice pointy brackets surround many of the words (e.g. <body>). That’s called a
tag. Tags are pieces of behind-the-scenes information that structure a webpage. In
XHTML, tags are always typed in lower case.

You’ll also notice that some of the tags have slashes inside of them (e.g. </body>), while
others don’t. Tags without slashes signify the beginning of a structure, while tags with
slashes signify the end of a structure. Here’s an example:

<title>Basic XHTML Page</title>

This snippet of code says:

1. Begin the page title (<title>).
2. The title for this page is “Basic XHTML Page.”
3. End the page title (</title>).

Take another look at the text on your new XHTML page. Ignore the three lines
beginning with “DOCTYPE” for a moment, and focus on the rest of the tags. On the
outermost edges, you have the tags <html> and </html>. This means everything inside
of them will be interpreted as website information. Next, you have two parts: the
<head> (which holds the <title> text we just talked about) and the <body>. In addition
to the <title>, the head sometimes holds other information about the website. The
information in the <head> does not show up on the website. The <title> is the text
you see at the top of the browsers (you’ll see it in the Step 11). Everything that will
appear on the webpage goes between the <body> and </body> tags.

You’ll also notice we’ve added <p> and </p> tags around the text “Hello World!” The
“p” in these tags stands for paragraph. They designate the text within as stand-alone
paragraphs, and generally add blank space above and below the region when displayed
in a browser. You’ll use <p> tags nearly every time you add text to your webpage.
Let’s get back to that “DOCTYPE” information at the top of the page. These lines
communicate to a web browser what type of document it’s looking at. It’s important
that you always include this information, but it’s not important that you memorize it or
even understand it. You should take notice of one aspect of it, though: it uses the word
“transitional.” This means the XHTML code you’re using may have some older HTML
tags in it (such as the <font> tag you’ll use in Part 5: Adding Style. Strict XHTML
expects you to use the language of CSS for that function, which we don’t have space to
cover here). If you wanted to adhere to strict XHTML regulations, you could replace the
word “transitional” with the word “strict.” If your page happened to be a frameset
(which we won’t get into here), you would replace the word “transitional” with the word
“frameset.” That’s it for your choices. We need “transitional” XHTML for this project.

8. Save your work. Just click “Save” in the “File” menu.

9. Open a web browser. We talked about different web browsers in the Introduction under
“Useful Tools.” Open your favorite one now.

10. Use your web browser to open the file you just made. Most web browsers have an “Open
File” option in the “File” menu. Use that command to find your index.html page in your
10
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

new website folder and open it. If you can’t figure out how to open a file from your
browser, try double-clicking on the file’s icon in your hard drive. It may open in a browser
automatically.

11. Take a look. You should see the text, “Hello world!” At the top of the window, you’ll see
the text “Basic XHTML Page.” That’s your “title”. Take a look:

Screenshot of index.html as basic XHTML page.

If you don’t see this content, go back to steps 4 and 7. Make sure you’ve saved properly and
entered the correct information.

Concept Review

1. What’s a tag? A tag is an XHTML instruction for a webpage. Tags are surrounded by
pointy brackets (<…>) and use a slash (</…>) to signify closure. When an opening tag and
a closing tag surround a section of information, the tags affect what is inside that
information. For example: <title>This is the Page Title</title>

2. What are those “DOCTYPE” lines at the top of a page for? The complicated
DOCTYPE lines tell the web browser how to handle your page. We use “transitional”
XHTML in this tutorial (meaning, we want the flexibility to use older HTML tags), so you’ll
see that word in the DOCTYPE. We could also use the words “strict” or “frameset” in the
DOCTYPE if it fit our purposes.

3. How do you save an XHTML page? An XHTML page must be saved with an .html
extension if you want to view it as a webpage. It also needs to be in a plain text, HTML, or
“all files” generic format, without any additional formatting style to affect it. You should
save your homepage as index.html because that’s what a web browser will look for first.

What’s Next?

In Part 3 we’ll learn how to format your new webpage so it has a useful layout with columns. To do
this, we’ll learn how to build tables with XHTML.

11
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

PART 3: Creating a Layout

In this section, you’ll create the basic layout for your website with a table. This table will have two
cells – a left cell for navigation and a right cell for content. Before you begin, make sure your text
editor is still open with your index.html file.

1. Create a basic table. Delete the line, <p>Hello world!</p> which you added in Part 2 and
enter the following new content, as shown in bold text. See below for an explanation of its
pieces.

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

<html>

<head>
<title>Basic XHTML Page</title>
</head>

<body>

<table>
<tr>
<td><p>Navigation</p></td>
<td><p>Content</p></td>
</tr>
</table>

</body>
</html>

Complete text of index.html.

What does this stuff mean?

In the new code above, you can see the structure of a table. Everything between the tags
<table> and </table> are part of the table structure. You also see the tags, <tr> and <td>. Tr
stands for “table row” while td stands for “table data” (in other words, a table cell). The
words “Navigation” and “Content” are simply placeholders set in paragraph tags. We will
replace them with real information in the upcoming sections.

In other words, this table structure says the following:

1. Start the table (<table>).

2. Start a new row (<tr>).
3. Create a cell in that row (<td>).
4. We’ll put navigation in that cell later (“<p>Navigation</p>”).
5. End that cell (<td>).
6. Create a new cell in the same row (<td>).
7. We’ll put content in that cell later (“<p>Content</p>”).
8. End that cell (<td>).
9. End the row (</tr>).
12
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

10. End the table (</table>)

Now that we have the basic table structure, lets customize it a little bit.

Tech Tip: In both HTML or XHTML, line breaks in code don’t matter very much.
You’ll see in our tutorial that sometimes we’ll add blank lines between tags, and sometimes
we’ll keep a number of tags on the same line. Line breaks are only used to make the code
easier for you to read, and they’re often interpreted as spaces (which also don’t matter very
much). The only time you don’t want a line break in your code is when you don’t want the
browser to think you’ve typed a space there, such as in the middle of a word.

2. Align the information to the top of the page. When you enter information into a table
cell, it naturally aligns horizontally to the left and vertically to the middle. Since we want
our content to always start at the top of the page, we’re going to say valign=”top” (valign is
short for “vertical alignment”). We will place this command within both <td> tags like
this:

<table>
<tr>
<td valign="top"><p>Navigation</p></td>
<td valign="top"><p>Content</p></td>
</tr>
</table>
Excerpt from index.html. Table cell alignment shown in bold.

Tech Tip: When we put information inside of a tag, we call it an attribute. In XHTML,
attributes are always in lower case and always use quotation marks.

3. Add some margins. We don’t want our text to bump up against the edge of our table, so
we’re going add some margins. Tables have two different attributes for adding margins:
cellpadding and cellspacing. Cellpadding determines the margin between the text and the
edge of a cell. Cellspacing determines the margin between the cells.

Sometimes it doesn’t matter which attribute you use to add a margin. In our case, however,
we’ll be adding background colors to our cells, and we don’t want any space in between
them. We’re going to set our cellpadding to 10 pixels and our cellspacing to 0 pixels (see
“Tech Tip” below for an explanation of pixels). Find your <table> tag and enter the text you
see in bold here:

<table cellpadding="10" cellspacing="0">

<tr>
<td valign="top"><p>Navigation</p></td>
Excerpt from index.html. Table cell padding and spacing shown in bold.

Tech Tip: A pixel is the smallest speck of color that a computer screen can display for
an image. A computer with a 600 x 800 resolution views a screen that is 600 pixels high
and 800 pixels wide. Since resolutions vary on computers, we can’t describe the actual
dimensions of a pixel to you. Once you start working with them, you’ll get a feel for how to
estimate them. Most image editors (see “Useful Tools” in the Introduction) have tools for
measuring the pixels of images.
13
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

4. Set the width of your table. We’ll have more control over our table layout if we tell it how
wide we want it to be. We can use either a percentage value or a pixel value. If we use a
percentage value, 100% would mean the table should span the entire web browser window,
80% would mean the table should span 80% of the web browser window, and so on. A
table width defined by a percentage value will resize to fit a web browser window. If your
visitors make their windows smaller or larger, the webpage will shrink or grow to fit them.

On the other hand, if we use a pixel value, the table will remain at its set size, and we’ll be
better able to predict its appearance. A good rule of thumb is not to exceed 750 pixels for
the width of your webpage content. Any larger than that, and your visitors may not see the
entire table in their web browser windows.

For this website, we’re going to use a width of 700 pixels. This value goes in the same table
tag that we edited in Step 4. Enter it like this:

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top"><p>Navigation</p></td>
Excerpt from index.html. Table width shown in bold.

Set the width of your left table cell. We want the table cells to maintain their widths
consistently across pages. Since the logo we’re going to use in the left table cell is 122 pixels
wide (jump ahead to Part 4: Adding an Image for a sneak peak) and it will be the widest item in
that cell, we’ll use that number for setting the width. We’ll set the width of a table cell
similarly to how we set the width of the table, except that we use the <td> tag. Enter it like this:

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top" width="122"><p>Navigation</p></td>
Excerpt from index.html. Table cell width shown in bold.

Tech Tip: You do not need to set the widths of all table cells, as long as enough widths
have been set to keep the cells consistent. In this case, we’ve set the width of the table at
700 pixels, and the width of the left cell to 122 pixels. The width of the right cell will
automatically set to the difference between those two values, so we do not need to type it
out. By leaving some table cells flexible, we make it easier to change those values in the
future.

5. Save and check your work. As you did at the end of in Part 2 (steps 6-9), save your work
and open it in a web browser. It should look something like this:

14
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

Screenshot of index.html as basic layout.

If your work looks significantly different the screenshot above, retrace your steps through
this section and check your code. Sometimes a missed quotation mark or bracket can throw
off an entire page.

Concept Review

1. Why do we use tables? Tables are a clear and effective way for organizing content into
particular areas on a website.

2. Why is it important to set the width of some parts of a table? Setting widths gives you
more control over the appearance of your table. If you do not set any widths, the
appearance of tables may vary based on what content it holds and what browser is viewing
it.

What’s Next?

In Part 4, you’ll learn how to add an image to your website.

15
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

PART 4: Adding an Image

In this section, we’ll add a logo image to our website. You should have your text editor open to
index.html. You’ll also need to use the Internet to get the logo.

1. Inside your website folder, create a new folder called “images”. Your website folder is
the folder you created in Step 1 of Part 2.

2. Use your web browser to visit http://www.seattlepies.com. You’ll see the logo in the
upper left-hand corner of the screen.

3. Right-click with your mouse on the Seattle Pies logo and choose “Save As…” Your
browser may use a variation on that term, like “Save Image As…” The result will be the
same.

4. Save the image to your new “images” folder. The image is already named logo.gif, so you
can just keep that name the same.

5. Repeat Steps 3 and 4 for all other images in the website. In Part 7: Adding Content, we
will add more images to our website. You can save time later on by saving all of the images
on this demo website to your “images” folder. These are the main images used with the
content on each page. Here are their filenames for reference:

Webpage Image
Home pumpkin.gif
About apple2.gif
Pies apple.gif
Locations woman.gif

6. Enter the XHTML code for the image inside the “Navigation” table cell of your
website. Enter the code exactly as you see here in bold. See below for an explanation.

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top" width="122"><img src="images/logo.gif" alt="Seattle
Pies logo" width="122" height="122" />
<p>Navigation</p></td>
<td valign="top"><p>Content</p></td>
</tr>
</table>
Excerpt from index.html. Image tag shown in bold.

What does this stuff mean?

The basic tag here is <img />, which stands for “image”. Its first attribute, src, stands for
source. To tell the web browser what the source of the image is, we need to describe the
path to the file. Since the logo.gif is in the “images” folder, we say the file path is
“images/logo.gif”.

16
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

The next few tags are optional, but they’re very useful to have. The alt attribute is short for
“alternative text.” In it, we include a description of the image. This text will display on
limited web browsers that can’t display all images (like cell phones), and they will be
communicated to the visually impaired. The width and height attributes are measurements
of the image in pixels. They help the page load faster. Your image editor can usually tell
you what the pixel measurements of an image are (don’t guess!).

Tech Tip: Since image tags don’t require a closing tag, we close them by adding a
slash to the end of the tag, like this: <img src=”file.gif” /> You’ll see this later with the
line break (<br />) and horizontal rule tags (<hr />), too.

7. Save and check your work. As you did at the ends of Parts 2 and 3, save your work and
open it in a web browser. It should look something like this:

Screenshot of index.html with new image.

If you don’t see the image, first check to make sure it is in the images folder and named
logo.gif. Your images folder should be in the same folder as your index.html file. If that’s
all okay, check to see that you typed out the <img> tag code exactly as shown above.

Concept Review

1. What do the parts of the image tag mean? In the image tag, img src means “image
source.” Alt means “alternate text,” and height and width call for the image’s measurements
in pixels.

2. Why does it matter where I store my image? The image tag needs to state exactly where
an image is stored in order for it to display the image properly. While an image doesn’t
need to be in a folder called images, it helps you as a web developer to keep things
organized.

What’s Next?

In Part 5, you’ll learn how to add color, font, and some other elements of style to your website.

17
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

PART 5: Adding Style

In this section, you’ll learn to use different colors and font faces. We’ll also cover a few content
formatting tags. Please take note we won’t be using CSS because it’s outside the scope of this
tutorial. CSS is a more powerful method of creating style in a website, and you should learn to use
it as soon as you’re comfortable with XHTML. While the tags we’ll use here are perfectly valid
style techniques, they can all be replaced and improved with CSS. Before you begin, make sure
your text editor is open with your index.html file on display.

1. Add all sections that need style. For this website, each page will need a header, a sub-
header, some body content, a footer (for copyright and contact information), and our
navigation list. Since our navigation list and footer will be consistent across all pages, we’ll
fill in the actual content for those now. For the others, we’ll just use placeholders.

Replace the words “Navigation” and “Content” in your existing document with the text as
shown here in bold. See below for an explanation of the new tags.

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top" width="122"><img src="images/logo.gif" alt="Seattle
Pies logo" width="122" height="122" />
<p>
Home <br />
About <br />
Pies <br />
Locations <br />
</p></td>
<td valign="top"><h1>Header</h1>
<h2>Sub-header</h2>
<p>Body Content</p>
<p>© 2005 Seattle Pies.
For more information, call us toll-free at 1-800-555-5678. </p></td>
</tr>
</table>
Excerpt from index.html. New content regions shown in bold.

What does this stuff mean?

In our first table cell, we added our navigation text (Home, About, Pies, and Locations).
Each one of these is followed by a <br /> tag, which stands for “line break.” Whereas a
paragraph tag set (<p> </p>) creates a block of text with an extra space above and below it,
a line break simply moves to the next line.

Next, we notice that <h1> tags surround the header and <h2> tags surround the sub-header.
The “h” in these tags stands for header, and the corresponding number stands for its size and
importance. <h1> is the largest header, while <h6> is the smallest header (all number in
between size up in order). While in the next step, we’ll learn to change the font and size of
our headers to whatever we want, it’s still important to use header tags. They signify to
search engines and other devices what information is most important on a website.

You’ll notice we have the text, “©” in our footer. When you view this webpage in
your browser, you’ll see the change into the symbol for copyright (try it!). This is a special
18
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

character, and it uses this code for greater consistency across browsers. Check the HTML
and XHTML reference guides on the web for complete lists of special characters you can
use on websites.

Tech Tip: In HTML code, the <br /> code would actually appear as <br>. A line break
stands alone, and therefore doesn’t need to be followed with a </br> tag. However, since
XHTML requires that all tags be closed, we add a slash to the end of this tag to signify its
closure.

2. Add <font> tags. Font tags are used to define the font face and size. In strict XHTML,
these have been fully replaced by CSS, which we recommend you learn after you finish this
tutorial. However, in transitional XHTML, which is what we’re using (see our description
of DOCTYPE in Part 2: Creating a New Webpage), they work just fine. Add <font> tags to
your work exactly as shown here in bold. See below for an explanation of how <font> tags
work.

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top" width="122"><img src="images/logo.gif" alt="Seattle
Pies logo" width="122" height="122" />
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Home <br />
About <br />
Pies <br />
Locations <br />
</font></p></td>
<td valign="top"><h1><font size="5" face="Verdana, Arial, Helvetica,
sans-serif">Header</font></h1>
<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Sub-
header</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Body
Content</font></p>
<p>
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005
Seattle Pies.
For more information, call us toll-free at 1-800-555-5678.
</font></p></td>
</tr>
</table>
Excerpt from index.html. Font tags shown in bold.

What does this stuff mean?

All of these <font> tags have two attributes: size and face. The face is the same for every
one: “Verdana, Arial, Helvetica, sans-serif.” These font faces are listed in order of
preference. Translated into our language, this attribute is saying, “Use the Verdana font
face for this text. If visitors don’t have Verdana installed on their computers, use Arial. If
they don’t have Arial either, use Helvetica. If they don’t have any of those, just use your
best sans-serif font.” You should always have several fonts listed as a backup, including the
basic font family.

19
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

The sizes on each of these tags vary. The header is “5,” the footer is “1,” and everything
else is “2.” Font sizes range from 1 – 7, with “1” being the smallest (take note: this is the
opposite of the <h1> … <h6> tags). “3” is the standard size, and would be displayed if no
size were set. However, Verdana is a slightly larger font than others, so “2” is a more
attractive font size for its standard. We’re also using “2” as a sub-header because we don’t
want it to be larger than the body content.

Tech Tip: Every new paragraph needs a new font tag. When you use these tags, it’s
important to keep the nesting consistent. For example, use <p><font> text </font></p>. Do
NOT use <p><font> text </p></font>.

3. Add a horizontal rule. Just before the footer, we’ll want a simple divider line, or a
horizontal rule. The tag for a horizontal rule is <hr />. Add it directly after the <p> tag
before the footer text, like this:

<p><hr />
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005
Seattle Pies.
For more information, call us toll-free at 1-800-555-5678.
</font></p></td>
Excerpt from index.html. Horizontal rule shown in bold.

4. Add color. We want to add color to the table cells, the website background, and the header
font. With websites, color is defined in hexadecimal format. This means each color is
coded with a six-character combinations of numbers and letters, preceded by a pound sign.
For example, white is #ffffff, black is #000000, and a nice light blue would be #99ccff.
Visit a website like http://www.visibone.com/colorlab or check your image editor for color
codes. Don’t try to memorize them. It’s just not possible.

Add color to your webpage by adding the text presented here in bold. See below for an
explanation of the tags.

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top" width="122" bgcolor="#99CCFF"><img
src="images/logo.gif" alt="Seattle Pies logo" width="122" height="122"
/>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Home <br />
About <br />
Pies <br />
Locations <br />
</font></p></td>
<td valign="top" bgcolor="#FFFFFF"><h1><font size="5" face="Verdana,
Arial, Helvetica, sans-serif" color="#333366">Header</font></h1>

Excerpt from index.html. Color tags shown in bold.

20
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

What does this stuff mean?

As we mentioned above, those six-character figures represent colors. The first three are
background colors, and they use the attribute bgcolor (which, as you might guess, is short
for “background color”). The first one is in the body tag, and it defines the background of
the entire webpage as a deep indigo. The second instance is in the left table cell. It colors
the cell light blue. The third instance colors the right table cell white. While it was white
before, it’s necessary to add this tag because the background defined in <body> will
otherwise override it. The fourth tag simply uses the attribute, color. This can be used in
font tags. As you’ll see, we’ve colored the header the same deep indigo as the page
background.

5. Save and check your work. As you’ve done at the end of previous sections, save your
work and open index.html in a web browser. You should see something like this:

Screenshot of index.html with new style.

If you’re not seeing things properly, retrace your work in this section and check for typos.

Concept Review

1. Why do we list multiple fonts in our <font> tags? Not every computer has the same list
of fonts installed. If we call for a font that your visitor doesn’t have, the web browser will
not know how to display the text. Offering a list of fonts informs the browser of what it
should use as a second choice, third choice, and as a worst-case scenario, the general font
family.

2. Are we really just scratching the surface here? Yes. Graphic design is its own field.
Here we’ve talked a little about colors and fonts. If you choose to study CSS after this
tutorial, you will find you have far more control over these elements, as well as others.

What’s Next?

In Part 6, you’ll learn the art of adding links to your website.

21
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

PART 6: Adding Links

In this section, we’ll add links to our navigation bar. To begin with, you should have your text
editor open with your index.html file on display.

1. Enter XHTML code for links. Adding links is a simple matter of knowing the tag format.
Enter the tags exactly as displayed here in bold. See below for an explanation of the link
tag.

<table cellpadding="10" cellspacing="0" width="700">

What does this stuff mean?

This is the first truly unintuitive tag we’ve come across so far. The <a> tag is short for
“anchor.” The attribute href is short for “hypertext reference.” Fortunately, since links are
so common, it’s easy to just memorize this one. Don’t bother trying to make too much sense
of it.

The href anchor points to the file path of the page you want to link to (see “Part 4: Adding
an Image” for another example of file paths at work.) Since the pages we’re linking to here
exist in the same folder as index.html, there’s no need to type out long file paths. If we were
linking to another website, however, we’d type the whole URL out (for example: <a
href=”http://www.google.com”> Google</a>).

The text between the <a href=”filepath”> and </a> tags is the text you will see hyperlinked
on the website.

2. Change your links’ colors. In the <body> tag of your website, you can determine the
colors of your links. You have three attributes at your fingertips for this task: link, alink,
and vlink. The link attribute is the general color for a link. The alink attribute is the color of
an “active link,” in order words, the color a link changes the second you click on it. The
vlink attribute colors the “visited links,” or links your browser knows that you’ve clicked on
before. We’re going to make the link and alink a nice dark blue, and the vlink will match the
page background deep indigo color. Remember, you can browse color codes in your image
editor or websites like http://www.visibone.com/colorlab to choose your own. Enter the tags
as shown here in bold:

<body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366">

Excerpt from index.html. Link colors shown in bold.

22
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

3. Save and check your work. As you’ve done at the end of previous sections, save your file
and open it in a web browser. You should see the same presentation you saw at the end of
Part 5, except that your navigation menu options will be underlined as links. Try clicking on
them. They should each bring you to an empty file you created in “Part 2: Creating a New
Webpage.”

Tech Tip: If you want to change any of the style or layout elements to better suit your
taste, you should do so before moving on to Part 7: Adding Content. Once you’ve
copied this appearance onto multiple webpages, it will take much more time and energy to
make changes to it.

In our next section, we will copy this layout to those pages and add unique content. Are you
ready to complete your website?

Concept Review

1. When do we have to type out a whole URL in a link? When can we just use a filename?
If the page you’re linking to is in the same folder or directory as the page with the link, you
can simply type the filename in your link code. If it’s within a folder or series of folders
which are located in the same directory as the page with the link, you can simply type the
folders and the filename (when you type folders, you use slashes like this:
“folder1/folder2/file.html”). If it’s outside of the file’s directory or simply more
complicated than you want to think about, type out the entire URL (starting with http://).
Typing out the entire URL is always an option.

What’s Next?

In Part 7, you’ll duplicate this attractive webpage design and add content, thus completing your first
website!

23
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

PART 7: Adding Content

In this section, we’ll finish up our website by copying our style and layout to other pages and
adding content. As always, begin with your text editor open and with index.html on display.

1. Open all of your other webpages. You can do this with the “Open” command in the “File”
menu. Your other webpages are called about.html, locations.html, and pies.html (you
created them in Part 2: Creating a New Webpage). Use the “Open” command to open each
of these files so that they are all in front of you in your text editor, in addition to index.html.
You may need to open them one at a time. They should all appear to be blank documents.

2. Copy the entire text of your index.html file. To do this, highlight everything in the
index.html text file and choose “Copy” from the “Edit” menu.

3. Paste the text of index.html into all of your other webpages. These are the files you
opened in Step 1. Click on each file’s blank window, go to the “Edit” menu, and choose
“Paste.” When you complete this step, every file will have exactly the same code you
developed for your index.html file.

4. Add titles to your pages. The title for each page is currently “Basic XHTML Page” (you
entered this back in Part 2: Creating a New Webpage). It’s important to have unique titles
for each webpage because they show up in search engine listings and bookmark lists. Your
visitors need to know exactly what they’re going to visit when they click on your link from
these sources. These are the titles we will use for our webpages:

Webpage Title
index.html Seattle Pies – Quality Pie Distributors – Seattle, Washington
about.html About Seattle Pies
pies.html Seattle Pies - Our Pies
locations.html Seattle Pies Locations

Enter each title between the <title> and </title> tags on every webpage, deleting the old
“Basic XHTML Page” as you go. For example, here’s how we’ll enter the title for
about.html:

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

<html>

<head>
<title>About Seattle Pies</title>
</head>

<body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366">

Excerpt from about.html. New page title shown in bold.

When you’re done, double-check each webpage to make sure its title corresponds with its
filename as shown in the table above.

24
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

5. Add headers to your pages. The header for each page is currently “Header”. Since this is
the largest and most immediately visible text on the page, it’s important to make your
headers clear titles for your page’s content. Because they serve a similar purpose as the
titles we entered in Step 4, they will have similar content. These are the headers we will use
for our webpages:

Webpage Title
index.html Welcome to Seattle Pies
about.html About Seattle Pies
pies.html Our Pies
locations.html Seattle Pies Locations

Enter each header between the <h1><font …> and </font></h1> tags on every webpage,
deleting the old “Header” as you go. For example, here’s how we’ll enter the header for
about.html:

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top" width="122" bgcolor="#99CCFF"><img src="images/logo.gif"
alt="Seattle Pies logo" width="122" height="122" />
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<a href="index.html">Home</a> <br />
<a href="about.html">About</a> <br />
<a href="pies.html">Pies</a> <br />
<a href="locations.html">Locations</a> <br />
</font></p></td>
<td valign="top" bgcolor="#FFFFFF"><h1><font size="5" face="Verdana,
Arial, Helvetica, sans-serif" color="#333366">About Seattle
Pies</font></h1>
<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Sub-
header</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Body
Content</font></p>
Excerpt from about.html. New header shown in bold.

When you’re done, double-check each webpage to make sure its title corresponds with its
filename as shown in the table above.

Now that we have our headers and titles in place, we’re going to add content to each
individual page.

6. Add content to the index.html page. Replacing the text, “Sub-header” and “Body
content,” add the following content as shown in bold here. You’ll notice some new tags
here: <center> and </center>. These, as you might guess, center everything inside of them.
They also act similarly to the <p> tag in that they isolate the region as its own paragraph.

<td valign="top" bgcolor="#FFFFFF"><h1><font size="5" face="Verdana,

Arial, Helvetica, sans-serif" color="#333366">
Welcome to Seattle Pies
</font></h1>
<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Quality Pie Distributors, Seattle, Washington

25
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

</font></h2>

<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

We specialize in high-quality delicious pies for the greater Seattle, WA
area. With five locations, you can be sure to find the right pie with us.
</font></p>
<center><img src="images/pumpkin.gif" alt="pumpkin pie" width="251"
height="150" /></center>
Excerpt from index.html. New content shown in bold.

Notice that we added the image pumpkin.gif here. This is one of the images we saved from
the Internet in Step 5 of Part 4: Adding an image. Make sure you have those images before
you continue.

7. Add content to the about.html page. Replacing the text, “Sub-header” and “Body content,”
add the following content as shown in bold here. See below for an explanation of some of
our new actions.

<td valign="top" bgcolor="#FFFFFF"><h1><font size="5" face="Verdana,

Arial, Helvetica, sans-serif" color="#333366">
About Seattle Pies
</font></h1>
<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<img src="images/apple2.gif" alt="apple pie" align="right" width="180"
height="250" />
Our Mission
</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
We strive to create the most exceptional pies in the most delicious
flavors.
</font></p>

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

Our Promise
</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Each one of our delectable pies is handmade each day at one of our stores.
We bake our pies with passion and we provide our service with a smile.
</font></p>

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

Our History
</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
In 1964, Douglas Pie discovered his ancestors' secret recipes for the
world's most delicious pies. After testing them out among friends and
family, he realized he had to share his good fortune with the world.
Douglas promptly opened Seattle Pies.
</font></p>
Excerpt from about.html. New content shown in bold.

What does this stuff mean?

We did two new things here. We added an align attribute to the image and we repeated the
sub-header. Let’s start with the align attribute. This pushes an image to either the left or

26
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

right, and lets the text wrap around it. So in this case, we’re aligning the image to the
right, and the text will display directly to the left of it. This is a very useful attribute, and
we’ll see it at work in the next two pages as well.

If you scan through the code here, you’ll see three instances of <h2>. This is because we
actually copied the subhead and the body content code and pasted it in three instances.
When doing this, it’s important to copy everything up to the proper tags, so elements
continue to nest properly. In this case, we copied from <h2> to </h2> for the sub-head, and
from <p> to </p> for the body content (we were careful, though, to make sure we grabbed
the <p> tags that just surrounded what we wanted – no more).

8. Add content to the pies.html page. Replacing the text, “Sub-header” and “Body content,”
add the following content as shown in bold here. See below for an explanation of the new
tags presented.

<td valign="top" bgcolor="#FFFFFF"><h1><font size="5" face="Verdana,

Arial, Helvetica, sans-serif" color="#333366">
Our Pies
</font></h1>
<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Flavors
</font></h2>

<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

We carry all of these fine flavors at our stores:
<ul>
<img src="images/apple.gif" align="right" width="250" height="169" />
<li>Apple</li>
<li>Dutch Apple</li>
<li>Blueberry</li>
<li>Peach Cobbler</li>
<li>Chocolate</li>
<li>Stawberry-Rhubarb</li>
<li>Pumpkin</li>
<li>Cherry</li>
<li>Lemon Cream</li>
<li>Banana Cream</li>
<li>Lemon Meringue</li>
<li>Stawberry</li>
<li>Mincemeat</li>
</ul>
</font></p>
Excerpt from pies.html. New content shown in bold.

What is this stuff?

The new tags you see here are for building lists. You’ll notice the list of pie flavors is
surrounded by the tags <ul> and </ul>. These stand for “unordered list” and they create a
bullet list. To create a numbered list, you would use the tags, <ol> and </ol>, which stand
for “ordered list”. The <li> and </li> tags stand for “list items” and they surround each
element of the list. In the next step, when you save and check your work, you’ll see the final
product of your list.

27
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

9. Add content to the locations.html page. Replacing the text, “Sub-header” and “Body
content,” add the following content as shown in bold below. Here, we use the same
technique of repeating body content that we used in Step 7 with about.html. Since this page
requires many line breaks and paragraph breaks, the tags here look very complex. Take a
close look, though. You’ve seen most these tags before, and their functions are very clear.
The only new tags here are <b> and </b>. These make text bold.

<td valign="top" bgcolor="#FFFFFF"><h1><font size="5" face="Verdana,

Arial, Helvetica, sans-serif" color="#333366">
Seattle Pies Locations
</font></h1>
<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<img src="images/woman.gif" alt="woman with pie" align="right"
height="326" width="195" />
Greater Seattle Area
</font></h2>

<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

<b>Seattle Pies - Fourth Street</b><br />
5589 Fourth St. <br />
Seattle, WA 98100</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<b>Seattle Pies - West Franklin Street</b><br />
5589 W Franklin St. <br />
Seattle, WA 98101</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<b>Seattle Pies - Scott Street</b><br />
2 Scott St. <br />
Seattle, WA 98102</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<b>Seattle Pies - Plymouth Avenue</b><br />
38A Plymouth Ave. <br />
Seattle, WA 98103</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<b>Seattle Pies - Radison Drive</b><br />
134 Radison Dr. <br />
Seattle, WA 98104</font></p>

Excerpt from locations.html. New content shown in bold.

10. Save and check your work. As you’ve done in past sections, save your pages at this point.
Then, use your web browser to open index.html. It should look something like this:

28
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

Screenshot of index.html.

You can use the links on the left-hand side to view your other pages, as well. They should
look like this:

Screenshot of about.html.

Screenshot of pies.html.

29
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

Screenshot of locations.html.

If anything on your website doesn’t look right at this point, check your webpage files against
the finished code provided in Appendix I: Finished Project Code for any differences.

Concept Review

1. What kinds of lists can XHTML create? On our “Pies” page, we see an unordered,
bulleted list. This uses the tags <ul> and </ul> for the list, as well as <li> and <li> for the
list items. XHTML can also create ordered, numbered lists. To do that, you use the same
structure, but replace the <ul> and </ul> tags with <ol> and </ol> tags. On our “Locations”
page, we see a simple list without bullets or numbers. This simply uses line breaks,
paragraph breaks, and bold text to create.

2. Is it okay to repeat header tags on a page? Yes. We did this on the “About” page with
our <h2> tags. For the sake of keeping the most important information clear to search
engines, it’s a good idea to only have one <h1> tag on each page. Repeat the others as
much as the page requires.

3. Why do we use different titles for each page? The titles (not the headers – these are
different items) will show up in search engine listings and in a visitor’s bookmark list. It’s
important to have clear titles that reflect the content of each individual page. This gives
people the information they need when deciding if they want to visit the webpage.

Congratulations! You’ve completed a website and learned the basics of XHTML!

30
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

AFTERWORD: What’s Next?

Now that you’ve completed this tutorial in XHTML, you’re ready to apply your skills to your own
website needs. You can create basic XHTML webpage files, build layouts, add style, create links,
and work with content. Those skills will take you far!

As we’ve mentioned before, however, XHTML isn’t everything to a website – it’s just the primary
foundation. Now that you have a handle on XHTML, it may be time for you to learn about
Cascading Style Sheets (CSS). Integrating CSS with your XHTML will give you significantly more
power when it comes to creating and manipulating the style of your website. Check the Internet or
your local bookstore for CSS tutorials and handbooks.

The other important skill you’ll need to learn is how to publish your work on the Internet. As we
mentioned in the introduction, you’ll need an FTP program for this. Since publishing to the web
can use a unique process based on your setup, we don’t cover those instructions in this tutorial.
Check your FTP manual for instructions and talk to your web hosting provider for additional help.

You may also want to look into pre-developed website applications in JavaScript, PHP, or ASP. As
soon as you start looking around, you’ll realize the sky is the limit!

If you have any questions about XHTML, drop us an email at support@autumntechnical.com.

We’d love to help you out.

Good luck and enjoy your new skills!

31
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

APPENDIX I: Finished Project Code

Below is the final code for each webpage we developed in this tutorial. For an electronic version,
visit http://www.seattlepies.com and right-click on each page (anywhere except for on an image or
link). Your browser will display a list of options, and one will be similar to “View Source.”
Choose that option and a new window will open with the text you see below.

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

<html>

<head>
<title>Seattle Pies - Quality Pie Distributors - Seattle, Washington</title>
</head>

<body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366">

<table cellpadding="10" cellspacing="0" width="700">

<tr>
<td valign="top" bgcolor="#99CCFF" width="122"><img src="images/logo.gif" alt="Seattle
Pies logo" width="122" height="122" />
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
<a href="index.html">Home</a> <br />
<a href="about.html">About</a> <br />
<a href="pies.html">Pies</a> <br />
<a href="locations.html">Locations</a> <br />
</font></p></td>
<td valign="top" bgcolor="#FFFFFF"><h1><font size="5" face="Verdana, Arial, Helvetica,
sans-serif" color="#333366">
Welcome to Seattle Pies
</font></h1>

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

Quality Pie Distributors, Seattle, Washington
</font></h2>

<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

We specialize in high-quality delicious pies for the greater Seattle, WA area. With five
locations, you can be sure to find the right pie with us.
</font></p>
<center><img src="images/pumpkin.gif" alt="pumpkin pie" width="251" height="150"
/></center>

<p><hr />
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005 Seattle Pies.
For more information, call us toll-free at 1-800-555-5678. </font></p></td>
</tr>
</table>

</body>

</html>

32
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

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

<html>

<head>
<title>About Seattle Pies</title>
</head>

<body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366">

<table cellpadding="10" cellspacing="0" width="700">

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

<img src="images/apple2.gif" alt="apple pie" align="right" width="180" height="250" />

Our Mission
</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
We strive to create the most exceptional pies in the most delicious flavors.
</font></p>

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

Our Promise
</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Each one of our delectable pies is handmade each day at one of our stores. We bake our
pies with passion and we provide our service with a smile.
</font></p>

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

Our History
</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
In 1964, Douglas Pie discovered his ancestors' secret recipes for the world's most
delicious pies. After testing them out among friends and family, he realized he had to
share his good fortune with the world. Douglas promptly opened Seattle Pies.
</font></p>

<p><hr />
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005 Seattle Pies.
For more information, call us toll-free at 1-800-555-5678. </font></p></td>
</tr>
</table>

</body>

</html>

33
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

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

<html>

<head>
<title>Seattle Pies - Our Pies </title>
</head>

<body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366">

<table cellpadding="10" cellspacing="0" width="700">

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

Flavors
</font></h2>

<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

<p><hr />
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005 Seattle Pies.
For more information, call us toll-free at 1-800-555-5678. </font></p></td>
</tr>
</table>

</body>

</html>

34
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

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

<html>

<head>
<title>Seattle Pies Locations</title>
</head>

<body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366">

<table cellpadding="10" cellspacing="0" width="700">

<h2><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

<img src="images/woman.gif" alt="woman with pie" align="right" height="326" width="195"

/>
Greater Seattle Area
</font></h2>

<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">

<p><hr />
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005 Seattle Pies.
For more information, call us toll-free at 1-800-555-5678. </font></p></td>
</tr>
</table>

</body>

</html>

35
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

APPENDIX II: XHTML Reference Guide

The following list covers all of the tags we used in our tutorial, as well as some other common ones.
Search the internet for “XHTML Reference Guide” to find a complete list and explanation of tags.

36
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

WORKS CITED
Castro, Elizabeth. Creating a Web Page with HTML: Visual QuickProject Guide. Berkeley:
Peachpit Press, 2005.

Claben, Michael. “XHTML Tags Reference.” Exploring XML. 2001. Jupiter Media Corporation.
2 August 2005. <http://www.webreference.com/xml/reference/xhtml.html>.