Scribd
Upload
35 views

Lecture-7:Working With Links, Tag, Tag

The document discusses various aspects of links in HTML documents. It describes the <a> tag which is used to create links and some of its attributes like href, target, name, and title. It also discusses using images and email addresses as links. Other topics covered include setting link colors, absolute vs relative links, the <link> tag for external stylesheets and scripts, and the <base> tag for setting the base URL.

Uploaded by

garima batra
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
35 views

Lecture-7:Working With Links, Tag, Tag

The document discusses various aspects of links in HTML documents. It describes the <a> tag which is used to create links and some of its attributes like href, target, name, and title. It also discusses using images and email addresses as links. Other topics covered include setting link colors, absolute vs relative links, the <link> tag for external stylesheets and scripts, and the <base> tag for setting the base URL.

Uploaded by

garima batra
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

Lecture-7:Working with Links,

<LINK> tag, <base> tag


Working with Links
• Links(also called as Hyperlink) is a word or
group of words or image that provide
navigation for accessing informations in non-
sequencial way.
• On link when we hover the mouse the arrow
will turn into little hand.
Types of Hyperlinks
There are four types of hyperlinks.
• Text hyperlink – Uses a word or phrase to take
visitors to another page, file or document.
• Image hyperlink – Uses an image to take
visitors to another page, file or document.
• Bookmark hyperlink – Uses text or an image to
take visitors to another part of a web page.
• E-mail hyperlink – Allows visitors to send an e-
mail message to the displayed e-mail address.
Linking Documents - The <a> Element:
• A link is specified using the <a> element.
• This element is called anchor tag as well.
• 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.
• Following is the simple syntax to use this tag:
<a href="Document URL" attr_name="attr_value"...more
attributes> Text on which link is to created
</a>
Example:
<a href="http://www.iitmipu.ac.in" target="_self" >
Click For IITM website </a>
Anchor Attributes
• href : (mandatory attribute) specifies the location of the target
of a hyperlink called as hypertext reference. Its value is any
valid document URL(absolute or relative), including a fragment
identifier or a JavaScript code fragment.
• target: specify where to display the contents of a selected
hyperlink. If set to "_blank" then a new window will be opened
to display the loaded page, if set to "_top" or "_parent" then
same window will be used to display the loaded document, if
set to "_self" then loads the new page in current window. By
default its "_self".
• name : It gives the link a name. Used to link within the
document.
• title : It provide additional information to user about link as a
tooltip.
Linking Within a Page
• You can create a link to a particular section of a
page by using name attribute.
• First create a link to reach to the tip section of
the page. Here is the code we have used for the
same:-
<h1>Useful Tips Section<a name=“tips"></a></h1>
• Now to reach to this place use the following
code with-in this document anywhere:
<a href="#tips“>Visit the useful tip section</a>
 
Setting Link Colors
• By default, links will appear as follows in all
browsers:
– An unvisited link is underlined and blue
– A visited link is underlined and purple
– An active link is underlined and red
• You can set colors of your links, active links
and visited links using link, alink and vlink
attributes of <body> tag.
<body link=“blue" vlink=“yellow“ alink=“red" >
 .......
 </body>
HTML Image Links

• Here will learn how to use images to create


hyper links. See example below:
Syntax:
<a href=“Document Name”>
<img src=“image name”>
</a>
HTML Email Links
• HTML <a> tag provides you facility to specifiy an email
address to send an email. While using <a> tag as an email tag
then you will use mailto:email address along with href
attribute.
• Following is the syntax of using mailto instead of using http.
<a href= "mailto:[email protected]">Send Email</a>
• This code will generate following link:
Send Email
• Now if a user will click this link then it will lanuch one Email
Client ( like Lotus Notes, Outlook Express etc. ) installed on
your user's computer.
Absolute & Relative Link
• An absolute link specifies a fully-qualified URL; the protocol
must be present in addition to a domain name, and often a
file name must be included as well.
• For instance:
<a href=http://www.ipu.ac.in/result.htm”>
Go to CompuGoddess</a>
• A relative link specifies the name of the file to be linked to
only as it is related to the current document.
• For example, if all the files in your Web site are contained
within the same directory (or folder), and you want to
establish a link from page1.html to page2.html, the code on
page1.html will be:
<a href=”page2.html”>Go to page 2</a>
<Link> Element
• The HTML <link> tag is used for defining a link
to an external document.
• It is placed only in the <head> section of the
document.
• The <link> element is an empty element, it
contains attributes only.
Attributes
• href: Specifies the location of the linked
document.
• rel: Required attribute. It Specifies the
relationship between the current document
and the linked document. Example:
stylesheet, help, icon, author,etc

• type: The MIMEtype of content at the link


destination like text/css, text/javascript
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag</title>
<link rel="stylesheet" href="stylenew.css“ type=“text/css”>
</head>
<body>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on
various subjects.</p>
</div></body>
</html>
<base> Tag
• The <base> tag specifies the base URL/target for all
relative URLs in a document.
• For example, you can set the base URL once at the top of
your page, then all subsequent relative links will use that
URL as a starting point.
• There can be at maximum one <base> element in a
document, and it must be inside the <head> element.
• Note: If the <base> tag is present, it must have either an
href attribute or a target attribute, or both.
• The link above will actually resolve to
http://www.quackit.com/javascript/javascript_arr
ays.cfm regardless of the URL of the current page.
• This is because the base URL
(http://www.quackit.com/javascript/) is
prepended to the (relative) URL indicated in the
link (javascript_arrays.cfm)

You might also like