Tags: < image >


     Many different types of images may be displayed by a Browser but the most common are the Bit map (.bmp), the Jpeg (.jpg) and the animated/transparent giff (.gif).
      For still images it it by far better to use Jpegs then Bit Maps because of the file size. A picture as a bmp might be 1.4 Mb whereas the same picture as a jpg with no visible loss in clairity would only be 30 Kb. The gif is used where ever you may need to have part of the image transparent.
     The animated gif is a series of pictures displayed at a set rate of speed to produce an animation. For example the butterfly on this page is a gif made from 4 images which play in a loop. Animated gifs can also have large file sizes because of the multiple images it must store.



The following is the image tag which is used on this page to display the Butterfly image on the left.

Butterfly < img src="../pics/face.gif" width="41" height="48" align="Bottom" border="2" vspace="10" hspace="5" alt="Butterfly" longdesc="about_butterflys.txt" style="Cursor:hand" >

         * It is not necessary to include all of elements of the above tag.

You need only:    < img scr="" width="" height="" >   to display an image.

Syntax
Parameters
src=""
    The location of the picture file is entered here. It could be the full url address.
ie: HTTP://www.mydomain.com/pics/btrfly.gif
or an address relative to the page.
ie: pics/btrflly.gif
A note here ../ in the address means back a folder.
width=""
    Enter the width of the picture here in pixels.
You can change the size the picture is presented in most browsers. For example you have a small picture 40W X 40H but need to have it be a little wider. You could enter the width you need the picture to be an most brosers will stretch it to fit. ie: 50W X 40H
height=""
    Enter the height of the picture here in pixels.
You can change the size the picture is presented in most browsers. For example you have a small picture 40W X 40H but need to have it be a little taller. You could enter the height you need the picture to be an most brosers will stretch it to fit. ie: 40W X 50H
align=""
  • TOP
         Aligns the image to the top of a line of text.
  • BOTTOM
         Aligns the image to the bottom of a line of text.
  • LEFT
         Aligns the image to the left
  • RIGHT
         Aligns the image to the right.
  • TEXTTOP
         Aligns the image to the top of a line of text.
  • MIDDLE
         Aligns the middle of the image to the a line of text.
  • ABSMIDDLE
         Aligns the image to the absolute middle of the text.
  • BASELINE
         Aligns the image to the bottom of a line of text.
  • ABSBOTTOM
         Aligns the image to the absolute bottom of the text.
border=""
    This sets the border size in pixels. Enter from 0 to ~
vspace=""
    This sets in pixels the vertical spacing between the image and any item on the page. Enter from 0 to ~
hspace=""
    This sets in pixels the horizontal spacing between the image and any item on the page. Enter from 0 to ~
alt=""
    Here you can enter a discription of the image or a caption. Which will appear when the mouse hovers over the image and in the image frame on the page if picture is not viewed.
longdesc=""
    Enter the location of a file containg a long description of the image. ie:  longdesc="about_butterflys.txt" which refers to a text file named about_butterflys located in the same folder as the image.
style=""
    Cursor:hand    Cursor:wait    Cursor:busy
Causes the users cursor to change to windows systems cursor for hand, working and busy when hovering over the image.


This is page 9
of Learning HTML

Let`s move on to LINKS
Click here   LINKS