Intro to XHTML A Tutorial for the Beginner

Size: px

Start display at page:

Download "Intro to XHTML A Tutorial for the Beginner"

Jodie Golden
6 years ago
Views:

1 Intro to XHTML A Tutorial for the Beginner Presented by Sarah Dopp August 20, 2005 Supplementary Website: For more information, contact: Sarah Dopp Website Developer sarah@sarahdopp.com

2 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

3 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 Elements must be in lowercase. Tags must be closed. Documents must be properly formed. Attributes need quotation marks. HTML Case doesn t matter. Closing tags doesn t always matter. Documents can have inconsistent nesting and elements outside of their proper locations. Quotations marks aren t important. What is XML? Why Not Learn That? If HTML is a language for displaying content, XML (Extensible Markup Language) is a language for organizing content. XML follows strict regulations for labeling different types of content within a document, so that it can be shared in a consistent way. It does not, however, state how that information will be displayed. That s up to the audience to define with their XML readers. An increasing number of people find useful applications for XML today. It s not yet the norm, however, because most people still prefer to view information in an attractive website through their web browsers. XHTML is a bridge between HTML and XML. It combines the organizational rules of XML with the display flexibility of HTML. Building your websites in XHTML will ensure that most Internet devices can view them properly. Why Not Use Software that Builds Websites Automatically? Software companies have developed a number of powerful programs for building websites. These include Macromedia Dreamweaver, Adobe GoLive, and Microsoft FrontPage. While all of these will help you create a website without asking you to touch programming code, it s common to run into problems with them. Often times, the software will create formats over formats and styles over styles, leaving you with a design mess that isn t easily fixed. It s okay 2

4 to use these programs to speed up the development process, but it s also important to know your website s programming language so you can handle situations when problems arise. You can compare building a website to translating a story from another language. If you do it with a computer program and you don t know the language, it s hard to get it just right. What This Tutorial is Not This tutorial is not an exhaustive study of XHTML. It also doesn t address other programming languages commonly used with XHTML, or explain how to edit images for the web. This tutorial will simply provide you with the basic foundation for web development by teaching you the most common uses for XHTML. When you finish this tutorial, you will have the knowledge you need to study other aspects of website programming and understand them in context. Please take note that this tutorial will not cover CSS (Cascading Style Sheets). CSS is used in conjunction with XHTML. It is the most effective and powerful language for editing the colors, fonts, and even some layout aspects of a website. We will cover some basic methods for handling style in this tutorial, but these methods will not have the power and capabilities of CSS. If you plan to continue studying web development after this tutorial, CSS should be your next topic. This tutorial also doesn t cover languages that make your website more interactive, like PHP, ASP, and JavaScript. These languages are all more difficult to learn, and are not necessary for becoming an effective web developer. Many useful website programs have already been developed in these languages, and are freely available on the Internet. What We ll Do We re going to build a website for a fictional company called Seattle Pies. The final product will have four pages: Home, About, Pies, and Locations. Here s what the Home page will look like when we re finished: Screenshot of index.html in final form. Using XHTML, we ll develop a layout with two table cells and add some color. We ll then grab the images from the SeattlePies.com website, where our final product already exists for your reference. Finally, we ll use links, fonts, and some useful formatting techniques to put 3

5 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: 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. 4 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 This is a powerful HTML editor, so it has more features to make your work easier. Try their free lite

6 easier. Try their free lite version to see if you like it. 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. Mac This has more features than TextEdit, and is also free. TextEdit Mac It s probably already installed in your system. Browse your applications for its title. Text- Wrangler BBEdit Mac 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 This is a free program with many features. It may seem a little more complicated than other programs, though. CuteFTP Mac/PC This is an easy-to-use program with a free 30-day trial. WS_FTP PC This is a popular FTP program for PC. It has a 5

