Belajar HTML Part 4: Link, Gambar, Audio, dan Video dalam HTML

by

Pada Part 3, kamu sudah mempelajari tag teks dan formatting HTML seperti strong, em, span, dan code. Sekarang di Part 4, kita masuk ke elemen yang membuat website hidup dan interaktif, yaitu link, gambar, audio, dan video.

Materi ini penting karena:

  • Link adalah tulang punggung web
  • Gambar meningkatkan pengalaman pengguna
  • Audio dan video membuat konten lebih engaging

Tag a: Membuat Link di HTML

Tag a (anchor) digunakan untuk membuat link ke halaman lain, file, atau website lain. 

<a href="https://example.com">Kunjungi Website</a>

Atribut penting pada tag a:

  • href → tujuan link
  • target → cara membuka link

Target Blank

<a href="https://example.com" target="_blank">Buka Tab Baru</a>

<!-- Info: Click "Run Tab Browser" agar link bisa di akses -->

Best practice SEO:

  • Internal link → halaman sendiri
  • External link → beri target _blank

Link Internal dan Eksternal

Link Internal

<a href="example/link">Contoh Link Internal</a>

Link internal membantu:

  • SEO
  • Struktur website
  • Pengalaman pengguna

Link Eksternal

<a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>

<!-- Info: Click "Run Tab Browser" agar link bisa di akses. -->

Tag img: Menampilkan Gambar

Tag img digunakan untuk menampilkan gambar. Tag ini tidak memiliki penutup. 

<img src="example/gambar.jpg" alt="Deskripsi gambar" width="360">

Atribut wajib:

  • src → lokasi gambar
  • alt → deskripsi gambar (WAJIB SEO)

Alt Text dan SEO

Alt text digunakan oleh:

  • Google untuk memahami gambar
  • Screen reader
  • Jika gambar gagal dimuat

<img src="example/img/html-logo.png" alt="Logo HTML5">

Ukuran dan Optimasi Gambar

Tips penting:

  • Gunakan format webp
  • Kompres ukuran gambar
  • Jangan upload gambar terlalu besar

Contoh: 

<img src="example/img/dokumentasi-html.webp" alt="Dokumentasi HTML">

Tag audio

Tag audio digunakan untuk memutar suara. 

<audio controls>
  <source src="example/audio.mp3" type="audio/mpeg">
</audio>

Atribut penting:

  • controls → tombol play
  • autoplay (tidak disarankan)

Tag video

Tag video digunakan untuk menampilkan video langsung di halaman. 

<video width="480" controls>
  <source src="example/video.mp4" type="video/mp4">
</video>

Tips:

  • Gunakan controls
  • Jangan autoplay
  • Perhatikan ukuran file

Embed Video (YouTube)

Cara paling umum adalah menggunakan iframe. 

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

<!-- Info: Click "Run Tab Browser" agar video bisa diputar -->

Embed lebih ringan daripada upload video sendiri.

Kesalahan Umum Pemula

  • Lupa alt pada img
  • Semua link pakai target _blank
  • Upload video besar ke hosting
  • Autoplay audio/video

Ringkasan Part 4

  • Tag a untuk link
  • img wajib alt text
  • Audio dan video bikin konten interaktif
  • Optimasi media penting untuk SEO

Lanjutan Materi

Di Part 5, kita akan membahas:

  • Tabel HTML
  • Form HTML
  • Input, label, dan button

Sebelumnya: Part 3 → Tag Teks HTML | Lanjut: Part 5 → Table & Form HTML

Leave a Comment