Web · Links and Images
External and Internal Links
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Links in HTML
In HTML, links are created using the
<a>
tag, which stands for "anchor" (⚓).
The most important attribute of the
<a>
tag is
href
, which specifies the destination of the link. Here's the basic syntax:
<a href="destination-url">Link text</a>
When a user clicks on the link text, their browser will navigate to the URL specified in the
href
attribute.
<!DOCTYPE html>
<html>
<body>
<p>Click on this <a href="https://www.example.com">link</a> to visit Example.com</p>
</body>
</html>
Link Colors
By default, browsers display unvisited links in blue and underlined. After you've visited a link, it typically appears purple. You can change these styles using CSS.
Exercise 2 — Types of URLs in Links
There are different types of URLs you can use in the
href
attribute of an
<a>
tag:
1. Absolute URLs: Include the complete web address, starting with http:// or https:// >
href="https://www.example.com"
2. Relative URLs: Point to a file or page relative to the current page >
href="about.html"
3. Internal links: Navigate to a specific section within the same page >
href="#section1"
4. Email links: Open the user's email client >
href="mailto:contact@example.com"
5. Phone links: Start a call on mobile devices >
href="tel:+123456789"
In this chapter we will focus on the first two types and then, in the next chapters, we will cover the other three types.
Exercise 3 — What is an Absolute URL?
There are two main ways to specify the destination in the
href
attribute. Let's start with the absolute URL.
Absolute URLs include the complete web address:
- Always start with a protocol (usually
http://
or
https://
)
- Work from anywhere because they contain the full path
- Example:
https://www.example.com/about.html
<a href="https://www.codemonworld.com/guides/beginners.html">Beginner's Guide</a>
Exercise 4 — What is a Relative URL?
Now let's look at Relative URLs — these are used when linking to pages within your own website.
- Don't include the domain name
- Only include the path relative to the current document
- Are shorter and easier to maintain for internal links
- Example:
about.html
or
../images/photo.jpg
<a href="beginners.html">Beginner's Guide</a> <!-- Same directory -->
<a href="guides/beginners.html">Beginner's Guide</a> <!-- Subdirectory -->
<a href="../index.html">Home</a> <!-- Parent directory -->
Special characters in relative URLs:
-
./
refers to the current directory (often omitted)
-
../
refers to the parent directory
-
/
at the beginning refers to the root of the website
When to Use Each Type
Use absolute URLs when linking to external websites. Use relative URLs when linking to pages within your own website - this makes it easier to move your entire site to a different domain without breaking internal links.
Exercise 5 — Complete the Link
Complete the HTML code to create a link to the Codémon training page.
<p>Visit our ____="training.html"____Training Center____ to learn how to train your Codémon.</p>
Options: <a href href= > </a> <link </link>
Hint : Remember the basic structure of an HTML link: <a href="URL">Link text</a>
Exercise 6 — Understanding File Paths in Links
When working with relative URLs, it's important to understand how file paths work. The path depends on where your current HTML file is located in relation to the target file.
Let's imagine a simple website structure for a Codémon site:
codemonsite/
├── index.html
├── about.html
├── guides/
│ ├── beginners.html
│ └── advanced.html
└── images/
├── aquachu.jpg
└── pyrochu.jpg
If you're in
index.html
and want to link to other files, here's how you'd do it:
<!-- From index.html to about.html (same directory) -->
<a href="about.html">About Us</a>
<!-- From index.html to beginners.html (in guides subdirectory) -->
<a href="guides/beginners.html">Beginner's Guide</a>
<!-- From index.html to aquachu.jpg (in images subdirectory) -->
<a href="images/aquachu.jpg">View Aquachu</a>
Now, if you're in
guides/beginners.html
and want to link to other files:
<!-- From guides/beginners.html to index.html (parent directory) -->
<a href="../index.html">Home</a>
<!-- From guides/beginners.html to advanced.html (same directory) -->
<a href="advanced.html">Advanced Guide</a>
<!-- From guides/beginners.html to aquachu.jpg (parent directory, then images) -->
<a href="../images/aquachu.jpg">View Aquachu</a>
Root-Relative Paths
You can also use paths that start with a forward slash (/) to indicate the root of your website. For example,
<a href="/images/aquachu.jpg">
would point to the aquachu.jpg file from the root directory, regardless of where the current HTML file is located.
Exercise 7 — Relative Path Expressions
Match each relative path expression with what it refers to:
Items to match
• ./
• ../
• ../../
• /
Definitions
• Current directory (usually omitted)
• Parent directory (one level up)
• Grandparent directory (two levels up)
• Root of the website
Exercise 8 — Identifying URL Types
Which of the following URLs is a relative URL?
Options
• ```images/codemon.jpg```
• ```https://www.codemonworld.com/images/codemon.jpg```
• ```http://codemonworld.com```
• ```mailto:trainer@codemon.com```
Hint : Remember that relative URLs don't include the protocol (http://) or domain name. They specify the path relative to the current document.
Exercise 9 — Create Relative Path Links
Using the folder structure below, complete the HTML to create the correct relative links from the beginners.html page to the specified files.
codemonsite/
├── index.html
├── guides/
│ ├── beginners.html
│ └── advanced.html
└── images/
└── codemon-logo.png
<!-- We are in guides/beginners.html -->
<!DOCTYPE html>
<html>
<body>
<!-- Link to index.html -->
<a href="____">Home</a>
<!-- Link to advanced.html (in same directory) -->
<a href="____">Advanced Guide</a>
<!-- Link to the logo image -->
<a href="____">View Logo</a>
</body>
</html>
Options: ../index.html index.html advanced.html ../images/codemon-logo.png images/codemon-logo.png
Hint : Remember how relative paths work - use ../ to go up one directory level, and don't use ../ when referring to files in the same directory.
Exercise 10 — Opening Links in New Tabs
Sometimes you want a link to open in a new tab or window instead of replacing the current page. You can do this using the
target
attribute with the value
"_blank"
.
It's a good security practice to also add
rel="noopener noreferrer"
to prevent potential exploitation of the new tab/window relationship.
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example.com in a new tab</a>
App limitations
Unfortunately, Code Life does not support opening links in new tabs.