7 program for PC. It has a free 30-day trial. Fetch Mac This is a popular FTP program for Mac. It has a free 15-day trial. Since all FTP programs are different, we re not going to talk about their specific processes in this tutorial. Check your program s manual for instructions. To connect your FTP program to your web space, talk to your web hosting provider for the information you need. Web Browser Your web browser is the program you use to explore the Internet. It s also the program you will use to check your progress on your web development. Fortunately, your webpages do not need to be on the Internet in order to be viewed in a web browser. You can view them directly on your hard drive. Here are some of the most popular web browsers: Program System Where is it? Internet Mac/PC Explorer Firefox Mac/PC Opera Mac/PC Safari Mac Already installed on your Mac system. Not all web browsers display pages in the same way. Since each of these is used by large numbers of people, it s important to know how your website looks on all of them. Web developers highly recommend you install all of these web browsers on your computer, if possible. That way, you can check your website for inconsistencies across web browsers. Are you ready to get started? Great! In Part 1 we ll talk about planning a website. 6

8 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 addresses from its visitors, and it doesn t want to sell pies online. Defining your goals makes the your final product attainable. This is a very important step. 2. Gather your resources. Start with what you have. What images and text do you already have for the website? Do you have a logo in a web-friendly format? Do you have a sales description for your products and company? Do you have a staff on call for creating new material as you need it? Once you know what you have, consider what you need. Do you need to hire copywriters and graphic designers to get the website you desire? Do you need to spend more time learning the about the product or company before you can comfortably sell it? Do you need to interview key people for help defining the look and feel of the site? Seattle Pies has provided us with - Their logo in.gif format. - Some other clip art images to represent their company. - A description of their company. - Their contact information. - A list of their pies. Between these resources and our soon-to-be-acquired XHTML skills, we have everything we need for the project. 3. Define your webpage organization. Here you need to organize your website by determining how you will divide the content into pages. This organization should address the objectives you defined in Step 1 and work with the material you gathered in Step 2. For example, if you aim to share information about the company and you have a clear description of it, make sure there is an About page to your website. Your pages don t 7

9 need to line up with your objectives and materials point-by-point, but they do need to encompass the needs of both your company and your visitor. List your pages by the title you will refer to them by in a navigation menu. They should be short and easy to understand. We re going to use four pages for our Seattle Pies website: - Home (the first page a visitor sees) - About - Pies - Locations These pages address Seattle Pies s objectives in a way that a visitor can easily understand. 4. Define your content organization. Take a moment to compile the actual content for your website. It may be helpful to type each page of content out in a word processing program as you d like it to appear on the website. Notice the places where text should be emphasized or laid out differently (such as in bulleted list). Tech Tip: Website content should be easy to skim. Use small paragraphs, short sentences, bold headings, and lists where possible. In Seattle Pies s website, we plan to use a large header for each page, as well as the occasional smaller sub-header. One of our pages will require bulleted lists and one will require a non-bulleted list. For the sake of moving you onto the next step, we ll wait until Part 7: Adding Content before we discuss the actual text we ve developed for Seattle Pies s website. Concept Review 1. Why is it important to plan your website before you begin? Planning your website will save you time and money in the long run. If you plan as you go or change your plans midway through, you may eventually need to throw out your own work and start from scratch. If you have a clear plan for organization, design, development, and content before you begin, you ll find that building your website is much easier. What s Next? In Part 2, you ll learn how to save webpages in the proper format, as well as how to code the basics of an XHTML document. When you re finished with Part 2, you ll have created your first basic webpage. 8

10 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" " <html> <head> <title>basic XHTML Page</title> </head> <body> <p>hello World!</p> </body> </html> Complete text of index.html. 9

