Inline Images in HTML: The <img> Tag Inline Images in HTML: The <img> Tag After you have an image ready to go, you can include it on your web page. Inline images are placed in HTML documents using the <img> tag. This tag, like the <hr> and <br> tags, has no closing tag in HTML. For XHTML, you must add an extra space and forward slash to the end of the tag to indicate that it has no closing tag. The <img> tag has many attributes that enable you to control how the image is presented on the page. Many of these attributes are part of HTML 3.2 or HTML 4.01 and might not be understood by some older browsers. Still other attributes have been deprecated in favor of style sheets with the HTML 4.01 and XHTML 1.0 specifications. Note To use the <img> tag in an XHTML-compliant fashion, you need to close it, like this: <img /> The most important attribute of the <img> tag is src, which is the URL of the image you want to include. Paths to images are derived in the same way as the paths in the href attribute of links. So, to point to a GIF file named image.gif in the same directory as the HTML document, you can use the following XHTML tag: <img src="image.gif" /> For an image file one directory up from the current directory, use this XHTML tag: <img src=" /image.gif" /> And so on, using the same rules as for page names in the href part of the <a> tag. You can also point to images on remote servers from the src attribute of an <img> tag, just as you can from the HRef attribute of a link. If you wanted to include the image example.gif from www.example.com on your web page, you could use the following tag: <img src="http://www.example.com/example.gif" /> Caution Just because you can use images stored on other servers for your own web pages doesn't mean that you should. There are a lot of legal, ethical, and technical issues involved with using images on other sites. I'll discuss them later in this lesson. file:///G|/1/0672328860/ch07lev1sec3.html (1 von 5) [19.12.2006 13:48:52] Inline Images in HTML: The <img> Tag Adding Alternative Text to Images Images can turn a simple text-only web page into a glorious visual feast. But what happens if someone is reading your web page using a text-only browser? What if she has image loading turned off so that all your carefully crafted graphics appear as generic icons? All of a sudden, that visual feast doesn't look quite as glorious. There's a simple solution to this problem. By using the alt attribute of the <img> tag, you can substitute something meaningful in place of the image on browsers that cannot display it. In text-only browsers, such as Lynx, graphics that are specified using the <img> tag in the original file usually are displayed as the word IMAGE with square brackets around it, like this: [IMAGE]. If the image itself is a link to something else, that link is preserved. The alt attribute in the <img> tag provides a more meaningful text alternative to the blank [IMAGE] for your visitors who are using text-only web browsers, or who have graphics turned off on their browsers. The alt attribute contains a string with the text you want to substitute for the graphic: <img src="myimage.gif" alt="[a picture of a cat]" /> 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 imagejust a few words or phrases. I bring up image alternatives now for good reason. Alternatives to images are optional in earlier versions of HTML, but they're mandatory in HTML 4.01 Strict and XHTML 1.0 specifications. If there's no appropriate alternative text for an image, you can simply leave it empty, like this: alt="". Task: Exercise 7.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 six 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 7.1 shows how it looks so far: Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Welcome to the Halloween House of Terror</title> </head> <body> <h1>Welcome to The Halloween House of Terror!!</h1> <hr /> <p>Voted the most frightening haunted house three years in a row, file:///G|/1/0672328860/ch07lev1sec3.html (2 von 5) [19.12.2006 13:48:52] Inline Images in HTML: The <img> Tag 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 &amp; 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 /> Springfield, CA 94532</p> </body> </html> Output Figure 7.1. The Halloween House home page. [View full size image] 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. file:///G|/1/0672328860/ch07lev1sec3.html (3 von 5) [19.12.2006 13:48:52] Inline Images in HTML: The <img> Tag Now, suppose that you want to place this image above the page heading. To do so, add an <img> tag to the file inside its own paragraph, just before the heading: <p><img src="house.jpg" alt="House of Terror" /></p> <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 7.2. Figure 7.2. The Halloween House home page with the haunted house. [View full size image] 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. 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: file:///G|/1/0672328860/ch07lev1sec3.html (4 von 5) [19.12.2006 13:48:52] Inline Images in HTML: The <img> Tag Input <p><img src="house.jpg" alt="House of Terror" /> <img src="house.jpg" alt="House of Terror" /></p> <h1>Welcome to The Halloween House of Terror!!</h1> Figure 7.3 shows how the page looks in a browser. The two images are adjacent to each other, as you would expect. Output Figure 7.3. Multiple images. [View full size image] And that's all there is to adding images! file:///G|/1/0672328860/ch07lev1sec3.html (5 von 5) [19.12.2006 13:48:52] Images and Text 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. In fact, this is what the phrase "inline image" actually meansit'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 7.4 shows the difference you can make by putting the image inline with the heading. (I've also shortened the heading itself and changed it to <h2> so that it all fits on one line.) Figure 7.4. The Halloween House page with an image inside the heading. [View full size image] 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: file:///G|/1/0672328860/ch07lev1sec4.html (1 von 12) [19.12.2006 13:48:53] Images and Text Input <blockquote> Love, from whom the world <img src="world.gif" alt="World" />begun,<br /> Hath the secret of the sun. <img src="sun.gif" alt="Sun" /><br /> Love can tell, and love alone, Whence the million stars <img src="star.gif" alt="Star" /> were strewn<br /> Why each atom <img src="atom.gif" alt="Atom" /> knows its own.<br /> Robert Bridges </blockquote> Figure 7.5 shows how this block looks. Output Figure 7.5. Images can go anywhere in text. [View full size image] 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. Note file:///G|/1/0672328860/ch07lev1sec4.html (2 von 12) [19.12.2006 13:48:53] Images and Text The align attribute for the <img> tag is deprecated in HTML 4.01 in favor of using style sheet attributes. You'll learn more about style sheets in Lesson 9, "Creating Layouts with CSS." 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) 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) align="bottom" Aligns the bottom of the image with the bottom of the line of text HTML 3.2 provides two other values: left and right. These values are discussed in the next section, " Wrapping Text Next to Images." Figure 7.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" alt="World" />begun,<br /> Hath the secret of the sun. <img src="sun.gif" alt="Sun" align="top" /><br /> Love can tell, and love alone, Whence the million stars <img src="star.gif" alt="Star" align="middle" /> were strewn<br /> Why each atom <img src="atom.gif" alt="Atom" align="bottom" /> knows its own.<br /> </blockquote> Output Figure 7.6. Images unaligned, aligned top, aligned middle, and aligned bottom. [View full size image] file:///G|/1/0672328860/ch07lev1sec4.html (3 von 12) [19.12.2006 13:48:53] Images and Text 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 aren't part of HTML 3.2 or 4.01, and are supported unevenly by various browsers. These four attributes aren't approved in the proposed specification for XHTML 1.0, and your page won't be verified as XHTML 1.0compliant if they're used: 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). (Neither Netscape nor Internet Explorer handle this setting properly.) 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.) 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. align="absbottom" Aligns the bottom of the image with the lowest item in the line (which may be below the baseline of the text). The following code shows these alignment options at work: Input <h2>Middle of Text and Line aligned, arrow varies:</h2> <img src="line.gif" alt="Line" /> Align: Top <img src="uparrow.gif" alt="Up" align="top" /> Align: Text Top file:///G|/1/0672328860/ch07lev1sec4.html (4 von 12) [19.12.2006 13:48:53] Images and Text <img src="uparrow.gif" alt="Up" align="texttop" /> <h2>Top of Text and Line aligned, arrow varies:</h2> <img src="line.gif" alt="Line" /> Align: Absolute Middle <img src="forward.gif" alt="Next" align="absmiddle" /> Align: Middle <img src="forward.gif" alt="Next" align="middle" /> <h2>Top of Text and Line aligned, arrow varies:</h2> <img src="line.gif" alt="Line" /> Align: Baseline / Bottom <img src="down.gif" alt="Down" align="baseline" /> Align: Absolute Bottom <img src="down.gif" alt="Down" align="absbottom" /> Figure 7.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. Output Figure 7.7. Alignment options in Firefox. [View full size image] file:///G|/1/0672328860/ch07lev1sec4.html (5 von 12) [19.12.2006 13:48:53] . put an inline image on a page with text below it. You also can include an image inside a line of text. In fact, this is what the phrase "inline image" actually meansit's in a line. Inline Images in HTML: The <img> Tag Inline Images in HTML: The <img> Tag After you have an image ready to go, you can include it on your web page. Inline images are placed. <img> Tag Adding Alternative Text to Images Images can turn a simple text-only web page into a glorious visual feast. But what happens if someone is reading your web page using a text-only