Genel Öznitelikler

HTML Etiketlerine Giriş yazımızda elementleri, öznitelik adında anahtar kelimelerle ayarlayabileceğimizden bahsetmiştik. Bu yazımızda ise HTML5 elementlerine ekleyebileceğiniz genel özniteliklerden ve bunların ne amaçla kullanıldığından bahsedeceğiz.

Genel öznitelikler neredeyse tüm HTML elementlerinde kullanılabilecek öznitelikleri kapsar. Bunları iki gruba ayırabiliriz: öznitelikler ve olay tutucular.

Öznitelikler o elemente ait belli karakteristik özellikleri belirlemede kullanılır. Özniteliklerin isimlerini, ne işe yaradığını ve nasıl kullanıldığını aşağıdaki başlıklardan okuyabilirsiniz.

Aşağıdaki anahtar kelimeler neredeyse tüm HTML elementlerinde öznitelik adı olarak kullanılabilir.

accesskey

HTML elementleri erişim tuşlarına sahip olabilirler. Bu sayede klavye düğmelerine basarak bu elementlere kolayca ulaşabilirsiniz. Kullanıcıların özellikle form elementlerine ve bağlantılara tek tuşa basarak kolayca ulaşması için kullanabilirsiniz. Bu sayede fare kullanmakta güçlük çeken insanlar için sitenizde alternatif bir kullanım yolu sağlarsınız.

Genel kullanım şekli;

<etiketadi accesskey="karakter">Element içeriği</etiketadi>

Örnek kullanım şekli;

Accesskey özniteliği olan elementlere ulaşmak için alt tuşuna basarken accesskeyde belirtilen değere basmak yeterlidir. Örneğin yukarıdaki Opera Türkiye’ye Bağlantı elementine ulaşmak için alt+o klavye kısayolunu kullanmak gereklidir. Opera web tarayıcısında ise shift+esc düğmesine basarak sayfada kullanabileceğiniz tüm accesskeyleri görebilirsiniz.

HTML5 ile eklenen kısım

Bir elemente birden fazla accesskey atanabilir. Bunun için her karakter arasında boşluk bırakmanız gerekli. Örneğin;

Yukarıdaki örneği klavyesinde s karakteri olmayan bir cihazda, cep telefonu gibi, 0 tuşuna basarak da bu elemente ulaşabilirsiniz.

Uyarı: Bir elemente birden fazla tuş ayarlama özelliği W3C HTML5 tanımlamasında yer alsa da henüz tarayıcılar tarafından uygulanmamıştır. Bu yüzden düzgün sonuç alamayabilirsiniz.

class

Elementleri sınıflandırmak için class özniteliğini kullanabilirsiniz. Bu sınıflar pratikte daha kolay CSS kodu yazmanızı sağlar. Tüm tarayıcılarca desteklenir.

<etiketadi class="class1 class2">Element İçeriği</etiketadi>

Örnek kullanım;

Not: Bir element birden fazla class değerine sahip olabilir. Bunlar boşluk ile ayrılmalıdır.

contenteditable

HTML görüntülerken elementlerin içeriğini düzenlemek için kullanılır. Değer olarak iki farklı değer alır: true ve false. Elementi düzenlenebilir durumda getirmek için contenteditable özniteliğini değerini true olarak belirmek gereklidir. Eğer değer false olursa element düzenlenemez durumdadır. Bunlar dışında kalan değerler için üçüncü bir durum vardır: inherit. Inherit kalıtsal anlamına gelir ve elementin bir üstündeki elementin, kapsayıcı elementin, evebeyn elementin, contenteditable değeri baz alınır. Tüm masaüstü tarayıcı sürümlerinde bu öznitelik desteklenir.

<etiketadi contenteditable="true|false|inherit">Element İçeriği</etiketadi>

Örnek;

contextmenu

Bir elemente sağ tıkladığınızda o elemente özel kullanılabilecek komutların gösterilmesini sağlamaktadır. Mesela bir yazı girme alanına sağ tıkladığınızda çıkacak bir komut ile büyük-küçük harfler arasında değişimler yapmak için kullanabilirsiniz. Bu özellik şu anda hiçbir tarayıcıya eklenmemiştir. 8+ sürümlerinde Firefox bunun w3c kuralına tam olarak uymayan, ama oldukça yakın, bir uygulamasına sahiptir. Firefox’un sağladığı örneğine erişmek için bu adresi kullanabilirsiniz.

<elementadi contextmenu="menünün id değeri">Element içeriği</elementadi>

dir

Türkçe soldan sağa doğru yazılan bir dil. Ancak tüm diller bu şekilde değil, dir özniteliği Arapça gibi diller için yazının sağdan sola akacağını belirtmede kullanılır. Bu öznitelik üç değere sahip olabilir: ltr, rtl ve auto. ltr, left-to-right soldan sağa; rtl, right-to-left sağdan sola; auto ise belirli kıstaslara göre hangisinin kullanılacağını belirler.

<elementadi dir="ltr|rtl|auto">Element içeriği</elementadi>

draggable

Kullanıcının bu elementi sürükleyebileceğini belirtmek için kullanılır. Üç değer alır. true, false, auto. true olarak belirlenirse element, kullanıcı tarafından sürüklenebilir. false olursa sürükleme işlemine imkan tanınmaz. auto değerinde ise bu imkanın sağlanıp sağlanmayacağı tarayıcıya bırakılır, varsayılan değer de bu değerdir. href özniteliğine sahip bağlantılar ve resimler sürüklenebilir elementlerdir.IE haricindeki web tarayıcılarınca desteklenir.