11 What does that stuff mean? You ll notice pointy brackets surround many of the words (e.g. <body>). That s called a tag. Tags are pieces of behind-the-scenes information that structure a webpage. In XHTML, tags are always typed in lower case. You ll also notice that some of the tags have slashes inside of them (e.g. </body>), while others don t. Tags without slashes signify the beginning of a structure, while tags with slashes signify the end of a structure. Here s an example: <title>basic XHTML Page</title> This snippet of code says: 1. Begin the page title (<title>). 2. The title for this page is Basic XHTML Page. 3. End the page title (</title>). Take another look at the text on your new XHTML page. Ignore the three lines beginning with DOCTYPE for a moment, and focus on the rest of the tags. On the outermost edges, you have the tags <html> and </html>. This means everything inside of them will be interpreted as website information. Next, you have two parts: the <head> (which holds the <title> text we just talked about) and the <body>. In addition to the <title>, the head sometimes holds other information about the website. The information in the <head> does not show up on the website. The <title> is the text you see at the top of the browsers (you ll see it in the Step 11). Everything that will appear on the webpage goes between the <body> and </body> tags. You ll also notice we ve added <p> and </p> tags around the text Hello World! The p in these tags stands for paragraph. They designate the text within as stand-alone paragraphs, and generally add blank space above and below the region when displayed in a browser. You ll use <p> tags nearly every time you add text to your webpage. Let s get back to that DOCTYPE information at the top of the page. These lines communicate to a web browser what type of document it s looking at. It s important that you always include this information, but it s not important that you memorize it or even understand it. You should take notice of one aspect of it, though: it uses the word transitional. This means the XHTML code you re using may have some older HTML tags in it (such as the <font> tag you ll use in Part 5: Adding Style. Strict XHTML expects you to use the language of CSS for that function, which we don t have space to cover here). If you wanted to adhere to strict XHTML regulations, you could replace the word transitional with the word strict. If your page happened to be a frameset (which we won t get into here), you would replace the word transitional with the word frameset. That s it for your choices. We need transitional XHTML for this project. 8. Save your work. Just click Save in the File menu. 9. Open a web browser. We talked about different web browsers in the Introduction under Useful Tools. Open your favorite one now. 10. Use your web browser to open the file you just made. Most web browsers have an Open File option in the File menu. Use that command to find your index.html page in your 10

12 new website folder and open it. If you can t figure out how to open a file from your browser, try double-clicking on the file s icon in your hard drive. It may open in a browser automatically. 11. Take a look. You should see the text, Hello world! At the top of the window, you ll see the text Basic XHTML Page. That s your title. Take a look: Screenshot of index.html as basic XHTML page. If you don t see this content, go back to steps 4 and 7. Make sure you ve saved properly and entered the correct information. Concept Review 1. What s a tag? A tag is an XHTML instruction for a webpage. Tags are surrounded by pointy brackets (< >) and use a slash (</ >) to signify closure. When an opening tag and a closing tag surround a section of information, the tags affect what is inside that information. For example: <title>this is the Page Title</title> 2. What are those DOCTYPE lines at the top of a page for? The complicated DOCTYPE lines tell the web browser how to handle your page. We use transitional XHTML in this tutorial (meaning, we want the flexibility to use older HTML tags), so you ll see that word in the DOCTYPE. We could also use the words strict or frameset in the DOCTYPE if it fit our purposes. 3. How do you save an XHTML page? An XHTML page must be saved with an.html extension if you want to view it as a webpage. It also needs to be in a plain text, HTML, or all files generic format, without any additional formatting style to affect it. You should save your homepage as index.html because that s what a web browser will look for first. What s Next? In Part 3 we ll learn how to format your new webpage so it has a useful layout with columns. To do this, we ll learn how to build tables with XHTML. 11

13 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" " <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> What does this stuff mean? Complete text of index.html. In the new code above, you can see the structure of a table. Everything between the tags <table> and </table> are part of the table structure. You also see the tags, <tr> and <td>. Tr stands for table row while td stands for table data (in other words, a table cell). The words Navigation and Content are simply placeholders set in paragraph tags. We will replace them with real information in the upcoming sections. In other words, this table structure says the following: 1. Start the table (<table>). 2. Start a new row (<tr>). 3. Create a cell in that row (<td>). 4. We ll put navigation in that cell later ( <p>navigation</p> ). 5. End that cell (<td>). 6. Create a new cell in the same row (<td>). 7. We ll put content in that cell later ( <p>content</p> ). 8. End that cell (<td>). 9. End the row (</tr>). 12

