We can insert an image into any html document using HTML image tag.
SYNTAX : <img src=”image url” attributes />
src attribute is the compulsory attribute for img tag. We have to provide the name and location of image with in double quotes as the value for this attribute.
Alt attribute can be used to display an alternate text on the webpage when the image is unable to load may be due to slow internet connection.
Width and Height attribute can be used to set the width and height of the image.
Border attribute can be used to provide border to the image. By default HTML does not provide any border to the image.
Note : The width and height can also be adjusted using CSS width and height properties.
Example : Now we will use an image in our about.html page. write the line of code written below under the body tag and above h1 tag.
<img src="ttrc-logo.jpg" />
the above line statement will display ttrc-logo.jpg from current directory as we have not mentioned any location. But it may not fill our webpage completely if its width is less then the width of our webpage. So to fill the image completely to the width of webpage we will use width and height attribute as below.
<img src="ttrc-logo.jpg" width="100%" height="auto" />
We want the width of image to be 100% of the width of webpage and simultaneously we also want to maintain the aspect ratio of the image. So for height attribute we supplied value auto.
Now we will provide a border to our image.
<img src="ttrc-logo.jpg" width="100%" height="auto" border="1px" />
Check your progress
Q) What tag should be used to add an image to a webpage ?
Q) What attribute specifies the image URL ?
- none of these
Q) Which of below attributes can be used to resize an image of an HTML document ?