Tuesday, October 28, 2014

Tag figure dan figcaption

Tag <figure> digunakan untuk mewakilkan gambar, ilustrasi, diagram, potongan kode, skema atau sejenisnya. Untuk menjelaskan apa maksud objek yang berada di dalam tag figure, digunakan tag <figcaption>. Tag <figcaption> bersifat opsional, jika gambar, ilustrasi, potongan kode atau sejenisnya maknanya sudah jelas, maka tak perlu ada teks keterangan yang dibuat dengan tag figcaption.

Contoh 1; <figure> tanpa figcaption dengan tag img (menampilkan gambar/foto) : figure.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <img src="lake_toba.jpg" alt="Danau Toba" />
    </figure>
    </body>
</html>

Note: Gambar "lake_toba.jpg" bisa diganti dengan gambar apapun yang Anda mau.

Contoh 2, figure dengan tag figcaption: figure2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <img src="lake_toba.jpg" alt="Danau Toba" />
        <figcaption>Ini adalah Danau Toba, danau vulkanik dengan ukuran panjang 100 kilometer dan lebar 30 kilometer yang terletak di Provinsi Sumatera Utara, Indonesia.
        </figcaption>
    </figure>
    </body>
</html>

Tag figure caption juga bisa dalam menjelaskan potongan kode, misalnya kode html yang di bawahnya terdapat penjelasan tentangnya, sehingga pengunjung web lebih mudah memahaminya.

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <figcaption>Contoh potongan kode penggunaan tag figure dan figcaption: </figcaption>
            <br />
<code>
&lt;figure&gt;<br />
&lt;img src="lake_toba.jpg" alt="Danau Toba" /&gt;<br />
&lt;figcaption&gt;Ini adalah Danau Toba, danau vulkanik
dengan ukuran panjang 100 kilometer dan lebar 30 kilometer
yang terletak di Provinsi Sumatera Utara, Indonesia.<br />
&lt;/figcaption&gt;<br />
&lt;/figure&gt;
</code>
</figure>
    </body>
</html>

Output:


Referensi tulisan:
  1. <figure>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 29 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. <figcaption>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 29 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  3. Danau Toba; ditulis oleh: Kontributor Wikipedia, id.wikipedia.org, diakses 29 Oktober 2014.
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)