HTML - SPLessons

HTML Links

Chapter 16

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Links

HTML Links

shape Introduction

This chapter demonstrate about the HTML Links. Links are used to navigate from one page to another page and user can also make use of the hyper links. Following are the concepts covered.

  • Html Links

shape Description

Hyperlinks are the basic features in HTML which are used to navigate from one page to another page. Now a days every activity like browsing, surfing, downloading depends only on links. Basically links are divided into two types as listed below.

The Syntax of the link is as shown below.
<a href=”Destination URL”> Related Text. </a>

The snippet code below demonstrates creating a hyperlink and encapsulating it within anchor tag.

 <!DOCTYPE HTML>    
<html>
	<style>body{font-family:Verdana;}</style>
	<body>
		<a href="https://www.splessons.com">splessons </a>
		is the most comprehensive web development website on the internet.
	</body>
</html>	                                                 

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

shape Description

Following are the links which contain some attributes used to define the links between the html document and the external sources.

The code below demonstrates some attributes of the links.

<!DOCTYPE HTML>
<html>
	<style>body{font-family:Verdana;}</style>
	<body>
		<p><a href="https://www.splessons.com" 
		title="Simple Programming Lessons" id="about us">
		Simple Programming Lessons provides quality technology education </a>
		with demos, examples, and in browser coding enviornment.</p>
	</body>
</html>                       

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

shape Description

Target attribute indicates a browser or a window where the linked document is stacked. In order to define the target there are few attributes as listed below.

The code below demonstrates the use of the target links.

<!DOCTYPE html>
<html>
<style>body{font-family:Verdana;}</style>
<body>
 	<a href="https://www.splessons.com/" 
	   target="_blank ">
	Simple Programming Lessons.
	(opens in new Window)</a>	

 </body>
</html> 

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

shape Description

Absolute links URL contains everything about the destination folder include protocol and the Relative links does not contain everything but contain some related address of the document.
The code below demonstrates about the absolute links and relative links.

<!DOCTYPE html>
<html>
	<style>body{font-family:Verdana;}</style>
	<body>
		<p> The link <a href="https://www.splessons.com/">here </a>
		is an Absolute hyperlink.</p>

		<p> The link <a href="HTML_Video.php">here</a>
		is a relative hyperlink.</p>
	</body>
</html>                        

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape Key Points

  • Hyperlinks are very core feature of html.
  • Relative links does not contain entire address.