MAQ Learning

HTML Links

HTML links, also known as hyperlinks, allow you to connect one web page to another or link to different sections within the same page. They enable users to navigate across websites and access related content easily.

The hyperlinks are commonly used for following purposes:

  • Linking from one webste to another
  • Linking from one page to another page on the same website
  • Linking to a specific section of the same page  
  • Opening link in a new browser window   
  • Link for an e-mail address that opens an e-mail program with that e-maill address

Creating a Basic Link

Anchor Tag (<a>)

To create a basic link, you need to use the <a> tag. The <a> stands for anchor and is used to create a hyperlink.

Syntax for Creating a Link

<a href="URL">Link Text</a>
  • <a>: Opening anchor tag.
  • href="URL": Specify the URL of the webpage you want to link to in the ```href``` attribute of <a> tag. When you click on this link, it will take you to the url specified in the ```href``` attribute. Replace "URL" with the actual web address or file path.
  • Link Text: Text displayed as the clickable link. Specify the text you want to display as the link between the opening and closing <a> tags.

Note: On a website, each page and image has a Uniform Resource Locator, or URL. The web address is composed of the domain name then the route to that page or image.

Example of a Basic Link

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

By default browsers show links in blue color with an underline.

Linking to Other Websites

To link to a different website you have to provide the full web address of the website in href attribute.

Example of link to another website:

<a href="https://www.google.com">Visit Google Website</a>

Linking to Sections within a Page

HTML allows you to link to a specific section on a webpage.

This is a two step process:

  1. To link to a specific section of a page, you need to define the id atribute of the element at the target section.
  2. Then use that id in the href attribute of <a> tag.

Creating an ID for a Section

<h2 id="section1">Section 1</h2>

id="section1": Here, we have added an id of "section1" to our heading element. You can replace "section1" with any other descriptive identifier.

Linking to the Section with ID

<a href="#section1">Go to Section 1</a> 

href="#section1": Then used that id in our link's href attribute. The # symbol followed by the id of the element links to that specific section within the page. When clicked, the link will take us to the element with id="section1".

Example I

<h2 id="section1">Section 1</h2> 

<p>Content of Section 1...</p> 

<a href="#section1">Go to Section 1</a> 

Example II

<html>

<head>
   <title>HTML Link Example</title>
</head>
  
<body>
<h1 id="top">Computer Terms</h1>
<a href="#cpu">CPU</a><br />
<a href="#ram">RAM</a><br /><br />

<h2 id="cpu">CPU</h2>
<p>Stands for "Central Processing Unit." 
This is the pretty much the brain of your computer. 
It processes everything from basic instructions to complex functions.</p>
  
<h2 id="ram">Interlude</h2>
<p>Stands for "Random Access Memory. 
RAM is made up of small memory chips that form a memory module. 
These modules are installed in the RAM slots on the motherboard of your computer.</p>
  
<p><a href="#top">Top</a></p>
</body>

</html>

Here, id attribute is given to the <h1> and <h2> elements that identify those sections of the page. 

  • <h1 id="top">
  • <h2 id="cpu">
  • <h2 id="ram">

Then these id are used in href attribute of the <a> tag.

  • <a href="#cpu">
  • <a href="#ram">
  • <a href="#top">

Absolute URL Vs Relative URL

Absolute URL:

  • An absolute URL provides the complete web address starting with the protocol (HTTP/HTTPS) and includes the domain name and the path to the specific resource.
  • It specifies the exact location of a resource on the internet.
  • It begins with the protocol, such as http:// or https://, followed by the domain name (e.g., www.example.com) and the path to the resource.
  • Example: https://www.example.com/page

Relative URL:

  • A relative URL specifies the location of a resource about the current page or the root of a website.
  • It does not include the protocol or domain name, only the path or location of the resource relative to the current page.
  • It can be used within the same website to link pages, images, or resources relative to the current location.
  • Example: ../images/picture.jpg or about.html

Key Differences:

  • Complete Address:
    • Absolute URLs contain the full web address, including the protocol, domain, and path.
    • Relative URLs contain only the path or location of the resource relative to the current page or root of the website.
  • Usage:
    • Absolute URLs are typically used when linking to resources on other websites or specifying an exact location on the internet.
    • Relative URLs are commonly used for linking within the same website or when the exact domain or protocol is not necessary.
  • Portability:
    • Relative URLs are more portable because they are not tied to a specific domain or protocol, making it easier to migrate or reuse content across different environments.

Linking To Other Pages On The Same Website

It is not necessary to include the domain name in the URL when referring to pages on the same website. You may use a relative URL.

Here are some Examples

Same Folder:

Simply use the file name to link to a file located in the same folder. 

<a href="comments.html">Comments</a>

Child Folder

Use the child folder's name, a forward slash, and the file name. For example., to access a file in "articles" folder

<a href="articles/article_listing.html">Articles List</a>

Grandchild Folder

First, use the child folder name, then a forward slash, the grandchild folder name, another forward slash, and finally the file name.

<a href="articles/html/html_articles.html">

Parent Folder

../ is used to indicate the folder above the current one. To access a file in parent folder use ../ and then file name.

<a href="../index.html">Home</a>

Gandparent Folder

To access a file in parent of parent's folder, repeat the ../ two times. This indicates that you want to access a file two folders up level, then follow it with the file name.

<a href="../../index.html">Home</a>

Opening Links in a New Browser Window

The target="_blank" attribute is used with the anchor (<a>) tag to open links in a new window/tab.

Create an HTML Anchor Tag (<a>):

Start by creating an anchor tag (<a>) in your HTML document.

<a href="https://www.example.com" target="_blank">Visit Example Website</a> 
  • Replace "https://www.example.com" with the URL of the website or page you want to link to.
  • The target="_blank" attribute is used to open the linked document in a new browser window or tab.

Example:

Here is an example demonstrating how to open a link in a new browser window:

<html> 
  <head> 
    <title>Open Link in New Window Example</title> 
  </head> 

  <body> 
    <h1>Opening a Link in a New Browser Window</h1> 
    <p>Click the link below to visit Example Website:</p> 
    <a href="https://www.example.com" target="_blank">Visit Example Website</a> 
  </body> 
</html> 

Email Links

The mailto: attribute in the href specifies that the link is an email link. When a user clicks on this link, it prompts the default email client on their device to compose a new email to the specified email address.

Create an HTML Anchor Tag (<a>):

Start by creating an anchor tag (<a>) in your HTML document.

<a href="mailto:email@example.com">Send Email</a> 
  • Replace "email@example.com" with the email address you want the link to open when clicked.
  • Use mailto: followed by the email address to create a link that triggers the default email client.

Additional Email Parameters:

To add subject and body to the email, you can include additional parameters in the mailto: link.

<a href="mailto:email@example.com?subject=Subject%20Here&body=Message%20Here">Send Email</a>

Example:

Here is an example demonstrating how to create an HTML link that opens an email:

<html> 
  <head> 
    <title>Open Email from HTML Link</title> 
  </head> 
  <body> 
    <h1>Open Email from HTML Link</h1> 
    <p>Click the link below to compose an email:</p> 
    <a href="mailto:email@example.com">Send Email</a> 
  </body> 
</html>

Summary

HTML links are essential for connecting web pages and navigating within a website. They provide seamless access to different web resources and sections of a page, enhancing user experience.

Experiment with creating different types of links to understand their functionality and usage in web development!