HTML Hyperlink is some texts or images from which anyone can go other places by clicking on that. For watching information in web browser i...
HTML Hyperlink is some texts or images from which anyone can go other places by clicking on that.
For watching information in web browser is used. In the web server information are saved. Between server and browser information transferred by HTTP. Full form of HTTP is “Hyper Text Transfer Protocol”.
In web hyperlink is used. By this one page is linked with one or more than one link. These links are called hyperlink. Usually links are colored and underlined for making user understandable.
Advantages of hyperlink
Many documents, files, other web address sources became easier to access.
Using HTML Hyperlink we can visit other pages of same website.
Hyperlink is made by using anchor tag.
Used tags in HTML Hyperlink
Anchor tag structure
<a> ….. </a>
HTML Hyperlink structure
<a href = "URL">Text for link</a>
href
It is an attribute which specifies the destination address.
Text for the link
It is the part which is visible to the user.
If anyone clicks on the link will go to the address which has specified.
HTML Hyperlink types
HTML Hyperlinks are divided into two types.
- Internal hyperlink
- External hyperlink
Internal hyperlink
If html hyperlink is made for visiting one page from another page of same web site which are in same web server then this is called internal hyperlinking.
By internal hyperlinking words are hyperlinked with other web page or different specific part of that web page of same web site.
Relative URL is used for internal linking. In this type of URL it is not need to add protocol name or host name. Only we need to give the file name which is on the server.
There is two files in same Directory one is College and another one is Section.
Opening College.html file we will see a link Click here to visit section. Clicking on that we will visit Section.html file.
Code for College.html file
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
Here is hyperlink of section.</br>
<a href = "Section.html"> Click here to visit section</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
Here is all the sections.</br>
A</br>B</br>C</br>D</br>
</body>
</html>
Now we have saved these files as College.html and Section.html in same folder.
Now opening College.html with an web browser we will see like this.
We can see there is an html hyperlink named Click here to visit section. If we click on that we will go on the College.html file.
<a href = "Directory name/file name"> Click here to visit file</a>
Following the previous example if Section.html file is in a directory name Section and College.html file is not there so we have to write code like this.
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
Here is hyperlink of section.</br>
<a href = "Section/Section.html"> Click here to visit section</a>
</body>
</html>
Both are in different directory but we can access by adding the directory name Section in the College.html file.
External hyperlink
If we want to access a page from another page but both are not in same server then we have to build external hyperlink. By external hyperlinking one page to another page from same web or different web is accessible.
Absolute URL is used in this. In this type of URL protocol, host name, file name is necessary to represent. HTTP (protocol), web host name/IP address, file name and path must have to know.
Structure
<a href = "protocol/host name/path/file name">Link name</a>
As an example
<a href = "https://www.dtinv.info/HTML/make-list-in-html-page.html ">Click here to know about making list</a>
Here
Many types of attributes are used with HTML Hyperlink tag. Such as-
As an example
<a href = "https://www.dtinv.info/HTML/make-list-in-html-page.html ">Click here to know about making list</a>
Here
- href is the hyper reference attribute
- https://www.dtinv.info is the host name
- http is the protocol
- HTML is the path or directory
- make-list-in-html-page.html is the file name
- Between anchor tag (<a>...</a>) Click here to know about making list is the anchor link.
Many types of attributes are used with HTML Hyperlink tag. Such as-
Attributes | Use |
href | Used for hyper reference |
title | Used as tool tip |
name | In the bookmark |
target | For opening hyperlink in a new window |
name attribute: If we want to bookmark any part in web page then we use name attribute in html anchor tag.
target attribute: Target attribute used for opening the hyperlink in a new window.
External hyperlink example
Write these is a text document and save this with .html extension
<!DOCTYPE html>
<html>
<head><title>External Hyperlinking</title></head>
<body>
Here is an example of External Hyperlink<br>
<a href = "https://www.dtinv.info"> This is a link.
If you click here it will take you into the linked page.</a>
</body>
</html>
After that open that .html file with a browser. Output will be like this-
Clicking on the link it goes into the specified link.
If we want to open this in a new window we have to use target attribute with it . So, we have to write,
<!DOCTYPE html>
<html>
<head><title>External Hyperlinking</title></head>
<body>
Here is an example of External Hyperlink<br>
<a href = "https://www.dtinv.info"target="New_window"> This is a link.
If you click here it will take you into the linked page.</a>
</body>
</html>
After clicking on the link it will not skip the present site. A new window will open and the specified linked page will show.
No comments