Creating hyperlinks with anchor tags — internal links, external links, email links, and anchor links.
| Type | Example | Description |
|---|---|---|
| External link | W3Schools ↗ | Opens in new tab via target="_blank" |
| Internal link | Activity 1 | Navigates within the site |
| Email link | Send Email | Opens mail client |
| Anchor link | Jump to Section | Scrolls to element with matching id |
<!-- External link --> <a href="https://www.w3schools.com" target="_blank">W3Schools</a> <!-- Internal link --> <a href="activity1.php">Activity 1</a> <!-- Email link --> <a href="mailto:email@example.com">Send Email</a> <!-- Anchor link --> <a href="#section-demo">Jump to Section</a> <div id="section-demo">...target section...</div>
Links can be styled using CSS pseudo-classes:
a { color: #2d6a4f; }
a:hover { color: #40916c; text-decoration: underline; }
a:visited { color: #74c69d; }
a:active { color: #1b4332; }
/* Button-style link */
a.btn {
background: #d8f3dc;
padding: 4px 12px;
border-radius: 4px;
text-decoration: none;
}