Images Worksheet

Web template

• Download the template folder• Unzip and save in your documents• Rename the folder to “images work”

without quotes

Set up your page

• Open the index.html page• Change the page title to Image Work• Inside your body tags– Add a heading (h1) Animals– Directly below add a second heading (h2)

Cats

• Should look like this:

Save Image

• Open Internet Explorer• Go to Google Images and search for “cat”• Once you’ve found a picture you like right

click and select “save as”• Ensure you save the image inside the

“images work” folder, and inside the “images” folder.

• Rename the file “cat” and make a note of the extension (whether it’s a .png .jpg or .jpeg)

Insert Image• Go back to your webpage code• Below your cats heading add a <p> and

</p> Inside the p tags, add–<img src=“images/cat.png” alt=“cat

picture” height=“200px” width=“200px” >– Change the src= to go to your cat picture

Your HTML should look like….

View your page

• Save your page• Have a look at it in Internet Explorer • Should look something like this:

Task

• Add a second heading for any other animal you want e.g. Lions, Dogs, Snakes etc.

• Add 3 relevant images to your new section

• Make sure they are all:– saved in your images folder– a reasonable size– have alt text