Lesson 3: Links and Images - Connecting Pages and Adding Visuals

What You'll Learn

How to create links to other pages
Different types of links (internal, external, anchor)
How to add images to your web pages
Image attributes and best practices
How to organize your website files

Why This Matters

Links and images are fundamental to the web. Links connect pages together (that's why it's called the World Wide Web!), and images make websites visually engaging. Every website uses these essential elements.

Part 1: Creating Links

Basic Link Syntax

<a href="https://www.example.com">Click here</a>

Breaking it down:

<a> - Anchor tag (creates a link)
href - Hypertext Reference (where the link goes)
Text between tags - What users click on

External Links (Other Websites)

<!DOCTYPE html>
<html>
<head>
    <title>My Links</title>
</head>
<body>
    <h1>My Favorite Websites</h1>
    
    <p>Visit <a href="https://www.google.com">Google</a> to search.</p>
    <p>Learn coding at <a href="https://www.freecodecamp.org">freeCodeCamp</a>.</p>
    <p>Check out <a href="https://www.github.com">GitHub</a> for code.</p>
</body>
</html>

Important: Always include https:// for external links!

Opening Links in New Tab

<a href="https://www.example.com" target="_blank">Visit Example</a>

The target="_blank" attribute opens the link in a new browser tab.

Best practice: Use this for external links so users don't leave your site.

Internal Links (Within Your Site)

Link to other pages in your own website:

<!-- If files are in the same folder -->
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>

<!-- If file is in a subfolder -->
<a href="pages/services.html">Our Services</a>

<!-- If file is in parent folder -->
<a href="../index.html">Home</a>

File structure example:

my-website/
├── index.html
├── about.html
├── contact.html
└── pages/
    └── services.html

Part 2: Different Types of Links

Email Links

<a href="mailto:hello@example.com">Send us an email</a>

Clicking this opens the user's default email program.

With subject and body:

<a href="mailto:hello@example.com?subject=Hello&body=I have a question">Email Us</a>

Phone Links

<a href="tel:+15551234567">Call us: (555) 123-4567</a>

On mobile devices, this will offer to dial the number.

Download Links

<a href="files/document.pdf" download>Download PDF</a>

The download attribute prompts the user to save the file.

Anchor Links (Jump to Section)

Link to a specific section on the same page:

<!DOCTYPE html>
<html>
<head>
    <title>Long Page</title>
</head>
<body>
    <h1>Table of Contents</h1>
    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#chapter1">Chapter 1</a></li>
        <li><a href="#chapter2">Chapter 2</a></li>
    </ul>
    
    <h2 id="introduction">Introduction</h2>
    <p>This is the introduction section...</p>
    
    <h2 id="chapter1">Chapter 1</h2>
    <p>This is chapter 1...</p>
    
    <h2 id="chapter2">Chapter 2</h2>
    <p>This is chapter 2...</p>
    
    <a href="#top">Back to Top</a>
</body>
</html>

How it works:

Add an id attribute to the target element
Link to it using # + the ID name
Clicking scrolls to that section

Part 3: Adding Images

Basic Image Syntax

<img src="photo.jpg" alt="A beautiful sunset">

Breaking it down:

<img> - Image tag (self-closing, no </img>)
src - Source (path to the image file)
alt - Alternative text (describes the image)

Why Alt Text Matters

<img src="dog.jpg" alt="Golden retriever puppy playing with a ball">

Alt text is crucial for:

Accessibility - Screen readers read it to visually impaired users
SEO - Search engines use it to understand images
Fallback - Shows if image fails to load

Good alt text:

✅ "Golden retriever puppy playing with a ball"
✅ "Chart showing sales growth from 2020 to 2024"
✅ "Person typing on a laptop at a desk"

Bad alt text:

❌ "image1.jpg"
❌ "picture"
❌ "dog" (too vague)

Image File Paths

Same folder:

<img src="photo.jpg" alt="Description">

In a subfolder:

<img src="images/photo.jpg" alt="Description">

Recommended folder structure:

my-website/
├── index.html
├── about.html
└── images/
    ├── photo1.jpg
    ├── photo2.jpg
    └── logo.png

Part 4: Image Formats

Common Image Formats

Format	Best For	Notes
JPEG (.jpg)	Photos, complex images	Smaller file size, lossy compression
PNG (.png)	Graphics, logos, transparency	Larger file size, lossless, supports transparency
GIF (.gif)	Simple animations	Limited colors, supports animation
SVG (.svg)	Icons, logos, simple graphics	Scalable, perfect quality at any size
WebP (.webp)	All purposes	Modern format, best compression

Recommendations:

Use JPEG for photographs
Use PNG for logos and graphics with transparency
Use SVG for icons and logos when possible
Use WebP if you want smaller file sizes (modern browsers)

Part 5: Image Attributes

Width and Height

<!-- Using width/height attributes -->
<img src="photo.jpg" alt="Photo" width="300" height="200">

<!-- Using just width (height adjusts automatically) -->
<img src="photo.jpg" alt="Photo" width="500">

Note: Later we'll use CSS for sizing, but these attributes help prevent layout shifts while loading.

Title (Tooltip)

<img src="logo.png" alt="Company logo" title="Our Company - Since 2024">

The title shows a tooltip on hover (not essential, alt is more important).

Part 6: Images as Links

You can make images clickable:

<a href="https://www.example.com">
    <img src="logo.png" alt="Example Company">
</a>

Common use cases:

