The 'img' Tag
The <img> tag also known as an 'image' tag is used to display or put images into your webpage. This tag is a self-closing tag. The syntax for this tag is:
<img src="">
Here, 'src' or source is an attribute and with this attribute, we give a value to the 'img' tag. In this attribute, we link an actual image file with the 'img' tag and this linked image will be displayed on the browser window.
Let's see this happening with an example, on your machine open the text editor and write the code
<img src="https://placeimg.com/640/480/tech">
and save the file with a .html extension. Now open the file by double-clicking and you will see that some image is displayed on the browser window. You can add any image to your page just by linking it with an image tag and 'src' attribute. The image linked can be an image file on your computer or may be an image that is somewhere over the web. You may use this link to download or copy the image address and use it on your webpage. All the image files are royalty-free, stock images on the above link.
** If you are a new subscriber and don't know anything about using a text editor to write a webpage then use this link where I will guide you to the pure basics of writing your first webpage.
While we are at it, let's also talk about html attributes. An attribute in HTML is just a way of providing additional information about an HTML element to the browser. An attribute always comes in pair, i.e. it has a name and has a value. Like in the example in the 'img' tag we have used the attribute 'src'. 'src' is the name of the 'source' attribute and we provided its value after the '=' in a set of "" (quotation marks), as "https://placeimg.com/640/480/tech". You should also note that every attribute in HTML is always specified in the opening tag only (if there are opening and closing tags both).
**To delve deeper into other types of HTML attributes you should visit MDN Docs. It is like a holy book of front end web-developers and all the technologies are documented and explained in it.
In and img tag along with the 'src' attribute we commonly use an 'alt' attribute. It is best practice to use an 'alt' attribute as it provides a way for the screen readers to read the value given to the 'alt' attribute for the visually impaired. We provide a description of the image as the value in the 'alt' attribute. If the image is not available or corrupt then the alt text will be displayed in its place. Let's see with an example of the usage of the 'alt' attribute.
<img src="https://placeimg.com/640/480/tech" alt="a tech image from placeimg.com">
<img src="">
Here, 'src' or source is an attribute and with this attribute, we give a value to the 'img' tag. In this attribute, we link an actual image file with the 'img' tag and this linked image will be displayed on the browser window.
Let's see this happening with an example, on your machine open the text editor and write the code
and save the file with a .html extension. Now open the file by double-clicking and you will see that some image is displayed on the browser window. You can add any image to your page just by linking it with an image tag and 'src' attribute. The image linked can be an image file on your computer or may be an image that is somewhere over the web. You may use this link to download or copy the image address and use it on your webpage. All the image files are royalty-free, stock images on the above link.
** If you are a new subscriber and don't know anything about using a text editor to write a webpage then use this link where I will guide you to the pure basics of writing your first webpage.
While we are at it, let's also talk about html attributes. An attribute in HTML is just a way of providing additional information about an HTML element to the browser. An attribute always comes in pair, i.e. it has a name and has a value. Like in the example in the 'img' tag we have used the attribute 'src'. 'src' is the name of the 'source' attribute and we provided its value after the '=' in a set of "" (quotation marks), as "https://placeimg.com/640/480/tech". You should also note that every attribute in HTML is always specified in the opening tag only (if there are opening and closing tags both).
**To delve deeper into other types of HTML attributes you should visit MDN Docs. It is like a holy book of front end web-developers and all the technologies are documented and explained in it.
In and img tag along with the 'src' attribute we commonly use an 'alt' attribute. It is best practice to use an 'alt' attribute as it provides a way for the screen readers to read the value given to the 'alt' attribute for the visually impaired. We provide a description of the image as the value in the 'alt' attribute. If the image is not available or corrupt then the alt text will be displayed in its place. Let's see with an example of the usage of the 'alt' attribute.
<img src="https://placeimg.com/640/480/tech" alt="a tech image from placeimg.com">
Comments
Post a Comment