HTML5 Nedir? HTML5'te ki Yenilikler Nelerdir?

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.

http://dev.w3.org/html5/spec/Overview.html

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/html5 adresinden 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 ;

<section> elementi

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.

<nav> elementi

<nav> elementi ile blogroll veya link kısmı şeklinde ki bölümlerinizi kolayca belirleyebilirsiniz.

<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.

<article> elementi

Bu element ile sayfamızda gireceğimiz content yani içerik kısmını kolayca belirtebilir, CSS ile şekillendirebiliriz.

<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.

“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.

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.

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.

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Html 4 ile Html 5 arasında ki farklar

Tüm farkları incelemek için bu adresi ziyaret etmenizi öneririm.

14 thoughts on “HTML5 Nedir? HTML5'te ki Yenilikler Nelerdir?”

  1. açıklamalar güzel ve analşılır ancak verilken adresler singilizce bunun türkce bir kaynak kısmı yokmu. bir çok siteye göz attım çoğunun verdiği linkler ölü.. burdakiler sağlam ama ingilizce. anlamak zor oluyor. bir hata yaptığımda hatayı nasıl çözebilirim yerine önce ben bu ingilizceyi nasıl çözebilirim diye düşünmek zorunda kalıyorum …… :((((

  2. Bilişim dünyasıyla ilgileniyorsanız İngilizce olmazsa olmazdır.

    Çeşitli kurslara giderek, telefonunuzu bilgisayarınızı ingilizce kullanarak, kısaca İngilizce’yi hayatınıza sokarak öğrenebilirsiniz.

    Bu süreçte yabancı bir arkadaş edinip onunla başta yazışarak sonra sesli görüşerek kendinizi geliştirebilirsiniz.

  3. fms,action script,php c++ ,mysql gibi bircok programlama dilini kullanıyorum ama henüz html5 ilgi duymamıştım

    sıtandart html koşulları yeterliydi css ile tasarımı görselleştiriyordum bircok yerde html5 i öven makaleler sonunda araştırma içine girmiş bulunuyorum şuana kadar flash tabanlı calışmalar ile uğraştım online multiplayer oyunlarda dahil ama sonuçta flaash biraz insanların cekingen davranmasına sebebiyet veriyor bu da sitelerin ht oranını düşürüyor ister istemez php,html,css gibi konularada ilgili olmak gerekiyorki programlama bira sabır gerektiren konu pratik gerektiren işi nekadar kolaylaştırırsanız o kadar iyi bu durumda ister istemez yeniliklere ayak uyduruyorsunuz html5’i gayet iyi tanımlamışsınız bir çok siteyi gezdim ama hep biyerlere yönlendiriyorlar
    siz açıklama yaparken genel kullanılan termlere değinmişsiniz bu bilgiler ile pratik yapıp devamını getirmek
    kolay olucağı benziyor ama html5 yeni olduğu için ne kadar hızlılık tanır bunu ilerleyen zamanlarda görürüz inşallah anlatımınız için teşekürler açık ve net bir anlatım elinize sağlık teşekürler..

  4. Merhaba,

    Kullandığınız dillerden farklı olarak HTML5 bir scripting veya (low-high level) programlama dili değil bildiğiniz gibi.

    Standart HTML koşulları kesinlikle yeterli değildi, bu iddiada bulunuyorsanız HTML5’i yeterince tanımamışsınız demektir :)) HTML5’in ortaya çıkması aslında tablet pc’ler, dokunmatik telefonlar, sörf yapabilen mobil cihazların bir anda piyasada çok geniş yer bulmasıyla oldu.

    Bu cihazların amacına uygun web sayfaları tasarlamak gerekiyordu ve bu anda sahaya HTML5 girdi.

    Çok net olarak söyleyebilirim ki, bugün yapılacak en akıllıca yatırım HTML5’e olacaktır.

  5.  HTML5 iyi güzel de, gece gündüz uğraşıp yazacağımız Canvas tabanlı bir animasyon veya oyun, Javascriptle yazılıyor olması itibari ile kodları alıp kopyalanmaya açık olacaktır. Bunu aşmak için bir çözüm var mıdır? Düşünülmüş müdür? Yoksa milleti zorla Open source kod yazmaya mı teşvik ediyorlar:)

    1. Client-side çalışan mark-up dilleri (html5, css) ve client-side programlama dilleri (javascript) doğası itibariyle geminin su üzerinde ki kısmı. Herkes elbette görebilir tasarımlarınızı ve kopyalayabilir. Tasarımlarınızın telif haklarını alarak bundan korunabilirsiniz. Lakin tasarımlarınızın çalınması çokta büyük bir sorun olmamalı. Bugün facebook’u klonlayan bir kişi ne yapabilir ki? Eğer kopyası, aslından başarılı olacaksa bırakın zaten olsun 🙂

  6. Client-side çalışan mark-up dilleri (html5, css) ve client-side programlama dilleri (javascript) doğası itibariyle geminin su üzerinde ki kısmı. Herkes elbette görebilir tasarımlarınızı ve kopyalayabilir. Tasarımlarınızın telif haklarını alarak bundan korunabilirsiniz. Lakin tasarımlarınızın çalınması çokta büyük bir sorun olmamalı. Bugün facebook’u klonlayan bir kişi ne yapabilir ki? Eğer kopyası, aslından başarılı olacaksa bırakın zaten olsun 🙂

Leave a Reply