Skip to content

Activity 4: Link Exercises

Exercise 1: Create some links to various search engines (google, yahoo, altavista, lycos, etc).

<!DOCTYPE html>
<html>
<head>
    <title>Search Engine Links</title>
</head>
<body>

    <h1>Search Engine Links</h1>

    <p>Click on any of the links below to visit the search engine:</p>

    <ul>
        <li><a href="https://www.google.com/">Google</a></li>
        
        <li><a href="https://www.bing.com/">Bing</a></li>
        
        <li><a href="https://www.yahoo.com/">Yahoo!</a></li>
        
        <li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
        
        <li><a href="https://web.archive.org/web/20160212000000*/http://www.altavista.com/">AltaVista (Archive)</a></li>
        
        <li><a href="https://www.lycos.com/">Lycos</a></li>
        
        <li><a href="https://www.ask.com/">Ask.com</a></li>
    </ul>


</body>
</html>

Exercise 2: Create links to five different pages on five different websites that should all open in a new window.

<!DOCTYPE html>
<html>
<head>
    <title>Links to Open in New Tabs</title>
</head>
<body>

    <h1>Five Links to Five Different Websites</h1>

    <p>Click these links—they will each open in a new browser tab or window, leaving this page open.</p>

    <ul>
        <li>
            <a href="https://developer.mozilla.org/en-US/" target="_blank">
                MDN Web Docs
            </a> - (For learning web development)
        </li>
        
        <li>
            <a href="https://www.bbc.com/news" target="_blank">
                BBC News
            </a> - (A global news source)
        </li>
        
        <li>
            <a href="https://www.linkedin.com/" target="_blank">
                LinkedIn
            </a> - (Professional networking site)
        </li>
        
        <li>
            <a href="https://www.wikipedia.org/" target="_blank">
                Wikipedia
            </a> - (General reference encyclopedia)
        </li>
        
        <li>
            <a href="https://www.coursera.org/" target="_blank">
                Coursera
            </a> - (Online learning platform)
        </li>
    </ul>

   

</body>
</html>

Exercise 3: Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page.

<!DOCTYPE html>
<html>
<head>
    <title>Jump to Bottom Link</title>
</head>
<body>

    <p><a href="#page-bottom">Click to Jump to the Bottom of the Page ↓</a></p>

    <div style="height: 1000px; padding: 20px;">
        <p>This is filler content. Scroll down to see the end of the page.</p>
        <p>This content is used to push the target destination down past the visible screen area.</p>
        <p>...</p>
        <h3>The Living Light Show of the Deep Sea</h3>
<p>Imagine a realm of perpetual darkness, miles beneath the surface, where the sun's light never reaches. In this extreme environment, the most common form of communication and defense isn't sound or sight as we know it, but light generated by the organisms themselves, a phenomenon called bioluminescence. This living light is produced through a chemical reaction, typically involving a molecule called luciferin and an enzyme known as luciferase. The resulting flashes, glows, and waves of light are used by roughly 90% of deep-sea creatures, including squid, jellyfish, and various fish. The colors usually appear in shades of blue or green because those wavelengths travel best through deep water. The sheer variety of ways this light is used is astonishing, transforming the dark ocean into a dynamic landscape of moving, silent signals.</p>
        <p>...</p>
        <h3>The Many Uses of Biological Light</h3>
<p>The functions of bioluminescence are incredibly diverse and crucial for survival in an environment with no natural light. One of the most common applications is camouflage through a technique called counterillumination. Many mid-water creatures have light organs called photophores on their undersides that precisely match the faint, down-welling sunlight or moonlight filtering from above. This effectively erases their silhouette, making them invisible to predators looking up from below. Beyond stealth, bioluminescence is used aggressively: some anglerfish use a glowing lure to attract unsuspecting prey, while others employ a "burglar alarm" tactic, flashing brightly when attacked to attract a bigger predator that might target their original attacker. It is also vital for mating rituals, with species using specific patterns and rhythms of light to identify and court a potential partner, making the ocean floor a silent, glittering stage for life and death.</p>
        <p>...</p>
    </div>

    <h2 id="page-bottom">You have reached the bottom of the page!</h2>

</body>
</html>

Exercise 4: Create a page with a link at the bottom of it that when clicked will jump all the way to the top of the page.

<!DOCTYPE html>
<html>
<head>
    <title>Jump to Top Link</title>
