Foundations of Web Design

Class Exercise 4:

Embedding Multimedia in HTML

Goal:

Embed an image, a video, and an audio file into an HTML page.

Instructions:

Download starter_code04.zip:

Create a New HTML File:

Basic HTML Structure:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Embedding Multimedia</title>
    </head>
    <body>
        <h1>Multimedia Content</h1>
        
        <h2>Image</h2>
        <img src="https://via.placeholder.com/150" alt="Placeholder Image">

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

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

Viewing Your Web Page:

  1. Run Your Project with Live Server:
    • Right-click on your “CE04.html” file and select “Open with Live Server”.
    • This will open your web page in your default browser.
    • You should now see your embedded content.
  2. Run Your Project with Live Preview:
    • Right-click on your “CE04.html” file and select “Show Preview”.
    • This will open your web page in a tab in VS Code next to your HTML file.