XHTML1, HTML4 ve HTML5 Farklılıkları Öncelikle sayfa tanımlamasındaki farklılıklar HTML'in zamanla yetersiz kalmasından dolayı yeni versiyonları çıkmaktadır. 1. DOCTYPE Tanımlaması HTML5'ten önce sayfayı kodlamaya DOCTYPE tanımlaması ile başlardık, çünkü bu tanımlama sayesinde browserlar "garip" moddan çıkıp standart modda sayfa kodlarını değerlendirirlerdi. HTML4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> veya <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> HTML5 <!DOCTYPE html> Bu kadar kısa işte... Bu 15 karakter tarayıcınızın "quirks" yani "garip" mod ile sayfanıza bakışını kaldırıp standart modda sayfanıza bakmasını sağlayacaktır. 2. Sayfanın Dili HTML4 <meta name="content-language" content="tr" /> HTML5 <html lang="tr"> www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 1
3.Karakter Kodlamasının Tanımlanması HTML4 <meta http-equiv="content-type" content="text/html; charset=windows-1254" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-9" /> HTML5 <meta charset="utf-8" /> Basit Bir Web Sayfa Kodları XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="content-language" content="tr" /> <title>hello World! XHTML 1 Strict</title> </head> <body> <p>hello World!</p> </body> </html> HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=utf-8"> <meta name="content-language" content="tr" /> <title>hello World! HTML 4 Strict</title> </head> <body> <p>hello World!</p> </body> </html> HTML5 <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>hello World! HTML 4 Strict</title> </head> <body> <p>hello World!</p> </body> </html> 3. Yeni Gelen Tagları Eski Tarayıcınız Kabullenmiyorsa <!DOCTYPE html> <html lang="en"> <head> www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 2
<meta charset="utf-8" /> <title>styling Unknown Elements - 4</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Böyle bir google yaması işinize yarayabilir. the shiv ile tanışmış oldunuz. Kodlamayı yaparken HTML5 kodlarınızı test etmek için şu adresleri öneririm. http://j.mp/whatwg-validator http://j.mp/htmllint Tarayıcınızın ne kadar HTML5 dekteklediğini anlamak için www.html5test.com/ adresini tavsiye ederim. 4. HTML5 deki Semantic Elemanlar Yeni HTML5 semantic elemarı aşağıdadır. Semantic derken daha çok anlamlı Tagler demek istiyoruz. Eskiden bir tag grubuna baktığınızda nereye ait olduğunu anlamak zorken şimdi anlamlı kelimeler kullanarak buna son verebiliyoruz. Tag <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> Description Bir yazı veya makale tanımlar ve içerisinde genellikle <section> tagları kullanılır. Defines content aside from the page content Defines additional details that the user can view or hide <figure> Tagı içerisinde yer alan resim Tagına ait resim açıklamasının yazıldığı bölümdür. Resim, diagram gibi göresel bir öğenin yer aldığı bölüm. Bir Web safyasının en alt bölümünü veya bir bölümün <section> içerisindeki en alt bölümü ifade eder. Bir Web safyasının en üst bölümünü veya bir bölümün <section> içerisindeki en üst bölümü ifade eder. İçerisinde sırasıyla <article> ve <section> taglarını barındıran sitenin ana bölümü Defines marked/highlighted text Linklerin tanımlandığı bölüm Genellikle <article> tagı içerisinde yer alan bölüm anlamındaki bölüm Defines a visible heading for a <details> element Defines a date/time www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 3
www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 4
www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 5
HTML5 <article> Tagı: <article> elemanının kullanıldığı yerlere örnekler <article> Forum postları Blog postları Haber veya Duyurular Yorumlar www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 6
<h1>internet Explorer 9</h1> <p>windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT...</p> </article> HTML5 <nav> Tagı: Büyük link bölümlerini tanımlamak için kullanılır. Örneğin sitenin ana menülerini. <nav> <a href="/html/">html</a> <a href="/css/">css</a> <a href="/js/">javascript</a> <a href="/jquery/">jquery</a> </nav> HTML5 <aside> Tagı: Sidebar gibi asıl içeriğin kenarında yer alan içerikleri tanımlamak için kullanıyor. <p>my family and I visited The Epcot center this summer.</p> <aside> <h4>epcot Center</h4> <p>the Epcot Center is a theme park in Disney World, Florida.</p> </aside> 5. Yapısal Yapı Taşları: <div>, <section> ve <article> <div> Genel bloklayıcı veya Kontainer. Hepimiz biliyoruz ve kullanmayı seviyoruz. DIV bir akışkan içerik elemandır ancak özel anlam (semantic) içermeyen bir tagdır. <section> Genel bir doküman bölümü için kullanılır. Genellikle bir başlıkla (<header>) ve bazende bir altlıkla (<footer>) kullanılır. Örneðin ilgili içeriðin bir parçası, uzun bir yazının alt bölümleri, sayfanın önemli bir bölümü veya bir web uygulamasının içindeki tab menüdeki sayfa gibi olabilir. <article> Bir dökümanın veya sitenin bagımsız bölümleri için kullanılır. Yani yalnız başına bir bölüm olmalı ve tabiki site içerisinde mantıklı bir karşılıðı olmalı. Örneðin Bir weblog yazısı, bir forum postu, bir yorum gibi... Peki bunlar arasındaki farklar neler? <div>, <section>, and <article> <div> Tagı: Biz divi genellikle içeriði düzgünce katagorize etmek için kullanırız. Aslında böyle bir kullanımda DIV herhangi bir anlamlı (semantic) durum belirtmez. Biz DIV'i daha uygun bir eleman bulamadıðımız için kullanmaktayız. DIVler bir birinden bagımsızdır. <section>tagı: Aslında bu yeni tag DIV tagına çok benzer. Buda genel bir blok elemanıdır, fakat bunun bazı ek anlam içeriği (semantic) vardır. Mesela içeriğin içinde bir mantıksal grup barındırır. <article> Tagı: ARTICLE elemanını daha özel anlamlı bir SECTION elemanı gibi düşünebilirsiniz. Daha bagımsızdır ve daha fazla anlamı olan bir tagdır. ARTICLE yerne SECTION kullanabiliriz, fakat ARTICLE daha fazla anlamlı (semantic) bir sonuç verir. Bu unsurların kullanım temelleri: Yukarda anlatılanları bir örnekle kıyaslayalım. Şöyle bir yapı ile çalışalım mesela: Weblog article Başlık İçerik... HTML4 ile kodlarsak: www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 7
<div class="article"> <h1>başlık</h1> <p>içerik...</p> </div> HTML5 ile kodlarsak: <article> <h1>başlık</h1> <p>içerik...</p> </article> Alt bölümleri olan daha uzun bir örnek <figure> Tagı: Herhangi bir resim ve o resme ait resim yazısı için kullandığımız HTML5 tagı. <figure> <img src="/macaque.jpg" alt="macaque in the trees"> <figcaption>a cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">richard Clark</a></figcaption> </figure> Örnek HTML5 Sayfa Yapısı: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 8
<title>untitled Document</title> </head> <body> <header></header> <nav> <!--Menulerin oldugu bolum--> <a href="/html/">html</a> <a href="/css/">css</a> <a href="/js/">javascript</a> <a href="/jquery/">jquery</a> </nav> <main> <article> <!--bagımsız paragrafları belirtir--> <h1>google Chrome</h1> <p>google Chrome is a free, open-source web browser developed by Google, released in 2008.</p> </article> <article> <header> <h1>most important heading here</h1> <h3>less important heading here</h3> <p>some additional information here</p> </header> <p>lorem Ipsum dolor set amet...</p> <section> <h1>wwf</h1> <p>the World Wide Fund for Nature (WWF) is...</p> </section> </article> <aside> <!--Sol yada sag taraftaki menuyu belirtir--> <dl> <dt>css</dt> <dd>a set of standards for styling documents presented on the World Wide Web.</dd> <dt>php</dt> <dd>a server-side scripting language suited to dynamic HTML document generation for the web.</dd> <dt>javascript</dt> <dd>a client-side scripting language used for manipulating HTML documents within a browser.</dd> </dl> </aside> <details><!--detay içerikleri belirtir--> <summary>copyright 1999-2014.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>all content and graphics on this web site are the property of the company Refsnes Data.</p> </details> <figure> <!-- Resimlerin bu şekilde kullanılması gerekir--> <img src="img_pulpit.jpg" alt="the Pulpit Rock" width="304" height="228"> <figcaption>fig.1 - A view of the pulpit rock in Norway.</figcaption> </figure> <footer><!-- sayfa altı bilgileri bur div içinde yer alır --> <p>posted by: Hege Refsnes</p> <p>contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer> </main> </body> </html> Kaynaklar: http://www.w3schools.com/html/html5_semantic_elements.asp http://www.serkanbektas.com/html5-tercih-nedenleri.html www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 9
www.dijitalders.net XHTML1, HTML4 ve HTML5 Farklılıkları 10