0% found this document useful (0 votes)
13 views20 pages

HTML Links

The document provides an overview of creating hyperlinks in HTML using the <a> tag, detailing internal, external, and mail links. It explains how to set link colors, use attributes like TITLE and TARGET, and includes examples for practical application. Additionally, it covers special characters and provides tasks for practice.

Uploaded by

3385
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views20 pages

HTML Links

The document provides an overview of creating hyperlinks in HTML using the <a> tag, detailing internal, external, and mail links. It explains how to set link colors, use attributes like TITLE and TARGET, and includes examples for practical application. Additionally, it covers special characters and provides tasks for practice.

Uploaded by

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

Links in html

Understand and apply the attributes


of <a> tag.
Creating Internal and external
Hyperlinks in a Webpage
Creating Hyperlinks in a Webpage

 A hyperlink is a text or image which acts as dynamic link


and upon clicking opens up a new document or program.
 A hyperlink text is generally displayed with line under the
text .
 An image hyperlink is displayed with a border around that
image.
 A mouse pointer will be displayed as pointing finger when
it is moved over the hyperlink.
Types of Hyperlinks

External Links
Internal Links
Mail Links
Creating Hyperlinks in a Webpage

<A>-Anchor tag.
<A href=“hello.html”>Click me</A>
HREF is the attribute to provide the
reference of the web resource that you
want to link.
Internal Links
Internal Links-Video
https://www.youtube.com/watch?v=9Tj
kloW78UI

https://www.youtube.com/watch?v=wc
W8UyUrZJU
Internal Links
Used to move from one part or
section of web page to another part
OR
Section of the same web page or
other related web page of same
website.
Internal Links
Used to connect different sections of
same web page.
Book marks need to be created for
this.
<a> tag is used for this.
Internal Links-Example

<a href=“#bottom”>
Go to bottom of the page</a>
Type the content…..
<a name=“bottom”></a>
Inserting color for the Hyperlink

ALINK
<body alink=“green”>
VLINK
<body vlink=“red”>
Inserting color for the Hyperlink

<body alink="green" vlink="red">


Colour of the link is red.
When you click on the link , the colour
changes to green
TASKSHEET

 Create a link to www.saveourtigers.com.

 Set the link color for active and visited links.

 Create a paragraph on Expo2020 add an internal link in the top of the

webpage to read the paragraph.

 Create a button link to saveourtigers.com


External Links

Link from one web page to another


web page in different location.
Link different documents or files.
Creating an E-mail Link
External Links

Link from one web page to another web page


on WWW.
<a href="http://www.saveourtigers.com">CLICK</a>
External Links

Link different documents or files in your


system.

<a href="C:\Users\Nisha Arun\IIS\2020-21\Digital


Learning\Google Classroom Manual.docx”>CLICK</a>
External Links

Creating an E-mail Link


<a href=“mailto:[email protected]”>CLICK</a>
Attributes: TITLE and TARGET
TITLE : To add a tool tip text for the hyperlink
<a href="http://www.saveourtigers.com" title=“Tiger is a
wild animal">CLICK</a>

TARGET : To open the linked document in another


browser window.
<a href="http://www.saveourtigers.com"
target=“_blank”>CLICK</a>
Practice Session

Create an image hyperlink to expo2020dubai.com


Add a tooltip text for the image link and open it
in another window.
Display special Characters
➢&gt; >
➢&lt; <
➢&amp; &
➢&quot; “
➢&nbsp; blank space
More special Characters

https://www.w3schools.com/charsets/ref_
utf_symbols.asp

You might also like