Lesson 7
How to link Pages?
How to add Email Links?
Relative URL
Absolute URL
Practice HTML (Use
it or Notepad)
Color
chart: Click here to chose color for your background.
How to Link Pages?
This lesson will teach you how to add links
to the text. How to navigate the different pages.
There are two types of links.
1. Relative Link
2. Absolute Link
It is called anchor tag <a>.
This tag allows to link pages, images of same page or other
pages. This tag uses opening and closing tags.
<a>
</a>
Ok let's see how this tag works. This tag also has
some attributes.
Here is our basic <html> tag . In this tag we will
add <a> tag to create links for pages. Copy and paste
this basic tag in your notepad or our feature 'Practice
HTML'.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Hi,
Welcome to my web.</p>
</body>
</html> |
Link for page:
Ok let's see how to link the page.
For linking pages together you will need
<a> tag
and its attribute "href"
and "Address
or location of the page" it
is called URL.
URL = Address
Here is our opening tag for link. <a
href="here goes page location
or address">
Suppose you want to make a page for your pet (cat). And
you want to give this page a name like cat or pet etc. So
your url will be:
cat.htm
or cat.html
pet.htm
or pet.html
In this address you can see .htm or .html it is an extension
for the file name. Because without this extension your page
cannot appear in World Wide Web. Ok so now let's see how
our <a> tag will look like.
<a href="cat.htm">
Copy this code or type it in your 'Notepad' or in 'Practice
HTML' and see how it looks. You can see in this code that
we have used the same basic html tags and just added <a
href=" "> opening
and </a>
closing tags around "here"
text. It means this html code
will create link for only 'here' text. The same way you
can create links for desired text.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Click
<a href="cat.htm">here</a>
to see my cat. </p>
</body>
</html> |
Your text will look like this. Look at here
in picture, it has created a link in this text. Underline
shows that this text has a link and blue color also shows
that it is taking the default color of link. Usually default
color of link is blue.
Click this link
. When you click on this link you can see it takes you to
another page. That's how link works, it helps to navigate
different pages of web site. You can create as many links
as you like.
As I wrote earlier there are two types of links. Let's see
what they are.
1. Relative URL:
If you are linking different pages of one web site
you can use this method. It means suppose you have 3-4 pages
and you want to link it with each other then you can use
Relative url.
Ex. mypage.com/cat.htm
In this example you can see suppose your web page name is
mypage.com and it has one page/file
called cat.htm When you link
this page to your mypage.com you can use relative url. Now
your <a> tag will be:
This is a relative url:
<a href="cat.htm"> See my cat </a>
2. Absolute
URL:
When you want to link your page with another web
site or outside or your page you'll need Absolute url. Because
if you will add relative url this link will not work. Because
the address of the page is different than yours that's why
link requires full address not just page/file address.
Ex: Suppose you want to create
a link in your page for jasminecorp.net so that people who
are visiting your page (mypage.com) can reach to jasminecorp.net
pages. Now the url will be:
<a href="http://www.jasminecorp.net">
Click here to go to Jasmine Computers site. </a>
If you want to sent somebody to tutorial page from
your page, your absolute url will be:
<a href="http://www.jasminecorp.net/tutorial/htmltutor">HTML
tutorial Pages</a>
It means you need the full address or location of
the page. It is called absolute url. In this address you've
added http://www. and full
website address.
EX: For relative url your code
will look like this. Type this code and practice it.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Click
<a href="cat.htm">here</a>
to see my cat. </p>
</body>
</html> |
For Absolute url your code will look like
this. Type this code and practice it. However
the link will not work because it is a fake link because there
is no such page exists.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
Click <a
href="http://www.mypage.com/cat.htm">here</a>
to see my cat. </p>
</body>
</html> |
You can see the difference between both. One
has only "page address"
it is called Relative url and other one has "full
address" it is called absolute url.
Relative url: <a href="cat.htm">here</a>
Absolute url: <a href="http://www.mypage.com/cat.htm">here</a>
How
to add Email links:
If you want to create Email link in your page so that people
can contact you or sent you emails. You can make Email link
by using this method. It also uses the same <a href="
"> tag </a>
But you'll need to add mailto:
and email address of a person with it. For ex. if
an email address of a person is david@yahoo.com
or Anita@yahoo.com
The full tag will look like this
<a href="mailto:Anita@yahoo.com ">Send
us Email </a>
<a href="mailto:david@yahoo.com ">
Contact us </a>
Type this code and practice it and see how
it works.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<a href="mailto:david@yahoo.com
"> Contact
us </a>
</body>
</html> |
