Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Introduction to XHTML

Images - XHTML

The examples discussed so far demonstrate how to mark up documents that contain only text. However, most web pages contain both text and images.

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 equally important, 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 Ex-perts Group (JPEG) and Portable Network Graphics (PNG) images. Users can create im-ages using specialized software, such as Adobe Photoshop Elements (www.adobe.com), G.I.M.P. (http://www.gimp.org) and Inkscape (http://www.inkscape.org). Images may also be acquired from various websites. Figure 4.5 demonstrates how to incorporate images into web pages.

Lines 14–15 use an imgelement to insert an image in the document. The image file’s location is specified with theimg element’s srcattribute. This image is located in the same directory as the XHTML document, so only the image’s filename is required. Optional attributes width and height specify the image’s width and height, respectively. You can scale an image by increasing or decreasing the values of the image width and heightattributes. 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. Any image-editing program will have a feature that displays the dimensions, in pixels, of an image. The image in Fig. 4.5 is 92 pixels wide and 120 pixels high.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 4.5: picture.html -->

<!-- Images in XHTML files. -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Images</title>

</head>

<body>

<p>

<img src = "cpphtp6.jpg" width = "92" height = "120"

alt = "C++ How to Program book cover" />

<img src = "jhtp.jpg" width = "92" height = "120"

alt = "Java How to Program book cover" />

</p>

</body>

</html>

Fig. 4.5 |ImagesinXHTMLfiles

Every img element in an XHTML document must have an altattribute. 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 images—as is the case with a text-basedbrowser (i.e., a browser that can display only text)—or the client may have disabled image viewing to reduce download time. Figure 4.5 shows Internet Explorer 7 rendering a redx symbol and displaying the alt attribute’s value, signifying that the image (jhtp.jpg) cannot be found.

The alt attribute helps you create accessible web pages for users with disabilities, especially those with vision impairments who use text-based browsers. Specialized software called a speechsynthesizer can “speak” the altattribute’s value so that a user with a visual impairment knows what the browser is displaying.

Some XHTML elements (called emptyelements) 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) mustbeterminated,eitherby usingtheforwardslashcharacter(/) insidetheclosingright angle bracket (>) of the start tag or by explicitly including the end tag. When using the forward slash character, we add a space before it to improve readability (as shown at the ends of lines 15 and 17). Rather than using the forward slash character, lines 16–17 could be written with a closing</img> tag as follows:

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

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 4.6: nav.html -->

<!-- Images as link anchors. -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Navigation Bar</title>

</head>

<body>

<p>

<a href = "links.html">

<img src = "buttons/links.jpg" width = "65"

height = "50" alt = "Links Page" />

</a>

<a href = "list.html">

<img src = "buttons/list.jpg" width = "65"

height = "50" alt = "List Example Page" />

</a>

<a href = "contact.html">

<img src = "buttons/contact.jpg" width = "65"

height = "50" alt = "Contact Page" />

</a>

<a href = "table1.html">

<img src = "buttons/table.jpg" width = "65"

height = "50" alt = "Table Page" />

</a>

<a href = "form.html">

<img src = "buttons/form.jpg" width = "65"

height = "50" alt = "Feedback Form" />

</a>

</p>

</body>

</html>

Fig. 4.6 |Imagesaslinkanchors.

Lines 14–17 create an image hyperlink by nesting an img element in an anchor (a) element. The value of the imgelement’s src attribute value specifies that this image (links.jpg) resides in a directory named buttons. Thebuttons directory and the XHTML document are in the same directory. Images from other web documents also can be referenced by setting the src attribute to the name and location of the image. Note that if you’re hosting a publicly available web page that uses an image from another site, you should get permission to use the image and host a copy of image on your own website. If you refer to an image on another website, the browser has to request the image resource from the other site’s server. Clicking an image hyperlink takes a user to the web page spec-ified by the surrounding anchor element’s href attribute. Notice that when the mouse hovers over a link of any kind, the URL that the link points to is displayed in the status bar at the bottom of the browser window.