ADDING A BUTTON

GENERAL INFORMATION

Using buttons for your site’s navigation gives a nice graphical interface on your webpage. One should note that button links are actual button images that are made as links.

STEP 1 – CREATE BUTTON

Create a button. You can do this in a graphic editor such as Photoshop or on a button generating website.

Save the button image in your website folder.

STEP 2 – ADD BUTTON TO WEBPAGE

The tag to add the image "button.png" to a website is:

<img src="button.png">

Of course, replace button.png by the actual name of your file. This file has to be in the same folder as you webpage.

STEP 3 – MAKE THE IMAGE A LINK

Remember that the tag to make a link to another page is:

<a href="otherPage.html">TEXT</a>

To have an image be a link, we simply place the image tag in between the opening and closing <a> tags. The result is:

<a href="otherPage.html"><img src="button.png"></a>

COMMON ERRORS

· Image doesn’t show – The file was renamed to a different file extension.

· Image doesn’t show – The file was saved to a different folder. It needs to be in the same place as your webpage.

· Link doesn’t work – The img tag is not in between the <a> tag and the </a> tag.

· Link doesn’t work – The link needs to have the http:// for links to websites.

EXAMPLE

In the example below, we will use this image to make a button link to the website Google.

Click here to see the example. Use View Source to see the code.