The previous lesson of the html lessons series was about css margin and padding. In this lesson we will explore the image tag and anchor tag in
html.
Image Tag:
The image tag is used to display an image in html web page.
<img src="path_of_the_image_to_display" alt="Alternative Text" width="500" height="500" />
There is no separate closing tag for an image tag. Let us display an image using the html image tag:
Important attributes of image tag:
1. Source(src) of the image tag is the path of the image that we want to display. Like for example the path of the above php image is (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUn4ogS56qDZEsNaV5mSTDwmc5NtsGuIOkZLTnVaixiBKaJPKlxX0UdSvpDu9tsMAW2QpTvM2pH4iY6eP1yaC8MLyi6j7Wt6buKEH_Szuv_tvWGNETPoWQLpxtHRPSeJ4qVbSIqG6E9A/s400/html-image-tag.jpg). If you paste the image src path in your browser, you should be able to see the image you want to display.
2. Alt attribute of the image tag is used to display the text inside the alt attribute in case the image fails to load due to some reason. If the source path of the image provided is wrong or there is breakage of connection then in such cases image will fail to load and the alt text will be shown in the image place.
3. Width attribute is used to assign width to the image in the web page.
4. Height attribute is used to assign height to the image in the web page.
The width and height assigned to the image are in pixels.
Anchor Tag:
The html anchor tag is used to link some text, an image, a button or any other html content to another web page.
<a href="http://google.com">Link to google</a>
Link to google
In the above example we have linked the text "Link to google" to (google.com). The text written between the opening and closing anchor tags will appear as a link and the url provided in the href of the anchor tag will be the link of the page we want the text to take us to. In the similar manner we can link an image to another webpage like this:
<a href="http://google.com">
<img src="http://www.jyte.com/wp-content/uploads/2013/11/google-hummingbird.jpg" width="500" height="300" alt="Google.com" />
</a>
Related PostsImage Tag:
The image tag is used to display an image in html web page.
<img src="path_of_the_image_to_display" alt="Alternative Text" width="500" height="500" />
There is no separate closing tag for an image tag. Let us display an image using the html image tag:
Important attributes of image tag:
1. Source(src) of the image tag is the path of the image that we want to display. Like for example the path of the above php image is (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUn4ogS56qDZEsNaV5mSTDwmc5NtsGuIOkZLTnVaixiBKaJPKlxX0UdSvpDu9tsMAW2QpTvM2pH4iY6eP1yaC8MLyi6j7Wt6buKEH_Szuv_tvWGNETPoWQLpxtHRPSeJ4qVbSIqG6E9A/s400/html-image-tag.jpg). If you paste the image src path in your browser, you should be able to see the image you want to display.
2. Alt attribute of the image tag is used to display the text inside the alt attribute in case the image fails to load due to some reason. If the source path of the image provided is wrong or there is breakage of connection then in such cases image will fail to load and the alt text will be shown in the image place.
3. Width attribute is used to assign width to the image in the web page.
4. Height attribute is used to assign height to the image in the web page.
The width and height assigned to the image are in pixels.
Anchor Tag:
The html anchor tag is used to link some text, an image, a button or any other html content to another web page.
<a href="http://google.com">Link to google</a>
Link to google
In the above example we have linked the text "Link to google" to (google.com). The text written between the opening and closing anchor tags will appear as a link and the url provided in the href of the anchor tag will be the link of the page we want the text to take us to. In the similar manner we can link an image to another webpage like this:
<a href="http://google.com">
<img src="http://www.jyte.com/wp-content/uploads/2013/11/google-hummingbird.jpg" width="500" height="300" alt="Google.com" />
</a>
Basics of Html
Html Text Tags
Html Form Elements
Html Tables
Row and Column Span in html
Iframe tag in html
Simple 2 column layout of a web page
3 column layout of a web page
No comments:
Post a Comment