Coding Links: Images & Page Jumps

Topics Covered in This HTML & CSS Tutorial:

Master the fundamentals of web navigation: Anchor Tags & Relative URLs, Wrapping Links Around Images, External Links (using the Target Attribute), and Links Within a Page for seamless user experience.

Exercise Preview

Exercise Overview

This comprehensive exercise will strengthen your fundamental linking skills—essential building blocks for any professional website. You'll master internal site navigation, implement external links that enhance user experience without losing visitors, create intuitive page anchors for long-form content, and transform images into clickable elements. These techniques form the backbone of modern web navigation and are crucial for both user experience and SEO performance.

1. If you completed the previous exercise, sanfran.html should still be open, and you can skip the following sidebar. If you closed sanfran.html, re-open it now. We strongly recommend completing the previous exercises (3B–3D) before starting this one, as they establish the foundation we'll be building upon. If you haven't finished them, follow the setup instructions below.

   Exercise Prerequisites

   0/3

   Complete previous exercises 3B-3D

   Ensures you have the proper foundation and file structure

   Have sanfran.html file open

   Main working file for this linking exercise

   Set up Visual Studio Code with wrap keystroke

   Option-W (Mac) or ALT-W (Windows) for efficient tag wrapping

Coding Links to Pages Within a Site

Internal linking is the foundation of site navigation and plays a crucial role in both user experience and search engine optimization. Before diving in, here's a productivity tip that will save you significant time: If you're using Visual Studio Code with the wrap keystroke configured (as outlined in the Before You Begin section), you can rapidly wrap tags around selected text. Simply select your target text, press Option–W (Mac) or ALT–W (Windows), type the tag name (in this case, a for anchor), and press Return or Enter.

1. Let's establish the primary navigation structure by coding links to other pages within our site. In sanfran.html, locate the nav element (positioned just after the opening body tag). Wrap each navigation item with the anchor tags and href attributes shown in bold below:

   <nav>
      <ul>
         <li><a href="sanfran.html"> Featured Location</a></li>
         <li><a href="packages.html"> Tour Packages</a></li>
         <li><a href="tips.html"> Travel Tips</a></li>
         <li><a href="about.html"> About Us</a></li>
         <li><a href="contact.html"> Contact</a></li>
      </ul>
   </nav>

   IMPORTANT NOTE: When linking between files within the same website, always use relative links rather than absolute URLs. These links are relative to the current file's location in your directory structure. Since both the source file and destination files reside in the same folder, you only need to specify the filename as the href value. This approach ensures your links remain functional when you move your site between development and production environments.

2. Save the file to preserve your changes.
3. Preview sanfran.html in your browser and test one of the navigation links. You'll notice these pages are provided but unstyled—we'll address the visual design in upcoming exercises focused on CSS implementation.

4. Use your browser's Back button to return to sanfran.html. Keep this page open in your browser for efficient testing as we continue building functionality.

Wrapping Links Around Images

Converting images into clickable elements is a fundamental web development technique that enhances navigation and user engagement. The most common implementation is linking brand logos to the homepage—a universally expected behavior that improves user experience.

1. Let's implement the standard practice of making the logo image link to the homepage. Return to sanfran.html in your code editor.

2. Locate the logo image within the header element (positioned above the nav). Wrap this image in an anchor tag that points to the index page, as demonstrated in bold below:

   <header><a href="index.html"><img src="images/revolution-logo.png" ALT="Revolution Travel"></a></header>

3. Save the file and reload the page in your browser to test the implementation.
4. Click the logo to verify it navigates to the homepage. This demonstrates another unstyled template file we've prepared for the complete site structure.

5. Return to sanfran.html using your browser's Back button.

Creating Links to Other Websites

External linking requires careful consideration of user experience. While you want to provide valuable resources, you also want to retain visitors on your site. We'll explore how to implement external links that open in new tabs, keeping your content accessible.

1. Return to sanfran.html in your code editor.

2. Navigate to the main section and locate the Things to Do heading.

   This section contains three partner images that need to be converted into clickable links to their respective external websites. This type of partnership linking is common in travel and tourism websites.

3. Find the Alcatraz Cruises image and wrap it with an anchor tag as shown in bold:

   <p><a href="https://www.alcatrazcruises.com/"><img src="images/logo-alcatraz.jpg" class="img-left" ALT="Alcatraz Cruises"></a>

   CRITICAL: External links must always include the full protocol—either https:// (HTTP Secure, now the web standard) or http:// (increasingly rare for security reasons). Most modern websites use HTTPS exclusively. Always copy URLs directly from the browser's address bar to ensure accuracy and avoid broken links.

4. Save the file and reload your browser page to test the link functionality.

