Connecting Resources

Learn to create navigational links and embed visual content using HTML's fundamental media elements.

Hyperlinks

<!-- Internal link -->
<a href="#about">About</a>

<!-- External link -->
<a href="https://formactivities.com" target="_blank" rel="noreferrer">
  Visit Form Activities
</a>
→
About
Visit Form Activities (opens new tab)

Key attributes:

  • href - URL or fragment identifier
  • target="_blank" - New tab/window
  • rel="noreferrer" - Security best practice

Image Embedding

<!-- Local image -->
<img src="logo.png" alt="Company Logo">

<!-- Remote image -->
<img src="https://example.com/photo.jpg" alt="Scenic view" width="600">
→
[Displayed image]
[Alt text shown if image missing]

Essential attributes:

  • src - Image path/URL
  • alt - Accessibility description
  • width/height - Dimensions (optional)

Common Errors

<!-- Missing alt text -->
<img src="cat.jpg">

<!-- Broken link -->
<a href="about.html">About</a>  <!-- File missing -->

Practical Use: Photo Gallery

<nav>
  <a href="#home">Home</a>
  <a href="#gallery">Gallery</a>
</nav>

  <a href="https://picsum.photos/images" target="_blank">
    Lorem Picsum
  </a>
<img src="mountain.jpg" alt="Sunrise over Alps">
<img src="beach.jpg" alt="White sand beach">
→
[Navigation bar]
[External link]
[Two displayed images]

Your Task: Travel Blog

Create:

  1. Navigation menu with 3 internal links
  2. External "Webpage" link opening in new tab
  3. Two images with descriptive alt text
Section 1/5Hyperlinks

Hyperlinks

Key attributes:href - URL or fragment identifiertarget="_blank" - New tab/windowrel="noreferrer" - Security best practice

Connecting Resources

Learn to create navigational links and embed visual content using HTML's fundamental media elements.

Hyperlinks

<!-- Internal link -->
<a href="#about">About</a>

<!-- External link -->
<a href="https://formactivities.com" target="_blank" rel="noreferrer">
  Visit Form Activities
</a>
→
About
Visit Form Activities (opens new tab)

Key attributes:

  • href - URL or fragment identifier
  • target="_blank" - New tab/window
  • rel="noreferrer" - Security best practice

HTML Editor

Preview