Lecture Note Of Class 5Working with Links
Objective:
Learn how to create
and manage hyperlinks within HTML documents.
Outcome:
Students will be able
to create hyperlinks to external sites, internal pages, and specific parts of a
page, using various link attributes.
Introduction
to Links in HTML
- Definition: A
link in HTML (also known as a hyperlink) is a clickable element that takes
you to another webpage, website, or a specific part of a webpage.
- Everyday analogy: suppose a door in your house. When you open the door (click the link), you can enter a different room (another page or website).
Hyperlinks (or links) are fundamental elements of web pages. They allow users to navigate from one page to another, either within the same website or across different websites.
Links are created using the <a> (anchor) tag in HTML.
Introduce the <a> tag, which stands for "anchor" (anchor
because it marks a specific spot on a page).
Basic
Structure of a Link
To create a basic
hyperlink, you use the <a> tag with the href attribute. The href
attribute specifies the URL of the page the link goes to.
Syntax:
<a
href="URL">Link Text</a>
- The
<a> tag wraps the clickable text or content.
- The
href attribute (short for "Hypertext Reference") specifies the
URL (web address) you want to link to.
- The
content between the opening <a> and closing </a> tags is what
the user clicks on (the link text).
Example:
<a href="https://www.example.com">Visit
Example.com</a>
This creates a link
that, when clicked, takes the user to "https://www.example.com".
- The
text "Visit Example Website" is what the user clicks on.
- The
link will open the website at https://www.example.com.
Types
of Links
1.
External Links
o
These links point to a webpage on a
different website.
o
Example:
<a
href="https://www.wikipedia.org">Go to Wikipedia</a>
2.
Internal Links
o
These links navigate to different pages
within the same website.
o
Example:
<a
href="about.html">About Us</a>
3.
Anchor Links
o
These links point to a specific section
within the same page or another page using an ID.
o
Example:
<a
href="#section1">Go to Section 1</a>
o
In the same page:
<h2
id="section1">Section 1</h2>
4.
Email Links
o
These links open the user's default
email client with a new email addressed to the specified email address.
o
Example:
<a
href="mailto:info@example.com">Email Us</a>
5.
Telephone Links
o
These links can be used to initiate a
phone call from devices that support it (e.g., smartphones).
o
Example:
<a
href="tel:+1234567890">Call Us</a>
Link
Attributes
1.
target Attribute
o
Specifies where to open the linked
document.
o
Common values:
§ _blank: Opens the link in a new tab or window.
§ _self: Opens the link in the same frame (default behavior).
§ _parent: Opens the link in the parent frame.
§ _top: Opens the link in the full body of the window.
Example:
<a href="https://www.example.com"
target="_blank">Open Example.com in a
new tab</a>
2.
title Attribute
o
Provides additional information about
the link, typically displayed as a tooltip when the user hovers over the link.
Example:
<a
href="https://www.example.com" title="Visit Example for more
information">Example</a>
3.
rel Attribute
o
Specifies the relationship between the
current document and the linked document.
o
Common values:
§ noopener: Ensures the new page doesn't have
access to the window.opener property.
§ noreferrer: Prevents the browser from sending a
Referer header to the linked page.
Example:
<a
href="https://www.example.com" rel="noopener">Visit Example.com</a>
Creating
a Navigation Menu
Links can be used to
create a navigation menu, allowing users to easily navigate between different
sections of a website.
Example:
<nav>
<ul>
<li><a
href="index.html">Home</a></li>
<li><a
href="about.html">About</a></li>
<li><a
href="services.html">Services</a></li>
<li><a
href="contact.html">Contact</a></li>
</ul>
</nav>
Conclusion
Understanding how to
create and manage links is crucial for building functional and navigable web
pages. Links enhance user experience by providing easy navigation between
related content.
****************************