banner
Welcome to HTML.co.uk, the number one resource for all news, information, and happenings regarding HTML.

Updates: HTML.co.uk has just been relaunched. Subscribe to our RSS Feed to stay on top of HTML news and techniques.
May
29th

Working with Images in HTML

Author: Editor | Files under HTML Basics, HTML Tutorials

A single image speaks more clearly than a thousand words. Images add spice to the web page. They make a website interactive and user friendly. In fact, images are the most vital element of a web page, especially those designed for children. In the absence of images nobody will enjoy web surfing. Today almost every web page contains images in order to increase its worth. So, it would be useful to have a look at the different aspects of an Image in HTML.

HTML basically supports two types of images i.e. .Gif and .Jpg image. While .Jpg images are static, the .Gif images can be both static and dynamic. tag is used to put an image on a web page. This tag has lots of attributes which are used to align an image, define its size and position etc. To add an image there are some basic attributes which should be used.

1) <IMG> tag is necessary
2) Then SRC attribute must be there to tell the document the source from where it will get the image.

For example:

<HTML>
<IMG SRC=”d:\images\hello.jpg”>
</HTML>

In the above example the <HTML> and </HTML> tags represent that this document is a web page. The IMG tag is representing the addition of an image in the web page. The SRC is the attribute of IMG which tells that from where and which image is to be inserted .There is no need to close the <IMG> tag with </IMG>.

One thing which should be noted is that you can give the full path to an image as well as only name of the image with the SRC attribute. If you are using an image which is not in the same folder where your HTML document resides, then you have to give its full path like d:\images\hello.jpg. In contrast if the hello.jpg file is in the folder where your HTML document and files are saved then you can mention only its name as like <IMG SRC=”hello.jpg”>. Another point which should be remembered is that you have to mention the full image name including its extension like hello.gif or hello.jpg otherwise the image will not be displayed. You can adjust the aliment, height, width and border of the image. If you set the value of border=0 then the border will disappear. In contrast, you can start increasing the value of height, width and border as per your requirements.

For example:

<IMG SRC=”d:\images\hello.jpg” ALT=”Hello” HEIGHT=”200” WIDTH=”600” BORDER=”6” >

Below are the different attributes and their explanations which can be used with <IMG>

  1. ALIGN: It is used to set the alignment of the image. You can use it as ALIGN= TOP, ALIGN= MIDDLE, ALIGN=CENTER, ALIGN= LEFT and ALIGN= RIGHT.
  2. BORDER: It is used to set the size of the border of the image.
  3. WIDTH: It is used to set the width of the image
  4. HEIGHT: Used to set the height of the image
  5. HSPACE: Represents the amount of space to the right and left of the image.
  6. VSPACE: Represents the amount of space to the top and bottom of the image.
  7. ALT: It represents the text which is to be displayed in place of image in case the web browser is unable to display the image.

Post a Comment