HTML LINKS
How do we connect text to other text or webpages to other webpages? We do this using HTML hyperlink, which we usually call link. You might think we will use the “link” tag to do this. But that “link” tag is used for other purpose in HTML. For hyperlinks we use the “a” tag. Where “a” stands for “anchor”. It’s anchoring the link in the page at a certain location and connecting the anchor to a different webpage.
Syntax for links is
<a href=”url“> link text </a>
The href attribute specifies the destination address of the link. For example
<a href=”http://qatechhub.com/introduction-html5-html-tags-attributes/ “>Learning HTML</a>
Here href specifies the address or url. What you see on the browser is just the hyperlink with text Learning HTML i.e. Learning HTML
LINK STYLES
By default links come underlined. Now, pay attention to the colours of the hyperlinks; we can see that
- When the link is unvisited it is blue
- When visited it turns purple
- And when active the link is coloured red
Note: We can change the colours by using styles.
For example:
<style>
a:hover{color:red;background-color:transparent;text-decoration:underline}
</style>
SETTING TARGET
You can also specify where to open the link, for example you may want it to open in the same tab or another window. This is done using the “target” attribute.
<a href=”http://www.google.com/” target=”_blank“>open google</a>
The target attribute can have one of the following values:
- “_blank” -This opens the linked document in a new window or tab
- “_self” – linked document opens in the same window (default)
- “_parent” – Opens the linked document in the parent frame
- “_top” – Opens the linked document in the full body of the window
- “framename” – Opens the linked document in a named frame
USING IMAGES AS LINK
We may also use Images as links :
<a href="http://qatechhub.com/"> <img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0;"> </a>
Now we shall see an example where we will be using all the above mentioned attributes:
<!DOCTYPE html>
<html>
<head>
<title>LEarning Links</title>
<style>
a:hover{color:red;background-color:transparent;text-decoration:underline}
</style>
</head>
<body>
<h1>This is an example of LINKS </h1>
<p>
<a href="http://qatechhub.com/introduction-html5-html-tags-attributes/ " target="_blank">Learning HTML</a>
</p>
<h1>Using Images as Links </h1>
<p>
<a href="http://qatechhub.com/">
<img src="http://qatechhub.com/wp-content/uploads/2016/07/TestNGLogo.png" alt="HTML"
style="width:142px;height:142px;border:0;" target="_self">
</a>
</p>
</body>
</html>
DOWNLOADABLE LINK
You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file as follows:
<a href=”url to your file“>Download PDF File</a>
BOOKMARK
Another use of links is “bookmarking”.
In case the web page is very long it helps the readers to jump to specific parts of a Web page.
To make a bookmark, first create the bookmark using “id attribute”, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
<h1 id="imptags">Useful Tags Section</h1> <!--Then, add a link to bookmark:--> <a href="#imptags">Quick look at useful tags</a>
PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com
