How to Pass Level 11: Creating Links in HTML
Learning Objective:
By the end of this lesson, you will be able to:
✅ Create absolute URL links (to external websites).
✅ Create relative URL links (to local files).
✅ Understand when to use each type.
Step 1: Understand URL Paths
Before coding, watch the chapter on URL paths and learn:
| Type | Example | When to Use |
|---|
| Absolute URL |
https://www.google.com |
Linking to external websites. |
| Relative URL |
about.html or folder/page.html |
Linking to files within your project. |
Step 2: Create 3 External Links (Absolute URLs)
Use the <a> (anchor) tag with full web addresses.
Example Code:
<html>
<head>
<title>My Links Page</title>
</head>
<body>
<h1>External Links</h1>
<p>Here are some useful websites:</p>
<ul>
<li><a href="https://www.google.com" target="_blank">Visit Google</a></li>
<li><a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a></li>
<li><a href="https://www.youtube.com" target="_blank">Visit YouTube</a></li>
</ul>
</body>
</html>
🔹 Key Notes:
Step 3: Create 2 Local Links (Relative URLs)
Link to other HTML files in your project folder.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>My Links Page</title>
</head>
<body>
<h1>Local Links</h1>
<p>Navigate within my website:</p>
<ul>
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact Page</a></li>
</ul>
</body>
</html>
Final Checklist Before Submission
✔ Do all links work when clicked?
✔ Did you use absolute URLs for external sites?
✔ Did you use relative URLs for local files?
✔ Did you test in a browser?