Chapter 2

Links, Images & Media

Anchors, targets, responsive images and embedded video/audio.

Links — The <a> Anchor Tag

<a href="https://www.utem.edu.my"
   target="_blank"
   rel="noopener noreferrer">Link Text</a>

Attribute	Purpose
`href`	Specifies the URL destination (Hypertext REFerence)
`target="_blank"`	Opens link in a new browser tab/window
`rel="noopener noreferrer"`	Security: prevents the new tab from accessing the opener window
`rel="nofollow"`	SEO: tells search engines not to follow this link
`download`	Triggers file download instead of navigation

Types of href values

Absolute URL: href="https://www.w3.org"
Relative URL: href="about.html" or href="../images/logo.png"
Email: href="mailto:info@example.com"
Phone: href="tel:+60123456789"
Fragment: href="#section-id"

2025: always add rel="noopener noreferrer" with target="_blank" to prevent tabnabbing attacks.

Target values & named anchors

_blank = new tab/window, _self = same tab (default), _parent = parent frame, _top = full window body.
Fragment links: add an id to the target element, then link with # + id, e.g. <a href="#contact">Go to Contact</a>.
Used for tables of contents and skip links. Skip navigation links (<a href="#main-content">) improve keyboard accessibility — add them as the very first element in <body>.

Images — The <img> Tag

<img src="photo.webp"
     alt="person working at a standing desk"
     width="800" height="600"
     loading="lazy" decoding="async">

Attribute	Notes
`src`	Required. Image path or URL (relative or absolute).
`alt`	Required. Alternative text for screen readers and broken images.
`width` / `height`	Prevents Cumulative Layout Shift (CLS) — always specify in pixels.
`loading="lazy"`	Browser defers loading off-screen images — improves page speed.
`decoding="async"`	Allows the browser to decode the image off the main thread.
`srcset`	Provides multiple image sources for different screen resolutions.

Use descriptive alt text: "apple on white plate", not "pic". Decorative images use alt="".

Responsive Images — <picture> & srcset

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <source srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
          sizes="(max-width: 600px) 100vw, 50vw">
  <img src="photo.jpg" alt="descriptive text" width="1200" height="800">
</picture>

AVIF — ~50% smaller than JPEG; WebP — ~30–35% smaller. Use as the first <source>.
srcset — list of image URLs with width descriptors (480w, 800w, 1200w).
sizes — tells the browser how wide the image will display at each breakpoint.
Fallback <img> — required; browsers use it if no <source> matches.

Media — <video> & <audio>

<video controls autoplay muted loop poster="thumb.jpg">
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.webm" type="video/webm">
  <track src="subs.vtt" kind="captions" default>
  Your browser doesn't support video.
</video>

Attribute	Meaning
`controls`	Show playback controls
`autoplay`	Start playing automatically (browsers may block unless `muted`)
`loop`	Repeat playback
`muted`	Start muted (needed for autoplay)
`poster`	Thumbnail image before play
`preload`	`none` \| `metadata` \| `auto`

Always provide multiple <source> formats (MP4 + WebM for video, MP3 + OGG for audio). Use <track> for captions/accessibility.

Activity — complete the code

Complete the code correctly to mark this lesson as complete automatically.

Complete the links and media markup.

<h1>My favourite site</h1>
<p>
  <a href="" target="_blank" rel="noopener noreferrer">Visit UTeM</a>
</p>
<img src="cat.jpg" ="A cute cat" width="120" height="120">
<video  poster="thumb.jpg">
  <source src="clip.mp4" type="video/mp4">
</video>