HTML Links and Images: Making Your Web Pages Interactive and Engaging

Hello again!

Now that you’re comfortable with headings and paragraphs, it’s time to make your web pages more interactive and visually appealing. In this blog, we’ll explore how to add links and images to your content.

By the end of this post, you’ll be able to:

• Create hyperlinks to other web pages.
• Display images on your web page.
• Combine links and images for even more functionality.

Excited? Let’s dive in!

Adding Links in HTML

Links (or hyperlinks) are what make the web a web. They connect pages and websites together. In HTML, we use the <a> tag to create a link.

Basic Link Syntax

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

• <a>: Stands for “anchor.” It’s the tag used to create links.
• href: An attribute that specifies the URL of the page the link goes to.
• Link Text: The clickable text that users see.

Opening Links in a New Tab

To make a link open in a new browser tab, add the target attribute:

<a href="https://www.example.com" target="_blank">Open Example.com in a New Tab</a>

• target="_blank": Instructs the browser to open the link in a new tab or window.

Linking to a Section on the Same Page

You can also create links that jump to different sections within the same page using anchor links.

<!-- Target Section -->
<h2 id="about-me">About Me</h2>
<p>This is the About Me section.</p>

<!-- Link to Target Section -->
<a href="#about-me">Go to About Me</a>

• id: An attribute that uniquely identifies an element on the page.
• href="#id": Links to the element with the matching id.

Try It Yourself

Practice creating links that open in a new tab or jump to sections within the page:

Try it Yourself

Adding Images in HTML

Images can make your web pages more engaging and visually appealing. The <img> tag is used to insert images.

Basic Image Syntax

<img src="https://via.placeholder.com/150" alt="Description of the image">

• <img>: The image tag. Note that it doesn’t have a closing tag.
• src: Specifies the path to the image file.
• alt: Provides alternative text if the image can’t be displayed (also important for accessibility).

Displaying an Image from a URL

You can display images hosted on the web:

<img src="https://via.placeholder.com/150" alt="Placeholder Image">

Try It Yourself

Click below to add an image to your page:

Try it Yourself

Adjusting Image Size

You can control the size of your image using the width and height attributes (in pixels):

<img src="https://via.placeholder.com/150" alt="Placeholder Image" width="300" height="200">

Try It Yourself

Experiment with resizing images:

Try it Yourself

Combining Links and Images

Want to make an image clickable? You can wrap the <img> tag inside an <a> tag.

<a href="https://www.example.com">
  <img src="https://via.placeholder.com/150" alt="Example Website">
</a>

Example: Clickable Image

• Now, when users click on the image, they’ll be taken to the specified URL.

Try It Yourself

Practice creating a clickable image:

Try it Yourself

Alternative Text and Accessibility

The alt attribute in the <img> tag is crucial for accessibility:

• For Users with Visual Impairments: Screen readers read the alt text aloud.
• If the Image Fails to Load: The alt text is displayed in place of the image.

Example:

<img src="missing-image.jpg" alt="Descriptive text about the image">

Always provide meaningful alt text for your images.

Practice Time!

Let’s put it all together. Here’s a challenge for you:

1. Create a web page with:
   • A heading that says “My Favorite Website.”
   • A paragraph explaining why you like it.
   • An image representing the website.
   • A link (could be the image or text) to the website.
2. Use the Try it Yourself editor to build and test your code.

Need a Starting Point?

<h1>My Favorite Website</h1>
<p>I love visiting <a href="https://www.example.com">Example.com</a> because it has amazing content!</p>
<img src="https://via.placeholder.com/300x200" alt="Screenshot of Example.com" width="300">

• You can replace the URL and image source with your actual favorite website and image.

Try it Yourself

Pro Tips for Links and Images

• Check Your URLs: Make sure the href and src attributes point to valid URLs.
• Use Meaningful Link Text: Instead of “Click here,” use descriptive text like “Visit Example.com.”
• Optimize Image Size: Large images can slow down your page. Use appropriate dimensions and consider image compression.

Why This Matters

Adding links and images to your web pages:

• Enhances User Experience: Interactive elements keep users engaged.
• Improves Navigation: Links help users find more content.
• Adds Visual Appeal: Images can convey messages that words sometimes can’t.

What’s Next?

Great job! You’ve learned how to add links and images to your web pages. Next, we’ll explore lists and tables to organize information neatly. Imagine creating bullet points or data tables with ease. See you in the next blog!