Dopp xhtml tutorial

Intro to XHTMLA Tutorial for the Beginner

Presented bySarah Dopp

August 20, 2005

Supplementary Website:www.SeattlePies.com

For more information, contact:Sarah DoppWebsite [email protected]://www.sarahdopp.com

Sarah Dopp Intro to XTHML: A Tutorial for the Beginner

1

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..................................................................9New tags: <!DOCTYPE>, <html>, <head>, <body>, <p>

PART 3: Creating A Layout............................................................................12New tags: <table>, <tr>, <td>New attributes: valign, cellpadding, cellspacing, width

PART 4: Adding An Image .............................................................................16New tags: <img />New attributes: src, alt, height

PART 5: Adding Style .....................................................................................18New tags: <br />, <h1>, <h2>, <font>, <hr />New attributes: size, face, bgcolor, color

PART 6: Adding Links ....................................................................................22New tags: <a>New attributes: href, link, alink, vlink

PART 7: Adding Content ................................................................................24New 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


2

INTRODUCTION

Why Learn XHTML?

XHTML (Extensible Hypertext Markup Language) is a clean, powerful, and reliable languageused for programming websites. It’s actually a hybrid of HTML and XML (see descriptionsbelow), designed to work with both older and newer ways of viewing the Internet. XHTML canbe used to build reliable websites with links, text, and images in the format you desire. Onceyou 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 youcan 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 inwebsites. Unfortunately, it has its drawbacks. The language does not have strict rules for howto program a website, making it easy to build webpages with sloppy code. While this is fine formost web browsers, it causes problems with cell phones, PDAs, XML readers, and other newtechnology that can access the Internet. XHTML is almost identical to HTML, except that itfollows stricter rules. Many HTML programmers are now learning XHTML so that theirwebsites can be stable in the new generations of technology.

Here are the main differences between HTML and XHTML:

XHTML HTMLElements 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 alanguage for organizing content. XML follows strict regulations for labeling different types ofcontent 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 theirXML readers. An increasing number of people find useful applications for XML today. It’s notyet the norm, however, because most people still prefer to view information in an attractivewebsite through their web browsers. XHTML is a bridge between HTML and XML. Itcombines the organizational rules of XML with the display flexibility of HTML. Building yourwebsites 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 allof these will help you create a website without asking you to touch programming code, it’scommon to run into problems with them. Often times, the software will create formats overformats and styles over styles, leaving you with a design mess that isn’t easily fixed. It’s okay


3

to use these programs to speed up the development process, but it’s also important to know yourwebsite’s programming language so you can handle situations when problems arise. You cancompare building a website to translating a story from another language. If you do it with acomputer 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 programminglanguages commonly used with XHTML, or explain how to edit images for the web. Thistutorial will simply provide you with the basic foundation for web development by teaching youthe most common uses for XHTML. When you finish this tutorial, you will have the knowledgeyou 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 inconjunction 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 forhandling style in this tutorial, but these methods will not have the power and capabilities ofCSS. If you plan to continue studying web development after this tutorial, CSS should be yournext 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 forbecoming an effective web developer. Many useful website programs have already beendeveloped 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 productwill have four pages: Home, About, Pies, and Locations. Here’s what the Home page will looklike 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 thengrab the images from the SeattlePies.com website, where our final product already exists foryour reference. Finally, we’ll use links, fonts, and some useful formatting techniques to put


4

together our content and complete the website. This tutorial will teach you the most commonuses 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. Youmay have your own website project that you want to work on, and it will be useful for you tokeep that in mind. However, we recommend you put that website aside until you complete thistutorial. Every website is different. If you try to apply our instructions for the fictional SeattlePies website to the development of your own website as you read this for the first time, you mayfind yourself confused and frustrated. Once you’ve completed your first website through thistutorial, 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 NewWebpage, Creating a Layout, Adding an Image, Adding Style, Adding Links, and AddingContent. Each section is further broken down into steps, with actual code and screenshotsdisplayed wherever they will help you learn. At the end of most sections, you’ll have anopportunity to compare your work with screenshots of the website, as it should appear at thatstage. This constant system of checking will keep you aware of any mistakes you’ve made asyou 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’represented to create the final website product. You will gain the most from this tutorial if youfollow all of the steps in order from beginning to end. Once you’ve completed the tutorial, youcan use the final Appendix II: XHTML Reference Guide as a quick cheat-sheet for future workwith XHTML.

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

