Web Programming Quick Start: XHTML -- Images and Links
Summary: This module discusses how to add images and links to your XTHML files. The tags discussed are the <img ...> and <a ...> tags.
Module Map
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
 |
 |
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 bysrc="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.Figure 3: XHTML Tag Syntax 
- The
imgtag 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 withlongdesc = "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."widthandheight: 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.
Links and the <a ...> (anchor) Tag
The XHTML tag used to specify links is the "anchor" tag. Not surprisingly it also has one attribute will will discuss. It is not, however, and empty tag as is the <img> tag, discussed above. A significant part of this section on anchor tags will involve the specification of the files to which links are specified. The reason for not just stopping with specifying the complete URL (Uniform Resource Locator) is that this can greatly complicate the moving of your web site to another server, particularly when your links are referring to files on your site.
Absolute Addresses and Text Links
Using a file similar to imagedemo1.html discussed in Section 3, we add a link to the web site of the photographer, Bruce Damer. The file is imageandlinkdemo1.html. Figure 4 and Figure 5 show the XHTML code and a Firefox browser rendering.
 |
 |
Line 12 of Figure 4 contains the anchor tag:
<a href="http://www.damer.com/">Bruce Damer</a>
href. Notice that its value is the
complete URL to Bruce Damer's
site. The text appearing in the browser window is contained between
<a ... > and </a> tags.
If the page to which you are linking is not in your web site, then the value of
href needs to be the complete URL.
This includes the protocol, http:. Pnly giving www.damer.com will
not suffice
in
order for the link to work correctly.
Absolute Addresses and Image Links
Links, as well as text, can also be images. imagelinkdemo1.html shows a simple example where the Google logo is used as a link to Google's web site. Figure 6 and Figure 7 show the XHTML code and a Firefox browser rendering.
 |
 |
imagelinkdemo2.html is
an additional example, where
the image is a "thumbnail" (a smaller version) of the original image. The
img tag also contains a longdesc attribute with the attribute
value specifying a file piestats.html.
All three files reside
in the same folder/directory of the XHTML file. As noted above, this can be very useful
to making the data in the figure
accessible to those will visual difficulties.
Relative Addresses
We now move to this situation where you want to specify links to files on your own web site. In our example, Figure 8 shows the folder/directory structure we will be using.
 |
Figure 9 shows the relevant segement of XHTML source code for browserusage_table.htm .
 |
- Line 106: Shows that since the piedemo1.html file is directly below the data folder
in
the pie_charts folder, the value for the href attribute is
pie_charts/piedemo1.html, simply giving the name of the folder directly below the data folder, containing our initial file. - Lines 107 and 108: Show that in order to get to the line_charts folder,
we must first move "up" one level (".." does this), then back "down" to the to
the line_charts folder ("/line_charts), and finally to the files themselves
(e.g. /ie6linedemo1.html). The segment
of code from line 107,
../line_charts/ie6linedemo1.html, demonstrates this.
Named Anchors
We have now discussed the following:
- Specifying links that reside on a server different from the one holding the file containing the links we are constructing (absolute addressing).
- Specifying links that are either text or images. In our examples, we provided the complete URL for the link, although as we saw later this is not necessary if we are constructing links within the current web site.
- Specifying links to files that reside on the same server holding the file containing the links being constructing (relative addressing).
Our example is a snippet from William Shakespeare's Julius Caesar, taken from Project Gutenberg. Let's say that we wish to place a link at the top of the file that takes the user directly to the beginning of Mark Antony's oration, the familiar, "Friends, Romans, countrymen, lend me your ears!...". caesar_snippet.html shows the finished result.
First, we need to place a marker at the location to which we wish our link to go. Next, we need to specify the link to that marker. This marker is often called a "named anchor." Some HTML generators will also call it a "bookmark."
The code shown on line 49 of Figure 10 shows the XHTML code associated with specifying the marker/named anchor.
 |
name and id attributes, both with the same values. The older versions of this
tag use the
name attribute and later versions use the
id attribute. If you use only one, the id attribute is recommended.
You might notice that line 49
also contains one other XHTML tag about which we have not talked, <br />. This "break" tag
(and empty tag, note the "/" at the end)
produces a new line in your browser window. The difference between the break tag, <br />, and paragraph
tags,
<p> ... </p> is that the default settings of most browsers display paragraph breaks
with a blank line between paragraphs, whereas the break tag only displays as a new line without a blank line between the
lines where the tag appears.
All that remains is to move to the top of the file and place the link to the named anchor specified in line 49. Line 14 of Figure 11 show the link specification.
 |
href attribute is
"#start" . Thus we see that all we need to do
to specify such a link is to precede the id/name that we specified earlier with a "#". Again,
caesar_snippet.html shows
the finished result. Notice what is displayed on the status bar of the browser when the cursor is
moved over the link. It shows the full URL and the file name is followed by "#start" indicating
the named anchor.
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)
 |
Relative and Absolute Addresses/Text and Image Links
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
 |
 |
Comments, questions, feedback, criticisms?
Send feedback
- E-mail the author of the module, Web Programming Quick Start: XHTML -- Images and Links
Footer
More about this content: Metadata | Version History
This work is licensed by Ronald Sawey under a Creative Commons Attribution License (CC-BY 2.0).
Last edited by Ronald Sawey on Jan 3, 2007 9:39 am US/Central.