</head>
<body>

    <h1 id="page-top">Welcome to the Top!</h1>

    <div style="height: 1000px; padding: 20px;">
        <p>This is filler content. Scroll all the way down to find the link.</p>
        <p>This content is used to push the link destination far out of the initial view.</p>
        <p>...</p>
        <h3>The Living Light Show of the Deep Sea</h3>
<p>Imagine a realm of perpetual darkness, miles beneath the surface, where the sun's light never reaches. In this extreme environment, the most common form of communication and defense isn't sound or sight as we know it, but light generated by the organisms themselves, a phenomenon called bioluminescence. This living light is produced through a chemical reaction, typically involving a molecule called luciferin and an enzyme known as luciferase. The resulting flashes, glows, and waves of light are used by roughly 90% of deep-sea creatures, including squid, jellyfish, and various fish. The colors usually appear in shades of blue or green because those wavelengths travel best through deep water. The sheer variety of ways this light is used is astonishing, transforming the dark ocean into a dynamic landscape of moving, silent signals.</p>
        <p>...</p>
        <h3>The Many Uses of Biological Light</h3>
<p>The functions of bioluminescence are incredibly diverse and crucial for survival in an environment with no natural light. One of the most common applications is camouflage through a technique called counterillumination. Many mid-water creatures have light organs called photophores on their undersides that precisely match the faint, down-welling sunlight or moonlight filtering from above. This effectively erases their silhouette, making them invisible to predators looking up from below. Beyond stealth, bioluminescence is used aggressively: some anglerfish use a glowing lure to attract unsuspecting prey, while others employ a "burglar alarm" tactic, flashing brightly when attacked to attract a bigger predator that might target their original attacker. It is also vital for mating rituals, with species using specific patterns and rhythms of light to identify and court a potential partner, making the ocean floor a silent, glittering stage for life and death.</p>
        <p>...</p>
    </div>

    <p><a href="#page-top">Click to Jump to the Top of the Page ↑</a></p>

</body>
</html>

Exercise 5: Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. At the bottom of the page there should be a link to jump back to the top of the page.

<!DOCTYPE html>
<html>
<head>
    <title>Top-to-Bottom and Back Navigation</title>
</head>
<body>

    <h1 id="page-top">Welcome to the Top!</h1>

    <p>
        <a href="#page-bottom">Click to Jump to the Bottom of the Page ↓</a>
    </p>

    <div style="height: 1200px; padding: 20px; background-color: #f4f4f4;">
        <p>This is filler content. Scroll down to see the end of the page and find the 'Jump to Top' link.</p>
        <p>The total height of this section is 1200 pixels, guaranteeing a scrollbar on most screens.</p>
        <hr>
        <p>...</p>
        <h3>The Living Light Show of the Deep Sea</h3>
<p>Imagine a realm of perpetual darkness, miles beneath the surface, where the sun's light never reaches. In this extreme environment, the most common form of communication and defense isn't sound or sight as we know it, but light generated by the organisms themselves, a phenomenon called bioluminescence. This living light is produced through a chemical reaction, typically involving a molecule called luciferin and an enzyme known as luciferase. The resulting flashes, glows, and waves of light are used by roughly 90% of deep-sea creatures, including squid, jellyfish, and various fish. The colors usually appear in shades of blue or green because those wavelengths travel best through deep water. The sheer variety of ways this light is used is astonishing, transforming the dark ocean into a dynamic landscape of moving, silent signals.</p>
        <p>...</p>
        <h3>The Many Uses of Biological Light</h3>
<p>The functions of bioluminescence are incredibly diverse and crucial for survival in an environment with no natural light. One of the most common applications is camouflage through a technique called counterillumination. Many mid-water creatures have light organs called photophores on their undersides that precisely match the faint, down-welling sunlight or moonlight filtering from above. This effectively erases their silhouette, making them invisible to predators looking up from below. Beyond stealth, bioluminescence is used aggressively: some anglerfish use a glowing lure to attract unsuspecting prey, while others employ a "burglar alarm" tactic, flashing brightly when attacked to attract a bigger predator that might target their original attacker. It is also vital for mating rituals, with species using specific patterns and rhythms of light to identify and court a potential partner, making the ocean floor a silent, glittering stage for life and death.</p>
    </div>

    <h2 id="page-bottom">You have reached the bottom of the page!</h2>

    <p>
        <a href="#page-top">Jump back to the Top of the Page ↑</a>
    </p>

</body>
</html>