<IMG> The image tag inserts an image into a web
page. The image may be a photograph, drawing, or
clip art. Browsers will support two image file
types: .JPG (Joint Photographic
Experts Group) and .GIF (Graphics
Interchange Format). All image files must be located
in the same directory as the source document or they
will not be displayed by the browser. Image has no
closing tag.
Step 1.
<IMG
SRC=> The SRC attribute of the image tag is required; its
value(=) is the filename of the image <IMG SRC= url or location of file and "filename.jpg" OR "filename.gif">
Step 2.
<IMG SRC WIDTH= HEIGHT=> The WIDTH and HEIGHT attributes of the image tag : Specify the size of the image in pixels (picture elements).Specifying this attribute allows the browser to calculate the
size of the image and reserve space before actually downloading the image. This will make the image render faster.
Step 3.
<IMG SRC WIDTH= HEIGHT= ALT=> The ALT attribute of the image tag.
Specifies alternative text the browser may show if image display is not possible or disabled by the user.
The example below shows an image tag with its attributes of SRC,
WIDTH, HEIGHT, and ALT.
In a web page, the tag below will display the picture "mydog.jpg" which is 100 pixels
wide and 150 pixels high. If the browser cannot display the picture, it will display the sentence, "A picture of my dog!"
<IMG SRC="mydog.jpg" WIDTH=100 HEIGHT=150 ALT="A picture of my dog!">
Step 4.
How to insert the image into your page
To better understand how images are inserted in a
web page follow the following steps: 1. "Create a
folder within your "my web site folder" to hold
your images.
For this tutorial you will use the image on our image page
click here 2. To download the image right click on the image and save it in your "mywebsite folder" inside of the
" image folder" you just created.
3. To insert the image in your doucment you will have to edit your HTML code by adding the image tag code <IMG SRC="candle1.jpg" WIDTH=100 HEIGHT=150 ALT="candle">
4. Save the page, close and refresh the page to see the changes.
Do the following exercise: except this time you will add a image
tag to the body tag.
<body background="name of your graphic file"> Example: if you were using the candle as image tag the the tag would read as <body background="candle1.gif"> .
In this exercise select a background image from out image background page click here, use the same method we use to insert a image only difference is you will be adding a image file to the body tag as shown above.
Note that a
small image is repeated in the background as
often as necessary to fill the window (it may
look messy ). When using an image as a
background you may need to lighten it to keep
your page readable.
