External Links (Activities 4.1 & 4.2)

These exercises demonstrated linking to external URLs, a fundamental function of the web.

• HTML Code (Activity 4.1 & 4.2): The code for both activities uses the <a> tag with the href attribute set to the full, absolute URL of the target website (e.g., https://www.ask.com).
  • Activity 4.1 (Search Engines) uses the target="_blank" attribute. This instruction tells the browser to open the link in a new tab or window, preventing the user from leaving the current page.
  • Activity 4.2 (External Websites) uses target="_blank" for a variety of general external sites. (Image Here: html code.png – showing activity4-1.html and activity4-2.html code)
• Output (Activity 4.1 & 4.2): The browser output displays a list of clickable text links. The key learning here is that clicking any of these links opens the target website in a new tab, as confirmed by the target="_blank" attribute in the code. (Image Here: output2.png – showing output for activity4-1.html) (Image Here: output3.png – showing output for activity4-2.html)

Internal Links (Activity 4.3)

Activity 4.3 focused on creating links between pages located within the same directory or website structure.

• HTML Code (Activity 4.3): The code uses a relative file path in the href attribute (e.g., href="activity4-4.html"). Since both files are in the same folder, only the file name is needed, demonstrating efficient local linking without using the full URL. (Image Here: html code2.png – showing activity4-3.html code)
• Link to Output (Activity 4.3): The final output is the target page (activity4-4.html). The link on the originating page successfully loaded this new, internal page.

Fragment Links / Same-Page Jumps (Activities 4.4 & 4.5)

These were the most complex links, designed to allow users to navigate instantly to different sections within the same document, eliminating the need for manual scrolling.

• HTML Code (Activity 4.4 & 4.5): The key to fragment linking is the combination of the anchor link and the target ID:
  1. The link uses href="#id_name" (e.g., <a href="#bottom">Jump to Bottom</a>).
  2. The destination element must have a matching id attribute (e.g., <div id="bottom">...</div>).
  • Activity 4.4 links from the top to the bottom.
  • Activity 4.5 links from the bottom back to the top (using id="top"). (Image Here: html code3.png – showing activity4-4.html code) (Image Here: output6.png – showing output for activity4-5.html code)
• Output (Activity 4.4 & 4.5): The output shows a long page of text. Clicking the “Jump to Bottom” link (Activity 4.4) or the “Back to Top” link (Activity 4.5) instantly scrolls the viewport to the designated id element, proving the fragment link functionality. (Image Here: output4.png – showing output for activity4-3.html) (Image Here: output5.png – showing output for activity4-4.html) (Image Here: output6.png – showing output for activity4-5.html)

What I Learned

Activity 4 provided practical experience with the core navigation component of HTML:

• Absolute vs. Relative Paths: I learned the difference between using absolute paths (full external URLs starting with https://) for external links and relative paths (just the file name or a path like ../file.html) for internal links within a website structure.
• User Experience (UX) Control: Using target="_blank" is an important UX decision to control whether external links interrupt the user’s flow on the current site.
• In-Page Navigation: Mastering fragment linking (using # with IDs) is vital for creating usable, scrollable single-page layouts or providing a helpful table of contents.