Intro to XHTML
A Tutorial for the Beginner
Presented by
Sarah Dopp
August 20, 2005
Supplementary Website:
www.SeattlePies....
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
1
TABLE OF CONTENTS
INTRODUCTION
Why Learn XHTML? ....................
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
2
INTRODUCTION
Why Learn XHTML?
XHTML (Extensible Hypertext Markup ...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
3
to use these programs to speed up the development process, but it...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
4
together our content and complete the website. This tutorial will...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
5
easier. Try their free “lite”
version to see if you like it.
Text...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
6
program for PC. It has a
free 30-day trial.
Fetch Mac http://fetc...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
7
PART 1: Planning A Website
We’ll begin by developing a plan for y...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
8
need to line up with your objectives and materials point-by-point...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
9
PART 2: Creating a New Webpage
In this section, you’ll learn to u...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
10
What does that stuff mean?
You’ll notice pointy brackets surroun...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
11
new website folder and open it. If you can’t figure out how to o...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
12
PART 3: Creating a Layout
In this section, you’ll create the bas...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
13
10. End the table (</table>)
Now that we have the basic table st...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
14
4. Set the width of your table. We’ll have more control over our...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
15
Screenshot of index.html as basic layout.
If your work looks sig...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
16
PART 4: Adding an Image
In this section, we’ll add a logo image ...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
17
The next few tags are optional, but they’re very useful to have....
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
18
PART 5: Adding Style
In this section, you’ll learn to use differ...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
19
character, and it uses this code for greater consistency across ...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
20
The sizes on each of these tags vary. The header is “5,” the foo...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
21
What does this stuff mean?
As we mentioned above, those six-char...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
22
PART 6: Adding Links
In this section, we’ll add links to our nav...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
23
3. Save and check your work. As you’ve done at the end of previo...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
24
PART 7: Adding Content
In this section, we’ll finish up our webs...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
25
5. Add headers to your pages. The header for each page is curren...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
26
</font></h2>
<p><font size="2" face="Verdana, Arial, Helvetica, ...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
27
right, and lets the text wrap around it. So in this case, we’re ...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
28
9. Add content to the locations.html page. Replacing the text, “...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
29
Screenshot of index.html.
You can use the links on the left-hand...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
30
Screenshot of locations.html.
If anything on your website doesn’...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
31
AFTERWORD: What’s Next?
Now that you’ve completed this tutorial ...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
32
APPENDIX I: Finished Project Code
Below is the final code for ea...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
33
about.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transiti...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
34
pies.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
35
locations.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Tran...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
36
APPENDIX II: XHTML Reference Guide
The following list covers all...
Sarah Dopp Intro to XTHML: A Tutorial for the Beginner
37
WORKS CITED
Castro, Elizabeth. Creating a Web Page with HTML: Vi...
Upcoming SlideShare
Loading in …5
×

Dopp xhtml tutorial

546 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
546
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dopp xhtml tutorial

  1. 1. 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
  2. 2. 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..................................................................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
  3. 3. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 2 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
  4. 4. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 3 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
  5. 5. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 4 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 in your system. Go to “Run” and type “Notepad,” or browse your Start Menu for it. This is the simplest and most popular text editor for web design. When saving 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” version to see if you like it.
  6. 6. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 5 easier. Try their free “lite” version to see if you like it. TextEdit Mac It’s probably already installed in your system. Browse your applications for its title. This is also a great, simple text editor. Just remember that when you first create a new file, you need to go to the “Format” menu and choose “Make Plain Text.” Text- Wrangler Mac http://www.barebones.com This has more features than 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 free 30-day trial.
  7. 7. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 6 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 Explorer Mac/PC http://www.microsoft.com 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.
  8. 8. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 7 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
  9. 9. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 8 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.
  10. 10. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 9 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.
  11. 11. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 10 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
  12. 12. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 11 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.
  13. 13. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 12 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>).
  14. 14. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 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 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.
  15. 15. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 14 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:
  16. 16. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 15 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.
  17. 17. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 16 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”.
  18. 18. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 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 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.
  19. 19. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 18 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>&copy; 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, “&copy;” 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
  20. 20. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 19 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">&copy; 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.
  21. 21. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 20 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">&copy; 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. <body bgcolor="#333366"> <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.
  22. 22. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 21 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.
  23. 23. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 22 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"> <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> Excerpt from index.html. Link tags shown in bold. 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.
  24. 24. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 23 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!
  25. 25. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 24 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.
  26. 26. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 25 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
  27. 27. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 26 </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
  28. 28. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 27 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.
  29. 29. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 28 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:
  30. 30. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 29 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.
  31. 31. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 30 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!
  32. 32. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 31 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!
  33. 33. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 32 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">&copy; 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. </font></p></td> </tr> </table> </body> </html>
  34. 34. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 33 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"> <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"> 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> <p><hr /> <font size="1" face="Verdana, Arial, Helvetica, sans-serif">&copy; 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. </font></p></td> </tr> </table> </body> </html>
  35. 35. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 34 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"> <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"> 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> <p><hr /> <font size="1" face="Verdana, Arial, Helvetica, sans-serif">&copy; 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. </font></p></td> </tr> </table> </body> </html>
  36. 36. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 35 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"> <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"> 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> <p><hr /> <font size="1" face="Verdana, Arial, Helvetica, sans-serif">&copy; 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. </font></p></td> </tr> </table> </body> </html>
  37. 37. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 36 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. Tag Purpose Common Attributes html Creates an XHTML document head Defines the title and other information that is not part of the webpage itself body Defines the webpage itself bgcolor, background, text, link, vlink, alink <title> Defines the page title, usually displayed in the browser'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 an ordered or unordered list <i>, <em> emphasizes text, usually with italics <b>, <strong> marks strong text, usually with bold <font> defines font for a text region face, size, color <a href="url">link text</a> creates a link, where “url” is target page and “link text” is hyperlinked text on webpage. <img src="url" /> creates an image, where “url” is target image file. alt, width, height, border, align <hr /> creates a horizontal rule
  38. 38. Sarah Dopp Intro to XTHML: A Tutorial for the Beginner 37 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>. “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>.

×