HTML merupakan singkatan dari Hypertext Markup Language yaitu sebuah bahasa pemrograman standar yang digunakan untuk membuat halam sebuah website, sehingga halaman tersebut dapat diakases oleh user dengan menggunakan internet. Pada html terdapat banyak tag-tag yang dapat membantu kita dalam pembuatan sebuah website pada tutorial kali ini kita akan membahas tentang Cara Membuat Skala Dengan Menggunakan HTML 5 untuk membuat skala dengan menggunakan HTML ada kita bisa menggunakan tag <progress></progress> dan <meter></meter>.

Skala ini sering kita jumpai pada webite-webite seperti, kita akan mengupload sebuah file maka akan munculul berapa presen proses yang telah berhasil di upload, dan skala tersebut juga sering kita temui pada saat kita memasukan password maka akan muncul range atau skala password yang kita masukan adalah strong, medium, ataupun low.

Untuk pengecekan password yang kita buat apakah strong, medium, ataupun low, teman-teman bisa lihat pada  http://www.passwordmeter.com/.

biar teman-teman lebih paham tentang Cara Membuat Skala Dengan Menggunakan HTML 5 kita akan membuat sebuah contoh sederhana seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>skala</title>
</head>
<body>
	<progress value="56" max="100"></progress>

</body>
</html>

Ket :

Pada script diatas dapat kita lihat bahwa kita memasukan value 56 (dalam hitungan persen), dengan nilai maksimalnya yaitu 100% jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Membuat Skala Dengan Menggunakan HTML 5

Berikutnya kita akan membuat skala dengan menggunakan tag meter untuk scriptnya seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>skala</title>
</head>
<body>

	<progress value="56" max="100"></progress>

	<!-- skala dengan menggunakan min max -->
	<meter value="6" min="0" max="10"></meter> Nilai min 0 dan max 10<br><br>


	<!-- skala high dan low -->
	<meter low="60" high="80" max="100" value="100"></meter>A <br>
	<meter low="60" high="80" max="100" value="84"></meter>B <br>
	<meter low="60" high="80" max="100" value="70"></meter>C <br>
	<meter low="60" high="80" max="100" value="50"></meter>D

</body>
</html>

Ket :

Pada script diatas dapat kita lihat bahwa terdapat dua perbedaan pada contoh yang pertama kita memasukan skala dengan menggunakan nilai minimal dan nilai maksimal, sedangkan pada contoh yang kedua kita dapat menentukan high dan low dari skala yang kita buat, jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Membuat Skala Dengan Menggunakan HTML 5

Oke teman-teman itulah pembahasan kita pada tutorial kali ini tentang Cara Membuat Skala Dengan Menggunakan HTML 5.

Semoga bermanfaat.

Terima kasih.