- 3 years ago
- Shahzad Gujjar
- 2,540 Views
-
3
You will learn how to add pictures in an HTML document in this tutorial.
Inserting Images into Web Pages
Images improve the web page’s visual appearance by making it more colorful and interesting.
In HTML documents, the <img> tag is used to insert images. It’s an empty element that only has qualities. The syntax for the <img> tag is as follows:
<img src="url" alt="some_text">
Three images are inserted on the web page in the following example:
<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">
At least two attributes are required for each image: the src attribute and the alt attribute.
The src attribute directs the browser to the image’s location. Its value is the image file’s URL.
When an image is inaccessible or cannot be displayed for some reason, the alt attribute offers an alternate text. Its worth should be comparable to that of the image.
NOTE: The <img> element, like <br>, is an empty element that does not have a closing tag. In XHTML, it ends with “/>.”
If a user is unable to view an image due to a poor connection, the image is not accessible at the specified URL, or the user is using a screen reader or non-graphical browser, the required alt attribute provides an alternate text description for the image.
Setting the Width and Height of an Image
An image’s width and height are specified using the width and height attributes.
By default, the values of these characteristics are interpreted in pixels.
<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">
The style attribute may also be used to define the image’s width and height. Because inline styling takes precedence, it prevents style sheets from accidentally changing the image size.
<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">
It’s a good idea to give an image both a width and a height so that the browser can allocate the appropriate amount of space before downloading it. Otherwise, image loading may cause your website layout to distort or flicker.
Using the HTML5 Picture Element
Scaling an image up or down to fit different devices (or screen sizes) does not always work as well as it should. Also, using the width and height attributes or properties to reduce the image dimension does not reduce the original file size. To address these issues, HTML5 introduced the<picture> tag, which allows you to specify multiple versions of an image for various device types.
There are zero or more <source> elements in the <picture> element, each referring to a different image source, and one <img> element at the end. The media attribute on each <source> element defines a media condition (similar to the media query) that the browser uses to decide when a specific source should be used. Let’s have a look at an example:
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png">
<source media="(max-width: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="My logo">
</picture>
NOTE: The browser will examine each child <source> element and select the best match; if no matches are detected, the src attribute of the <img> element will be used. Additionally, the <img> tag must be the last child of the <picture> element.
Working with Image Maps
You can use an image map to create hotspots on an image that act as hyperlinks.
The basic aspect of making an image map is to make it simple to link different sections of an image without having to split it up into separate files. For example, each country on a world map could be connected to more information about that country.
Let’s take a look at a basic example to see how it 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 usemap attribute of the <img> tag is used to reference the map using the map attribute of the <map> tag. The <area> tag is used to designate the clickable areas on an image within the map> element. Within an image, you can identify any number of clickable zones.
NOTE: The image map should not be used to navigate the internet. They aren’t optimized for search engines. A geographical map is a good example of how to use an image map.
Image maps can be created using a variety of online tools. Some advanced editors, such as Adobe Dreamweaver, include tools for quickly making image maps.
- 3 years ago
- Shahzad Gujjar
- 2,540 Views
-
3
