Sunday, 12 August 2012

HTML lesson #3 - 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. If you don't see the popup don't worry, some browsers don't respond that fast. Also if the above picture were to for some reason not fully load on your browser it should show "Picture not available".
What is important is that you know what the <alt> tags are for and how to use them.

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:
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

Not recommended but some people learn better this way so 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 try it right now in your web browser, to view this page's source code. It's a bit more complex compared to what you've learnt so far, so don't scratch your head, if you don't understand anything. Bottom line is, you can always copy and paste source code (depending on how its licensed) if you like but it's better if you do your own coding so that you are actually learning something.