Html 5 Nedir?
Html şüphesiz ki tek ve en güçlü front-end dili. Bu tabir son zamanlarda oldukça popüler, hatta ABD-Avrupa’da bulunan firmalar front-end developer bile istihdam ediyor. Ama iş artık eskisi gibi basit değil..
Önceden frontpage ile iyi veya kötü herkes basit html sayfalar tasarlayıp işvereni mutlu edebilirdi, oysa şimdi bu bahsettiğimiz eleman profili hem Html5 hem XHtml 1T hem CSS3 hemde Javascript ve JQuery üzerine uzman olmak zorunda. Hatta ve hatta DOM API’s diye anılan günümüzün popüler web teknolojilerinin de geliştiricisi ve kullanıcı olması gerekli.
Konumuzdan sapmadan Html5 neymiş, nası yenilikler getirmiş bi göz atalım.
HTML5 ile hayatımıza bir kaç yeni element girdi. Burada kullandığım “element” kelimesine dikkat. Bir kaç html imi veya tag’i girdi demiyorum, artık html’in üzerine eklenen şeyler birer element. Önceden de bizim im veya tag diye andığımız şeyleri W3C element diye anıyordu ancak benim için Html gerçek elementlerini 5.sürümünde kazandı.
Yeni Gelen Html Elementleri
<canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>
Html 5’te artık desteklenmeyen Html elementleri :
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
Çok Fazla <div> Etiketi ..
Üstte ki tablodan görebileceğiniz üzere 2002 yılından beri “tableless web design” yani “tablosuz web tasarımı” dönemini yaşıyoruz. <table> elementi yerini <div> elementine devr edeli tam 8 sene oluyor.
8 senedir sayfalarımızı nasıl dizayn ediyorduk peki? Genel olarak tasarlarsak aşağıdaki şekilde ki gibi ifade edebiliriz.
Tipik bir 2 sütunlu web sayfası tasarımı bu şekilde olacaktır. Gördüğünüz gibi çok fazla div elementi kullandık ve dahası sayfamızda yaratacağımız bir çok div elementi daha olacak. Html 5 üzerimizde ki yükü biraz hafifletiyor ve yeni getirdiği elementler sayesinde aşağıda ki kolay ön tasarımı yapıyoruz.
https://i.hizliresim.com/blaGPm.gif
Kod halinde bakarsak ;
<header> ve <footer> elementleri
HTML:
<header>
<h1>HTML 5</h1>
<p>maxigamerz.com</p>
</header>
HTML:
<header>
<h1>maxigamerz.com</h1>
<h2>CottonCandy Maxigame.org Forum Üyesi..</h2>
</header>
HTML:
<footer>© 2015 CottonCandy</footer><input> elementine eklenen yeni özellikler
tel
search
url
datetime
date
month
week
time
datetime-local
number
range
color
