HTML Linking.

The main part of html document can be displayed in the browser hidden by the links, if necessary. By making hyperlinks you can walk from one document to another or from one part to another part of same document page in a moment. Hyperlink is made by anchor tag. Local attribute href and its value url are used with it. The source of the part of the part of link is found by this way. Url is the path to find the source or address or protocol.

The syntax or format :

<a href=”url”>link text</a>
<a href=”http://www.htmlcsscode.com”>htmlcode</a>

Here you see, link tag begins with <a> and ends with </a> tag. The portion of the tags acts as a link.

Example:

Type the following codes in Notepad.

HTML Code

<!DOCTYPE HTML>    
<html>
<style>body{font-family:Verdana;}</style>
<body>
<a href="http://www.Google.com">Google</a>	
is a popular web search engine to find files on the Internet.
</body>
</html>

Save the file by the name link.html. If you  open the  file, you will see output like the following.

Display in Browsers
Google
is a popular web search engine to find files on the Internet.

If you keep or move the cursor on the link, the default arrow cursor will turn into a small carry on. At this point, if your computer has an internet connection, then click on the following link and a google page will be opened like below. Now you can visit and search any particular site by writing an address.

google search
The common attributes used in a link:
href: Indicate the link has been created for the URL or location.

Title: A short descriptive text such as author description, etc. Corresponding link are in it. Set hover over the link to see the tooltip title.

ID: Set up a special identifier in the link. Two elements can not have the same ID no the same page.

Class: No element is used to connect identifier. However, several elements may have the same class name.

Example: Title/id attribute

HTML Code

<!DOCTYPE HTML>    
<html>
<style>body{font-family:Verdana;}</style>
<body>
<p><a href="http://www.google.com" title="Search engine" id="about us">Google is an American multinational technology company.</a>
It  is a popular web search engine to find files on the Internet.	
</body>
</html>

Display in Browsers

Google is an American multinational technology company.
It is a popular web search engine to find files on the Internet.

Example: id attribute

HTML Code

<html>
<body>
<h2>Anchor example</h2
<h3 id="menu">Menu</h3>
<ul>
<li><a href="#a0001">Jump to a0001</a></li>
<li><a href="#a0002">Jump to a0002</a></li>
<li><a href="#a0003">Jump to a0003</a></li>
</ul>
<h3 id="a0001">a0001</h3>
<p>paragraph text....</p>
<h3 id="a0002">a0002</h3>
<p>paragraph text....</p>
<h3 id="a0003">a0003</h3>
<p>paragraph text....</p>
</hr>
<p><a href="#menu">Jump to Menu</a></p>
</body>
</html>

Display in Browsers

Anchor example

a0001

paragraph text….

a0002

paragraph text….

a0003

paragraph text….

Jump to Menu

Example : Name attribute

