Links

Links in HTML

In HTML, links are created using the <a> (anchor) tag. The href attribute specifies the destination URL of the link. Here is an example of a simple link:

<a href="https://www.example.com">Visit Example.com</a>

This will create a clickable link that takes the user to "https://www.example.com".
There are also two more main attributes :-

• target: Specifies where to open the linked document. Common values are _self (default, opens in the same tab) and _blank (opens in a new tab).
• title: Provides additional information about the link, often displayed as a tooltip when hovering over the link.

Absolute URLs vs. Relative URLs

There are two types of URLs used in links: absolute and relative.

• Absolute URL: This is the full web address, including the protocol (http:// or https://), domain name, and path. For example:

  <a href="https://www.example.com/page.html">Absolute Link</a>

• Relative URL: This is a link that is relative to the current page's location. It does not include the domain name. For example:

  <a href="/page.html">Relative Link</a>

Wrapping Links Around HTML Elements

You can wrap links around various HTML elements, such as images or block-level elements. For example, to make an image a clickable link:

                 
                    <a href="https://www.example.com">
                    <img src="image.jpg" alt="Example Image"></a>
                
            

This will make the image clickable, directing users to the specified URL.

Link to an Email Address

You can create a link that opens the user's default email client to send an email. This is done using the mailto: scheme in the href attribute. For example:

<a href="mailto:nothing@nmjkdnw.com">Send Email</a>

Clicking this link will open the email client with a new message addressed to "nothing@nmjkdnw.com".

Button as a Link

You can also create a button that acts as a link using this kind of button <button onclick="document.location='default.asp'"> element along with JavaScript. Here is an example:

Link Colors

You can customize the colors of links using CSS. Here are some common link states you can style:

• a:link - The default state of a link that has not been visited.
• a:visited - The state of a link that has been visited by the user.
• a:hover - The state of a link when the user hovers over it with the mouse.
• a:active - The state of a link when it is being clicked.

Here is an example of CSS to style these link states:

                
                    a:link {
                        color: blue;
                    }
                    a:visited {
                        color: purple;
                    }
                    a:hover {
                        color: red;
                    }
                    a:active {
                        color: orange;
                    }
                
            

Links Buttons

You can create buttons that function as links using the <button> element along with JavaScript. Here is an example:

                
                    <button onclick="window.location.href='https://www.example.com'">Go to Example.com</button>
                
            

Clicking this button will take the user to "https://www.example.com".