intro | tags | color | attributes | images | embedding | tables | links | | Exercises: 1.Homepage 2. Website
Need more help? Consult the w3schools.com tutorials

Table of Contents

Images can be JPGs, GIFs or PNG files
Use the tag:
<IMG SRC="filename.jpg">
IMG is the tag
SRC is the parameter
filename.jpg is the value

For images to be embedded in a webpage, you MUST follow these Rules:
Your graphics will appear BROKEN unless you've done EVERYTHING listed below:
  1. The JPG (or GIF) MUST be in the SAME FOLDER LOCATION as your HTML "source code"
  2. Website images MUST be JPGs, GIFS or PNGs - using a PSD or corrupted graphic will not work, even if the name has been changed
  3. Spelling COUNTS! Use <IMG SRC="filename.jpg"> tag to "link" to your graphic file. The name MUST be spelled CORRECTLY.

  1. Watch the pixel size of your images - if they are bigger than your screen size, they'll look bad on your webpage. (Use 250x250 @72DPI for an ideal size)

PARAMETERS that can be used with <IMG>
  • SRC="filename" (specifies the graphic file to be linked)
    • NOTE - These values MUST match the actual size of your image in pixels or else:
      • The image will appear "corrupted"
      • And / or : the filesize will be bigger than it needs to be
    • The advantage of using HEIGHT and WIDTH is that your webpage will be "preformatted" to reserve space for that size of image - this makes the TEXT on the page appear more "instantaneously" - this is GOOD formatting!
  • ALIGN="left or right" will let you WRAP text to the side of an image
    • Use <BR CLEAR=LEFT> (or <BR clear=right>) to break "clear" of an aligned image.
  • HSPACE = "size" Leaves a horizontal space (of size pixels) around the outside of an image
  • VSPACE = "10" Leaves a horizontal space (of exactly 10 pixels) around the outside of an image

Note - More sophisticated "Media" such as Movies (WMV) or Flash Animations (SWF) must be "embedded" into a webpage