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: #9b5de5; }
a:hover { color: #6a0dad; text-decoration: underline; }
a:visited { color: #c77dff; }
a:active { color: #4a1080; }
/* Button-style link */
a.btn {
background: #ede7ff;
padding: 4px 12px;
border-radius: 4px;
text-decoration: none;
}