- Introduction To HTML
- HTML Editors
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Links
HTML Links - Hyperlinks
Hyperlinks are links in HTML.
You can access another document by clicking on a link.
The mouse arrow will change into a tiny hand when you move the mouse pointer over a link.
HTML Links - Syntax
A hyperlink is defined by the HTML <a> tag. Its syntax is as follows:
The href attribute of the <a> element, which denotes the location of the link, is its most crucial component.
The portion that the reader will see is the link text.
The reader will be directed to the provided URL address by clicking on the link text.
HTML Links - The Target Attribute
Where to open the linked document is specified by the target attribute.
One of the following values may be present for the target attribute:
- _self - Default. Opens the document in the same window/tab as it was clicked
- _blank - Opens the document in a new window or tab
- _parent - Opens the document in the parent frame
- _top - Opens the document in the full body of the window
Absolute URLs Vs. Relative URLs
In the two aforementioned cases, the href property is used with an absolute URL (a complete web address).
A relative URL (without the "https://www" element) is used to specify a local link, which is a link to a page within the same website:
<h2>Absolute URLs</h2>
<p><a href="https://www.mytat.co/">Mytat</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML Links - Use An Image As A Link
Put the <img> tag inside the <a> tag to use an image as a link:
<img src="/images/flowers.jpg" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link To An Email Address
To create a link that launches the user's email client and allows them to send a new email, use the mailto: attribute inside the href attribute:
Button As A Link
You must include some JavaScript code in order to use an HTML button as a link.
JavaScript enables you to define what happens in response to specific events, such the click of a button:
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.php'">HTML Tutorial</button>
Link Titles
An element's title attribute specifies additional information. When the mouse is over the element, the information is frequently displayed as a tooltip text.
HTML Link Colors
In all browsers, a link will often look like this by default:
An unclicked link is highlighted in blue
A clicked link is highlighted in purple.
A link that is active is highlighted in red.
Using CSS, you may alter the link state colours:
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Link Buttons
Using CSS, a link can also be designed to look like a button:
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.php" target="_blank">This is a link</a>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP