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>Bu elementlerin bir çoğunun işlevlerini isimlerinden anlamışsınızdır büyük olasılıkla, ancak ileride detaylı bir şekilde hepsini tek tek inceleyeceğiz.
Html 5 Kaynakları
Html 5 hakkında tam anlamıyla bilgi sahibi olmak için W3C’yi ziyaret etmeniz yeterli.
Ayrıca bu adreste müthiş bilgiler var, illustrasyonlarla süslenmiş oldukça şık bir eğitim materyali. Teknik anlamda sorular-cevaplar için bu adresi ziyaret edebilirsiniz.
Html 5′e şüphesiz ki en büyük desteği youtube verdi. http://www.youtube.com/html5adresinden ulaşabileceğiniz bilgilerin yanı sıra sayfanın altındaki “Join Html 5 Beta” linkini tıklayarak Html 5 deneyimine ortak olabilirsiniz.
Html 5′e şüphesiz ki en büyük desteği youtube verdi. http://www.youtube.com/html5adresinden ulaşabileceğiniz bilgilerin yanı sıra sayfanın altındaki “Join Html 5 Beta” linkini tıklayarak Html 5 deneyimine ortak olabilirsiniz.
Eğer dilerseniz aynı sayfadan işleminizi geri de alabilirsiniz.
HTML 5 ile artık video oynatmak için ActiveX elementleri ve Flash player gibi eklentilere gerek yok ! Sadece bir web tarayıcınızın olması yeterli.
Html 5′te artık desteklenmeyen Html elementleri :
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
Html 5 ile Esnek Uygulamalar
Slaytlarınızı benim gibi slideshare vb. sitelerin eklentileri ile mi paylaşıyorsunuz? Artık hepsi bitti. Html 5 ile slaytlarınızı herhangi bir harici eklentiye veya uygulamaya ihtiyaç duymadan paylaşabilirsiniz.
Nasıl mı? http://apirocks.com/html5/html5.html#slide1 Slaytları ilerletmek için klavyenizde ki sağ yön ok tuşuna basmanız yeterli.
Ç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.
Kod halinde bakarsak ;
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
<section> elementi
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
Sayfaları bölümlere ayırmak ve bu bölümleri isimlendirmek ziyaretçiye sayfada ulaşmak istediği veriye daha kolay ulaşması açısından yardımcı olacaktır. Örneğin ziyaretçi kolayca bir makaleden diğerine “devam et” benzeri linklere ihtiyaç duymadan geçebilir. Sayfa tasarımcısı ise bir çok sayfa oluşturma derdinden kurtulacak ve <div>’ler arasında boğulmayacak.
<header> ve <footer> elementleri
Bu elementler sayesinde sayfaların başlık kısmı ve son kısımlaırnı kolayca işaretleyebiliriz.
<header>
<h1>HTML 5</h1>
<p>Serhatdundar.com</p>
</header>
<header>
<h1>Serhatdundar.com</h1>
<h2>Makaleler, Html5, Güvenlik, Eğitim Bilimleri, Web Teknolojileri..</h2>
</header>
<footer>© 2010 M.Serhat Dündar</footer>
<nav> elementi
<nav> elementi ile blogroll veya link kısmı şeklinde ki bölümlerinizi kolayca belirleyebilirsiniz.
<nav>
<ul>
<li><a href="/">Anasayfa</a></li>
<li><a href="/urunler">Ürünler</a></li>
<li><a href="/servisler">Servisler</a></li>
<li><a href="/hakkimizda">Hakkımızda</a></li>
</ul>
</nav>
<aside> elementi
<aside> elementi ile sidebar’larınızı kolayca belirtebilir, CSS ile tüm önce ki elementler gibi şekillendirebilirsiniz.
Tüm bu belirtme elementleri bizi karışık <div> elementlerinden kurtarıyor ve stil işlemlerimizde bize kolaylık sağlıyor.
<aside>
<h1>Arşivler</h1>
<ul>
<li><a href="/2007/09/">Eylül 2007</a></li>
<li><a href="/2007/08/">Ağustos 2007</a></li>
<li><a href="/2007/07/">Temmuz 2007</a></li>
</ul>
</aside>
<article> elementi
Bu element ile sayfamızda gireceğimiz content yani içerik kısmını kolayca belirtebilir, CSS ile şekillendirebiliriz.
<article id="yorum-2">
<header>
<h4><a href="#yorum-2" rel="bookmark">Yorum #2</a>
by <a href="http://ornek.com/">Serhat Dündar</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</header>
<p>Başka bir front-end makalesi</p>
</article>
<video> ve <audio> elementleri
Ses ve video içerikleri 56K modemleri çöpe attığımız günlerden beri hayatımızda oldukça fazla rol alıyor, facebook, youtube, dailymotion, last.fm gibi bir çok web uygulaması sayesinde internette geçen her saniyemizde yeni bir medya dosyası okuyoruz.
Html 4 ne yazık ki bu medya içeriklerini kendi içerisinde barındırmaktan acizdi. Bu yüzden web uygulamaları Flash, QuickTime, MediaPlayer gibi plug-in’ler sayesinde bu eksikliği gideriyordu.
Flash gibi plug-in’ler sayesinde yayıncılar kendi medya yürütme arayüzlerini şekillendirebiliyor, kullanıcıya farklı medya yürütme seçenekleri sunabiliyordu (farklı play-stop özellikleri, HD kalitesi, HQ-SQ kalite seçenekleri vb.
Yeni gelen <video> elementi ile tüm bunlar artık Html’in kendi özelliği haline geldi.
<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Filmi İndir</a>
</video>
“poster” özelliği ile video başlamadan önce video ekranında görünecek resmi seçebilirsiniz. MPEG-4 gibi video formatları ise kendi “poster” gösterme özelliklerini içerilerinde barındırıyor.
Audio elementinin çalışma mantığı video elementiyle benzer.
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>
Html 5′in video ve audio elementlerinin özellikler bunlarla da sınırlı değil, dilediğiniz video oynatma codec’lerini belirtme özgürlüğüne sahipsiniz.
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp"
media="handheld">
<source src="video.ogv" type="video/ogg;
codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
Bu iki elementi detaylı bir biçimde öğrenmek için bu adresi ziyaret ediniz.
<input> elementine eklenen yeni özellikler
Html 5 bir çok input özelliğini de kendisiyle beraber getirdi.
telsearchurlemaildatetimedatemonthweektimedatetime-localnumberrangecolor
Html 4 ile Html 5 arasında ki farklar
Tüm farkları incelemek için bu adresi ziyaret etmenizi öneririm.
