Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about Html list and i hope you all now know about Html list and how to use them.
In this tutorial guide, am going to be discussing about the Html text links and how you can make use of them in your Html documents.
A webpage can be comprised of various links that take you directly to other pages and even specific parts of a given page. This links are called hyperlinks.
Html hyperlinks allows visitors to navigate between sites by clicking on words and images. Thus you can create hyperlinks using text or images available on a webpage.
RECOMMENDED: Html List
Linking Documents
A link is specified using Html tag <a>. This is called anchor tag and anything between the opening <a> and the closing </a> tag becomes part of the link and a user can click on that to reach to the linked Html document. Following is the simple syntax to use <a> tag
<a href="Specified URL" .........attribute-List>Link Text</a>
Let us quickly take a look at a brief example, this example is going to explain how we are going to link https://www.webdesigntutorialz.com at your page
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com" target="_blank">web design tutorialz</a>
</body>
</html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com" target="_blank">web design tutorialz</a>
</body>
</html>
This is going to produce a link that will take you directly to web design tutorialz homepage.
The target Attribute
We have made use of the target attribute in the previous example we just did, This attribute is used to specify the location where the linked document is opened. Below are the possible options available in Html and XHTML:
RECOMMENDED: Html Images
| Sr.No | Option & Description |
|---|---|
| 1 |
_blank
Opens the linked document in a new window or tab.
|
| 2 |
_self
Opens the linked document in the same frame.
|
| 3 |
_parent
Opens the linked document in the parent frame.
|
| 4 |
_top
Opens the linked document in the full body of the window.
|
| 5 |
targetframe
Opens the linked document in a named targetframe.
|
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com" target="_blank">opens in a new window</a>
<a href="https://www.webdesigntutorialz.com" target="_self">opens in the same window</a>
<a href="https://www.webdesigntutorialz.com" target="_parent">opens in the parent window</a>
<a href="https://www.webdesigntutorialz.com" target="_top">opens in the body</a>
</body>
</html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com" target="_blank">opens in a new window</a>
<a href="https://www.webdesigntutorialz.com" target="_self">opens in the same window</a>
<a href="https://www.webdesigntutorialz.com" target="_parent">opens in the parent window</a>
<a href="https://www.webdesigntutorialz.com" target="_top">opens in the body</a>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below.
Use of Base Path
I know you must be wondering what i mean by using base paths, base path is supposed to be used when linking documents related to the same website, in this case it is not required to give a complete URL for every link. The <base> tag is used in your Html document header. This tag is used to give a base path for all the links. So your browser will concatenate given related path to this and will make a complete URL.
RECOMMENDED: Html Attributes
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
<base href="https://www.webdesigntutorialz.com/">
</head>
<body>
<p>Click the link</p>
<a href="/html/index.html" target="_blank">HTML Tutorial</a>
</body>
</html>
<html>
<head>
<title>Hyper Link Example</title>
<base href="https://www.webdesigntutorialz.com/">
</head>
<body>
<p>Click the link</p>
<a href="/html/index.html" target="_blank">HTML Tutorial</a>
</body>
</html>
This is going to produce a link that will take you directly to web design tutorialz
Linking to a Page Section
Html hyperlink can be created to a given section of a given webpage by using name attribute. This is a two step process.
First create the link to the place where you want to reach within a webpage and name it using <a...> tag as follows.
<h2> HTML Text Links <a name="top"></a><h2>
Now the second step is to create a hyperlink to link the document and place it where you want to reach.
<a href="/html/html_text_links.html#top">Go to the Top</a>
It is going to produce the following links, where you can click on the link generated GO to the Top to reach to the top of the HTML Text Links.
RECOMMENDED POST: Grouping Content
Setting Link Color
You can set colors of your links, active links and visited links using link, alink, vlink attributes of the <body> tag. Though setting link color will be descussed in depth in my CSS tutorialz which i will start soon.
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body alink="green" link="blue" vlink="red">
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com" target="_blank">web design tutorialz</a>
</body>
</html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body alink="green" link="blue" vlink="red">
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com" target="_blank">web design tutorialz</a>
</body>
</html>
In the above code you will discover that all the links in the body of the webpage will have blue color while the active links will have green colors and finally the visited links will have red color, you can try the above code out to see for your self.
Download Links
You can creat text link to make your PDF, DOC or ZIP files to be downloadable. This process is a very simple one, all you just need to do is to give complete URL of the downloadable file as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com/page.pdf" target="_blank">Download PDF</a>
</body>
</html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://www.webdesigntutorialz.com/page.pdf" target="_blank">Download PDF</a>
</body>
</html>
This is the end of this tutorial on Html text links, always feel free to ask questions where necessary, I will attend to them. See you in my next tutorial, bye for now.