11/7/09 – Inserting Images and Links in an HTML Document

If you have a website you might want to make links you can click on and insert images instead of plain text. Below is how to insert a link.

<a href=”http://www.linkurl.com”>Link Text Here</a>

If you notice it started with <a and ended with </a> that is showing that it started and ended. the href=”  is telling the computer it is the url and it is starting. After the url is a “> that is telling the computer it is done with the link’s url and is starting what the link will be called. That is pretty simple you replace the url with whatever url you want and replace the text with what you want the link to be called on the website. Below is how to insert an image.

<img src=”http://www.imageurl.com”/>

That is how to insert an image without adding some more information and is not the best way to insert images below is hot to use the alt attribute.

<a href=”http://www.imageurl.com” alt=”Image”/>

The alt attribute is used if the image does not appear on the website it will have the text instead. This is a good thing to get used to doing. There is even more you can add to the image. Below is how to tell the computer the image dimensions.

<a href=”http://www.imageurl.com” alt=”Image” width=”100″ height=”100″ />

This is another good thing to do because The internet browser will already know where the image is going to be and how big it is. If you don’t then the text might move when someone is reading it because an image just loaded.

<a href=”http://www.yourdomain.com”><img src=”http://imageurl.com” width=”100″ height=”100″ alt=”Image” /></a>

That is how you make an image link to another website if you click on it. Below is how to make a border around the image.

<a href=”http://www.yourdomain.com”><img src=”http://imageurl.com” width=”100″ height=”100″ border=”10″ alt=”Image” /></a>

That makes a border of 10 pixels around the image. Below is how to make a link and an image link that opens in a different tab or window when they click on it.

<a href=”http://www.yourdomain.com” target=”_blank”><img src=”http://imageurl.com” width=”100″ height=”100″ border=”10″ alt=”Image” /></a>

<a href=”http://www.yourdomain.com” target=”_blank”>Link Text Here</a>

The top one is how to make an image link open in a new tab and the bottom one is how to do that with a link.