WebTech Interaktif

HTML · Bab 3

Tautan dan Gambar

Membuat tautan dengan URL absolut, relatif, fragment, dan mailto, membuka tab baru dengan aman, serta memasang gambar beserta teks alternatif, ukuran, dan keterangan.

Tautan (hyperlink) adalah huruf “H” pada HTML: ia menghubungkan satu halaman dengan halaman lain. Gambar membuat katalog toko lebih hidup. Bab ini membahas keduanya, termasuk cara menulisnya agar tetap bisa dipakai oleh orang yang tidak melihat layar.

3.1 Elemen <a> dan Atribut href

Tautan ditulis dengan <a> (anchor). Tujuannya ada di atribut href:

<a href="https://developer.mozilla.org/">Dokumentasi web MDN</a>

Teks tautan harus menjelaskan tujuannya. “Lihat semua produk Stationery” jauh lebih jelas daripada “klik di sini”, terutama bagi pengguna pembaca layar yang sering membuka daftar semua tautan di sebuah halaman.

3.2 URL Absolut, Relatif, dan Fragment

URL absolut ditulis lengkap dengan skema dan nama domain, misalnya https://developer.mozilla.org/. Pakai URL absolut untuk menautkan situs lain.

URL relatif dihitung dari letak berkas yang sedang dibuka. Misalkan folder situs Smart Retail seperti ini:

smart-retail/
├── index.html
├── kontak.html
├── gambar/
│   └── keripik-singkong.jpg
└── kategori/
    └── stationery.html
Dari berkasKehref
index.htmlkontak.htmlkontak.html
index.htmlkategori/stationery.htmlkategori/stationery.html
kategori/stationery.htmlindex.html../index.html (.. berarti naik satu folder)

Alamat yang diawali /, misalnya /kontak.html, dihitung dari akar situs. Alamat seperti ini baru berfungsi bila halaman dibuka lewat server. Bila berkas dibuka langsung dari disk, / menunjuk akar drive komputer.

Fragment diawali # dan melompat ke elemen yang punya id sama di halaman yang sama, misalnya href="#kontak" menuju elemen id="kontak". Fragment juga bisa digabung dengan halaman lain: index.html#katalog.

Untuk email dan telepon tersedia skema mailto: dan tel::

<a href="mailto:[email protected]">Kirim email ke Smart Retail</a>
<a href="tel:+628000000000">Telepon toko</a>
HTML + JavaScript

🧪 Coba ubah: tambahkan <h2 id="camilan"> untuk Snacks & Confectionery, lalu tambahkan tautan ke #camilan di baris pertama.

3.3 Membuka Tab Baru: target="_blank" dan rel="noopener"

Atribut target="_blank" membuka tujuan di tab baru. Selalu pasangkan dengan rel="noopener":

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">Dokumentasi MDN (tab baru)</a>

Tanpa noopener, halaman di tab baru bisa mengakses tab asal lewat window.opener dan, misalnya, mengalihkannya ke halaman palsu. Standar HTML terbaru sudah menganggap target="_blank" bersifat noopener, tetapi menuliskannya tetap kebiasaan baik: maksudnya jelas bagi pembaca kode.

Pakai tab baru seperlunya saja, misalnya untuk tautan ke situs lain. Pengguna sebaiknya tahu bahwa tautan akan membuka tab baru, misalnya lewat keterangan “(tab baru)”.

3.4 Gambar dengan <img>

<img src="gambar/keripik-singkong.jpg" alt="Sebungkus keripik singkong renyah" width="400" height="300">
  • src: alamat gambar, mengikuti aturan URL yang sama dengan href.
  • alt: teks pengganti. Teks ini dibacakan pembaca layar dan tampil bila gambar gagal dimuat. Tulis isi gambarnya, bukan “gambar dari…”. Gambar yang hanya hiasan diberi alt="" (kosong) agar dilewati pembaca layar.
  • width dan height: ukuran asli gambar dalam piksel, tanpa satuan. Dengan dua atribut ini, browser menyiapkan ruang sebelum gambar selesai dimuat, sehingga isi halaman tidak meloncat.
  • <img> adalah void element, jadi tidak punya tag penutup.

Format yang umum: JPG untuk foto, PNG untuk gambar dengan latar transparan, SVG untuk logo dan ikon (tetap tajam di ukuran berapa pun), dan WebP untuk ukuran berkas yang lebih kecil.

HTML + JavaScript

🧪 Coba ubah: hapus atribut alt pada gambar kedua, lalu jalankan. Kini tidak ada petunjuk apa pun tentang isi gambar itu.

3.5 <figure> dan <figcaption>

Bila gambar perlu keterangan yang terlihat, bungkus dengan <figure> dan tulis keterangannya di <figcaption>:

HTML + JavaScript

alt dan figcaption punya peran berbeda. alt menggantikan gambar bagi yang tidak bisa melihatnya, sedangkan figcaption melengkapi gambar bagi semua pembaca. Keduanya boleh ada bersamaan dengan isi yang berbeda.

3.6 Ringkasan

  • <a href> membuat tautan. Teksnya harus menjelaskan tujuan.
  • URL absolut untuk situs lain, URL relatif untuk berkas di situs sendiri, #id untuk bagian halaman, serta mailto: dan tel: untuk email dan telepon.
  • target="_blank" selalu bersama rel="noopener".
  • <img> wajib punya alt. width dan height mencegah halaman meloncat saat dimuat.
  • <figure> dan <figcaption> untuk gambar yang perlu keterangan.