HTML Full Course (Day 04) - Noob Coder

Thursday, July 20, 2023

HTML Full Course (Day 04)

1. Anchor tags (a) and href attribute:

In HTML, anchor tags (`<a>`) are used to create links. The `href` attribute within the anchor tag defines the destination of the link. Here's the basic structure of an anchor tag:

```html

<a href="destination">Link Text</a>

```

- `href`:

 The `href` attribute specifies the URL or location where the link will navigate to when clicked. It can be an absolute URL (e.g., `https://example.com/page.html`) or a relative URL (e.g., `page.html` or `../folder/page.html`) within the same website or project.

2. Creating internal and external links:

HTML allows you to create both internal and external links:

- Internal links: 

Internal links are used to navigate within the same website or project. You can create internal links by specifying the relative URL of the target page within the `href` attribute. For example, `<a href="about.html">About</a>` would create a link to the "about.html" page within the same website.

- External links: 

External links are used to navigate to other websites. You can create external links by providing the complete URL of the target page within the `href` attribute. For example, `<a href="https://example.com">Example Website</a>` would create a link to the "example.com" website.

3. Linking to email addresses and phone numbers:

In addition to linking to web pages, HTML also allows you to create links for email addresses and phone numbers:

- Email links: 

To create a link that opens the user's default email client with a pre-filled email, use the `mailto:` protocol followed by the email address. For example, `<a href="mailto:info@example.com">Send Email</a>` would create a link to send an email to "info@example.com".

- Phone number links: 

To create a link that allows users to initiate a phone call on supported devices, use the `tel:` protocol followed by the phone number. For example, `<a href="tel:+1234567890">Call</a>` would create a link to call the number "+1234567890".

4. Adding link titles and target attributes:

You can provide additional information and control the behavior of links using the `title` and `target` attributes:

- `title`:

The `title` attribute provides a tooltip or description that is displayed when the user hovers over the link. It can be used to provide additional context or information about the destination of the link.

- `target`: 

The `target` attribute specifies how the linked page should be opened. By default, links open in the same browser window or tab. However, you can use the `target` attribute to control this behavior. For example, `<a href="page.html" target="_blank">Open in New Tab</a>` would open the linked page in a new browser tab.

By understanding anchor tags, the `href` attribute, creating internal and external links, linking to email addresses and phone numbers, and utilizing the `title` and `target` attributes, you can create effective and functional links within your HTML documents.

No comments:

Post a Comment