Barış Öztekin, 2011 ANKARA www.barisoztekin.com H T M L 5 1
HTML5 HTML5 NEDİR? HTML5; HTML, XHTML ve HTML DOM(Document Object Model) için belirlenmiş standartlardır. HTML in bir önceki versiyonu olan HTML4 1999 yılında çıkarılmış ve o tarihten bu yana WEB de çok fazla değişiklikler olmuştur. HTML5 için çalışmalar halen (Kasım2011)sürmektedir ancak bir çok modern tarayıcı HTML5 in bazı özelliklerine bugünden destek vermektedir ve hergeçen gün bu destek artmaktadır. HTML5 in, XHTML de olduğu gibi katı kuralları olan bir işaretlemesi yoktur. HTML elemanlarınızı(tag), büyük harflerle kullanabilir, özellikleri(attributes) tırnak içinde veya tırnak içine almadan kullanabilirsiniz. XHTML2.0 çalışmalarının sona ermesinin en önemli nedenlerinden biri olan önceki versiyonlara destek verilmemesinin tam tersine HTML5, kendinen önce varolan versiyonların elemanlarının da birçoğunu desteklemektedir. HTML5 ÇALIŞMALARI NASIL BAŞLADI? HTML5, World Wide Web Consortium (W3C) ve Web Hypertext Application Technology Working Group (WHATWG)'nin ortak bir çalışmasıdır. WHATWG web formlar ve uygulamalar üzerinde çalışırken, W3C XHTML2.0 üzerinde çalışmalarını sürdürmekteydi. 2006 yılında, bu iki kuruluş çalışmalarını birleştirmeye ve yeni bir HTML versiyonu çıkarmaya karar verdi. Bu yeni versiyonu çıkarmak için bazı önşartlar vardı: - yeni versiyon HTML, CSS, DOM ve Javascript tabanlı olmalı - dışardan eklenti ihtiyacını en aza indirgemeli (flash gibi) - daha iyi şekilde hata ayıklanabilmeli - daha çok etiket üretilmeli ve script'in yerini alabilmeli - HTML5 cihaz bağımsız çalışabilmeli - geliştirme aşamaları herkese açık olmalı H T M L 5 2
YENİ ÖZELLİKLER HTML5 içerisinde şu an için yer alan ilginç özelliklerden bazıları: çizim yapmaya imkan veren canvas elemanı geniş bant ve zengin medya içeriği için video ve audio elemanları çevirim-dışı içerik barındırma içeriği daha iyi tanımlayan özel elemanlar: article, footer, header, nav, section... yeni form kontrolleri. calendar, date, time, email, url, search... HTML5 de karakter kodlaması, HTML4 ve XTML1.0 deki detaylı tanımlamaya nazaran son derece basit ve okunabilirdir. <meta charset= UTF-8 > Ayrıca, Javascript ve CSS dosyalarını kodlamamıza dahil ederken kullandığımız type ifadesi HTML5 de kullanılmamaktadır. ve <script src= jsfile.js ></script> <link rel= stylesheet href= style.css > Önceki versiyonlarda, aynı adrese bağlantı verdiği halde yapısı itibari ile iç içe kullanılamayan <a> elemanı da artık iç içe kullanabilmekteyiz. HTML5; <h2><a href= iletisim.html >İLETİŞİM</a></h2> <p><a href= iletisim.html >İletişim bilgilerimize bu adresten ulaşabilirsiniz.</a></p> <a href= iletisim.html > <h2>iletişim</h2> <p>iletişim bilgilerimize bu adresten ulaşabilirsiniz.</p> </a> TARAYICI DESTEĞİ HTML5 şu anda açıklanmış resmi bir standart olmadığından, birçok tarayıcı tam bir destek vermemektedir. Ancak en çok kullanılan (safari, chrome, firefox, opera, internet explorer) tarayıcılar, HTML5 in özelliklerini parça parça eklemeye devam etmektedir. H T M L 5 3
HTML5 in YENİ ELEMANLARI Semantik olarak doğru ve daha iyi bir yapı sağlamak için HTML5 e eklenen yeni elemanlar: <article> <aside> <bdi> <command> <details> <summary> <figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr> Kendi içinde bir içeriği olan, tüm sayfadan bağımsız içerikler için kullanılır. Blog anasayfalarında yer alan bağımsız her bir gönderi için kullanılır. içinde yer aldığı içerikten ayrı bir içeriği sunmak için kullanılır. Sahip olduğu içerik çevresel içerikle ilişkili olmalıdır. parent elementin metin doğrultusu yönününde olmayan metinler için kullanılır. button, radio button veya checkbox. bir dokümanın bir parçasının yada tamamımın detaylarını açıklamak için kullanılır. <details> elemanı içinde özet veya açıklama için kullanılır. özerk (stand-alone) bir içeriğin gruplanması için kullanılır (örn: video) <figure> bölümünün alt yazısı olarak kullanılır. sayfa altlığığ olarak kullanılır. Yazar hakkında bilgi, dokümanın tarihi, iletişim bilgisi ve telif hakları bilgilerini içermelidir. dokümanın veya bölümün tanıtım yazısı için kullanılır. Navigasyon da içerebilir. <h1> den <h6> ya kadar başlık bölümlerini içerir. En büyük değer bölüm başlığı olurken diğerleri alt başlık olarak görünür. özellikle belirtilmek istenilen metinler (highligt) için kullanılır. alt ve üst değerleri bilinen ölçümler için kullanılır. navigasyon bölümü için kullanılır. işin ilerleme durumunu göstermek için kullanılır. uzakdoğu alfabelerinde kullanılan harflerin veya notların okunuşunu, açıklamasını göstermek için kullanılır. <ruby> elemanın bilgi notunu açıklamak için kullanılır. <ruby> elemanını desteklemeyen tarayıcıların göstermesi istenien içerik için kullanılır. bir doküman içindeki bölüm için kullanılır. (bugüne kadar kullandığımız <div> etkiletinin semantik açıdan doğru olan biçimidir.) saat, tarih veya her ikisinin de gösterimi için kullanılır. (WORD BREAK). Satır boşluğu bırakmak için kullanılır. H T M L 5 4
YENİ ZENGİN MEDYA ELEMANLARI HTML5, zengin medya içeriklerini desteklemektedir. <audio> <video> <source> <embed> <track> multimedya içeriği, ses, muzik, yada diğer ses içeriğini göstermek için kullanılır. video içeriği için kullanılır. <audio> ve <video> elemanlarının içinde, kaynak adreslemek için kullanılır. flash ve java gibi eklentileri sayfa içine yerleştirmek için kullanılır. medya oynatıcılarında içerik metnini göstermek için kullanılır. CANVAS ELEMANI Bir web sayfası içinde kullanıcı yada kodlama yönlü vektörel çizim yapılmasına olanak sağlanmaktadır. Canvas elemanı bunun için Javascript kullanmaktadır. <canvas> javascript ile grafik çizimi için kullanılır. Yeni FORM ELEMANLARI HTML5 daha fazla yetileri olan form elemanları sağlamaktadır. Bunlar: <datalist> <keygen> <output> girdi değerleri seçenekleri için bir liste oluşturmakta kullanılır. kullanıcıyı yetkilendirmek için rumuzlar üretir. farklı çıktıları göstermek için kullanılır. Örneğin bir script kullanılılarak üretilen çıktı bu eleman ile gösterilir. YENİ INPUT TYPE ve ÖZELLİKLER (New Input Types and Attributes) HTML5 daha zengin ve tarayıcı kontrollü formlar oluşturmak için yeni [input] tiplerine sahiptir. Bunlardan bazıları; email url number range H T M L 5 5
Tarih seçiciler (date, month, week, time, datetime, datetime-local) search color Bu tipler henüz tüm tarayıcılar ve/veya versiyonları tarafından desteklenmemektedir. Kasım 2011 tarihi itibariyle tarayıcı desteği Tablo 1 da gösterilmiştir. Input Type IE Firefox Opera Chrome Safari email Hayır 4.0 9.0 10.0 Hayır url Hayır 4.0 9.0 10.0 Hayır number Hayır Hayır 9.0 7.0 5.1 range Hayır Hayır 9.0 4.0 4.0 Tarih seçiciler Hayır Hayır 9.0 10.0 5.1 search Hayır 4.0 11.0 10.0 Hayır color Hayır Hayır 11.0 12 Hayır Tablo 1 - Yeni INPUT Type tarayıcı destekleri Tablo 6 da görüldüğü gibi Chrome ve Opera en geniş desteği veren tarayıcılar. Ancak bu yeni input type ları kullanmaya başlayabilirsiniz. Zira tarayıcı desteklemiyorsa, kullanıdığınız bu [input] elemanını normal bir text input olarak gösterecektir. Ancak doğrulama (validation) için ayrıca kodlama yapmanız gerekecektir. email, url, tel, number gibi tanımlamaların doğrulama ve kontrol dışında en önemli özelliği mobil cihazların klavye diziliminin değişmesidir. tel search url email datetime girdi değeri bir telefon numarası olduğu durumlarda kullanılır. girdi alanı bir arama alanı olduğu durumlarda kullanılır. Destek veren tarayıcılarda kutunun sağ iç yanında, tüm metni silmek için (x) ikonu yer alacaktır. girdi değeri bir URL olduğu durumlarda kullanılır. girdi değeri eposta olduğu durumlarda kullanılır. girdi değeri tarih ve/ya saat olduğu durumlarda kullanılır. H T M L 5 6
date month week time girdi değeri tarih olduğu durumlarda kullanılır. girdi değeri ay olduğu durumlarda kullanılır. girdi değeri hafta olduğu durumlarda kullanılır. girdi değeri saat olduğu durumlarda kullanılır. datetime-local girdi değeri kullanıcı bilgisayarındaki tarih ve saat olduğu durumlarda kullanılır. number range color girdi değeri bir sayı olduğu durumlarda kullanılır. girdi değeri sayı ile verilen bir aralık olduğu durumlarda kullanılır. girdi değeri hexadecimal renk kodu olduğu durumlarda kullanılır. INPUT elemanı için yeni özellikler(attributes) ve kullanım şekilleri ise; autofocus required placeholder <input type= email autofocus> Sayfa yüklendiği zaman otomatik olarak bu alan içinin aktif olmasını sağlar <input type= text required> Form gönderildiği zaman bu alanın tarayıcı tarafından boş olup olmadığı kontrol edilir. HTML5 den önce bu doğrulama için çeşitli scriptler kullanmak gerekirdi. <input type= text placeholder= Lütfen adınızı giriniz > Metin alanı içinde bu alanın hangi bilgi için kullanılacağı hakkında bilgi verir. Metin alanı içine tıklandığı zaman placeholder metni silinir ve kullanıcının kendi değerini yazması sağlanır. Kullanıcı metin alanını boş bırakarak alan dışına çıktığında, placeholder metni tekrar alan içinde ye alır. HTML den önce bu gibi bir kullanım için çeşitli scriptler kullanmak gerekirdi. Tarayıcının bu özelliğe destek vermemesi halinde, metin kutusunun içi boş olarak görünecektir. list metin alanına girilebilecek önceden tanımlı içerik var ise list özelliği kullanılır. Kullanıcı bu alanı doldururken girdiği her harf sonrasında listede yer alan uygun elemanlar metin alanın altında aşağı doğru açılır ve kelimenin tamamını yazmadan seçilerek metnin kutu içine yazılması sağlanır. Kullanım şekli; <input type="text" id="illistesi" list="iller" placeholder="lütfen bir il seçiniz" > <datalist id="iller"> <option value="istanbul"> <option value="ankara"> <option value="izmir"> <option value="eskişehir"> <option value="erzurum"> <option value="hakkari"> </datalist> H T M L 5 7
min/max pattern Proje <progress min="0" max="100" value="60">60%</progress> tamamlandı. <meter max="10">9 araba</meter> Posta Kodu: <input id="zip" name="postakodu" pattern="[\d]{5}(-[\d]{4})"> Girilecek olan alanın 5 haneli ve yalnızca rakam olduğunu göstermektedir. Okunaklılık konusunda HTML5 in yapısına biraz aykırı görünse de, programcılar için pattern tanıdık bir özelliktir. Tarayıcı tarafından bu kontrolün yapılması HTML5 in güzel bir özelliğidir. Özellik IE Firefox Opera Chrome Safari (Attribute) autocomplete 8.0 3.5 9.5 3.0 4.0 autofocus Hayır 4.0 10.0 3.0 4.0 form Hayır 4.0 9.5 10.0 Hayır form overrides Hayır 4.0 10.0 10.0 Hayır height / width 8.0 3.5 9.5 3.0 4.0 List Hayır 4.0 9.5 Hayır Hayır min / max / step Hayır Hayır 9.5 3.0 Hayır multiple Hayır 3.5 11.0 3.0 4.0 novalidate Hayır 4.0 11.0 10.0 Hayır pattern Hayır 4.0 9.5 3.0 Hayır placeholder Hayır 4.0 11.0 3.0 3.0 required Hayır 4.0 9.5 3.0 Hayır Tablo 2 - Tarayıcıların yeni özellikleri destekleme durumu HTML5 Video Günümüzde birçok web sayfası içinde, farklı yöntemlerle videoların oynatıldığını görmekteyiz. Ancak web sayfalarında video gösterimi için, herhangi bir standart bulunmamaktaydı. HTML5, <video> elemanı ile bu gösterim için hem bir standart sunmakta, hem de dışa bağımlı eklentilerin kullanım ihtiyacını ortadan kaldırmaktadır. VİDEO DOSYASI BİÇİMLERİ (Video Formats) Bugün için, <video> elemanı 3 farklı formatı desteklemektedir. Bu liste, Tablo 3 de verilmiştir. Biçim (Format) IE Firefox Opera Chrome Safari Ogg Hayır 3.5+ 10.5+ 5.0+ Hayır MPEG 4 9.0+ Hayır Hayır 5.0+ 3.0+ WebM Hayır 4.0+ 10.6+ 6.0+ Hayır Tablo 3 - Video Biçimleri H T M L 5 8
Ogg = Theora Video Codec ve Vorbis Ses Codec MPEG4 = H.264 Video Codec ve AAC Ses Codec WebM = VP8 Video Codec ve Vorbis Ses Codec Nasıl Kullanılır? HTML5 dokümanı içerisinde bir video oynatmak istiyorsanız; <video width="320" height="240" poster= movieposter.png controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <p>tarayıcınız HTML5 in eklentisiz video oynatma özelliğini desteklememektedir.</p> </video> controls bu özellik play, pause, volume (oynat, durdur, ses) gibi kontrolleri video oynatıcıya eklemek için kullanılır. her tarayıcının kendine özgü kontrolleri bulunmaktır. Tasarımcılar, javascript kütüphaneleri kullanarak kendi video oynatıcılarını tasarlayabilirler ancak unutulmamalıdır ki, kullanıcı alışkanlıkları açısından algıyı karıştırmamak önemlidir. Çünkü kullanıcılar, video oynatıcınızın görüntüsünden çok, videonun içeriği ile ilgilenmektedir. poster video yükleninceye/oynatılıncaya kadar video alanında gösterilmesi istenilen vekil görselin adresidir. width, height videoları sayfa içine eklerken genişlik ve yükseklik boyutunu girmemiz, video yükleyince kadar gerekli alanın tarayıcı tarafından rezerve edilmesi ve video yüklendikten sonra sayfasının görsel olarak değişikliğe uğramaması açısıdan tavsiye edilmektedir. p source <Video> elementini desteklemeyen tarayıcılar otomatik olarak bu elemanı ve <source> elemanını yok sayacaktır. Bu da videoyu göstermeyeceği anlamına gelir. Kullanıcının bu durumda bilgilendirilmesi <p> etiketi kullanılabilir. Böylece <video> elemanını destekleyen tarayılar video oynatırken, desteklemeyen tarayıcılar <p> elemanı içinde verdiğiniz uyarı mesajını göreceklerdir. yukarıdaki örnek de iki kez kullanılan <source> elamanı ise <video> elemanını destekleyen tarayıcının format desteğine göre video adreslerini göstermektedir. Tarayıcı yalnızca desteklediği formattaki videoyu gösterecektir. H T M L 5 9
Bugün için Firefox ve Opera, Ogg formatını; Internet Explorer ve Safari, MPEG 4 formatını, Google Chrome ise her iki formatı da desteklemektedir. Yukarıda verilen örnekte, <video> elemanın tüm özellikleri kullanılmamıştır. Tüm özellikler ve açıklamaları Tablo 4 de verilmiştir. Özellik (Attribute) Değer Açıklama autoplay autoplay Video yüklenir yüklenmez oynatılmasını sağlar controls controls Video kontrollerinin gösterilmesini sağlar height pixel Videonun yüksekliğini pixel cinsinden gösterir loop loop Videonun sonsuz sayıda tekrar tekrar oynatılmasını sağlar muted muted Videonun sesini kapatır poster URL Video yükleninceye kadar gösterilmesi istenilen görselin adresidir preload auto metadata none Sayfa yüklendiği zaman videonun nasıl yüklenmesi gerektiğini belirtir src URL Videonun adres bilgisidir width pixel Videonun genişliğini pixel cinsinden gösterir Tablo 4 - Video Elemanı Özellikleri HTML5 Audio Bugüne kadar web sayfalarında ses dosyası çalmak için bir standart bulunmuyordu ve genellikle ses oynatmak için flash gibi eklentiler kullanılıyordu. HTML5 ile gelen <audio> elemanı ile ses dosyası çalmak mümkün olmaktadır. SES DOSYASI BİÇİMLERİ (Audio Formats) Bugün, <audio> elemanını destekleyen 3 temel biçim bulunmaktadır. Tarayıcı destek bilgileri Tablo 5 de verilmiştir. Biçim (Format) IE 9.0 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis Hayır Evet Evet Evet Hayır MP3 Evet Hayır Hayır Evet Evet Wav Hayır Evet Evet Evet Evet Tablo 5 - AUDIO elemanı için tarayıcı biçim desteği Nasıl Kullanılır? HTML5 dokümanı içerisinde bir ses dosyasını oynatmak istiyorsanız; H T M L 5 10
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> <p> Tarayıcınız HTML5 in eklentisiz ses dosyası çalma özelliğini desteklememektedir.</p> </audio> <audio> elemanının kullanımı <video> elemanının kullanımı ile neredeyse aynıdır. <audio> elemanının özellikleri Tablo 6 - Audio elemanının özellikleri de verilmiştir. Özellik (Attribute) Değer Açıklama autoplay autoplay ses dosyası yüklenir yüklenmez çalınmasını sağlar controls controls Ses dosyası oynatıcısı kontrollerinin gösterilmesini sağlar loop loop Ses dosyasının sonsuz sayıda tekrar tekrar oynatılmasını sağlar preload auto metadata none Sayfa yüklendiği zaman ses dosyasının nasıl yüklenmesi gerektiğini belirtir src URL Ses dosyasının adres bilgisidir width Pixel Ses oynatıcısının genişliğini pixel cinsinden gösterir height Pixel Ses oynatıcısının yüksekliğini pixel cinsinden gösterir Tablo 6 - Audio elemanının özellikleri HTML5 Canvas Nasıl Kullanılır? <canvas> elemanı web sayfasına, javascript kullanarak, grafik çizimlerin yapılmasını sağlar. <canvas> elemanı, her bir pixelini kontrol edebileceğiniz dörtgen bir alandır. Çember, daire, çokgen ve karakter çizmek için farklı metodları bulunmaktadır. HTML5 dokümanı içerisine bir <canvas> ekleyin. ID, genişlik ve yükseklik değerlerini belirleyin. <canvas id= mycanvas width= 200 height= 100 ></canvas> <canvas> elemanının kendi kendine çizim yapma yeteneği yoktur. Tüm çizim işleminin Javascript ile yapılması gerekir. H T M L 5 11
<script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> Javascript, çizim yapacağımız <canvas> elemanını ID si ile bulur. var c=document.getelementbyid("mycanvas"); ve 2 boyutlu bir context nesnesi oluşturur. var cxt=c.getcontext("2d"); getcontect( 2d ) nesnesi, HTML5 içerisinde tanımlı bir nesnedir ve kontur, kutu, daire..vb birçok şekil için çizim metodlarına sahiptir. Devam eden satırlarda, içi kırmızı renkle boyanmış bir dikdörtgen çizilmektedir. Canvas da koordinatları anlamak Yukarıdaki örnekte, fillrect metodunun parametreleri (0,0,150,75) olarak verilmektedir. Bu; 150x75 boyutlarında bir dikdörtgenin canvas elamanının 0,0 noktasından başlayarak çizilmesi anlamına gelir. Şekil 1 de canvas elemanının 2 boyutu koordinat sistemi gösterilmektedir. Şekil 1 - Canvas 2 Boyut Koordinat Sistemi Canvas elemanı içinde örnek çizimler Aşağıda kod örnekleri ve çıktıları ile canvas elemanı içerisinde yapılan çizim örnekleri bulunmkatdır. <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="360" height="210" style="border:1px solid #c3c3c3;">tarayıcınız CANVAS özelliğini desteklememektedir. Lütfen tarayıcınızı güncelleyiniz.</canvas> H T M L 5 12
<script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.moveto(0,0); cxt.lineto(150,50); cxt.moveto(0,0); cxt.lineto(10,50); cxt.moveto(360,210); cxt.lineto(14,54); cxt.stroke(); </script> </body></html> Sonuç: <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="360" height="210" style="border:1px solid #c3c3c3;"> Tarayıcınız CANVAS özelliğini desteklememektedir. Lütfen tarayıcınızı güncelleyiniz.</canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.beginpath(); cxt.arc(150,105,60,0,math.pi*2,true); cxt.closepath(); cxt.fill(); var cxt2=c.getcontext("2d"); cxt2.fillstyle="#fff"; cxt2.beginpath(); cxt2.arc(168,105,48,0,math.pi*2,true); cxt2.closepath(); H T M L 5 13
cxt2.fill(); </script> </body> </html> Sonuç: <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="360" height="210" style="border:1px solid #c3c3c3;"> Tarayıcınız CANVAS özelliğini desteklememektedir. Lütfen tarayıcınızı güncelleyiniz.</canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); var grd=cxt.createlineargradient(0,0,360,210); grd.addcolorstop(0,"#ff0000"); grd.addcolorstop(1,"#ebd126"); cxt.fillstyle=grd; cxt.fillrect(0,0,360,210); var kutu=c.getcontext("2d"); kutu.fillstyle="rgba(255, 255, 200, 0.4)"; kutu.fillrect(50,50,250,110); var ciz=c.getcontext("2d"); ciz.moveto(50,50); ciz.lineto(300,160); ciz.moveto(300,50); ciz.lineto(50,160); ciz.stroke(); </script> </body> </html> H T M L 5 14
Sonuç: Canvas elemanının diğer HTML özellikleri ise Tablo 7 de gösterilmektedir. Özellik (Attribute) Değer Açıklama width Pixel Canvas genişliğini pixel cinsinden gösterir height Pixel Canvas yüksekliğini pixel cinsinden gösterir Tablo 7 - Canvas elemanının özellikleri HTML5 Web Storage HTML5, ziyaretçilerin bilgisayarlarında bilgi depolamak için iki yeni nesne önermektedir. Bunlar; localstorage : zaman sınırı olmaksızın bilgileri depolar sessionstorage: bir oturum süresince bilgi depolar HTML5 in bu iki yeni nesnesinden önce bu işlemler çerezler (cookies) kullanılarak yapılmaktaydı. Ancak çerezler, sunucuya her seferinde bir sorgu gittiğinde yeniden düzenlendiğinden verimliliği azaltarak sistemi yavaşlatmaları yüzünden fazla bilgi için kullanılamıyorlardı. HTML5, sunucuya her istek gittiğinde veri gönderilmediği için web sayfasının performansını olumsuz etkilemeden bilgilerin depolanmasına olanak sağlamaktadır. Bilgiler, farklı websayfaları için farklı alanlarda depolanır ve her web sayfası yalnızca kendi depolanan bilgilerine ulaşabilmektedir. Bilgileri depolamak ve yeniden erişmek için Javascript kullanılmaktadır. localstorage nesnesi localsorage nesnesi, bigileri herhangi bir zaman sınırlaması olmaksızın depolar. Bilgi depolamak ve o bilgiye erişmek için; H T M L 5 15
<script type= text/javascript > localstorage.lastname= Smith ; document.write(localstorage.lastname); </script> Yukarıda basit şekilde bir kullanım örneği verilmiştir. Aşağıdaki örnekte ise, ziyaretçinin sayfaya geliş sayısını depolayan ve ekrana yazan basit bir örnek bulunmaktadır. <script type="text/javascript"> if (localstorage.pagecount) { localstorage.pagecount=number(localstorage.pagecount) +1; } else { localstorage.pagecount=1; } document.write("visits "+ localstorage.pagecount + " time(s)."); </script> sessionstorage nesnesi Kullanım şekli localstorage nesnesi gibi olan sessionstorage nesnesi, bilgileri oturum süresince tutar ve ziyaretçi sayfayı kapattığı zaman bu bilgiler silinir. HTML5 Elemanlar Listesi (Tag Reference) HTML5 de audio, video, canvas gibi daha önce 3.parti yazılımlara duyulan ihtiyacı ortadan kaldıran özellikler öne çıkmış olsa da, anlambilimsel (semantik) olarak daha doğru, arama motoru dostu (SE friendly), sunucu yükünü azaltan, kullanıcı taraflı işlemleri kolaylaştıran <nav>, <header>, <footer>, <figure>, <article> gibi bir çok yeni elemanlar da eklenmiştir (Tablo 8 de mavi renk ile işaretlenerek, tarayıcı desteği renkli ikonlar ile gösterilmiştir.) Bu elemanlara, açıklamaları ile birlikte, Tablo 8 de yer verilmiştir. Eleman (HTML Tag) Açıklama <!-- içerik --> Yorum satırı <!DOCTYPE> Doküman tipini gösterir <a> Bağlantı için kullanılır <abbr> Bir kısaltamadan söz ederken kullanılır. (WWW yada NATO gibi) <anconym> <address> Doküman / Makale sahibinin iletişim bilgileri için kullanılır <applet> <area> İmajlar üzerinde verilen bağlantılar için tıklama alanı belirlemede kullanılır <article> Makale için kullanılır <aside> Sayfa içeriğinde bahsedilen bir bölüm ile ilgili bilgi vermek için kullanılır H T M L 5 16
<audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> Sesli içerik oynatmak için kullanılır Metni kalın yazmak için kullanılır Doküman içinde yer alan tüm relatif adreslemelere referans baz adres belirtmek için kullanılır. <head> etiketleri arasında kullanılmalıdır.. (Bi-directional Isolation) Bulunduğu metin içerisinde farklı bir yönde yazılan metinleri göstermek için kullanılır. (Bi-directional Override) içerisindeki elemanın metin yönünü değiştirmek için kullanılır. Başka bir kaynaktan alıntı yapılan bölüm için kullanılır. HTML dokümanının ana yapısıdır. Tek satırlık boşluk için kullanılır. Tıklanabilir bir buton tanımlamak için kullanılır. Genellikle javascript kullanılarak, kullanıcı taraflı çizim yapmak için kullanılır. Bir tablonun altyazısı için kullanılır. Bir çalışmanın başlığı için kullanılır. Kod satırlarını göstermek için kullanılır. <colgroup> elemanı içindeki kolon tanımlamaları için kullanılır. Tabloda yer alan herbir kolonu ayrı ayrı biçimlendirmek için kullanılır. Kullanıcı taraflı kullanılacak bir komut için kullanılır. Kullanıcı tarafındaın yapılacak olan girdi alanları için ön tanımlı liste oluşturmak için kullanılır. Açıklama lisesinde bir elemanın açıklması için kullanılır. Bir doküman içerisinden çıkarılmış metin alanları için kullanılır. Kullanıcı tarafından isteğe bağlı olarak görüntülenebilen açıklama alanları oluşturmak için kullanılır. Açıklama alanları için kullanılır. Dokümanda bir bölüm belirlemek için kullanılır. Açıklama listesi oluşturmak için kullanılır. Açıklama listesindeki her bir açıklama için kullanılır. Vurugu yapılması istenen metin alanları için kullanılır. Dışardan yüklenecek olan interaktif bir uygulama veya eklentiyi sayfaya dahil etmek kullanılır. Bir form içindeki ilişkili elemanları gruplamak için kullanılır. Bir şeklin başlık tanımlaması için kullanılır. İllustrasyonlar, diagramlar, fotoğraflar, kod listeleri gibi kendine has bir içeriği olan alanlar için kullanılır. H T M L 5 17
<font> <footer> <form> <frame> <frameset> <h1> den <h6> ya <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <keygen> <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> Doküman veya dokümanın bir bölümünün alt açıklama kısmı için kullanılır. Kullanıcı tarafından giriş yapılması beklenen formların oluşturulmasında kullanılır. Başlıklar için kullanılır. (1 en büyük/önemli/üst) Doküman bilgisinin yer aldığı bölümdür. Doküman ile ilgili bilginin ve sayfa navigasyonunun yer aldığı bölümdür. Çoklu seviyede <h1><h2><h3>... başlık grupları olması durumda kullanılır. İçerikte tematik bir değişiklik olduğunda kullanılır. HTML dokümanının kök elemanıdır. Metin alanın bir bölümünün okunuş tonlamasını veya vurgusunu değiştirmek için italik yapmak amacıyla kullanılır. Satıriçi dış içerikli çerçeveler oluşturmak için kullanılır. Görsel tanımlamak için kullanılır. Bir girdi alanı tanımlamak için kullanılır. Dokümana sonradan eklenen alanları göstermek için kullanılır. Formlar için sunucu taraflı kontrol referansları oluşturur. Klavye giriş alanları için kullanılır. Girdi alanlarını etiketlemek için kullanılır. <fieldset>, <figure> veya <details> elemanılarının başlıkları için kullanılır. Liste içinde yer alan her bir elemanı için kullanılır. Stil dosyalarının dışardan yüklenmesinde bulunduları yerin tanımlanması için kullanılır. Görseller üzerinde alanlar oluşturmak için kullanılır. Metinlerin bir bölümünü işaretlemek için kullanılır. Komut listesi oluşturmak için kullanılır. HTML dokümanın içeriği ile ilgili meta bilgisi tanımlamak için kullanılır. Belirli bir aralıkta(en üst ve en alt değerleri bilinen) ölçülebilir değerler için kullanılır. Site içi/dışı navigasyon bağlantılarını tanımlamak için kullanılır. Kullanıcı taraflı scriptlerin engellenmiş olması durumda gösterilmesi gereken alternatif içerik için kullanılır. Sayfanın içine gömülen nesneler için kullanılır. Sıralı bir liste için kullanılır. Dropdown listelerde ilişkili elemanları gruplamak için kullanılır. Dropdown listelerde liste elemanı tanımlamak için kullanılır. H T M L 5 18
<ouput> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> Bir hesaplama sonucunu göstermek için kullanılır. Paragraflar için kullanılır. Bir objenin parametreleri için kullanılır. Tarayıcılar tarafından ön biçimlendirilmiş metin alanları için kullanılır. Kod bloğunda yer alan boşlukların olduğu gibi ekrana yansıtılacağı durumlarda kullanılır. Bir işin ilerleme durumunu gösterir. Kısa alıntı için kullanılır. Ruby kısaltmalarını desteklemeyen tarayıcılarda gösterilmesi istenen içerik için kullanılır. Uzakdoğu ve asya alfabeleri ile yazılmış yazıların okunuşlarını göstermek için kullanılır. Ruby açıklamaları için kullanılır. Artık doğru olmayan bir metin için kullanılır. Bir bilgisayar programı için örnek çıktısı için kullanılır. Kullanıcı taraflı scriptleri tanımlamak için kullanılır. Dokümanda bir bölüm belirlemek için kullanılır. Drop-down listesi tanımlamak için kullanılır. Tanımlanmış stile göre daha küçük metin yazmak için kullanılır. Zengin medya elemanlarının kaynaklarını göstermede kullanılır. Dokümanda bir bölüm belirlemek için kullanılır. Önemli bir metin için kullanılır. Bir dokümanın stil tanımlaması için kullanılır. Alt simge metinleri için kullanılır. <details> elemanı için görünür bir başlık atamak için kullanılır. Üst simge metinleri için kullanılır. Tablo tanımlamak için kullanılır. Tablonun içerik kısmını gruplar. Tablodaki bir hücre için kullanılır. Çok satırlı metin giriş alanı için kullanılılır. Tablo için alt bilgi alanındaki elemanlrı gruplar. Tabloda bir başlık hücresi tanımlamak için kullanılır. Tabloda başlık hücrelerini gruplamak için kullanılır. Tarih ve sat bilgisi için kullanılır. Dokümanın başlığı için kullanılır. Tabloda bir satır için kullanılır. Zengin medya içeriğinin metinleri için kullanılır. H T M L 5 19
<tt> <u> <ul> <var> <video> <wbr> Sırasız listeler için kullanılır. Değişken tanımlamak için kullanılır. Video tanımlamak için kullanılır. Bir metinde, içine aldığı kelime/kelimeleri blok bir satır halinde gösterir. Tablo 8 - HTML5 Elemanları Sonuç HTML5 konusunda çalışmalar hala devam etmektedir. HTML5 in tüm teknoloji dünyasında standartlaşıp, yaygın olarak kullanılması zaman alacağa benziyor. Ayrca günümüz ihtiyaçlarının ve önümüzdeki süreçte ortaya çıkacak ihtiyaçların ne kadarına cevap veriyor olduğunu da önemli bir soru olabilir. Ancak bana kalırsa HTML5 ile ilgili en önemli konu AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera gibi teknoloji alanında dünya devi firmaların HTML5 çalışmalarına destek vermesi, standartlaşma ve geliştirme konusunda çalışıyor olmalarıdır. Kimsenin tekelinde olmayan ve herkesin olan bir HTML standartı, gerek mobil, gerekse masaüstü internet ve web deneyimine çok önemli katkılarda bulunacağına inanıyorum. Bu açıdan bakınca, HTML5 in bugün için en büyük katkısı bence birlikteliktir. ADOBE nin, Kasım 2011 tarihinde mobil cihazlar için FLASH OYNATICI projesini sonlandırarak HTML5 e destek vereceğini açıklaması; Microsoft un, Silverlight yaşayacak ama asıl önemli konu HTML5 olacak demesi, bu birlikteliğin en bariz göstergesidir. HTML5 hakkında derlediğim bu küçük notların az da olsa fikir vermesi ümidiyle. Barış Öztekin Ankara, 2011 H T M L 5 20
Kaynakça HTML5 For Web Designers / Jeremy Keith http://www.w3schools.com/html5/html5_reference.asp http://www.html5rocks.com/en/ http://www.diveintohtml5.org/ http://www.html5demos.com/ http://www.html5doctor.com/ H T M L 5 21
H T M L 5 22