14 10. End the table (</table>) Now that we have the basic table structure, lets customize it a little bit. Tech Tip: In both HTML or XHTML, line breaks in code don t matter very much. You ll see in our tutorial that sometimes we ll add blank lines between tags, and sometimes we ll keep a number of tags on the same line. Line breaks are only used to make the code easier for you to read, and they re often interpreted as spaces (which also don t matter very much). The only time you don t want a line break in your code is when you don t want the browser to think you ve typed a space there, such as in the middle of a word. 2. Align the information to the top of the page. When you enter information into a table cell, it naturally aligns horizontally to the left and vertically to the middle. Since we want our content to always start at the top of the page, we re going to say valign= top (valign is short for vertical alignment ). We will place this command within both <td> tags like this: <table> <tr> <td valign="top"><p>navigation</p></td> <td valign="top"><p>content</p></td> </tr> </table> Excerpt from index.html. Table cell alignment shown in bold. Tech Tip: When we put information inside of a tag, we call it an attribute. In XHTML, attributes are always in lower case and always use quotation marks. 3. Add some margins. We don t want our text to bump up against the edge of our table, so we re going add some margins. Tables have two different attributes for adding margins: cellpadding and cellspacing. Cellpadding determines the margin between the text and the edge of a cell. Cellspacing determines the margin between the cells. Sometimes it doesn t matter which attribute you use to add a margin. In our case, however, we ll be adding background colors to our cells, and we don t want any space in between them. We re going to set our cellpadding to 10 pixels and our cellspacing to 0 pixels (see Tech Tip below for an explanation of pixels). Find your <table> tag and enter the text you see in bold here: <table cellpadding="10" cellspacing="0"> <tr> <td valign="top"><p>navigation</p></td> Excerpt from index.html. Table cell padding and spacing shown in bold. Tech Tip: A pixel is the smallest speck of color that a computer screen can display for an image. A computer with a 600 x 800 resolution views a screen that is 600 pixels high and 800 pixels wide. Since resolutions vary on computers, we can t describe the actual dimensions of a pixel to you. Once you start working with them, you ll get a feel for how to estimate them. Most image editors (see Useful Tools in the Introduction) have tools for measuring the pixels of images. 13

15 4. Set the width of your table. We ll have more control over our table layout if we tell it how wide we want it to be. We can use either a percentage value or a pixel value. If we use a percentage value, 100% would mean the table should span the entire web browser window, 80% would mean the table should span 80% of the web browser window, and so on. A table width defined by a percentage value will resize to fit a web browser window. If your visitors make their windows smaller or larger, the webpage will shrink or grow to fit them. On the other hand, if we use a pixel value, the table will remain at its set size, and we ll be better able to predict its appearance. A good rule of thumb is not to exceed 750 pixels for the width of your webpage content. Any larger than that, and your visitors may not see the entire table in their web browser windows. For this website, we re going to use a width of 700 pixels. This value goes in the same table tag that we edited in Step 4. Enter it like this: <table cellpadding="10" cellspacing="0" width="700"> <tr> <td valign="top"><p>navigation</p></td> Excerpt from index.html. Table width shown in bold. Set the width of your left table cell. We want the table cells to maintain their widths consistently across pages. Since the logo we re going to use in the left table cell is 122 pixels wide (jump ahead to Part 4: Adding an Image for a sneak peak) and it will be the widest item in that cell, we ll use that number for setting the width. We ll set the width of a table cell similarly to how we set the width of the table, except that we use the <td> tag. Enter it like this: <table cellpadding="10" cellspacing="0" width="700"> <tr> <td valign="top" width="122"><p>navigation</p></td> Excerpt from index.html. Table cell width shown in bold. Tech Tip: You do not need to set the widths of all table cells, as long as enough widths have been set to keep the cells consistent. In this case, we ve set the width of the table at 700 pixels, and the width of the left cell to 122 pixels. The width of the right cell will automatically set to the difference between those two values, so we do not need to type it out. By leaving some table cells flexible, we make it easier to change those values in the future. 5. Save and check your work. As you did at the end of in Part 2 (steps 6-9), save your work and open it in a web browser. It should look something like this: 14

16 Screenshot of index.html as basic layout. If your work looks significantly different the screenshot above, retrace your steps through this section and check your code. Sometimes a missed quotation mark or bracket can throw off an entire page. Concept Review 1. Why do we use tables? Tables are a clear and effective way for organizing content into particular areas on a website. 2. Why is it important to set the width of some parts of a table? Setting widths gives you more control over the appearance of your table. If you do not set any widths, the appearance of tables may vary based on what content it holds and what browser is viewing it. What s Next? In Part 4, you ll learn how to add an image to your website. 15

