How to add and size an image, put a border around it, and make it a link!

I made this tutorial because we were assigned to research something about HTML & CSS that we didn’t know how to do. So, in this we lesson we are going to learn how to add an image, size it, put a border on it, and also make the image a link.

For this tutorial you will need the following items: a text editor program, a web connection and a photo that you would like to put on your webpage.

Step 1:

Set up a simple html document complete with head and body tags. You can add a paragraph if you want.

Below shows text edit and browser shots of what it should look like.

Step 2:

Lets add an image. Use the image tag to add a picture to the body of your webpage.

Like this:

Step 3:

Size the image and put a border around it using the attribute tags width, height and border. It should look like this:

Step 4:

Now make the image a link by adding the href attribute tag to the picture. In order to do this correctly, you must place the opening tag before the picture and put the closing tag after the picture.

Step 5:

Now you can see that clicking the picture linked us to another page.

To see some working examples of the things you just learned visit:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage

This is all for our tutorial on pictures. You now know how to add pictures, size them, put borders around them and turn the pictures into links. Good luck building your own websites.

If you have questions about this tutorial send an email to: daviche8@yahoo.com