Logo links to homepage
Product images link to product pages
Banner ads link to advertiser websites
Thumbnail images link to full-size versions

Part 7: Complete Example - Portfolio Page

Create this folder structure:

lesson-03/
├── portfolio.html
└── images/
    ├── profile.jpg
    ├── project1.jpg
    └── project2.jpg

portfolio.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>
<body>
    <h1>Welcome to My Portfolio</h1>
    
    <img src="images/profile.jpg" alt="Photo of me at my desk" width="300">
    
    <h2>About Me</h2>
    <p>
        Hi! I'm a web developer learning HTML and CSS. 
        Check out my <a href="#projects">projects</a> below!
    </p>
    
    <h2 id="projects">My Projects</h2>
    
    <h3>Project 1: Recipe Website</h3>
    <a href="project1.html">
        <img src="images/project1.jpg" alt="Screenshot of recipe website" width="400">
    </a>
    <p>A website featuring my favorite recipes.</p>
    <p><a href="project1.html">View Project →</a></p>
    
    <h3>Project 2: Photo Gallery</h3>
    <a href="project2.html">
        <img src="images/project2.jpg" alt="Screenshot of photo gallery" width="400">
    </a>
    <p>A gallery of my photography work.</p>
    <p><a href="project2.html">View Project →</a></p>
    
    <hr>
    
    <h2>Contact Me</h2>
    <p>
        <a href="mailto:hello@example.com">Email me</a> | 
        <a href="https://www.github.com/yourusername" target="_blank">GitHub</a> | 
        <a href="https://www.linkedin.com/in/yourname" target="_blank">LinkedIn</a>
    </p>
    
    <p><a href="#top">Back to Top</a></p>
</body>
</html>

This example shows:

Profile image with proper sizing
Internal anchor links
Images as links
Multiple types of links (email, external, internal)
Proper alt text for all images

Part 8: Best Practices

Image Optimization

Resize before uploading - Don't use a 4000px image when you only need 400px
Compress images - Use tools like TinyPNG or ImageOptim
Choose right format - JPEG for photos, PNG for graphics
Use descriptive filenames - sunset-beach.jpg not IMG_1234.jpg

Link Best Practices

Use descriptive link text:

- ✅ "Read our guide to web development"

- ❌ "Click here"

Open external links in new tabs:

<a href="https://external.com" target="_blank">External Site</a>

Use relative paths for internal links:

- ✅ <a href="about.html">About</a>

- ❌ <a href="https://mysite.com/about.html">About</a>

Test all links - Make sure they work!

Accessibility

Always include alt text for images
Use meaningful link text (not "click here")
Don't use "image of..." in alt text (screen readers already say "image")

Practice Exercises

Exercise 1: Navigation Menu

Create a file site-nav.html with:

A heading "My Website"
A navigation menu with links to: Home, About, Services, Contact
Use anchor links to jump to each section on the same page
Create the four sections with content

Exercise 2: Photo Gallery

Create a folder structure:

gallery/
├── index.html
└── images/
    ├── photo1.jpg
    ├── photo2.jpg
    └── photo3.jpg

Create a simple photo gallery with:

Title and description
At least 3 images
Captions for each image
Each image is a different width

Exercise 3: Resource Links Page

Create resources.html with:

Links to 5 helpful websites (open in new tabs)
A download link to a PDF file
An email link
A phone link

Common Mistakes

Mistake 1: Missing Alt Text

<img src="photo.jpg">  <!-- ❌ No alt text! -->

Fix:

<img src="photo.jpg" alt="Description of photo">  <!-- ✅ -->

Mistake 2: Wrong File Path

<img src="photo.jpg" alt="Photo">  <!-- ❌ If file is in images/ folder -->

Fix:

<img src="images/photo.jpg" alt="Photo">  <!-- ✅ Correct path -->

Mistake 3: Forgetting http:// for External Links

<a href="www.google.com">Google</a>  <!-- ❌ Won't work! -->

Fix:

<a href="https://www.google.com">Google</a>  <!-- ✅ Include https:// -->

Mistake 4: Empty Link Text

<a href="about.html"></a>  <!-- ❌ No text to click -->

Fix:

<a href="about.html">About Us</a>  <!-- ✅ Descriptive text -->

Mistake 5: Using Images Without Permission

❌ Don't just copy images from Google
✅ Use your own photos
✅ Use stock photo sites (Unsplash, Pexels)
✅ Make sure you have rights to use images

Quick Reference

Link Attributes

<a href="url">Link text</a>           <!-- Basic link -->
<a href="url" target="_blank">...</a> <!-- Open in new tab -->
<a href="#section">...</a>            <!-- Anchor link -->
<a href="mailto:email">...</a>        <!-- Email link -->
<a href="tel:phone">...</a>           <!-- Phone link -->
<a href="file.pdf" download>...</a>   <!-- Download link -->

Image Attributes

<img src="path" alt="description">                    <!-- Basic image -->
<img src="path" alt="..." width="300">               <!-- With width -->
<img src="path" alt="..." width="300" height="200">  <!-- Width & height -->
<img src="path" alt="..." title="tooltip">           <!-- With tooltip -->

What You Learned

✅ How to create links to other pages
✅ Different types of links (external, internal, email, phone, anchor)
✅ How to open links in new tabs
✅ How to add images to web pages
✅ The importance of alt text for accessibility
✅ How to organize website files and folders
✅ How to make images clickable
✅ Best practices for links and images

What's Next?

In the next lesson, you'll learn about lists and tables - how to organize and display structured data on your web pages!