http://www.seattlepies.com

Useful Tools

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

Program System Where is it? Comments & TipsNotepad PC It’s probably already installed

in your system. Go to “Run”and type “Notepad,” orbrowse your Start Menu for it.

This is the simplest andmost popular text editor forweb design. When savingyour files, make sure yourdocument type is “all files.”

UltraEdit PC http://www.ultraedit.com This is a powerful HTMLeditor, so it has morefeatures to make your workeasier. Try their free “lite”version to see if you like it.


5

easier. Try their free “lite”version to see if you like it.

TextEdit Mac It’s probably already installedin your system. Browse yourapplications for its title.

This is also a great, simpletext editor. Just rememberthat when you first create anew file, you need to go tothe “Format” menu andchoose “Make Plain Text.”

Text-Wrangler

Mac http://www.barebones.com This has more features thanTextEdit, and is also free.

BBEdit Mac http://www.barebones.com This is a powerful HTMLeditor, so it has morefeatures to make your workeasier. You can downloadthe demo from theirwebsite.

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

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

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

FTP ProgramWhen 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 webspace, you need to first browse the Internet for “web hosts” and choose a provider). There are anumber of options available for FTP Programs. Here are some of the most popular:

Program System Where is it? Comments & TipsFileZilla Mac/PC http://filezilla.sourceforge.net/ This is a free program with

many features. It may seema little more complicatedthan other programs,though.

CuteFTP Mac/PC http://www.cuteftp.com This is an easy-to-useprogram with a free 30-daytrial.

WS_FTP PC http://www.ipswitch.com This is a popular FTPprogram for PC. It has afree 30-day trial.


6

program for PC. It has afree 30-day trial.

Fetch Mac http://fetchsoftworks.com/ This is a popular FTPprogram for Mac. It has afree 15-day trial.

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

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

Here are some of the most popular web browsers:

Program System Where is it?InternetExplorer

Mac/PC http://www.microsoft.com

Firefox Mac/PC http://www.getfirefox.comOpera Mac/PC http://www.opera.comSafari Mac Already installed on your Mac system.

Not all web browsers display pages in the same way. Since each of these is used by largenumbers of people, it’s important to know how your website looks on all of them. Webdevelopers highly recommend you install all of these web browsers on your computer, ifpossible. 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.


7

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

1. Define your objectives. Are you trying to share information? Increase business? Gathercontacts? Narrow your ideas down to specific results. What outcomes do you want to seefrom 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 isnot interested in collecting email addresses from its visitors, and it doesn’t want to sell piesonline. Defining your goals makes the your final product attainable. This is a veryimportant step.

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

Once you know what you have, consider what you need. Do you need to hire copywritersand graphic designers to get the website you desire? Do you need to spend more timelearning the about the product or company before you can comfortably sell it? Do you needto 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 everythingwe need for the project.

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


8

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

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 yourwebsite. It may be helpful to type each page of content out in a word processing program asyou’d like it to appear on the website. Notice the places where text should be emphasized orlaid out differently (such as in bulleted list).

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

In Seattle Pies’s website, we plan to use a large header for each page, as well as theoccasional smaller sub-header. One of our pages will require bulleted lists and one willrequire 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 SeattlePies’s website.

Concept Review

1. Why is it important to plan your website before you begin? Planning your website willsave you time and money in the long run. If you plan as you go or change your plansmidway through, you may eventually need to throw out your own work and start fromscratch. If you have a clear plan for organization, design, development, and content beforeyou 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 basicsof an XHTML document. When you’re finished with Part 2, you’ll have created your first basicwebpage.


