Fatih Hayrioğlu'nun not defteri » DOCTYPE http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Mon, 09 Jan 2012 08:44:45 +0000 en hourly 1 http://wordpress.org/?v=2012 HTML5: Doküman Yapısını Oluşturan Elemanlar http://www.fatihhayrioglu.com/html5-dokuman-yapisini-olusturan-elemanlar/ http://www.fatihhayrioglu.com/html5-dokuman-yapisini-olusturan-elemanlar/#comments Sat, 27 Nov 2010 16:28:29 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1962 HTML5 ve CSS3 hayatımıza girmeye başladı. Her ne kadar Microsoft nedeni ile tam olarak kullanmasakta birçok makale ve örnek uygulamayı takip ediyoruz. Hala geliştirilmekte olan özellikleri ile bu yeni teknolojilerin hayatımıza girişi bize birçok güzellik kazandıracaktır.

Bir çok makale okuyorum ve uygulama görüyorum ama HTML5 ile bir şey yapmak daha nasip olmadı bana. HTML5 hakkında okuduklarım ve araştırdıklarım konulardan bir tanesi de konu başlığından anlaşılabileceği gibi. HTML dokümanının yapısını oluşturan elemanlar hakkında ufak bir yazı yamayı planladım. Aslında mevcut HTML’de farkını yazacağım. Daha bir sadeleştirilmiş diyebiliriz.

DOCTYPE

Doğru DOCTYPE Kullanımı hakkında bir makalem vardır. Doctype, dokümanın tipi gösteriyor yorumlayıcıya(tarayıcıya). Bu tanımlar çok uzun metinler içeriyordu ancak HTML5 bu tanımı kısaltmış ve çok güzel yapmış.

Şimdiye kadar ve hala kullanmakta olduğumuz bir doctype örneği,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Yukarıdaki HTML etiketi bize bu html dokümanının xhtml 1.0 olduğunu ve Transitional ise hem HTML hemde XHTML kurallarının bu dokümanda geçerli olduğunu gösteriyor. Peki HTML5’de bu işi nasıl yapıyoruz.

<!DOCTYPE html>

Bu kadar, kısa ve hafıza da kalıcı. HTML kodlarını Not Defteri ile  yazdığım dönemlerde çok çekerdim bu Doctype tanımlarında. Git bir yerden örneğini al falan. Sonra Dreamweaver bunu otomatik ekliyordu da yazmaktan kurtulmuştum. Açıkçası ben hiç bir zaman yukarıdaki HTML5 öncesi kodu aklıma yazamadım.

Doctype Etiketinin kapama etiketi ve işareti yoktur ve küçük büyük harf duyarlılığı yoktur.

HTML5 öncesi sürümler SGML kökenli diller olduğu için DTD tanımlarına gereksinim duyardı ancak HTML5 SGML kökenli olmadığı için buna gerek duymaz. 

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
...
</body>
</html>

Peki burada bir sürüm numarası yok nasıl sonraki sürümler ile bunu ayıracağız?

Burada şöyle bir şey var HTML5 geliştirilirken eğer buraya bir sürüm numarası verilse idi mevcut bütün web siteleri bu kapsam dışında kalacaktı, ama bu şekilde bir tanım ile eski ve yeni tüm dokümanlar aynı kefeye konmuş oldu. Geçmişide destekleyen bir yapıya kavuşturulmuş oldu.

Aslında yeni nesil tarayıcılar bir tanım yapılmasa daha standart modda belgeyi tanımladığı için Doctype’ın pek bir geçerliliği kalmamış idi ama yinede bir tanım yapmak iyidir. İE’nin ne yapacağı belli olmaz.

<html> Elemanı

Html dokümanlarını çevreleyen kapsayıcı bir elemandır <html> html5 öncesinde tanımımız

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Şeklinde idi. Buradaki xmlns değeri bu dokümanın anaçatısının http://www.w3.org/1999/xhtml kullandığını gösteriyor. HTML5 anaçatısı belli olduğu için tekrar tanımlamaya gerek duymuyor ve ayrıca iki adet dil tanımınında gereksiz olduğunu kabul ediyor ve sonuçta html5’teki tanımımız;

<html lang="en"></html>

şeklinde oluyor.

<head> içi tanımlar

HTML5 sadece Doctype tanımını değil ayrıca <head> içinde kullandığımız etiketleride ciddi manada basit hale getirmiştir.

Karakter kodu için kullandığımız 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Yerine HTML5 karışılığı

<meta charset="UTF-8">

Gayet basit ve akılda kalıcı.

Gelelim script eklemek için kullandığımız koda;

<script type="text/javascript" src="dosya_adi.js"></script>

HTML5′de ise;

<script src="file.js"></script>

Benzer şekilde ilişkilendirilmiş dokümanlar için kullandığımız

<link rel="stylesheet" href="style-original.css" type="text/css" />

yerine HTML5′de

<link rel="stylesheet" href="style-original.css" />

İşin kısacası, tüm tanımları olabildiğince kısaltmışlar. Süperde yapmışlar, şimdiye kadar bize çektirdikleri eziyet neydi kardeşim.

Sonuç olarak bir HTML5 basit yapısı

<!DOCTYPE html>
<html lang="">
<head>
 <meta charset="utf-8">
   <title></title>
   <meta name="description" content="" />
     <meta name="keywords" content="" />
   <meta name="robots" content="" />
</head>
<body>
</body>
</html>

Şeklinde olacaktır.

