Web Tasarım - Grafik Tasarım

Diğer Elemanlar

Yukarıda anlatılan yapısal elemanlar dışında HTML5 yapısı içerisinde duyurulan diğer işlevsel elemanlara bakalım.

<mark>

Metni işaretlemek için kullanılır. Bu elemanı kullanarak okuyucunun dikkatini çekecek vurgulu metinler oluşturabilir ya da metnin referans olarak tanımlanmasını sağlayabilirsiniz. Satır içi bir elemandır.

Özellikleri: [Standart Özellikler]

Örneğin;

<p>

Metni

<mark>

işaretlemek

</p>

</mark>için kullanılır.

CSS kodları ile mark elemanı içerisindeki metne stil vererek okuyucunun dikkatini bu kelimeye çekebilirsiniz.

Örnek:

<p>

</p>

Bu durumun çözümü için JavaScript yardımıyla belirtilen elemanları programatik olarak oluşturmamız yeterli olacaktır.

<mark> IE9</mark>’un tanımadığı diğer yeni elemanları da bu şekilde oluşturup <mark> IE9</mark> alt sürümlerindeortaya çıkan bu problemi çözebilirsiniz.

Sayfada yapılacak aramalarda bulunacak aynı metin parçalarının hepsini bu etiket içerisine alıp, önceden bir stil tanımlaması yapabilirsiniz.

<meter>

Belirlediğiniz bir aralık içinde bir değeri (ölçümü) kullanıcıya görsel olarak göstermek için kullanılır. Bu eleman bir ilerleme çubuğu (progress bar) olarak kullanılmamalıdır.

Özellikleri: [Standart Özellikler] ile form, high, low, max, min, optimum, value

  • form: meter elemanının bir form elemanı ile ilişkili olup olmadığını tanımlamak için kullanılır. Bu özelliğe elemanın ilişkili olduğu form elemanının id özelliğine atanan değer yazılır. Aralarında boşluk bırakmak kaydıyla birden fazla form id değeri yazılabilir.
  • high: min, max özellikleri ile tanımlanan aralıkta yüksek olarak kabul edilecek değeri tanımlar. Belirtilmezse ya da high özelliğine atanan değer max özelliğine atanan değerden yüksek ise max özelliğine atanan değer yüksek değer olarak kabul edilir. low ve optimal özellikleri ile beraber kullanılır.
  • low: min, max özellikleri ile tanımlanan aralıkta düşük olarak kabul edilecek değeri tanımlar. Belirtilmezse ya da low özelliğine atanan değer min özelliğine atanan değerden düşükse, min özelliğine atanan değer, düşük değer olarak kabul edilir. high ve optimal özellikleri ile beraber kullanılır.
  • max, min: Aralığın en düşük ve en yüksek değerlerini tanımlamak için kullanılırlar. Ölçüm, (sonuçta kullanıcıya görsel olarak sunulacak değer) bu değerler arasındadır. Eğer bu özellikler tanımlanmazsa varsayılan olarak max=1.0, min=0 değerlerini alır.
  • optimum: min, max değerleri arasında en uygun değer tanımlaması yapmak için kullanılır. Bu değer high değerinden büyük ise yüksek değerler, low değerinden küçük ise küçük değerler uygun değerler olarak kabul edilebilir. Belirtilmezse min, max değerleri arasındaki orta nokta optimum değer olarak kabul edilir.
  • value (Gerekli): Ölçüm değerini (sonuçta kullanıcıya görsel olarak sunulacak değer) tanımlamak için kullanılır. Bu değer min, max değerleri arasında olmalıdır. Bu özelliğe değer atanmazsa varsayılan değer 0 olur. min değerden daha düşük olursa value=min, max değerden daha büyük olursa value=max olur.

Aşağıdaki örnekte value değeri low (aralıkta düşük olarak kabul edilen değer) değerinden daha küçüktür.

<p>

Ölçülen Açı:

<meter min=”0” max=”180” low=”30” optimum=”90” high=”120”

value=”25”></meter>

</p>

şimdi de value değerine high (aralıkta yüksek olarak kabul edilen değer) değerinden daha büyük bir değer verelim.

<p>

Ölçülen Açı:

<meter min=”0” max=”180” low=”30” optimum=”90” high=”120”

value=”130”></meter>

</p>

Dikkat ederseniz her iki durumda da ilerleme çubuğunun dolgu rengi aynı olacaktır. Çünkü değerlerden birincisi düşük olarak kabul edilen değerden (low) daha küçük diğeri ise büyük olarak kabul edilen değerden (high) daha büyüktür.

value özelliğine low, high değerlerinin arasında bir değer atanırsa, ilerleme çubuğunun dolgu rengi yukarıdaki durumlardan farklı olacaktır (yeşil olur).

<p>

Ölçülen Açı:

<meter min=”0” max=”180” low=”30” optimum=”90” high=”120”

value=”115”></meter>

</p>

<command>

Sayfada görüntülenen (Örneğin; menu elemanı içerisinde) ya da görüntülenmeyen bir komut düğmesi tanımlamak için kullanılır. Type özelliğini kullanarak bu elemanı checkbox ya da radio elemanlarına dönüştürebilirsiniz. Bu elemana şu an için tarayıcı desteği bulunmamaktadır.

Özellikleri: [Standart Özellikler] ve checked, disabled, icon, label, radiogroup,

type

<progress>

Bir görevin, işlemin tamamlanma/ilerleme sürecini kullanıcıya göstermek için yani ilerleme çubuğu oluşturmak için kullanılır.

Özellikleri: [Standart Özellikler] ve  max,value

  • max: Görevin ya da işlemin bitirilme durumunu tanımlayan değer.
  • value: Görevin ya da işlemin şu andaki durumunu gösteren değer.

Örnek:

<p>

</p>

İşlemin Durumu:

<progress value=”78” max=”100”>

</progress>

<tıme>

Zaman ya da tarih ya da her ikisini birden içeren tanımlamalar yapmak için kullanılır.

Özellikleri: [Standart Özellikler] ve datetime, pubdate

datetime özelliği tarih ya da zaman tanımlamak için kullanılır. Aşağıdaki formata göre tarih ya da zaman değerlerini girebilirsiniz.

Yıl-Ay-Gün Saat:Dakika:Saniye TZD (Time Zone Designator, Saat dilimi

Tanımlayıcısı)

Yukarıdaki tanımlamada kullanılan argümanlar isteğe bağlıdır.

Örnek:

<p>İşe Başlama Tarihi: <time datetime=”2010-01-10 9:00”>Ocak 10</time>.</p>