SmartGirl
Newsletter Resources Search Site Map Contact
Speak Out Express Yourself Spread the Word Issues
Bookmark and Share
Home > Express Yourself > HTML Tutorial > 7. Show it to the world
    HTML Tutorial  
   

Steps
  1. Overview
  2. About the Internet
  3. Hello, HTML
  4. Make it pretty
  5. Adding pictures
  6. Fancy layouts
  7. Show it to the world
    1. View your page
    2. Add pictures
    3. Create another page
    4. Put it on a server
    5. Be a super SmartGirl
Step 7. Show it to the world

Add pictures

Next, we're going to add the picture below to your web page:

  1. Using your mouse, right-click (or command-click if you're on a Mac) on the picture and choose to Save Picture As. (As with HTML file names, don't use spaces or special characters in the name.) Make sure you save the picture in the same folder as your mypage.html file.
  2. With mypage.html open in your text editor, add an image tag for the picture that you just saved. The value of the src attribute will be the name you gave the picture file when you saved it just now. For example, if you saved the file with the name "elephants.jpg", the tag should look like this: <img src="elephants.jpg">
  3. Save mypage.html
  4. Return to the browser window that has mypage.html open in it.
  5. Click on your browser's Refresh button.* Your web page should now look something like what appears in the HTML Playground.

elephants

Your web page now has a picture in it! You can add other pictures to your page in the same way by looking around the web, saving the image, and then adding an image tag for each of them.

*FYI: Whenever you make changes to your HTML code and want to see how it will display in the browser, first save the changes in your text editor and then click on your browser's Refresh button to update the file.

 
Previous Next


HTML Playground
Your Code


The Results

 
   
    SecretBuilders Crush Barometer Fortune Teller Smart Scope Dream Dictionary Mash Quiz