How Do I Turn a Link Into an Image?

By Kristen Waters

Embed an image on your website
i pc monitor image by Jorge Casais from Fotolia.com

Images can improve the appearance of a web page by breaking up the text and adding visual interest. The images that are visible on a web page are actually links to either an internal or remote image. In other words, the images are another file, either on the same server as the web page or a remote server. In order to place an image inside a web page you must tell the browser where to look for the image. This information is placed in the "" tag with the "src" attribute.

Creating the Image

If your image is held on the web server that hosts your web page, you can just place the name of the image in the tag like: However, if your image is located on a remote server, you must place a link to the image in the tag like:

Whether you use a local or remote image, there are some attributes that you can use to align your image on the page. The "align" attribute is used to align the image horizontally. The values can be "right," "left" or center. For example, to place a remote image on the right side of the page, the HTML code would be:

The"valign" attribute is used to align the image vertically on the screen. The values can be "top," "bottom" and "center." To align the above example on the top right side of the screen, the code would be:

Another attribute is the "alt" attribute. This is used to place text where the image should be if the visitor is using a text based web browser, or if the link to the image is broken. The "alt" attribute is used in the following manner: remote image

Finally, you can make your image become a hyperlink by adding the "" tag. This allows visitors to click on the image to be taken to a remote page or to the photo itself. The HTML code to create an image with a hyperlink is: remote image

×