SlideShare a Scribd company logo
1
Links
1. Linking
A webpage can contain various links that take the user directly to other pages and even
specific parts of a given page. These links are known as hyperlinks. The Web is based on
hyperlinks. Hyperlinks can connect to other places on a Web page, to other pages within same
Web site, to pages outside the site, and to many types of Web and non-Web content.
2. HTML Link Tag
The anchor (a) is the element markup that makes links connect to other sites, to the same
site, and within a page. The HTML for an anchor, or link is defined with the <a> tag:
<a href="URL"> link text </a>
 <a>...</a> is a tag used to make a selection of text a link, simply wrap it in opening and
closing.
 The href (hyper reference) attribute specifies the destination address of the link by
providing the URL of the target page.
 The link text is the visible part that will be clicked. By default, it appears on the screen as
blue underlined text. Alternative formatting can be specified for hyperlinks by using styles.
 HTML can use an image as a link. For example
<a href="httpe://www.google.com"> <img src="my image path"> </a>
3. Relative and Absolute Path
There are two ways to specify the destination address:
•Absolute Path provide the full URL for the document, including the protocol (http://), the domain
name, and the pathname as necessary. You need to use an absolute URL when pointing to a
document out on the Web.
HTML&CSS
2
<a href="http://www.oreilly.com">Go to the Reilly Media site</a>
This example that creates a link to the O’Reilly Media website
• Relative Paths describe the pathname to a file relative to the current document. Relative paths
can be used when you are linking to another document on your own site, it doesn’t require the
protocol or domain name. For example, if the index.htm and tutorial.htm pages in the same Web
site and in the same folder, in the index.htm file, you could refer to totorial.htm like this:
<a href="Tutorial.html">Tutorial Link</a>
4. The Target Attribute
A hyperlink opens the referenced page in the same browser window by default. That means
the new page replaces the previous page in the browser. In some cases the user might want the
hyperlink to open in a new window (check out a page on another site without leave the current
site) or open in the same frame.
Target attribute is used to specify the location where linked document is opened. It adds to the <a> tag.
Following are the possible options:
target=“_self” Display on the same page
target=“_blank” Display on another page
target=“_name of frame” Display on the frame
Example1:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<ul>
<li> <a href = "www.google.com" target = "_blank"> Opens in New </a> </li>
<li> <a href = "www.google.com" target = "_self"> Opens in Self</a> </li>
3
</ul>
</body>
</html>
Remember, this method have no control over the size of the window, it will generally open as a
new tab or in a new window the same size as the most recently opened window in the user’s
browser.
5. Linking Types
5.1 External linking to other web sites
Absolute paths are used when referring to content outside the current web site that is, paths
containing the full location of the web.
Example2:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.google.com" target = "_self">Google Web Site</a>
</body>
</html>
5.2 Internal linking to other pages in the site
Without “http://”, the browser looks on the current server for the linked document. A pathname,
the notation used to point to a particular file or directory, tells the browser where to find the file
4
and a relative pathname describes how to get to the linked document starting from the location of
the current document.
The following diagram show the Jen’s Kitchen site, the root directory is named jenskitchen.
Linking within a directory
To make a link from home page (index.html) to a general information page (about.html),
both files are in the same directory (jenskitchen). So from home page, we can make a link to the
information page by simply providing its filename in the URL make a link from home page
(index.html) to about file
<a href="about.html"> About this page...</a>
5
Linking to a lower directory
All websites have a root directory, which is the directory that contains all the
directories and files for the site. To write a relative pathname is to start at the root directory and
list the subdirectory names until you get to the file you want to link to. This kind of pathname is
known as site root relative. A forward slash (/) at the start of the pathname indicates the path
begins at the root directory.
The site root relative pathname in the following link to find the salmon.html file:
<a href="/recipes/salmon.html">Garlic Salmon</a>
Note that you don’t need to write the name of the root directory (jenskitchen) in the path—just
start it with a forward slash (/), and the browser will look in the top-level directory relative to the
current file. From there, just specify the directories the browser should look in.
<a href="recipes/salmon.html">Garlic Salmon</a>
6
Linking to a higher directory
To a link from salmon.html back to the home page (index. html), because
salmon.html is in the recipes subdirectory, we need to back up a level to jenskitchen to find
index.html. This pathname tells the browser to “go up one level,” then look in that directory for
index.html.
<a href="/index.html">[Back to home page]</a>
Note that we don’t need to write out the name of the higher directory (jenskitchen) in the
pathname. The ../ stands in for it.
7
5.3 Linking to sections of a document
Linking to a specific section or point in a web page is useful for providing shortcuts to information
at the bottom of a long, scrolling page or for getting back to the top of a page with just one click or tap.
Linking to a specific point in the page is also referred to as linking to a document fragment. Linking to a
particular spot within a page is a two-part process. First, you identify the destination, and then you make a
link to it.
Step 1: Identifying the destination: to create a destination, use the id attribute to give the target element in
the document as a unique name appear in the document, as an example to link into conclusion segmet
<h1 id="conclusion">conclusion</h1>
Step 2: Linking to the destination with the identifier in place. The href attribute is used to provide the
location of the link. To indicate the linking to a fragment, the symbol (#), is used before the fragment name.
<a href="#conclusion">conclusion</a>
The following code create a web page include description of five chapters. Show the output and specify
navigation state.
8
Example3:
9
6. Hyperlinking to Other Content
A hyperlink can reference any file, not just a Web document. One can take advantage of
this to link to other content such as Microsoft Office documents, compressed archive files, and
even executable program files such as setup utilities for programs. The procedure for linking to
other content is the same as for linking to a Web page; the only difference is the file name that
enters in the hyperlink.
Before creating a link to non-HTML content, the developer need to remember that not everyone
has the same software. Some browsers have a feature that automatically tries to download an
appropriate viewer, player, or plug-in (an extension to the browser for handling a certain type of
file) for anything it can’t display as content. That’s a great feature when it works, but it’s not
reliable because not all Web visitors will have a browser with this capability. So, the developer
should at least provide a hyperlink to a free viewer that can display that file type especially with
audio and video files.
To provide a viewer for a type of content, create a hyperlink that points to a site from which it
can be downloaded, or store the viewer on your own Web site and provide a link to it
Example 4:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorial.com/page.pdf">Download PDF File</a>
</body>
</html>

More Related Content

PPTX
Ch 6: Links
PPTX
HTML Lists & Llinks
PPTX
Introduction to linking
PDF
02- Links, Structure and Layout with HTML.pdf
PPTX
LINKING IN HTML
PPTX
HTML5 - create hyperlinks and anchors
PPT
HTML Linking Overview
PPTX
Html links
Ch 6: Links
HTML Lists & Llinks
Introduction to linking
02- Links, Structure and Layout with HTML.pdf
LINKING IN HTML
HTML5 - create hyperlinks and anchors
HTML Linking Overview
Html links

Similar to Links in HTML AND CSS COMPREHENSIVE STUDY (20)

PPTX
PPTX
Web design - Working with Links and Images
PPTX
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
PPTX
Simple Presentation in Pink Lilac Pastel Blobs Basic Style.pptx.pptx
PPTX
646219547-Lecture-9-HTML-Text-Links.pptx
PPT
Html for beginners part II
PPTX
Building Next Generation Websites Session4
PPTX
How to make a website
PPTX
Html links
PPTX
Links - IntraSystem and Absolute
PPT
Hyperlink.85 to 86
PPTX
HTML - Linking[1].ppt it is for class 10 students
PPTX
Links in Html
PPTX
Html web designing linking pages
PDF
HTML Foundations, part 1
PDF
Understanding HTML: Creating Text Links for Navigation and Image Links for In...
PPTX
Lesson 6 creating links
PDF
How to make a hyperlink in HTML code
PPTX
Links - IntraPage
Web design - Working with Links and Images
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Simple Presentation in Pink Lilac Pastel Blobs Basic Style.pptx.pptx
646219547-Lecture-9-HTML-Text-Links.pptx
Html for beginners part II
Building Next Generation Websites Session4
How to make a website
Html links
Links - IntraSystem and Absolute
Hyperlink.85 to 86
HTML - Linking[1].ppt it is for class 10 students
Links in Html
Html web designing linking pages
HTML Foundations, part 1
Understanding HTML: Creating Text Links for Navigation and Image Links for In...
Lesson 6 creating links
How to make a hyperlink in HTML code
Links - IntraPage
Ad

Recently uploaded (20)

PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
A comparative analysis of optical character recognition models for extracting...
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Approach and Philosophy of On baking technology
PDF
cuic standard and advanced reporting.pdf
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Electronic commerce courselecture one. Pdf
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
Review of recent advances in non-invasive hemoglobin estimation
A comparative analysis of optical character recognition models for extracting...
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Approach and Philosophy of On baking technology
cuic standard and advanced reporting.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
Reach Out and Touch Someone: Haptics and Empathic Computing
NewMind AI Weekly Chronicles - August'25-Week II
20250228 LYD VKU AI Blended-Learning.pptx
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Network Security Unit 5.pdf for BCA BBA.
Spectral efficient network and resource selection model in 5G networks
Unlocking AI with Model Context Protocol (MCP)
Per capita expenditure prediction using model stacking based on satellite ima...
The Rise and Fall of 3GPP – Time for a Sabbatical?
MYSQL Presentation for SQL database connectivity
Electronic commerce courselecture one. Pdf
Encapsulation_ Review paper, used for researhc scholars
Mobile App Security Testing_ A Comprehensive Guide.pdf
Ad

Links in HTML AND CSS COMPREHENSIVE STUDY

  • 1. 1 Links 1. Linking A webpage can contain various links that take the user directly to other pages and even specific parts of a given page. These links are known as hyperlinks. The Web is based on hyperlinks. Hyperlinks can connect to other places on a Web page, to other pages within same Web site, to pages outside the site, and to many types of Web and non-Web content. 2. HTML Link Tag The anchor (a) is the element markup that makes links connect to other sites, to the same site, and within a page. The HTML for an anchor, or link is defined with the <a> tag: <a href="URL"> link text </a>  <a>...</a> is a tag used to make a selection of text a link, simply wrap it in opening and closing.  The href (hyper reference) attribute specifies the destination address of the link by providing the URL of the target page.  The link text is the visible part that will be clicked. By default, it appears on the screen as blue underlined text. Alternative formatting can be specified for hyperlinks by using styles.  HTML can use an image as a link. For example <a href="httpe://www.google.com"> <img src="my image path"> </a> 3. Relative and Absolute Path There are two ways to specify the destination address: •Absolute Path provide the full URL for the document, including the protocol (http://), the domain name, and the pathname as necessary. You need to use an absolute URL when pointing to a document out on the Web. HTML&CSS
  • 2. 2 <a href="http://www.oreilly.com">Go to the Reilly Media site</a> This example that creates a link to the O’Reilly Media website • Relative Paths describe the pathname to a file relative to the current document. Relative paths can be used when you are linking to another document on your own site, it doesn’t require the protocol or domain name. For example, if the index.htm and tutorial.htm pages in the same Web site and in the same folder, in the index.htm file, you could refer to totorial.htm like this: <a href="Tutorial.html">Tutorial Link</a> 4. The Target Attribute A hyperlink opens the referenced page in the same browser window by default. That means the new page replaces the previous page in the browser. In some cases the user might want the hyperlink to open in a new window (check out a page on another site without leave the current site) or open in the same frame. Target attribute is used to specify the location where linked document is opened. It adds to the <a> tag. Following are the possible options: target=“_self” Display on the same page target=“_blank” Display on another page target=“_name of frame” Display on the frame Example1: <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click any of the following links</p> <ul> <li> <a href = "www.google.com" target = "_blank"> Opens in New </a> </li> <li> <a href = "www.google.com" target = "_self"> Opens in Self</a> </li>
  • 3. 3 </ul> </body> </html> Remember, this method have no control over the size of the window, it will generally open as a new tab or in a new window the same size as the most recently opened window in the user’s browser. 5. Linking Types 5.1 External linking to other web sites Absolute paths are used when referring to content outside the current web site that is, paths containing the full location of the web. Example2: <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.google.com" target = "_self">Google Web Site</a> </body> </html> 5.2 Internal linking to other pages in the site Without “http://”, the browser looks on the current server for the linked document. A pathname, the notation used to point to a particular file or directory, tells the browser where to find the file
  • 4. 4 and a relative pathname describes how to get to the linked document starting from the location of the current document. The following diagram show the Jen’s Kitchen site, the root directory is named jenskitchen. Linking within a directory To make a link from home page (index.html) to a general information page (about.html), both files are in the same directory (jenskitchen). So from home page, we can make a link to the information page by simply providing its filename in the URL make a link from home page (index.html) to about file <a href="about.html"> About this page...</a>
  • 5. 5 Linking to a lower directory All websites have a root directory, which is the directory that contains all the directories and files for the site. To write a relative pathname is to start at the root directory and list the subdirectory names until you get to the file you want to link to. This kind of pathname is known as site root relative. A forward slash (/) at the start of the pathname indicates the path begins at the root directory. The site root relative pathname in the following link to find the salmon.html file: <a href="/recipes/salmon.html">Garlic Salmon</a> Note that you don’t need to write the name of the root directory (jenskitchen) in the path—just start it with a forward slash (/), and the browser will look in the top-level directory relative to the current file. From there, just specify the directories the browser should look in. <a href="recipes/salmon.html">Garlic Salmon</a>
  • 6. 6 Linking to a higher directory To a link from salmon.html back to the home page (index. html), because salmon.html is in the recipes subdirectory, we need to back up a level to jenskitchen to find index.html. This pathname tells the browser to “go up one level,” then look in that directory for index.html. <a href="/index.html">[Back to home page]</a> Note that we don’t need to write out the name of the higher directory (jenskitchen) in the pathname. The ../ stands in for it.
  • 7. 7 5.3 Linking to sections of a document Linking to a specific section or point in a web page is useful for providing shortcuts to information at the bottom of a long, scrolling page or for getting back to the top of a page with just one click or tap. Linking to a specific point in the page is also referred to as linking to a document fragment. Linking to a particular spot within a page is a two-part process. First, you identify the destination, and then you make a link to it. Step 1: Identifying the destination: to create a destination, use the id attribute to give the target element in the document as a unique name appear in the document, as an example to link into conclusion segmet <h1 id="conclusion">conclusion</h1> Step 2: Linking to the destination with the identifier in place. The href attribute is used to provide the location of the link. To indicate the linking to a fragment, the symbol (#), is used before the fragment name. <a href="#conclusion">conclusion</a> The following code create a web page include description of five chapters. Show the output and specify navigation state.
  • 9. 9 6. Hyperlinking to Other Content A hyperlink can reference any file, not just a Web document. One can take advantage of this to link to other content such as Microsoft Office documents, compressed archive files, and even executable program files such as setup utilities for programs. The procedure for linking to other content is the same as for linking to a Web page; the only difference is the file name that enters in the hyperlink. Before creating a link to non-HTML content, the developer need to remember that not everyone has the same software. Some browsers have a feature that automatically tries to download an appropriate viewer, player, or plug-in (an extension to the browser for handling a certain type of file) for anything it can’t display as content. That’s a great feature when it works, but it’s not reliable because not all Web visitors will have a browser with this capability. So, the developer should at least provide a hyperlink to a free viewer that can display that file type especially with audio and video files. To provide a viewer for a type of content, create a hyperlink that points to a site from which it can be downloaded, or store the viewer on your own Web site and provide a link to it Example 4: <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <a href = "https://www.tutorial.com/page.pdf">Download PDF File</a> </body> </html>