HTML Lesson 4 : Linking Through Images

Adding a link through an image is a great way to lead others to different web pages.

Today I am going to be showing you how to create a link through an image. Below you will find an example.

<a href="http://www.google.com"><img src="http://messiahmom.files.wordpress.com/2011/01/awkward-turtle.jpg" alt="Awkward Turtle" width="42" height="42"></a>

This will diplay an image of an ‘Awkward Turtle’ that is linked to Google. Clicking the ‘Turtle’ opens the page specified in the ‘href’ part of the tag. In this case Google.

Now let’s add this tag to our code from Lesson 3. 

<!DOCTYPE html>
<html>
<head>
<title>
Techno Girl
</title>
</head>
<body>
<This is how you start a paragraph>
<p>
<a href=”http://www.google.com" target=”blank”>Click here for all life’s answers</a>
<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg">
<a href="http://www.google.com"><img src="http://messiahmom.files.wordpress.com/2011/01/awkward-turtle.jpg" alt="Awkward Turtle" width="42" height="42"></a>
</body>
</html>

Advertisements

One thought on “HTML Lesson 4 : Linking Through Images

Comments are closed.