HTML Introduction Part 4: Images

Transcription/प्रतिलिपि
Hello and Welcome to another session on HTML series. We have covered quite a lot in past three sessions which you may want to check out. In the earlier sessions, we started from the beginning of What is HTML to different tags and associated attributes. In this session, we will consider one such element image or IMG tag. Please note that to have hands on experience, replace the name and path of the image you want to display in the code provided in description.

Images are the most prominent element of our HTML page, it catches user attention and can improve the design and the appearance of a web page.

In HTML, images are defined with the IMG tag. 

The IMG tag is empty, it contains attributes only, and does not have a closing tag. This means that IMG tag does not have a container for the text to surround, instead it has attributes to display texts in certain situations.

IMG tag contains the SRC attribute, which specifies the URL (web address) of the image or location of image on local disk

IMG SRC = URL

The ALT Attribute

The ALT attribute provides an alternate text for an image, if the user for some reason cannot view the image displayed on HTML page because of slow connection, an error in the SRC attribute, or any other reason.

The value of the ALT attribute should describe the image:

If a browser cannot find an image, it will display the value of the ALT attribute:

It should be noted that the ALT attribute is required. A web page will not validate correctly without it.

Image Size - Width and Height

It is not necessary to display an image in original size always we can use the style attribute to specify the width and height of an image.

Another way of achieving this is by using, the width and height attributes:

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

Defining width and height of an image is a best practice to avoid misalignment and format issues.

Images in Another Folder

By default, the browser searches the image in the same folder as the web page or HTML document is.

However, we can store images in a sub-folder, to point the IMG tag to the correct location of the image define subfolder path in SRC attribute, along with the image name.

Images on Another Server

Sometimes the image referenced on the web page can be on different server altogether to save space. These images can be accessed from their path in form of URL

Animated Images

HTML supports animated images called GIFs. These images appeared in animated format on webpage. The syntax of defining the GIFs are same as any other image.

Image as a Link

 Like text links, images can also be used as links to different webpages, this can be achieved quite easily with surrounding IMG tag with anchor tag. This will convert plain image to a link.

Image Floating

Float property of style attribute in image tag can be used to display image on the right or left of the text.

Image Maps

To make different part of images to respond differently to clicks. Use the tag to define an image-map. An image-map is an image with clickable areas with different behavior on click areas like a clickable map.

The name attribute of the tag is associated with the IMG's use map attribute and creates a relationship between the image and the map.

The tag contains many tags, that defines the clickable areas in the image-map.

Well Done! You have learned to place images in HTML. To find out more, visit links in the description.

Which topic you want us to cover next. Share your thoughts in the comment section.

Source: https://www.w3schools.com/tags/
http://www.w3docs.com/learn-html/html-marquee-tag.html