Adding Images

Given that most people think the same way you do, if you find web sites without images BORING, so will others. If a site doesn't catch your attention, you aren't going to read it. If no one is going to read your site, then why build it? That said, let's learn how to use the <img> to add interest to a web page.

silver BMW

Practice Session

  1. Google your favorite car (bookmark the page so that you can come back to it)
  2. Right-click on the image, click "save image as"
  3. Save as "nameofcar.jpg" into your web page folder
  4. Go to Start > Programs > Microsoft Office Tools > Microsoft Photo Editor
  5. Go to the file menu, and open up your folder with your car picture in it
  6. Go to Image>Resize, and change only one of the dimensions (width or height)
  7. I changed the width to 270 pixels. You will have to play around with the size until you get it the way you want it. Make sure you change inches to pixels so that the width amounts match.
  8. Save the image and close out of Photo Editor
  9. Open a new file in Notepad, and key in your basic html format
  10. Title the page as "My Dream Car"
  11. <h2> should be the name of your car
  12. After the body tag, key in <img src="nameofcar.jpg" alt="description of car" width="270"/>
  13. Add the following code if you want to add a caption to your image: <caption> text</caption>
  14. Save your work, then open it up in the browser