Kaynaklar

]]> http://www.fatihhayrioglu.com/html5-dokuman-yapisini-olusturan-elemanlar/feed/ 9 Doğru DOCTYPE Kullanımı http://www.fatihhayrioglu.com/dogru-doctype-kullanimi/ http://www.fatihhayrioglu.com/dogru-doctype-kullanimi/#comments Fri, 15 Sep 2006 20:59:55 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=164 DOCTYPE, HTML veya (X)HTML dökümanımızın tipini göstermek için kullandığımız bir koddur.

DOCTYPE bildirimi (X)HTML kodunun başına bir veya iki satır olarak eklenir. Genel kullanımı:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Burada dökümanımızın XHTML 1.0 verisyonu dikkate alınarak yazıldığı ve kullanılan bu kuralların linki verilmiştir. Linkin kullanılmadığı şeklide vardır.

Bu tanımlamadan sonra web tarayıcıları bu kurallara göre sayfayı yorumlayacak ve buna göre bir görünümü kullanıcıya sunacaktır. Web tarayıcıları kullanılan Döküman tip tanımlamasına(DTD-document type definition)göre sayfayı analiz eder.

Web Sayfalarını Doğrulama "Onaylama"

Güzel bir kodlama, (X)HTML dökümanın onyalanmış halidir. Web sayfalarımız doğrulamak için genelde http://validator.w3.org/ adresi kullanılırız. Ancak bir çok web sayfası hazırlama editörü bu aracı içinde barındırır.Web sayfalarımız doğrulattığımızda sonuç olarak bize sayfamızda bir sorun varsa bunuve niçin olduğunubelirtir.

Doğrulam işlemi önemlidir çünkü bizim kodlarımızı doğru yazdığımızı kontrol eder. Kodlarınızı belirli aralıklarla doğrulmayı unutmayın. şžunu unutmayalım ki web sayfasını doğrulamamız bunu en mükemmel kod olduğu anlamına gelmez. Ayrıntı için tıklayınız.

Web tarayıcı mod’ları

Web tarayıcı üreticileri geriye dönük uyumluluğu sağlamak için standarlara uygun tarayıcılar çıkardıklar. Bunu başardılar, bu işlem için iki mod ürettirler: standart mod(standards mode) ve garip mod(Quirks mode). Standart mod sayfa ayrıntılı olarak ve en iyi şekilde yorumlayacaktır,Garip mod da ise eski moda tarayıcılardaki gibi daha duyarsız davranacaklardır. Örneğin IE4 ve NN4 gibi.

Bu iki mod arasındaki farkı görebilemke için Windows üzerindeki IE’de kutu modeline bakmalıyız. IE6 başlangıçta Standart Mod da Kutu Modeli doğru görünürken Garip Mod da ise sorun çıkarır. IE5 ve aşağısında bu sorun vardır, ayrıca Opera 7 ve üsrü Garip Mod da IE gibi davranır. Bunun dışında ufak tefek sorunlar da vardır. Hekzedesimal renk tanımında # kullanımına ihtiyaç duymama, CSS’de değer kullanılmadığında birimi piksel olarak tanınması vb. sorunlar olarak sıralayabiliriz.

Mozilla ve Safaride bir üçüncü mod vardır, ancak Standart Mod’dan çok önemli bir farkı yoktur.

DOCTYPE Geçişleri

Web tarayıcıları DOCTYPE bildirimi ve kullanılan DTD’ye göre tarama metodunu belirler. Bir dökümanda DOCTYPE tanımı yapılırsa bu sayfa Standart Mod da, yapılmazsa Garip Mod da yorumlanacaktır bu geçişe DOCTYPE Geçişi(DOCTYPE switching) adı verilir.

  • XHTML dökümanında tam bir DOCTYPE tanımı yapıldı ise web tarayıcısı taramayı Standart Mod da yapacaktır.
  • HTML 4.01 dökümanı için DOCTYPE ve strict DTD tanımı yapıldığında sayfa web tarayıcısı tarafından StandartMod da yorumlanacaktır.
  • DOCTYPE ve transtional DTD URI tanımlı halin de Standart Mod da yorumlanacaktır.
  • DOCTYPE ve transtional DTD URI’siz ise Garip Mod da yorumlanacaktır.
  • Kötü formatlanan veya DOCTYPE kullanımılmayan dökümanlar HTML ve XHTML tarafında Garip Mod da yorumlanacaklardır.

Web tarayıcılarının DOCTYPE tiplerine göre farklılıklarını görmek için http://www.ericmeyeroncss.com/bonus/render-mode.html bir göz atın.

Çok uğraşıp en iyi ve en doğruCSS kodunu yazdıktan sonra yanlış DOCTYPE kullandığınızda sayfanız Garip Mod da yorumlanacaktır ve bu size bir çok sorun oluşturacaktır. Sitenizde tam DOCTYPE bildirimive strict DTD kullanmanız çok önelidir.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Bu kullanım sayfanın HTML 4.01 kurallarının geçerli olduğu bir HTML dosyası olduğunu gösterir. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bu kullanım sayfanın hem HTML hemde XHTML kurallarının geçerli olduğunu bir XHTML dosyası olduğunu gösterir. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bu kullanım sayfanın sadece XHTML1.0 kurallarının geçerli olduğu bir XHTML sayfası olduğunu gösterir. Bu kodlama yapıldığıında tüm XHTML kurallarına harfiyen uyulmalıdır. Örneğin kodların hepsinin küçük harfle yazılması gibi. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Bu kullanım sayfanın bir XHTML çerçeve(frame) sayfası olduğunu gösterir. Kullanımı azaldı.

Biz burada sizlere DOCTYPE tanımlamanın nasıl olduğunu ve önemini anlatmaya çalıştık. Bir çok HTML ediötürü DOCTYPE taınımını otomatik ekleyecektir.

]]> http://www.fatihhayrioglu.com/dogru-doctype-kullanimi/feed/ 64