Image Magic in HTML: Adding Visuals to Your Website
Learning Objective: Master the art of inserting images into your HTML documents to enhance visual
appeal and user experience.
1. Picture Perfect: The <img> Tag:
The cornerstone of image insertion is the <img> tag. It acts like a magic box, telling your browser to
display an image at a specific location within your HTML code.
Example:
<img src="image.jpg" alt="My awesome picture">
Key attributes of the <img> tag:
• src: Specifies the path to the image file (e.g., "image.jpg").
• alt: Provides alternative text describing the image for accessibility and SEO.
2. Location, Location, Location:
The src attribute defines where your image lives. It can be:
• Local: Stored in the same folder as your HTML file (e.g., "image.jpg").
• Relative: Referenced from a subfolder or parent directory (e.g., "images/banner.png").
• Absolute: Using a full URL pointing to the image online (e.g., "<invalid URL removed>").
3. Size Matters (Sometimes):
Control the size of your images using the width and height attributes. Remember, specifying both might
distort the image, so use them with caution.
Example:
<img src="portrait.jpg" alt="My portrait" width="200"
height="150">
4. Styling and Aligning:
Like text, images can be styled using CSS. Target the <img> tag with CSS selectors to adjust alignment,
borders, or other visual properties.
Example:
<img src="product.jpg" alt="Cool product" style="border: 5px
solid #ccc; float: right;">
5. Accessibility Magic with alt Text:
The alt attribute is more than just decoration. It provides alternative text for users who can't see the
image due to accessibility issues or slow internet connections. Descriptive alt text improves SEO and
user experience.
Example:
<img src="cat.jpg" alt="A fluffy cat playing with a ball of
yarn">
6. Beyond the Basics:
Explore advanced features like:
• Decorative borders: Use the border attribute to add borders around your images.
• Image maps: Create clickable regions within an image using <map> and <area> tags.
• Responsive images: Adapt image sizes to different screen sizes using image attributes and
media queries.
7. Remember:
• Optimize image sizes for faster loading times.
• Use relevant alt text for every image.
• Experiment and have fun adding visual flair to your web creations!
Other Resources:
• W3Schools Image Tutorial: https://www.w3schools.com/tags/tag_img.asp:
https://www.w3schools.com/tags/tag_img.asp
• Mozilla Developer Network: https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/img: https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/img
• A List Apart: https://alistapart.com/article/responsive-images:
https://alistapart.com/article/responsive-images
Try it Now!
Write HTML to create the same output as shown in the figure below.
<!-- Kitten image URL -->
https://raw.githubusercontent.com/appbrewery/webdev/main/kitten.jpeg
<!-- Puppy image URL -->
https://raw.githubusercontent.com/appbrewery/webdev/main/puppy.gif
