Membuat Judul Gambar Dengan Tag Figcaption HTML

Dasar-dasar tutorial HTML dalam kesempatan kali ini akan membahas tentang cara penggunaan tag <figure> dan tag <figcaption>, dengan demikian kita akan memahami apa fungsi dari kedua tag tersebut.

Penggunaan tag <figure> dan tag <figcaption> mulai diterapkan pada versi HTML 5.  Pada versi sebelumnya (dibawah versi HTML 5), jika kita berkeinginan untuk memberikan keterangan pada sebuah gambar maka dapat dilakukan dengan menambahkan sebuah paragraf  atau text seperti heading. Dengan demikian tidak terdapat cara menambahkan keterangan gambar secara resmi (secara semantik).

Namun dengan kemunculan tag <figure> pada HTML5,  tag tersebut mengandung elemen opsional berupa : tag<figcaption> yang berfungsi dalam memberi keterangan terhadap sebuah gambar atau bisa dikatakan judul dari sebuah gambar.

Contoh Penggunaan Tag <figcaption>

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

judul gambar dengan tag figcaption

Dari Gambar diatas, terdapat sebuah gambar grafik yang dibagian bawahnya mengandung judul “Gambar.1 Statistik Grafik Penggunaan Browser”.  Nah sekarang bagaimana output seperti diatas jika diimplementasikan dalam kode HTML dengan menggunakan tag <figcaption>. Silahkan perhatikan kode HTML dibawah ini :

<!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 menempatkan sebuah gambar berada diposisi tengah. Seandainya anda menginginkan gambar berada dikiri atau dikanan, cukup rubah “center” menjadi “left” atau “right”.
  • Kode <img src=”grafik.png”> akan memanggil gambar yang bernama grafik.png
  • Kode <figcaption align =”center”> berfungsi dalam menambahkan Judul gambar ditengah. Jika menginginkan posisi kiri atau kanan, tinggal rubah menjadi “left” atau “right”.

Leave a Reply

Your email address will not be published. Required fields are marked *