Website design & development

Links & Buttons

We Will now place links in the second collumn of your second table. There are a few types of links that are used for various purposes, but we will just use two of them her. We will make links to additional pages that you will create on your own, and we will create a link to a different site.

To links to different pages on your site you have a few option. The easiest of these are to just use simple html links. Click between the opening and closing tabs of your second collumn, in your second table and press enter. Now type the following:
<p> <a href="index.html">Home</a> </p>

Now, save and close everything. Open your root folder, right click on mysite.html and rename it to index.html
The landing page of your website should always be called "index".

Right click on these images and save them into your root folder. Save them as "contact.jpg" - "price.jpg" and "price1.jpg" if it doesnt do that automatically.

Open your index.html in notepad again. Go to your last entry, and below that, add the following:

Lets look at what you have done. The complete piece of coding is within your link. Compare the coding with the previous entry and you will notice we have replaced the word "Home" between the opening and closing tags of the link with and image. We said which image we wanted and how we want that image to react on mouse over and on mouse out. You will also notice a double opacity instruction. One to say 0.6 and the next says 60. 0.6 tells google chrome, firefox and similiar browser that you want the opacity at 0.6 of 1.0. The 60 tell IE he same thing, but in a slightly different language.

Directly below that, put the following code in
<p> <a href="price.html"> <img border="0" id='button930' src="price.jpg" onmouseover = 'document.getElementById("button930").src = "price1.jpg"' onmouseout = 'document.getElementById("button930").src = "price.jpg"' ></a> </p>

Now save this and open the html document in your browser and see how the different buttons react when you put your mouse over it. You can deside which one you want and then change the others to work the same way. But first, lets go to step 7 and make it all look a bit better.