Links are used to, as the name suggests, link
the various web resources to the current document. Links use the container
tags<A> and </A> which termed as anchor tags. The format of using
the anchor tags is :-
<A HREF=”URL”> Text Describing link or,
image as referenced by <img> tag </A>
Where href is an attribute of <A> tag
and is used to reference the URL of the resource.
Web pages can contain any
number of links that take you directly to other pages and even specific parts of a
given
page. These links are known
as hyperlinks, as they are packed
with the capability to display the content on the fly.
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 your any web page.
In this tutorial you will learn how to create text links between the different pages of your site,
links within pages of your sites, and how
to link to other sites (or external sites).
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 />
Anchor Attributes:
Following are
most frequently used attributes
for <a> tag.
- href: specifies the URL of the target of a hyperlink. 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 & id: attributes places a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to goto that label.
- event: attributes like onClick, onMouseOver etc. are used to trigger any Javascript ot VBscript code.
- title: attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link.
- accesskey: This attribute provides a keyboard shortcut that can be used to activate a link. For example, you could make the T key an access key so that when the user presses either the Alt or Ctrl key on his keyboard (depending on his operating system) along with the T key, the link gets activated.
A Simple Example:
<a href=" http://mycodemantra.blogspot.in/" target="_blank" > Home</a> |
<a href=" http://learnhtmlconcepts.blogspot.in//" target="_self" >HTML Concepts</a> |
Relative
and Absolute Links
Relative links are those that reference
documents in the current directory or within the same page, on which the link
is used. There is an example which is having both internal and external relative links. The
anchor tag which is having # in href attribute causes an internal linking while
the href having an .html file name creates an external but relative link. Means
the file mars.html , Saturn.html, Uranus.html etc. should be present in the
same directory.
Planet.html
<html>
<head>
<title>
Relative Links </title>
</head>
<body>
<h2> Planets in our milky way
</h2>
<p> Click one of the following names of
the planets to know more about them. <br>
<a href="#Earth"> Earth
</a> <br>
<a href="#Jupitor"> Jupitor
</a> <br>
<a href="#Pluto"> Pluto
</a> <br>
<a href="#Mercury">Mercury
</a> <br>
<a href="Mars.html"> Mars
</a> <br>
<a href="Saturn.html"> Saturn
</a> <br>
<a href="Uranus.html"> Uranus
</a> <br>
<a href="Venus.html"> Venus
</a> <br>
<a href="Neptune.html">
Neptune </a> <br>
</p>
<img src="Home Page Image for
RCCodemantra.jpg">
<dl>
<dt>
<a name="Earth"><b>
Earth</b></a>
<DD>Earth, known as the World or the Globe, is the third planet from the
Sun and the only object in the Universe known to harbor life. It is the densest
planet in the Solar System and the largest of the four terrestrial planets.
Earth's atmosphere and oceans were formed by volcanic activity and outgassing
that included water vapor. The origin of the world's oceans was condensation
augmented by water and ice delivered by asteroids, protoplanets, and
comets.</DD>
<dt>
<a name="Jupitor"><b>
Jupitor</b></a>
<DD>Jupiter is the fifth planet from the
Sun and the largest in the Solar System. It is a giant planet with a mass
one-thousandth that of the Sun, but two and a half times that of all the other
planets in the Solar System combined. Jupiter and Saturn are gas giants; the
other two giant planets, Uranus and Neptune are ice giants. Jupiter has been
known to astronomers since antiquity. The Romans named it after their god
Jupiter. When viewed from Earth, Jupiter can reach an apparent magnitude of -2.94,
bright enough for its reflected light to cast shadows, and making it on average
the third-brightest object in the night sky after the Moon and
Venus.</DD>
<dt>
<a name="Pluto"><b>
pluto</b></a>
<DD>Pluto (minor-planet designation:
134340 Pluto) is a dwarf planet in the Kuiper belt, a ring of bodies beyond
Neptune. It was the first Kuiper belt
object to be discovered.
Pluto was discovered by Clyde Tombaugh in 1930
and was originally considered to be the ninth planet from the Sun. After 1992,
its planethood was questioned following the discovery of several objects of
similar size in the Kuiper belt. In 2005, Eris, which is 27% more massive than
Pluto, was discovered. </DD>
<dt>
<a name="Mercury"><b>
Mercury</b></a><dd>
Mercury is the smallest and innermost planet
in the Solar System. Its orbital period around the Sun of 88 days is the
shortest of all the planets in the Solar System. It is named after the Roman
deity Mercury, the messenger to the gods.
Like Venus, Mercury orbits the Sun within
Earth's orbit as an inferior planet, so it can only be seen visually in the
morning or the evening sky, and never exceeds 28° away from the Sun. Also, like
Venus and the Moon, the planet displays the complete range of phases as it
moves around its orbit relative to Earth. Seen from Earth, this cycle of phases
reoccurs approximately every 116 days, the so-called synodic period. Although
Mercury can appear as a bright star-like object when viewed from Earth, its
proximity to the Sun often makes it more difficult to see than Venus.
</dd>
</body>
</html>
Mars.html
<html>
<h1> MARS as a Planet </h1>
Mars is the fourth planet from the Sun and the
second-smallest planet in the Solar System, after Mercury. Named after the
Roman god of war, it is often referred to as the "Red Planet" because
the iron oxide prevalent on its surface gives it a reddish appearance. Mars is
a terrestrial planet with a thin atmosphere, having surface features
reminiscent both of the impact craters of the Moon and the valleys, deserts,
and polar ice caps of Earth.
The rotational period and seasonal cycles of
Mars are likewise similar to those of Earth, as is the tilt that produces the
seasons. Mars is the site of Olympus Mons, the largest volcano and
second-highest known mountain in the Solar System, and of Valles Marineris, one
of the largest canyons in the Solar System. The smooth Borealis basin in the
northern hemisphere covers 40% of the planet and may be a giant impact
feature.Mars has two moons, Phobos and Deimos, which are small and irregularly
shaped.
</html>
When we click on the internal relative links,
our display of the page shifts to that link as in the below figure.
But when we click on the external relative
link it opens a new .html file in the same space. Like when I had clicked on
mars option it will show me mars. Html file and so on. You can create all other
files as I had created for mars.
Base Path for Links:
It is not required to give a complete URL for every link. You can get rid of it if you will use <base> tag in your 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.
<head>
<base href="http://www.ourppt.com/">
</head>
Setting Link Colors:
You can set colors of your links, active links and visited links using link,
alink and vlink attributes of <body> tag. But it is recommended to use CSS to set colors of links, visited links
and active links which we will
discuss in detail in another blog
We can use <body> tag
to set link colors.
Here is the syntax.
<body alink="#FF0000" link="#900B09" vlink="#900B09"> .......
</body>
Create 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:
<a href="http://www.example.com/file.pdf">Download File</a>
This will produce following link and will be used to download a file.
Download File
Create Links for other internet Services
·
Email
Services :- links to an E-mail address can be provided
using the mailto: protocol. Syntax is :-
<a
href=mailto:rccodemantra.com@gmail.com>
send a mail </a>
Here
mailto: protocol is references by the href attribute of <a> tag and rccodemantra.com@gmail.com is a
valid email address to which an email is to be sent. When user click on send a mail, the web-browser loads an external helper application
to send the mail. The user has to enter the message in the space provided and
click on the send button.
No comments:
Post a Comment