Scribd
Upload
134 views21 pages

Lecture 9 - HTML Text Links

Hyperlinks allow users to navigate between web pages by clicking on text, images, or other page elements. HTML links are specified using the <a> tag, which wraps the linked text or image. The href attribute provides the URL for the linked document. Links can also target specific sections of a page using the name attribute. Additional attributes like target control where linked documents will open.

Uploaded by

Tanveer Ahmed Hakro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
134 views21 pages

Lecture 9 - HTML Text Links

Hyperlinks allow users to navigate between web pages by clicking on text, images, or other page elements. HTML links are specified using the <a> tag, which wraps the linked text or image. The href attribute provides the URL for the linked document. Links can also target specific sections of a page using the name attribute. Additional attributes like target control where linked documents will open.

Uploaded by

Tanveer Ahmed Hakro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

HTML Text Links

Dr. Fareed Ahmed Jokhio


HTML Text Links
• A webpage can contain various links that take
you directly to other pages and even specific
parts of a given page.
• These links are known as hyperlinks.
HTML Text Links
• Hyperlinks allow visitors to navigate between
Web sites by clicking on words, phrases, and
images.
• Thus you can create hyperlinks using text or
images available on a webpage.
Linking Documents
• A link is specified using HTML tag <a>.
• This tag is called anchor tag and anything
between the opening <a> tag and the closing
</a> tag becomes part of the link and a user
can click that part to reach to the linked
document.
• <a href="Document URL" ... attributes-
list>Link Text</a>
Linking Documents
• Let's try following example which links http://www.tutorialspoint.com
at your page:
• <html>
• <head>
• <title>Hyperlink Example</title>
• </head>
• <body>
• <p>Click following link</p>
• <a href="http://www.tutorialspoint.com" target="_self">Tutorials
Point</a>
• </body>
• </html>
Linking Documents
• This will produce following result, where you
can click on the link generated
• Tutorials Point to reach to the home page of
Tutorials Point.
HTML <a> target Attribute
• The target attribute specifies where to open the linked
document:
• Value Description
• _blank Opens the linked document in a new window or tab
• _self Opens the linked document in the same frame as it
was clicked (this is default)
• _parent Opens the linked document in the parent frame
• _top Opens the linked document in the full body of the
window
• framename Opens the linked document in a named frame
Use of Base Path
• When you link HTML documents related to the
same website, it is not required to give a complete
URL for every link.
• You can get rid of it if you use <base> tag in your
HTML document header.
• This tag is used to give a base path for all the links.
• So your browser will concatenate given relative
path to this base path and will make a complete
URL.
Use of Base Path
• Following example makes use of <base> tag to specify base URL and later we
can use relative path to all the links instead of giving complete URL for every
link.
• <html>
• <head>
• <title>Hyperlink Example</title>
• <base href="http://www.tutorialspoint.com/">
• </head>
• <body>
• <p>Click following link</p>
• <a href="/html/index.htm" target="_blank">HTML Tutorial</a>
• </body>
• </html>
Use of Base Path
• This will produce following result, where you
can click on the link generated HTML Tutorial
to reach to the HTML tutorial.
• Now given URL <a href="/html/index.htm" is
being considered as <a
href="http://www.tutorialspoint.com/html/in
dex.htm".
Linking to a Page Section
• You can create a link to a particular section of
a given webpage by using name attribute.
• This is a two-step process.
• First create a link to the place where you want
to reach within a webpage and name it using
<a...> tag as follows:
• <h1>HTML Text Links <a
name="top"></a></h1>
Linking to a Page Section
• Second step is to create a hyperlink to link the
document and place where you want to reach:
• <a href="/html/html_text_links.htm#top">Go
to the Top</a>
• This will produce following link, where you can
click on the link generated Go to the Top to
reach to the top of the HTML Text Link
tutorial.
Go to the Top
Setting Link Colors
• You can set colors of your links, active links
and visited links using link, alink and vlink
attributes of <body> tag.
Setting Link Colors
• <html>
• <head>
• <title>Hyperlink Example</title>
• <base href="http://www.tutorialspoint.com/">
• </head>
• <body alink="#54A250" link="#040404" vlink="#F40633">
• <p>Click following link</p>
• <a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
• </body>
• </html>
Setting Link Colors
• This will produce following result.
• Just check color of the link before clicking on
it, next check its color when you activate it
and when the link has been visited.
Download Links
• You can create text link to make your PDF, or DOC or ZIP files
downloadable.
• This is very simple, you just need to give complete URL of the
downloadable file as follows:
• <html>
• <head>
• <title>Hyperlink Example</title>
• </head>
• <a href="http://www.tutorialspoint.com/page.pdf">Download PDF
File</a>
• </body>
• </html>
Download Links
• This will produce following link and will be
used to download a file.
HTML Image Links
• We have seen how to create hypertext link
using text and we also learnt how to use
images in our webpages.
• Now we will learn how to use images to create
hyperlinks.
HTML Image Links
• It's simple to use an image as hyperlink.
• We just need to use an image inside hyperlink
at the place of text as shown below:
HTML Image Links
• <html>
• <head>
• <title>Image Hyperlink Example</title>
• </head>
• <body>
• <p>Click following link</p>
• <a href="http://www.tutorialspoint.com" target="_self">
• <img src="/images/logo.png" alt="Tutorials Point" border="0"/>
• </a>
• </body>
• </html>
HTML Image Links
• This will produce following result, where you
can click on the images to reach to the home
page of Tutorials Point.

You might also like