17 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 Use your web browser to visit 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 Home About Pies Locations Image pumpkin.gif apple2.gif apple.gif woman.gif 6. Enter the XHTML code for the image inside the Navigation table cell of your website. Enter the code exactly as you see here in bold. See below for an explanation. <table cellpadding="10" cellspacing="0" width="700"> <tr> <td valign="top" width="122"><img src="images/logo.gif" alt="seattle Pies logo" width="122" height="122" /> <p>navigation</p></td> <td valign="top"><p>content</p></td> </tr> </table> Excerpt from index.html. Image tag shown in bold. What does this stuff mean? The basic tag here is <img />, which stands for image. Its first attribute, src, stands for source. To tell the web browser what the source of the image is, we need to describe the path to the file. Since the logo.gif is in the images folder, we say the file path is images/logo.gif. 16

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.

18 The next few tags are optional, but they re very useful to have. The alt attribute is short for alternative text. In it, we include a description of the image. This text will display on limited web browsers that can t display all images (like cell phones), and they will be communicated to the visually impaired. The width and height attributes are measurements of the image in pixels. They help the page load faster. Your image editor can usually tell you what the pixel measurements of an image are (don t guess!). Tech Tip: Since image tags don t require a closing tag, we close them by adding a slash to the end of the tag, like this: <img src= file.gif /> You ll see this later with the line break (<br />) and horizontal rule tags (<hr />), too. 7. Save and check your work. As you did at the ends of Parts 2 and 3, save your work and open it in a web browser. It should look something like this: Screenshot of index.html with new image. If you don t see the image, first check to make sure it is in the images folder and named logo.gif. Your images folder should be in the same folder as your index.html file. If that s all okay, check to see that you typed out the <img> tag code exactly as shown above. Concept Review 1. What do the parts of the image tag mean? In the image tag, img src means image source. Alt means alternate text, and height and width call for the image s measurements in pixels. 2. Why does it matter where I store my image? The image tag needs to state exactly where an image is stored in order for it to display the image properly. While an image doesn t need to be in a folder called images, it helps you as a web developer to keep things organized. What s Next? In Part 5, you ll learn how to add color, font, and some other elements of style to your website. 17

19 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 subheader, some body content, a footer (for copyright and contact information), and our navigation list. Since our navigation list and footer will be consistent across all pages, we ll fill in the actual content for those now. For the others, we ll just use placeholders. Replace the words Navigation and Content in your existing document with the text as shown here in bold. See below for an explanation of the new tags. <table cellpadding="10" cellspacing="0" width="700"> <tr> <td valign="top" width="122"><img src="images/logo.gif" alt="seattle Pies logo" width="122" height="122" /> <p> Home <br /> About <br /> Pies <br /> Locations <br /> </p></td> <td valign="top"><h1>header</h1> <h2>sub-header</h2> <p>body Content</p> <p> 2005 Seattle Pies. For more information, call us toll-free at </p></td> </tr> </table> Excerpt from index.html. New content regions shown in bold. What does this stuff mean? In our first table cell, we added our navigation text (Home, About, Pies, and Locations). Each one of these is followed by a <br /> tag, which stands for line break. Whereas a paragraph tag set (<p> </p>) creates a block of text with an extra space above and below it, a line break simply moves to the next line. Next, we notice that <h1> tags surround the header and <h2> tags surround the sub-header. The h in these tags stands for header, and the corresponding number stands for its size and importance. <h1> is the largest header, while <h6> is the smallest header (all number in between size up in order). While in the next step, we ll learn to change the font and size of our headers to whatever we want, it s still important to use header tags. They signify to search engines and other devices what information is most important on a website. You ll notice we have the text, in our footer. When you view this webpage in your browser, you ll see the change into the symbol for copyright (try it!). This is a special 18

