Links and Images
Links (Anchor Tag)
The <a> tag creates clickable links:
<a href="https://example.com">Click here</a>
<a href="about.html">About Us</a>
<a href="mailto:info@example.com">Send Email</a>Images
The <img> tag embeds images. It is a self-closing tag:
<img src="photo.jpg" alt="A beautiful sunset" width="400">📌 Always include alt text!
The alt attribute describes the image for screen readers and if the image fails to load.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links & Images</title>
</head>
<body>
<h1>My Favorite Links</h1>
<p>Visit <a href="https://developer.mozilla.org">MDN Web Docs</a> to learn more.</p>
<p><a href="https://google.com" target="_blank">Open Google in new tab</a></p>
<h2>Example Image</h2>
<img src="https://picsum.photos/400/200" alt="Sample photo" width="400">
</body>
</html>Exercises
Exercise 1. Add a Link and an Image
Easy
Create a link that goes to https://example.com and displays the text "Visit Example", then add an image that uses puppy.jpg with the alt text "A cute puppy".
Use exactly the tags shown in the lesson.
Use exactly the tags shown in the lesson.
Expected Output
A hyperlink and an image with an alt attribute.