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

Website Authoring – Creating Hyperlinks

Learning Objective

By the end of this lesson you will be able to create hyperlinks that:

• Link from text or an image to a bookmark on the same page.
• Link to another page stored locally on the same computer.
• Link to a page on a remote website using its URL.
• Open the default e‑mail client with a pre‑filled address (mailto link).
• Open in a specific browsing context – 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 attribute is href which defines the destination.

<a href="destination">Link text</a>

2. Linking to a Bookmark on the Same Page

Bookmarks are created using the id attribute on any element. The link uses a hash (#) followed by that id.

<h2 id="section2">Section 2</h2>
<a href="#section2">Go to Section 2</a>

3. Linking to Another Locally Stored Page

Use a relative file path in the href. The path is relative to the current page’s location.

<a href="folder/subpage.html">Open Subpage</a>

4. Linking to an External Website (URL)

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

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

5. Creating a Mailto Link

The mailto: scheme opens the user’s default e‑mail client with the address (and optionally subject or body) pre‑filled.

<a href="mailto:info@example.com">Email us</a>
<a href="mailto:support@example.com?subject=Help%20request">Request Support</a>

6. Controlling Where the Link Opens – The target Attribute

The target attribute determines the browsing context.

7. Hyperlinking an Image

Wrap the <img> element inside an <a> element. (The image itself is not displayed here because external images are prohibited, but the syntax is shown.)

<a href="large-photo.html" target="_blank">
<img src="thumb.jpg" alt="Thumbnail of large photo">
</a>

8. Summary Checklist

1. Give the destination using href (bookmark, file path, URL, or mailto:).
2. Use id on the target element for same‑page bookmarks.
3. Choose an appropriate target value for the desired window behaviour.
4. When linking an image, place the <img> inside the <a> tags.
5. Test each link in a browser to confirm it opens as intended.

9. Common Pitfalls

• For local files, forgetting the correct relative path (e.g., using “/” at the start makes it an absolute path from the root of the web server).
• Omitting the protocol in an external URL (e.g., writing “www.example.com” instead of “https://www.example.com”).
• Using spaces in file names without URL‑encoding them (replace spaces with “%20” or avoid spaces altogether).
• Relying on target="_blank" without considering accessibility – always provide clear link text indicating that a new window/tab will open.

10. Practice Exercise

Create a simple three‑page mini‑website (index.html, about.html, contact.html) with the following features:

1. On index.html:

   • A link that jumps to a “Features” section further down the same page.
   • A link that opens about.html in the same window.
   • A link that opens contact.html in a new window named “contactWin”.
   • A mailto link that opens an e‑mail to info@school.edu with the subject “Inquiry”.

2. On about.html:

   • A link back to the top of index.html using a relative path.

3. On contact.html:

   • An image (use a placeholder src="placeholder.jpg") that links to a larger version of the image in a new tab.

Validate the HTML of each page and test all links.