Penggunaan Fungsi Tag Meter HTML 5
Halo teman-teman, berjumpa lagi dengan saya. Bagaimana nih kabarnya, pastinya selalu ceria ya dan sehat selalu pastinya. Bagus di artikel kali ini kita akan belajar mengenai Penggunaan Fungsi Tag Meter HTML 5, khusus bikin teman-teman nih yang baru belajar web design supaya banyak refrensi bagi merancang layout situs nya lebih menarik.
Dan kita akan menggunakan tag <meter> yang di sediakan oleh HTML petunjuk ini dapat bagi mendesign hampir mirip seperti layout batre. Nah biar gak penasaran lihat di gambar di bawah ini
Mari kita praktekkan, seperti lazim teman-teman siapkan code editornya dan ketikkan script di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Tag Meter</title>
</head>
<body>
<div class=container>
<p>Pemakaian Tag lt;metergt; </p>
<meter></meter>
</div>
</body>
</html>
Kemudian save dengan nama index.html, lalu run di browsernya. Karenanya hasilnya seperti gambar di bawah ini
Nah teman-teman dapat lihat gambar di atas ini, hasil dari tag <meter> tetapi belum di berikan velue nya. Langkah berikutnya kita berikan value bagi mengisi dari kotak tersebut, coba teman-teman tambahkan value nya.
Kita lihat gambar di atas ini, saya berikan value=”10″ dan max=”20″ nya karenanya akan tampil seperti gambar berikutnya di bawah ini
Coba kita berikan value dan max yang berbeda, teman-teman ketikkan persis di gambar di bawah ini
Kemudian save dan refresh di browsernya
Teman-teman dapat bandingkan sendiri dari value yang kita berikan berbeda, tampilan pun pun berbeda tergantung dari value dan max yang diberikan. Langkah berikutnya kita atur css nya
<style type=text/css>
.container{width: 300px; margin: auto}
meter{width: 200px; height: 30px; }
</style>
Dan save lalu refresh browsernya
Bagus tag <meter> telah berhasil di praktekkan, ini pun dapat digunakan pastinya dengan tampilan yang hampir sama dengan hasil dari tag <meter>. Oke mungkin sekianlah dulu di artikel kali ini mengenai Penggunaan Fungsi Tag Meter HTML 5 kita berjumpa lagi di artikel berikutnya. Gampang-mudahan dapat menjadi tambahan pengetahuan mengenai tag-tag yang terdapat di HTML, Terima Kasih.
Semoga bermanfaat 🙂
NOTE : sebaiknya di buka atau di runing di Google Chrome dan Mozilla Firefox ,karena telah tak suport lagi kalau di buka di Internet Explorer, Edge 12, Safari 5 dan earlier versions
Baca pun artikel Cara Membuat Button Melayang Menggunakan CSS3
Sumber https://kursuswebsite.org
