Be able to create hyperlinks from text and images to bookmarks on the same page, other locally stored web pages, a website using the URL, send mail to a specified email address, to open in a specified location (the same window, a new window, with a w

21. Website Authoring – Hyperlinks

Learning Objective

Students will be able to create hyperlinks from text and images that:

• Link to a bookmark on the same page
• Link to another page stored locally
• Link to an external website using a URL
• Open the default mail client to send an e‑mail
• Open in a specified location – the same window, a new window, or a named window

1. Basic Syntax of the <a> Element

The anchor element creates a hyperlink. Its most important attributes are:

2. Linking to a Bookmark on the Same Page

First create a bookmark using the id attribute, then link to it with a hash (#) followed by the id.

<h2 id="chapter3">Chapter 3 – Advanced Topics</h2>
...
<a href="#chapter3">Jump to Chapter 3</a>

3. Linking to Another Locally Stored Page

Assume the file about.html resides in the same folder as the current page.

<a href="about.html">About Our School</a>

4. Linking to an External Website

Use the full URL, including the protocol (http:// or https://).

<a href="https://www.bbc.com" target="_blank">BBC News</a>

5. Creating a Mailto Link

The mailto: scheme opens the default e‑mail client with a pre‑filled address.

<a href="mailto:info@example.com?subject=Inquiry">Email Us</a>

6. Controlling Where the Link Opens

The target attribute determines the browsing context.

1. Same window (default) – target="_self" or omit the attribute.
2. New window or tab – target="_blank".
3. Named window – give the window a name; subsequent links using the same name reuse that window.

Examples:

<a href="page2.html" target="_self">Open in same window</a>
<a href="https://www.wikipedia.org" target="_blank">Open in new tab</a>
<a href="help.html" target="helpWindow">Open in named window</a>
<a href="faq.html" target="helpWindow">Another link to same named window</a>

7. Hyperlinking an Image

Wrap the <img> element (or a placeholder figure) inside an <a> tag.

<a href="gallery.html" target="_blank">
<!-- Replace the comment with an actual <img> element when building the page -->
</a>

8. Summary Table of Common Link Types

9. Practice Exercise

1. Create a bookmark called top at the very beginning of the page.
2. Insert a link at the bottom of the page that says “Back to top” and points to the bookmark.
3. Add a link that opens resources.html in a new tab.
4. Insert an image placeholder that, when clicked, opens the school’s homepage in the same window.
5. Write a mailto link that opens a new e‑mail addressed to admin@school.org with the subject “Website feedback”.

10. Common Mistakes to Avoid

• Forgetting the protocol in an external URL (e.g., writing www.example.com instead of https://www.example.com).
• Using spaces in file names – replace spaces with hyphens or underscores.
• Omitting the # when linking to a bookmark.
• Using target="_blank" without considering accessibility – always provide a clear indication that a new window/tab will open.

11. Quick Reference Cheat‑Sheet

<a href="page.html">Link text</a>                     
<a href="page.html" target="_blank">Link</a>          
<a href="page.html" target="myWin">Link</a>          
<a href="#section">Jump to section</a>               
<a href="mailto:name@domain.com">Email</a>           
<a href="https://example.com">External site</a>