HTML Links Hyperlinks

Basic Syntax of a Hyperlink

html
<a href="URL">Link Text</a>

href: Specifies the destination URL of the link.
Link Text: The clickable text or content that acts as a link.

1. Link to an External Website

html

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

This link takes the user to the external website https://www.example.com.

2. Link to Another Page on the Same Website

html

<a href="about.html">About Us</a>

This link takes the user to a page named about.html within the same website.

3. Open a Link in a New Tab

You can use the target="_blank" attribute to open a link in a new tab.

html

<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>

4. Link to an Email Address

To create a link that opens the default email client with a pre-filled recipient:

html

<a href="mailto:someone@example.com">Send Email</a>

5. Link to a Phone Number (for mobile devices)

For clickable phone numbers, especially useful for mobile users:

html

<a href="tel:+8901010994">Call Us</a>

6. Link to a Section within the Same Page (Anchor Links)

You can link to specific sections of a page using anchors.

First, create an id for the target element:
```
html

<h2 id="section1">Section 1</h2>
```

Then, create a link that points to that id:

html

<a href="#section1">Go to Section 1</a>

7. Linking to a File (PDF, Image, etc.)

You can link directly to files like PDFs, images, or documents for users to download or view.

html

<a href="files/my-document.pdf">Download PDF</a>

8. Link with an Image

Instead of text, you can use an image as a link.

html

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

09. Make Part of Text or Paragraph a Link

You can embed a link inside a paragraph or other text elements.

html
<p>For more information, visit our <a href="https://www.example.com">homepage</a>.</p>

Example Code with Different Types of Links

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Links Example</title>
</head>
<body>
    <h1>Different Types of HTML Links</h1>
    
    <!-- Link to an external site -->
    <a href="https://www.example.com">Visit Example Website</a><br>

    <!-- Open link in new tab -->
    <a href="https://www.example.com" target="_blank">Open Example in New Tab</a><br>

    <!-- Link to another page on the same website -->
    <a href="about.html">About Us</a><br>

    <!-- Email link -->
    <a href="mailto:info@example.com">Send us an Email</a><br>

    <!-- Phone number link -->
    <a href="tel:+1234567890">Call Us: +1234567890</a><br>

    <!-- Anchor link to a section on the same page -->
    <a href="#section1">Go to Section 1</a><br>

    <!-- Link with tooltip -->
    <a href="https://www.example.com" title="Click here to visit Example">Example with Tooltip</a><br>

    <!-- Link to download a PDF file -->
    <a href="files/document.pdf" download>Download PDF Document</a><br>

    <!-- Link with an image -->
    <a href="https://www.example.com">
        <img src="https://via.placeholder.com/150" alt="Example Image">
    </a><br>

    <!-- Section 1 (Target for the anchor link) -->
    <h2 id="section1">Section 1</h2>
    <p>This is the content of Section 1.</p>
</body>
</html>

Summary of Key Attributes:

href: The URL or path to the link's destination.
target="_blank": Opens the link in a new tab.
title: Displays a tooltip on hover.
download: Downloads a file instead of opening it.
mailto:: Creates an email link.
tel:: Creates a clickable phone number link.

SKYNET

Monday, October 28, 2024