If you have a Facebook account, click here to continue logging in.


If you don't have a Facebook account, click here to log in with your Neopets information.

Lesson 5 - Adding Pictures
Pictures can brighten up a webpage and they are a great way to show others your work. If you have created a picture that you want to use on your site you need to save it somewhere on the Web. Once you know where you image is stored, it is very easy to add an image to your website. You can use any images already on the Neopets site or an image that is somewhere else on the Web.

Once you know where your images are saved, you are ready to write the code. The code to insert a picture is made up of three things:

  1. <img src = " (This command tells the computer to look for an image.)
  2. http://www.neopets.com/mypicture.gif (This tells the computer where to find your picture.)
  3. "> closes the tag
When you put the code together it looks like this:
<img src="http://www.neopets.com/mypicture.gif">
The image tag is special because you don't have to end it. Now, when you look at your webpage, you should see your picture.

There are several other things you can add into the code to make the image look better, including the border tag. Using this tag, you can choose what thickness of border (if any) youd like around your image. Some basic borders are:

  • Border="0" no border
  • Border="1" thin border
  • Border="2" thicker border

You simply type in border="2" inside the tag after you have typed the location of your image, like so:
<img src="http://www.neopets.com/mypicture.gif" border="2">

Your picture will now be displayed with a thick border around it.

For details on how to arrange your image on your page and how to add background images, go to the next lesson...

Go to Previous Lesson Go to Next Lesson