Now we’ll learn how to add images to your HTML documents. The image tag is: <IMG> . It is used without a closing tag. The mandatory image attribute is SRC. The SRC stands for source. The source of the image is going to be the net address of the images. If you aren’t sure, use the full address. Note that the filename or address of the image is case sensitive. The image file can be in GIF or JPEG formats. These are the two most common image file extensions used on the internet.
Image command attributes (optional):
ALT=”text” – used as alternative to the image. Only text is displayed when someone visits your page with a browser that can’t show images, or if image loading is turned off.
ALIGN=”left|right|top|texttop|middle|absmiddle|
|baseline|bottom|absbottom” – specifies the image position.
BORDER=”pixels” – specifies the image border width in pixels.
WIDTH=”pixels” HEIGHT=”pixels” – specifies the image width and height. If not used – the real image size will be used. All you need to know is the original width and height of the image and you can get the image size that you want manipulating with the above attributes. If the image becomes distorted try to change both image width and height using the same aspect ratio or just guess until the image shows up right.
Examples:
Command |
Result |
---|---|
<IMG SRC=”images/Worldmap.gif” >
|
|
Image orientation:
Command |
Result |
---|---|
<IMG SRC=”images/Worldmap.gif” ALIGN=”RIGHT”> |
|
<IMG SRC=”images/Worldmap.gif” ALIGN=”TOP” ALT=””> |
|
<IMG SRC=”images/Worldmap.gif” ALIGN=”MIDDLE”> |
|
<IMG SRC=”images/Worldmap.gif” ALIGN=”BOTTOM”> |
|
You can use an image as a link. First, you must create a link. Type the opening link tag as you have already learned. Now, place the image tag right after the opening link tag and close the link tag with </A>:
Command |
Result |
---|---|
<A HREF=”http://www.webmastertools4u.com/”> <IMG SRC=”images/Worldmap.gif” BORDER=0 ALIGN=”TOP” ></A> |
|
<A HREF=”http://www.webmastertools4u.com/”> <IMG SRC=”images/Worldmap.gif” BORDER=2 ALIGN=”TOP” ></A> |
All right, let’s move on to the next section BODY tag attributes.