Hyperlinks

Hyperlinks

Introduction

So lets start with the hyperlinks or the just call them "links". Ok you just think for a minute that what may be the meaning of the links in your point of view. Yes again you are going in the right direction. Links means "connection between the two things" might it be any thing. Be two Persons, Roads, or two computers. And the links provide the facility or path between two things through which we can go from one to another.

In the same way the links can be provided between the two web pages, to go directly from one page to the another page. Such type of links are called as the Hyperlinks. This technique of linking one pages with other is called as the Hyperlinking.

Hyperlinking between two html pages:




We can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

Hyperlinks

So lets start with the hyperlinks or the just call them "links". Links means "connection between the two things" might it be any thing. Be two Persons, Roads or two computers. And the links provide the facility or path between two things through which we can go from one to another.

In the same way the links can be provided between the two web pages, to go directly from one page to the another page. Such type of links are called as the Hyperlinks. This technique of linking one pages with other is called as the Hyperlinking.


linking between two html pages


linking on same page

As you see in the above diagram if the user first click on the Page1.php then user automatically jumps to the Page2.php and vice-versa. Because the links on the both pages have been provided just the user have to click on those links. We can point to any resource on the Web: an HTML page, an image, a sound file, a movie etc.



Tags Used in the Hyperlinks


Tag
Description
<a>
Defines an anchor

You see there is only one tag in the Table i.e. <a> tag, it is called as anchor tag. This tag is used to link the documents in the Html and it is quite simple.


The <a> Anchor Tag and its Attributes:
<a>Attributes
Description
href
specifies the address or path (of any file) to which we want to jump.
target
specifies where the linked document will be opened.
name
specifies the name of the anchor.



Types of linking

1) Open a link in the same browser window
HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web:
an HTML page, an image, a sound file, a movie, etc.

Different attributes of the <a> tag are href, name, target.
So lets see some practical on <a> tag and its attributes.

If you want to open the new hyperlinked page in the same window then do not write the "target" attribute in the <a> tag.


The syntax of creating an anchor:
<a href="url">Text to be displayed</a>  OR  <a href="url" >Text to be displayed</a>

Example:
<a href="http://www.xyz.com"> Visit www.xyz.com </a>
<a href="c:\abc.html" > Visit abc.html </a>

Note:
You can write the path in both ways in HTML

<a href="c:\abc\abc.html"  > Visit www.xyz.com </a>  or
<a href="c:/abc/abc.html"  > Visit abc.html </a>

The <a> tag is used to create an anchor to link from, in  href attribute we provide the address or path of the web page (any file) to which we want to link (jump, open) and the words between the open and close of the anchor tag will be displayed as a hyperlink text.

Remember the file you want to open on an hyperlink should exist on the location you provided in the href attribute of the <a> tag.

The above Example will display the text in a browser:
Visit www.xyz.com

And now click on above text you will get linked to website of xyz.com. And the Website of xyz.com gets opened in the same window. In this way a hyperlinking to jump to another page is done.


2) Open a link in a new browser window
HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie etc.

Different attributes of the <a> tag are href,  name, target. so lets see some practical on <a> tag and its attributes.

The syntax of creating an anchor:
<a href="url"> Text to be displayed </a>  OR  <a href="url" target="_blank "> Text to be displayed </a>

Example:
<a href="http://www.xyz.com"> Visit www.xyz.com </a>
<a href="c:\abc.html"  target="_blank "> Visit abc.html </a>

Note:
You can write the path in both ways in HTML

<a href="c:\abc\abc.html"  target="_blank "> Visit www.xyz.com  </a>  or
<a href="c:/abc/abc.html"  target="_blank "> Visit abc.html </a>


The <a> tag is used to create an anchor to link from, in  href attribute we provide the address or path of the web page (any file) to which we want to link (jump, open) and the words between the open and close of the anchor tag will be displayed as a hyperlink text.

Remember the file you want to open on an hyperlink should exist on the location you provided in the href attribute of the <a> tag.

The above Example will display the text in a browser:
Visit www.xyz.com

And now click on above text you will get linked to website of xyz.com. And the Website of xyz.com gets opened in the new window. In this way a hyperlinking to jump to another page is done.


Target Attribute
With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.xyz.com/" target="_blank"> Visit www.xyz.com </a>


3)  Link to a location on the same page The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

So the first write this named anchor on the section of the page to which you want to get link.

surround the text "Hyperlink" by a named tag as shown below:

Syntax of a named anchor:
<a name="label">Text (to which you want to link)</a>

Example:
<a name="intro"> Hyperlinks </a> for e.g. Write this line instead of the Hyperlink at the top of page

In this way the the named anchor is defined on the same document in which Hyperlink section of this page is linked. The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
To link directly to the named anchor  "intro" section, if from the end of the page you want to go to the Hyperlink introduction, then include the following line at the end of page in body section.

Add a # sign and the name of the anchor to the end of a URL, like this:
<a href="#intro"> Hyperlinks Introduction (text you like) </a>