9

PART 2: Creating a New WebpageIn this section, you’ll learn to use your text editor to create XHTML pages. You’ll also learnthe basic format for an XHTML page. As we mentioned in the introduction, you can choosebetween a number of programs for editing your XHTML pages. Since each text editor isdifferent, we won’t go very deep into detail about the actual functions for each one. Check yourprogram’s manual to learn more.

1. Create a new folder for your website. You can name it anything you like and store itanywhere 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 inchoosing 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 yourtime 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.” Thefilename, when finished, should simply be index.html without any additional text. If it turnsout with an extra extension like index.html.rtf, check your program’s manual for more tipson 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 asabout.html, locations.html, and pies.html.

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

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

<!DOCTYPE htmlPUBLIC "-//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.


10

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

You’ll also notice that some of the tags have slashes inside of them (e.g. </body>), whileothers don’t. Tags without slashes signify the beginning of a structure, while tags withslashes 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 linesbeginning with “DOCTYPE” for a moment, and focus on the rest of the tags. On theoutermost edges, you have the tags <html> and </html>. This means everything insideof 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 additionto the <title>, the head sometimes holds other information about the website. Theinformation in the <head> does not show up on the website. The <title> is the textyou see at the top of the browsers (you’ll see it in the Step 11). Everything that willappear 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-aloneparagraphs, and generally add blank space above and below the region when displayedin 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 linescommunicate to a web browser what type of document it’s looking at. It’s importantthat you always include this information, but it’s not important that you memorize it oreven 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 HTMLtags in it (such as the <font> tag you’ll use in Part 5: Adding Style. Strict XHTMLexpects you to use the language of CSS for that function, which we don’t have space tocover here). If you wanted to adhere to strict XHTML regulations, you could replace theword “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 “OpenFile” option in the “File” menu. Use that command to find your index.html page in your


11

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

11. Take a look. You should see the text, “Hello world!” At the top of the window, you’ll seethe 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 andentered the correct information.

Concept Review

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

2. What are those “DOCTYPE” lines at the top of a page for? The complicatedDOCTYPE 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’llsee that word in the DOCTYPE. We could also use the words “strict” or “frameset” in theDOCTYPE if it fit our purposes.

3. How do you save an XHTML page? An XHTML page must be saved with an .htmlextension 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 shouldsave 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 dothis, we’ll learn how to build tables with XHTML.


12

PART 3: Creating a LayoutIn this section, you’ll create the basic layout for your website with a table. This table will have twocells – a left cell for navigation and a right cell for content. Before you begin, make sure your texteditor 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 andenter the following new content, as shown in bold text. See below for an explanation of itspieces.


<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>. Trstands for “table row” while td stands for “table data” (in other words, a table cell). Thewords “Navigation” and “Content” are simply placeholders set in paragraph tags. We willreplace 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>).


13

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 sometimeswe’ll keep a number of tags on the same line. Line breaks are only used to make the codeeasier for you to read, and they’re often interpreted as spaces (which also don’t matter verymuch). The only time you don’t want a line break in your code is when you don’t want thebrowser 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 tablecell, it naturally aligns horizontally to the left and vertically to the middle. Since we wantour content to always start at the top of the page, we’re going to say valign=”top” (valign isshort for “vertical alignment”). We will place this command within both <td> tags likethis:

<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, sowe’re going add some margins. Tables have two different attributes for adding margins:cellpadding and cellspacing. Cellpadding determines the margin between the text and theedge 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 betweenthem. 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 yousee 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 foran image. A computer with a 600 x 800 resolution views a screen that is 600 pixels highand 800 pixels wide. Since resolutions vary on computers, we can’t describe the actualdimensions of a pixel to you. Once you start working with them, you’ll get a feel for how toestimate them. Most image editors (see “Useful Tools” in the Introduction) have tools formeasuring the pixels of images.


