DIVs as containers

What?

So far you may not have understood why you were doing everything but you should not be worried.  You may not understand div elements even after doing this task but don't panic as you will understand them soon.  They are not much use until you know CSS.

They are just containers.  Later you will do clever things with them but for now they will be just invisible boxes used to group things together.  Here you will use them to put images in so that they do not appear on one line across the page.  Later you will use CSS to manipulate the appearance of those containers.

Create

You have three images on three lines (the lines which start <img src=).  On the line with the first image add <div> at the start and </div> at the end.  You are putting the image into a container and it will then look like this:

<div><img src="charlene.jpg" alt="A photo of Charlene"></div>

Do the same with the other two images.

Save and view and the images should now be on separate lines but nothing else should change.

IDs

Sometimes you will want to do things to individual things on a page.  Maybe change their colour or size which you will do later.  To change one thing it needs to be given a unique name (an ID).  This is done in the opening tag.  Again this will not change anything on your page but you need it for later.

In the first <div> tag add id="charlene" so it now looks like this:

<div id="charlene">

Do the same with the others but use different IDs (jonas and jonas2 instead of charlene).  You do not need to use the same ID as the file name but in this example it makes the IDs easier to remember.

IDs go in the opening tag never the closing tag.  They are just names to identify things.  We now have three div elements with unique names.  You have now finished creating the HTML.  Remember it will all be explained later as this is just to give you some experience of it before you do it for real.  If you understood it all already you may have found your future career!  If not don't worry that just makes you normal.

Click the right arrow at the top of this task and you will see the first task about CSS.  If you need a break this is a good time.