HTML Links

Text links are created using the <a> (anchor) tag. The text within the anchor tags becomes clickable, directing users to the specified URL. To create a text link, use the following format:

<a href="destination_url">Link Text</a>

Replace "destination_url" with the URL you want the link to point to, and "Link Text" with the text you want to display as the clickable link.

Example:

<a href="https://www.example.com">Visit Example.com</a>

In this example, the text "Visit Example.com" will be displayed as a clickable link, directing users to the specified URL when clicked.

You can also create links using images. To make an image clickable, place the <img> tag within the <a> tags. Here's the format:

<a href="destination_url">
    <img src="image_source" alt="Image Description">
</a>

Replace "destination_url" with the URL you want the link to point to. Set the "src" attribute of the <img> tag to the image source URL. The "alt" attribute provides alternative text for the image, serving as a description for visually impaired users or if the image fails to load.

Example:

<a href="https://www.example.com">
    <img src="image.jpg" alt="Example Image">
</a>

In this example, the image "image.jpg" will be displayed as a clickable link, directing users to the specified URL when clicked.

Links can point to different web pages or sections within the same page. There are two types of URLs: absolute and relative.

• Absolute URLs: An absolute URL specifies the complete web address, including the protocol (http:// or https://). Example: "https://www.example.com"
• Relative URLs: A relative URL specifies the path to the file or location relative to the current webpage. Example: "about.html" or "../contact.html"

Absolute File Paths

Absolute file paths specify the complete URL or file path from the root directory. They provide the full address for a file, including the domain name. Absolute file paths are useful when linking to external websites or when you want to specify the exact file location.

• An absolute file path begins with the protocol (http:// or https://) and includes the domain name. For example, "https://www.example.com/" points to the "www.example.com" domain.

Absolute Path Example:

<a href="https://www.example.com/about.html">About</a>

In this example, clicking on the "About" link will navigate to the "about.html" page on the "www.example.com" domain.

Relative File Paths

Relative file paths specify the location of a file relative to the current webpage's location. By using relative file paths, you can link pages within your website without relying on the complete URL.

Let's understand the concept of relative file paths.

• The file path "./" represents the current directory (folder). For example, "./about.html" points to an "about.html" file in the current directory.
• The file path "../" represents the parent directory (folder). For example, "../contact.html" points to a "contact.html" file in the parent directory.

Relative Path Example:

<a href="./about.html">About</a>

In this example, clicking on the "About" link will navigate to the "about.html" page in the current directory.

You can customize link behavior and appearance by using additional attributes:

• target: Specifies how the link opens. For example, you can set target="_blank" to open the link in a new tab or window.
• download: Specifies that the linked resource should be downloaded when clicked. It is commonly used for file downloads.

Example:

<a href="https://www.example.com/some-pdf.pdf" 
     target="_blank" download>
     Download Example
</a>

In this example, the link will open in a new tab or window when clicked, and if the linked resource is a file, it will be downloaded.

Remember to use descriptive and meaningful link text to improve accessibility and user experience.

HTML also allows you to create links that navigate to specific sections within a single webpage. 

To link to a specific section within the same webpage, you can use anchor links. Anchor links allow users to jump directly to a particular section by clicking on a link. They are created using the id attribute to identify the target section and the href attribute to specify the target with a preceding # symbol. 

Example:

<a href="#section2">Go to Section 2</a>

In this case, the id attribute section2 should be assigned to the target section:

<section id="section2">
    <h2>Section 2</h2>
    <p>This is the second section of the webpage.</p>
 </section> 

When the anchor link is clicked, the webpage will scroll to the section with the id of section2.

If you would like to link to a specific page section on another page, all you have to do is specify the URL of the page followed by an anchor, like so:

<a href="./about-page.html#section2">Go to Section 2 on the About page</a>

Understanding file paths and creating links between HTML pages is essential for building a well-structured and interconnected website. Experiment with different file path techniques and explore the possibilities of linking pages together.

Congratulations on learning how to link HTML pages! In the next lecture, we'll explore HTML lists, which allow you to present information in organized and structured formats.

Keep practicing and implementing these techniques to enhance the navigation experience for your website visitors.