14

4. Set the width of your table. We’ll have more control over our table layout if we tell it howwide we want it to be. We can use either a percentage value or a pixel value. If we use apercentage 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. Atable width defined by a percentage value will resize to fit a web browser window. If yourvisitors 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 bebetter able to predict its appearance. A good rule of thumb is not to exceed 750 pixels forthe width of your webpage content. Any larger than that, and your visitors may not see theentire 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 tabletag 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 widthsconsistently across pages. Since the logo we’re going to use in the left table cell is 122 pixelswide (jump ahead to Part 4: Adding an Image for a sneak peak) and it will be the widest item inthat cell, we’ll use that number for setting the width. We’ll set the width of a table cellsimilarly 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 widthshave been set to keep the cells consistent. In this case, we’ve set the width of the table at700 pixels, and the width of the left cell to 122 pixels. The width of the right cell willautomatically set to the difference between those two values, so we do not need to type itout. By leaving some table cells flexible, we make it easier to change those values in thefuture.

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


15

Screenshot of index.html as basic layout.

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

Concept Review

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

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

What’s Next?

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


16

PART 4: Adding an ImageIn this section, we’ll add a logo image to our website. You should have your text editor open toindex.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 isthe 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 theupper left-hand corner of the screen.

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

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

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

Webpage ImageHome pumpkin.gifAbout apple2.gifPies apple.gif

Locations woman.gif

6. Enter the XHTML code for the image inside the “Navigation” table cell of yourwebsite. 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="SeattlePies 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.


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


17

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 onlimited web browsers that can’t display all images (like cell phones), and they will becommunicated to the visually impaired. The width and height attributes are measurementsof the image in pixels. They help the page load faster. Your image editor can usually tellyou 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 aslash to the end of the tag, like this: <img src=”file.gif” /> You’ll see this later with theline 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 andopen 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 namedlogo.gif. Your images folder should be in the same folder as your index.html file. If that’sall 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 “imagesource.” Alt means “alternate text,” and height and width call for the image’s measurementsin pixels.

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

What’s Next?

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


18

PART 5: Adding StyleIn this section, you’ll learn to use different colors and font faces. We’ll also cover a few contentformatting tags. Please take note we won’t be using CSS because it’s outside the scope of thistutorial. CSS is a more powerful method of creating style in a website, and you should learn to useit as soon as you’re comfortable with XHTML. While the tags we’ll use here are perfectly validstyle techniques, they can all be replaced and improved with CSS. Before you begin, make sureyour 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 ournavigation list. Since our navigation list and footer will be consistent across all pages, we’llfill 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 asshown 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="SeattlePies 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.


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 aparagraph 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 andimportance. <h1> is the largest header, while <h6> is the smallest header (all number inbetween size up in order). While in the next step, we’ll learn to change the font and size ofour headers to whatever we want, it’s still important to use header tags. They signify tosearch 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 inyour browser, you’ll see the change into the symbol for copyright (try it!). This is a special


19

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

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

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 thistutorial. However, in transitional XHTML, which is what we’re using (see our descriptionof DOCTYPE in Part 2: Creating a New Webpage), they work just fine. Add <font> tags toyour work exactly as shown here in bold. See below for an explanation of how <font> tagswork.

<table cellpadding="10" cellspacing="0" width="700"><tr><td valign="top" width="122"><img src="images/logo.gif" alt="SeattlePies 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">BodyContent</font></p><p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005Seattle 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.


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


20

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

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

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

<p><hr /><font size="1" face="Verdana, Arial, Helvetica, sans-serif">© 2005Seattle 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 headerfont. With websites, color is defined in hexadecimal format. This means each color iscoded 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 colorcodes. 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 anexplanation of the tags.

<body bgcolor="#333366">

<table cellpadding="10" cellspacing="0" width="700"><tr><td valign="top" width="122" bgcolor="#99CCFF"><imgsrc="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.


21


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

