Day 4/365 Days of Full Stack Challenge: Bringing Your Page to Life - Inserting Images in HTML

Hello and welcome to Day 4,

I'm Dhanian, and I'm thrilled to see you continuing on this path. So far, your web pages have been informative and well-structured, but they've been missing a key ingredient that defines the modern web: visual content.

Today, we're changing that. We're going to learn how to embed images, making your pages more engaging, illustrative, and professional. We'll also cover one of the most important practices in web development: setting alt attributes for accessibility.

Let's turn our words into a visual story.

The <img> Tag: The Image Element

What it is: The <img> tag is used to embed an image into an HTML document. It is a self-closing tag, which means it doesn't have a separate closing tag like </img>. You can write it as <img> or, more commonly, as <img />.

How it works: Unlike the elements we've used before, the <img> tag doesn't wrap around content. Instead, it uses attributes to specify which image to display and how to describe it. The two most critical attributes are src and alt.

1. The src (Source) Attribute

What it is: The src attribute is mandatory. It tells the browser the path to the image file you want to display.

How to use it: The path can be:

• Relative URL: The path to an image file located on your own website, relative to the current HTML file. This is the most common method when building your site.
• Absolute URL: The full web address (URL) of an image hosted on another website.

Important Note on Absolute URLs: While it's possible to link to images on other sites (called "hotlinking"), it is generally considered bad practice. It steals bandwidth from the other site, you have no control if the image is moved or deleted, and it can have legal and SEO implications. You should almost always use your own images.

Code Snippet & Example:

<!-- Using a Relative URL (image is in the same folder as the HTML file) -->
<img src="my-cat.jpg" />

<!-- Using a Relative URL (image is in a 'images' subfolder) -->
<img src="images/website-logo.png" />

<!-- Using an Absolute URL (generally not recommended) -->
<img src="https://example.com/path/to/image.jpg" />

2. The alt (Alternative Text) Attribute

What it is: The alt attribute provides a text alternative for the image. It is mandatory for accessibility and best practices.

Why it's non-negotiable:

1. Screen Readers: It is read aloud to users who are visually impaired, allowing them to understand the content and purpose of the image.
2. Broken Images: If an image fails to load (due to a broken link, slow connection, or a typo in the src), the alt text will be displayed in its place.
3. SEO (Search Engine Optimization): Search engines use alt text to understand what an image is about, which can help your page rank in image searches.

How to write good alt text:

• Be accurate and concise.
• Describe the image's content and its function if it's a link or button.
• For purely decorative images that add no informational value, you can use an empty alt attribute (alt=""), which tells screen readers to skip them.

Code Snippet & Example:

<!-- Descriptive alt text for a meaningful image -->
<img src="chart-quarterly-sales.png" alt="A bar chart showing a 15% increase in sales for Q3 2023." />

<!-- Alt text for a functional image (a logo that links to the homepage) -->
<a href="index.html">
  <img src="logo.png" alt="Dhanian's Blog - Return to homepage" />
</a>

<!-- An empty alt attribute for a decorative image -->
<img src="divider-flourish.png" alt="" />

Optional but Useful Attributes

While src and alt are essential, you will often use these two optional attributes:

width and height:

• These attributes set the intrinsic size of the image in pixels.
• It's a good practice to set them, as it helps the browser reserve the correct space for the image before it loads, preventing the page content from jumping around as images load.

<img src="photo.jpg" alt="A description" width="800" height="600" />

Note: We will later learn to use CSS for responsive image sizing, but using HTML attributes for the intrinsic size is a performance best practice.

Putting It All Together: A Complete Example

Let's create a simple travel blog post that effectively uses images.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day 4: My Mountain Hike</title>
</head>
<body>

    <h1>Hiking the Pacific Crest Trail</h1>

    <p>Last weekend, I embarked on a breathtaking hike through a section of the PCT. Here are some highlights from the journey.</p>

    <!-- A main hero image with descriptive alt text -->
    <img src="images/hike-panorama.jpg" alt="Panoramic view of mountain ranges from the Pacific Crest Trail on a sunny day" width="1000" height="400" />

    <h2>The Wildlife</h2>
    <p>One of the most amazing parts of the hike was the wildlife we encountered.</p>

    <!-- An image illustrating a specific point -->
    <img src="images/deer-on-trail.jpg" alt="A curious mule deer standing on the trail, looking towards the camera" width="800" height="600" />

    <p>This friendly mule deer watched us pass for several minutes!</p>

    <h2>Essential Gear</h2>
    <p>Here's what was in my pack:</p>
    <ul>
        <li>Sturdy hiking boots</li>
        <li>3L water reservoir</li>
        <li>Topographic map and compass</li>
    </ul>

    <!-- An image of the gear, placed after the list for context -->
    <img src="images/hiking-gear-laid-out.jpg" alt="Hiking gear laid out on a grass field, including boots, a backpack, a water bottle, and a map" width="800" height="600" />

    <p>Remember to <a href="https://lnt.org" target="_blank">Leave No Trace</a> on your adventures!</p>

</body>
</html>

Your Day 4 Challenge:

1. Create a new folder called images inside your project folder.
2. Find 2-3 images you have the rights to use (e.g., your own photos, free-to-use images from sites like Unsplash or Pexels). Save them in your images folder.
3. Create a new HTML file called gallery.html.
4. Build a page showcasing these images. Your page should:
   • Have a title and introductory paragraph.
   • Use the <img> tag to display each image.
   • Use relative paths for the src attribute (e.g., src="images/your-image.jpg").
   • Include a meaningful and descriptive alt attribute for every single image.
   • Optionally, set the width and height of your images.
   • Use headings and paragraphs to provide context for each image.
5. Open your page in a browser. Test it! Try renaming one of your image files in the images folder to create a broken link and see how your alt text appears.

You've now unlocked the ability to create visually rich, accessible, and professional web pages. This is a massive step forward.

Great work today. See you on Day 5.

---

Building a strong foundation is key to becoming a full-stack developer. My ebook, "The Complete Full-Stack Developer Handbook," provides the structured learning and practical projects you need to master these fundamentals and everything that follows.

https://codewithdhanian.gumroad.com/l/gzjvj

— Dhanian