Create Graphic Links In HTML

In this lesson, we will learn about how to create graphic Links in HTML. Text and Graphic links are very important in a web page. In the last lesson, we covered text links. We will now learn how to create graphic links.

You don't have to use text as your link anchor. You can use images instead if you like: buttons, pictures, icons, bars, or anything else that can be saved as a .jpg, or a .gif.

Start by putting an image you like in a subdirectory on your site. Good HTML form requires that you put images in a separate directory from text, as well as separating movies and other items in the same way. It keeps your directories tidy and easy to use.

So find an image. Create a subdirectory on your host named "images", and save your image there. Remember its name.

Next, create a link in your sandbox page to another page:

<A HREF="mypage.html">

Add to this the call for the image:

<A HREF="mypage.html"><IMG src="images/graphic.jpg"></a>

Now when you preview the page, your image shows up and is clickable to the page you linked to.

Try this:

Using the page you created in the previous lesson with all the different links, try replacing some of your anchor text with images. Pretty easy, right?

But Wait, There's More!

You didn't think you'd get off that easily, right? There are other attributes you can use with your image. First, let's talk about the <IMG src=""></IMG> tag set. The IMG tells the browser that you are preparing to call an image. The "src" tells the browser where to get the image. This variable is treated exactly the same way as the "href" variable.

It's a good idea, with all of the different links you use, to use lower-case letters when naming. While most browsers are not case sensitive, some are, and it can cause a broken link or image not found on your web page - a very bad thing for viewers and also a bad mark for your page ranking in Google.

The other attributes you can use for images include height, width, alt, and border. The least important of these attributes is border; your browser defaults to no border, and most of the time that's what you want anyway.

It is wise to always include height and width for your image. There are several reasons for that, but the most important one to me is that if you include height and width, the viewer's browser will leave an image-shaped hole on a web page when rendering (translating) the page. Images are downloaded separately and after the rest of the page, and if they are large, they can take some time. Including height and width will prevent downloading delays.

Do NOT change your image size using height and width, but rather in your graphics editor. Shrinking an image to a thumbnail without changing its actual size does not save you any download time, and it will cost you bandwidth, which eventually can cost you money. Likewise, blowing an image up will only result in a poorly-resolved image.

The alt variable refers to alternate text, text that shows up if your image is not available. But this variable does two other things as well. First, if a visually-impaired person accesses your page, it tells him or her what the picture is supposed to be, which can be valuable information. Second, that alternate text helps your page to get listed properly in Google, and can get your images indexed in Google Images. This brings traffic to your website.

I recommend not messing with the border variable at all. You don't have to set it to have it not appear, and if you really want a border round your images you may be better off creating it in a graphical browser. But just in case you really want to see borders, the code below will also include a border setting. In most pages, that border will be a rather garish blue. It can be reset to a different color, but this requires using CSS, so we'll talk about that later.

<A href="mypage.html"><IMG src="images/graphic.jpg" height="10" width="10" alt="Click for teddy bear information" border="0"></a>

You'll notice the alt text does not reference the graphic, but rather references where the graphic is going. Again, this will help your page get listed better in Google.

Try This:

Do I have to say it? I thought not. Try all those variables out in the sandbox you were just working in. The border number refers to pixel width, so a border="10" is pretty wide.

After learning this lesson about how to create graphic Links in HTML, I am sure you would now have some proficiency in creating any type of links in HTML. In the next lesson, we will further explore posting images to your website.