on LINKs - Muhammad sami
Download
Report
Transcript on LINKs - Muhammad sami
In this lecture, you will learn:
❑ How to link between pages of your site
❑ How to link to other sites
❑ How to structure the folders on your web
site
❑ How to link to specific parts of a page in
your site
A link is specified using the <a> element.
Anything between the opening <a> tag and the closing </a>
tag becomes part of the link a user can click in a browser.
Hyperlinks allow visitors to navigate between web sites by
clicking
on
words,
phrases,
and
images.
3
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything
between these two will work as a link.
2) The example below shows how to make the
word
Here work as a link to yahoo.
Click <A
HREF="http://www.yahoo.com">here</A> to
go to yahoo.
To link to another document, the opening <a> tag
must carry an attribute called href; the value of the
href attribute is the page you are linking to.
Example:
<body>
Return to the <a href=”index.html”>index page</a>.
</body>
Index.html should be in the same folder, when you
click the words “index page,” the index.html page will
be loaded into the same window, replacing the
current page.
If you want to link to a different site, you can
use the following syntax, where you specify a
full URL (Uniform Resource Locator) for the
page you want to link to rather than just the
filename.
Example:
<body>Why not visit the
<a href=”http://www.wrox.com/”>Wrox Web
site</a>?
</body>
Example:
<body>
<a href=“main\Contact.html">Please Contact
us</a>
This is the first example of <a
href=“http://www.w3schools.com/ajax/ajax_e
xamples.asp”> AJAX </a>
</body>
Internal Links
1.
2.
Internal Links : Links can also be created inside large
documents to simplify navigation. Today’s world wants
to be able to get the information quickly. Internal links
can help you meet these goals.
Select some text at a place in the document that you
would like to create a link to, then add an anchor to link
to like this:
<A id=“bookmark_name”></A>
The id attribute of an anchor element specifies a
location in the document that we link to shortly. All id
attributes in a document must be unique.
Next select the text that you would like to create as a
link to the location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
8
Destination Anchors Example:
<h1>Linking and Navigation</h1>
<h2><a id="URL">URLs</a></h2>
<h2><a id="SourceAnchors">Source
Anchors</a></h2>
<h2><a id="DestinationAnchors">Destination
Anchors</a></h2>
<h2><a id="Examples">Examples</a></h2>
Source Anchors Example:
<p>This page covers the following topics:
<ul>
<li><a href="#URL">URLs</a></li>
<li><a href="#SourceAnchors">Source
Anchors</a></li>
<li><a href="#DestinationAnchors">Destination
Anchors</a></li>
<li><a href="#Examples">Examples</a></li>
</ul>
</p>
</body>
</html>
More on LINKs
<body LINK="#C0C0C0" VLINK="#808080"
ALINK="#FF0000">
LINK - standard link - to a page the visitor hasn't
been to yet. (standard color is blue - #0000FF).
VLINK - visited link - to a page the visitor has been
to before. (standard color is purple - #800080).
ALINK - active link - the color of the link when the
mouse is on it. (standard color is red - #FF0000).
If the programmer what to change the color
Click <a href="http://www.yahoo.com"><font
color="FF00CC">here</font></a> to go to yahoo.
11
Linking to E-mail Addresses
On clicking email links, a new e-mail is
opened in your default e-mail program,
ready for you to send an e-mail to that
address. E.g. [email protected]
Example:
For support <a
href="mailto:[email protected]">E-mail
us</a>
12
Some less trustworthy inhabitants of the Web
use little programs to automatically search
web sites for e-mail addresses. After they
have found e-mail addresses on web sites,
they will start sending spam (junk mail) to
those addresses.
❑ Use an e-mail form instead so that visitors fill in
a form on your web site to send you an e-mail.
Once you have received the mail, you can then
reply as normal because automated programs do
not use contact forms to collect e-mail addresses.
Use of an e-mail form requires either a CGI script
or a server-side scripting language such as
ASP.net, JSP, PHP, Cold Fusion, or Ruby. provides
an example of an e-mail form.
❑ Write your e-mail address into the page using
JavaScript. The idea behind this technique is that
the programs that scour the Web for e-mail
addresses cannot read the JavaScript version of an
address.