YÜKLENİYOR...

HTML Dersleri

  • Anasayfa
  • progress, meter, template, data, wbr etiketleri HTML'de Yükleniyor Çubuğu Nasıl Eklenir?
progress, meter, template, data, wbr etiketleri HTML'de Yükleniyor Çubuğu Nasıl Eklenir? - html, html dersleri, progress, progress etiketi, meter, meter etiketi, template, template etiketi, data, data etiketi, wbr, wbr etiketi, #13
Ahmet Aydın - 10/02/2021 - 41 Görüntülenme

progress, meter, template, data, wbr etiketleri HTML'de Yükleniyor Çubuğu Nasıl Eklenir?

Merhaba, bu makalede Sıfırdan HTML Derslerine devam ediyoruz ve HTML’de progress etiketi, meter etiketi, template etiketi, data etiketi, ve wbr etiketi yapılarını inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.

progress Etiketi

Bir işlemin hangi aşamada olduğunu göstermek için kullandığımız işlem çubuklarını temsil eden etikettir. value ve max nitelikleri ile birlikte kullanılmaktadır. progress etiketinin açma etiketinde bulunan progress ifadesinden sonra bir boşluk bırakalım ve value = “” max = “” yapılarını oluşturalım.

value Niteliği

progress etiketi ile gösterimi sağlanacak işlemin aktif değerini gösterir.

Örnek: value = “50”

max Niteliği

progress etiketi ile gösterimi sağlanacak işlemin alabileceği maksimum değeri ifade eden niteliktir.

Örnek: max = “100”

Yukarıdaki örneklerimizi oluşturup dosyamızı kaydedip web sayfamızı tarayıcıda açtığımızda bizim için %50’si tamamlanan işlemi gösteren işlem çubuğunun oluşturulduğunu gözlemleyebiliriz. progress etiketinin açma ve kapatma etiketleri arasında aktif değeri yazdırmak istediğimizde bu değer ekranda görünmeyecektir. Ziyaretçi veya kullanıcıya aktif değeri göstermek için progress etiketinin dışında bulunan bir bölümde yazdırma işlemi uygulanabilir.

meter Etiketi

Ölçü ve kapasite durumlarını temsil eden etikettir. Verilen değerlere göre ziyaretçi veya kullanıcıyı bilgilendirmemize yarar. min, max, low, high, optimum, value nitelikleri ile birlikte kullanılabilir. meter etiketinin açma etiketinde bulunan meter ifadesinden sonra bir boşluk bırakalım ve min = “” max = “” low = “” high = “” optimum = “” value = “” yapılarını oluşturalım.

min Niteliği

meter etiketi ile gösterimi sağlanacak ölçü veya kapasite durumunun alabileceği en küçük değeri temsil eden niteliktir.

Örnek: min = “0”

max Niteliği

meter etiketi ile gösterimi sağlanacak ölçü veya kapasite durumunun alabileceği en büyük değeri temsil eden etikettir.

max = “10”

low Niteliği

meter etiketi ile gösterimi sağlanacak ölçü veya kapasite durumunun alması gereken en düşük değeri temsil eden niteliktir. Bu değerden küçük aktif değerlerde meter etiketi ile oluşturulan çubukta ziyaretçiyi uyaran turuncu renk kullanılacaktır.

Örnek: low = “2”

high Niteliği

meter etiketi ile gösterimi sağlanacak ölçü veya kapasite durumunun alması gereken en yüksek değeri temsil eden niteliktir. Bu değerden yüksek aktif değerlerde meter etiketi ile oluşturulan çubukta ziyaretçiyi uyaran turuncu renk kullanılacaktır.

low ve high niteliklerine eşit veya bu aralıklarda olan aktif değerlerde meter etiketi ile oluşturulan çubukta ziyaretçiye geçerliliği temsil eden yeşil renk kullanılacaktır.

Örnek: high = “8”

optimum Niteliği

meter etiketi ile gösterimi sağlanacak ölçü veya kapasite durumunun alması gereken en ideal değeri temsil eden niteliktir.

Örnek: optimum = “5”

value Niteliği

meter etiketi ile gösterimi sağlanacak ölçü veya kapasite durumunun aktif değerini temsil eden niteliktir.

Örnek: value = “5”

Yukarıdaki örneği verdiğimiz değerler ile uygulayıp web sayfasını tarayıcıda açtığımızda ölçü veya kapasite durum çubuğunun yeşil bir renkte genişliğin yarısı kaplanmış şekilde geldiğini gözlemleyebiliriz.

value niteliğine verilen 5 değerini değiştirerek örneğin low niteliğine verilen değerden küçük, high niteliğine verilen değerden büyük değerler vererek değişiklikleri gözlemleyebilirsiniz.

template Etiketi

Arkaplanda oluşturulan ancak ziyaretçiye gösterilmeyen, ihtiyaç halinde Javascript ile kopyalanarak ziyaretçinin kullanımına sunulan alanları barındıran etikettir. template etiketinin açma ve kapatma etiketleri arasında herhangi bir metin yazabilir veya bir yapı oluşturabiliriz. Web sayfasını tarayıcıda açtığımızda template etiketinin açma ve kapatma etiketleri arasında bulunan metin veya yapının tarayıcıda gösterilmediğini gözlemleyebiliriz. Web sayfasında sağ tıklayıp “Sayfa Kaynağını Görüntüle” dediğimizde template etiketinin ilgili bölümde oluşturulduğunu ancak tarayıcıda gösterilmediğini net bir şekilde görebiliriz.

data Etiketi

Programatik olarak işleme gereği duyabileceğimiz verilerin tutulduğu etikettir. value niteliği ile birlikte kullanılabilir. data etiketinin açma etiketinde bulunan data ifadesinden sonra bir boşluk bırakalım ve value = “” yapısını oluşturalım.

value Niteliği

data etiketi sayesinde tutulmasını istediğimiz verinin bir programlama dili ile işleneceği değerini temsil eden niteliktir.

Örnek: value = “01”

data etiketinin açma ve kapatma etiketleri arasında value niteliğinde bulunan değerden farklı bir ifade yazabiliriz. Bu ifade ziyaretçi veya kullanıcıya gösterilecektir. Ancak biz bu veri ile programlama dilleri aracılığıyla işlem yapmak istediğimizde value niteliğinde bulunan değeri kullanacağız.

wbr Etiketi

Boşluk bulunmayan uzun bir ifadede belirli bir noktadan alt satıra geçilmesi için kullanılabilecek etikettir. İlgili ifadenin istenilen yerinde wbr etiketinin açma ve kapatma etiketleri arasında bir ifade yazarak bu ifadeden itibaren uzun ifadenin bir alt satıra geçmesini sağlayabiliriz.

Bu makalede Sıfırdan HTML Derslerine devam ettik ve HTML’de progress etiketi, meter etiketi, template etiketi, data etiketi, ve wbr etiketi yapılarını inceledik.

Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...