Master HTML Basics: Step-by-Step Project-Based Learning for Beginners

Welcome Back! Let’s Add Some Visuals

Hey there! Welcome to Part 3 of our HTML series. By now, you’ve got a solid homepage with some text and a navigation menu. But let’s be real—websites are a lot more interesting when they have images and links that make you want to click around, right? So, today, we’re going to level up your homepage by adding some visuals and making it more interactive.

What’s the Plan?

In this article, we’ll be focusing on two main things: adding images and creating links. We’ll make your homepage more visually appealing and functional. Here’s what you’ll learn:

How to add images to your webpage
How to create clickable links, both internal and external
Adding alt text to images for accessibility and SEO
Creating image links (yes, you can make images clickable too!)

By the end of this article, your homepage will start looking more like a real website. Ready to make your site pop? Let’s get started!

1. Adding Images to Your Webpage

Images are a great way to make your website more engaging. Whether it’s a photo of yourself, a logo, or just some eye-catching visuals, adding images is super easy in HTML.

The img Tag: To add an image, you’ll use the <img> tag. It’s a self-closing tag, meaning it doesn’t need an ending tag.

Here’s the basic syntax:

<img src="images/myphoto.jpg" alt="A picture of me">

src: This attribute specifies the path to your image file.
alt: This attribute provides alternative text for the image, which is important for screen readers and SEO.

Let’s add an image to your homepage. If you don’t have a specific image, you can use a placeholder image for now. Make sure to place your image file in the images folder of your project directory.

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <section>
        <div>
            <h1>Welcome to My Website</h1>
            <p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>
            <img src="images/myphoto.jpg" alt="A picture of me">
        </div>
        <div>
            <h2>About Me</h2>
            <p>I'm a budding web developer, eager to learn and create amazing things. Stay tuned for more!</p>
        </div>
    </section>
</body>
</html>

2. Creating Clickable Links

Now that we’ve added some visuals, let’s talk about links. Links are the backbone of web navigation—they allow users to move from one page to another, or even to different sections of the same page.

The a Tag: To create a link, you’ll use the <a> tag, which stands for "anchor."

Here’s the basic syntax:

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

href: This attribute specifies the URL of the page you want to link to.
Link text: This is the clickable text that users will see.

Let’s add some links to our homepage:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <section>
        <div>
            <h1>Welcome to My Website</h1>
            <p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>
            <img src="images/myphoto.jpg" alt="A picture of me">
            <p><a href="about.html">Learn more about me</a></p>
        </div>
        <div>
            <h2>About Me</h2>
            <p>I'm a budding web developer, eager to learn and create amazing things. Stay tuned for more!</p>
        </div>
    </section>
</body>
</html>

3. Adding Alt Text for Accessibility and SEO

Alt text (alternative text) isn’t just for accessibility—it also helps with SEO by allowing search engines to understand what your images are about.

When adding images, always include a meaningful alt text:

<img src="images/myphoto.jpg" alt="A picture of me at the beach">

This way, if the image fails to load, users (and search engines) can still understand what the image is supposed to represent.

4. Creating Image Links

Want to make your images clickable? You can wrap an image in an anchor (a) tag to turn it into a link:

<a href="gallery.html">
    <img src="images/myphoto.jpg" alt="A picture of me at the beach">
</a>

Let’s add an image link to your homepage:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <section>
        <div>
            <h1>Welcome to My Website</h1>
            <p>Hello! I’m excited to share my journey with you. This is the beginning of something great!</p>
            <a href="gallery.html">
                <img src="images/myphoto.jpg" alt="A picture of me at the beach">
            </a>
            <p><a href="about.html">Learn more about me</a></p>
        </div>
        <div>
            <h2>About Me</h2>
            <p>I'm a budding web developer, eager to learn and create amazing things. Stay tuned for more!</p>
        </div>
    </section>
</body>
</html>

What’s Next?

Your homepage is really starting to come together! 🌟 You’ve added some visuals, made your content more accessible, and even created some clickable links. In the next article, we’ll dive into organizing your content further by learning about lists and tables. This will help you present information in a structured and easy-to-read way.

So keep up the good work, and I’ll see you in the next article!

Adding Images and Links to Your Homepage