5. Save and check your work. As you’ve done at the end of previous sections, save yourwork 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 listof fonts installed. If we call for a font that your visitor doesn’t have, the web browser willnot know how to display the text. Offering a list of fonts informs the browser of what itshould use as a second choice, third choice, and as a worst-case scenario, the general fontfamily.

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


22

PART 6: Adding LinksIn this section, we’ll add links to our navigation bar. To begin with, you should have your texteditor 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 linktag.

<table cellpadding="10" cellspacing="0" width="700"><tr><td valign="top" width="122" bgcolor="#99CCFF"><imgsrc="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>

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


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 areso common, it’s easy to just memorize this one. Don’t bother trying to make too much senseof it.

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

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

2. Change your links’ colors. In the <body> tag of your website, you can determine thecolors 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 ofan “active link,” in order words, the color a link changes the second you click on it. Thevlink attribute colors the “visited links,” or links your browser knows that you’ve clicked onbefore. We’re going to make the link and alink a nice dark blue, and the vlink will match thepage background deep indigo color. Remember, you can browse color codes in your imageeditor or websites like http://www.visibone.com/colorlab to choose your own. Enter the tagsas shown here in bold:

<body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366">Excerpt from index.html. Link colors shown in bold.


23

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

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

In our next section, we will copy this layout to those pages and add unique content. Are youready 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, youcan simply type the filename in your link code. If it’s within a folder or series of folderswhich are located in the same directory as the page with the link, you can simply type thefolders 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 morecomplicated 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 firstwebsite!


24

PART 7: Adding ContentIn this section, we’ll finish up our website by copying our style and layout to other pages andadding 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 (youcreated them in Part 2: Creating a New Webpage). Use the “Open” command to open eachof 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 theindex.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 youopened 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 youdeveloped for your index.html file.

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

Webpage Titleindex.html Seattle Pies – Quality Pie Distributors – Seattle, Washingtonabout.html About Seattle Piespies.html Seattle Pies - Our Pieslocations.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 forabout.html:


<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 itsfilename as shown in the table above.


25

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

Webpage Titleindex.html Welcome to Seattle Piesabout.html About Seattle Piespies.html Our Pieslocations.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 forabout.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 SeattlePies</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">BodyContent</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 itsfilename as shown in the table above.

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

6. Add content to the index.html page. Replacing the text, “Sub-header” and “Bodycontent,” add the following content as shown in bold here. You’ll notice some new tagshere: <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


26

</font></h2>

<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">We specialize in high-quality delicious pies for the greater Seattle, WAarea. 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 fromthe Internet in Step 5 of Part 4: Adding an image. Make sure you have those images beforeyou 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 ofour 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 deliciousflavors.</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 theworld's most delicious pies. After testing them out among friends andfamily, 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.


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


27

