Halo teman-teman bertemu lagi dalam artikel saya, kali ini kita akan belajar mengetahui fungsi tag figure dan tag figcaption di html5, tag figure dan tag figcaption ini termasuk tag baru yang dibawa oleh HTML5 masih reltif baru yang berhubungan dengan gambar. Tag <figure> berfungsi sebagai container bagi satu atau beberapa tag <img>. Sedangkan tag<figcaption> digunakan untuk membuat keterangan (caption) dari gambar, oke teman-teman simak terus ya.
untuku belajar mengetahui fungsi tag figure dan tag figcaption di html5 disini Sebagai contoh, jika saya memiliki artikel yang membahas tentang pembuatan layout facebook, gambar kodenya dan hasilnya layoutnya, yang masih berhubungan dengan teksnya ya teman-teman. Akan tetapi gambar tersebut tidak harus berada dalam posisi tertentu. Gambar kita bisa letakan di awal artikel, tengah, maupun akrhir artikel, dan tidak mempengaruhi fungsi dari gambar tersebut. Fungsi ini lebih mudah dipahami kalau kita masuk dalam contoh prakteknya.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar Figure dan Figcaption Element</title> </head> <body> <figure> <figcaption> Belajar cara membuat tampilan login facebook </figcaption> <img alt="kode tampilan facebook" src="kode.jpg" width="300"> </figure> <figure> <img alt="hasilnya dari kode facebook" src="hasil.jpg" width="300"> <figcaption> Hasilnya dari kode facebook </figcaption> </figure> </body> </html>
Jika teman-teman lihat saya membuat figure ada dua, dan mempunyai figcaption dan gambar yang berbeda. maka hasilnya akan jadi seperti berikut ini:
jika tema-teman lihat gambar diatas gamabar akan memuat di baris baru atau di bawahnya. karena sudah di tag figure berbeda. dan jika teman-teman pensaran saya mari kita buat dalam satu figure ada beberapa gambar. Perhatikan contoh berikut:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar Figure dan Figcaption Element</title> </head> <body> <figure> <img alt="kode tampilan facebook" src="kode.jpg" width="300"> <img alt="hasilnya dari kode facebook" src="hasil.jpg" width="300"> <img alt="ini Gobel haha" src=" gobel.jpg" width="300"> <figcaption> Pembuatan belajar webini, diambil dari <a href="http://www.scg.web.id/2014/04/Kursus-SEO-dan-Internet-Marketing-Terbaik-di-Jakarta.html">Dumetschool</a> </figcaption> </figure> </body> </html>
bagaimana teman-teman bisa teman-teman lihat ya, ada beberapa gambar yang berbeda di satu tag figure. dan hasilnya sperti berikut:
Dan seperti yang teman-teman lihat gambar di tampilkan menyamping ya, karena di dalam satu tag figure, bagaimana teman-teman mudah ya, saya kira cukup sekian untuk kita belajar mengetahui fungsi tag figure dan tag figcaption di HTML5, semoga bermanfaat dan sampai jumpa di artikel selanjutnya.
The post Fungsi Tag Figure dan Tag Figcaption di HTML5 appeared first on Kursus Website Terbaik.