Images
Concepts
Images are displayed on a Web page through the use of the IMG element.
- Images are a powerful way to communicate.
- Images can take a long time to download for people using slow connections to the Internet.
- A common error for beginning Web page developers is to use too many large images on a Web page.
- The GIF image format is good for line and cartoon-like drawings. The JPEG image format is good for photographs.
- Making graphics and images is a whole specialization unto itself.
Put an Image to Work
An example image
| Put this in the BODY of your HTML file: | Displayed in a Web browser, it will look something like this: |
|---|---|
|
<IMG
Src="https://johndecember.com/html/images/icon.gif" Alt="HTML Station" Width="40" Height="40"> |
|
Parts of the IMG element
- Use the IMG element to include the image in your HTML file.
- Use the Src attribute to identify the image file.
- Use the Width and Height attributes to size the image--this can speed up display of the entire page.
- Use the Alt attribute to define what someone using a Web browser that does not display images will see (or hear).
- You can use other attributes to define padding around the image, alignment, borders, etc.
- Look at some image tips.
Exercise: Put an Image in a Web document
Find an image on the Net and include it on your Web page.
Use the full URL path to the image in the Href attribute of the IMG element.
If you can't find images on the Net, you can use these:
- https://johndecember.com/images/stats.gif
- https://johndecember.com/images/usflag.gif
- https://johndecember.com/net/images/tools.gif
- https://johndecember.com/html/images/world.gif
Alternately, if you know how to download an image to your own directory, you do so and then you can use the image's filename in the Href attribute of the IMG element to display it.
You have to remember, though--images can be copyrighted, so don't download one that is protected by copyright. Look instead for public domain images.