Some cookies are necessary to make this site and our content available to you. Other Cookies enable us to analyse and measure audience and traffic to the site. Cookies are also used by us, advertisers, ad-tech providers and others to develop and serve ads that are more relevant to your interests. To consent to the use of Cookies and proceed to the site, click Accept below. If you wish to withdraw consent later you will find a link in the footer Cookie Choices. For more information: Privacy Policy.

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) you’d 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