3.1. Creating Links (15 minutes)

  • Detailed review of the <a> tag for hyperlinks​.

  • Internal vs. external links.

  • Opening links in a new tab using target="_blank".

3.1 Creating Links (15 minutes)

Introduction to the Tag for Hyperlinks

The <a> tag (anchor tag) is used to create hyperlinks in HTML, allowing users to navigate from one page to another. This tag is fundamental to how the web works, as it enables users to click on text or images and be directed to other resources, either within the same site or to an external website.

Here’s the basic syntax of the <a> tag:

// Some code
<a href="https://www.example.com">Link Text</a>

  • href (Hypertext REFerence): This attribute specifies the URL or file path of the page or resource the link points to. When users click the link text, they are directed to the specified URL

    • Example for an external link:

      <a href="https://www.wikipedia.org">Visit Wikipedia</a>

    • Example for an internal link (within the same site):

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

The clickable link text can be any text or even an image that a user clicks on to navigate.

Internal vs. External Links

  • Internal Links: These links point to other pages or resources within the same website. They often reference other HTML files within the same project folder or sections of the same page (also known as anchor links).

    • Example of an internal link to another page on the same site:

      <a href="contact.html">Contact Us</a>

  • External Links: These links direct users to other websites outside the current domain. They usually start with a full URL (e.g., https://).

    • Example of an external link:

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

Using internal and external links helps users navigate effectively within your website or to external resources.

Opening Links in a New Tab Using target="_blank"

The target="_blank" attribute is used to open a link in a new browser tab or window. This can be especially useful for external links when you want the user to remain on your website while still visiting the linked resource.

Example of a link opening in a new tab:

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

  • target="_blank": This attribute tells the browser to open the link in a new tab or window, depending on the browser settings.

  • Example without target="_blank":

    • The link opens in the same tab, replacing the current page.

      <a href="https://fewebdev.koida.tech">Open Example in the Same Tab</a>

Activity for Students

Objective:

In this activity, students will practice creating links using the <a> tag, including both internal and external links. They will also learn how to open links in a new tab using the target="_blank" attribute.

Activity Steps:

  1. Open the Existing HTML File:

    • Instruct students to open their existing HTML file (e.g., exercise.html) using a text editor (such as Notepad or Visual Studio Code).

  2. Add Multiple Links:

    • Ask students to add several hyperlinks to their webpage, including both internal links (links to other pages within the same site) and external links (links to other websites).

    • Example code to add to their webpage:

      <h2>Useful Links</h2>

<!-- Internal link -->
<p><a href="about.html">About Us</a></p>

<!-- External link -->
<p><a href="https://www.wikipedia.org">Visit Wikipedia</a></p>

<!-- External link opening in a new tab -->
<p><a href="https://fewebdev.koida.tech" target="_blank">Open Example in a New Tab</a></p>

  3. Create Internal Links:

    • If students don’t have an internal page (like about.html), they can create a simple placeholder page. Instruct them to create a new HTML file named about.html with the following content:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
</head>
<body>
    <h1>About Us</h1>
    <p>This is the About Us page.</p>
</body>
</html>

    • Save this file in the same folder as their main HTML file. Now, the internal link will work correctly.

  4. Save and Test the Links:

    • Students should save their updated HTML file and open it in their browser.

    • Test the following:

      • Internal links should navigate to the local about.html page.

      • External links should navigate to external websites like Wikipedia.

      • Links with target="_blank" should open in a new tab.

  5. Experiment with More Links (Optional):

    • Encourage students to add more links, including links that open in the same tab or new tab, and internal links that direct to different sections of the same page (using anchor links).

    • Example of an anchor link:

      <a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
<h2 id="section2">Section 2</h2>

Practice Example

// Some code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> ???</title>
  </head>
  <body>
<!-- External link opening in a new tab -->
    <p>
      <a href="https://fewebdev.koida.tech/" target="_blank"
        >Open Front-end Web Dev gitbook in a New Tab</a
      >
    </p>
    <!-- 1.	Add Links to Different Sections of the Same Page (Anchor Links):-->
    <a href="#contact">Go to Contact Section</a>
    <br />
    <h2 id="#about">About Us</h2>
    <p>
      This is the About section. Your Privacy Matters LinkedIn’s mission is to
      connect the world’s professionals to allow them to be more productive and
      successful. Central to this mission is our commitment to be transparent
      about the data we collect about you, how it is used and with whom it is
      shared. This Privacy Policy applies when you use our Services (described
      below). We offer our users choices about the data we collect, use and
      share as described in this Privacy Policy, Cookie Policy, Settings and our
      Help Center. LinkedIn Professional Community Policies Thank you for using
      LinkedIn, where the world’s professionals come together to find jobs, stay
      informed, learn new skills, and build productive relationships. The
      content that you contribute should add to the LinkedIn community in a
      constructive manner. Additional information on what that means, is laid
      out below. You should also review our Publishing Platform Guidelines.
      Together we can make our community a place where everyone is able to
      learn, grow, and communicate, which, in turn, helps create economic
      opportunity for everyone.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
      consequatur est enim doloremque nobis hic porro voluptas error vitae
      fugiat expedita, dolor cupiditate, dolore iure minus soluta, ipsum ratione
      aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Excepturi, ipsa esse! Voluptatum tenetur mollitia itaque excepturi
      necessitatibus, perspiciatis dignissimos expedita iste doloremque
      laudantium maxime officia culpa aliquam fugit optio eaque.
    </p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis
      itaque, odio magnam recusandae officia tempore omnis, reprehenderit nulla
      sapiente magni modi voluptas, blanditiis id! Magni laudantium magnam totam
      omnis ab.
    </p>
    
    <h2 id="contact">Contact Us</h2>
    <p>This is the Contact section.</p>
    <p>
      Extended Activity (Optional): For students who finish early or want more
      practice, suggest the following: 1. Add Links to Different Sections of the
      Same Page (Anchor Links): o Students can add anchor links that navigate to
      different parts of the same page.  Example:

      2. Style Links with CSS (Optional): o Encourage students to experiment
      with CSS to style their links. For example, they can change the color or
      remove the underline from links:
      <style>
        a {
          color: blue;
          text-decoration: none;
        }
        a:hover {
          text-decoration: underline;
        }
      </style>

      By the end of this activity, students will have a clear understanding of
      how to create internal and external links, as well as how to control
      whether links open in the same tab or a new one. They will also be able to
      use these skills to enhance navigation and user experience on their
      webpages.
    </p>
      </body>
</html>

Discussion and Reflection:/

After the activity, ask students to reflect on the following questions:

  • What is the difference between internal and external links?

  • When might it be useful to open a link in a new tab using target="_blank"?

  • How does linking improve user navigation on a website?

Encourage students to share their experiences with creating links and discuss any challenges they faced during the activity.

Extended Activity (Optional):

For students who finish early or want more practice, suggest the following:

  1. Add Links to Different Sections of the Same Page (Anchor Links):

    • Students can add anchor links that navigate to different parts of the same page.

      • Example:

        <a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>
<p>This is the Contact section.</p>

  2. Style Links with CSS (Optional):

    • Encourage students to experiment with CSS to style their links. For example, they can change the color or remove the underline from links:

      <style>
  a {
    color: blue;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
</style>

By the end of this activity, students will have a clear understanding of how to create internal and external links, as well as how to control whether links open in the same tab or a new one. They will also be able to use these skills to enhance navigation and user experience on their webpages.

PreviousLecture_3_Links, Lists, and TablesNext3.2. Lists in HTML (20 minutes)

Last updated