HTML allows us to display an image on a page (not as background).
If you want to display an image on a page, you need to use the imgsrc attribute i.e. image source.
Src contains the value of the URL of the image that you want to display on the page.
NOTE:
If the selected image is smaller than the browser window, then the image will get repeated itself until it fills the entire browser window.
The Image Tag and the Src Attribute:
As I said, without src attribute we cant display images.
The syntax of defining an image:
<img src="image URL/image name">For example:
<img src="project/html/logo/pt.gif" >In the above example, the browser will look for the image in the location “/project/html/logo”. If the specified image is not there means the browser will end up in showing broken link icon.
If it contains only attributes means, then the <img> tag is empty and has no closing tag.
You can use the image tag in the document wherever you want.
The browser will automatically display the image wherever it finds the image tag.
The Alt Attribute:
We can define an alternate text for our image by using alt attribute.
For example,
<img src=" project/html/logo/pt.gif" alt="ProgrammingTute ">
If the browser can’t load images then the browser will then display the alternate text instead of that image.
So it will be a good practice to include the alternate text for each and every image on a page.
Height & Width Attribute:
By using these attributes you can reserve a place for your image in the browser.
It is a good practice to specify these attributes since the browser does not know the exact size of the image which results in page layout issues.
Example:
<img src="pt.gif" alt="Programming Tute" width="36" height="46">
