HTML Dolum Çubuğu Nasıl Yapılır?
HTML dolum çubuğu yamak için iki farklı etiket kullanılabilir. Şimdi bunları tek tek inceleyelim.
Meter ve Progress Etiketleri
HTML meter ve progress etiketleri HTML5 ile gelen bir olayın ilerleme durumunu (sayısal ya da yüzdesel) göstermeyi sağlayan etiketlerdir. Şimdi bu iki etiketi tek tek inceleyelim.
Meter Etiketi
Bu etiketi bir örnek ile anlatalım. Diyelim ki okulda bir sınava girdiniz. Bu sınavın toplam süresi bellidir. Bu toplam süreyi bir çubuk ile temsil ederek geçen süreyi çubuğun üzerindeki dolum durumuna göre bakarak anlayabiliriz. Şimdi bunu bir örnek ile pekiştirelim.
<html> <head> <meta charset="utf-8"> <title>meter Etiketi</title> </head> <body> <p>Sevgili öğrenciler, sınav süreniz 120 dakikadır. Sınav sürenizin 75 dakikası bitmiş ve geriye sadece 45 dakikanız kalmıştır. Kalan süreyi ona göre kullanınız. <meter min="0" max="120" value="75">75</meter> </body> </html>
Yukarıdaki kodların ekran çıktısı aşağıdaki gibi görülecektir.
Yukarıdaki örnek incelendiğinde, <meter> etiketi ile sınavın toplam süresinin 0-120 dakika arası değerleri gösteren bir çubuk görülebilmektedir. Geçen sürenin bizim tarafımızdan verilen değerinin ise (value) 75 dakika olması ise çubuğun dolu kısmını göstermektedir. Eğer değer 120 olsaydı çubuğun tamamı dolu (yeşil) görünecekti. Görüldüğü gibi, <meter> etiketinin min özelliği minimum değeri, max özelliği maksimum değeri ve value özelliği ise anlık değerini göstermektedir. Eğer tarayıcınız <meter> etiketini desteklemiyorsa çubuk yerine <meter> etiketi içine koyulan metni, yani 135 değeri görülür. Buradaki value değerini javascript ile saniye cinsinden anlık olarak güncelleyebilir ve gerçek bir dolum çizelgesi gösterimi elde edebiliriz.
Progress Etiketi
<meter> etiketinin bir benzeri ise <progress> etiketidir. Bu etiket bize bir işlemin % kaç oranında bittiğini gösterir. Örneğin, bir dosyayı kopyalarken bu durumu gösteren bir progress etiketi kullanılabilir. Şimdi bunu bir örnek ile pekiştirelim.
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <P> Yüklemeye çalışılan dosyanın <progress min="0" max="100" value="75">%75</progress> dolum durumu. </p> </body> </html>
Yukarıdaki kodların ekran çıktısı aşağıdaki gibi görülecektir.
Buradaki value değerini javascript ile saniye cinsinden anlık olarak güncelleyebilir ve gerçek bir dolum çizelgesi gösterimi elde edebiliriz.
<progress> etiketi <meter> etiketinden ekran görüntüsü olarak biraz farklıdır. Eğer tarayıcı <progress> etiketini desteklemezse çubuk yerine <progress> etiket içindeki metin görüntülenir.
HTML dolum çubuğu konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/html/
Sosyal Medya Hesaplarımız
