Link, Gambar, Audio & Video dalam HTML

Website tanpa link? Gak kebayang kan. Dan tanpa gambar? Pasti bosen banget liatnya. Artikel ini bahas semua elemen media yang bikin website Anda hidup.

1. Hyperlink — Jantungnya Web

Tanpa link, internet bukan “web” — cuma kumpulan dokumen yang gak saling nyambung. Link itu yang bikin semuanya terhubung.

Syntax Dasar

<a href="https://google.com">Kunjungi Google</a>

Atribut href itu tujuannya. Klik teks “Kunjungi Google” → lari ke Google.

Jenis Link

<!-- Link eksternal -->
<a href="https://google.com">Google</a>

<!-- Link internal (halaman lain di website yang sama) -->
<a href="/about.html">Tentang Kami</a>

<!-- Link ke email -->
<a href="mailto:[email protected]">Email Saya</a>

<!-- Link ke telepon -->
<a href="tel:+6281234567890">Hubungi Saya</a>

Buka di Tab Baru

<a href="https://google.com" target="_blank">Google (tab baru)</a>

Anchor — Link ke Bagian Tertentu

<!-- Buat anchor -->
<h2 id="bagian-1">Bagian 1</h2>

<!-- Link ke anchor -->
<a href="#bagian-1">Ke Bagian 1</a>

Ini yang dipake buat “Back to Top” atau navigasi dalam halaman yang panjang.

2. Gambar — Bikin Website Menarik

<img src="kucing.jpg" alt="Kucing lucu">

Tag <img> itu self-closing — gak perlu tag penutup. Cukup > aja.

Atribut Wajib

src — Sumber gambar (path file)

<img src="images/kucing.jpg" alt="Kucing">
<img src="https://example.com/kucing.jpg" alt="Kucing">

alt — Teks alternatif (WAJIB!)

<!-- ✅ Bener -->
<img src="kucing.jpg" alt="Kucing lucu sedang tidur">

<!-- ❌ Salah -->
<img src="kucing.jpg" alt="">

alt itu penting banget buat:

Screen reader — bantu buta netra
Gambar gagal load — masih ada teks
SEO — Google ngerti konten gambar

Ukuran Gambar

<!-- Ukuran tetap -->
<img src="foto.jpg" alt="Foto" width="300" height="200">

<!-- Responsif (recommended) -->
<img src="foto.jpg" alt="Foto" style="max-width: 100%; height: auto;">

max-width: 100% bikin gambar responsif — gak akan melebihi kontainer. Ini yang paling sering dipake.

3. Gambar Sebagai Link

<a href="https://google.com">
    <img src="logo-google.png" alt="Logo Google">
</a>

Klik gambar → lari ke URL tujuan. Sering dipake buat logo header.

4. Figur & Caption — Kasih Konteks

<figure>
    <img src="kucing.jpg" alt="Kucing tidur">
    <figcaption>Kucing sedang tidur nyenyak</figcaption>
</figure>

<figure> dan <figcaption> kasih deskripsi soal gambar. Bagus buat SEO dan aksesibilitas.

5. Audio — Putar Musik

<audio src="lagu.mp3" controls>
    Browser Anda tidak mendukung audio.
</audio>

Atribut penting:

<audio 
    src="lagu.mp3" 
    controls 
    autoplay 
    loop 
    muted>
    Browser tidak mendukung audio.
</audio>

Atribut	Fungsi
`controls`	Munculin tombol play/pause
`autoplay`	Langsung putar saat load
`loop`	Ulangi terus
`muted`	Default tanpa suara

Multiple Source (Browser Beda Format)

<audio controls>
    <source src="lagu.mp3" type="audio/mpeg">
    <source src="lagu.ogg" type="audio/ogg">
    Browser tidak mendukung audio.
</audio>

Browser pilih format yang didukung.

6. Video — Putar Video

<video src="video.mp4" controls width="640">
    Browser tidak mendukung video.
</video>

Atribut Video

<video 
    src="video.mp4" 
    controls 
    width="640" 
    height="360" 
    poster="thumbnail.jpg">
    Browser tidak mendukung video.
</video>

poster itu gambar yang muncul sebelum video diputar — kayak thumbnail.

7. Embed YouTube

YouTube gak bisa diputar langsung dari file. Harus pake iframe:

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen>
</iframe>

Ganti VIDEO_ID dengan ID video YouTube. Contoh: dQw4w9WgXcQ.

8. Gambar Responsive — Untuk Semua Ukuran Layar

<!-- srcset: browser pilih yang sesuai -->
<img 
    src="foto-small.jpg" 
    srcset="
        foto-small.jpg 480w,
        foto-medium.jpg 800w,
        foto-large.jpg 1200w
    "
    sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
    alt="Foto responsive"
>

<!-- picture: lebih fleksibel -->
<picture>
    <source media="(min-width: 800px)" srcset="foto-large.jpg">
    <source media="(min-width: 400px)" srcset="foto-medium.jpg">
    <img src="foto-small.jpg" alt="Foto responsive">
</picture>

Ini bikin website Anda loading lebih cepat di HP karena gak download gambar gede.

9. Contoh Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media dalam HTML</title>
</head>
<body>
    <h1>Media dalam HTML</h1>
    
    <!-- Link -->
    <h2>Hyperlink</h2>
    <a href="https://google.com" target="_blank">Google</a>
    <a href="#section-2">Ke Bagian 2</a>
    
    <!-- Gambar -->
    <h2>Gambar</h2>
    <img src="kucing.jpg" alt="Kucing lucu" style="max-width: 100%;">
    
    <figure>
        <img src="kucing.jpg" alt="Kucing tidur">
        <figcaption>Kucing sedang tidur</figcaption>
    </figure>
    
    <!-- Audio -->
    <h2>Audio</h2>
    <audio controls>
        <source src="lagu.mp3" type="audio/mpeg">
        Browser tidak mendukung audio.
    </audio>
    
    <!-- Video -->
    <h2>Video</h2>
    <video controls width="640" poster="thumbnail.jpg">
        <source src="video.mp4" type="video/mp4">
        Browser tidak mendukung video.
    </video>
    
    <!-- YouTube -->
    <h2>YouTube</h2>
    <iframe 
        width="560" 
        height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        frameborder="0" 
        allowfullscreen>
    </iframe>
    
    <div id="section-2">
        <h2>Bagian 2</h2>
        <p>Ini bagian kedua.</p>
    </div>
</body>
</html>

10. Recap

Elemen	Fungsi	Tipe
`<a>`	Hyperlink	Inline
`<img>`	Gambar	Inline
`<figure>`	Kontainer gambar	Block
`<figcaption>`	Caption gambar	Block
`<audio>`	Audio player	Block
`<video>`	Video player	Block
`<source>`	Sumber media	Internal
`<picture>`	Gambar responsive	Internal
`<iframe>`	Embed konten	Block

Penutup

Link, gambar, audio, dan video bikin website jadi hidup. Tanpa media, website cuma halaman teks yang membosankan.

Yang perlu diingat:

Selalu kasih alt di gambar
Pilih format media yang kompatibel
Pakai srcset buat gambar responsive

Di artikel selanjutnya, kita bahas List — cara bikin daftar terurut, tidak terurut, dan nested lists.