img tag in html
Any website is not looking nice and attractive without images. Almost every web page has some kind of images on it. In this unit we are going to explain how to add images to your web pages. The most commonly used formats are GIF and JPEG. JPEG is used for photographic quality images and GIF is used for other types of images. HTML provides a number of ways to insert images, control their placement and appearance on the page.
img tag in html and the SRC Attribute
Images not only add beauty to a web page they also bring life to web page. Images can be sited in a web page by using <IMG> tag and set its SRC attribute equal to the URL of the image. The <IMG> tag is empty, which means that it contains attributes only, and has no closing tag and and is written as:
<IMG SRC = “URL”> Where IMG stands for image, SRC is the – Source of the image file, the source attribute tells the browser where to find the image.
And URL – The URL points to the location where to find the image.
Example:
<IMG SRC=shahidminar.jpg>
If an IMG tag is enclosed between the opening and closing P tags, the other image will start on a new line. Pictures on the web are usually either in gif or jpg format. The gif format is mostly used for pictures with solid blocks of color such as charts, or when an image requires a transparent background. The jpg format is suitable for pictures with slight color changes such as photos.
SRC attribute is mandatory for the <IMG> tag. The file name of the image must also include its format, e.g. jpg as in the above example.
To keep things simple, for now store your pictures in the same place as your web pages, for example if you keep your HTML files in a folder called "HTML Coding ", put your pictures there too.Attributes <IMG>
♦ HEIGHT AND WIDTH
♦ ALIGN
♦ VSPACE and HSPACE
♦ ALT
♦ BORDERHEIGHT AND WIDTH
The height and width attributes enable you to specify the height and width of an image. The attribute values are specified in pixels.
Example :
<HTML>
<HEAD>
<TITLE> IMG With Width and Height</TITLE>
</HEAD>
<BODY>
<IMG SRC =shahidminar.jpg width="150" height="120">
</BODY>
</HTML><IMG> Attributes
ALIGN: used to set the alignment of the text adjacent to the image. It takes the following values:
ALIGN = LEFT - Displays image on left side and the subsequent text flows around the right hand side of that image.
ALIGN = RIGHT - Displays the image on the right side and the subsequent text flows around the left hand side of that image.
ALIGN = TOP - Aligns the text with the top of the image.
ALIGN = MIDDLE - Aligns the text with the middle of the image.
ALIGN=BOTTOM - Aligns the text with the bottom of the image by default, the text is aligned with the bottom of the image.
By default the image appears aligned to the left. If we want to see it in the center, we could place <center> tag around the <img> tag.
Example: Using <IMG> tag with attributes
<HTML>
<HEAD>
<TITLE> Use of IMG Tag with its ALIGN Attribute</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC=shahidminar.jpg ALIGN=TOP>
Aligns the text with the Top of the image
</P>
<P>
<IMG SRC=shahidminar.jpg width="150" height="120" ALIGN=MIDDLE>
Aligns the text with the Middle of the image
</P>
<P>
<IMG SRC=shahidminar.jpg ALIGN=LEFT>
Displays image on left side and the subsequent text flows around the right
hand side of that image.
</P>
<P>
<IMG SRC=shahidminar.jpg width="150" height="120" ALIGN=RIGHT>
Displays image on right side and the subsequent text flows around the left hand side of that image.
</P>
</BODY>
</HTML>VSPACE and HSPACE
To create a buffer zone of white space around the image VSPACE and HSPACE attributes is used. HSPACE is used to insert a buffer of horizontal space on the left and right of the image, whereas VSPACE attribute is used to insert a buffer of vertical space between the top and bottom of the image.
Example:
<HTML>
<HEAD>
<TITLE> IMG with VSPACE AND HSPACE </TITLE>
</HEAD>
<BODY>
<IMG SRC =shahidminar.jpg VSPACE ="50" HSPACE ="50">
</BODY>
</HTML>Border
To add a border around the image the BORDER=" “attribute is used. You can specify the thickness of the border in pixels.
Example:
<HTML>
<HEAD>
<TITLE> IMG with BORDER </TITLE>
</HEAD>
<BODY>
<IMG SRC =shahidminar.jpg BORDER ="10">
</BODY>
</HTML>Alt Attribute
The alt attribute is an author-defined text and it provides alternative information for an image if a 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). In some browsers the description will also pop up when a mouse pointer is moved over the picture.
Example:
<HTML>
<HEAD>
<TITLE> IMG with VSPACE
AND HSPACE </TITLE>
</HEAD>
<BODY>
<IMG SRC =shahidminar.jpg BORDER ="10" ALT="any alternative text">
</BODY>
</HTML>
Example:
<HTML>
<HEAD>
<TITLE> IMG with alter </TITLE>
</HEAD>
<BODY>
<IMG SRC =shidnar.jpg BORDER ="10" ALT="any alternative text">
</BODY>
</HTML>
0 মন্তব্য(গুলি):
একটি মন্তব্য পোস্ট করুন
Comment below if you have any questions