Pertemuan 5-6: Tautan, Gambar, & Media

Menghubungkan Halaman dan Menampilkan Konten Visual

Pengertian

Tautan (Links), yang dibuat dengan tag <a>, adalah inti dari web. Mereka memungkinkan pengguna untuk bernavigasi dari satu dokumen ke dokumen lain. Gambar (Images), yang disisipkan dengan tag <img>, sangat penting untuk membuat halaman web menjadi menarik secara visual. Memahami cara kerja File Paths (jalur file) adalah kunci agar gambar dan link lokal dapat berfungsi dengan benar.

Analogi

Analogi: Buku dan Album Foto
Sebuah tautan (link) adalah seperti nomor halaman dalam daftar isi sebuah buku. Ia memberitahu Anda cara untuk "melompat" ke bab atau halaman lain. Sebuah gambar adalah seperti foto yang Anda tempelkan di halaman buku catatan. Atribut src adalah perintah untuk mengambil foto dari album (folder) dan menempelkannya di sana.

Contoh Kode & Hasil

1. Link Absolut ke Situs Lain

Kunjungi Wikipedia
<a href="https://www.wikipedia.org">Kunjungi Wikipedia</a>

2. Link Relatif ke Halaman Lain di Folder yang Sama

Pergi ke Halaman Kontak
<a href="kontak.html">Pergi ke Halaman Kontak</a>

3. Gambar dari Folder 'images'

Logo Perusahaan
<img src="images/logo.png" alt="Logo Perusahaan">

4. Gambar yang Juga Berfungsi Sebagai Link

Tombol Gambar
<a href="beranda.html">
  <img src="tombol-beranda.png" alt="Kembali ke Beranda">
</a>

5. Menambahkan Favicon

Favicon adalah ikon kecil yang muncul di tab browser. Didefinisikan di dalam tag <head>.

<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Latihan Mandiri

Tugas: Membuat Halaman Portofolio Sederhana

  1. Buat dua file: index.html dan galeri.html.
  2. Di index.html, buat judul dengan nama Anda dan paragraf deskripsi diri.
  3. Di bawah deskripsi, sisipkan foto diri Anda (gunakan placeholder jika perlu).
  4. Buat sebuah link di index.html yang bertuliskan "Lihat Galeri Saya" dan arahkan ke file galeri.html.
  5. Di galeri.html, tampilkan 3 gambar hasil karya Anda dan berikan link untuk kembali ke index.html.

Kesimpulan

Tautan dan gambar adalah elemen yang mengubah dokumen teks biasa menjadi pengalaman web yang kaya dan terhubung. Menguasai cara menggunakan tag <a> dan <img>, serta memahami bagaimana jalur file (file paths) bekerja, adalah keterampilan fundamental untuk membangun website yang fungsional dan menarik secara visual.