Links are found in nearly all Web pages.
Links allow users to click their way from page to page.In this lesson, you will learn how to make
links between pages. Links
are the most fundamental part of the World Wide Web. It is the links that tie it all together.
There are three different kinds of links you can have on your
website:
• Links to anchors
on the current page (Internal).
• Links to other
pages within the current site (Local)
• Links
to pages outside the current site (Global).
The
HTML <a> tag defines a hyperlink.
A
hyperlink (or link) is a word, group of words, or image that you can click on
to jump to another document.
When
you move the cursor over a link in a Web page, the arrow will turn into a
little hand.
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:
- An unvisited link
is underlined and blue
- A visited link is
underlined and purple
- An active link is
underlined and red
HTML Link Syntax:
The
HTML code for a link is simple. It looks like this:
<a
href="url">Link text</a>
The
href attribute specifies the destination of a link.
Make a link:
To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything. Here is an example of what a link to HTML.net could look like:
Example 1:
<a
href="http://creativedesignbest.blogspot.com/">Learn step by step html tutorial</a>
Would look like this in the browser:
Learn step by step html tutorial
The element
a stands for "anchor". And the
attribute href is short for "hypertext
reference", which specifies where the link leads to - typically an address
on the internet or a file name.In the above example the attribute
href has the value "http://www.
creativedesignbest.blogspot.com ", which is the full address of
creativedesignbest.blogspot.com and is called a URL (Uniform Resource Locator).
Note that "http://" must always be included in URLs. The sentence
"Here is a link to creativedesignbest.blogspot.com " is the text that
is shown in the browser as the link. Remember to close the element with an </a>.Links between my own pages:
If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this:
Example 2:
<a href="page2.htm">Click here to go to page
2</a>If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:
Example 3:
<a
href="subfolder/page2.htm">Click here to go to page 2</a>The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:
Example 4:
<a
href="../page1.htm">A link to page 1</a>
"../" points to the folder one level up from
position of the file from which the link is made. Following the same system,
you can also point two (or more) folders up by writing "../../".Did you understand the system? Alternatively, you can always type the complete address for the file (URL).
Internal links within a page:
You can also create internal
links within a page - for example a table of contents at the top with links to
each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol
"#".Use the
id attribute to mark the element to which you
want to link. For example:
<h1
id="heading1">heading 1</h1>
You can now create a link to that
element by using "#" in the link attribute. The "#" must be
followed by the id of the tag you want to link to. For
example:
<a
href="#heading1">Link to heading 1</a>
All will become clear with an example:
<html>
<head>
</head>
<body>
<p><a
href="#heading1">Link to heading 1</a></p>
<p><a
href="#heading2">Link to heading 2</a></p>
<h1
id="heading1">heading 1</h1>
<p>Text text text
text</p>
<h1
id="heading2">heading 2</h1>
<p>Text text text
text</p>
</body>
</html>
Link to heading 1
Heading 1
Text text text text
Heading 2
Text text text text(Note: An id attribute must start with a letter)
Link to anything :
You can also make a link to an e-mail address. It is done in almost the same way as when you link to a document:
Example 6:
<a
href="mailto:mbelalhossain91@gmail.com">Send an e-mail to
autor</a>
Send an e-mail to autor
The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document, you type
mailto: followed by an e-mail address. When the
link is clicked, the default e-mail program opens with a new blank message
addressed to the specified e-mail address. Please note that this function will
only work if there is an e-mail program installed on your computer. Give it a
try!
other attributes:
To create a link, you always have
to use the href attribute. In addition, you can also put a title on your link:
Example 7:
<a
href="http://www.creativedesignbest.blogspot.com/"
title="Visit
creativedesignbest.blogspot.com and learn
HTML">HTML
tutorials</a>
Would look like this in the browser:
HTML tutorials
The title attribute is used to type a short description of the link. If you - without clicking - place the cursor over the link, you will see the text "Visit HTML.net and learn HTML" appears.
Link to an external style sheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
<body>
<h1>I am formatted with an external
style sheet</h1>
<p>Me too!</p>
</body>
</html>
Image links:
If you want to make an
image work as a link, the method is exactly the same as with texts.
You simply place the <a href> and the </a> tags on each side of the image.
Below is the HTML code used to make the image work as a link to a page calledmyfile.htm:
You simply place the <a href> and the </a> tags on each side of the image.
Below is the HTML code used to make the image work as a link to a page calledmyfile.htm:
<a
href="myfile.htm"><img src="rainbow.gif"></a>
If you haven't
entered a border setting you will see a small border around the image after
turning it into a link. To turn off this border, simply add border="0" to the <img> tag:
<a
href="myfile.htm"><img src="rainbow.gif"
border="0"></a>
Images that work as links
can show a popup text when you place the mouse over it.
This is done with the alt property in the <img> tag.
For example:
This is done with the alt property in the <img> tag.
For example:
<a
href="myfile.htm"><img src="rainbow.gif"
border="0"alt="Link to this page"></a>
Image mapping:
It is possible to make
one image link to several pages, depending on where the image is clicked.
This technique is called imagemapping.
You simply specify which areas of the image should link to where.
In the example below, if you position the mouse in the upper left corner it links to yahoo .... and in the lower right corner.... it links to hotbot.
This technique is called imagemapping.
You simply specify which areas of the image should link to where.
In the example below, if you position the mouse in the upper left corner it links to yahoo .... and in the lower right corner.... it links to hotbot.
<img src="rainbow.gif" usemap = #example
border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29
Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59
Href="http://www.hotbot.com">
</map>
In the above example we only used rectangular imagemappings.
Possible shapes are:
- <area shape=rect coords=
x1,y1, x2,y2 Href="http://www.domain.com">
- <area shape=circle coords= x1,y1,
x2,y2 Href="http://www.domain.com">
- <area shape=polygon coords= x1,y1,
x2,y2, .., xn,yn Href="http://www.domain.com">
There are excellent tools out there to help you create imagemaps. No one calculates the coordinates by hand.
If you want to use imagemaps on your site you will need to get a program that will allow you to simply drag the mouse over the areas you want to work as links.
Most HTML editors have this as a built-in function.
If you do not use an HTML editor, you can still get programs that will do this boring job for you - best thing is - you can get it for free!
Below are links to websites that will help you create your imagemaps on the fly.
Just make sure that the image is uploaded to the web before using these tools.
Colors on text links:
There are a few settings that can be useful for controlling the
colors of text links.
This page will teach you how to:
This page will teach you how to:
- Define
colors for all links on the page.
- Define colors for
individual links on the page.
Define colors for all
links on the page
The general color of text links is specified in the <body> tag, like in the example
The general color of text links is specified in the <body> tag, like in the example
below:
<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).
Define colors for
individual links on the page:
The method described above is for setting overall link colors for the page.
However, you might want one or more links to have different colors than the rest of the page.
There are two methods for doing this:
The method described above is for setting overall link colors for the page.
However, you might want one or more links to have different colors than the rest of the page.
There are two methods for doing this:
- Placing
font tags between the <a href> and
the </a> tag.
This method will work on all browsers except MSIE 3.
- Using a style
setting in the <a> tag.
This method works on MSIE3 and newer browsers.
The first technique would look like this:
Click <a href="http://www.yahoo.com"><font
color="FF00CC">here</font></a>
to go to yahoo.
Note:
It is important that both the <font> and the </font> tags are between the <a href> and </a> tags.
The second technique would look like this:
It is important that both the <font> and the </font> tags are between the <a href> and </a> tags.
The second technique would look like this:
Click <a
href="http://www.yahoo.com" style="color:
rgb(0,255,0)">here</a> to go to yahoo.
Now, since neither of the two methods covers all browsers, we need to use both techniques at once.
This example will work on all browsers:
Click <a href="http://www.yahoo.com"
style="color: rgb
(0,255,0)"><font
color="FF00CC">here</font></a> to go to
yahoo.
No underline:
By default, text links are underlined by the browser.
If your page is visited by MSIE3 or newer, you can turn off the underlining for an entire page by adding a style tag to the head section of the document.
Look at this example:
If your page is visited by MSIE3 or newer, you can turn off the underlining for an entire page by adding a style tag to the head section of the document.
Look at this example:
<html>
<head>
<title>This is my
page</title>
<style type="text/css">
<!--
A{text-decoration:none}
-->
</style>
</head>
<body>
Welcome to my world!<br>
<a
href="http://www.yahoo.com">This Link To Yahoo has no
underline</a>
</body>
</html>
Welcome to my
world!
This Link To Yahoo has no underline
This Link To Yahoo has no underline
Links in framesets:
If a non-framebased
HTML document contains a hyperlink that links to a page called analysis.htm then it appears in the HTML document somewhat like this:
Click here to see the <a
href="analysis.htm">Analysis</a> of
the project.
Now if the same link
was in a frameset, (say in the frame window called menu) and we wanted it to link to a page that is loaded in the other
frame window, (named main) then the HTML code would be:
Click here to
see the <a
href="analysis.htm"target="main">Analysis</a> of
the project
The link will be opened in the main frame window instead of the menu frame window where the link itself is located.
Break
out of a frame source:<!DOCTYPE html>
<html>
<p>Locked in a frame?</p>
<a href="http://www.creativedesignbest.blogspot.com/" target="_top">Click here!</a>
</body>
</html>
Break out of a frame result:
Locked in a frame?
Links to new
window:
If you want your
link to open a page in a new window use the target="_blank" in the <a href> tag.
Targetting the link to "_blank" simply opens a new browser window that will load the linked page.
Linking to Yahoo the traditional way would require this link:
Targetting the link to "_blank" simply opens a new browser window that will load the linked page.
Linking to Yahoo the traditional way would require this link:
<a href="http://www.yahoo.com">Go to
Yahoo</a>
If you add a target="_blank", the page will open in a new window:
<a
href="http://www.yahoo.com" target="_blank">Go to
Yahoo</a>
Click the link below to see this link in action:
Link to email:
Having a link that
allows visitors to send email from your website can be a great addition to your
site, making it easy for your visitors to send questions or comments.
There is a special link for this action.
Email links are done much the same as links to other pages, using the
<a href> tag.
An email link would require the following code:
There is a special link for this action.
Email links are done much the same as links to other pages, using the
<a href> tag.
An email link would require the following code:
<a
href="mailto:youremailaddress">Email Me</a>
This will result in
the visitor's email program opening a new email with your address already in
the To: field.
If you wish to have a specific
subject in the email, you can add it to the html code using subject= setting :
<a
href="mailto:mbelalhossain91@gmail.com">Send an e-mail to
autor</a>
Suppose you want an
email link for your visitors containing specific text in the body of their
message, simply add &body=:
<a href="mailto:email@echoecho.com?body=Please
send me a copy of your new program!">Send Email</a>
Or combine all the
options and allow your visitor to send email with the address, subject and text
already entered.
<a
href="mailto:email@echoecho.com?subject=SweetWords
&body=Please
send me a copy of your new program!">Email Me</a>
<!DOCTYPE html>
<html>
<body>
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
Create a mailto link result:
This is an email link: Send Mail
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
Create a mailto link source 2:
<!DOCTYPE html>
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
Create a mailto link result 2:
This is another mailto link: Send mail!
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
Default
Email Subject and Body:
You can specify a default email subject
and email body alongwith your email address. Following is the example to use
default subject and body.
<a
href="mailto:abc@example.com?subject=Feedback&body=Message">
Send
Feedback
</a>
This code will generate following link:
Send Feedback
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.
You
can not make an image download able until you follow the following procedure.
html -
thumbnails:
Thumbnails are by far the most common type
of image link seen in today's world. To create a thumbnail, one must save a
low-quality version of a picture with smaller dimensions. Then, one should link
this low-quality picture to its higher-quality counterpart.
Thumbnails are intended to give your
audience quick previews of images without them having to wait for the larger,
higher-quality image to load. Photo galleries make heavy use of thumbnails, and
they will allow you to display multiple pictures on one page with ease.
HTML Thumbnail Code:
<a
href="sunset.gif">
<img src="thmb_sunset.gif" />
</a>
HTML Thumbnails:
Advanced text links:
Instead of just
turning off the underline on all links you could be more specific in defining
the way you want your links to work.
In the example below underlining is turned off for all links.
The A:hover tells the browser that when the mouse is over a link the underline should appear.
The hover option only works on MSIE 4+.
(But it does not cause an error on Netscape if you include it - the effect just does not appear.).
In the example below underlining is turned off for all links.
The A:hover tells the browser that when the mouse is over a link the underline should appear.
The hover option only works on MSIE 4+.
(But it does not cause an error on Netscape if you include it - the effect just does not appear.).
<html>
<head>
<title>This is my
page</title>
<style type="text/css">
<!--
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline}
-->
</style>
</head>
<body>
Welcome to my world!<br>
<a
href="http://www.yahoo.com">This Link To Yahoo has no
underline</a>
</body>
</html>
Result:
Welcome to my
world!
This Link To Yahoo has no underline
This Link To Yahoo has no underline
The methods
described above will turn off the underline effect for links on the entire
page.
If you want to turn off the effect for just a single link, add a style property to the<a href> tag:
If you want to turn off the effect for just a single link, add a style property to the<a href> tag:
<a href="http://www.yahoo.com"
style="text-decoration:
none">Go to Yahoo</a>
Result:
This example will show you how:
<html>
<head>
<title>This is my
page</title>
<STYLE
TYPE="text/css"><!--
A.set1:link {color: #FF00FF; }
A.set1:active {color: #FFFF00; }
A.set1:visited {color: #00FFFF; }
A.set2:link {color: #AA00FF; background:
FF00AA; text-
decoration: none}
A.set2:active {color: #FF00AA;
background: none transparent;}
A.set2:visited {color: #FFFF00;
text-decoration: none}
--></STYLE>
</head>
<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com
CLASS=set1> Yahoo </a>
<a href="http://www.hotbot.com
CLASS=set2> Hotbot </a>
</body>
</html>
Result:
No comments:
Post a Comment