Lesson 2.4: Images and Media

🖼️ Welcome to Visual Web Design!

Images and media are what make websites come alive! In this lesson, you'll learn how to properly add images to your webpages, understand different image formats, and most importantly, discover why alt text is crucial for accessibility and search engines. Get ready to make your websites much more engaging and professional!

Great websites aren't just about text - they're about creating visual experiences that engage users and communicate effectively. Learning to use images properly is a crucial skill for any web developer.

📷 Adding Your First Image

The tag is what we use to add images to webpages. Unlike other HTML elements, it's a self-closing tag, which means it doesn't need a separate closing tag.

                Basic Image Syntax
                <img src="myphoto.jpg" alt="A photo of me">
            

The Essential Image Attributes

src - The image file path or URL
alt - Alternative text (describes the image)
width - Image width (optional)
height - Image height (optional)

🗂️ Setting Up Your Image Files

First, let's organize your images properly. Create an "images" folder in your website directory:

my-website/ ├── index.html ├── about.html ├── hobbies.html └── images/ ├── profile-photo.jpg ├── hobbies/ │ ├── guitar.jpg │ └── coding.jpg └── logos/

Create Images Folder

Right-click in your website folder, choose "New Folder," and name it "images".

Add Your Images

Copy or save your image files into the images folder. Use descriptive filenames like "profile-photo.jpg" or "coding-setup.jpg".

Link to Your Images

In your HTML, use the folder path:

📋 Understanding Image Formats

Different image formats serve different purposes. Here's what you need to know:

JPG/JPEG

Best for: Photos

Pros: Small file size, widely supported

Cons: No transparency

PNG

Best for: Graphics, logos, images with transparency

Pros: Supports transparency, sharp text/graphics

Cons: Larger file size

GIF

Best for: Simple animations, small graphics

Pros: Can be animated, small file size for simple images

Cons: Limited colors (256 max)

SVG

Best for: Icons, logos, scalable graphics

Pros: Vector-based, infinitely scalable

Cons: Not for photos

🌟 Quick Decision Guide

Photos of people, places, or things → Use JPG
Logos, icons, or graphics with text → Use PNG
Simple animations or very small graphics → Use GIF
Scalable logos and icons → Use SVG

📱 Controlling Image Size

While you can control image size with width and height attributes, it's better to use CSS for this. For now, let's learn the basic attributes:

                Setting Image Dimensions
                <!-- Fixed size (not recommended) -->
<img src="photo.jpg" width="400" height="300" alt="My photo">

<!-- Responsive (better approach) -->
<img src="photo.jpg" alt="My photo" style="max-width: 100%; height: auto;">
            

⚠️ Important: Maintain Image Proportions

If you only set width OR height (not both), the browser will maintain the image's original proportions. If you set both, you might stretch or squish the image!

♿ The Magic of Alt Text

Alt text (alternative text) is one of the most important accessibility features in web development. It serves multiple purposes:

Why Alt Text Matters

Screen readers: Help visually impaired users understand images
Search engines: Help search engines understand your images
Broken images: Shows when images fail to load
Page speed: Provides immediate context while images load

Writing Good Alt Text

                Good vs. Poor Alt Text Examples
                
                <!-- GOOD: Describes what's important about the image -->
<img src="graduation.jpg" alt="Graduation ceremony with graduates in blue caps and gowns">

<!-- BAD: Doesn't describe the content -->
<img src="graduation.jpg" alt="Graduation photo">

<!-- GOOD: Concise but informative -->
<img src="logo.png" alt="Tech Solutions Inc. company logo">

<!-- GOOD: Functional images get different treatment -->
<img src="search-button.png" alt="Search website">
            

💡 Alt Text Guidelines

Keep it short but descriptive (1-125 characters)
Focus on what's important in the image
Don't start with "Image of" or "Picture of"
For decorative images, use empty alt=""
Make it contextual - how does the image support your content?

🏗️ Building an Image-Rich About Page

Let's put it all together by adding images to your about page:

                Complete About Page with Images
                <!DOCTYPE html>
<html>
<head>
    <title>About Zack - My Website</title>
</head>
<body>
    <h1>About Zack</h1>
    
    <img src="images/profile-photo.jpg" 
         alt="Zack sitting at a computer, smiling" 
         style="max-width: 300px; height: auto; float: right; margin-left: 20px;">
    
    <p>Hi! I'm Zack, and I'm passionate about learning web development.</p>
    
    <h2>My Hobbies</h2>
    
    <h3>Programming</h3>
    <img src="images/hobbies/coding.jpg" 
         alt="Computer screen showing code editor with HTML and CSS" 
         style="max-width: 200px; height: auto;">
    <p>I love building websites and learning new programming languages.</p>
    
    <h3>Music</h3>
    <img src="images/hobbies/guitar.jpg" 
         alt="Acoustic guitar on a wooden chair" 
         style="max-width: 200px; height: auto;">
    <p>Playing guitar helps me relax and be creative.</p>
    
    <p><a href="index.html">← Back to Home</a></p>
</body>
</html>
            

🛠️ Create Your First Image-Rich Page

Add images to your website by following these steps:

Find or create images - Use your own photos, or find free images from sites like Unsplash or Pixabay
Save them in an images folder - Keep them organized
Add them to your about.html page - Include at least 2-3 images
Write meaningful alt text - Describe what's important in each image
Test the page - Make sure everything loads correctly

⚠️ Copyright Reminder

Only use images you have permission to use. Your own photos are safest. If using others' images, make sure they're free to use (look for Creative Commons licenses) or get permission.

🎥 Adding Other Media Types

While images are the most common media, you can also add other types of content:

Video (for the future)

<video src="myvideo.mp4" controls width="400">
    Your browser doesn't support video.
</video>

Audio (for the future)

<audio src="mysong.mp3" controls>
    Your browser doesn't support audio.
</audio>

🚀 Coming Soon: Video and Audio

We'll dive deeper into video and audio in later modules. For now, focus on mastering images - they're the foundation of visual web design!

🎨 Image Layout Tips

Here are some basic layout principles to make your images look professional:

📐 Size Consistently

Use similar image sizes across your site for a cohesive look

⚖️ Balance Text and Images

Don't overcrowd pages - give images space to breathe

🖼️ Use Captions When Helpful

Add context when an image needs explanation

📱 Think Mobile

Make sure images work well on all device sizes

Adding Image Captions

<figure>
    <img src="coding-setup.jpg" alt="My development workspace">
    <figcaption>My current coding setup with dual monitors</figcaption>
</figure>

🎉 Module 2 Complete - You're Ready for Advanced HTML!

Congratulations! You've just completed Module 2 and now have all the fundamental HTML skills needed to build real websites!

✅ What You've Mastered in Module 2:

✅ Complete HTML document structure (DOCTYPE, html, head, body)
✅ Six levels of headings and proper heading hierarchy
✅ Text formatting with , , and

✅ Creating links between pages with tags ✅ Understanding URLs and file paths ✅ Building multi-page websites with navigation ✅ Adding images with proper attributes ✅ Writing meaningful alt text for accessibility ✅ Understanding different image formats ✅ Basic image layout and organization

You now have all the essential HTML skills! You can create complete, multi-page websites with text, links, and images. This is a huge achievement - you're thinking and working like a real web developer! In Module 3, we'll dive into more advanced HTML concepts like lists, tables, forms, and semantic elements that will make your websites even more powerful and professional.

← Back: Links and Navigation Next Module: Advanced HTML →