Lets explore how to add images using HTML. The beautiful land of pixels where every image serves as a vibrant brushstroke, painting our story onto the canvas of the web.
The Image Tag
I reckon you've seen a few "wanted" posters in your time. Now imagine your webpage as the wild frontier town, and you as the sheriff wanting to put up posters (images) on the walls (webpages). How do you do it? By using the <img> element.
This is a self-closing tag that is written as <img />. It requires a src attribute, which is the path to the image you want to display, like so:
<img src="path/to/your/image.jpg" />
That's like adding a picture to your saloon wall. Only in this case, the saloon wall is your webpage and the picture is fetched from "path/to/your/image.jpg".
You can change the size of your image by setting the width and height attributes. Just be sure to use the same unit (like pixels) for both to avoid distorting your image. It's a bit like resizing your poster without stretching out the outlaw's face:
<img src="path/to/your/image.jpg" width="500" height="300" />
This code tells the browser: "Fetch me the image from path/to/your/image.jpg and ensure it fits in a frame 500 pixels wide and 300 pixels high."
The 'ALT' Attribute
Now, imagine you put up that poster, but your townsfolk can't see it. Maybe the poster has faded in the sun or the wind's torn it down. In HTML, that can happen too! A link may break, or the image might take too long to load. So, what do you do?
This is where the alt attribute comes to your rescue. The alt attribute provides information about an image if a user cannot view it.
Users might not see an image due to slow internet, src attribute errors, or screen reader usage.
<img src="path/to/your/image.jpg" alt="A detailed description of the image" />
It's like writing a brief description on your poster about the outlaw - what they look like, what they're wanted for. So even if the poster fades or tears, your townsfolk still know who to watch out for. Web browsers displays the text from the alt attribute if it can't display the image.
That's a wrap on HTML images, but buckle up, because next we'll be exploring the landscape of HTML lists!