PC Help Jansant - HTML Guide - Beginners

Main Menu

Home Page
Computer Guides
Computer Dictionary
Network Setup
Tips and Tricks
Internet Guide
Freeware/Shareware
PC Upgrade Guide
PC Maintenance
Support Forum
HTML Guide

Adding images and links to your page - HTML basics

Your web-site visitors will need a way of moving from page to page, this is done with links. Links can be images or text, can open in a new windows or move your visitors to the next page in the same window. They can point to a page within your site or any page on the internet. Images that load in your page can be an image on your web-site or normally any image on the Internet. I say normally because some web-masters set their web-server to disallow their images loading in foreign pages.

Add an image to your page

To load an image in your page you must tell the browser two things, that an image is to be displayed, and the location of that image. Start by placing an image in the same folder as your practice pages are located, the image must have the .jpg, .gif, or .png extension. If you like you may save the following image to your local folder.

a photo of a chimp

To place the image above in your page you will use the following code. If you use another image just substitute the name of the file in the example for the name of your file.

<img src="chimp.jpg">

You may also tell the browser exactly what size to display this image. The size I have used in the example is the actual size of the image, but you can specify any size you wish.

<img src="chimp.jpg" width="235" height="300">

For vision impared people and browsers that don't display images, you can also include a description explaining what the image is. This description will be viewed if the image does not load, or in some browsers by holding the mouse over the image after loading, adding alt is used to do this.

<img src="chimp.jpg" width="235" height="300" alt="a photo of a chimp">

Notice the html tag used for placing images in your page does not have an end tag. As mentioned in the previous lesson, most but not all HTML tags have a beginning and a end tag. Another tag that has no end tag is the line break tag .

Adding a link to text and images

You need to provide a simple method for your web-site visitors to navigate through your pages. You should provide a simple navigation menu to the main sections of your web-site on all your pages. Within these sections you should also provide a method for visitors to quickly find pages in that section. How you do that is up to you, but whatever design you choose, you will use links. In this example I will create both an image and text link pointing to the same document.

First the image link.

<a href="example3.html"><img src="chimp.jpg" width="235" height="300" alt="a photo of a chimp"></a>

Notice I simply took the code used to display an image and placed it within the HTML tag used to link to another document. You will also notice the file you will link to is specified in this tag. Again because the file is located in the same folder/directory only the file name is required, not the path to the file. Now when you click on the image you will be taken to the page example3.html.

Creating a text link is very similar.

<a href="example3.html">use this link to go to the next page</a>

Again I simply used the link tag and placed the plain text within it. The paragraph tag is used 1st so it's end tag must be used last. I used the link tag 2nd so its end tag must be used 2nd last. The plain text simple goes between both these tags.

You could also create your tag doing the following so only the words this link actually link to the document. I have also added a little extra in the code which tells the web browser to open the document in a new window. You can do exactly the same with image links also.

use <a href="example3.html" target="_blank">this link</a> to go to the next page

So to bring all this together, create a file using the same method in the first lesson and type the following code. Then save this file with the name example2.html and be sure to save the image you use in the same folder as this file. In this example I have also used the line break tag after placing the image.

<html>
<head>
<title>adding images and links</title>
</head>
<body>
<a href="example3.html"><img src="chimp.jpg" width="235" height="300" alt="a photo of a chimp"></a> 
<a href="example3.html">use this link to go to the next page</a>
use <a href="example3.html" target="_blank">this link</a> to go to the next page
</body>
</html>

Next create a new file using the following code and save this file as example3.html in the same folder again.

<html>
<head>
<title>testing example2 page</title>
</head>
<body>
use <a href="example2.html">this link</a> to return to the previous page.
</body>
</html>

If all is fine your pages will look and work like this.

Back - Next
HTML Guide Index

Web-Site Administrators Local Time

feedback - terms of use - contact - sitemap - advertise - webmasters