ptg align=“texttop” Allows greater control over the alignment of an inline align=“absmiddle” image and the text surrounding it. vspace Defines the amount of space between an image hspace and the text surrounding it. border Defines the width of the border around an image (with or without a link). border=“0” hides the border altogether. In addition to images, you can add color to the background and the text of a page using CSS.You learned the CSS properties color, background-color, and background, which enable you to specify colors for your page without using deprecated tags. You also learned about the HTML attributes that were once used to specify colors before CSS was widely supported. Workshop Now that you know how to add images and color to your pages, you can really get cre- ative. This workshop will help you remember some of the most important points about using images and color on your pages Q&A Q What’s the difference between a GIF image and a JPEG image? Is there any rule of thumb that defines when you should use one format rather than the other? A As a rule, you should use GIF files when images contain 256 colors or fewer. Some good examples are cartoon art, clip art, black-and-white images, and images with many solid color areas. You’ll also need to use GIF files if you want your images to contain transparent areas or if you want to create an animation that does- n’t require a special plug-in or browser helper. Remember to use your image- editing software to reduce the number of colors in the image palettes whenever possible, because this also reduces the size of the file. JPEG images are best for photographic-quality or high-resolution 3D rendered graphics because they can display true-color images to great effect. Most image- editing programs enable you to specify how much to compress a JPEG image. The size of the file decreases the more an image is compressed; however, compression can also deteriorate the quality and appearance of the image if you go overboard. You have to find just the right balance between quality and file size, and that can differ from image to image. 256 LESSON 9: Adding Images, Color, and Backgrounds Download from www.wowebook.com ptg Q My client-side imagemaps aren’t working. What’s wrong? A Make sure that the pathnames or URLs in your <area> tags point to real files. Also, make sure the map name in the <map> file matches the name of the map in the usemap attribute in the <img> tag. Only the latter should have a pound sign in front of it. Q How can I create thumbnails of my images so that I can link them to larger external images? A You’ll have to do that with some type of image-editing program (such as Adobe Photoshop); the Web won’t do it for you. Just open up the image and scale it down to the right size. Q What about images that are partially transparent so that they can display the page background? They look like they sort of float on the page. How do I create those? A This is another task you can accomplish with an image-editing program. Both GIF and PNG support transparency. Most image-editing programs provide the capabil- ity to create these types of images. Q Can I put HTML tags in the string for the alt attribute? A That would be nice, wouldn’t it? Unfortunately, you can’t. All you can do is put an ordinary string in there. Keep it simple, and you should be fine. Quiz 1. What’s the most important attribute of the <img> tag? What does it do? 2. If you see a funny-looking icon rather than an image when you view your page, the image isn’t loading. What are some of the reasons this could happen? 3. Why is it important to use the alt attribute to display a text alternative to an image? When is it most important to do so? 4. What is an imagemap? 5. Why is it a good idea to also provide text versions of links that you create on an imagemap? 6. True or false: When you use the background shorthand property, the order of the values is important. Workshop 257 9 Download from www.wowebook.com ptg Quiz Answers 1. The most important attribute of the <img> tag is the src attribute. It indicates the filename or URL of the image you want to include on your page. 2. Several things might cause an image not to load: The URL may be incorrect; the filename might not be correct (they’re case-sensitive); it might have the wrong file extension; or it might be the wrong type of file. 3. It’s a good idea to provide text alternatives with images because some people use text-only browsers or have their graphics turned off. It’s especially important to provide text alternatives for images used as links. 4. An imagemap is a special image in which different areas point to different loca- tions on the Web. 5. It’s a good idea to include text versions of imagemap links in case there are users who visit your page with text-only browsers or with images turned off. This way, they can still follow the links on the web page and visit other areas of your web- site. 6. True. The property will work only if you enter the values in the proper order. Exercises 1. Create or find some images that you can use as navigation icons or buttons on one or more pages of your website. Remember that it’s always advantageous to use images more than once. Create a simple navigation bar that you can use on the top or bottom of each page. 2. Create or find some images that you can use to enhance the appearance of your web pages. After you find some that you like, try to create background, text, and link colors that are compatible with them. 3. Create and test a simple client-side imagemap that links to pages that reside in dif- ferent subdirectories in a website or to other sites on the World Wide Web. 4. Create and test a client-side imagemap for your own home page, or for the entry page in one of the main sections of your website. Remember to include alternatives for those who are using text-only browsers or browsers designed for the disabled. 258 LESSON 9: Adding Images, Color, and Backgrounds Download from www.wowebook.com ptg LESSON 10 Building Tables So far in this book, you’ve used plain vanilla Hypertext Markup Language (HTML) to build and position the elements on your pages, and you’ve used Cascading Style Sheets (CSS) to fine-tune their appearance. Although you can get your point across using paragraphs and lists, some information lends itself best to being presented in tables. In this lesson, you learn how to use HTML to create them. When tables were officially introduced in HTML 3.2, they were commonly used to lay out entire pages. More recently, that role has been taken over by CSS. With the introduction of HTML 4 and later releases, new features were added to enable tables to better perform their designated role: the presentation of tabular data. In this lesson, you’ll learn all about tables, including the following: n Defining tables in HTML n Creating captions, rows, and heading and data cells n Modifying cell alignment n Creating cells that span multiple rows or columns n Adding color to tables n Using tables in web pages Download from www.wowebook.com ptg Creating Tables Creating tables in HTML is a degree more complex than anything you’ve seen so far in this book. Think about how many different types of tables there are. A table can be a three-by-three grid with labels across the top, or two side-by-side cells, or a complex Excel spreadsheet that comprises many rows and columns of various sizes. Representing tables in HTML is heavy on tags, and the tags can be hard to keep track of when you get going. The basic approach with table creation is that you represent tabular data in a linear fash- ion, specifying what data goes in which table cells using HTML tags. In HTML, tables are created from left to right and top to bottom. You start by creating the upper-left cell, and finish with the bottom-right cell. This will all become clearer when you see some actual table code. Table Parts Before getting into the actual HTML code to create a table, here are some table-related terms you’ll see throughout this lesson: n The caption indicates what the table is about: for example, “Voting Statistics, 1950–1994,” or “Toy Distribution Per Room at 1564 Elm St.” Captions are optional. n The table headings label the rows, columns, or both. Usually they’re in an empha- sized font that’s different from the rest of the table. They’re optional. n Table cells are the individual squares in the table. A cell can contain normal table data or a table heading. n Table data is the values in the table itself. The combination of the table headings and table data makes up the sum of the table. Figure 10.1 shows a typical table and its parts. 260 LESSON 10: Building Tables FIGURE 10.1 The elements that make up a table. Download from www.wowebook.com ptg The <table> Element All the components of a table are placed within a <table> </table> element: <table> table caption (optional) and contents </table> Here’s the code that produces the table shown in Figure 10.1. Don’t be concerned if you don’t know what this all means right now. For now, notice that the table starts with a <table> tag and its attributes, and ends with a </table> tag: <table border=“1”> <caption>Vital Statistics</caption> <tr> <th>Name</th> <th>Height</th> <th>Weight</th> <th>Eye Color</th> </tr> <tr> <td>Alison</td> <td>5’4”</td> <td>140</td> <td>Blue</td> </tr> <tr> <td>Tom</td> <td>6’0”</td> <td>165</td> <td>Hazel</td> </tr> <tr> <td>Susan</td> <td>5’1”</td> <td>97</td> <td>Brown</td> </tr> </table> The Table Summary If you want to play by the rules of XHTML, every time you create a table, the <table> element must include the summary attribute. The value of the summary should be a short description of the table’s contents. Normal visual browsers don’t use this value; instead, it’s intended for screen readers and other browsers created for users with disabilities. For example, the <table> tag in the previous example should include a summary attribute like this: <table summary=“vital statistics”> Table Parts 261 10 Download from www.wowebook.com ptg For your pages to play by the XHTML rules, you must include the summary attribute for all your tables (just as you must include alt text for all your images). You’ll learn more about why accessibility features are important in Lesson 19, “Designing for the Real World.” Rows and Cells Now that you’ve been introduced to the <table> element, we’ll move on to the rows and cells. Inside the <table> </table> element, you define the actual contents of the table. Tables are specified in HTML row by row, and each row definition contains all the cells in that row. So, to create a table, you start with the top row and then each cell in turn, from left to right. Then you define a second row and its cells, and so on. The num- ber of columns is calculated based on how many cells there are in each row. Each table row starts with the <tr> tag and ends with the closing </tr>. Your table can have as many rows and columns as you like, but you should make sure that each row has the same number of cells so that the columns line up. The cells within each row are created using one of two elements: n <th> </th> elements are used for heading cells. Generally, browsers center the contents of a <th> cell and render any text in the cell in boldface. n <td> </td> elements are used for data cells. td stands for table data. 262 LESSON 10: Building Tables You might have heard somewhere that closing tags are not required for <th>, <td>, and <tr> tags. You might even see HTML that’s written without them. However, XHTML requires that you include them, and including them makes your code much easier to follow. Don’t leave them out. In this table example, the heading cells appear in the top row and are defined with the following code: <tr> <th>Name</th> <th>Height</th> <th>Weight</th> <th>Eye Color</th> </tr> CAUTION Download from www.wowebook.com ptg The top row is followed by three rows of data cells, which are coded as follows: <tr> <td>Alison</td> <td>5’4”</td> <td>140</td> <td>Blue</td> </tr> <tr> <td>Tom</td> <td>6’0”</td> <td>165</td> <td>Blue</td> </tr> <tr> <td>Susan</td> <td>5’1”</td> <td>97</td> <td>Brown</td> </tr> As you’ve seen, you can place the headings along the top edge by defining the <th> ele- ments inside the first row. Let’s make a slight modification to the table. You’ll put the headings along the left edge of the table instead. To accomplish this, put each <th> in the first cell in each row, and follow it with the data that pertains to each heading. The new code looks like the following: Input ▼ <tr> <th>Name</th> <td>Alison</td> <td>Tom</td> <td>Susan</td> </tr> <tr> <th>Height</th> <td>5’4”</td> <td>6’0”</td> <td>5’1”</td> </tr> <tr> <th>Weight</th> <td>140</td> <td>165</td> <td>97</td> </tr> <tr> Table Parts 263 10 Download from www.wowebook.com ptg <th>Eye Color</th> <td>Blue</td> <td>Blue</td> <td>Brown</td> </tr> Figure 10.2 shows how this table displays in a browser. 264 LESSON 10: Building Tables Output . FIGURE 10.2 An example of a table that includes headings in the leftmost column. Empty Cells Both table heading cells and data cells can contain any text, HTML code, or both, including links, lists, forms, images, and other tables. But what if you want a cell with nothing in it? That’s easy. Just define a cell with a <th> or <td> element with nothing inside it: Input ▼ <table border=“1”> <tr> <td></td> <td>10</td> <td>20</td> </tr> </table> Some older browsers display empty cells of this sort as if they don’t exist at all. If you want to force a truly empty cell, you can add a line break with no other text in that cell by itself: Input ▼ <table border=“1”> <tr> <td><br /></td> Download from www.wowebook.com ptg <td>10</td> <td>20</td> </tr> </table> Figure 10.3 shows examples of both types of empty cells: the empty cell and the really empty cell with the line break added. Table Parts 265 10 Output . FIGURE 10.3 Empty cells and really empty cells. Captions Table captions tell your visitor what the table is for. The <caption> element, created just for this purpose, displays the text inside the tag as the table caption (usually centered above the table). Although you could use a regular paragraph or a heading as a caption for your table, tools that process HTML files can extract <caption> elements into a sep- arate file, automatically number them, or treat them in special ways simply because they’re captions. If you don’t want a caption, it’s optional. If you just want a table and don’t care about a label, leave the caption off. The <caption> element goes inside the <table> element just before the table rows, and it contains the title of the table. It closes with the </caption> tag: <table> <caption>Vital Statistics</caption> <tr> NOTE Download from www.wowebook.com . headings and table data makes up the sum of the table. Figure 10 .1 shows a typical table and its parts. 260 LESSON 10 : Building Tables FIGURE 10 .1 The elements that make up a table. Download from www.wowebook.com ptg The. ▼ <tr> <th>Name</th> <td>Alison</td> <td>Tom</td> <td>Susan</td> </tr> <tr> <th>Height</th> <td>5’4”</td> <td>6’0”</td> <td>5 1 </td> </tr> <tr> <th>Weight</th> <td> ;14 0</td> <td> ;16 5</td> <td>97</td> </tr> <tr> Table Parts 263 10 Download. accomplish with an image-editing program. Both GIF and PNG support transparency. Most image-editing programs provide the capabil- ity to create these types of images. Q Can I put HTML tags in the string