Sesi 3: HTML Multimedia Demo

by oktaviardi pratama

HTML

<header>
        <h1>🎨 Sesi 3: HTML Multimedia</h1>
        <p>Demo materi: Images, Video, Audio, dan Iframe.</p>
    </header>

    <!-- TOPIC 1: IMAGES (0:05 – 0:15) -->
    <section id="images">
        <h2>1. Images (Gambar)</h2>
        <div class="note">
            <strong>Best Practices:</strong><br>
            - Gunakan <code>alt</code> untuk aksesibilitas.<br>
            - Gunakan <code>loading="lazy"</code> agar halaman load lebih cepat.<br>
            - Tentukan <code>width</code> dan <code>height</code> untuk mencegah layout shift.
        </div>

        <!-- Contoh Gambar dengan atribut lengkap -->
        <img 
            src="https://picsum.photos/600/300" 
            alt="Pemandangan alam acak dari Picsum" 
            title="Hover me!" 
            width="600" 
            height="300"
            loading="lazy"
        >
        <p><em>Gambar di atas diambil dari absolute path (URL eksternal).</em></p>
    </section>

    <!-- TOPIC 2: VIDEO (0:15 – 0:25) -->
    <section id="video">
        <h2>2. Video</h2>
        <div class="note">
            <strong>Atribut Penting:</strong><br>
            - <code>controls</code>: Menampilkan tombol play/pause.<br>
            - <code>muted</code>: Wajib jika ingin menggunakan <code>autoplay</code>.<br>
            - <code>loop</code>: Video akan berulang terus menerus.<br>
            - Gunakan tag <code>&lt;source&gt;</code> untuk fallback format.
        </div>

        <video controls width="100%" poster="https://picsum.photos/600/300?grayscale">
            <!-- Sumber video contoh (Big Buck Bunny adalah open source movie) -->
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            Browser Anda tidak mendukung tag video.
        </video>
        
        <br>
        <p><strong>Contoh Autoplay (Muted & Loop):</strong></p>
        <video autoplay muted...

CSS

body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        section {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        h2 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
        }
        img, video, iframe {
            max-width: 100%;
            height: auto;
            display: block;
            margin-top: 10px;
        }
        .note {
            font-size: 0.9em;
            color: #666;
            background: #fff;
            padding: 10px;
            border-left: 4px solid #3498db;
        }

JavaScript

// index.html, multimedia/sample_sound.mp3