Tự học HTML và CSS trong 1 giờ - part 25 potx

ptg ▼ 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 ▼ <!DOCTYPE html> <html> <head> <title>Welcome to the Halloween House of Terror</title> </head> <body> <h1>Welcome to The Halloween House of Terror</h1> <p> Voted the most frightening haunted house three years in a row, the <strong>Halloween House of Terror</strong> provides the ultimate in Halloween thrills. Over <strong>20 rooms of thrills and excitement</strong> to make your blood run cold and your hair stand on end! </p> <p> The Halloween House of Terror is open from <em>October 20 to November 1st</em>, with a gala celebration on Halloween night. Our hours are: </p> <ul> <li>Mon-Fri 5PM-midnight</li> <li>Sat & Sun 5PM-3AM</li> <li><strong>Halloween Night (31-Oct)</strong>: 3PM-???</li> </ul> <p> The Halloween House of Terror is located at:<br /> The Old Waterfall Shopping Center<br /> 1020 Mirabella Ave<br /> 216 LESSON 9: Adding Images, Color, and Backgrounds , Download from www.wowebook.com ptg Springfield, CA 94532 </p> </body> </html> Inline Images in HTML: The <img> Tag 217 9 Output . FIGURE 9.1 The Halloween House home page. 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 excellent 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 <img> tag to the file, just before the heading: <div><img src=“haunted_house.png” alt=“House of Terror” /></div> <h1>Welcome to The Halloween House of Terror</h1> Images, like links, don’t define their own text elements, so the <img> 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 ptg FIGURE 9.2 The Halloween House home page with the haunted house. 218 LESSON 9: Adding Images, Color, and Backgrounds If one image is good, two would be really good, right? Try adding another <img> tag next to the first one, as follows, and see what happens: Input ▼ <div><img src=”haunted_house.png” alt=”House of Terror” /> <img src=”haunted_house.png” alt=”House of Terror” /></div><h1>Welcome to The Halloween House of Terror</h1> 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 ptg 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 <img> tag inside an element tag ( <h1>, <p>, <address>, and so on), as in the following line: <h2><img src=“house.jpg” alt=“House of Terror” />The Halloween House of Terror!!</h2> Figure 9.4 shows the difference you can make by putting the image inline with the heading. (I’ve also shortened the heading and changed it to <h2> so that it all fits on one line.) Images and Text 219 9 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 ▼ <blockquote> Love, from whom the world <img src=”world.gif” /> begun,<br /> Hath the secret of the sun. <img src=”sun.gif” /><br /> Love can tell, and love alone, Whence the million stars <img src=”star.gif” /> were strewn<br /> Why each atom <img src=”atom.gif” /> knows its own.<br /> —Robert Bridges </blockquote> Figure 9.5 shows how this block looks. Download from www.wowebook.com ptg Output . FIGURE 9.5 Images can go anywhere in text. 220 LESSON 9: Adding Images, Color, and Backgrounds Text and Image Alignment In these examples, the bottom of the image and the bottom of the text match up. The <img> 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. The align attribute for the <img> 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” 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. align=“middle” 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. align=“bottom” 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.” NOTE Download from www.wowebook.com ptg Figure 9.6 shows the Robert Bridges poem from the previous section with the world image unaligned, the sun image aligned to the top of the line, the star image aligned to the middle, and the atom aligned to the bottom of the text. Input ▼ <blockquote> Love, from whom the world <img src=”world.gif” /> begun,<br /> Hath the secret of the sun. <img src=”sun.gif” align=”top” /><br /> Love can tell, and love alone, Whence the million stars <img src=”star.gif” align=”middle” /> were strewn<br /> Why each atom <img src=”atom.gif” align=”bottom” /> knows its own.<br /> —Robert Bridges </blockquote> Images and Text 221 9 Output . FIGURE 9.6 Images unaligned, aligned top, aligned middle, and aligned bottom. In addition to the preceding values, several other nonstandard values for align provide greater control over precisely where the image will be aligned within the line. The following values are unevenly supported by browsers and have been superseded by CSS equivalents, too. align=“texttop” Aligns the top of the image with the top of the tallest text in the line (whereas align=“top” aligns the image with the topmost item in the line). Use vertical-align: text-top in CSS instead. align=“absmiddle” Aligns the middle of the image with the middle of the largest item in the line. ( align=“middle” usually aligns the middle of the image with the baseline of the text, not its actual middle.) No CSS equivalent. Download from www.wowebook.com ptg align=“baseline” Aligns the bottom of the image with the baseline of the text. align=“baseline” is the same as align=“bottom”, but align=“baseline” is a more descriptive name. This is the default vertical alignment and can be written in CSS as vertical-align: baseline. align=“absbottom” Aligns the bottom of the image with the lowest item in the line (which may be below the baseline of the text). Replaced in CSS by vertical-align: text-bottom. The following code shows these alignment options at work: Input ▼ <h2>Middle of Text and Line aligned, arrow varies:</h2> <p> <img src=”line.gif” /> Align: Top <img src=”uparrow.gif” align=”top” /> Align: Text Top <img src=”uparrow.gif” align=”texttop” /> </p> <h2>Top of Text and Line aligned, arrow varies:</h2> <p> <img src=”line.gif” /> Align: Absolute Middle <img src=”forward.gif” align=”absmiddle” /> Align: Middle <img src=”forward.gif” align=”middle” /> </p> <h2>Top of Text and Line aligned, arrow varies:</h2> <p> <img src=”line.gif” /> Align: Baseline / Bottom <img src=”down.gif” align=”baseline” /> Align: Absolute Bottom <img src=”down.gif” align=”absbottom” /> </p> Figure 9.7 shows examples of all the options as they appear in a browser. In each case, the line on the left side and the text are aligned with each other, and the position of the arrow varies. 222 LESSON 9: Adding Images, Color, and Backgrounds Download from www.wowebook.com ptg Output . FIGURE 9.7 Image alignment options. Images and Text 223 9 Wrapping Text Next to Images Including an image inside a line works fine if you have only one line of text. To control the flow of text around an image, you need to use CSS or the align attribute of the img tag. Images are just like any other element as far as the float property goes, so you can use the float and clear CSS properties to control text flow around them, as discussed in the previous lesson. HTML5 does not support the align attribute, but all the browsers that are currently in use do, and many people still use it. align=“left” and align=“right” align=“left” aligns an image with the left margin, and align=“right” aligns an image with the right margin. However, these attributes also cause any text that follows the image to be displayed in the space to the right or left of that image, depending on the margin alignment: Input ▼ <p><img src=”tulips.gif” align=”left” /></p> <h1>Mystery Tulip Murderer Strikes</h1> <p> Someone, or something, is killing the tulips of New South Haverford, Virginia. Residents of this small town are shocked and dismayed by the senseless vandalism that has struck their tiny town. </p> <p> Download from www.wowebook.com ptg New South Haverford is known for its extravagant displays of tulips in the springtime, and a good portion of its tourist trade relies on the people who come from as far as New Hampshire to see what has been estimated as up to two hundred thousand tulips that bloom in April and May. </p> <p> Or at least the tourists had been flocking to New South Haverford until last week, when over the course of three days the flower of each and every tulip in the town was neatly clipped off while the town slept. </p> <p> “It started at the south end of town,” said Augustin Frouf, a retired ladder-maker who has personally planted over five hundred pink lily-flowered tulips. “They hit the houses up on Elm Street, and moved down into town from there. After 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.8 shows an image with some text aligned next to it. You can put any HTML text (paragraphs, lists, headings, other images) after an aligned image, and the text will be wrapped into the space between the image and the margin. Or you can have images on both margins and put the text between them. The browser fills in the space with text to the bottom of the image and then continues filling in the text beneath the image. 224 LESSON 9: Adding Images, Color, and Backgrounds Output . FIGURE 9.8 Text and images aligned. Download from www.wowebook.com ptg Stopping Text Wrapping What if you want to stop filling in the space and start the next line underneath the image? A normal line break won’t do it; it just breaks the line to the current margin alongside the image. A new paragraph also continues wrapping the text alongside the image. To stop wrapping text next to an image, use the clear CSS property. This enables you to stop the line wrapping where appropriate. As mentioned in Lesson 8, “Using CSS to Style a Site,” the clear property can have one of three values: left Break to an empty left margin, for left-aligned images right Break to an empty right margin, for right-aligned images all Break to a line clear to both margins For example, the following code snippet shows a picture of a tulip with some text wrapped next to it. Adding a style attribute to the first paragraph with clear set to left breaks the text wrapping after the heading and restarts the text after the image: Input ▼ <p><img src=”tulips.gif” align=”left” /></p> <h1>Mystery Tulip Murderer Strikes</h1> <p style=”clear: left”> Someone, or something, is killing the tulips of New South Haverford, Virginia. Residents of this small town are shocked and dismayed by the senseless vandalism that has struck their tiny town. </p> <p> New South Haverford is known for its extravagant displays of tulips in the springtime, and a good portion of its tourist trade relies on the people who come from as far as New Hampshire to see what has been estimated as up to two hundred thousand tulips that bloom in April and May. </p> <p> Or at least the tourists had been flocking to New South Haverford until last week, when over the course of three days the flower of each and every tulip in the town was neatly clipped off while the town slept. </p> <p> “It started at the south end of town,” said Augustin Frouf, a retired ladder-maker who has personally planted over five hundred pink lily-flowered tulips. “They hit the houses up on Elm Street, and moved down into town from there. After Images and Text 225 9 Download from www.wowebook.com . 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 ▼ <!DOCTYPE html& gt; < ;html& gt; <head> <title>Welcome. 5PM-midnight</li> <li>Sat & Sun 5PM-3AM</li> <li><strong>Halloween Night ( 3 1- Oct)</strong>: 3PM-???</li> </ul> <p> The Halloween House of Terror is. 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