Images are very important parts of a webpage. Apart from the easier passage of information they offer, they also make a website looks very lively and stunning.
An image in a web page can be created with the HTML <img>
tag which is an empty tag that can be self closed or not closed at all. The images created with the <img> tag are inline-block
elements meaning, they take up the width that is appropriate for the display of their content.
<!-- OR -->
attribute is used to specify an image to display. It's value is the path to the image to display.
Above, we are displaying an image located in same folder as our webpage.
Since HTML images are inline-block elements, we can therefore set their heights
in either pixels
to fit our liking and that of the webpage.
<img height='120px' width='150px' src='happy_children.jpeg'/><br/>
<img height='60%' width='50%' src='happy_children.jpeg'/>
Copy PRACTICE IT
Some time, an image may not load as a result of various reasons which may include poor network state or incorrect image path. The alternative text or Alt
attribute is therefore used in specifying a text to display when an image refuses to load. The value may be a description of the image or just any text related to the image.
<img src='beginner.jpg' height='80%' width='100%' alt='A stack beginner image'/>
Copy PRACTICE IT
attribute is also important cause it helps search engines crawlers to understand what an image is about.
- Images are important for easier communication and beautification of a webpage.
- Images can be created in an HTML document using the <img> tag and the src attribute whose value is the path to the image.
- By default, HTML images are inline-block elements meaning they take up only the width that is appropriate for their display. This also means we can set their heights and widths.
- Images also have an alt or alternative text attribute whose value is a text to display when an image refuses to load for any reason.
- The alt attribute is also important for search engine's crawlers to understand what our images are all about.