F.7. Images

The examples discussed so far demonstrate how to mark up documents that contain only text. However, most Web pages contain both text and images. In fact, images are an equal, if not essential, part of Web-page design. The three most popular image formats used by Web developers are Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG) and Portable Network Graphics (PNG) images. Users can create images using specialized pieces of software, such as Adobe Photoshop Elements 2.0 (discussed in Chapter 3), Macromedia Fireworks (www.macromedia.com) and Jasc Paint Shop Pro (www.jasc.com). Images may also be acquired from various Web sites, such as the Yahoo! Picture Gallery (gallery.yahoo.com). Figure F.7 demonstrates how to incorporate images into Web pages.

Figure F.7. Images in XHTML files.

 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 

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

10

Internet and WWW How to Program - Welcome 11 12 13

14 15

16 "xmlhtp.jpg" height = "238" width = "183" 17 alt = "XML How to Program book cover" /> 18 "jhtp.jpg" height = "238" width = "183" 19 alt = "Java How to Program book cover" /> 20

21 22

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. F.7 is 183 pixels wide and 238 pixels high.

Good Programming Practice F 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 F 1

Including the width and height attributes in an tag can result in the browser loading and rendering pages faster.

 

Common Programming Error F 4

Entering new dimensions for an image that change its inherent width-to-height ratio distorts 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.

 

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 may not be able to render an image for several reasons. It may 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 F.7 shows Internet Explorer 6 rendering the alt attribute's value when a document references a nonexistent image file (jhtp.jpg).

The alt attribute is important for creating accessible Web pages for users with disabilities, especially those with vision impairments who use text-based browsers. Specialized software called a speech synthesizer often is used by people with disabilities. This software application "speaks" the alt attribute's value so that the user knows what the browser is displaying. We discuss accessibility issues in detail in Chapter 29.

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 19). Rather than using the forward slash character, lines 1819 could be written with a closing tag as follows:

 "jhtp.jpg" height = "238" width = "183"
 alt = "Java How to Program book cover">

 

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

Figure F.8. Images as link anchors.

(This item is displayed on pages 1484 - 1485 in the print version)

 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 

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

10

Internet and WWW How to Program - Navigation Bar 11 12 13 14

15 16

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

47 48 49

Lines 1720 create an image hyperlink by nesting an img element in 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. Clicking an image hyperlink takes a user to the Web page specified by the surrounding anchor element's href attribute.

In line 20, 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. [Note: The last two image hyperlinks in Fig. F.8 link to XHTML documents (i.e., table1.html and form.html) presented as examples in Chapter 5 and included in the Chapter 5 examples directory. Clicking these links now will result in errors.]

F 8 Special Characters and More Line Breaks