Chapter 6 – Media & Multi-Page Websites

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Types of Multimedia:

• Images: Photos, graphics, icons, logos
• Audio: Music, sound effects, podcasts, voice recordings
• Video: Movies, tutorials, presentations, live streams
• Animations: GIFs, CSS animations, SVG animations
• Interactive Media: Games, simulations, virtual reality

Basic Image Example:

Click to view code example

<img src="images/cat.jpg" alt="Image of a cat" width="300" height="200">

Live Example:

Why Use Multimedia?

• Enhances user engagement and experience
• Makes content more memorable and shareable
• Provides visual learning opportunities
• Supports different learning styles
• Increases time spent on your website

Browser Support

The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Modern Browser Features:

• HTML5 audio and video elements
• CSS3 animations and transitions
• WebGL for 3D graphics
• Canvas API for dynamic graphics
• WebRTC for real-time communication
• Service Workers for offline functionality

Cross-Browser Compatibility:

Always test your multimedia content across different browsers:

Best Practices for Browser Support:

• Provide multiple format options for media files
• Use fallbacks for unsupported features
• Test on multiple browsers and devices
• Consider using polyfills for older browsers
• Keep file sizes optimized for web delivery

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common File Extensions:

Choosing the Right Format:

• Web Standards: Use MP4 for video, MP3 for audio
• File Size: Balance quality vs. loading speed
• Compatibility: Ensure support across browsers
• Purpose: Different formats for different uses
• Compression: Lossy vs. lossless formats

Format Conversion:

You can convert media files using various online tools and software:

• Online converters (CloudConvert, Convertio)
• Desktop software (FFmpeg, HandBrake)
• Browser-based tools
• Media editing software (Adobe Premiere, Final Cut Pro)

Common Video Formats

There are many video formats out there. The MP4, WebM, and Ogg formats are supported by HTML. The MP4 format is recommended by YouTube.

Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.

Recommended Video Settings:

• Resolution: 1920x1080 (Full HD) or 1280x720 (HD)
• Frame Rate: 30 fps for web, 24-30 fps for professional
• Bitrate: 2-5 Mbps for HD, 5-10 Mbps for Full HD
• Codec: H.264 for MP4, VP8/VP9 for WebM
• Aspect Ratio: 16:9 for widescreen content

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

Recommended Audio Settings:

• Sample Rate: 44.1 kHz (CD quality) or 48 kHz (professional)
• Bit Depth: 16-bit for standard, 24-bit for professional
• Bitrate: 128-320 kbps for MP3, variable for other formats
• Channels: Stereo (2 channels) for most content
• Codec: MP3 for compatibility, AAC for better quality

HTML Media Elements

HTML allows you to embed audio, video, and other media directly into your web pages using the <audio>, <video>, and <iframe> elements.

Audio Example

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

Video Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

YouTube Embed Example

<iframe src="https://www.youtube.com/embed/y3OOaXrFy-Q" title="YouTube video" frameborder="0" allowfullscreen></iframe>

Creating Multi-Page Websites

Most websites consist of multiple pages connected through navigation. This section covers how to structure and link multiple HTML pages together.

Website Structure

A typical website structure includes:

• index.html: Homepage
• about.html: About page
• contact.html: Contact information
• services.html: Services offered
• css/: Folder for stylesheets
• images/: Folder for images
• js/: Folder for JavaScript files

Navigation Menu

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Internal Links

Use relative paths for linking between pages in the same website:

<a href="about.html">About Us</a>
<a href="pages/contact.html">Contact</a>
<a href="../index.html">Back to Home</a>

Consistent Layout

Use the same header, navigation, and footer on all pages:

<header>
  <h1>My Website</h1>
  <nav>
    <!-- Navigation menu -->
  </nav>
</header>

<main>
  <!-- Page content -->
</main>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

Best Practices

• Use consistent navigation across all pages
• Include a "Back to Top" link on long pages
• Use descriptive link text for accessibility
• Organize files in logical folders
• Test all links to ensure they work
• Use relative paths for internal links

Links to Previous Chapters

• Chapter 1
• Chapter 2
• Chapter 3
• Chapter 4
• Chapter 5