HTML - Text Links
HTML Text Links
A webpage often contains several links that direct you to other pages and even specific sections of a given page. These various links are known as hyperlinks.
Hyperlinks let users be able to navigate between various sites on the internet just by clicking on words, phrases, and pictures. Thus you'll learn to create hyperlinks using text or images available on a webpage.
Linking Documents
A link is specified using an HTML tag. This tag is named anchor tag and anything between the opening tag and therefore the closing tag becomes a part of the link and a user can click that part to succeed in the linked document. Following is that the simple syntax to use tag.
<a href = "Document URL" ... attributes-list>Text Link </a>
Example:
Let's check out the following example which links http://www.siitgo.com in your page:
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.siitgo.com" target = "_self">Siitgo</a> </body> </html>
This will produce a text that you can click on then the link generated to reach to the home page of SIITGO
The Target attribute
We have made use of the target attribute in our previous example. This attribute is employed to specify the situation where the linked document is opened. The following are the available options:
1. _blank: This will open the linked document in a new window or tab.
2. _self: This will open the linked document in the same frame.
3. _parent: This will open the document that is linked in the parent frame.
4. _top: This will open the linked document in the full body of the window.
5. targetframe: This will open the linked document in a named targetframe.
Example:
The following example will help understand the basic difference in few options given for the target attribute.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href = "https://www.tutorialspoint.com/"> </head> <body> <p>Click any of the following links</p> <a href = "/html/index.htm" target = "_blank">Opens in New</a> <a href = "/html/index.htm" target = "_self">Opens in Self</a> <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> <a href = "/html/index.htm" target = "_top">Opens in Body</a> </body> </html>
The following will display texts where you can click on different links to understand the difference between various options given for the target attribute.
Use of Base Path
When you link HTML documents associated with an equivalent website, it's not required to offer an entire URL for each link. you'll get obviate it if you employ <base> tag in your HTML document header. This tag is employed to offer a base path for all the links. So your browser will concatenate given relative path to the present base path and can make an entire URL.
Example
The following example makes use of <base> tag to specify base URL and later we will use a relative path to all or any the links rather than giving an entire URL for each link.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href = "https://www.siitgo.com/"> </head> <body> <p>Click following link</p> <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a> </body> </html>
Linking to a Page Section
You can create a link to a particular section of a given webpage by using the name attribute. This is a two-step process.
Note − The name attribute deprecated in HTML5. Don't make use this attribute. Instead, use id and title attribute instead.
First, create a link to the place where you would like to go to with-in a webpage and name it using the tag according to the following:
<h1>HTML Text Links <a name = "top"></a></h1>
The second step is to write down a hyperlink in other to link the document and place where you would like to reach:
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
This will produce the subsequent link, where you'll click on the link generated to move to the highest of the HTML Text Link tutorial.
Go to the Top
Setting Link Colors
You can actually specify the colors of your links, by using the active links and visited links using link, alink and vlink attributes of <body> tag.
Example
Save the following in test.html on your machine and open it up in any web browser to see the demonstration of how link, alink and vlink attributes work.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href = "https://www.siitgo.com/"> </head> <body alink = "#54A250" link = "#040404" vlink = "#F40633"> <p>Click following link</p> <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a> </body> </html>
Just check the color of the link before clicking thereon, next check its color once you activate it and when the link has been visited.
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
