Let’s begin with Lecture 8 of the HTML5 & CSS3 series. Making Clickable Links with Tag In HTML. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand how to create clickable links using the
<a>tag - Know how to link to other webpages or files on your site
- Be able to open links in a new tab
- Add email and download links
- Make a fun “Mini Adventure Game” webpage with clickable choices!
🔗 What is a Link?
A link, or hyperlink, lets users click on text or an image and go to another page, file, or website.
Think of it like this:
A link is like a magic door — when you click it, it takes you somewhere else instantly!
📡 The <a> Tag – Anchor Tag
We use the <a> tag (short for anchor ) to make links.
Basic Syntax:
<a href="https://www.example.com">Click here!</a>Let’s break it down:
| Part | Description |
|---|---|
<a> | Opening anchor tag |
href | Hyperlink reference — where the link goes |
Click here! | The clickable text |
</a> | Closing anchor tag |
🌐 Example: Link to Another Website
<p>Visit <a href="https://www.wikipedia.org">Wikipedia</a> to learn new things!</p>🎯 Output:
Visit Wikipedia to learn new things!
📁 Link to Another Page on Your Site
You can also link between your own HTML pages.
Example:
<a href="about-me.html">Go to My Profile</a>This will take users to your about-me.html page.
🖥️ Open Link in a New Tab
To make a link open in a new browser tab, add target="_blank":
<a href="https://www.youtube.com" target="_blank">Watch videos on YouTube</a>This is useful so people don’t leave your website when they click a link.
📨 Create an Email Link
Want to let people email you just by clicking? Use mailto:
<a href="mailto:you@example.com">Send me an email!</a>When clicked, this opens the user’s default email app with a new message ready.
📥 Create a Download Link
If you have a file (like a PDF or image), you can make it downloadable:
<a href="my-file.pdf" download>Download My File</a>Or specify a custom name:
<a href="resume.pdf" download="My_Resume.pdf">Download Resume</a>💻 Try This: Build a Mini Adventure Game
Let’s create a simple interactive game where users click to choose their path!
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
adventure-game.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Mini Adventure Game</title>
</head>
<body>
<h1>Choose Your Adventure!</h1>
<p>You are standing at a crossroads. Which way do you go?</p>
<ul>
<li><a href="forest.html" target="_blank">Enter the Dark Forest</a></li>
<li><a href="castle.html" target="_blank">Approach the Mysterious Castle</a></li>
<li><a href="cave.html" target="_blank">Explore the Hidden Cave</a></li>
</ul>
<p><a href="mailto:game-support@example.com">Contact Game Support</a></p>
</body>
</html>Note: You can create forest.html, castle.html, and cave.html Later, to expand the game!
Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a mini adventure game with clickable choices!
🧪 Try It Yourself!
- Add a download link to a fun picture or note.
- Change one of the adventure options to open in the same tab.
- Add a paragraph with a link to your favorite game.
- Try linking
index.htmlto your adventure game.
🚀 Next Lecture Preview:
In Lecture 9, we’ll learn how to use unordered and ordered lists <ul> and <ol>to neatly organize items — like your favorite games, books, or pizza toppings!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
HTML5 and CSS3 Compleate Series
