Tuesday, 28 June, 2022

webmastertools4u

Webmaster Tools

single post

HTML

HTML images

Adding images to your HTML document
 


 

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”>

This image is orientated to the right:

<IMG SRC=”images/Worldmap.gif” ALIGN=”TOP” ALT=””>

 This image is orientated according to the top of the text (ALIGN=”TOP”).

<IMG SRC=”images/Worldmap.gif” ALIGN=”MIDDLE”>

 And now – in the middle (ALIGN=”MIDDLE”).

<IMG SRC=”images/Worldmap.gif” ALIGN=”BOTTOM”>

 And now – text and image bottom (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.

Recent Comments

No comments to show.

Archives

Categories