Kapak Tasarımı: Samet KÖROĞLU Simple HTML 5 Book Version: 1.0 Yazan: Emre Can ÖZTAŞ Önsöz Merhaba, ben Emre Can ÖZTAŞ. Bu kitabın yazarıyım. Gazi Üniversitesi – Bilgisayar Mühendisliği Bölümü'nde öğrenciyim. Bu kitap benim ikinci kitabım. Ilk kitabım “Simple JavaScript” idi. Simple HTML 5 ile artık üzerimdeki o olumsuz etkiyi ve heyecanı atmış bulunmaktayım. Ilk kitaptaki heyecanları yine yaşıyorum fakat artık acemi değilim. Kitap yazmak, insanlara yardımcı olmak harika bir duygu. Geriye dönüp baktığımda iyi ki yazmışım diyorum. Bildiklerimi kitaplaştırma serüvenim sürüyor. Başka kitap projelerim de var. Bu kitabı yazmamın 3 nedeni var. Bunlardan birincisi: Türkçe kaynağa destek olmak için, ikincisi: kitap alacak parası olmayan fakat öğrenmeye istekli arkadaşlarımızın faydalanması için, üçüncü neden: Allah nasip eder ilerleyen yaşlarımı görürsem geriye dönüp baktığımda neler yaptığımı hatırlamak için. Biliyorum ki yazdığım bu kitaplar bazı insanlar tarafından eleştirilecek. Belki de yerden yere vurulup, eften püften sebeplerle suçlanacağım ama benim için önemli değil. Ben yoluma bakar ve işimi yaparım. Çünkü insanlar kendi yapamadıklarını, başkaları yaptığı zaman rahatsız olurlar. Ben hayatımı boş geçirmek istemiyorum. Hepimiz bir gün bu dünyadan gideceğiz. Ama ben arkamda iyi bir isim bırakarak ve belki de yardımcı olduğum insanlar tarafından hayır duasıyla anılacağım, inşAllah. Simple HTML 5, yani bu kitabı takip edebilmek için temel HTML bilginizin olması gerekmektedir. Ayrıca bu kitap HTML değil HTML 5 üzerine kuruludur. Yani HTML 5 ile gelen yenilikleri anlatmak için yazılmıştır, bunu da belirtelim. Bu kitap tamamen ücretsizdir. Içinde bulunan bölümlerin veya kitabın tamamının çıktısı alınabilir, kopyalanabilir, dağıtılabilir ve herkesle paylaşılabilir. Sizden istediğim yegane şey; bu kitabın tamamının veya bir bölümünün, herhangi bir yerde kullanılacaksa kaynak gösterilerek kullanılmasıdır. Kitap hakkındaki görüş ve önerilerinizi, hatalı olan kodları veya yazım yanlışlarını lütfen bana bildirin. Mail adresim: [email protected] Bir diğer konuda herhangi bir yerde takıldığınız zaman bana soru ile gelmenizi istemem. Ben sorularınıza içtenlikle cevap vermek, yardım etmek isterim fakat sizin takıldığınız yerde belki başka bir arkadaşımızda takılmış olabilir. O yüzden www.btsoru.com gibi platformda, bu takıldığınız sorunuzu sorarsanız, diğer arkadaşlarımıza da yardımcı olmuş olursunuz. Teşekkürler Bu kitabın yazımında bana olumlu / olumsuz destek olan çevremdeki herkese teşekkür ederim. Siz olmasaydınız; gelişimimi tamamlayamaz, bügünki eriştiğim noktaya erişemezdim. Iyi ki varsınız. Umarım hep var olursunuz. Son olarak bu ve bir önceki kitabımın kapak tasarımını yapan Samet KÖROĞLU'na çok teşekkür ederim. İçindekiler 1 HTML 7 1.1 HTML Nedir? 7 1.2 HTML 5 7 2 HTML 5 için Tarayıcı Testi 9 3 HTML 5 için Araçlar 12 4 HTML 5 Sayfa Yapısı 15 4.1 DOCTYPE 15 4.2 lang 15 4.3 Character Encoding 17 4.4 <script> 17 4.5 <link> 18 4.6 HTML 5 Genel Sayfa Yapısı 18 5 New Elements 19 5.1 <article> 19 5.2 <aside> 20 5.3 <audio> 20 5.4 <canvas> 22 5.5 <command> 24 5.6 <datalist> 24 5.7 <details> 25 5.8 <embed> 27 5.9 <figure> 28 5.10 <figcaption> 30 5.11 <footer> 31 5.12 <header> 32 5.13 <hgroup> 33 5.14 <keygen> 34 5.15 <mark> 35 5.16 <meter> 36 5.17 <nav> 37 5.18 <output> 38 5.19 <progress> 39 5.20 <ruby> 40 5.21 <section> 41 5.22 <SVG> 42 5.23 <time> 43 5 5.24 <track> 44 5.25 <video> 45 5.26 <wbr> 46 6 New Form Fields & New Attributes 48 6.1 Form Fields 48 6.1.1 color 48 6.1.2 date 48 6.1.3 datetime 49 6.1.4 mail 49 6.1.5 list 50 6.1.6 number 51 6.1.7 month 51 6.1.8 URL 52 6.1.9 range 52 6.1.10 search 53 6.1.11 tel 53 6.1.12 time 54 6.1.13 week 54 6.2 New Attributes 55 6.2.1 autofocus 55 6.2.2 autocomplete 55 6.2.3 form 56 6.2.4 min & max 56 6.2.5 multiple 56 6.2.6 pattern 57 6.2.7 placeholder 57 6.2.8 required 57 6.2.9 step 57 7 Drag-N-Drop 59 8 Geolocation 63 9 Local Storage 67 9.1 Local Storage 67 9.2 Session Storage 71 10 Web Workers 73 11 New Events 78 12 HTTP Status Message 81 KAYNAKLAR 84 6 BÖLÜM 1: HTML 1.1 HTML Nedir? HTML (Hyber Text Markup Language), Türkçe'ye çevirmek istersek; Yüksek Seviye Metin İşaretleme dili anlamına gelir. Web sayfalarını bir insana benzetirsek: HTML; bu insanın iskeleti, CSS; ete kemiğe bürünmüş hali ve JavaScript ise bu insanın hareket kabiliyetidir. Buradan çıkacak olan sonuç; HTML bir web sayfasının en temel yapısını oluşturur. Evet, HTML'yi bir iskelet gibi düşünebiliriz. Zira bir ev inşaa etmeye kalktığımızda ilk olarak o evin temelini hazırlarız ve iskeletini yaparız. Web sayfaları da aynen böyledir. HTML bir programlama dili değildir. Bir Markup dilidir. Yani içeriğin nasıl ve nerde duracaklarını belirleme görevindedir. Bunun dışında herhangi bir görevi bulunmamaktadır. Sadece HTML ile hazırlanan sayfalar Static durumdadır yani herhangi bir işlemi yerine getiremezler. Yalnızca nereye hangi içeriği eklemiş isek gövdesinde onları barındırırlar. HTML, Berners Lee tarafından 1991 yılında geliştirilmiştir. Günümüze kadar farklı sürümleri çıkarılmıştır. Zira bu kitabın konusu da temel HTML değildir, HTML'nin son geldiği nokta olan HTML 5'tir. Şimdi HTML'in sürümlerine bakalım. HTML Version Publish Date HTML 1.0 1991 HTML 2.0 1995 HTML 3.0 1997 HTML 4.01 1999 HTML 5 2008 Yukarıdaki tabloyu incelediğimizde HTML'nin diğer sürümlerinin çıkış tarihlerini de görebiliyoruz. Burada demek istediğim başka bir şey var. Her yeni çıkan HTML sürümünde yenilikler gelmiştir fakat HTML bir bütündür. Bu zamana kadar çıkan Tags (Etiketler), hala kullanılmaktadır. Yani demek istediğim her yeni sürümde HTML'ye yeni etiketler ekleniyor. Bir anlamda; dönemin şartlarına göre yeni etiketler ekleniyor ve HTML genişletiliyor. Ve son olarak; HTML'nin gelişimi kesintisiz devam etmektedir. 1.2 HTML 5 HTML 5, 2008 yılında; W3C (World Wide Web Consortium) ve WHATWG (Web Hypertext Application Technology Working Group) tarafından geliştirilmiştir. Bu iki topluluk tarafından HTML 5'in geliştirilmesi kesintisiz bir şekilde devam edilmektedir. HTML 5, bir çok yeniliği de beraberinde getirmiştir. Görünen o ki her yeni gelen versiyonla birlikte 7 HTML diğer bir çok aracı da saf dışı edecek. Örneğin daha önce animasyon içeren ya da başka bir deyişle uçan-kaçan içeriklerin olduğu web sitelerinde sıklıkla Adobe Flash kullanılırdı. HTML 5 ile Flash çöpe gitti diyebiliriz. Bunun dışında Java'nın 1.2 sürümüyle ortaya çıkan Applet'ler de artık tarihe karışmak üzere. Tabi ki bütün suç HTML 5'in değil. HTML 5 çıkalı çok olmadı fakat artık; hem yazılım geliştiriciler hemde orta ve büyük çaplı platformlar web ortamlarına HTML 5'i dahil etmeye başladılar. Örneğin Facebook artık HTML 5 kullanıyor. Bunu kullanıcı giriş ekranından bile anlayabilirsiniz. Bunun dışında daha bir çok platform var. HTML 5 ile birlikte JavaScript ve CSS artık üçü ayrılmaz bir ikili oldu. HTML 5 ile JavaScript zaten bir yapbozu oluşturan parçalar gibi. Anlatmaya çalışacağım konularda da göreceksiniz bazı konularda JavaScript'ten destek alacağız. Bunun dışında HTML 5 adına söyleyecek çok söz var ama söyleceklerimi diğer bölümlere bırakıyorum. Diğer bölümlerde fazlaca değineceğiz. 8 BÖLÜM 2: HTML 5 için Tarayıcı Testi Bu bölümde HTML 5 için tarayıcı testi yapacağız. Bu testi yapmamızın amacı; çoğu tarayıcılar HTML 5'e tam destek vermemektir. Bu test ile tarayıcıların HTML 5 için uygun olup olmadıklarını kontrol edeceğiz ve uygun olanlar arasında en yüksek orana ulaşan tarayıcı ile konularımızı işlemeye başlayacağız. Yani bu bir anlamda tarayıcı seçimi olacaktır. Öncelikle HTML 5 tarayıcı testi için kullandığınız herhangi bir tarayıcı ile aşağıdaki adrese gidelim. http://html5test.com Hangi tarayıcı veya tarayıcıları test etmek istiyorsak, yukardaki vermiş olduğum adrese bu tarayıcılarla ayrı ayrı bağlanıp, bu tarayıcıların puanlarına bakmamız gerekiyor. Örneğin benim sisteminde; Chromium, Firefox Mozilla, Opera ve Midori tarayıcıları kurulu durumda. Ubuntu kullandığım için; Internet Explorer ve Yandex gibi tarayıcılar sistemimde bulunmamakta. Lakin sizin bilgisayarınızda kurulu ise bu tarayıcıları da test edebilirsiniz. Yukarıdaki adrese bağlandığımızda tarayıcımızın, çeşitli HTML 5 elementlerinin hangilerine destek verip / vermediği gösterilmektedir. Bu sayfayı detaylı olarak inceleyebilirsiniz. Ilk olarak Firefox Mozilla ile başlayalım. [version: 39.0.3] Yukarıdaki ekran alıntısında da görüldüğü gibi; Firefox Mozilla, 555 puan üzerinden 466 puanda. Yani genel olarak iyi bir puan fakat ne kadar yüksek olursa bizim için iyi olur. O yüzden diğer tarayıcılara da bakalım. 9 Opera'ya bakalım. [version: 12.16] Görüldüğü gibi Opera'nın puanı 338. Yani Firefox Mozilla'dan daha düşük. Midori'ye bakalım. [version: 0.4.3] Görüldüğü gibi Midori'nin puanı Opera'dan daha yüksek. Lakin pek çok insan adını bile duymamıştır, eminim. Son olarak Chromium'a bakalım. [version: 43.0.2357.130] 10