How to Link an Image to a Web Page in HTML

Save

HTML hyperlinks enable redirection to another HTML document within or outside your site when the user clicks it. Using image to house the links provides your website visitors with an appealing and user-friendly means of navigating your site. The HTML "<a>" tag is the basis of a link. Use this tag along with an image of your choice to create your image link.

  • Launch your HTML or text editor and create a new document or load an existing HTML file.

  • Type the HTML code for your image using the "<img>" tag. Include the location of your image in the "src" attribute. For example, "<img src="custombtn.gif">" inserts your image in the page.

  • Surround your image code with the "<a>" link tag to create a hyperlink. Insert the destination for the link within the "href" attribute. For example, <a href="myproducts.htm"><img src="custombtn.gif"></a>

  • Type "target="_blank"" (leave off the outer quotation marks) into the "<a>" tag if you are directing your user to a page outside your site. This causes the page to open in another window, leaving your site accessible. For example:

    <a href="myproducts.htm" target="_blank"><img src="custombtn.gif" /></a>

Tips & Warnings

  • If you are linking to a URL, include "http://" before the rest of the address. For example: <a href="http://www.[website].com/AboutUs.htm" target="_blank"><img src="custombtn.gif" /></a>
  • Photo Credit Dynamic Graphics/Dynamic Graphics Group/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!