|
|
 |
|
|
 |
|
|
|
 |
|
Section Three - Web Page Graphics:
Lesson 3-2: Adding Images to your Page
Well, this is it. This the lesson where you will learn how to put photos and other images on your page.
The tag used for putting an image on your page is none other than the  IMG tag.
IMG, of course, is short for IMaGe.
Several attributes are needed for the IMG tag. First of all, you need to tell the browser which image file you want on your page.
This is done with the SRC (source) attribute. An IMG tag with the SRC attribute looks like this:
img src="filename.ext"
where filename.ext is the filename of your image file.
Your image file should be placed in the same folder as your web page file.
To make your page load faster, you should also tell the browser the
height and width of your image file in pixels. This is done with the HEIGHT and WIDTH attributes.
An IMG tag with HEIGHT and WIDTH attributes looks like this:
img src="filename.ext" height="200" width="300"
You can also have a border around your image.
Some older browsers put a border around your image automatically.
However, borders are seldom necessary. It is generally a good idea to set your border to zero pixels.
Image borders are controlled with the BORDER attribute.
An IMG tag with a BORDER set to zero pixels looks like this:
img src="filename.ext" height="200" width="300" border="0"
One other very important attribute is the ALT TEXT attribute.
ALT text should always be included. The ALT text attribute is used to give a
short description of your image. ALT text tells visually impaired users something about your image.
There are also older browsers which cannot display images. In those browsers, ALT text appears
in place of the image. Always include the ALT text attribute.
img src="filename.ext" height="200" width="300" border="0" alt="description"
Practice:
Copy a photo or other image file to the same folder as your web page file.
If you don't have any image files handy, copy and use this photo of my dog Sandaa.
The filename of this photo is "sandaa.jpg", the height is 200 pixels, and the width is 267 pixels.
Using the IMG tag, add the photo to your practice file. Be sure to add the
SRC, HEIGHT, WIDTH, BORDER, and ALT attributes. If you use your own image file, you can
use graphics software to check the HEIGHT and WIDTH of your file in pixels. You can also
use your browser to check the size of an image. In Netscape, right-click the image, and choose
[Display image in another window]. When the new window appears, right-click again and choose
[Image information]. In IE, just right-click the image, and choose [Properties].
After adding the image tag, save your file and take a look at it in your browser.
It should look something like this.
Review:
- The IMG
tag is used to place an image on a page.
- The SRC attribute is used to designate the file name.
- The HEIGHT and WIDTH attributes are used to set the size in pixels. Setting these attributes makes your page load faster.
- The BORDER attribute is used to set thewidth, in pixels, of the image border
- The ALT text attribute is used to set alternative text. ALT text is necessary for
visually impaired users, and people who use older browsers. Always use ALT text.
|
| |
|
| |
|
Last revision: 2002/03/04,
Copyright ©
|
|
|