5. Use your browser's Back button to return to sanfran.html.

   You'll notice the link replaced your current page. For external links, it's generally better practice to open them in new tabs, preserving the user's place on your site while providing access to external resources.

6. Return to your code editor and add the target attribute to the anchor tag:

   <a href="https://www.alcatrazcruises.com/" target="_blank"><img src="images/logo-alcatraz.jpg" class="img-left" ALT="Alcatraz Cruises"></a>

7. Save and reload the page to test the improved behavior. The external site now opens in a new tab, while your original page remains accessible. Note that users who have configured their browsers to open links in new windows (rather than tabs) will see that behavior instead.

8. Let's apply this same technique to the remaining partner images. Return to sanfran.html in your code editor.

9. Locate the Fisherman's Wharf image and wrap it with the following anchor tag:

   <p><a href="https://www.fishermanswharf.org/" target="_blank"><img src="images/logo-fishermans-wharf.jpg" class="img-right" ALT="Fisherman's Wharf"></a>

10. Next, find the Blazing Saddles image and apply the same treatment:

    <p><a href="https://www.blazingsaddles.com/" target="_blank"><img src="images/logo-blazing-saddles.jpg" class="img-left" ALT="Blazing Saddles"></a>

11. Save your work and reload the browser page to verify both new links open in separate tabs, maintaining your site's accessibility while providing external resources.

Links Within a Page

Internal page anchors dramatically improve user experience on content-heavy pages by providing quick navigation to specific sections. This technique is essential for long-form content, documentation, and any page where users need to jump between sections efficiently. Search engines also recognize and can display these anchor links in search results, improving your SEO performance.

We've prepared content specifically designed for these "page jump" links. Let's implement the functionality that makes lengthy pages navigable and user-friendly.

1. Begin by adding unique identifiers to each content section. In the Things to Do section, add an ID attribute to the Alcatraz Island paragraph as shown in bold:

   <p id="alcatraz"><a href="https://www.alcatrazcruises.com/" target="_blank">

2. Add a corresponding ID to the Fisherman's Wharf paragraph:

   <p id="wharf"><a href="https://fishermanswharf.org/" target="_blank">

3. Include an ID for the Blazing Saddles section:

   <p id="biking"><a href="https://www.blazingsaddles.com/" target="_blank">

4. Finally, add an ID to the Local Travel Tips heading for easy reference:

   <h2 id="tips">Local Travel Tips</h2>

5. Now create the navigation links that will allow users to jump directly to these sections. Above the Things to Do heading, locate the text Jump to information about and wrap the Alcatraz text with the anchor tag shown in bold:

   <p><em>Jump to information about:</em> <a href="#alcatraz"> Alcatraz</a> | Fisherman's Wharf

   The # symbol in the href instructs the browser to locate an element with the corresponding ID and smoothly scroll to that position on the page. This is standard HTML anchor link syntax.

6. Complete the Fisherman's Wharf link using the same pattern:

   <a href="#wharf"> Fisherman's Wharf</a>

7. Save your work and preview sanfran.html in your browser.

8. Test the anchor links by clicking them next to Jump to information about. If the links don't function as expected, verify that your anchor href values exactly match the corresponding ID attributes—they're case-sensitive and cannot contain spaces or special characters.

9. Return to your code editor to complete the remaining navigation links:

   <a href="#biking"> Bike Ride</a> | <a href="#tips"> Local Travel Tips</a>

10. Save and reload your browser to test the complete set of page jump functionality.

11. While jumping to specific content improves navigation, users also need an efficient way to return to the top. Let's implement "Back to Top" functionality throughout the page. Return to sanfran.html in your code editor.

12. Navigate to the Things to Do section and locate the content blocks.

13. After the Alcatraz content block, find the Back to Top text and wrap it with an anchor tag:

    <a href="#"> Back to Top</a></p>

    This demonstrates a useful HTML technique: linking to an empty anchor (#) automatically returns users to the top of the document. It's a clean, reliable method that works across all browsers and devices.

14. Apply this same anchor pattern to the remaining Back to Top instances throughout the page:

    • At the conclusion of the Fisherman's Wharf content
    • Following the Blazing Saddles information
    • At the end of the Local Travel Tips section (just before the footer)

    PRODUCTIVITY TIP: Visual Studio Code users with the wrap keystroke configured can use this efficient workflow:

    • Select any Back to Top text instance
    • Choose Selection > Select All Occurrences to highlight all instances
    • Press Option–W (Mac) or ALT–W (Windows) and type a to wrap all selections simultaneously
    • Add the href="#" attribute to each newly created anchor tag
15. Save your file and thoroughly test all Back to Top links in your browser to ensure smooth page navigation.

16. For those seeking additional challenges, explore the Spambot Resistant Email Link bonus exercise at the end of this book to further expand your linking expertise and learn modern email protection techniques.