HTML Images
We all are aware of the most common format of images i.e., JPG, GIF and PNG.
Now, inserting these images using HTML is not so simple.
Just like other tags and elements, there are specific HTML elements that are commonly used to insert an image in a web page. Further, its dimensions and style can be changed.
<img> tag is used to define an image.
Syntax <!DOCTYPE html> <html> <body> <h1>A beautiful sky</h1> <img src=”sky.jpg” alt=”Blue Sky” style=”width:200px; height:100px;”> </body> </html>
Please Note: Never forget to specify the width and height of an image. If the dimensions are not specified, the image gets distorted on the page.
HTML <img> tag
- Only attributes are used with <img> tag.
- There is no closing tag for <img>.
HTML src attribute
src attribute is used for defining the location or the web address of the image.
HTML alt attribute
alt attribute is used to specify the alternate text of an image, in case the image cannot display its message.
There are various reasons when image unable to appear to the viewer. Some of the reasons are slow connection, user using the screen reader or error in the src attribute.
In case, if browser is unable to read the image, then it will display the alt tag.
Syntax <img src=”example.png” alt=”This is an example” style=”width:150px; height:150px;”>
Please Note: Without the alt tag, a web page will not validate the image.
HTML Screen Readers
HTML Screen Reader is a software program used to read the text on the screen.
Screen readers are useful to the people with physical disability like blind, learning disabled or visually impaired.
Please Note: alt tag can be read by screen readers.
HTML Image Size
style attribute can be used to define the width and height of an image.
The size can be defined using in pixels which is denoted as px.
Syntax <img src=”example.png” alt=”This is an example” style=”width:120px; height:120px;”> OR <img src=”example.png” alt=”This is an example” width=”120” height=”120”>
Style or Width and Height : Which is better to use?
Although, height and width and style attributes are valid to use in HTML5. But it is recommended to use style attribute. It helps in avoiding making the changes in original size of the image within style sheet.
Syntax
<!DOCTYPE html>
<html>
<head>
<style>
img { width:70%; }
</style>
</head>
<body>
<img src=”example.png” alt=”This is an example” style=”width:120px; height:120px;”>
<img src=”example.png” alt=”This is an example” width=”120” height=”120”>
</body>
</html>
HTML Images: At Another Location
Whenever, the image location is not specified, the browser finds the image in the same folder as the web page does.
Usually, the images are stored in the sub-folder. Therefore, the folder name can be specified within src attribute.
Syntax <img src=”/images/example.png” alt=”Technologydiving Example” style=” width:120px; height:120px;”
HTML Images : At Another Server
Some websites use image servers to store their images.
This is why, the user can access any image in the world from any location using web address.
Syntax <img src=http://www.technologydiving.com/images/example.png alt=”Technologydiving Image”>
Animated Images
GIF standard is used to execute animated images.
Syntax <img src=”technologydiving.gif” alt=”Technology Diving” style=”width:25px; height:25px;”>
Please Note: Syntax of inserting animated and non-animated images is the same.
Adding Link to Image
Image can be used as a link using a <img> tag within <a> tag.
Syntax <a href=”http://www.technologydiving.com”> <img src=”example.gif” alt=”Example” style=”width:25px; height:25px;”> </a>
HTML Floating Image
CSS float property is used to allow the image floating.
Any image can float to right or left of the text using the syntax.
Syntax <p> <img src=”example.gif” alt=”Example” style=”float:left; width:25px; height:25px;”> This image will float to the left of the text. </p>
HTML Image Maps
- Image map can be represented using the <map> An image-map can be clicked to view various regions.
- The relationship between the image and the map can be established using the name attribute of <map> tag and usemap attribute of <img>
- The clickable areas within the image-map can be defined using <area> tag with <map>
Syntax <img src=”example.png” alt=”Example” usemap=”#example” style=”width:25px; height:25px;”> <map name=”examplemap”> <area shape="rect" coords="0,0,52,120" alt="Map1" href="map1.html"> <area shape="circle" coords="25,38,2" alt="Map2" href="map2.html"> <area shape="circle" coords="105,88,6" alt="Map3" href="map3.html"> </map>
Let us quickly revise <img> To define an image src To define the image URL or location alt To define the alternate text for an image width and height To define the size of the image float To let the image float <map> To define the image-map <area> To define the clickable areas within image-map usemap To point an image-map
