HTML Links
An HTML link, or hyperlink, is an element within an HTML document that allows you to navigate to another webpage or resource when clicked. They’re like the doors in a house – each one leads to a different room, or in our case, a different webpage or resource.
Creating Basic Links
To create a basic link in HTML, we use the <a> element, which stands for anchor. Inside the <a> element, we specify where we want the link to take us using the href attribute. It’s like telling the browser, “Hey, go here when someone clicks on this link!”
Here’s how it looks:
<a href=”https://iqratechnology.com/ “>Visit Iqra Technology</a>
Output
In this example:
When you click on ” Visit Iqra Technology,” your browser will take you to the website specified in the href attribute.
Setting Link Targets
Setting link targets in HTML allows you to control how links open when clicked. This is done using the target attribute in the <a> tag.
By default, links open in the same browser tab or window. However, you can specify a different target behavior using the target attribute.
Here are the common values you can use for the target attribute:
1. _self:
Opens the link in the same tab or window. This is the default behavior if no target attribute is specified.
<a href=”https://iqratechnology.com ” target=”_self”>Open in the same tab</a>
Output
Clicking this link will load the destination page in the same tab or window.
2. _blank:
Opens the link in a new tab or window.
<a href=”https://www.example.com” target=”_blank”>Open in a new tab</a>
Output
Clicking this link will open the destination page in a new browser tab or window.
3. _parent:
Opens the link in the parent frame, useful if your site uses frames (rare in modern web design).
<a href=”https://www.example.com” target=”_parent”>Open in the parent frame</a>
Output
Clicking this link will load the destination page in the parent frame, if your website uses frames.
4. _top:
Opens the link in the full body of the window, breaking out of any frames.
<a href=”https://www.example.com” target=”_top”>Open in the full window</a>
Output
Clicking this link will load the destination page in the full window, breaking out of any frames.
Different Types of Links
There are several types of links you can create in HTML, each serving a different purpose
1. External Links
These links point to resources outside of the current website. They typically use an absolute URL, including the protocol (e.g., http:// or https://).
Example
<a href=”https://www.facebook.com”>Visit Facebook</a>
Output
In this example:
This link directs users to the external website “Facebook” when clicked. It uses an absolute URL starting with “https://”.
2. Internal Links
Internal links point to other pages within the same website. They often use relative URLs, which specify the path relative to the current page.
Example
<a href=”/about”>About Us</a>
Output
In this example:
This link navigates users to the “About Us” page within the same website. It uses a relative URL, indicating that the “about” page is located in the root directory of the website.
3. Anchor Links
Also known as fragment links, these links point to a specific section of a webpage. They are commonly used for navigation within a long webpage.
Example
<a href=”#section2″>Jump to Section 2</a>
And then within the document:
<h2 id=”section2″>Section 2</h2>
Output
In this example:
This link allows users to jump directly to the section of the webpage with the ID “section2” when clicked. The target section must have an HTML element with the ID “section2” defined.
4. Email Links
These links allow users to send emails to a specified email address when clicked. They use the mailto: protocol followed by the email address.
Example
<a href=”mailto: info@iqratechnology.com “>Contact Us</a>
Output
In this example:
Clicking this link opens the default email client with a new message addressed to “info@iqratechnology.com”. Users can easily contact the website owner or support team by clicking this link.
5. Telephone Links
These links enable users to initiate a phone call when clicked on a mobile device. They use the tel: protocol followed by the phone number.
Example
<a href=”tel:+1234567890″>Call Us</a>
Output
In this example:
This link enables users to initiate a phone call to the specified phone number (+1234567890) when clicked on a mobile device. It’s a convenient way for users to directly contact the organization.
6. Image Links
You can also create links using images instead of text. This is achieved by placing the <img> tag within an <a> tag.
Example
<a href=”https://www.example.com”>
<img src=”image.jpg” alt=”Description of the image”>
</a>
Output
In this example:
This link uses an image as the clickable element. Users are directed to the external website specified in the href attribute when clicked. The image serves as a visual cue for users to click on the link.
These are some common types of links used in HTML documents, each serving a specific purpose in web navigation and functionality.
Making Links Stand Out
By default, links in HTML are usually blue and underlined. But did you know you can change how they look? With CSS (Cascading Style Sheets), you can make links any color you want, remove the underline, and even change their appearance when you hover over them with your mouse.
Example
By Default Link Style
Basic Link Styling: To change the default style of links, you can use the following CSS properties
a {
color: red; /* Change link color */
text-decoration: none; /* Remove underline */
}
Output
In this example:
- a Selector: The selector targets all <a> elements in the HTML document, meaning that any link will be affected by this CSS rule.
- color: red;: This rule changes the text color of the links to red. By default, links are usually blue, but this CSS rule overrides that default behavior and sets the link color to red.
- text-decoration: none;: This rule removes the underline from the links. By default, links are underlined to distinguish them from regular text, but this rule removes that visual indicator.
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Hyperlink
Objective: Create a basic hyperlink.
Expected Output: A webpage with a link to an external website.
<!DOCTYPE html>
<html>
<head>
<title>Basic Hyperlink Example</title>
</head>
<body>
<h1>Basic Hyperlink Example</h1>
<p><a href=”https://iqratechnology.com”>Visit Iqra</a></p>
</body>
</html>
Output:
Scenario 2: Open Link in New Tab
Objective: Create a hyperlink that opens in a new tab.
Expected Output: A webpage with a link that opens in a new tab when clicked.
<!DOCTYPE html>
<html>
<head>
<title>Open Link in New Tab Example</title>
</head>
<body>
<h1>Open Link in New Tab Example</h1>
<p><a href=”https://www.Iqratechnology.com” target=”_blank”>Visit Example in New Tab</a></p>
</body>
</html>
Output:
Scenario 3: Email Link
Objective: Create a link that opens the user’s email client.
Expected Output: A webpage with a link that opens a new email to a specific address.
<!DOCTYPE html>
<html>
<head>
<title>Email Link Example</title>
</head>
<body>
<h1>Email Link Example</h1>
<p><a href=”mailto:someone@example.com”>Send Email</a></p>
</body>
</html>
Output:
Scenario 4: Link to a Specific Part of the Same Page
Objective: Create links that navigate to specific sections of the same page.
Expected Output: A webpage with links that jump to different sections of the page.
<!DOCTYPE html>
<html>
<head>
<title>Anchor Link Example</title>
</head>
<body>
<h1>Anchor Link Example</h1>
<p><a href=”#section1″>Go to Section 1</a></p>
<p><a href=”#section2″>Go to Section 2</a></p>
<h2 id=”section1″>Section 1</h2>
<p>This is Section 1.</p>
<h2 id=”section2″>Section 2</h2>
<p>This is Section 2.</p>
</body>
</html>
Output:
Scenario 5: Styled Link
Objective: Create a link with custom styles using CSS.
Expected Output: A webpage with a styled link.
<!DOCTYPE html>
<html>
<head>
<title>Styled Link Example</title>
<style>
a.custom-link {
color: white;
background-color: blue;
padding: 10px;
text-decoration: none;
border-radius: 5px;
}
a.custom-link:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<h1>Styled Link Example</h1>
<p><a href=”https://iqratechnology.com” class=”custom-link”>Visit Iqra</a></p>
</body>
</html>
Output:
Scenario 6: Image Link
Objective: Create a link using an image.
Expected Output: A webpage with an image that acts as a hyperlink.
<!DOCTYPE html>
<html>
<head>
<title>Image Link Example</title>
</head>
<body>
<h1>Image Link Example</h1>
<p><a href=”https://www.facebook.com”><img src=”example.jpg” alt=”Example Image”></a></p>
</body>
</html>
Output:
Scenario 7: Button Link
Objective: Create a button that acts as a hyperlink.
Expected Output: A webpage with a button that navigates to another page when clicked.
Output:
