HTML Images

HTML has the function to add images also. Adding images, increases the design and creativity of the page. Today, almost all web pages have images.

HTML <img> Tag

In HTML, images are added using the <img> tag. It is an empty tag, so there is no need of closing it. To display the images, you will have to use the "src" attribute to find the destination source of the image.

For example:

<img src="web.jpg">

We use the "alt" attribute to specify an alternate text, when the image is not displayed or the source of the image is broken. We can give any text to the alt attribute value, because they are author-defined text.

For example:

<img alt="Web" src="web.jpg">

The "height" and "width" attribute are used to specify the height and width of the image. It is specified in pixels.
For example:

<img alt="Web" height="100px" src="web.jpg" width="100px">

HTML <map> Tag

The <map> tag is used to define a client-side image map. An image map is a image which have clickable areas. The "name" attribute of the image map is associated with the images usemap attribute to create a relation between them. The <map> tag contains area element, that defines clickable areas.

For example:

<img alt="Web" br="" height="100px" src="web.jpg" width="100px" usemap=#web>
<map name="#web">
<area alt="HTML" coords="80, 92, 95" href="html.html" shape="poly"></area>
<area alt="CSS" coords="180, 92, 105" href="css.html" shape="circle"></area>
<area alt="Bootstrap" coords="180, 120, 95" href="bootstrap.html" shape="poly"></area>
</map>

HTML <area> Tag

The <area> tag is used to define a clickable area inside a image map. It is always nested inside the map element.

For example:

<img alt="Web" br="" height="100px" src="web.jpg" width="100px" usemap=#web>
<map name="#web">
<area alt="HTML" coords="80, 92, 95" href="html.html" shape="poly"></area>
<area alt="CSS" coords="180, 92, 105" href="css.html" shape="circle"></area>
<area alt="Bootstrap" coords="180, 120, 95" href="bootstrap.html" shape="poly"></area>
</map>

HTML <canvas> Tag

The <canvas> tag is used to draw graphics using scripts mainly JavaScript. The <canvas> tag is just a container for the graphics, we have to use javaScript to draw the graphics.

For example:

<canvas id="myCanvas"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FFFF00';
ctx.fillRect(0,0,100,100);
</script>

HTML <figure> Tag

the <figure> tag is used to specify a self-contained content like illustration, diagrams, photos, code listing etc.

For example:

<figure>
<img alt="Web" height="100px" src="web.jpg" width="100px">
</figure>

HTML <figcaption> Tag

The <figcaption> tag used to define a caption to the figure. The <figcaption> element can be placed as the first or last child of the <figure> element.

For example:

<figure>
<img alt="Web" height="100px" src="web.jpg" width="100px">
<figcaption>Fig1 : The picture of web languages</figcaption>
</figure>