Module 2 - Page 13 - The A (anchor) Tag, Part 2

The A (anchor) Tag, Part 2

As mentioned earlier, you may use A (anchor) tags to mark images as hyper-references, which is done in the same manner as creating a text hyper-reference. Just place an opening and closing A (anchor) tag around your IMG tag, then insert the HREF attribute into the A (anchor) tag and set the value of the HREF attribute to the appropriate URL.

Example:

The above example uses our earlier example image, and makes it a hyper-reference to Yahoo. Here is what the above example looks like:

NB: A (anchor) tags must ALWAYS begin and end on the same line as the text or image that they are marking; this is due to a flaw in the way many current browsers interpret white space. The incorrect examples below will cause an unwanted extra underline to appear beside the word (or picture) in many browsers.

Incorrect Text Link Example:

<a href="http://www.yahoo.com/">
Link Word
</a>

Incorrect Text Link Example Displayed:

Link Word

Correct Text Link Example:

<a href="http://www.yahoo.com/">Link Word</a>

Correct Text Link Example Displayed:

Link Word

Incorrect Image Link Example:

<a href="http://www.yahoo.com/">
<img src="http://www.michaelmasumoto.com/htmlOnline/graphics/capitalA.gif" width="54" height="54" />
</a>

Incorrect Image Link Example Displayed:

Correct Image Link Example:

<a href="http://www.yahoo.com/"><img src="http://www.michaelmasumoto.com/htmlOnline/graphics/capitalA.gif" width="54" height="54" /></a>

Correct Image Link Example Displayed:

NB: Do NOT put carriage returns inside the brackets (< >) of your tag; the code for one tag must all be on a single line (the soft wrap that occurs in text while you're typing doesn't count as a carriage return, of course; only carriage returns that you actually type yourself count). Although carriage returns within tag brackets will eventually be supported, it is not fully supported on all versions of web browsers still in use by the public.

Currently Incorrect (Works in Newest Browsers Only):

<img
    src="http://www.michaelmasumoto.com/htmlOnline/graphics/capitalA.gif"
    width="54"
    height="54"
/>

Correct:

<img src="http://www.michaelmasumoto.com/htmlOnline/graphics/capitalA.gif" width="54" height="54" />

Main Menu