SmartGirl
Newsletter Resources Search Site Map Contact
Speak Out Express Yourself Spread the Word Issues
Bookmark and Share
Home > Express Yourself > HTML Tutorial > 5. Adding pictures
    HTML Tutorial  
   

Steps
  1. Overview
  2. About the Internet
  3. Hello, HTML
  4. Make it pretty
  5. Adding pictures
    1. Changing the size
    2. Pictures + text
  6. Fancy layouts
  7. Show it to the world
Step 5. Adding pictures

Colors aren't everything when it comes to making a website attractive. Adding your own custom graphics or pictures are a great way to make your page more interesting and personal. It only takes one tag to make a picture appear and it looks like this:

<img src="images/seal.jpg">

The src part of the image tag tells the browser where to find the picture file. In the example above, the tag tells the browser to look in the "images" folder for a file named "seal.jpg". Try adding the same tag to the HTML document in the HTML Playground. Make sure that it goes somewhere between the <body> and </body> tags.

You don't have to use the seal picture, however. We have a lot of other animal pictures that you can use instead. Just replace the "seal.jpg" part with the file name listed next to one of the pictures here. Later, we'll show you to save a picture from any website and put it on your page.

 
Previous   Next


HTML Playground
Your Code


The Results

 
   
    SecretBuilders Crush Barometer Fortune Teller Smart Scope Dream Dictionary Mash Quiz