Tự học HTML và CSS trong 1 giờ - part 26 doc

ptg the second night, we tried keeping guard. We tried bright lights, dogs, everything. There was always something that pulled us away, and by the time we got back, they were all gone.” </p> Figure 9.9 shows the result in a browser. 226 LESSON 9: Adding Images, Color, and Backgrounds Output . FIGURE 9.9 Line break to a clear margin. Adjusting the Space Around Images With the capability to wrap text around an image, you also might want to add some space between the image and the text that surrounds it. In the previous lesson, you learned how to manage the whitespace around elements using CSS padding and margins. When you’re creating new pages, you should use CSS. Before CSS, the vspace and hspace attributes enabled you to make these adjustments, and you may still see people use them. Both take values in pixels; vspace controls the space above and below the image, and hspace controls the space to the left and the right. Note that the amount of space you specify is added on both sides of the image. For example, if you use hspace=“10”, 10 pixels of space will be added on both the left and right sides of the image. It’s the equivalent of the CSS padding-left: 10px and padding-right: 10px. The vspace and hspace attributes for the <img> tag are not included in HTML5. You should use the margin and padding CSS properties instead. NOTE Download from www.wowebook.com ptg The following HTML code, displayed in Figure 9.10, illustrates two examples. The upper example shows default horizontal and vertical spacing around the image, and the lower example shows the effect produced by the hspace and vspace attributes. Both images use the align=“left” attribute so that the text wraps along the left side of the image. However, in the bottom example, the text aligns with the extra space above the top of the image (added with the vspace attribute). Input ▼ <p><img src=”eggplant.gif” align=”left” /></p> <p> This is an eggplant. We intend to stay a good ways away from it, because we really don’t like eggplant very much. </p> <p style=”clear: left”> <img src=”eggplant.gif” vspace=”50” hspace=”50” align=”left” /> </p> <p> This is an eggplant. We intend to stay a good ways away from it, because we really don’t like eggplant very much. </p> Images and Text 227 9 Output . FIGURE 9.10 The upper exam- ple doesn’t have image spacing, and the lower example does. Here’s the same example, written using CSS instead: <img src=“eggplant.gif” alt=“Eggplant” style=”float: left” /> <p>This is an eggplant. We intend to stay a good ways away from it, because we really don’t like eggplant very much.</p> <hr style=”clear: left” /> Download from www.wowebook.com ptg <img src=“eggplant.gif” alt=“Eggplant” style=”float: left; padding: 50px” /> <p>This is an eggplant. We intend to stay a good ways away from it, because we really don’t like eggplant very much. </p> Images and Links Can an image serve as a link? Sure it can! If you include an <img> tag inside a link tag (<a>), that image serves as a link itself: <a href=“index.html”><img src=“uparrow.gif” alt=“Up” /></a> If you include both an image and text in the link tag, they become links to the same page: <a href=“index.html”><img src=“uparrow.gif” alt=“Up” />Up to Index</a> 228 LESSON 9: Adding Images, Color, and Backgrounds One thing to look out for when you’re placing images within links, with or without text, is whitespace between the </a> tag and the <img> tag or between the text and the image. Some browsers turn the whitespace into a link, and you get an odd “tail” on your images. To avoid this unsightly problem, don’t leave spaces or line feeds between your <img> tags and </a> tags. Some browsers put a border around images that are used as links by default, but not all of them. Figure 9.11 shows an example of this. The butterfly image is a not wrapped in a link, so it doesn’t have a border around it. The up arrow, which takes the visitor back to the home page, has a border around it because it’s a link. TIP FIGURE 9.11 Images used as links sometimes have a border around them. Download from www.wowebook.com ptg ▼ You can change the width of the border around the image by using the border attribute to <img> or the border CSS property. Support for the border attribute has been dropped from HTML5, so in this lesson, I use the CSS version. This attribute takes a number, which is the width of the border in pixels. border=“0” hides the border entirely. You were introduced to the various properties that make up the border CSS property in the previous lesson. Disabling borders is ideal for image links that actually look like click- able buttons, as shown in Figure 9.12. Because the default behavior differs between browsers when it comes to borders around linked images, you should always specify the border properties explicitly so that all users experience your site in the same way. Images and Links 229 9 Including borders around images that are links has really fallen out of favor with most web designers. Not turning them off can make your design look very dated. NOTE FIGURE 9.12 Images that look like buttons. Task: Exercise 9.2: Using Navigation Icons Now you can create a simple page that uses images as links. When you have a set of related web pages, it’s usually helpful to create a consistent navigation scheme that is used on all the pages. This example shows you how to create a set of icons that are used to navigate through a linear set of pages. You have three icons in GIF format: one for forward, one for back, and a third to enable the visitors to jump to the top-level contents page. First, you write the HTML structure to support the icons. Here, the page itself isn’t important, so you can just include a shell page: , Download from www.wowebook.com ptg Input ▼ <!DOCTYPE html> <html> <head> <title>Motorcycle Maintenance: Removing Spark Plugs</title> </head> <body> <h1>Removing Spark Plugs</h1> <p>(include some info about spark plugs here)</p> </body> </html> Figure 9.13 shows how the page looks at the beginning. 230 LESSON 9: Adding Images, Color, and Backgrounds , Output . FIGURE 9.13 The basic page, with no icons. At the bottom of the page, add your images using <img> tags: Input ▼ <div> <img src=”Up.png” alt=”Up” /> <img src=”Left.png” alt=”Left” /> <img src=”Right.png” alt=”Right” /> </div> Now add the anchors to the images to activate them: Input ▼ <div> <a href=”index.html”><img src=”Up.png” alt=”Up” /></a> <a href=”ready.html”><img src=”Left.png” alt=”Left” /></a> <a href=”replacing.html”><img src=”Right.png” alt=”Right” /></a> </div> , Download from www.wowebook.com ptg Figure 9.14 shows the result of this addition. When you click the icons now, the browser jumps to the linked page just as it would have if you had used text links. Images and Links 231 9 Output . FIGURE 9.14 The basic page with navigation links. Speaking of text, are the icons usable enough as they are? How about adding some text describing exactly what’s on the other side of each link? You can add this text inside or outside the anchor, depending on whether you want the text to be a hot spot for the link, too. Here, include it outside the link so that only the icon serves as the hot spot. You also can align the bottoms of the text and the icons using the align attribute of the <img> tag. Finally, because the extra text causes the icons to move onto two lines, arrange each one on its own line instead: Input ▼ <div> <a href=”index.html”><img src=”Up.png” alt=”Up” /></a> Up to index </div> <div> <a href=”ready.html”><img src=”Left.png” alt=”Left” /></a> On to “Gapping the New Plugs” </div> <div> <a href=”replacing.html”><img src=”Right.png” alt=”Right” /></a> Back to “When You Should Replace your Spark Plugs” </div> See Figure 9.15 for the final menu. , , Download from www.wowebook.com ptg Output . FIGURE 9.15 The basic page with iconic links and text. 232 LESSON 9: Adding Images, Color, and Backgrounds Other Neat Tricks with Images Now that you’ve learned about inline images, images as links, and how to wrap text around images, you know what most people do with images on web pages. But you can play with a few newer tricks, too. Image Dimensions and Scaling Two attributes of the <img> tag, height and width, specify the height and width of the image in pixels. Both were part of the HTML 3.2 specification, but they’re deprecated in favor of CSS now. If the values for width and height are different from the actual width and height of the image, your browser will resize the image to fit those dimensions. The downside of this technique is that the image-scaling algorithms built into browsers are not always the best, generally images resized with graphics programs look better than images resized in the browser. If you use the browser to change the size of an image, be prepared for it to look pretty bad, especially if the aspect ratio is not preserved. (In other words, you take a 100-by-100 pixel image and expand it into a 200-by-400 pixel image.) ▲ , Don’t perform reverse scaling—creating a large image and then using width and height to scale it down. Smaller file sizes are better because they take less time to load. If you’re going to dis- play a small image, make it smaller to begin with. CAUTION Download from www.wowebook.com ptg Here’s an example <img> tag that uses the height and width attributes: <img src=”my_image.png” height=”100” width=”200” /> To specify the height and width using CSS, use the height and width properties: <img src=”my_image.png” style=”height: 100px; width: 100px” /> If you leave out either the height or the width, the browser will calculate that value based on the value you provide for the other aspect. If you have an image that’s 100 pixels by 100 pixels and you specify a height (using the attribute or CSS) of 200 pixels, the browser will automatically scale the width to 200 pixels, as well, preserving the original aspect ratio of the image. To change the aspect ratio of an image, you must specify both the height and width. More About Image Borders You learned about the border attribute of the <img> tag as part of the section on links, where setting border to a number or to 0 specified the width of the image border (or hid it entirely). By default, images that aren’t inside links don’t have borders. However, you can use the border attribute to include a border around any image, as follows: <p> <img src=”eggplant.gif” align=”left” style=”border: 5px solid black”> This is an eggplant. We intend to stay a good ways away from it, because we really don’t like eggplant very much. </p> Figure 9.16 shows an image with a border around it. Other Neat Tricks with Images 233 9 FIGURE 9.16 An image border. Download from www.wowebook.com ptg You can also use any of the CSS border styles to borders to an image. In HTML5, the border attribute has been removed. Using Color As you’ve seen, one way to add a splash of color to the black, gray, and white on your web pages is to add images. Another is to change the colors of various elements on the page. At one time, HTML attributes were used to specify the colors for various attributes on web pages, but these days, colors should be specified using CSS. Specifying Colors Before you can change the color of any part of an HTML page, you have to know what color you’re going to change it to. There are three ways to specify colors using CSS, but only two of them work when you’re using HTML. n Using a hexadecimal number representing that color n Specifying the shades of red, green, and blue as numbers or percentages n Using one of a set of predefined color names The most flexible and widely supported method of specifying a color is to use the hexa- decimal identifier. Most image-editing programs have what’s called a color picker—a tool for choosing a single color from a range of available colors. Most color pickers can be configured to display the value of that color in RGB form as three numbers represent- ing the intensity of red, green, and blue in that color. Each number is usually 0 to 255, with 0, 0, 0 being black and 255, 255, 255 being white. If you use one of these tools, you’ll have to convert the decimal numbers to hexadecimal. These days, most tools with color pickers also provide the hexadecimal values for red, green, and blue, which is what web browsers require. The color picker that’s built in to the Mac OS includes the hexa- decimal values to make things easy on web publishers. If you want to use the regular decimal numbers, you can do so in CSS using the follow- ing format: rgb(0,0,0) /* Black */ rgb(255,255,255) /* White */ rgb(255,0,0) /* Red */ If you prefer, you can also use percentages: rgb(0%,0%,0%) /* Black */ rgb(100%,100%,100%) /* White */ rgb(100%,0%,0%) /* Red */ 234 LESSON 9: Adding Images, Color, and Backgrounds Download from www.wowebook.com ptg To specify the colors in the hexadecimal format, you merge the hexadecimal equivalents into a single number, like this: #000000 /* Black */ #FFFFFF /* White */ #FF0000 /* Red */ #660099 /* Purple */ Browsers also support specifying colors by name. Instead of using numbers, you just choose a color name such as Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, or Silver. Although color names are easier to read and remember than the numbers, only a few col- ors have names that are well supported by web browsers. Most people tend to use one of the two numeric formats when specifying colors. There are also a number of websites that are designed to help web designers choose col- ors. One of the best is Color Schemer at http://www.colorschemer.com/online.html. It enables you to view several colors next to each other to see how they match, and will even suggest colors that match the ones you choose. The current Color Schemer interface appears in Figure 9.17. Using Color 235 9 FIGURE 9.17 Color Schemer. Download from www.wowebook.com . if you use hspace= 10 ”, 10 pixels of space will be added on both the left and right sides of the image. It’s the equivalent of the CSS padding-left: 10 px and padding-right: 10 px. The vspace and. especially if the aspect ratio is not preserved. (In other words, you take a 10 0-by -1 0 0 pixel image and expand it into a 200-by-400 pixel image.) ▲ , Don’t perform reverse scaling—creating a large. ▼ <!DOCTYPE html& gt; < ;html& gt; <head> <title>Motorcycle Maintenance: Removing Spark Plugs</title> </head> <body> <h1>Removing Spark Plugs</h1> <p>(include