> ## Content Index > Fetch the complete content index at: https://zettlina.com/llms.txt > Use this file to discover other available public pages before exploring further. # Genel Öznitelikler - HTML5 Eğitimi - URL: https://zettlina.com/genel-oznitelikler-html5-egitimi/ - Published: 2012-07-11T11:56:32.000Z - Updated: 2012-07-11T12:01:40.000Z - Author: C - Tags: eğitim, Özgür Web 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 tutucu*lar. Ö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. ### Genel Öznitelikler 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; `Element içeriği` Örnek kullanım şekli; Accesskey özniteliği olan elementlere ulaşmak için alt tuşuna basarken `accesskey`de 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ı](http://www.w3.org/TR/html5-author/editing.html?ref=zettlina.com#the-accesskey-attribute)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. `Element İçeriği` Ö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. `Element İçeriği` Ö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](http://people.mozilla.com/~prouget/bugs/context-menu-test/test.html?ref=zettlina.com) kullanabilirsiniz. `Element içeriği` #### 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](http://dev.w3.org/html5/spec/global-attributes.html?ref=zettlina.com#the-dir-attribute) hangisinin kullanılacağını belirler. `Element içeriği` #### 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. `Element içeriği` #### 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. `` #### 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. `içerik` #### 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 `içerik` Ş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. `elementiçeriği` #### title Fare ile bir elementin üzerine geldiğinizde belirecek ipucu balonunda ne yazacağını belirtir. Tüm tarayıcılarca desteklenir. `elementiçeriği` ### 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:** - [W3C Schools](http://www.w3schools.com/html5/html5%5Fref%5Fglobalattributes.asp?ref=zettlina.com) - [W3C HTML5 Belirtimi](http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html?ref=zettlina.com#global-attributes)