HTML from Scratch: How to Add Links in HTML. Lesson #6 Overcod.net

HTML from Scratch: How to Add Links in HTML. Lesson #6

Let’s continue exploring the basics of HTML for beginners. In this lesson, I’ll explain what a link is, how to add one to an HTML document, turn an image into a link, and create links to another site, email, or file. Let’s dive into the details.

What is a Link in HTML?

A link in HTML is an element that allows users to navigate to another part of the document, another document, or resource. Clicking on a link triggers the navigation.

Links are essential for website navigation. They can direct users to website pages, external resources, open email clients, or enable file downloads.

How to Add a Link in an HTML Document

To create a link, use the <a> tag with the href attribute, which specifies the path to the resource.

Example:

<a href="link_address">Link text</a>

Important:

The link address should be written in Latin characters.
The closing tag </a> is required.

Example:

<a href="map.html">Link to the map</a>

Practice: Creating Interlinked Pages

Create two HTML documents:

1.html

<html>
<head>
<title>My First HTML Page on overcod.net</title>
</head>
<body>
<a href="2.html">Go to Page #2</a>
<p>Welcome to my first page on overcod.net.</p>
</body>
</html>

2.html

<html>
<head>
<title>Page #2 on overcod.net</title>
</head>
<body>
<a href="1.html">Return to Page #1</a>
<p>This is the second page on overcod.net.</p>
</body>
</html>

Place both files in the same folder.

Creating Links to Other Resources

Link to an external site:

<a href="https://www.overcod.net">Visit my blog</a>

Link to an email address:

<a href="mailto:admin@overcod.net">Send an email</a>

Open a link in a new tab:

<a href="https://www.overcod.net" target="_blank">Open in a new tab</a>

Downloadable Links

To allow users to download a file, add the download attribute:

<a href="file.zip" download>Download archive</a>

For images:

<a href="image.jpg" download>Download image</a>

Image as a Link

Turn an image into a link by placing the <img> tag inside the <a> tag:

<a href="https://www.overcod.net">
  <img src="image.jpg" alt="Image link">
</a>

Link Tooltip

Add the title attribute to display a tooltip when hovering over a link:

<a href="https://www.overcod.net" title="My blog">My blog</a>

Changing Link Colors

Modify link colors using <body> attributes:

<body link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
  <a href="1.html">Sample link</a>
</body>

link – color of a regular link.
alink – color of an active link (while clicking).
vlink – color of a visited link.

Try implementing all the examples yourself. Subscribe to updates on my blog at overcod.net and stay tuned for new HTML lessons. Good luck!