Pictures

Insert a picture

  1. Go on the internet and find a picture. Make sure it is good quality.
    • Taller/Square pictures should be at least 300 pixels width.
    • Wider pictures should be at least 400 pixels width
  2. Save the picture to your webpage folder, not "Pictures" or "Downloads"! 
  3. Rename it to something that makes sense for your topic, 1-2 words, no symbols ("$" or "#")
  4. In your code, add the IMG tag with the src attribute after your page heading (H1) somewhere on its own line:
    • before a paragraph starts (before the opening P)
    • before a list starts (before the opening UL or the first LI of the list)
    • after a paragraph (after the closing P)
    • after a list (after the closing UL)

Make sure it shows up. Then tweak it to fit what's on your page.

Don't delete closing bracket!

Watch out - don't delete the closing bracket for the IMG tag or other stuff on your page won't work properly anymore! You can see this has happened if the next tag is red instead of blue.

Just add the bracket back in and everything will be fine.

When you've added all your pictures, clean up your folder and resize any pictures as needed...

Picture Types

Most of your photos will the JPGs. If your photo doesn't show up on the page, check the file type in your folder. The extensions are as follows:

  • JPG
  • GIF
  • PNG
  • BMP

In your webpage folder, change View to "Details"...

Then you'll see if your pictures are not JPGs, what they are in the file type column...

Other types of pictures

Try to add at least one animated GIF. Save it with "anim" at the end of the name.


Try to find one picture with a transparent background. Save it with "transp" at the end of the name. The file type should be PNG. Any transparent pictures you have should have no border!