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="https://www.dragonflycave.com/html-guide/lesson-3">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, though it can't have spaces or special characters and can't start with a number), 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 old versions of Internet Explorer, this would also cause a little yellow box saying "Bulbasaur" to appear if you hovered over the Bulbasaur image. However, the alt attribute is not meant for that, and it would 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 about Pokémon.">The Cave of Dragonflies</a>

You can include both an alt attribute and a title attribute on an image if you like. In old versions of Internet Explorer it will only display the alt text on hover if there is no title attribute, so using title for the hover text is always a safe bet.

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.)

One more note: Now that we have learned about attributes, there are actually a couple of particular things you should add to your page. The first is a lang attribute on the html element, which tells you what language the page is in - if it's in English, for example, you'll want your html opening tag to look like <html lang="en">. (For other languages, you can probably find the appropriate value to use for the lang attribute here.) If certain parts of the page are in a different language, you can also put a lang attribute on any other element, such as a p!

The second thing you should add is, at the top of your head element, <meta charset="utf-8"> (the meta tag has no closing tag). When you save your file, you should then make sure to save it with the UTF-8 encoding - many or most programs these days will do that by default, but if you're using something like Notepad, you should make sure if you go into Save As... that the "Encoding" drop-down is set to UTF-8. The character encoding is essentially how the computer represents what you wrote into the file as zeroes and ones - UTF-8 is the best character encoding to use, and you should essentially always try to make sure you're using that. The charset attribute on the meta tag tells the user's browser that your page is UTF-8-encoded - otherwise, it would be possible that special characters such as the é in Pokémon wouldn't display correctly on your page for every user!

After implementing everything talked about above onto our testing page, it looks like this.

Previous lesson - Next lesson

Page last modified April 11 2023 at 23:29 UTC

Comments

No comments on this page as of yet.

Post comment

Name

E-mail

Website address

Website name

Comments

Please type the name of the above Pokémon into this box: Fun fact: The above sprite has a 1/8192 chance of being shiny. Feel free to brag if you get one.