Yeni (HTML5)
Yeni (HTML5)
Yeni (HTML5)
Yeni (HTML5) Yeni (HTML5)
<script>
Yeni (HTML5)
Yeni (HTML5)
HTML5 taraf›ndan desteklenmiyor.
Birinci div elemanı
İkinci div elemanı
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 24
24 HER YÖNÜYLE HTML5
E¤er class özelli¤ine birden fazla s›n›f seçici ad› yaz›lm›fl ise, son yaz›lan s›n›f seçici en öncelikli olur. Sayfam›z›n görüntüsü:
Firefox 3.6 ekran görüntüsü IE8 ekran görüntüsü
contented›table
[HTML5]
Alabilece¤i De¤erler: {true, false}
Eleman içeri¤inin düzenlenebilir olup olmad›¤›n› ayarlamak için kullan›l›r. • true de¤eri atanm›flsa eleman içeri¤i kullan›c› taraf›ndan düzenlenebilir/de¤ifltirilebilir. • false de¤eri atanm›flsa eleman içeri¤i kullan›c› taraf›ndan düzenlenemez.
E¤er bu özellik bir elemana atanm›flsa kal›tsal olarak eleman›n içinde bulunan alt elemanlara geçer. Bu özelli¤i de¤eri ile beraber kullanmak flartt›r. Örne¤in;
fleklindeki bir kullan›m yanl›fl olacakt›r.
Do¤rusu;
fleklinde olmal›d›r.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 25
YEN‹ ELEMANLAR VE ÖZELL‹KLER 25
Örnek: <meta charset=”utf-8” /> contenteditable özelliği Düzenlenebilir İçerik
Dikkat ederseniz sayfada bulunan div elemanlar› için contenteditable özelli¤i true de¤eri ile tan›mlanm›flt›r. Bu durumda iki div eleman›n›n da içerikleri kullan›c› taraf›ndan de¤ifltirilebilir. Burada fluna dikkatinizi çekmek istiyorum. ‹kinci div eleman›n›n içerisinde bulunan img eleman›, bu özelli¤i kal›tsal olarak almaktad›r. Tüm taray›c›lar img eleman›n›n kullan›c› taraf›ndan silinmesine izin verir, fakat sadece IE ve Firefox img eleman›n›n sayfa üzerindeki boyutlar›n› de¤ifltirmemize izin verecektir.
Firefox 3.6 ekran görüntüsü
Sayfan›n normal (varsay›lan) ekran görüntüsü
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 26
26 HER YÖNÜYLE HTML5
Taray›c› Deste¤i: Internet Explorer 5.5 +, Firefox 3+, Opera 9.0+, Safari (Deste¤i var.) NOT
+ karakteri belirtilen sürüm ve daha sonra ç›kan sürümler anlam›na gelmektedir.
contextmenu
[HTML5]
Alabilece¤i De¤er: {menu elemanı id değeri}
Bir eleman› menu eleman› ile iliflkilendirmek için kullan›l›r. Taray›c› Deste¤i: Internet Explorer (Yok), Firefox (Yok), Opera (Yok), Safari (Yok)
d›r
Alabilece¤i De¤erler: {ltr, rtl}
HTML eleman›n›n içerdi¤i metnin yaz›l›fl yönünü ayarlamak için kullan›l›r. ltr ile rtl de¤erlerinden birini al›r.
draggable
[HTML5]
Alabilece¤i De¤erler: {true, false, auto}
Bir HTML eleman›n›n sürüklenebilir olup olmayaca¤›n› ayarlamak için kullan›l›r. • true de¤eri atanm›flsa kullan›c› mouse ile eleman›n›n konumunu de¤ifltirebilir. (Eleman sürüklenebilir) • false de¤eri atanm›flsa eleman sürüklenemez.
• auto de¤eri atanm›flsa ve yukar›daki de¤erler kullan›lmam›fl ise taray›c› kendi varsay›lan de¤erini kullan›l›r. Taray›c› Deste¤i: Internet Explorer (Yok), Firefox 3.5+, Opera (Yok), Safari 5.0+
dropzone
Alabilece¤i De¤erler: {copy, move, link } NOT
Bu özellik, Drag and Drop isimli bölümde ayr›nt›l› bir flekilde anlat›lacakt›r.
Sürükle-b›rak ifllemlerinde b›rakma an›ndaki taray›c› davran›fl›n› tan›mlamak için kullan›l›r.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 27
YEN‹ ELEMANLAR VE ÖZELL‹KLER 27
• copy de¤eri atan›rsa sürükleme iflleminin bitti¤i yerde sürüklenen datan›n kopyas› oluflturulur. • move de¤eri atan›rsa sürüklenen datay› sürükleme iflleminin bitti¤i yere tafl›r.
• link de¤eri atan›rsa sürükleme iflleminin bitti¤i yerde sürüklenen dataya bir link oluflturur. Taray›c› Deste¤i: Yok.
›d
Alabilece¤i De¤er: {Bir HTML elemanın id özelliğine atanan değer}
HTML elemanlar›na benzersiz bir isim vermek için kullan›l›r. Asl›nda id özelli¤i ile HTML elemanlar›na bir kimlik numaras› verilir. JavaScript ile id özelli¤ine de¤er atanm›fl yani bir kimli¤i olan elemanlara ulaflabilir ve çal›flma an›nda bu eleman›n stil ve yap›sal özelliklerini de¤ifltirebiliriz. Örnek:
<meta charset=”utf-8” /> id özelliği <script type=”text/javascript”> var goster = function (){ var yeni_text = document.createTextNode(“id özelliği”); /* Yeni bir text (metin) dü¤ümü oluflturmak için createTextNode() metodunu kulland›k. *Kullan›m›: *createTextNode(String):String (Bu gösterim Metodun hangi tip de¤er ald›¤›n› ve metodun geri döndürdü¤ü de¤er türünü tan›mlar.) *Dom Level 1,2 */
var div = document.getElementById(“icerik”);
/* id özelli¤ine “icerik” de¤erini alm›fl div eleman›n›n referans›n› ald›k. getElementById() metodu belirtilen id de¤erini alm›fl eleman› obje(Nesne) olarak döndürür. *Kullan›m›: *getElementById(String):HTMLElement
*/
*Dom Level 1,2
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 28
28 HER YÖNÜYLE HTML5
div.appendChild(yeni_text);
/* yeni_text isimli metin dü¤ümünü appendChild() metodu ile div eleman› içerisine ekledik.
*Kullan›m›:
*appendChild(Node):Node *Dom Level 1,2
*/
}
id özelli¤ine “icerik” de¤eri alm›fl eleman›n
Mouse ile üzerine gelindi¤inde yandaki ekran görüntüsü oluflur.
lang
Alabilece¤i De¤er: {Dil Kodu}
Firefox 3.6 ekran görüntüsü
HTML elemanlar›n›n içerdikleri metinlerin ya da özelliklerine ald›klar› de¤erlerin dilini ayarlamak için kullan›l›r. Örne¤in; Türkçe: tr, Almanca: de, ‹ngilizce: en
spellcheck
[HTML5] Alabilece¤i De¤erler: {true, false}
E¤er true de¤eri atanm›flsa eleman içindeki metinde dilbilgisi ve yaz›m hatalar› kontrol edilir. false de¤eri atanm›flsa kontrol edilmez. Bu özelli¤i düzenlenebilir
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 29
YEN‹ ELEMANLAR VE ÖZELL‹KLER 29
içeri¤e sahip elemanlarda kullanabilirsiniz. Örne¤in; textarea, input ya da contenteditable=”true” de¤erini alm›fl di¤er elemanlar. Taray›c› Deste¤i: Internet Explorer (Yok), Firefox 2+, Opera (Yok), Safari (Yok)
style
Alabilece¤i De¤erler: {CSS tanımlamaları(Özellik:Değer)}
Bu özelli¤i kullanarak HTML elemanlar›na sat›r içi CSS kodlar› yazabilirsiniz. Bu CSS kodlar› style özelli¤i ile yaz›ld›klar› HTML eleman›na uygulan›r. Style özelli¤ine yaz›lan CSS kodlar› bir eleman› hedef alan CSS kodlar› içinde en öncelikli tan›mlamalar olacakt›r. Örnek:
<meta charset=”utf-8” /> style özelliği Her Yönüyle HTML5
p eleman›na atanan CSS özelliklerine görsel olarak inceleyelim.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 30
30 HER YÖNÜYLE HTML5
Ekran görüntüsüne bakal›m.
p eleman›na atanan CSS özellikleri
Firefox 3.6 ekran görüntüsü
tab›ndex
Alabilece¤i De¤er: {Sayı}
HTML eleman› için sekme s›ras›n› ayarlar.
t›tle
Alabilece¤i De¤er: {Metin}
HTML etiketine bilgi ve aç›klama ekleyebilirsiniz.
h›dden
[HTML5] Alabilece¤i De¤er: {hidden}
HTML eleman›n› gizlemek için kullan›l›r. Taray›c› Deste¤i: Internet Explorer (Yok), Firefox 4.0, Opera (Presto/2.7.7), Safari (Nightly Build* ile)
HTML5’in Getirdi¤i Yeni Elemanlar HTML5 yap›s›nda bulunan yeni elemanlara bakal›m.
Yap›sal Elemanlar Bir web sayfas› tasarlarken muhtemelen sayfan›z kabaca bir üst bafll›k alan› (sitenin tan›t›m› için), bir içerik alan› ve yine içerik alan› içerisinde de¤iflik alt bafll›klar (bölümler), bir alt bafll›k ve bir ya da daha fazla navigasyon (yönlendirme) alanlar›ndan oluflacakt›r (De¤iflik site tasar›mlar› olabilir. Burada genel yaklafl›mdan söz edilmektedir). Sitenizin yap›s›n› tasarlarken HTML5 ile yeni gelen yap›sal elemanlar› kullanabilirsiniz. Bu elemanlar›n kullan›lmas›; kod okunabilirli¤ini artt›r›r, anlaml› eleman guruplar› oluflturulmas›n› sa¤lar ve CSS’i daha etkili bir flekilde kullanman›za yard›mc› olur.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 31
YEN‹ ELEMANLAR VE ÖZELL‹KLER 31
Bafll›k eleman›, bu eleman› kullanarak sayfa bafll›k alan› (sayfa hakk›nda bilgiler içeren bölüm), bölüm veya alt bölüm bafll›¤› ya da yönlendirme alanlar› için bafll›k oluflturabilirsiniz. Genelde h1, h2, h3 .. h6 elemanlar›n› ya da hgroup eleman›n› içerir. Özellikleri: [Standart Özellikler] Örnek:
<meta charset=”utf-8”> Header Elemanı
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 32
32 HER YÖNÜYLE HTML5