Wednesday, August 9, 2017

Html - Text Links



Hello guys! good morning and welcome to this section of my HTML tutorials. Last time i talked about HTML list and i hope you all now know about HTML list and how to use them.
In this tutorial am gonna be discussing HTML text links and how to 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.

Hyperlinks allow visitors to navigate between web sites by clicking on words, phrases and images. Thus you can create hyperlinks using text or images available on a webpage.

You can also read: 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 that to reach to the linked 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 which links https://google.com at your page

Example 

<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://google.com"  target="_blank">google</a>
</body>
</html>

This will produce a link that will take you directly to webdesigntutorialz homepage, you can try that out your self to see the result.

The target Attribute
We have used target attribute in the previous example we just did, This attribute is used to specify the location where linked document is opened. Below are the possible options available in HTML and XHTML:

You can also read: Html Images


Sr.NoOption & 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://google.com"  target="_blank">opens in a new window</a>
<a href="https://google.com"  target="_self">opens in the same window</a>
<a href="https://google.com"  target="_parent">opens in the parent window</a>
<a href="https://google.com"  target="_top">opens in the body</a>
</body>
</html>

You can try the above code out to see the differences for your self and feel free to ask questions where you don't understand clearly.

Use of Base Path 
I know you must be wondering what i mean by using base paths, base path is meant to be used when linking HTML 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.

You can also read: Html Attributes

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
<base href="https://google.com/">
</head>
<body>
<p>Click the link</p>
<a href="/html/index.html"  target="_blank">HTML Tutorial</a>
</body>
</html>

This will produce a link that will take you directly to google homepage, because here the given URL <a href="/html/index.html"> is being considered as <a href="https://google.com/html/
index.html">

Linking to a Page Section
You can create a link to a particular section of a given webpage by using name attribute. This is a two step process.

First create a 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>
This will 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.

You can also read: 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. Tho 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://google.com"  target="_blank">google</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 finaly 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 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://google.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 you don't understand, your questions will be attended to. See you in my next tutorial, bye for now.
Share:

0 comments:

Post a Comment