<elementadi draggable="true">Element içeriği</elementadi>

dropzone

Kullanıcının sürüklediği elementlerin bırakıldığında taşınan içeriğin nasıl işleneceğini belirtmede kullanılır. ÜÇ farklı değer alır: copy, move, link. copy değerini aldığında taşınan içerik bırakılan yere kopyalanır. move değerini aldığında ise taşınan içeriğin ikinci bir kopyası oluşturulmaz ve yeri değiştirilir. link değerini aldığında ise özgün içeriğe bir bağlantı verilir. Bu üç değerden ayrı olarak file: veya string: ile başlayan ikinci bir parametre daha alabilir. Bu ikinci parametre kabul edilebilecek içeriği belirtir. Bu özellik şu anda hiç bir tarayıcı tarafından desteklenmemektedir.

Bu örnek w3c HTML5 belirtiminden alınmıştır.

hidden

Bu öznitelik elementi gizlemek için kullanılır. Bu öznitelik doğru/yanlış şeklinde iki yönlü çalışır. Eğer ifade edilmişse element gizlenir. Web tarayıcısı bu özniteliğin kullanıldığı elementleri ekranda göstermez. JavaScript yardımıyla bu öznitelik kaldırılabilir.

<elementadi hidden="hidden">Element içeriği</elementadi>

id

Bütün elementlere bir eşsiz bir isim vererek onları adlandırabilirsiniz. Böylece bütün elementleri birbirinden ayırabilirsiniz.

Element içeriği

Örnek kullanım şekli

id özniteğine vereceğiniz değerde en az bir karakter bulunmalı ve boşluk olmamalıdır.

id özniteliği çeşitli amaçlar için kullanabilirsiniz. CSS ya da Javascript ile kod yazarken bu elementlere doğrudan ulaşabilirsiniz. Örneğin aşağıdaki yukarıda kullanılan elementlere doğrudan

#ilkparagraf { //css kodu } #alttakikutu { // alttaki kutu için uygulanacak css kodu }

css kodlarıyla ulaşabilirsiniz. JavaScript ile ulaşmak için document.getElementById("ilkparagraf") ve document.getElementById("alttakikutu") şeklinde bir kod yazmanız bu elemente ulaşmanız için yeterlidir.

lang

Bu öznitelik, bu elementin içeriğinin hangi dilde yazıldığını gösteriyor. Google, Bing, Yahoo, Yandex gibi arama motorları sitelerin dillerini bu özniteliğin değerine göre belirler.

<elementadi lang="dil kısaltması">içerik</elementadi>

spellcheck

Elementin içindeki yazı üzerinde yazım denetimi yapılıp yapılmayacağını belirtir. İki değer alır: true, false. Bu öznitelik true değerine sahipse aşağıdakiler için yazım denetimi yapar:

Girdi elementlerindeki yazılar(şifreler hariç)
textarea elementindeki yazılar
İçeriği düzenlenebilir elementlerdeki(contenteditable=true öznitelikli elementler) yazılar

<elementadi spellcheck="true">içerik</elementadi>

Şu an sadece Opera ve Chrome tarafından desteklenmektedir. IE10 ise bu desteği bir kaç yenilikle beraber sunacaktır.

style

Bir elemente satıriçi (inline), yani doğrudan kendi üzerinden, css biçimi eklemede kullanılır. Bu özniteliğin aldığı değer gerçekte bir css kod blokudur. Bu CSS kodları tek bir dosyada toplanarak sayfanın açılması daha verimli kılınabilir(önbellekleme yardımıyla).

element içeriği

tabindex

Bu öznitelik, tab tuşuna basıldığında elementin kaçıncı sırada odaklanılacağını belirtir. Tab tuşu bir formda, form elementleri arasında dolaşmayı ve aynı zamanda bağlantılar üzerinde de gezinmeyi kolaylaştırır. tabindex 0 ile 32767 arası bir tam sayı değeri alır. tabindex özniteliği sadece A, AREA, BUTTON, INPUT, OBJECT, SELECT ve TEXTAREA elementleriyle kullanılır.

<elementadi tabindex="sayi">elementiçeriği</elementadi>

title

Fare ile bir elementin üzerine geldiğinizde belirecek ipucu balonunda ne yazacağını belirtir. Tüm tarayıcılarca desteklenir.

<elementadi title="yazi">elementiçeriği</elementadi>

Olay Tutucuları

Aşağıdaki listede bir HTML elementinde kullanılabilecek olay tutucuları göstermektedir. Örneğin onclick o elemente ait tıklama olayında yapılacak komutlatı saklar. Bu bölüm Javascript ile ilgilidir. Ancak aşağıdaki listede bulunan özniteliklerin de HTML elementleriyle kullanılabileceğini unutmayın:

onabort
onblur*
oncanplay
oncanplaythrough
onchange
onclick
oncontextmenu
oncuechange
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror*
onfocus*
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload*
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreadystatechange
onreset
onscroll*
onseeked
onseeking
onselect
onshow
onstalled
onsubmit
onsuspend
ontimeupdate
onvolumechange
onwaiting

*Not: *Yıldız ile işaretlenmiş öznitelikler window nesnesine ve document nesnesine uygulandıkları zaman farklı anlamlar taşıdıklarını unutmayın.

*Önemli Not: *Butün bu öznitelikler tüm elementlere eklenebilse de hepsinde aynı etkiyi oluşturamayacaktır. Örneğin sadece medya elementleri(video, audio gibi) onvolumechange özniteliğini doğru şekilde kullanabilir.

Kaynaklar:

Menu