Booklet

HTML

HTML is the code we use to put things on the pages of our booklet.

What sort of things can we put on a page?

Words
Pictures
Drawings
Animations
Video clips
Audio clips

Each of these things is put on the page by using html code.

The Code for the Previous Page

                        
<h2>html</h2>
<p>HTML is the code we use to put things on the pages of our booklet.</p>
<p>What sort of things can we put on a page?</p>
<ul>
    <li>Words</li>
    <li>Pictures</li>
    <li>Drawings</li>
    <li>Animations</li>
    <li>Video clips</li>
    <li>Audio clips</li>
</ul>
 <p>Each of these things is put on the page by using html code.</p>

Images

So far you have learnt how to add:

Headings using <h2>
Paragraphs of text using <p>
Lists using <ul> and <li>

Now we are going to learn how to add a picture. Pictures are sometimes called 'images'.

Pictures are not really part of the page, they only look like they are!

What really happens is that the picture is a separate file.

You tell the computer to include it in the page like this:

<img class="picture" src="images/boy.png">

The result is that the picture is shown on your web page:

Did you notice that the list on the previous page was numbered?
This is done using <ol> instead of <ul>
When a list is numbered it is called an ordered list.
When a list isn't numbered it is called an unordered list.

The 'img' tag is just a short form of 'image'.
It has a 'class' so that we can control what it looks like.
We will learn how to do this soon.

The picture is in a folder on the computer called 'images'.
To tell the computer where it is we type the folder name, then a '/', then the name of the file.
This is the 'source' of the picture. The word 'source' is shortened to 'src'

So now you understand how to put pictures on your page. Your code will look like this:

<img class="picture" src="images/[Put the name of the picture here]">

There are more pictures available for you to put on your web page.