20 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" /> 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">subheader</font></h2> Body Content</font></p> <p> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> 2005 Seattle Pies. For more information, call us toll-free at </font></p></td> </tr> </table> Excerpt from index.html. Font tags shown in bold. What does this stuff mean? All of these <font> tags have two attributes: size and face. The face is the same for every one: Verdana, Arial, Helvetica, sans-serif. These font faces are listed in order of preference. Translated into our language, this attribute is saying, Use the Verdana font face for this text. If visitors don t have Verdana installed on their computers, use Arial. If they don t have Arial either, use Helvetica. If they don t have any of those, just use your best sans-serif font. You should always have several fonts listed as a backup, including the basic font family. 19

21 The sizes on each of these tags vary. The header is 5, the footer is 1, and everything else is 2. Font sizes range from 1 7, with 1 being the smallest (take note: this is the opposite of the <h1> <h6> tags). 3 is the standard size, and would be displayed if no size were set. However, Verdana is a slightly larger font than others, so 2 is a more attractive font size for its standard. We re also using 2 as a sub-header because we don t want it to be larger than the body content. Tech Tip: Every new paragraph needs a new font tag. When you use these tags, it s important to keep the nesting consistent. For example, use <p><font> text </font></p>. Do NOT use <p><font> text </p></font>. 3. Add a horizontal rule. Just before the footer, we ll want a simple divider line, or a horizontal rule. The tag for a horizontal rule is <hr />. Add it directly after the <p> tag before the footer text, like this: <p><hr /> <font size="1" face="verdana, Arial, Helvetica, sans-serif"> 2005 Seattle Pies. For more information, call us toll-free at </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 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" /> Home <br /> About <br /> Pies <br /> Locations <br /> </font></p></td> <td valign="top" bgcolor="#ffffff"><h1><font size="5" face="verdana, Arial, Helvetica, sans-serif" color="#333366">header</font></h1> Excerpt from index.html. Color tags shown in bold. 20

22 What does this stuff mean? As we mentioned above, those six-character figures represent colors. The first three are background colors, and they use the attribute bgcolor (which, as you might guess, is short for background color ). The first one is in the body tag, and it defines the background of the entire webpage as a deep indigo. The second instance is in the left table cell. It colors the cell light blue. The third instance colors the right table cell white. While it was white before, it s necessary to add this tag because the background defined in <body> will otherwise override it. The fourth tag simply uses the attribute, color. This can be used in font tags. As you ll see, we ve colored the header the same deep indigo as the page background. 5. Save and check your work. As you ve done at the end of previous sections, save your work and open index.html in a web browser. You should see something like this: Screenshot of index.html with new style. If you re not seeing things properly, retrace your work in this section and check for typos. Concept Review 1. Why do we list multiple fonts in our <font> tags? Not every computer has the same list of fonts installed. If we call for a font that your visitor doesn t have, the web browser will not know how to display the text. Offering a list of fonts informs the browser of what it should use as a second choice, third choice, and as a worst-case scenario, the general font family. 2. Are we really just scratching the surface here? Yes. Graphic design is its own field. Here we ve talked a little about colors and fonts. If you choose to study CSS after this tutorial, you will find you have far more control over these elements, as well as others. What s Next? In Part 6, you ll learn the art of adding links to your website. 21

23 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" /> <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= > 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 to choose your own. Enter the tags as shown here in bold: <body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366"> Excerpt from index.html. Link colors shown in bold. 22

24 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 Typing out the entire URL is always an option. What s Next? In Part 7, you ll duplicate this attractive webpage design and add content, thus completing your first website! 23

25 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 index.html about.html pies.html locations.html Title Seattle Pies Quality Pie Distributors Seattle, Washington About Seattle Pies Seattle Pies - Our Pies 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" " <html> <head> <title>about Seattle Pies</title> </head> <body bgcolor="#333366" link="#000066" alink="#000066" vlink="#333366"> Excerpt from about.html. New page title shown in bold. When you re done, double-check each webpage to make sure its title corresponds with its filename as shown in the table above. 24

