HTML Tutorial - Combining Links and Images

Combining Links and Images

Many times you may want to have an image that is linked, so that if someone clicks the image, the person will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREF tags. (<a href="location_of_link"><img src="location_of_image"></a>).

Click on the image to go to the Winona State Athletics page.

**Putting together everything we have learned so far, you could produce an HTML document that looks like this:

<html>

    <body>
    <h2>My First Web Page</h2>
    <hr>
    <h4>Headings are fun!</h4>
    <font size="+3"><b>This is big and bold!</b></font><br>
    <font size="-1"><i>This is small and italic!</i></font><br>
    <font face="verdana">Here is verdana font.</font><p>
    <div align="center"><font size="+2" face="arial" color="purple">Big, purple, and arial font. And now it's centered.</font></div><p>
    <img src="http://www.winona.edu/warrior_head.gif" alt="WSU Warrior Head"><p>
    <a href="http://www.winona.edu/athletics">Go to Warrior Athletics</a><p>

</body>

</html>

To view this web page, click here.

<---Back to Images On to Unordered Lists--->