Ünite 1: HTML5 HTML nin kısa tarihçesi: GELİŞMİŞ İNTERNET UYGULAMALARI 1991 World Wide Web ve HTML 1 ortaya çıktı 1995 HTML 2.0 1997 HTML 3.7 1998 Web Standarts Project 1999 HTML 4.0 2000 XHTML 1.0 2004 - HTML 5.0 için ilk çalışmaların başladığı yıl. 10 yıllık gelişim süreci 2010 dan sonra çok bilinir hale gelmeye başlandı. Günümüzde gelişim devam ediyor. 2014 HTML5 kapsamlı test yılı Tam olarak standartlaşması 2020 yi bulabilir. Not: Web standartları World Wide Web Consortium(W3C) tarafından belirlenir.
HTML 5 Nedir? HTML5, HTML 4 ve XHTML 1 in yerine getirilen yeni bir web betimleme dilidir. HTML5 geleceğin web teknolojisidir. Günümüzde büyük oranda standartlaşmıştır. 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ı HTML5 Genel Özellikleri Eski HTML sürümlerini destekler. Zengin kullanıcı interaktivitesi içerir. Tasarımcılara ve geliştiricilere zaman kazandırır. HTML5 destekli her tarayıcı aynı şekilde yorumluyor. Daha fazla yapısal elemana, form elemanlarına ve yeni özelliklere sahiptir. Gelişmiş multimedia desteği sunmaktadır. İçerisinde yeni teknolojiler barındırır ya da önceden var olan teknolojilerin kullanımını sağlar. JavaScript ve CSS3 teknolojilerini daha etkili bir şekilde kullanmamızı sağlar.
HTML5 Yeni Getirdiği Özellikler Çizim yapmaya imkan veren canvas elemanı Geniş bant ve zengin medya içeriği için video ve audio elemanları Çevirim-dışı (off-line) içerik barındırma (Offline Apps) İçeriği daha iyi tanımlayan özel elemanlar(yeni yapısal etiketler): article, footer, header, nav, section... Yeni form kontrolleri: calendar, date, time, email, url, search... Masaüstünden web sitesine sürükle bırak özelliği GeoLocation API : Kullanıcının bulunduğu yerin enlem ve boylamını verir. Daha çok mobil cihazlarda kullanılır.
HTML5 Tarafından Desteklenmeyen Taglar: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp> HTML5 Yeni Gelen Taglar: <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> HTML5 Tarafından Desteklenmeyen Tag Attribute ları(tag Özellikleri): - align - link, vlink, alink, text (<body> için) - height ve width - scrolling ( <iframe> için) - hspace ve vspace - cellpadding, cellspacing, border (<table>) - bgcolor - valign
HTML5 te Yenilikler: 1) Page Direktifi (Sayfa Bildirimi) sadeleştirildi. eski: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> yeni: <!DOCTYPE html> 2) Meta karakter kodlaması sadeleştirildi. eski: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> yeni: <meta charset= UTF-8 > 3) JavaScript ve CSS eklentileri sadeleştirldi. eski: <script type="text/javascript" src="script1.js"></script> <link href="stil_dosyasi.css" type="text/css" rel="stylesheet"/> yeni: <script src= jsfile.js ></script> <link rel= stylesheet href= style.css >
HTML5 ile Birlikte Gelen Yeni Yapısal Tag lar <header>, <footer>, <section>, <nav>, <aside>, <article>, <figure> Birçoğu <div> lerin yerine gelmiştir. İsimleri içerikleri hakkında bilgi verir. Bu nedenle anlamsal etiket olarak isimlendirilirler. HTML5 te <div> kullanımdadır. <header>: Sayfanın üst kısmını yada sayfanın herhangi bir yerinde başlık alanı tanımlamak için kullanılır. <footer> : Sayfanın alt kısmını tanımlar. Sitemap, copyright, sosyal media ikonları, değişik bağlantılar bu alanda yer alabilir. <section> : Sayfanın herhangi bir bölümünü oluşturmak için kullanılır. <section> içinde <article> ve <div> yer alabilir. <header>, <aside> ve <footer> etiketleri bu etiketi kapsayabilir. <nav> : İçerisinde menü ve linklerin bulunduğu alan. <article> : Haber, makale, vb. gibi metin içerikli alanlarda kullanılır.
<aside> : Yan alanlar tasarlamak için kullanılır. <figure>: HTML belgesinde image ları işaretlemek için kullanılır. Resim, grafik, vb. gibi görsel nesneler. Örnek)
Örnek: XTML1.0 ile kodlanmış sayfa
Aynı sayfa HTML5 ile kodlanmış
Örnek)
Uygulama: Aşağıdaki görüntüyü HTML5 standartları ile kodlayınız. HTML5 ile Gelen Yeni Tag lar (Devam ) <article> 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. Haber, makale, blog yazısı v.b. gibi metin içerikli alanlarda kullanılır. <command> button, radio button veya checkbox gibi form elemanlarında kullanılır. <details> bir dokümanın bir parçasının yada tamamımın detaylarını açıklamak için kullanılır.
<summary> <details> elemanı içinde özet veya açıklama için kullanılır. <figcaption> <figure> bölümünün alt yazısı olarak kullanılır. <hgroup> <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. <mark> özellikle belirtilmek istenilen metinler (highligt) için kullanılır. <meter> alt ve üst değerleri bilinen ölçümler için kullanılır. <progress> işin ilerleme durumunu göstermek için kullanılır. <ruby> uzakdoğu alfabelerinde kullanılan harflerin veya notların okunuşunu, açıklamasını göstermek için kullanılır. <rt> <ruby> elemanın bilgi notunu açıklamak için kullanılır. <rp> <ruby> elemanını desteklemeyen tarayıcıların göstermesi istenlen içerik için kullanılır. <time> saat, tarih veya her ikisinin de gösterimi için kullanılır. <wbr> (WORD BREAK). Satır boşluğu bırakmak için kullanılır.
YENİ ZENGİN MEDYA ELEMANLARI HTML5, zengin medya içeriklerini desteklemektedir. <audio> multimedya içeriği, ses, muzik, yada diğer ses içeriğini göstermek için kullanılır. Ör) <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> <video> video içeriği için kullanılır. Ör) <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <source> <audio> ve <video> elemanlarının içinde, kaynak adreslemek için kullanılır. <embed> flash ve java gibi eklentileri sayfa içine yerleştirmek için kullanılır. <track> 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. Ör) <canvas id="mycanvas"></canvas> <script> var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); ctx.fillstyle='#ff0000'; ctx.fillrect(0,0,80,80); </script> Yeni FORM ELEMANLARI HTML5 daha fazla yetileri olan form elemanları sağlamaktadır. Bunlar: <datalist> girdi değerleri seçenekleri için bir liste oluşturmakta kullanılır. Ör) <input list="browsers"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist>
<keygen> kullanıcıyı yetkilendirmek için rumuzlar üretir. <output> 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ı; color date datetime datetime-local email month number range search tel time url week tel girdi değeri bir telefon numarası olduğu durumlarda kullanılır. search 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. url girdi değeri bir URL olduğu durumlarda kullanılır.
email girdi değeri eposta olduğu durumlarda kullanılır. datetime girdi değeri tarih ve/ya saat olduğu durumlarda kullanılır. date girdi değeri tarih olduğu durumlarda kullanılır. month girdi değeri ay olduğu durumlarda kullanılır. week girdi değeri hafta olduğu durumlarda kullanılır. time 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 girdi değeri bir sayı olduğu durumlarda kullanılır. range girdi değeri sayı ile verilen bir aralık olduğu durumlarda kullanılır. color 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 <input type= email autofocus> Sayfa yüklendiği zaman otomatik olarak bu alan içinin aktif olmasını sağlar
required <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. placeholder <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> min/max <progress min="0" max="100" value="60">60%</progress> <meter max="10">9 araba</meter> pattern 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.