Module Map Introduction Images and the <img ...> Tag Links and the <a ...> (anchor) Tag Absolute Addresses and Text Links Absolute Addresses and Image Links Relative Addresses Named Anchors Dreamweaver with Images and Links Images Relative and Absolute Addressses/Text and Image Links Named Anchors Image Maps Conclusion

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 ) we will cover other options. shows the relevant segment of the XHTML code, and imagedemo1.html shows the complete XHTML file

XHTML Source Code for imagedemo1.html

Firefox Browser view of imagedemo1.html 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". 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.

XHTML Tag Syntax 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.

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 , we add a link to the web site of the photographer, Bruce Damer. The file is imageandlinkdemo1.html. and show the XHTML code and a Firefox browser rendering.

XHTML Source Code for imageandlinkdemo1.html

Firefox Browser view of imageandlinkdemo1.html Line 12 of contains the anchor tag:


		
		<a href="http://www.damer.com/">Bruce Damer</a>

The only attribute shown is named 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. and show the XHTML code and a Firefox browser rendering.

XHTML Source Code for imagelinkdemo1.html

Firefox Browser view of imagelinkdemo1.html 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, shows the folder/directory structure we will be using.

Folder/Directory Structure for Relative Addressing Examples The initial file, browserusage_table.htm is in the data folder and contains a summary of data related to browser usage from January, 2006 to August, 2006. It contains links to: A pie chart contained in an XHTML file (below the data folder in the pie_chart folder), piedemo1.html This chart summarizes the data in the table for August, 2006. Line charts contained in XHTML files (at the same level as the data folder, but in the line_charts folder), ie6linedemo1.html and ffoxlinedemo1.html These line charts show six month trends of usage for the Internet Explorer 6 and Firefox browsers. Since Connexions does not allow for folders (as far as I can tell), these files are contained on another server where the directory structure can be created. shows the relevant segement of XHTML source code for browserusage_table.htm .

Segment of XHTML code for browserusage_table.htm For those familiar with file and directory specification in Linux operating systems, the following notes will be familiar. Recall, that our initial file is in the data folder and note: 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). We now move to the situation where we want to specify a link to a location within the same file, e.g. a file that is relatively long, containing a considerable amount of information. The links could be a kind of "table of contents" for the file, or if the file is a set of "frequently asked questions" (FAQ), the links might be to the answers to those questions. 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 shows the XHTML code associated with specifying the marker/named anchor.

Specifying a Named Anchor Notice the 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 show the link specification.

Specifying a Link to a Named Anchor Notice the value for the 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 ) box appears.

Select Image Source Dialog Box Alternatively, you can also use the Insert Toolbar by clicking on the drop-down menu button next to the button, as shown in

Inserting an Image from the Insert Toolbar

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 and one for the image selection as shown in .

Inserting Text Link from the Properties Panel

Inserting an Image Link from the Properties Panel

Named Anchors Once the "named anchor" is specified as discussed in , 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

Inserting an Image Link from the Properties Panel

Image Maps We will begin with the pie chart, piedemo1.html, we discussed earlier when we were demonstrating relative addressing of links in , using the directory structure shown in . 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 .

Selecting the "Irregular Polygon Hotspot" in the Properties Inspector Next click around the edges of the slice of the pie for which you wish to define the link, as shown in

Selecting the "Irregular Polygon Hotspot" on the Image and then complete the Link field in the Properties Panel as shown in .

Completing the Link for the Pie "Hotspot" 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).