HTML Links

By | January 4, 2020

Through hyperlink, we can link one web page to another web page, through which we can go to another web page after clicking on the link. Hyperlink allows the user to move from page to page on any server anywhere in the world. Links are found in almost all web pages.

The link is given using the <a> tag in HTML. The text of the page to which it is linked is given inside the <a> tag within the href=”” attribute.

<a href="url">Link Text</a>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	
<a href="https://learnhtmlcoding.com/">Click on Website</a>

</body>
</html>

Output:-

Click Website

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	
<a href="https://learnhtmlcoding.com/">Click on Website</a>
<br><br>
<a href="google.com/">The Google</a>
<br><br>
<a href="https://learnhtmlcoding.com/">
	<img src="img/house.jpg" alt="house">
</a>

</body>
</html>

Output:-

LinkImg

The target attribute tells the link to open where it is. Each target attribute starts from a (_). The target in the shape tag is mainly of four types.

_blank – Opens the linked document in a new tab or in a new browser.

_self – This opens the linked document in the same page. This is the default.

_parent – Opens the linked document in the same page.

_top – Opens the linked document in the full browser window.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
	
<a href="/content-us.php" target="_top">Content Us</a>

<a href="https://learnhtmlcoding.com/" target="_blank">learnhtmlcoding.com/</a>

<a href="images/image.jpg" target="_parent">
	<img src="img.png" alt="image" />
</a>


</body>
</html>

Output:-

Linkimg

HTML Link Bookmark:-

Sometimes our web page becomes very large. We use bookmarks to go directly to a specific part of the web page.To use a bookmark, we first have to create a bookmark. After creating the bookmark, the part of the page to be visited is linked. After putting this HTML code in your editor, run it on the browser and see.


<a href="#h2">for heading h2</a>
<a href="#h3">for heading h3</a>

<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<h2 id="h2">Heading h2</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<h3 id="h3">Heading h3</h3>

Spread the love

Leave a Reply

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