One or more particular part any large document of a fixed link through the part for a quick walk to the name attribute the href attribute is used. As value which will be used hash (#) mark will be put before it. The syntax or format : <a href=”#a001″>Anchor text </a>

HTML Code

<html>
<body>
<h2>Anchor example</h2
<h3><a name="menu">Menu</a></h3>
<ul>
<li><a href="#a0001">Jump to a0001</a></li>
<li><a href="#a0002">Jump to a0002</a></li>
<li><a href="#a0003">Jump to a0003</a></li>
</ul>
<h3><a name="a0001">Jump to a0001</a></h3>
<p>paragraph text....</p>
<h3><a name="a0002">Jump to a0002</a></h3>
<p>paragraph text....</p>
<h3><a name="a0003">Jump to a0003</a></h3>
<p>paragraph text....</p>
</hr>
<p><a href="#menu">Jump to Menu</a></p>
</body>
</html>

Display in Browsers

Anchor example

Menu

Jump to a0001

paragraph text….

Jump to a0002

paragraph text….

Jump to a0003

paragraph text….

Jump to Menu

If you open anchor_example1.html file from folder the manu page will open in your browser. From there, click on the right side of the display jump to a001 target page will come. By clicking jump to Menu from the bottom of the menu page you can go on the menu page again.

HTML Code

<html>
<body>
<h1>Menu page</h1>
<h2>Anchor Example</h2>
<h3><a name="menu">Menu</a></h3>
<ul>
<li><a href="anchor_example2.html#a0001">Jump to a0001</a></li>
<li><a href="anchor_example2.html#a0002">Jump to a0002</a></li>
<li><a href="anchor_example2.html#a0003">Jump to a0003</a></li>
</ul>
</body>
</html>

Display in Browsers

Menu page

Anchor Example

Menu

Target attributes:

Using the target attribute to the link element the link page where will open in a new window it can be determined. Values are used with these attributes:

Attribute Value Description
target=”” _blank Links page will open a new tab or window.
_top Remove all other frames links the web document will open across all the windows.
_self The document will open in the current window.
_parent The document will open the existing / current frame of the parent frameset. If a parent does not exist, then it behaves like seft.
_frame name The document will open the name of following frame.

Syntax

<a href="index.html" target="_top"> linked text</a>

Example: Link target_blank attribute

Now type the following codes in Notepad or other html editing software. If you have an internet connection and open the link target_blank.html file, you will see output like the following.

HTML Code

<!DOCTYPE HTML>    
<html>
<style>body{font-family:Verdana;}</style>
<body>
<a href="http://www.htmlcsscode.com/what-is-html-hypertext-markup-language/" target="_blank"> What is html? (opne in new window)</a>
</body>
</html>

Display in Browsers

What is html? (opne in new window)

Absolute and relative link :

1. An absolute link is a hyperlink containing a full URL desteination address.There’s protocols such as http, ftp, and domain name. The URL does not change wherever the web page are visible. Therefore, it is called absolute link.

2. Relative links are not the full url destination address. It is visible that the document connected with her of it’s address relatively. For example: URL../html/html5_links is a relative link on the same website of the document.

Example:
HTML Code:

<!DOCTYPE HTML>    
<html>
<style>body{font-family:Verdana;}</style>
<body>
<p>This one <a href="https://en.wikipedia.org/wiki/HTML5">here</a> is an Absolute hyperlink.</p>
<p>While this one <a href="HTML5_video.html/">here</a> is a relatiove hyperlink.</p>
</body>
</html>

Display in Browsers

This one here is an Absolute hyperlink.

While this one here is a relatiove hyperlink.

Internal link:

Internal link is a kind of hyperlink used in web page. They are based on the target of the link is determined to be internal or external. Any page of outside links of same domain is usually called external links. That link the different sections of the same web page or different pages of the same website or domain indicates is called internal link.

External link:

The external link is that link which adds your page to another website. If you want to external link to this page with w3school.com from your website, then you can code the following way.
W3C Help

Here the mouse pointer over the link w3school.com the pointer will look like fingers. If you have an Internet connection on your computer by clicking on the w3school.com pages will be displayed in the browser window.

Example:

<a href="http://www.htmlcsscode.com/what is html hypertext markup language/">Internal link: What is html?</a></br>

<a href="http://en.wikipedia.org/wiki/HTML5">External link: What is html5?</a>

Display in Browser:

Internal link: What is html?

External link: What is html5?

Image link:

To create any image link is almost the same as the text links. You can create an image link of the link text is replaced by the image tag.

<a href="url"><img.....></a>]

<a href=”www.mywebpage.com/next.html”><img src=”next.png”></a>

Any image can be used as a link. As a result, the part of the link to go by clicking on the image. Text links are connected to the image you want to save it in the same folder. Using the href attributes in another html document and save it in the same folder.
For example:

HTML code:

<!DOCTYPE HTML>    
<html>
<head>
<title>Image link in HTML</title>
</head>
<body>
<p><b>About html linking.</b></p>
<a href="html_link.html">
<img src="link.jpg" height="50" width="50">Click on me!</a>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *