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 oyher 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.

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://webdesigntutorialz.blogspot.com at your page

Example 
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click the link</p>
<a href="https://webdesigntutorialz.blogspot.com"  target="_blank">Webdesigntutorialz</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:


Option                                                    Description
_blank                              Opens the linked document in a new         
                                         window or tab.


_self                                 Opens the linked documents in the 
                                         window or tab.

_parent                             Opens the linked document in the parent  
                                         window or tab.

_top                                 Opens the linked document in the full 
                                        body of the window.

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://webdesigntutorialz.blogspot.com"  target="_blank">opens in a new window</a>
<a href="https://webdesigntutorialz.blogspot.com"  target="_self">opens in the same window</a>
<a href="https://webdesigntutorialz.blogspot.com"  target="_parent">opens in the parent window</a>
<a href="https://webdesigntutorialz.blogspot.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.

Example
<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
<base href="https://webdesigntutorialz.blogspot.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 webdesigntutorialz homepage, because here the given URL <a href="/html/index.html"> is being considered as <a href="https://webdesigntutorialz.blogspot.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.

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://webdesigntutorialz.blogspot.com"  target="_blank">Webdesigntutorialz</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://webdesigntutorialz.blogspot.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.

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase Tags , Html-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List 
Share:

0 comments:

Post a Comment