LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Images


Inserting Images into Web Pages

Images enhance visual appearance of the web pages by making them more interesting and colorful.

The <img> tag is used to insert images in the HTML documents. It is an empty element and contains attributes only. The syntax of the <img> tag can be given with:

<img src="url">

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:


The following example inserts three images on the web page:

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">

Note:

 Like <br> , the <img> element is also an empty element, and does not have a closing tag. However, in XHTML it closes itself ending with "/>".


Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

<img src="kites.jpg" alt="Flying Kites" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:


<img src="kites.jpg" alt="Flying Kites" width="500" height="600">

The width and height attributes always defines the width and height of the image in pixels.


Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

<img src="/images/kites.jpg" alt="Flying Kites" width="500" height="600">

Images on Another Server

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

<img src="https://adzetech.com/images/kites.jpg" alt="Flying Kites" width="500" height="600">

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

<a href="https://adzetech.com">
    <img src="/kites.jpg" alt="Flying Kites" width="500" height="600">
</a>

Background Image

To add a background image on an HTML element, use the CSS property background-image:

Example

<body style="background-image:url('clouds.jpg');">
    <h2>Background Image</h2>
</body>
<body>
    <p style="background-image:url('clouds.jpg');">
        ........
    </p>
</body>

The HTML <picture> Element

HTML5 introduced the <picture> element to add more flexibility when specifying image resources.

The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fits the current view and/or device.

Each <source> element have attributes describing when their image is the most suitable.

The browser will use the first <source> element with matching attribute values, and ignore any following <source>elements.

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Tips:  Always specify an <img> element as the last child element of the <picture> element. The <img>element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched.

Working with Image Maps

An image map allows you to define hotspots on an image that acts just like a hyperlink.

The basic idea behind creating image map is to provide an easy way of linking various parts of an image without dividing it into separate image files. For example, a map of the world may have each country hyperlinked to further information about that country.

Let's try out a simple example to understand how it actually works:

<img src="objects.png" usemap="#objects" alt="Objects">

<map name="objects">
    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>

The name attribute of the <map> tag is used to reference the map from the <img> tag using its usemap attribute. The <area> tag is used inside the <map> element to define the clickable areas on an image. You can define any number of clickable areas within an image.


Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes to define the size of the image
  • Use the CSS width and height properties to define the size of the image (alternatively)
  • Use the CSS float property to let the image float
  • Use the HTML <map> element to define an image-map
  • Use the HTML <area> element to define the clickable areas in the image-map
  • Use the HTML <img>'s element usemap attribute to point to an image-map
  • Use the HTML <picture> element to show different images for different devices

Click on the "Try it Yourself" button to see how it works.

Previous Next
x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine