Learn Programming

Learn HTML lesson 03 - Images and links

In this lesson we will learn about:
Putting images on your page
Links
Viewing other people's source code

Putting images on your page

To put an image on your page you must use the <IMG> tag. Notice that I say tag and not tags.

<img src="smile.jpg">

The result will be:

You can use the ALT property for when a picture doesn't show up:

<img src="nothing.jpg" alt="Picture not available">

Result:

Picture not available

Notice the yellow popup that appears after holding your mouse over it for a while. This popup will also appear if the picture is there.

Links

To put a link on your page you must use the <a> tags:

<a href="http://www.html.com">click here</a>

And this is what you'll get:

click here

This is how you make a linking image:

<a href="http://www.html.com"><img src="lrnhtml2.jpg"></a>

And you'll get:

Something you may have noticed is the blue border around the image. To get rid of the border you must do the following:

<a href="http://www.html.com"><img src="lrnhtml1.jpg" border="0"></a>

Viewing other people's source code

If you would like to take a look at the code of a website, all you have to do is click on the "View" menu and choose "Source" while viewing the website. You can steal their source code if you like but it's better if you do your own coding so that you are actually learning something.