Scribd
Upload
9 views18 pages

HTML Chapter 3 Hyperlinks

The document provides an overview of hyperlinks, including their definition, types (page-jump, internal, external, and email links), and how to create them using the <a> tag in HTML. It explains the attributes associated with hyperlinks, such as LINK, ALINK, and VLINK, and demonstrates how to use images and lists to display hyperlinks. Additionally, it covers the download attribute and the use of hyperlinks in tables.

Uploaded by

Shehar Bano
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
9 views18 pages

HTML Chapter 3 Hyperlinks

The document provides an overview of hyperlinks, including their definition, types (page-jump, internal, external, and email links), and how to create them using the <a> tag in HTML. It explains the attributes associated with hyperlinks, such as LINK, ALINK, and VLINK, and demonstrates how to use images and lists to display hyperlinks. Additionally, it covers the download attribute and the use of hyperlinks in tables.

Uploaded by

Shehar Bano
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/ 18

HYPERLINKS

Zahid Javed
HYPERLINKS
Definition:-
 Each website on world wide web contain many pages
that are linked with one another. The links are used
to move from one location to another on internet. A
link may consist of simple text as well as an image.
The link is also known as hyperlink.

<a href="https://www.yahoo.com">Visit our HTML tutorial</a>


HYPERLINKS
Definition and Usage
 The <a> tag defines a hyperlink, which is used to link
from one page to another.
 The most important attribute of the <a> element is the
href attribute, which indicates the link's destination.
 By default, links will appear as follows in all browsers:

1. An unvisited link is underlined and blue


2. A visited link is underlined and purple
3. An active link is underlined and red

Link
HYPERLINKS
Types Of Hyperlinks:-
 Hyperlinks can be of three kinds:

1- Page-jump: these are the hyperlinks that are linked with other
location within the same page. The location to which this hyper link
is linked is called Bookmark.

For example:
First you need to place a bookmark (named anchor) in your page
where you want the user to be able to jump to:

<a name="bookmark1" >Bookmark1</a>


Then you need to add a link that the user can click on to jump to the
bookmark:

Link
<a href="#bookmark1">goto bookmark1</a>
HYPERLINKS
Types Of Hyperlinks:-
 Hyperlinks can be of three kinds:

2- Internal Links: These are the hyperlinks that are


linked with other page within the website.

 you can link to a bookmark on a different page but pre-


pending the url of the page to the bookmark name in
the href attribute:

<a href="http://website.com/alargepage.html"> goto


bookmark1
</a>
HYPERLINKS
3- External Links: These are the hyperlinks that are
linked with the other website or other webpage of other
website.
HYPERLINKS
4- Email Links: These are the hyperlinks that are
linked with emails. They start email application when the
user clicks on them.

Example:-
<html>
<body>
<H4> Email Hyperlink</H4>
Click to send <a
href="mailto:zahidJaved_uaf@yahoo.com">email</a>
</body>
</html>
Link
CREATING HYPERLINKS
<A> (anchor) tag is used to create a hyperlink in a webpage. HREF
attribute of <A> tag specifies location to which the link is
connected. An anchor can be linked to the
following:
 Another web page
 Another part of the same web page
 A file etc.

Attributes:-
 LINK: It specifies the color of hyperlinks. It can be specified by
using color name or its hexadecimal code.

 ALINK: It specifies the color of the hyperlinks that are activated.


It can be specifies by using color name or its hexadecimal code.

 VLINK: It specified the color of the hyperlinks that have been


visited. It can be specified by using color name of its hexadecimal
code.
Example Of Hyperlink:-
<html>
<body link="#990000" alink="#0000CC"
vlink="#CC3300">
<h4>Links in HTML</h4>
<a href="http://www.hotmail.com">Hotmail</a><p>
<a href="http://www.yahoo.com">Yahoo</a><p>
<a href="http://www.facebook.com">Facebook.com</a>

</body>
</html>

Link
<A TARGET="" > HTML ATTRIBUTE
 Frames deprecated; only use _blank
 The only currently relevant value of target is _blank. The other
values of target were used to specify specific frames. However,
frames have been deprecated in HTML5.

Link
HTML <A> DOWNLOAD ATTRIBUTE
 Definition and Usage
 The download attribute specifies that the target will be
downloaded when a user clicks on the hyperlink.
 This attribute is only used if the href attribute is set.
 The value of the attribute will be the name of the downloaded
file. There are no restrictions on allowed values, and the browser
will automatically detect the correct file extension and add it to
the file (.img, .pdf, .txt, .html, etc.).

<a href="/images/pak.jpg" download>


<img border="0" src="./images/pak.jpg" alt=“Pak Flag"
width="104" height="142">
</a>

Link
HTML <A> DOWNLOAD ATTRIBUTE

<<a href="./images/gc.txt" download>


<img border="0" src="./images/pak.jpg" alt="Text File"
width="104" height="142">
</a>

Link
LINK TO ANOTHER WEB PAGE
A hyperlink can refer to a web page in the same website. This
type of hyperlink is frequently used in almost all websites.
The visitors view different web page of a website by clicking
on different hyperlinks that refer to different pages.

Example:-
<A HREF=“contact.html”>Contact us</A>

In above example, the text Contact us is a hyperlink that


refers to contact.html file. The file should be in current
directory. If the file is stored in another directory, complete
path must be given as follows:

<A HREF=“images/contact,html”Target=“_blank”>Contact us
</A>
The above example will open the contact.html page in a new
window.
IMAGES AS HYPERLINK

Images can also be used as hyperlinks. The method


of using images as hyperlinks is similar to text
hyperlinks.

Example:-

<a href=http://www.itseries.com.pk><IMG
scr=“itmono.jpg”></a>

In above example, the image itmono.jpg will


become a hyperlink
Example of Image as Hyperlink:-

<html>
<body>
<h3> Click The Image to send an email </h3>
<p>
<A href="mailto:jawad_virgo1147@yahoo.com">
<img src="pic.jpg.jpg" alt="Send Email" width="153"
height="177" ></A>
</body>
</html>

Link
HYPERLINKS IN LISTS
The Hyperlinks can also be displayed in ordered and
unordered list

Example:-
<H3>Hyperlinks in a List</H3>
<ul>
<li>
<a href="http://www.hotmail.com">Hotmail</a>
<li>
<a href="http://www.yahoo.com">Yahoo</a>
<li>
<a href="http://www.facebook.com">Facebook</a>
</ul>
Link
HYPERLINKS IN A TABLE
The Hyperlinks can also be displayed in tables

Example:-
<h3>Hyperlinks in Table</h3>
<table border="1" width="25%">
<tr>
<td width="45%"><a href="http://www.hotmail.com">Hotmail</a></td>
<td width="55%"><a href="http://www.yahoo.com">Yahoo</a></td>
</tr>
<tr>
<td><a href="http://www.Facebook.com">Facebook</a></td>
<td><a href="http://www.Google.com.pk">Google</a></td>
</tr>
</table>
Link

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy