HTML - Inserting Components
Inserting Graphics
Graphics are a very important part of any webpage. Apart from using images to illustrate certain points, clever use of images also makes our webpages more attractive and readable. But there is a disadvantage in having too many images in the page. Since the storage space that an image occupies is very high compared to text, a browser takes a vaery long time to display an image on the screen. Therefore, the more the number of images in a page, the longer it takes to download it from the server. We must therefore make judicious use of images in our webpages.
You can use two types of images in webpages - JPG nad GIF. JPG is an extension name for an image file that is created using Joint Photographic Experts Group format. GIF is the extension name for an image file that is created using the Graphics Interchange Format. These two formats store pictures using very less space as against the other formats. Therefore before inserting images, make sure that they are of the JPG or the GIF format.
To insert an image into the document, use the IMG tag as shown below:
<IMG ALT="alternative text" ALIGN="align option" HEIGHT="number" WIDTH="number" SRC="image path">
IMG is the tag that tells the browser that an image is being inserted.
ALT specifies the text that must appear in place of the image, in case the actual image not available. It may sometimes happen that we may use an image but later accidntly delete it. In that case text is helpful to the user.
ALIGN allows us to specify the alognment of the image. This option can take three values 'LEFT', 'RIGHT', 'CENTER'.
HEIGHT specifies the number of pixels that the image must occupy vertically. WIDTH specifies the number of pixels that the image occupy horizontally. If the actual image occupies lesser pixels than specified then the picture is stretched either vertically or horizontally to fit the specifications.
SRC specifies the actual path of the image file. The full path along with the subfolders must be provided here.
A sample use of the IMG tag is given below:
<FONt FACE="ARIAL" SIZE=4> This is my favourite picture </FONT> <IMG ALT="My favourite pic" ALIGN="CENTER" HEIGHT="150" WIDTH="250" SRC="C:\personal\images\house.jpg">
Inserting Hyperlinks
The essence of a webpage is the links that it has to other pages. Let us now learn how to hyperlink a text or a picture.
Hyperlinking Text.
To hyperlink a text or phrase, we use the A HREF tag, as shown below:
<A HREF="target page path"> text </a>
The A stants for anchor. the term anchor is also used to refer to a hyperlink. We use HREF to specify the location of the page to which the link leads. If the page is in the same folder as the current page, you need not type the full path of the file. Only the name of the file is enough. You must close the hyperlink using the </A>tag.
An example of the usage of the A HREF tag:
<A HREF="c:\SAMPLE WEBSITE\CATALOG.HTM"> Click here for a Product Catalogue</A>