 |
| Html Link Tag |
Overview
Html link may be HTML link an i.e., anchor tag or how to HTML link CSS or JavaScript file. There is confusion between
the link and anchor tag. When we talk about the HTML page to open in a new
window. Then we use an anchor tag. Confusion creates when talking about how an
external page can connect in HTML. then link tag comes to our mind for linking.
Let see how to use a link, anchor, script tag.
Html link tag
Link tag uses to link external CSS files or resource
within HTML files. Web font file also links with HTML file by using the Link
tag. Page Icon is also set in the Link tag. Link used in the head section of
the HTML page. External resource or can form your device or internet. We can
use CDN in the link tag. For example, Bootstrap code can be access over the
internet. If we don’t download the bootstrap file. Then we bootstrap CDN in the
link tag.
The link also uses in CSS for color purposes. Let see
an example, When we use an anchor tag by default its color is blue. Like this
 |
| Html Link Tag example |
By applying css we can change it color like this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Link</title>
<style>
a:link{
color: #F58F84;
text-decoration: none;
font-size: 15px;
font-style: italic;
}
a:visited{
color: #26A65B;
font-weight: bold;
text-decoration: none;
font-size: 40px;
}
a:active{
color: #A17917;
font-weight: bold;
text-decoration: none;
font-size: 40px;
}
</style>
</head>
<body>
<a href="#heading1">Google</a>
<h1 id="heading1">Google</h1>
</body>
</html>
Paste this code and run. You can see how it works.
This code also works as a bookmark. When a page contains huge content. We can
use an anchor tag for bookmarking. Bookmarks help us to go quickly to a
specific area. In above mention example anchor tag work as a bookmark.
Html link open in new tab.
The most asking question is how to open the web page in a new tab. Anchor tag able
to open a web page in a new tab. Target attribute
use for this purpose. We set target attribute _blank. Then desired page will open in a
new tab. For example
<a href="https://www.google.com" target="_blank">Google</a>
We need to set an anchor tag like this.
How to link email in Html.
Html provides the feature to link with
email. We use mailto: in
an anchor tag. In anchor tag set href attribute
like this.
<a href="mailto:example123@gmail.com" target="_blank">Email</a>
How to link CSS and JavaScript file in
HTML.
When we want to add external CSS and
JavaScript files. Link tag used to add external CSS file. In link tag, we
assign href attribute
with the name of an external CSS file name with a .css extension. Another
attribute we rel. The
following example shows how the CSS file is set.
<link rel="stylesheet" href="style.css">
We assign rel as stylesheet. Link tag place in the head section
of page.
JavaScript external file link
in HTML by using a script tag. File path src attribute of the script tag. We can place the script tag in
the head section. The best practice is we place a script tag below the body
section. Because sometimes we call JavaScript function on the base of onload.
When we apply DOM then
If
we use a script in a head section, then JavaScript calls first, and after this
document body load. So, JavaScript link after the body tag. Syntax of
script is,
<script src="filename.js"></script>
How to download by using anchor tag.
First of all, we need to set the type of
anchor tag that is download. Provide file path to href
attribute which
you want to download. Then you will be able to download the file through the
anchor tag. Syntax of anchor tag will be like,
<a type="download" href="filename.pdf">Download File.</a>
How to use Button as a
link.
We can use the button as
a link. Now we will use JavaScript to accomplish this purpose. <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Link</title>
<link rel="stylesheet" href="style.css">
<style>
a{
text-align: center;
margin: 200px;
text-decoration: none;
}
</style>
</head>
<body>
<button id="link">Open Google</button>
</body>
<script>
var button = document.getElementById("link");
button.onclick = function()
{
document.location = "https://www.google.com";
}
</script>
</html>
 |
| Html Button as a link example |
When you run this
code and click on the Open Google button
then you go google page.
0 Comments
Thanks