--> Skip to main content

Tutorial HTML: Menambahkan Keterangan Gambar

Sesi tutorial dasar-dasar HTML kali ini akan membahas penggunaan tag <figure> dan tag <figcaption>.

Sebelum HTML5 tidak ada cara untuk menambahkan keterangan untuk gambar secara semantik melalui HTML. Jika Anda ingin menambahkan keterangan, maka kita harus tambahkan sebuah paragraf atau sesuatu yang berupa text seperti heading.

Untuk itu pada HTML5, telah ditambahkan tag <figure> dimana tag tersebut memiliki elemen opsional yaitu : <figcaption> yang berfungsi sebagai judul atau memberi keterangan terhadap sebuah gambar.


Contoh Menambahkan Judul Gambar dengan kode HTML

Disini kita akan membuat sebuah konten web yang mengandung gambar dan keterangan gambar seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Gambar.1

Perhatikan Gambar.1, dimana ada keterangan atau judul dibawah gambar grafik. Kode HTML untuk membuat judul gambar seperti Gambar.1 diatas :
<!DOCTYPE html>
<html>
<body>

<p>Berbicara tentang penyajian data dalam bentuk visual, cara paling mudah untuk membuat orang lain mengerti data kita adalah penyajian dalam bentuk grafik / diagram.</p>

<p>Studi Kasus yang diangkat dalam tutorial kali ini masih sama seperti  tutorial sebelumnya. Namun disini hanya menambahkan teknik parsing data dengan JSON. Berikut ini adalah target keluaran yang akan kita bahas dalam tutorial kali ini seperti yang ditunjukkan oleh Gambar.1 dibawah ini :</p>

<figure align="center" >
  <img src="grafik.png" alt="Statistik Grafik Penggunaan Browser" width="704" height="328">
  <figcaption align="center">Gambar.1.Statistik Grafik Penggunaan Browser </figcaption>
</figure>
</body>
</html>
Keterangan:

  • Kode <figure align="center"> akan mengblok gambar untuk berada ditengah. Jika menginginkan gambar berada dikiri atau dikanan, tinggal dirubah "center" menjadi "left" atau "right".
  • Kode <img src="grafik.png"> akan mengload gambar bernama grafik.png
  • Kode <figcaption align ="center"> akan menambahkan Judul gambar ditengah. Jika menginginkan posisi kiri atau kanan, tinggal rubah menjadi "left" atau "right".
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar