Make a Picture Link in HTML
Ever want to add a link to an HTML document, but wanted to show the reader an image instead of text? Most HTML coders know, and so can you, after you've read and followed the directions in this article.
Steps
- Open a text editing program such as Notepad or WordPad on Windows, or, on a Mac open up TextEdit, or Dreamweaver on either platform.
- Type all preceding HTML text that you want before the photo-based link.
- Type the photo-based link opening tag (known by it's more sophisticated name as an "anchor" element-hence the "a"), <a href=".
- Type the link you want the viewer to see (including the http://)
- Follow the that portion of the text off with another quotation mark (") and triangular bracket (>).
- Type the image, in HTML form, of the picture you'd like to use. Use the form <img src="imagefilenamehere.gif">.
- Close the photo-based link with a link-closing HTML tag. Type the photo-based link closing tag, </a>.
- Type the proceeding HTML text that you want for the remainder of the document.
Tips
- To ensure the reader of the code understands what the object is that denotes that the picture will create the link. Ensure that both the <a> and <img> and </a> HTML tags are placed on one the same line
