Images are very important to beautify as well as to depicts many concepts on your web page. Its is true that one single image is worth than thuasands of words. So as a Web Developer you should have clear understanding on how to use images in your web pages.
Insert Image – The <img> Element:
You will insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src="image URL" attr_name="attr_value"...more attributes />
width: sets width of the image. This will have a value like 10 or 20%etc. Image Attributes:
Following are most frequently used attributes for <img> tag.
- height: sets height of the image. This will have a value like 10 or 20% etc.
- border: sets a border around the image. This will have a value like 1 or 2 etc.
- src: specifies URL of the image file.
- alt: this is an alternate text which will be displayed if image is missing.
- align: this sets horizontal alignment of the image and takes value either left, right orcenter.
- valign: this sets vertical alignment of the image and takes value either top, bottom orcenter.
- hspace: horizontal space around the image. This will have a value like 10 or 20%etc.
- vspace: vertical space around the image. This will have a value like 10 or 20%etc.
- name: name of the image with in the document.
- id: id of the image with in the document.
- style: this will be used if you are using CSS.
- title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.
<title>HTML image Tag</title>
<img src="http://www.learning4uworld.com/images/html.gif" alt="HTML Tutorial" width="100" height="100" border="2" align="center" title="HTML Tutorial" />
This tag supports all the global attributes.
The HTML <img> tag also supports following additional attributes:
|Deprecated-Specifies the alignment for the image.|
|alt||text||Specifies alternate text|
|border||pixels||Deprecated – Specifies the width of the image border.|
|crossorigin||anonymous use-credentials||It allows images from third-party sites that allow cross-origin access to be reused with canvas.|
|height||pixels or %||Specifies the height of the image.|
|hspace||pixels||Deprecated – Amount of white space to be inserted to the left and right of the object.|
|ismap||URL||Defines the image as a server-side image map.|
|longdesc||text||Deprecated-Specifies a URI/URL of a long description – this can elaborate on a shorter description specified with the alt attribute.|
|src||URL||the url of an image|
|usemap||#mapname||Defines the image as a client-side image map and used alongwith <map> and <area> tags.|
|vspace||pixels||Deprecated – Amount of white space to be inserted to the top and bottom of the object.|
|width||pixels or %||Sets the width of an image in pixels or in %.|