right, and lets the text wrap around it. So in this case, we’re aligning the image to theright, and the text will display directly to the left of it. This is a very useful attribute, andwe’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 weactually 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 elementscontinue to nest properly. In this case, we copied from <h2> to </h2> for the sub-head, andfrom <p> to </p> for the body content (we were careful, though, to make sure we grabbedthe <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 newtags 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 issurrounded by the tags <ul> and </ul>. These stand for “unordered list” and they create abullet list. To create a numbered list, you would use the tags, <ol> and </ol>, which standfor “ordered list”. The <li> and </li> tags stand for “list items” and they surround eachelement of the list. In the next step, when you save and check your work, you’ll see the finalproduct of your list.


28

9. Add content to the locations.html page. Replacing the text, “Sub-header” and “Bodycontent,” add the following content as shown in bold below. Here, we use the sametechnique of repeating body content that we used in Step 7 with about.html. Since this pagerequires many line breaks and paragraph breaks, the tags here look very complex. Take aclose 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:


29

Screenshot of index.html.

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

Screenshot of about.html.

Screenshot of pies.html.


30

Screenshot of locations.html.

If anything on your website doesn’t look right at this point, check your webpage files againstthe 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 thelist items. XHTML can also create ordered, numbered lists. To do that, you use the samestructure, 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 withour <h2> tags. For the sake of keeping the most important information clear to searchengines, it’s a good idea to only have one <h1> tag on each page. Repeat the others asmuch as the page requires.

3. Why do we use different titles for each page? The titles (not the headers – these aredifferent items) will show up in search engine listings and in a visitor’s bookmark list. It’simportant to have clear titles that reflect the content of each individual page. This givespeople 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!


31

AFTERWORD: What’s Next?Now that you’ve completed this tutorial in XHTML, you’re ready to apply your skills to your ownwebsite 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 primaryfoundation. Now that you have a handle on XHTML, it may be time for you to learn aboutCascading Style Sheets (CSS). Integrating CSS with your XHTML will give you significantly morepower when it comes to creating and manipulating the style of your website. Check the Internet oryour 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 wementioned in the introduction, you’ll need an FTP program for this. Since publishing to the webcan 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. Assoon 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 [email protected]’d love to help you out.

Good luck and enjoy your new skills!


32

APPENDIX I: Finished Project CodeBelow 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 orlink). 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 htmlPUBLIC "-//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="SeattlePies 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 fivelocations, 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>


33

about.html<!DOCTYPE htmlPUBLIC "-//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>


<table cellpadding="10" cellspacing="0" width="700"><tr><td valign="top" bgcolor="#99CCFF" width="122"><img src="images/logo.gif" alt="SeattlePies 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">

<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 ourpies 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 mostdelicious pies. After testing them out among friends and family, he realized he had toshare his good fortune with the world. Douglas promptly opened Seattle Pies.</font></p>


</body>

</html>


34

pies.html<!DOCTYPE htmlPUBLIC "-//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>


<table cellpadding="10" cellspacing="0" width="700"><tr><td valign="top" bgcolor="#99CCFF" width="122"><img src="images/logo.gif" alt="SeattlePies 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">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>


</body>

</html>


35

locations.html<!DOCTYPE htmlPUBLIC "-//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>


<table cellpadding="10" cellspacing="0" width="700"><tr><td valign="top" bgcolor="#99CCFF" width="122"><img src="images/logo.gif" alt="SeattlePies 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">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>


</body>

</html>


36

APPENDIX II: XHTML Reference GuideThe 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.

Tag Purpose Common Attributeshtml Creates an XHTML documenthead Defines the title and

other information that isnot part of the webpageitself

body Defines the webpageitself

bgcolor, background,text, link, vlink, alink

<title> Defines the page title,usually displayed in thebrowser's title bar

<p> defines a text paragraph<br /> Defines a forced

linebreak.<center> centers a region of

content<h1>...<h6> Defines a level 1-6

heading.<table> defines a table cellpadding, cellspacing,

width, bgcolor,background, border

<tr> defines a table row<td> defines a table cell width, bgcolor,

background, align,valign, colspan, rowspan

<ol> Defines an ordered list(1, 2, 3, ...).

<ul> Defines an unordered,bulleted list.

<li> defines a list item in anordered or unordered list

<i>, <em> emphasizes text, usuallywith italics

<b>, <strong> marks strong text,usually with bold

<font> defines font for a textregion

face, size, color

<a href="url">linktext</a>

creates a link, where“url” is target page and“link text” ishyperlinked text onwebpage.

<img src="url" /> creates an image, where“url” is target imagefile.

alt, width, height,border, align

<hr /> creates a horizontal rule


37

WORKS CITEDCastro, 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>.

“Introduction to XHTML.” W3Schools. 2005. Refsnes Data. 2 August 2005.<http://www.w3schools.com/xhtml/xhtml_intro.asp>.

“Webmaster’s Color Laboratory.” VisiBone. 2004. VisiBone 8 August 2005.<http://www.visibone.com/colorlab>.

Dopp xhtml tutorial

Technology

Transcript of Dopp xhtml tutorial