Lecture 6 Demo - HTML Images & Hyperlinks

[Classroom Tip] Interact with each section to explore how image attributes work, the four types of hyperlinks, and how to build an accessible navigation menu.

1) Image Attributes Explorer

Toggle checkboxes to add/remove attributes and see how the <img> element changes.

Attribute Toggles:

src — image source path alt — alternative text width="300" loading="lazy" title="tooltip"

Generated HTML:

<img src="mountain.jpg" alt="Mountain at sunset" />

Browser Preview:

🏔️ alt: Mountain at sunset

Image renders with alt visible on hover.

2) The Four Hyperlink Types

1. External Link

<a href="https://www.w3.org"
   target="_blank"
   rel="noopener">
  Visit W3C
</a>

Navigates to another website in a new tab. rel="noopener" prevents security vulnerabilities.

2. Internal Link

<a href="about.html">
  About Page
</a>

Navigates to another page within the same website. Use relative paths.

3. Anchor Link (Jump Link)

<!-- Target element: -->
<h2 id="section-2">Section 2</h2>
<!-- Link to it: -->
<a href="#section-2">Go to Section 2</a>

Jumps to an element with a matching id on the same page. Used in table of contents.

4. Email & Tel Links

<a href="mailto:info@example.com">
  Email us
</a>
<a href="tel:+15551234567">
  Call us
</a>

Opens default email client or phone dialer. mailto: and tel: are URL schemes.

3) Link Simulator

Click each link type to see what would happen (no actual navigation).

🌐 External Link 📄 Internal Link ⚓ Anchor Link ✉️ Email Link 📞 Tel Link

Click a link above to see what would happen...

4) Building a <nav> Menu

A semantic navigation bar uses <nav> + <ul> + <a>. Type pages below to build one live.

Visual Result:

Generated HTML:

<nav>
  <a href="index.html">Home</a>
  <a href="lectures.html">Lectures</a>
  <a href="resources.html">Resources</a>
</nav>

5) Image as a Hyperlink

Wrapping an <img> inside an <a> makes the image clickable.

<a href="https://www.w3.org" target="_blank">
  <img src="w3c-logo.png"
       alt="Visit W3C website"
       width="120" />
</a>

Result (simulated):

W3C

alt: Visit W3C website

The entire image is clickable. Always include alt text describing the link destination.