J.6. Images

The examples discussed so far demonstrated how to mark up documents that contain only text. However, most Web pages contain both text and images. In fact, images are an equal and essential part of Web-page design. The two most popular image formats used by Web developers are Graphics Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) images. Users can create images, using specialized pieces of software, such as Adobe® PhotoShop Elements and Jasc® Paint Shop Pro (www.jasc.com). Images may also be acquired from various Web sites, such as gallery.yahoo.com. Figure J.5 demonstrates how to incorporate images into Web pages.

Figure J.5. Placing images in XHTML files.

(This item is displayed on pages 1334 - 1335 in the print version)

"http://www.w3.org/1999/xhtml"> 9 10

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.1//EN"
 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4
 5 
 6 
 7
 8 

Adding images in XHTML 11 12 13

14 15

16 "cool8se.jpg" height = "238" width = "181" 17 alt = "An imaginary landscape." /> 18 19 "fish.jpg" height = "238" width = "181" 20 alt = "A picture of a fish swimming." /> 21

22 23 24

Good Programming Practice J.5

Always include the width and the height of an image inside the tag. When the browser loads the XHTML file, it will know immediately from these attributes how much screen space to provide for the image and will lay out the page properly, even before it downloads the image.

 

---

Performance Tip J.1

Including the width and height attributes in an tag will help the browser load and render pages faster.

 

---

Common Programming Error J.4

Entering new dimensions for an image that change its inherent width-to-height ratio might distort the appearance of the image. For example, if your image is 200 pixels wide and 100 pixels high, you should ensure that any new dimensions have a 2:1 width-to-height ratio.

 

Lines 1617 use an img element to insert an image in the document. The image file's location is specified with the img element's src attribute. In this case, the image is located in the same directory as this XHTML document, so only the image's file name is required. Optional attributes width and height specify the image's width and height, respectively. The document author can scale an image by increasing or decreasing the values of the image width and height attributes. If these attributes are omitted, the browser uses the image's actual width and height. Images are measured in pixels ("picture elements"), which represent dots of color on the screen. The image in Fig. J.5 is 181 pixels wide and 238 pixels high.

Every img element in an XHTML document has an alt attribute. If a browser cannot render an image, the browser displays the alt attribute's value. A browser might not be able to render an image for several reasons. It might not support imagesas is the case with a text-based browser (i.e., a browser that can display only text)or the client may have disabled image viewing to reduce download time. Figure J.5 shows Internet Explorer rendering the alt attribute's value when a document references a nonexistent image file (fish.jpg).

The alt attribute is important for creating accessible Web pages for users with disabilities, especially those with vision impairments and text-based browsers. Specialized software called a speech synthesizer often is used by people with disabilities. Such software applications "speak" the alt attribute's value so that the user knows what the browser is displaying.

---

Some XHTML elements (called empty elements) contain only attributes and do not mark up text (i.e., text is not placed between the start and end tags). Empty elements (e.g., img) must be terminated, either by using the forward slash character (/) inside the closing right angle bracket (>) of the start tag or by explicitly including the end tag. When using the forward slash character, we add a space before the forward slash to improve readability (as shown at the ends of lines 17 and 20). Rather than using the forward slash character, lines 1920 could be written with a closing tag as follows:

 "cool8se.jpg" height = "238" width = "181"
 alt = "An imaginary landscape.">

 

By using images as hyperlinks, Web developers can create graphical Web pages that link to other resources. In Fig. J.6, we create six different image hyperlinks.

Figure J.6. Using images as link anchors.

(This item is displayed on pages 1336 - 1337 in the print version)

"http://www.w3.org/1999/xhtml"> 9 10

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.1//EN"
 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4
 5 
 6 
 7
 8 

Using images as link anchors 11 12 13

14 15

16 <a href="</span"> "links.html"> 17 "buttons/links.jpg" width = "65" 18 height = "50" alt = "Links Page" /> 19 </a>
20 21 <a href="</span"> "list.html"> 22 "buttons/list.jpg" width = "65" 23 height = "50" alt = "List Example Page" /> 24 </a>
25 26 <a href="</span"> "contact.html"> 27 "buttons/contact.jpg" width = "65" 28 height = "50" alt = "Contact Page" /> 29 </a>
30 31 <a href="</span"> "header.html"> 32 "buttons/header.jpg" width = "65" 33 height = "50" alt = "Header Page" /> 34 </a>
35 36 <a href="</span"> "table.html"> 37 "buttons/table.jpg" width = "65" 38 height = "50" alt = "Table Page" /> 39 </a>
40 41 <a href="</span"> "form.html"> 42 "buttons/form.jpg" width = "65" 43 height = "50" alt = "Feedback Form" /> 44 </a>
45

46 47 48

Lines 1619 create an image hyperlink by nesting an img element within an anchor (a) element. The value of the img element's src attribute value specifies that this image (links.jpg) resides in a directory named buttons. The buttons directory and the XHTML document are in the same directory. Images from other Web documents also can be referenced (after obtaining permission from the document's owner) by setting the src attribute to the name and location of the image.

---

In line 19, we introduce the br element, which most browsers render as a line break. Any markup or text following a br element is rendered on the next line. Like the img element, br is an example of an empty element terminated with a forward slash. We add a space before the forward slash to enhance readability.