# Connexions

You are here: Home » Content » Web Programming Quick Start: XHTML -- Images and Links

### Lenses

What is a lens?

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

#### In these lenses

• bethelwebdesign

This module is included inLens: Susan McClements's Lens
By: Susan McClements

Click the "bethelwebdesign" link to see all content selected in this lens.

Click the tag icon to display tags associated with this content.

### Recently Viewed

This feature requires Javascript to be enabled.

### Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

# Web Programming Quick Start: XHTML -- Images and Links

Module by: Ronald Sawey. E-mail the author

Summary: This module discusses how to add images and links to your XTHML files. The tags discussed are the <img ...> and <a ...> tags.

## Introduction

The primary goal of this "Web Programming Quick Start" series is to get the reader to the point of doing something productive with a minimum of time and effort. It is not intended to be an exhaustive treatment/reference of any of the subjects discussed. This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most welcome.

In the series of modules on XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets), we will be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of Rachael Andrew. Specifically, we will endeavor to keep the content and the styling/formatting of the web documents separate.

This module builds on material discussed in the XHTML module dealing with the creation of an initial XHTML file and XHTML -- Headings and Lists. A complete listing of the links to all XHTML and CSS modules is also available.

Segments of the XHTML source code are shown in this module as image files, but links are given to the XHTML files and the source is readily available from a browser via the menu bar using File/Save As... , View/Source or something comparable.

## Images and the <img ...> Tag

In this section we will show how to include images in your XHTML document. We will take an image from the images section of the Creative Commons site. Here we assume that the image file is in the same folder/directory as the web/XHTML document. When we discuss links (below in Section 4) we will cover other options. Figure 1 shows the relevant segment of the XHTML code, and imagedemo1.html shows the complete XHTML file

Figure 2 shows a Firefox browser view of imagedemo1.html.

There are several things worth noting:

• The syntax of the <img...> tag is different from those we have discussed so far. On line 14 we see that the img tag not only has the tag name, img, but is followed by src="DSC07985.jpg" alt="Image from SpaceShipOne" width="400" height="300">  . Each of the items following is called and "attribute." Each attribute is comprised of an attribute name, e.g. "src" and an attribute value, e.g. "DSC07985.gif". Figure 3 shows this graphically. Note also that each value is contained within quotes, either single or double quotes, is acceptable. Although browsers are pretty forgiving, and will render the page as you would expect even if quotation marks are omitted, to meet XHTML standards, the quotes must be there.
• The img tag is called and "empty" tag, in that it does not contain anything between the opening and closing tags, e.g. <img> and </img> . Instead the tag closure is indicated by a "/" at the end of the single/empty tag. As noted before browsers are pretty forgiving with respect to such lapses, but for this to be "well formed" XHTML, such closure of empty tags is required.
• The other attributes for this tag are pretty straightforward, but a few observations are in order:
• src: The path to the image file.
• alt: "Alternate" text, describing the image. This usually appears as a "pop up" or "tool tip" in a browser when the mouse moves across the image, but more importantly, it is read by reader programs used by those with visual disabilities.
• longdesc: This attribute is not used in this example, but imagelinkdemo2.html demonstrates this point with longdesc = "piestats.html", where we are using piestats.html to more fully describe the pie chart describing usage for August, 2006. Again, this can be very useful to those with visual difficulties, and is a means of addressing some "accessibility issues."
• width and height: The dimensions of the image, given in pixels. Browsers usually display images if these attributes are omitted, but the pages load more quickly if this information is given.
• The image file, DSC07985.gif, is not part of the XHTML document, hence you need to make sure that both the XHTML file and the image file are on the web server. Those who are mostly familiar with the way word processors handle images, should take special note of this feature of XHTML. It is probably worth noting that beginning with Microsoft Word 2003, saving a Word document as an HTML file by default generates file with either the .mht or .mhtml extensions ("mime html"). These files contain the images encoded into the .mthml file. However, at this writing, only Internet Explorer will render these web files correctly.

## Dreamweaver with Images and Links

Inserting images and links using Dreamweaver is a relatively simple matter and the sections below will describe this process.

### Images

To insert an image using Dreamweaver, you can use the menu bar and Insert/Image and then provide the image name and path when the "Select Image Source" dialog (see Figure 12) box appears.

Alternatively, you can also use the Insert Toolbar by clicking on the drop-down menu button next to the button, as shown in (Reference)

Specifying links using Dreamweaver is simply a matter of selecting the text or image you wish to make a link and completing the "Link" field in the Properties Panel. Since the Properties Panel differs depending on context, there is one for the text selection as shown in Figure 14 and one for the image selection as shown in Figure 15.

### Named Anchors

Once the "named anchor" is specified as discussed in Section 8, the link specification is done as noted in the previous section. Once the cursor is at the place where the named anchor is to be placed, you can use Insert/Named Anchor from the menu bar or the button on the Insert Toolbar as show in Figure 16

### Image Maps

We will begin with the pie chart, piedemo1.html, we discussed earlier when we were demonstrating relative addressing of links in Section 7, using the directory structure shown in Figure 8.

In this case, however, we will construct links such that when the mouse is moved over the slices of the pie chart corresponding to IEt and Ffox, there will be a link to the corresponding line chart for the January, 2006 to August, 2006 usage for a particular browser.

In order to do this, while in Dreamweaver, select the image and select then click on the "irregular polygon hotspot" on the Properties Panel as indicated in Figure 17.

Next click around the edges of the slice of the pie for which you wish to define the link, as shown in Figure 18

and then complete the Link field in the Properties Panel as shown in Figure 19. piedemo2.html shows the result of specifying both the IE6 and Ffox slices of the pie chart.

## Conclusion

The following might also be helpful:

• Links to the other modules in this "Web Programming Quick Start" series are available
• Links to other screen recordings for these modules are also available (time permitting).

## Content actions

PDF | EPUB (?)

### What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks