The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image: <img src="url">
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat"> |
The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.
Insert images
This example demonstrates how to display images in your Web page.
<p>
An image:
<img src="constr4.gif"
width="144" height="50">
</p>
<p>
A moving image:
<img src="hackanm.gif"
width="48" height="48">
</p>
<p>
Note that the syntax of inserting a moving image is no different from that of a non-moving image.
</p>
An image:
A moving image:
Note that the syntax of inserting a moving image is no different from that of a non-moving image.
Insert images from different locations
This example demonstrates how to display images from another folder or another server in your Web page.
<p>
An image from another folder:
<img src="/images/netscape.gif"
width="33" height="32">
</p>
<p>
An image from W3Schools:
<img src="http://www.kbcc.cuny.edu/academicDepartments/tec/
OH/tec54/images/M_buld.jpg">
</p>
An image from another folder:
An image from KCC:
Aligning images
This example demonstrates how to align an image within the text.
<p>
An image
<img src="hackanm.gif"
align="bottom" width="48" height="48">
in the text
</p>
<p>
An image
<img src ="hackanm.gif"
align="middle" width="48" height="48">
in the text
</p>
<p>
An image
<img src ="hackanm.gif"
align="top" width="48" height="48">
in the text
</p>
<p>Note that bottom alignment is the default alignment</p>
<p>
An image
<img src ="hackanm.gif"
width="48" height="48">
in the text
</p>
<p>
<img src ="hackanm.gif"
width="48" height="48">
An image before the text
</p>
<p>
An image after the text
<img src ="hackanm.gif"
width="48" height="48">
</p>
An image
in the text
An image
in the text
An image
in the text
Note that bottom alignment is the default alignment
An image
in the text
An image before the text
An image after the text
Let the image float
This example demonstrates how to let an image float to the left or right of a paragraph.
<p>
<img src ="hackanm.gif"
align ="left" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
</p>
<p>
<img src ="hackanm.gif"
align ="right" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
</p>
A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
Adjust images to different sizes
This example demonstrates how to adjust images to different sizes.
<p>
<img src="hackanm.gif"
width="20" height="20">
</p>
<p>
<img src="hackanm.gif"
width="45" height="45">
</p>
<p>
<img src="hackanm.gif"
width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the
img tag.
</p>
You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag.
Make a hyperlink of an image
This example demonstrates how to use an image as a link.
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="go_button.jpg" width="65" height="38">
</a>
</p>
You can also use an image as a link:
Good background image
An example of a background image and a text color that makes the text on the page easy to read.
<body background="paper.gif">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
Image Background
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat itself.
Bad background image
An example of a background image and a text color that makes the text on the page very difficult to read.
<body background="rock.jpg">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
Image Background
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat itself
This example demonstrates how to create an image map, with clickable regions. Each of the regions is a hyperlink.
<p>
Click on one of the planets to watch it closer:
</p>
<img src="planets.gif"
width="145" height="126"
usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">
<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm">
<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm">
</map>
<p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in
the map element, therefore we have added both the "id" and "name" attributes to the map element.</p>
Click on one of the planets to watch it closer:
Note: The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element.