HTML5 - Yeni Elemanlar ve Özellikler

29 Şubat 2012 Çarşamba, 14:41 sularında İzni Burak Demirtaş tarafından #web konularında yazılmış.
Yazıldığından bu yana, 2792 kez okunmuş ve 2 yorum almış.

HTML5'in yavaş yavaş hayatımıza girmesi ile birlikte, yeni eklenen ve kullanımdan kalkan elemanlarda oldu. Bu yazımda bunları gözden geçireceğiz :)

HTML5 dili yeni bir yapıyla geliyor ve HTML5 geliştiricileri yeni yapıda elemanların barındırabileceği içerik bilgileri gruplandırılmış vaziyette karşımıza çıkarıyor. Bu yapıya İçerik Modeli (Content Models) adını verdiler. Kısaca bahsedecek olursam; Content Models, kullanıcağınız elemanın hangi içeriğe sahip olacağını tanımlıyor diyebiliriz. Bunlar zaten gruplandırılmış vaziyette. Şimdi içerik modellerine göre elemanlara bi bakalım:


Metadata

<meta>, <title>, <style>, <base>, <command>, <link>, <noscript>, <script>

Bu gruptaki elemanlar, sayfanın bilgilerini, davranışlarını ve görünümünü değiştirebilir.


Heading

<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Sayfanızda oluşturduğunuz bir alanın başlığını tanımlayabileceğiniz elemanlardır.


Sectioning

<nav>, <article>, <aside>, <section>

Bu elemanlar, HTML5 ile birlikte geldi. HTML5'in çatı elemanları olarak adlandırabiliriz. Artık yaptığımız şablonlardaki ana hatları ve blokları bu elementler ile oluşturacağız.


Phrasing

<textarea>, <sub>, <sup>, <svg>, <strong>, <b>, <u>, <i>, <span>, <p>, <time>, <var>, <video>, <wbr>, <label>, <mark>, <math>, <meter> vs...

Sayfanızda kullandığınız metinleri oluşturuken kullandığınız yada başka bir işlem için tanımladığınız elemanlardır.


Interactive

<label>, <select>, <textarea>, <keygen>, <button>, <input>, <a>, <details>, <embed>, <iframe> ...

Bu gruptaki elemanlar, sayfanıza gelen kullanıcılar ile etkileşim kurabilmek, bilgi alabilmek için kullanılır.


Embedded

<canvas>, <video>, <audio>, <img>, <iframe>, <object>, <embed>, <svg>

Genellikle dışarıya bağlantılı elemanlardır. Yani dış bir kaynaktan alınan veri ile veya Javascript  gibi bir script dili ile etkileşimli kullanılabilen elemanlardır. (Bu bölümde de HTML5 ile gelen bazı etiketler bulunmaktadır)

Flow

<canvas>, <blockquote>, <cite>, <iframe>, <img>, <input>, <script>, <address>, <aside>, <audio>, <video>, <article>, <a>, <b>, <u>, <abbr>, <small>...<canvas>, <blockquote>, <cite>, <iframe>, <img>, <input>, <script>, <address>, <aside>, <audio>, <video>, <article>, <a>, <b>, <u>, <abbr>, <small> ...

Metin , görüntü veya sayfa içine gömüşmüş olarak kullanılan elemanlardır. 


Genel HTML5 Eleman Özellikleri

HTML5 kodlarında da, diğer HTML elemanlarında bulunduğu gibi eleman parametreleri bulunmaktadır. Bunlara bakacak olursak:

class: Style tanımlamalarında oluşturduğumuz herhangi bir sınıfı, elemanımıza atamak için kullanılır. Birden fazla değer alabilir.

id: Elemana benzersiz bir isim vermek için kullanılır. Böylece kullanılan eleman diğer elemanlardan benzersiz olur ve Javascript ile elemanın id değerine erişip, eleman üzerinde istediğimiz uygulamaları yapabiliriz.

accsesskey: Elemana klavye kısayolu tanımalamak için kullanılır. Aldığı değer karakter'dir.

tabindex: Eleman için, klavye TAB tuşuyla yapacağımız sekme sırasını ayarlar.

title: Elemana bilgi, açıklama ekleyebileceğimiz özelliğimiz.

style: Eleman içerisinde, elemana css style kodlamaları yapıp, yapısını değiştirebileceğimiz özellik.

lang: Elemanın içeriğinin dilini belirttiğimiz özellik. Örneğin: tr, en

contenteditable (HTML5): Eleman içeriğinin düzenlenip düzenlenmeyeceği ile ilgili özelliği belirtmek için kullanılır. true veya false değer alır.

contextmenu (HTML5): Elemanı, herhangi bir menü elemanıyla ilişkilendirmek için kullanıcağımız özellik. İlişkilendireceğimiz menü elemanının id değerini alır.

spellcheck (HTML5): Eleman içerisindeki metinin dil bilgisi ve yazım kurallarını kontrol eden özelliktir. true veya false değeri alır. Değer true ise, yazım kurallarını kontrol eder.

