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>

HTML Lesson 3 : Adding Images

Adding an image to your website gives it colour and versatility.

Today I am going to be showing you how to put an image on your website. Below you will see an example of an image tag.

<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg">

In another example we can specify the hieght and width of the image.

<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg" height="42" width="42">

Now let’s add a image to our code from Lesson 2.

<!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">
</body>
</html>