Links and Images

Text Links

The last paragraph in the text file has acknowledgements for the data contained in the planets table. When referring to another web page from your site, you should provide a link from your web page as a courtesy.

To link to the pages referred to, we will need to provide additional markup. The anchor (a) tag for is used to mark up hypertext links, and can also serve as an anchor for a link destination. For a hypertext link, the a tag must provide a uniform resource identifier (URI) that can be resolved to a specific location among the billions of pages that exist on the Internet.

When linking to page on another website, the full URL (uniform resource location) of the page should be used. The address bar on a browser will usually display the full URL (http://some.web.page) for the page currently displayed in your browser window. So when I want to link to a specific page, I visit the page, copy the URL from my browser's address bar, and use that to specify the address for my hypertext link.

So for our solar system page, I visited the pages referred to in the text file, and noted down their URLs:

Planetary Fact Sheets - http://nssdc.gsfc.nasa.gov/planetary/planetfact.html
Planetary Profiles - http://pds.jpl.nasa.gov/planets/special/planets.htm
Solar System page - http://www.jpl.nasa.gov/solar_system/
NASA home page - http://www.nasa.gov/home/index.html

To mark up the links, the "clickable content" that the user will click to follow the link goes between the beginning and closing a tags. This content is usually text or an image. The URL is given as a value to the href attribute for the a tag.

So the mark up for the Planetary Fact Sheets would look like this:

<a href="http://nssdc.gsfc.nasa.gov/planetary/planetfact.html">Planet
 Fact Sheets</a>

So when the link is rendered, the user will be able to click on Planet Fact Sheets to visit that site.

Note that you cannot put a line break or spaces in the value given for the href attribute. This can be tempting, since some URLs can be very long, but the link will not work.

Relative URLs

On many websites, such as this one, many links are provided to another page on the same website. When doing that, you can specify a relative URL, instead of having to give the entire http://some.website.com/mypage.html link. This is very useful, not only to save typing, but if you transfer your website to another domain, you will not have to update all the links.

A relative URL is specified based on the current page's location. If the page you wish to link to is in the same directory as the current page, the href attribute only needs to contain the filename of the page you wish to link to.

For example, as we further develop the contents of the solar system page, it is likely that we would eventually code pages featuring each of the planets. The page on Saturn is in the file saturn.html. If it was stored in the same directory of the main solar system page, the main page could link to the Saturn page by using the following markup:

<a href="saturn.html">Saturn</a>

If the saturn.html page was stored under a Planets subdirectory, the markup would change to reflect the additional directory layer like this:

<a href="Planets/saturn.html">Saturn</a>

With the saturn.html page in the subdirectory Planets, to link back to the main solar system page, the markup using a relative URL would be as follows:

<a href="../solarsys.html">Solar System Home</a>

The ../ signifies that the target link can be found in the parent directory of the current directory. So for resolving this relative URL, the server looking for your page would back up to the directory containing the Planets directory and look for solarsys.html there.

Essentially, think of each ../ value in the href attribute as backing up one directory.

The `a` Tag as an Anchor

To use the a tag as an anchor, specify an empty a tag with an id attribute. The name attribute can be used as well, but this use of the name attribute for the a is on the chopping block for XHTML 1.1. To ensure compatibility with older browsers, you may wish to specify both attributes, using the same value for each.

Anchors like this are normally used when the content of a web page is rather long, and you wish to provide your users with a means to jump to a specific portion of your page.

For example, if you wished to provide an anchor for the planet table, you could add <a id="planetTable"></a> immediately above the beginning of the table element in your source file.

However, another way to provide an anchor to a section of a page is to simply provide the lead element of the section with an id attribute. For example, the "Introduction" and "Getting Started" sections of this tutorial are sections on the same page. To provide the anchors, I coded an id attribute for the h2 elements for those sections:

<h2 id="introduction">Introduction</h2>
<h2 id="getStarted">Getting Started</h2>

To reference these IDs as a link destination, you specify the href attribute for the page, with # and the id value at the end.

For example, for the Introduction section hypertext link, the href value would be (using a relative URL):

<a href="xhtml2.aspx#introduction">Introduction</a>

The `a` Tag for e-mail Addresses

It is quite common for an e-mail address to be provided on a page, with a link that the user can click to launch their e-mail client and send a note to that e-mail address. The format to do this is to provide a mailto link. The href attribute for a mailto link is straightforward -- merely use mailto:emailaddress, like:

<a href="mailto:janedoe@xyz.com">janedoe@xyz.com</a>

Rendered, the clickable link would appear something like: janedoe@xyz.com.

A warning: Unless you have some sort of spam filter on your e-mail client, be cautious in providing a mailto link on your pages. There are many spambots that crawl along web pages looking for mailto links and get e-mail addresses from them, and then spam e-mail to those addresses.

Images

Images are often seen on web sites, becoming more and more prevalent as time goes on. Images can be used to complement text content, visually enhance a page to make it more appealing and sophisticated to your users, to help establish a theme or mood, and other things, even to share family photos.

A Few Things to Keep in Mind About Images

Images must be loaded to the visitor's computer for display, so it is not a good idea to fill your pages with numerous images, otherwise the pages will load very slowly for users not on speedy connections. If you really need alot of images on your site (such as for an art print catalog), you should use multiple pages to present the content, such as by category, to have some mercy on those with slower connections. For example, if we had multiple images of the solar system, we could display one on the main page, and have a "More Images" page to show the others.

Images can be copyrighted, and you should not use them without permission. However, many image repositories allow use of their images for free for non-commercial use. For example, for the solar system page we are building, I wanted to use an image I found on a NASA image gallery. On the image gallery page, a link was provided specifying use of the images, and I was happy to see that the images can be used for free, as long as proper credit is given.

If not sure you can use an image, contact the copyright holder and ask. If you can't determine who the copyright holder is, then simply do not use the image.

Images come in different formats. It is beyond the scope of this tutorial to discuss image formats, but the webmonkey site provides an overview on different image formats and optimizing images for the web.

Image Markup

We will add the following image, courtesy NASA/JPL-Caltech, to our page:
The Solar System

Images are commonly stored in an images directory under the main directory for a web site. So in the directory that has your XHTML file source, create an images directory to store the image we will be adding to our solar system page. Right-click and save the above image to that directory, naming it solarsys.jpg.

The tag for an image is img. Like the line break tag br the img tag is an empty tag, so can be closed using />. The basic markup for to include the image in the solar system page is as follows:

<img src="images/solarsys.jpg" alt="Welcome to the Solar System" />

The src attribute is the URL of the image. Since the image is stored in a subdirectory on the same computer, we can use a relative URL. The alt attribute is for alternative text for the image. This text will be displayed for those who have images turned off in their browser, and is also used for accessibility. For example, a device used to "read" a page for the blind would convey the value of the alternative text. The alt attribute is required for XHTML.

Another attribute I usually add to the img is title. Some browsers use the alt value to display a tooltip, while others use the title value to display a tooltop. Since I find the image tooltip a nice feature in visual browsers, I include both attributes.

We will want the picture of the solar system to appear at the top of the solar system page, so we will want the mark up to be placed above the h1 tag in our XHTML file. The img tag is an inline element, and must be specified as the contents of another element on the page besides the body element. To accomplish this, we will use the generic container div tag to hold the img element.

<div><img src="images/solarsys.jpg"
 alt="Welcome to the Solar System" 
 title="Welcome to the Solar System" /></div>

Image Links

Images are commonly used as the content of an a tag. For example, banner images are often used on web pages where the user can click on the banner image to go to a web page. To do this, we would wrap an a tag around the img tag for the banner. The a is also an inline element, so we will just include it within the div element that already contains the img element.

<div>
  <a href="http://www.some.web.page"><img
   src="images/somecompanybanner.jpg"
   alt="Visit Some Company's Website"
   title="Visit Some Company's Website" /></a>
</div>

The image would now be a hyperlink to the company's website.

The Solar System Page so Far

After adding the text links and the image, the page on the solar system is almost finished. However, for the solar system page we are building, we want to use the image of the solar system in such a way that the user can click on a planet in the picture and go to a page detailing that planet. To do that, we will need to create an image map.

Next Chapter - Image Maps