Now that we know how to create links as we saw in the previous exercise Creating Web Links let's go ahead and add an image. In this example I will be using the image below. Feel free to use this one as well by right clicking the image and saving it to your "images" folder.
When linking to other website pages or images within the same website links can be relevative (ex. images/picture.jpg). If you are linking to an external image or website address links must be absolute (ex. http://howtoawebsite/images/picture.jpg).
To embed an image of your own into your website here is the code:
Here is another example. This is for embedding an external image link:
With everything added here is our final result:
<html>
<head>
<title>Make up a title here</title>
</head>
<body>
This is my first test
<a href="http://howtoawebsite.com">How To a Website</a>
<img src="images/howtoawebsite.jpg" />
</body>
</html>
You might be wondering why all the text, link, and images are all on a single line, that is because we need to add break tags <br>. Break tags move the item to the next line. Unlike other html tags the break tag does not need to be closed </br> with a bracket.
If you add the <br> tags after each line here is what you will see:
<html>
<head>
<title>Make up a title here</title>
</head>
<body>
This is my first test<br>
<a href="http://howtoawebsite.com">How To a Website</a><br>
<img src="images/howtoawebsite.jpg" /><br>
</body>
</html>
Still having trouble? Download the exercise files here and follow along
SBI (Site Build It) | Build Quality Sites With Simple Tools
Godaddy | Buy a Domain Name
My Top 3 Website Hosting Companies
Host Gator | Affordable Website Hosting
Blue Host | Website Hosting
Fat Cow | Eco Friendly Hosting