16 September 2017

Html Images

Html Images







Images - An Introduction
 

The <IMG> tag is used to incorporate graphics (typically icons or pictures) into an HTML document. Any image can be added to a web page, provided it is in GIF or JPEG file format. Also bear in mind that the larger an image's file size is, the longer it will take to download in a viewer's browser. "Image Source" and "Image Size" are the minimum attributes required for displaying an image. 
 
Image Source:
 

The image source tag <SRC=> tells the browser where the image is physically stored so that it can retrieve and display it. It is important to remember that file names are case sensitive and must be typed correctly.
Another important point to remember is that if an image is not stored in the same directory as the HTML documents, then the directory name must be included with the file name. Programmers commonly store images in a separate directory - often aptly titled "images". Thus an image source might appear written in HTML code as SRC="images/picture.gif". If an image is incorrectly named, missing or is listed in the wrong directory, a "broken graphic" icon will be displayed. 
 
Image Size:
 

Although not absolutely required, it is good practise to include HEIGHT and WIDTH information within the <IMG> tag. This speeds up the downloading process by allowing faster-loading text to load around areas where images will eventually appear. HEIGHT and WIDTH values are measured in pixels. Do not try to make the image smaller or larger by adjusting these attributes as you risk distorting the image by doing so.


HTML Code   Browser Display
<IMG SRC="woman.gif" WIDTH=32 HEIGHT=32>  


Image Attributes


Image Alignment:
 

Use the LEFT, RIGHT or CENTER attributes within the <IMG> tag to align images relative to the browser window. See below for examples of how these attributes are used:


HTML Code   Browser Display
<IMG SRC="woman.gif" WIDTH=32 HEIGHT=32 ALIGN=LEFT>  
<CENTER><IMG SRC="woman.gif" WIDTH=32 HEIGHT=32></CENTER>  
<IMG SRC="woman.gif" WIDTH=32 HEIGHT=32 ALIGN=RIGHT>  


Image Alignment with Text:
 

By default the bottom of an image is aligned with any text that follows, as shown below:


HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79>This hand is very big!
  This hand is very big!


Vertical placement of text beside images can be altered from the bottom default setting by using the attributes ALIGN=TOP or ALIGN=CENTER, as shown below:


HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALIGN=TOP>This hand is big!
  This hand is big!

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALIGN=CENTER>This hand is big!
  This hand is big!


Yet another option is to force text to appear under an image rather than beside it. For this effect, use the <BR CLEAR=ALL> tag to place a line break after an image, which will cause the text that follows to begin on the next line.


HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALIGN=TOP><BR CLEAR=ALL>This hand is big!
 
This hand is big!
 
Alternate Text


A good rule of thumb is to include alternate text that describes the image within an <IMG> tag.
This is done for a number of reasons -

  1. While the browser is still loading the viewer can still see the title or caption.

  2. If the picture does not load, the viewer can still see the title or caption.

  3. Users who choose to turn off image display in their browsers (a possible setting under the "preferences" menu), can still see the picture contents.
To do this the "ALT" attribute is used. See below for an example of this attribute in use:

HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALT="Big Hand">
  Big Hand


Start typing and press Enter to search