Module 4: Links, Images & Media

1. Links (The Anchor Tag)

Links are created using the <a> (anchor) tag. The most important attribute of the anchor tag is the href (Hypertext REFerence), which indicates the destination.

Absolute vs Relative Links

• Absolute Links: Point to an external website on the internet. They include the full protocol (e.g., https://).
• Relative Links: Point to another file within your own website folder.

<!-- Absolute Link -->
<a href="https://www.google.com" target="_blank">Visit Google</a>

<!-- Relative Link -->
<a href="about.html">About Us Page</a>

Note: The target="_blank" attribute tells the browser to open the link in a brand new tab.

Email and Telephone Links

You can create links that automatically open the user's default email client or prompt a phone call on mobile devices.

<a href="mailto:support@codecraft.com">Send us an email</a>
<a href="tel:+1234567890">Call us: (123) 456-7890</a>

2. Images & Responsive Art

The <img> Tag

The <img> tag is self-closing and requires two primary attributes: src (source) and alt (alternative text).

<img src="profile.jpg" alt="A photo of the author coding" width="400">

Crucial: The alt attribute is required for web accessibility (screen readers read it aloud) and is displayed if the image fails to load.

Responsive Images using <picture>

If you want to serve different images depending on screen size (e.g., a wide image for desktops and a tall image for phones), use the <picture> element.

<picture>
  <source media="(max-width: 600px)" srcset="img-mobile.jpg">
  <source media="(min-width: 601px)" srcset="img-desktop.jpg">
  <img src="img-fallback.jpg" alt="Responsive scenery">
</picture>

SVG (Scalable Vector Graphics)

SVGs are mathematical drawings defined in XML format. Unlike JPEGs or PNGs, SVGs never lose quality when scaled up. You can embed SVG code directly into HTML!

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="lightblue" />
</svg>

3. Multimedia: Audio & Video

HTML5 introduced native tags for playing audio and video without needing third-party plugins like Flash.

The <audio> Tag

Use the controls attribute to display the browser's default play/pause/volume interface.

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

The <video> Tag

The video tag works similarly but accepts a poster attribute (a thumbnail image shown before the video plays) and width/height attributes.

<video width="600" controls poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  
  <!-- Adding Subtitles (Captions) -->
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

YouTube Embedding (<iframe>)

Often, it's better to host large videos on platforms like YouTube and embed them in your site using an <iframe> (Inline Frame).

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>