HTML Guide

Lesson 3: Attributes, Links and Images

Yet again, open up your page in Notepad or whichever text editor if it isn't already open. This time I won't specifically tell you to do anything; just experiment with the information that this page contains on your own and try out the new tags.

In order to make a link to another page within your site, you use the a element and point it to the link's location. More specifically, you will have to use attributes. An attribute is added inside the opening tag, and is in the format attribute="value". A tag can have more than one attribute. In order to make an a element link to something, you will need to use the href attribute. When linking to another document within your own site, the value will only need to be the filename, either of another page or another type of file such as an image:

<a href="filename.htm">Link text</a>

Admittedly, when your site is in many directories, things get trickier. Assuming that this page is located at, say, /website/files/site.htm, a link like that would link to filename.htm in the /files directory. If you wanted to link to image.gif located in the root directory that /website is contained in, you would use /image.gif as the value of the href attribute since that refers to the root directory. If it were located simply under /website, you would use ../image.gif, which backs by one folder; if it were located under /website/images you would use ../images/image.gif; and if it were located under /website/files/images, you would use images/image.gif. Basically, a slash before it refers to the root directory; two periods refer to the directory that the current directory is contained within. Then you type the rest of the path to the file.

But what if you want to link to another website entirely? Then yet another value for the href attribute is required. You must put the entire URL of the page you're linking to, including http://, etc., as the value. For example, if linking to this page, you would use this:

<a href="http://www.dragonflycave.com/html3.aspx">The Cave of Dragonflies HTML Guide: Part 3</a>

What if you want to link to another part of the same page, like what I do in some of my longer sections? You put #identifier as the link href (of course, the identifier can be whatever you want), and then add an id attribute with the identifier as the value - without the #, though - to the place on the page that you want it to link to. So if I made a page with this:

<p><a href="#anchor">Link text</a></p>

and then had a line with this somewhere else in the document:

<h2 id="anchor">Anchor</h2>

then clicking the link would scroll down or up to the anchor.

What about inserting images? For that, you will use an img element with the src attribute. As the value of src, you will put the image's filename like you would if you were linking to it. The img element has no closing tag, so it's just the opening one. Keep in mind, too, that if you display an image directly from another website by using their full URL as the src, you are stealing bandwidth from that website; only use it if you've made sure that you're allowed to direct link from the site.

However, the img element has a required attribute which is alt. That is the alternate text displayed if the user's browser cannot display images. If the image contains words, you should put those words as the value of the alt attribute; if it's purely decorational or something, it's okay to make it empty (alt=""). If the image contains, say, a Bulbasaur or something else simple, you can put "Bulbasaur" as the value of the alt attribute. An example image code could be something like this:

<img src="bulbasaur.gif" alt="Bulbasaur">

In Internet Explorer, this will also cause a little yellow box saying "Bulbasaur" to appear if you hover over the Bulbasaur image. However, the alt attribute is not meant for that, and it will not work in other browsers. Instead, in order to get this effect in all browsers, use the title attribute. If you guessed that you do that by typing title="The text you want" within the opening tag, you were right. This will also work for links, or in fact any element. For example:

<a href="http://www.dragonflycave.com" title="A big website owned by a crazy person.">The Cave of Dragonflies</a>

You can put both an alt attribute and a title attribute, by the way. In Internet Explorer it will only display the alt text on hover if there is no title attribute; basically, make sure you put the alternate text in alt, not what you want to appear on hover.

Also, nothing is stopping you from simply putting an image instead of link text; both a and img are essentially inline elements, though for images it's a bit more complicated. (Incidentally, this also means they must be contained within block-level elements, so put them inside some p elements if you haven't already.) After putting some of this onto our testing page, it looks like this.

Previous lesson - Next lesson

Page last modified August 12 2016 at 22:34 GMT