Images

In the beginning of this tutorial I made the comment that Web pages are nothing more than a simple text file. At that time you may have said to yourself "How can this be true? I see web pages with graphics and sounds all the time !" Well, it is true. All an HTML file does is tell a browser where to put images, and where to find them. In reality, images aren't even downloaded when you first get a web page. The HTML file is downloaded, read by the browser, then the browser makes a new connection to the Internet to retrieve each image mentioned. Image files are also a lot larger than simple HTML files, so pages with lots of images can take a long time to download and view.

I'm not going to get into ways to create images for web pages in this tutorial because there is a lot of personal preference involved. I will tell you that the Internet has two primary formats for images, GIF's and JPG's. GIF's are limited to 256 colors and are very good for most graphics used on web pages. JPG's can have more than 16 million colors and are good for photographs or other images where you need a fairly high resolution. Because of the type of compression used, JPG's are typically smaller files than GIFs, but due to the amount of information they contain will usually take longer to download and display. There are a lot of graphics programs available that you can use to create images for your web page, from simple paint programs to commercial photo manipulation programs. Basically any program that will save a file in GIF or JPG format can be used. All the images in this tutorial are GIFs.


<IMG SRC="filename">
When a browser reaches an image tag, it uses the required attribute src=" " to determine where to get the image from. The actual files don't even have to be on your Web server, by using a fully qualified URL the browser can get images from almost anywhere (just don't violate someone's copyrights). The image tag has a number of optional attributes:
  • ALT= alternate text to be displayed if the user has images turned off, or if the image is not available.
  • WIDTH= the width of the image in pixels.
  • HEIGHT= the height of the image in pixels, some newer browsers will actually re-size an image to fit the height and width specified.
  • BORDER= sets a border in pixels. If set to 0, this prevents a blue box from appearing around an image that's being used as a hyperlink (like the ones on the bottom of the page.)
  • ALIGN= sets an alignment relative to the surrounding text. There are a number of possibilities.
    • top One line of text is displayed beside the top of the image.
    • Bottom one line of text beside the bottom.
    • middle one line of text beside the middle.
    • left the image will be left justified with text wrapping around the right.
    • right right justified, with text wrapping around the left. (Note: the left and right attribute are the only tags that will let text "flow" around an image. All the others will just give you one line of text beside an image.)
  • There are some other attributes that won't be covered here. They are either not used much, or beyond the scope of this tutorial.
BACK Table of Contents NEXT