draggable (HTML5): Elemanın sürüklenebilir olup olmadığını belirten özelliktir. true veya false değeri alır.

zone (HTML5): Elemanın, sürükle-bırak işlemlerinde, bırakılma anındaki işlevi belirtir. Aldığı değerler copy, move ve link değerlerini alır.

hidden (HTML5): Elemanı gizlemek için kullanılır. hidden değerini alır.


Yorumunu Gönder     Sende görüşünü yaz!

2 adet yorum yapılmış.   Sende yap!

Su Arıtma demiş ki; 3 Mayıs 2012 Perşembe, 14:53
Teşekkürler Kardeşim Yeni Başlayanların İşine Yaracaktır.
İzni Burak Demirtaş demiş ki; 8 Mayıs 2012 Salı, 17:18
Faydalı olduysa ne mutlu bana. Devamıda gelecek. Yorumunuz için teşekkürler :)

Yine aylar olmuş ve buralarda gözükmüyorum. Ne zaman "buralara daha çok vakit ayıracağım, bol bol yazacağım" desem, kesin başka bir şeyler çıkıyor; işler, güçler, yoğunluklar vs, odaklanamıyorum. Öyle ya da böyle bunu bir düzene oturtacağım. inatçıyım bu konuda....

8 Temmuz 2018, 04:55   —   #genel   —   Yorum yok.   —   Devamını Oku »

Buraları yine oldukça aksatmış olmanın verdiği iç rahatsızlığı ile, geçen haftadan beri bir şeyler karalamaya olan isteğim ancak şu an vuku buluyor. Geçen hafta oldukça yoğun ve hareketli geçtiği için yazmaya vakit bulamadım aslında. Ya da ne bileyim, belki de bahane buluyorum......

27 Şubat 2018, 11:34   —   #genel   —   2 yorum var.   —   Devamını Oku »

Gidelim buradan...

"Gidelim buradan... Göğsünü sıkan, içini daraltan o laneti geride bırakıp gidelim. Burada yağmur bile güzel yağmıyor artık. Yağmuru güzel yağan bir yerlere gidelim....

5 Ocak 2018, 04:57   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »

$_2018 = new HappyYear();

Zamanın ne denli hızlı aktığını bilmiyorum ama, gerçekten "su gibi" akıp geçiyor deyimi doğru galiba. Ne ara 2018 geldi, kapımıza dayandı; hiç bir fikrim yok. Oysa ben daha tarih yazmak zorunda olduğum kağıtlara "2017" yazmaya bile alışmamıştım. Şimdi bir de 2018 çıktı başımıza. ...

31 Aralık 2017, 17:10   —   #genel   —   Yorum yok.   —   Devamını Oku »

İnsanın içindeki sıkıntıya bir isim, bir sebep bulamamasına hep şaşırmışımdır. Çok şaşırdığı ne varsa, bunları çok mu yaşıyor insanlar genelde hiç bilmiyorum. Ama bu en azından bende genelde böyle oluyor. Açık konuşayım mı? Birinin bir sözü vardı, ama kimindi hatırlamıyorum. Şöyle diyordu: "Kafamdan atamıyorum. Hep aklıma geliyor, hem de en tuhaf zamanlarda. Duştan çıkarken, sokakta yürürken, gece yatağıma yatarken; bilinçli olarak bir şey düşünmediğim zamanlarda."... Sanki hayat denen bu değişik alem içinde, bir yerlerde bu söz içerisinde bir yerlerde sıkışmış kalmış gibiyim. Nedenini bilmiyorum. Belki de biliyorum. Belki de bildiğimi bilmiyorum. Belki anlatamıyorum, belki anlatmak istemiyorum. Belki içimden atmak istiyorum. Belki de atamıyorum. Belki seviyorum, belki de yine seviyorum.. Bazen çok saçmalıyorum değil mi? Biliyorum. Sarhoş da değilim ama olmadığıma da beni kim ikna edebilir? Zaten sarhoşken de anlatamıyorum. Atamıyorum. Seviyorum. Neyse, belki de en iyisi uyumak.

11 Aralık 2017, 04:27   —   #karalamaca   —   3 yorum var.   —   Devamını Oku »

hello İstanbul!

Üniversite hayatını bitirdik. Aslında planım, elimdeki projeler ile ilgilenip bir yandan da sene sonuna kadar kafa dinlemekti. 2018 itibariyle iş-güç arayışlarına girişecek ve mutlu olabileceğim, bana bi'şeyler katabilecek, hem kendime hem onlara fayda sağlayacağım bir şirket bulmak için adımlar atacaktım. Tahmin edeceğiniz üzere planlar yine tutmadı....

6 Ekim 2017, 10:02   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »

Eylül'dü. 
Dalından kopan yaprakların, 
Sararan yanlarına yazdım adını. 
Sahte bir gülüşten ibarettin oysa. 
Ve hiç bilmedin ellerimin soğuğunu. ...

16 Eylül 2017, 17:13   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »
daha fazla göster