Use of <img> tageTML
To add an image into the page you
need to use an <img> element. This is an empty element (which means there is no closing
tag). It must carry the following two attributes:
lets discuss its attributes.
src
first one is src stands for source.Where your image is
located. This attribute tells the browser where it can find the image
file. This will usually be a relative URL pointing to an image on your own
site.
put your image and html in same
folder. its help you and browser as well to locate url easily.
alt
This provides a text description
of the image which describes the image if you cannot see it.
title
You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image.
The text used in the alt
attribute is often referred to as alt text. It should give an accurate
description of the image content so it can be understood by screen reader
software (used by people with visual impairments) and search engines. If the
image is just to make a page look more attractive (and it has no meaning, such
as a graphic dividing line), then the alt attribute should still be used but the quotes should be left empty.
Hieght and width of image
You will also often see an <img> element use two other
attributes that
specify its size:
height
This specifies the height of
the image in pixels.
width
This specifies the width of the
image in pixels. Images often take longer to load than the HTML code that makes
up the rest of the page. It is, therefore, a good idea to specify the size of
the image so that the browser can render the rest of the text on the page while
leaving the right amount of space for the image that is still loading.
The size of images is
increasingly being specified using CSS rather than HTML.
Where
to place image in your code
Where an image is placed in the
code will affect how it is displayed.
1: before a paragraph
The paragraph starts on a new
line after the image.
2: inside the start of a paragraph
The first row of text aligns with
the bottom of the image.
3:
in the middle of a paragraph
The image is placed between the
words of the paragraph that it appears in.
