1. Technology

How To Add an Image to Your Web Page

By

Images are an important part of Web pages. And you'll be surprised how easy it is to add an image. In fact, often the hardest part is uploading your image to the Web server and getting the correct URL for the image.

Difficulty: Average
Time Required: 5 minutes

Here's How:

  1. Upload your image to your Web server. Put it in the same directory as your Web page.
  2. Test that your image uploaded by browsing to it in your Web browser. When you've got the image uploaded, copy the URL into your clipboard.
  3. Open your Web page in your HTML editor and scroll to where you want the image.
    Remember that images must be inside the <body> tag.
  4. Place the image tag in your document:
    <img
  5. The first attribute is the source attribute, this is the image URL you copied in step 2:
    <img src="URL"
  6. The other required attribute is the alternate text:
    <img src="URL" alt="alternate text"
  7. Images also have attributes to define the width and height. They are not required for valid HTML, but are a good idea to include to keep your pages loading quickly:
    <img src="URL" alt="alternate text" width="width" height="height"
  8. Close your image tag. If you're writing XHTML, be sure to include the trailing slash:
    <img src="URL" alt="alternate text" width="width" height="height" />
  9. Upload your Web page to your server and test it in a browser.

Tips:

  1. Good Alternate Text: Describe your image in the alt attribute. If the image has text in it, the alt text should say the same as the image
  2. Image Dimensions: Image width and height are defined in pixels, but do not include the "px" in your width or height attributes. And always use the exact dimensions. Don't use the width or height attributes to resize your images. This can result in huge images that take forever to download, and browsers don't resize images very well.

©2014 About.com. All rights reserved.