Thông tin tài liệu
Images and Text Wrapping Text Next to Images Including an image inside a line works fine if you have only one line of text. One aspect of inline images that I've sneakily avoided mentioning so far is that in HTML 2.0, this alignment worked only with a single line of text. If you had multiple lines of text and you included an image in the middle of it, all the text around the image (except for the one line) would appear above and below that image. What if you want text to flow around an image? Using HTML 2.0, you couldn't. You were restricted to just a single line of text on either side of the image, which limited the kinds of designs you could do. To get around this HTML 2.0 limitation, Netscape defined two new values for the align attribute of the file:///G|/1/0672328860/ch07lev1sec4.html (6 von 12) [19.12.2006 13:48:53] Images and Text <img> tag: left and right. These new values were incorporated into HTML 3.2 and are now supported by all current browsers. 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 <img src="tulips.gif" alt="Tulips" align="left" /> <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>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> Figure 7.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. Output Figure 7.8. Text and images aligned. [View full size image] file:///G|/1/0672328860/ch07lev1sec4.html (7 von 12) [19.12.2006 13:48:53] Images and Text 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 a line break tag ( <br>) with the clear attribute. This enables you to break the line so that the next line of text begins after the end of the image (all the way to the margin). The clear attribute 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 Note file:///G|/1/0672328860/ch07lev1sec4.html (8 von 12) [19.12.2006 13:48:53] Images and Text The clear attribute for the <br> tag is deprecated in HTML 4.01, in favor of using style sheet attributes. For example, the following code snippet shows a picture of a tulip with some text wrapped next to it. A line break with clear="left" breaks the text wrapping after the heading and restarts the text after the image: Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> </head> <body> <img src="tulips.gif" alt="Tulips" align="left" /> <h1>Mystery Tulip Murderer Strikes</h1> <br clear="left" /> <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>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> Figure 7.9 shows the result in a browser. Output Figure 7.9. Line break to a clear margin. [View full size image] file:///G|/1/0672328860/ch07lev1sec4.html (9 von 12) [19.12.2006 13:48:53] Images and Text 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. The vspace and hspace attributes (introduced in HTML 3.2) enable you to make these adjustments. 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. Note The vspace and hspace attributes for the <img> tag are deprecated in HTML 4.01, in favor of using style sheet attributes. The following HTML code, displayed in Figure 7.10, illustrates two examples. The upper example shows default horizontal and vertical spacing around the image, and the lower example shows the effect file:///G|/1/0672328860/ch07lev1sec4.html (10 von 12) [19.12.2006 13:48:53] Images and Text 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 <img src="eggplant.gif" alt="Eggplant" align="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> <br clear="left" /> <hr /> <img src="eggplant.gif" alt="Eggplant" vspace="50" hspace="50" align="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. Output Figure 7.10. The upper example doesn't have image spacing, and the lower example does. [View full size image] file:///G|/1/0672328860/ch07lev1sec4.html (11 von 12) [19.12.2006 13:48:53] Images and Text Note With Cascading Style Sheets, you can control image borders, space included around images, and how text flows around images. You can also use CSS to control the properties of elements of all kinds, so I'm going to cover them in Lesson 9. file:///G|/1/0672328860/ch07lev1sec4.html (12 von 12) [19.12.2006 13:48:53] Images and Links 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> Tip One thing to look out for when you're placing images within links, with or without text, is white space between the </a> tag and the <img> tag or between the text and the image. Some browsers turn the white space 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. By default in HTML 2.0, images that are also links appear with borders around them to distinguish them from ordinary, nonclickable images. Figure 7.11 shows an example of this. The butterfly image is a nonclickable image, 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. Figure 7.11. Images used as links have a border around them. [View full size image] file:///G|/1/0672328860/ch07lev1sec5.html (1 von 7) [19.12.2006 13:48:54] Images and Links You can change the width of the border around the image by using the border attribute to <img>. The border attribute was a Netscape extension that became part of HTML 3.2, but it's been deprecated in HTML 4.01 in favor of style sheets. This attribute takes a number, which is the width of the border in pixels. border="0" hides the border entirely. This configuration is ideal for image links that actually look like clickable buttons, as shown in Figure 7.12. Figure 7.12. Images that look like buttons. [View full size image] Note file:///G|/1/0672328860/ch07lev1sec5.html (2 von 7) [19.12.2006 13:48:54] Images and Links 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. Task: Exercise 7.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 of 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'll write the HTML structure to support the icons. Here, the page itself isn't very important, so you can just include a shell page: Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Motorcycle Maintenance: Removing Spark Plugs</title> <h1>Removing Spark Plugs</h1> <p>(include some info about spark plugs here)</p> <hr /> </body> </html> Figure 7.13 shows how the page looks at the beginning. Output At the bottom of the page, add your images using <img> tags: Input <img src="next.gif" alt="Next" /> <img src="back.gif" alt="Back" /> <img src="uparrow.gif" alt="Up" /> Output Figure 7.13. The basic page, with no icons. [View full size image] file:///G|/1/0672328860/ch07lev1sec5.html (3 von 7) [19.12.2006 13:48:54] . 13:48:53] Images and Links Images and Links Can an image serve as a link? Sure it can! If you include an <img> tag inside a link tag (< ;a& gt;), that image serves as a link itself: < ;a href="index .html& quot;><img. Images and Text Wrapping Text Next to Images Including an image inside a line works fine if you have only one line of text. One aspect of inline images that I've sneakily avoided. clear attribute 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
Ngày đăng: 07/07/2014, 09:20
Xem thêm: Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P23 docx, Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P23 docx
