How To Make an Image Link Using HTML

Since a web page that contains only text is quite boring, images are added to attract visitors to the site as well as make it easy for them to move in and between web pages.  Image links are a must in any well made website.  This type of link is clearly visible and will give your website the professional touch it needs.  For instance, if you have a logo that appears on every page of your site, this can be linked to the homepage.  Visitors and site users can simply click on the logo to go back to the homepage in an instant.

Understanding the Basic Code

The basic code or format for linking your image using HTML is as follows:

<a href="URL" title="YOUR LINK TITLE"><img src="YOUR PICTURE" alt="BRIEF DESCRIPTION" /></a>

URL - In the above format, URL stands for the address of the web page that you want the visitor to be moved if the image link is clicked. This starts with http://.

YOUR LINK TITLE. This is not required for the image link to work.  However, you can display any text when the visitor moves the cursor on the link.  It is usually a text description of the link the visitor will be moved to.

YOUR PICTURE. The image you are using has its' own file name or web address.  This is where you put the exact filename or the image address.  If you use an image hosting service (where you store you images online) you will be given a direct link address where the image is stored when you upload an image.  This direct link address begins with http://.   Photobucket and Image Shack are two of the free image hosting services on the web.

BRIEF DESCRIPTION. For visitors who cannot see images with their browsers, you can include an alternate image text description.  This is also a way of allowing search engines to get information about the image.

Creating the Image Link

To create the image link:

  1. Open your web page editing site.  Some use Adobe Dreamweaver while others stick to Notepad or even MS Word.
  2. Open the HTML file where you want the image link to appear.
  3. Type the link code in the format above into the HTML document.
  4. Replace URL with the internet address that the image should move to when the visitor clicks on the image.
  5. Optional, replace YOUR LINK TITLE with the text description for the image's link.
  6. Replace YOUR PICTURE with the file name of the image or the direct link address provided by the image hosting service where the image came from.
  7. Replace BRIEF DESCRIPTION with a text description for the graphic or picture.
  8. Save the HTML document.
  9. Upload the HTML document to your web server to test the link.

Adding graphics and pictures to your web page makes it more interesting and easy for visitors to use.  By turning an image into a link, your visitors can easily move from the current web page to another linked site.  The format is simple to write and you can even add an optional description for visitors who are incapable of viewing images in their browser.  


Share this article!

Follow us!

Find more helpful articles: