Activity 4: HTML Link Exercises

What was this all about?

In the previous activities, we focused on building and decorating a single page. Activity 4 was all about connecting that page to the rest of the internet and to different parts of itself. We used the Anchor tag (<a>), which is the single most important element that defines the web, to create different types of links.

Showing the Final Look (The Output)

This screenshot shows the results of the three main link exercises we completed:

The page clearly displays:

1. External Links (4.1): Simple text links to other major websites (search engines).
2. External Links in a List (4.2): Links to five different educational resources, presented neatly in a bulleted list.
3. Internal Links (4.3-4.5): A link that jumps you to a specific spot on the same page.

---

Taking a Peek at the Code

This screenshot shows the HTML code used to create all the links in Activity 4.

Let’s break down the three fundamental types of links we created:

Exercise 4.1 & 4.2: Linking to Other Websites (External Links)

• The Goal: Connect my page to external resources (search engines and educational sites).
• The Code (See Lines 322-327 and 334-339):
  • The <a> Tag: Every link starts and ends with this tag.
  • The href Attribute: This is the address of the link. It always starts with https:// when linking to an outside website (like https://www.google.com). This is called an absolute URL because it includes the full path.
  • target="_blank": This is the most crucial part we added! This attribute tells the browser, “Don’t leave my current page; open this new link in a brand new tab.” This is great for keeping visitors on your site longer.
  • rel="noopener": This is a modern security feature. It prevents the new tab from being able to mess with your original page, keeping your site safe.

Exercise 4.3, 4.4, & 4.5: Jumping Around (Internal Links / Jump Links)

• The Goal: Create a link at the top of a long page that, when clicked, instantly scrolls the user to the bottom of the page (and vice versa).
• The Technique: This uses the href attribute in a new way—to target an ID on the current page, not a new web address.
• The Code (Not fully visible, but explained below):
  1. The Target (The Destination): I added a unique id attribute to an element at the bottom of the page (e.g., <div id="bottom-target">...</div>).
  2. The Link (The Jumper): The link’s href attribute uses a hashtag (#) followed by that unique ID: <a href="#bottom-target">Jump to Bottom</a>.

This technique creates a seamless navigation experience within a single, long page. This is called a fragment identifier or “jump link.”

---

What I Took Away From This Activity

Activity 4 gave me the skills necessary to build a truly navigable website. The main lessons were:

1. Absolute vs. Relative Paths: I learned the difference between an Absolute Path (the full web address, needed for external links) and the concept of a Relative Path (the address used to link to other pages inside my own website, like activity5.html).
2. Controlling the Window: Mastering target="_blank" is essential for user experience. It ensures I can send visitors out to external sources without losing them from my own portfolio site.
3. ID for Internal Jumps: I learned that the id attribute is vital for more than just styling; it creates unique bookmarks on a page that the <a> tag can directly jump to using the # symbol. This is fundamental for creating navigation menus and table-of-contents features.