In this we use the href attribute of the <a> tag to link to named anchor "#intro" and which automatically jumps to the top of the page where it was defined.

Example:
Iif you want to link to the tips section of basic.html page of xyz.com then the formate will be:
<a href="http://www.xyz.com/basic.html#tips"> Jump to the Useful Tips Section </a>

only the thing is that the basic.html page tips section should have a named anchor as
<a name="tips" > TIPS </a>

so now you have done a lot in the links now you saw how simple hyperlinks are.
So now lets do some Practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:
<html>
<head>
<title>Links</title>
</head>
<body>
<b>
Open a link in a new browser window
(using href & target attribute of the tag).
<br>
<br>
click here to go
<a href="http://www.xyz.com">
www.e-bizel.com.</a><br>
<br>
click here to go
<a href="hyperlinks.html">hyperlinks.html.</a></font>

Link to a location on the same page

<br>
<br>
go to<a href="#lesson11">
Lesson11</a><br>
go to      <a href="#lesson10">Lesson10</a><br>
go to
<a href="#lesson8">Lesson8</a><br>Lesson1<br>
<br>
Lesson 2<br>
<br>
Lesson 3<br>
<br>
Lesson 4<br>
<br>
Lesson 5<br>
<br>
Lesson 6<br>
<br>
Lesson 7<br>
<br>

<a name="lesson8" >Lesson 8</a><br>
<br>
Lesson 9<br>
<br>
<a name="lesson10" > Lesson 10</a><br>
<br>
<a name="lesson11" >Lesson 11</a><br>
</b>
</body>
</html>

:



Hyperlinks

How to Hyperlink an Image

To hyperlink an image first we have to insert the image on the web page. So question is how to insert the image on the web page. In html the image can be inserted using the <img> tag. <img> tag has the attributes like width, height and src, which specifies the height and width of the image  that is to displayed on the web page and scr has the value of the path where the image is stored. <img> tag does not have the end tag. so now use the <img> tag.


<img> tag
Format:
<img src="path" width="number" height="number">

Example:
<img src="img\logo_in.gif" width="200" height="200">

The example inserts the image "logo_in.gif" with the height of 200 pixel and width of 200 pixel. By  using this  tag you can insert the image in your html file, now if you want to create this image the hyperlink then follow the steps:

How to make the  image as Hyperlink
Format:
<a href="path_of_file" ><img src="path" width="number" height="number"></a>

Example:
<a href="list_tags.php"><img src="img\logo_in.gif" width="200" height="200"></a>
To make an image as hyperlink just enter the <img> tag between the <a> anchor tag. And it will get Hyperlinked.

So now lets do some practical.
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:
<html>
<head>
<title>Links</title>
</head>
<body>
<b> Here the image is hyperliked.</b>
<a href="list_tags.php">
<img src="img/logo_in.gif" width="200" height="100"></a>
</body>
</html>




So now you have seen how the Images are inserted in the HTML pages and how these inserted images are made as hyperlinks to any other HTML page.


Comments

Post a Comment

Popular posts from this blog

Multimedia

Multimedia Introduction In multimedia, you will learn how to provide the songs, video and picture (images) in your web page. How it will feel to you that whenever you open your web page it starts singing, playing movie, or display your family picture. You can learn all of these things very easily. Just go on reading the Chapter and learn the Magic of the multimedia elements. Working with Images In this section you will learn about "how the images can be used in HTML". 1. How you can create a page with image as background. 2. How you can make a picture as a hyperlink to another file (any type of file). How to Hyperlink an Image To hyperlink an image first we have to insert the image on the web page. So question is how to insert the image on the web page. In ...
Read more

1.Introduction of HTML

Image
Introduction of HTML What is HTML? HTML is a language made for creating the web pages for the websites. By using HTML language the even a child can make his web pages or even his own website so why not you? Introduction of HTML Why do Need HTML? As the HTML is a very easy language for creating the  web pages. It can be learned in few hours or in few days.  It is the basic format of the HTML file it can be displayed  on mostly operating system which supports the web browser. With the help of HTML you can easily create a webpage. Basics of HTML What is an HTML File? 1. HTML stands for Hyper Text Markup Language. 2. An HTML file is a text file containing small markup tags. 3. The markup tags tell the Web browser how to display the page. 4. An HTML file must have an htm or html file extension. An...
Read more

HTML Lists

Image
HTML Lists Introduction In HTML there are three types of list ordered, unordered and definition lists. With the name itself you might be understanding that what is list. Yes you are thinking in the right way. It is the list of anything e.g. list of items, list of books. Hope now you are clear about the List element of the HTML. Now the question is that, can you create the list of items in the web page? Certainly not, But do not worry with the help of this small chapter you can create any type of lists on the your web page very easily. And it will take few of your minutes to learn. So lets Begain! Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles), it does not have numbers in the list. An unordered list starts with the <ul> tag and end with </ul>. list items are def...
Read more