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 . This is called anchor tag and anything between the opening and the closing 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 tag.
.........attribute-List>Link Text
Let us quickly take a look at a brief example which links https://webdesigntutorialz.blogspot.com at your page
Example
Hyper Link Example
Webdesigntutorialz
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
Hyper Link Example
opens in a new window
opens in the same window
opens in the parent window
opens in the body
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
Example
Hyper Link Example
HTML Tutorial
This will produce a link that will take you directly to webdesigntutorialz homepage, because here the given URL is being considered as
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 tag as follows.
HTML Text Links
Webdesigntutorialz
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:
Hyper Link Example
Download PDF
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 Introduction, Html Tags, Html Document Structure, The 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
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 . This is called anchor tag and anything between the opening and the closing 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 tag.
.........attribute-List>Link Text
Let us quickly take a look at a brief example which links https://webdesigntutorialz.blogspot.com at your page
Example
Click the link
Webdesigntutorialz
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
Click the link
opens in a new window
opens in the same window
opens in the parent window
opens in the body
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
Example
Click the link
HTML Tutorial
This will produce a link that will take you directly to webdesigntutorialz homepage, because here the given URL is being considered as
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 tag as follows.
HTML Text Links
Now the second step is to create a hyperlink to link the document and place it where you want to reach;
Go to the Top
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 tag. Tho setting link color will be descussed in depth in my CSS tutorialz which i will start soon.
Example
Hyper Link Example
Now the second step is to create a hyperlink to link the document and place it where you want to reach;
Go to the Top
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 tag. Tho setting link color will be descussed in depth in my CSS tutorialz which i will start soon.
Example
Click the link
Webdesigntutorialz
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:
Click the link
Download PDF
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 Introduction, Html Tags, Html Document Structure, The 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
