Lesson 3: Links & Images

Goal: Add clickable links and images to a webpage.

1. Links: <a href="">

html

<a href="https://www.google.com">Visit Google</a>

• <a> stands for anchor
• href means "hypertext reference," the destination address (URL)
• The text between the tags is what gets clicked (called the link text)

Links to other pages on your own site (relative links)

html

<a href="about.html">About Me</a>

<a href="contact.html">Contact</a>

• If the file is in the same folder, no https:// is needed, just the filename

Links to other websites (absolute links)

html

<a href="https://www.wikipedia.org">Wikipedia</a>

• For outside websites, always write the full https://

Opening a link in a new tab

html

<a href="https://www.google.com" target="_blank">Visit Google</a>

• target="_blank" opens the link in a new tab
• Best practice: use it mainly for external links, not your own site's internal pages

Email and phone links

html

<a href="mailto:someone@example.com">Email Me</a>

<a href="tel:+966500000000">Call Me</a>

2. Images: <img src="" alt="">

html

<img src="photo.jpg" alt="A sunset over the mountains">

• <img> has no closing tag (don't write </img>)
• src = the image file's location (source)
• alt = alternative text describing the image

Why alt text matters

Rule: Always write meaningful alt text. Don't leave it empty or use generic words like "image" or "photo."

❌ alt="image1"
✅ alt="Team photo at the 2026 company retreat"

Image paths: two common cases

Image in the same folder as the HTML file:

html

<img src="logo.png" alt="Company logo">

Image in a subfolder (a common way to stay organized):

html

<img src="images/logo.png" alt="Company logo">

Image size (basic approach, CSS later)

html

<img src="logo.png" alt="Company logo" width="200" height="100">

• Width and height in pixels
• Tip: it's better to control size with CSS later, but this is fine for now

3. Combining Links and Images (a clickable image/logo)

html

<a href="index.html">

    <img src="logo.png" alt="Go to homepage">

</a>

• Putting an <img> inside an <a> makes the whole image clickable
• This is a very common way to link a logo to the homepage

Summary Table

Practice: A Mini "Portfolio" Page

Add to your Lesson 2 "About Me" page:

1.   A profile picture with proper alt text

2.   A link to one social media profile (opens in a new tab)

3.   A link to a second page named contact.html (the file doesn't need to exist yet for practice)

4.   Make the profile picture clickable, linking to index.html

Example for students:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>About Me</title>

</head>

<body>

    <h1>About Ahmed</h1>

    <a href="index.html">

        <img src="profile.jpg" alt="Ahmed smiling, profile photo" width="150">

    </a>

    <p>I am a <strong>web design</strong> student who is <em>really</em> excited to learn HTML.</p>

    <h2>My Skills</h2>

    <ul>

        <li>Time management</li>

        <li>Problem solving</li>

        <li>Teamwork</li>

    </ul>

    <h2>Find Me Online</h2>

    <p><a href="https://www.linkedin.com" target="_blank">My LinkedIn</a></p>

    <p><a href="contact.html">Contact Page</a></p>

</body>

</html>