Xem mẫu

216 LESSON 9: Adding Images, Color, and Backgrounds Most browsers interpret the string you include in the alt attribute as a literal string. That is, if you include any HTML tags in that string, they’ll be printed as-is rather than being parsed and displayed as HTML code. Therefore, you can’t use whole blocks of HTML code as a replacement for an image—just a few words or phrases. I bring up image alternatives now for good reason. The alt attribute is required in XHTML 1.0 but is optional in HTML5 . If there’s no appropriate alternative text for an image, you can simply leave it empty, like this: alt=““. Task: Exercise 9.1: Adding Images to a Page Here’s the web page for a local haunted house that’s open every year at Halloween. Using all the excellent advice I’ve given you in the preceding eight lessons, you should be able to create a page like this one fairly easily. Here’s the HTML code for this HTML file, and Figure 9.1 shows how it looks so far: Input Welcome to the Halloween House of Terror

Welcome to The Halloween House of Terror

Voted the most frightening haunted house three years in a row, the Halloween House of Terror provides the ultimate in Halloween thrills. Over 20 rooms of thrills and excitement to make your blood run cold and your hair stand on end!

The Halloween House of Terror is open from October 20 to November 1st, with a gala celebration on Halloween night. Our hours are:

  • Mon-Fri 5PM-midnight
  • Sat & Sun 5PM-3AM
  • Halloween Night (31-Oct): 3PM-???

The Halloween House of Terror is located at:
The Old Waterfall Shopping Center
1020 Mirabella Ave
Download from www.wowebook.com Inline Images in HTML: The Tag 217 Springfield, CA 94532

Output . FIGURE 9.1 The Halloween House home page. 9 So far, so good. Now you can add an image to the page. Suppose that you happen to have an image of a haunted house lying around on your hard drive; it would look excel-lent at the top of this web page. The image, called house.jpg, is in JPEG format. It’s located in the same directory as the halloween.html page, so adding it to the page will be easy. Now, suppose that you want to place this image above the page heading. To do so, add an tag to the file, just before the heading:

Welcome to The Halloween House of Terror

Images, like links, don’t define their own text elements, so the tag has to go inside a paragraph or heading element. When you reload the halloween.html page, your browser should include the haunted house image on the page, as shown in Figure 9.2. If the image doesn’t load and your browser displays a funny-looking icon in its place, make sure that you entered the filename properly in the HTML file. Image filenames are case-sensitive, so all the uppercase and lowercase letters have to be correct. If the case isn’t the problem, double-check the image file to make sure that it is indeed a GIF or JPEG image and that it has the proper file extension. Download from www.wowebook.com 218 LESSON 9: Adding Images, Color, and Backgrounds FIGURE 9.2 The Halloween House home page with the haunted house. If one image is good, two would be really good, right? Try adding another tag next to the first one, as follows, and see what happens: Input
”House ”House

Welcome to The Halloween House of Terror

Figure 9.3 shows how the page looks in a browser. The two images are adjacent to each other, as you would expect. Output . FIGURE 9.3 Multiple images. And that’s all there is to adding images! Download from www.wowebook.com Images and Text 219 Images and Text In the preceding exercise, you put an inline image on a page with text below it. You also can include an image inside a line of text. This is what the phrase “inline image” actually means—it’s in a line of text. To include images inside a line of text, just add the tag inside an element tag (



, and so on), as in the following line:

“HouseThe Halloween House of Terror!!

Figure 9.4 shows the difference you can make by putting the image inline with the head- 9 ing. (I’ve also shortened the heading and changed it to

so that it all fits on one line.) FIGURE 9.4 The Halloween House page with an image inside the heading. The image doesn’t have to be large, and it doesn’t have to be at the beginning of the text. You can include an image anywhere in a block of text, as in the following: Input
Love, from whom the world begun,
Hath the secret of the sun.
Love can tell, and love alone, Whence the million stars were strewn
Why each atom knows its own.
—Robert Bridges
Figure 9.5 shows how this block looks. Download from www.wowebook.com 220 LESSON 9: Adding Images, Color, and Backgrounds Output . FIGURE 9.5 Images can go anywhere in text. Text and Image Alignment In these examples, the bottom of the image and the bottom of the text match up. The tag also includes the align attribute, which enables you to align the top or bottom of the image with the surrounding text or other images in the line. NOTE The align attribute for the tag was deprecated in HTML 4.01 in favor of using CSS and has been dropped from HTML5 completely. However, you may find yourself using it if you’re using a content management system or some other application to pub-lish Web content. In many cases it’s easier to modify your markup than it is to alter the style sheets for the site. Alternatively, you can adjust the style attribute with your img tags. Standard HTML 2.0 defines three basic values for align: align=“top” align=“middle” align=“bottom” Aligns the top of the image with the topmost part of the line (which may be the top of the text or the top of another image). This is the same as vertical-align: top in CSS. Aligns the center of the image with the middle of the line (usually the baseline of the line of text, not the actual middle of the line). This is the same as vertical-align: middle in CSS. Aligns the bottom of the image with the bottom of the line of text. This is the same as vertical-align: bottom in CSS. There are also two other values: left and right. These values are discussed in the next section, “Wrapping Text Next to Images.” Download from www.wowebook.com ... - tailieumienphi.vn