Links and Images in (X)HTML

Links are what give the Web its power: the power to leap effortlessly from one part of the world to another with a single click of the mouse.

Or to put it more technically, a link is an instruction to a browser to seek a Web page (or other service) from a server.

So: how do we create (X)HTML links?

Building a Link

Here is a link in (X)HTML, and what it looks like in the browser:

From this example you can see that there's a lot more to a link than meets the eye! Let's look at the parts...

Targets

Ordinarily, a hyperlink opens a file in the same window as the originating link, so that the new file replaces the old one. There are times when that's not ideal, and it would be better if the new file were "shot" into a different window.

A target is the window in which a hyper-reference will appear.

The target is assumed to be the same window as the link, unless there is a Target parameter in the Anchor tag. Here's what one looks like (highlighted):

What the browser shows is exactly the same with and without the Target parameter - a user wouldn't know that clicking this link will open the file in a different window. (Try it!)

There are several possibilities for what you can name as the "target". Notice that several of them begin with an _underscore_ character:

Window Names

The target names shown above are standard names, and need to be spelled as you see them, with _underscore_ characters in front of them.

But you can put in any name you want! This makes it possible for you to give names to windows. Here's how it works...

You put in a link with a target name. For example:

The first time the user clicks the link (try it!) the browser opens a new window and remembers it as Piglet. The name Piglet is not part of the (X)HTML code in the linked file - it's just something the browser keeps track of for itself.

Now you create another link. The target is the Piglet window, but the link is to a different file. (Try this one, too.)

Web Pages

Web pages are what we naturally expect browsers to get for us - and what they expect to get, too. The page's file may be located on the same computer as the browser (a local file) or on a server.

Email

An email link is useful for encouraging visitors to a Website to send feedback to the designer - or to anyone else! Email links are simple to create. Here are some examples:

Other Types

In addition to asking for Web pages and sending email, hyperlinks can be used for several other types of Internet exchanges. Here are a few of them:

How to Set Up an Anchor

Include this code in your file, just before the point you want your user to hop to:

<a name="Sec1" / >

Anchor name rules:

• Names are case-sensitive, so be consistent in using them;
• no spaces are allowed in anchor names (shorter is simpler, anyway!)

How to Link to an Anchor

Use the # ("pound sign") in front of the anchor's name to link to it:

<a href="#Sec1">Click here to go to Section 1</a>

You can also link to an anchor within another file, or on a different Website:

<a href="myfile.htm#Sec1">Link to my file's Section 1</a>

<a href="http://www.company.com/products/#Electronics">Click here to see the Company's electronic products</a>

When you see an image in a Web page, it is there because the browser made a special request for it. The image really is not part of the Web page: it is a separate file which is brought in by the browser and displayed in the proper place on the screen.

Given that, it's possible to use images as links, just like text. We'll show you how...

Simple Reference

Use the Img tag to call for an image to be displayed:

<img src="logo.gif" / >

The Img tag has several possible parameters that you can put in, but it always has a source src= parameter.

There is no closing tag for the Img tag, so in XHTML you'll need to put in the "self-closing" / at the end, as shown in the example. (This was not necessary in HTML 4.01 or earlier.)

Specifying the Size and Alignment

In addition to specifying the source, you may specify a number of other things:

• Height of the image in pixels: height="285"
• Width of the image in pixels: width="385"
• Placement of the image: align="right"

<img src="w23c_f05.gif" width="385" height="285" align="right" />

Alternate Text

If the image is not displayed, or if the user runs the mouse pointer over an image, browsers can display text. This is helpful in many situations:

• When visually impaired users have a text-to-speech program running, the program will read the alternate text aloud
• If the image takes a long time to download, the text is displayed while you wait
• If the image file can't be found, the text is displayed when the mouse runs over it

  <img src="w23c_f05.gif" alt="Figure 5: Over-link" />

Using an Image as a Link

Images are often used as links to other Web locations. Many buttons, for example, are images which are also links. This is done by putting the image tag in side a link tag.

(X)HTML	Browser
<a href="http://www.wccnet.edu/"> <img src="wcctile.gif" /> </a>
<a href="http://www.altavista.com/"> <img src="altavist.gif" /> </a>

Review:

Audience:

Objectives:

When you successfully complete this lesson, you will be able to identify and explain the...

1. Purpose of an (X)HTML link
2. Purpose of the parts of an (X)HTML link
3. Target parameter and its major options
4. Various types of links that can be made
5. Purpose of an (X)HTML anchor
6. Syntax of an (X)HTML anchor
7. (X)HTML Image tag and its parts
8. Parameters to the Image tag setting height, width, and alternate message
9. Parameter for assigning a background image to the Body tag.

Module W23c:

Author:

Institution: