2. Step-by-Step Guide

Examples:

1. Internal Link: <a href="#section1">Go to Section 1</a>
2. External Link: <a href="https://www.example.com">Visit Example.com</a>

Best practices and tips:

1. Always use meaningful anchor text that gives a clear idea of what the link is about.
2. For external links, it is generally a good practice to open the link in a new tab. This can be done by adding the target="_blank" attribute to the a tag.

3. Code Examples

Example 1: Internal Link

<!-- This is the link -->
<a href="#section1">Go to Section 1</a>

<!-- This is the destination -->
<div id="section1">
  <h2>Section 1</h2>
  <p>This is Section 1.</p>
</div>

• The #section1 in the href attribute is the destination of the link.
• When you click on "Go to Section 1", the browser will scroll to the element with an id of "section1".
• The expected result is that the page will scroll to "Section 1".

Example 2: External Link

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

• The href attribute points to "https://www.example.com", which is the destination of the link.
• target="_blank" makes the link open in a new tab.
• The expected result is that a new tab will open and load "example.com".

4. Summary

5. Practice Exercises

Exercise 1: Create an internal link that navigates to a section at the bottom of the page.
Solution:

<a href="#bottom">Go to Bottom</a>

<div id="bottom">
  <h2>Bottom of the Page</h2>
</div>

Exercise 2: Create an external link that opens in a new tab.
Solution:

<a href="https://www.google.com" target="_blank">Open Google</a>

Exercise 3: Create a navigation bar using internal links.
Solution:

<nav>
  <a href="#home">Home</a> |
  <a href="#about">About</a> |
  <a href="#contact">Contact</a>
</nav>

<div id="home">
  <h2>Home</h2>
</div>

<div id="about">
  <h2>About</h2>
</div>

<div id="contact">
  <h2>Contact</h2>
</div>

• This exercise combines multiple internal links to create a navigation bar.
• Each link leads to a different section on the page.