Links and images

Welcome to your next step in web development! Up until now, your web pages might have looked like simple text documents. Today, we are going to change that. Links are the essential features that actually make the World Wide Web a "web". In this lesson, we will learn how to connect pages together and bring them to life with pictures.

Let's dive in!

Creating Hyperlinks (The <a> Tag)

To create a link in HTML, we use what is called an "anchor" tag, written as <a>. By itself, an anchor tag does not do much, because you have to tell the browser exactly where the link should go.

We do this using an attribute. Think of an attribute as a special instruction given inside an HTML tag. For links, the required attribute is called href, which stands for hypertext reference. The href attribute holds the destination web address.

Here is how you write a simple text link:

<a href="https://www.example.com">Visit our website!</a>

In this example, the text "Visit our website!" becomes clickable, and the href tells the browser where to take the user.

Adding Images (The <img> Tag)

Websites would be pretty boring without pictures. To add a picture, we use the image tag, written as <img>.

Unlike the anchor tag, the image tag is "self-closing", which is also known as a void element. This means it does not wrap around text, so it does not need a closing </img> tag. It simply places the image directly onto the page.

The <img> tag needs two very important attributes to work properly:

• src (Source): This tells the browser exactly where the image file is located.
• alt (Alternative text): This is a written description of the image.

Why is alt so incredibly important? You should always include the alt attribute! If the image breaks or takes too long to load, the browser will display this text instead. Most importantly, it provides critical accessibility for your website. Users who are visually impaired rely on screen reading software to read web pages out loud, and the alt text safely describes the picture to them.

Here is what a complete image tag looks like:

<img src="puppy.jpg" alt="A fluffy golden retriever puppy playing in the grass.">

The Big Concept: Absolute vs. Relative Paths

When you use an href or a src attribute, you are giving the browser a "path" to find a specific file. There are two main types of paths, and understanding the difference is a huge milestone for beginners!

Absolute Paths Think of an absolute path like a complete mailing address. A real mailing address includes the country, state, city, street, and house number to pinpoint an exact location on Earth. On the web, an absolute path always starts with a protocol like https:// and includes the full website domain name. You use absolute paths when you want to link to completely different websites.

Relative Paths Think of a relative path like giving someone walking directions based on where you are currently standing. Instead of a full address, you might just say, "go to the room next door" or "go up one floor". On the web, relative paths are used to link to files or images that live inside your very own project folder.

For example, if you have a picture saved in an "images" folder right next to your current web page, you can use a relative path like this:

<img src="./images/pic.jpg" alt="A beautiful sunset.">

The ./ simply tells the browser to start looking in the current folder you are in.

Clickable Images

Now that you know how to make links and images, you can combine them! If you want an image to act as a button that takes the user to a new page, you simply wrap your self-closing <img> tag inside of an <a> tag.

Here is a quick example of a clickable image:

<a href="https://www.example.com">
  <img src="./images/button.png" alt="Click here to visit our sponsor.">
</a>

Summary

Great job! You have unlocked the ability to connect web pages and display media. Let's review the core takeaways:

• Hyperlinks: Use the <a> tag with an href attribute to create text links.
• Images: Use the self-closing <img> tag with a src attribute to display pictures.
• Accessibility: Always include descriptive alt text on your images for screen readers and safety.
• Absolute paths: Use full addresses (https://...) to point to other websites.
• Relative paths: Use local directions (./...) to point to files inside your own project folder.
• Clickable images: You can make images clickable by placing an <img> element inside an <a> element.