Link, Gambar, dan Multimedia
Web disebut "web" karena halaman-halamannya saling terhubung melalui link. Ditambah dengan gambar dan multimedia, halaman web menjadi lebih hidup dan interaktif. Mari pelajari cara menambahkan link, gambar, audio, dan video ke halaman webmu.
🔗 Link (Anchor Tag)
Tag <a> (anchor) digunakan untuk membuat
hyperlink — teks yang bisa diklik untuk pindah ke halaman lain.
<!-- Link dasar -->
<a href="https://fullstacktalent.id">
Kunjungi Fullstack Talent
</a>
<!-- Buka di tab baru -->
<a href="https://google.com" target="_blank">
Buka Google (tab baru)
</a>
<!-- Link ke halaman lokal -->
<a href="about.html">Tentang Kami</a>
<a href="kontak.html">Hubungi Kami</a>Anatomi tag <a>:
📝 Atribut Penting <a>
href
Hypertext Reference
URL tujuan link. Bisa URL lengkap, path relatif, atau anchor
target
Target Window
_blank = tab
baru, _self = tab sama (default)
title
Tooltip
Teks yang muncul saat hover mouse di atas link
🗂️ Jenis-jenis Link
<!-- 1. Link Eksternal (website lain) -->
<a href="https://google.com">Google</a>
<!-- 2. Link Internal (halaman lokal) -->
<a href="kontak.html">Kontak</a>
<!-- 3. Anchor Link (ke bagian halaman yang sama) -->
<a href="#section-faq">Ke FAQ</a>
...
<h2 id="section-faq">FAQ</h2>
<!-- 4. Link Email -->
<a href="mailto:halo@fullstacktalent.id">Kirim Email</a>
<!-- 5. Link Telepon -->
<a href="tel:+628123456789">Hubungi Kami</a>
<!-- 6. Link Download -->
<a href="cv.pdf" download>Download CV</a>
🔒 Keamanan: Saat menggunakan target="_blank",
tambahkan rel="noopener noreferrer" untuk
mencegah halaman tujuan mengakses window asalmu.
🖼️ Gambar (Image)
Tag <img> digunakan untuk menampilkan gambar.
Ini adalah self-closing tag — tidak memerlukan tag penutup.
<!-- Gambar dasar -->
<img src="foto-profil.jpg"
alt="Foto profil saya">
<!-- Gambar dengan ukuran -->
<img src="logo.png"
alt="Logo Fullstack Talent"
width="200"
height="80">
<!-- Gambar dari internet -->
<img src="https://picsum.photos/400/300"
alt="Gambar random dari Picsum">📝 Atribut Penting <img>
src
(wajib)
Source — path atau URL gambar
alt
(wajib)
Alternative text — deskripsi gambar untuk screen reader & SEO
width
Lebar gambar dalam pixel
height
Tinggi gambar dalam pixel
🦮 Mengapa alt text penting?
- 1. Aksesibilitas — screen reader membacakan alt text untuk pengguna tunanetra
- 2. SEO — Google menggunakan alt text untuk memahami isi gambar
- 3. Fallback — ditampilkan jika gambar gagal dimuat
🖼️ Figure & Caption
Untuk gambar dengan keterangan, gunakan <figure>
dan <figcaption>:
<figure>
<img src="sunset.jpg"
alt="Sunset di pantai Bali">
<figcaption>
Foto sunset di Pantai Kuta, Bali — 2024
</figcaption>
</figure>
🔗 Gambar sebagai Link
Kamu bisa membuat gambar yang bisa diklik dengan memasukkan <img>
ke dalam <a>:
<a href="https://fullstacktalent.id">
<img src="logo.png"
alt="Logo Fullstack Talent - Klik untuk kunjungi">
</a>📁 Format Gambar untuk Web
| Format | Kegunaan | Ukuran |
|---|---|---|
.jpg |
Foto, gambar kompleks | Sedang |
.png |
Logo, ikon, gambar transparan | Besar |
.svg |
Logo vektor, ikon (bisa di-zoom tanpa pecah) | Kecil |
.webp |
Format modern — semua jenis gambar | Kecil |
.gif |
Animasi sederhana | Besar |
✅ Tips: Gunakan .webp untuk performa terbaik. Untuk logo, gunakan .svg. Selalu kompres gambar sebelum upload menggunakan tools seperti squoosh.app atau TinyPNG.
🎬 Video
Tag <video> digunakan untuk menampilkan video
langsung di halaman web:
<!-- Video dengan kontrol -->
<video controls width="640">
<source src="tutorial.mp4" type="video/mp4">
Browser kamu tidak mendukung tag video.
</video>
<!-- Video autoplay + muted + loop (seperti background) -->
<video autoplay muted loop playsinline>
<source src="bg-video.mp4" type="video/mp4">
</video>controls
Tampilkan play/pause, volume, progress bar
autoplay
Putar otomatis (harus pakai muted)
muted
Video tanpa suara (wajib untuk autoplay)
loop
Putar ulang otomatis
poster
Thumbnail sebelum video diputar
playsinline
Putar inline di mobile (tidak fullscreen)
▶️ Embed Video YouTube
Untuk video YouTube, gunakan tag <iframe>:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Tutorial HTML"
frameborder="0"
allowfullscreen>
</iframe>✅ Cara mudah: Buka video YouTube → klik Share → pilih Embed → copy kode <iframe> yang diberikan.
🎵 Audio
<audio controls>
<source src="musik.mp3" type="audio/mpeg">
<source src="musik.ogg" type="audio/ogg">
Browser kamu tidak mendukung tag audio.
</audio>💻 Contoh Lengkap: Halaman Portfolio
<h1>Portfolio Saya</h1>
<!-- Navigasi -->
<nav>
<a href="#projects">Projects</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<!-- Foto profil sebagai link -->
<a href="#about">
<img src="foto.jpg" alt="Foto saya"
width="150">
</a>
<!-- Project dengan gambar -->
<h2 id="projects">Projects</h2>
<figure>
<img src="project1.png"
alt="Screenshot website e-commerce">
<figcaption>Website E-Commerce</figcaption>
</figure>
<!-- Embed video demo -->
<h3>Video Demo</h3>
<video controls width="100%" poster="thumb.jpg">
<source src="demo.mp4" type="video/mp4">
</video>
<!-- Kontak -->
<h2 id="contact">Contact</h2>
<p>
📧 <a href="mailto:me@mail.com">me@mail.com</a><br>
📱 <a href="tel:+628123456789">+62 812-3456-789</a>
</p>📋 Ringkasan
<a href="..."> — membuat link. Gunakan
target="_blank" untuk buka di tab baru
<img src="..." alt="..."> — gambar.
Atribut alt wajib untuk aksesibilitas & SEO
<figure> + <figcaption> untuk gambar dengan
keterangan
<video>
dan <audio> untuk multimedia. Gunakan
<iframe> untuk embed YouTube