26 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 index.html about.html pies.html locations.html Title Welcome to Seattle Pies About Seattle Pies Our Pies 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" /> <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">subheader</font></h2> Body Content</font></p> Excerpt from about.html. New header shown in bold. When you re done, double-check each webpage to make sure its title corresponds with its filename as shown in the table above. Now that we have our headers and titles in place, we re going to add content to each individual page. 6. Add content to the index.html page. Replacing the text, Sub-header and Body content, add the following content as shown in bold here. You ll notice some new tags here: <center> and </center>. These, as you might guess, center everything inside of them. They also act similarly to the <p> tag in that they isolate the region as its own paragraph. <td valign="top" bgcolor="#ffffff"><h1><font size="5" face="verdana, Arial, Helvetica, sans-serif" color="#333366"> Welcome to Seattle Pies </font></h1> <h2><font size="2" face="verdana, Arial, Helvetica, sans-serif"> Quality Pie Distributors, Seattle, Washington 25

27 </font></h2> 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> 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> 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> In 1964, Douglas Pie discovered his ancestors' secret recipes for the world's most delicious pies. After testing them out among friends and family, he realized he had to share his good fortune with the world. Douglas promptly opened Seattle Pies. </font></p> Excerpt from about.html. New content shown in bold. What does this stuff mean? We did two new things here. We added an align attribute to the image and we repeated the sub-header. Let s start with the align attribute. This pushes an image to either the left or 26

28 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> We carry all of these fine flavors at our stores: <ul> <img src="images/apple.gif" align="right" width="250" height="169" /> <li>apple</li> <li>dutch Apple</li> <li>blueberry</li> <li>peach Cobbler</li> <li>chocolate</li> <li>stawberry-rhubarb</li> <li>pumpkin</li> <li>cherry</li> <li>lemon Cream</li> <li>banana Cream</li> <li>lemon Meringue</li> <li>stawberry</li> <li>mincemeat</li> </ul> </font></p> Excerpt from pies.html. New content shown in bold. What is this stuff? The new tags you see here are for building lists. You ll notice the list of pie flavors is surrounded by the tags <ul> and </ul>. These stand for unordered list and they create a bullet list. To create a numbered list, you would use the tags, <ol> and </ol>, which stand for ordered list. The <li> and </li> tags stand for list items and they surround each element of the list. In the next step, when you save and check your work, you ll see the final product of your list. 27

29 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> <b>seattle Pies - Fourth Street</b><br /> 5589 Fourth St. <br /> Seattle, WA 98100</font></p> <b>seattle Pies - West Franklin Street</b><br /> 5589 W Franklin St. <br /> Seattle, WA 98101</font></p> <b>seattle Pies - Scott Street</b><br /> 2 Scott St. <br /> Seattle, WA 98102</font></p> <b>seattle Pies - Plymouth Avenue</b><br /> 38A Plymouth Ave. <br /> Seattle, WA 98103</font></p> <b>seattle Pies - Radison Drive</b><br /> 134 Radison Dr. <br /> Seattle, WA 98104</font></p> Excerpt from locations.html. New content shown in bold. 10. Save and check your work. As you ve done in past sections, save your pages at this point. Then, use your web browser to open index.html. It should look something like this: 28

30 Screenshot of index.html. You can use the links on the left-hand side to view your other pages, as well. They should look like this: Screenshot of about.html. Screenshot of pies.html. 29

31 Screenshot of locations.html. If anything on your website doesn t look right at this point, check your webpage files against the finished code provided in Appendix I: Finished Project Code for any differences. Concept Review 1. What kinds of lists can XHTML create? On our Pies page, we see an unordered, bulleted list. This uses the tags <ul> and </ul> for the list, as well as <li> and <li> for the list items. XHTML can also create ordered, numbered lists. To do that, you use the same structure, but replace the <ul> and </ul> tags with <ol> and </ol> tags. On our Locations page, we see a simple list without bullets or numbers. This simply uses line breaks, paragraph breaks, and bold text to create. 2. Is it okay to repeat header tags on a page? Yes. We did this on the About page with our <h2> tags. For the sake of keeping the most important information clear to search engines, it s a good idea to only have one <h1> tag on each page. Repeat the others as much as the page requires. 3. Why do we use different titles for each page? The titles (not the headers these are different items) will show up in search engine listings and in a visitor s bookmark list. It s important to have clear titles that reflect the content of each individual page. This gives people the information they need when deciding if they want to visit the webpage. Congratulations! You ve completed a website and learned the basics of XHTML! 30

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered