This post is part of the series HTML5'e Geçiş Yapın
HTML5 nedir sorusunun cevabı aslında oldukça basit. HTML’in son versiyonudur. Fakat bu tanım bize pek bir şey ifade etmiyor. Aslında HTML5:
- Belirsiz veya kalitesiz biçimlendirme kodlaması yapsanız bile tutarlı bir DOM(Belge Nesnesi) yapısı üretmek için ayrıştırma algoritması oluşturur
- Multimedya ve web uygulamalarını desteklemek için yeni unsurlar ekliyor
- Mevcut HTML öğelerinin kurallarını ve anlamlarını yeniden tanımlar. Anlamdan kastettiğim semantikleri
HTML5 ile ses ve videoları direkt olarak dökümanınıza ekleyebiliyorsunuz. Satır için SVG biçimlendirmelerini kullanabiliyorsunuz. Direkt olarak input etiketlerine içerisine özellik tanımlayarak daha sağlam form deneyimleri oluşturabilirsiniz. Tuval yani canvas etiketini kullanarak oyunlar, çizelgeler ve animasyonlar oluşturabilirsiniz. Belgeleriniz çapraz belge mesajlaşması(cross-document) ile birbirleriyle iletişim kurabilir. Kısacası HTML5’e artık bir işaretleme dilinden çok uygulama platformu demek daha doğru olur.
HTML5’in Yapısı
Her HTML döküman bir veya bir kaç öğeden oluşur ve bu öğeler etiketlerle tanımlanır. HTML etiketler bir öğenin nerede başlayıp nerede durduğunu işaretlememizi sağlayan bir dizi karakterdir. Bütün etiketler küçüktür işareti(<) ile başlar ve büyüktür işareti(>) ile sonlanır. Her öğenin başlangıç veya açılış etiketi vardır ve < ile başlar ve etiketin adı ile devam eder. Etiket ismini varsa bazı özellik setlerini tanımlayarak devam ederiz ve sonra > işaretiyle kapatırız. Aşağıdaki input örneğini inceleyelim:
<input type="text" name="adiniz" disabled>
Bu örnekte type, name ve disabled özelliklerdir. İlk iki özelliğin değerleri alenen yazılmış fakat disabled için herhangi bir değer yazılmamış. Bazı öğeler boş özellikleri kabul ederler ve bu özellikler genellikle doğru/yanlış mantığı ile çalışır. Boş değer kabul eden özelliklere bir değer bile yazarsanız çalışmaya devam edecektir. Yani disabled=”true” veya disabled=”false” yazsanız bile bu input alanınız iki şekilde de devre dışı kalacaktır.
Fakat bir çok öğenin birde kapanış etiketi vardır. Bu etiket yine < işareti ile başlar ve hemen sonrasında etiket adı yerine eğik çizgi (/) konulur ve sonrasında etiket adı yazılır. Son olarak da > işareti ile kapatılır. Bununla birlikte bazı öğeler boş öğe olarak tanımlanır. Bu öğelerin herhangi bir içerik içermez ve kapanış etiketine sahip değillerdir. Yukarıdaki input örneğinde gördüğümüz öğe bir boş öğedir ve kapanış etiketi içermez. Şu anda üç aşağı beş yukarı etiketlerle ilgili temel bir bilgiye sahip olduk. Şimdi HTML5’i biraz daha yakından inceleyelim.
İlk HTML5 Dökümanınızı Oluşturun
Kullandığınız bir metin editörünü açın ve aşağıdaki kodu içine kopyalayıp yapıştırın. Bu dosyay ilk.html olarak kaydedin:
<!DOCTYPE html>
<html>
<head>
<title>ilk html</title>
</head>
<body>
<p>ilk html dökümanım</p>
</body>
</html>
Tebrikler – ilk HTML5 belgenizi oluşturdunuz. Çok çılgınca abartılı bir döküman değil fakat HTML5 temellerini içeriyor.
İlk satırımız yani
<!DOCTYPE html>
satırı gerekli bir satırdır. Bu satır sayesinde tarayıcıya “Biz HTML5 standartlarıyla hazırladık belgemizi” demiş oluyorsunuz. Bu satır olmazsa tarayıcı belgenizi yanlış ayrıştırabilir. Neden? Bunun sebebi DOCTYPE değişimidir.
DOCTYPE değişiminden kastımız tarayıcılar DOCTYPE tanımlanıza göre belgenizi farklı şekillerde ayrıştırıp işleyebilirler.
HTML 4.01 ve XHTML 1.0 DOCTYPE’larını göz önüne alırsak strict, transitional ve frameset gibi farklı modlara sahiptir. Mesela HTML 4.01‘de strict mode kullanmak istersek DOCTYPE şu şekilde olacaktır:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5 Söz Dizimi
Şimdi farklı bir HTML5 belgesini inceleyelim:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Selam</title>
<!--
Yorum yazmaya bir örnek olsun.
Aşağıdaki satırlarla CSS eklemeyi görebilirsiniz :))
-->
<link rel=stylesheet href=style.css type=text/css>
<styl>
body{
background: aliceblue;
}
</style>
</head>
<body>
<p>
<img src=cicek.jpg alt=Çiçek>
Çok güzel bir çiçek değil mi?
</p>
<p>
Evet çok güzel bir çiçek. Türü ne?
</p>
<scrpt src=oylesine.js></script>
</body>
</html>
Gördüğünüz üzere ilk satırımız yine DOCTYPE tanımını içeriyor. Diğer bütün HTML5 etiketleri gibi DOCTYPE’da aslında büyük-küçük harfe duyarlı değildir. Yani shifte basmak zor geliyorsa
<!doctype html>
de yazabilirsiniz. Sorun olmaz. Belkide Caps Lock açık bir şekilde yazmayı seviyorsunuzdur. O zaman da
<!DOCTYPE HTML>
yazabilirsiniz. Bu da bir problem değil.
Bir sonraki öğemiz
head
. Bu kısım genellikle belgenizle ilgili Karakter Kodlaması, Başlık gibi bilgiler içerir. Bu örneğimizde
head
öğesi sayfanın karakter kodlamasını gösteren bir
meta
etileti içeriyor. Karakter kodlaması tanımlaması yapmak aslında isteğe bağlıdır. Gerekli değildir fakat yapmanız kesinlikle önerilir ve mümkünse UTF-8 yapın.
UTF-8 Kullandığınızdan Emin Olun!!
Belgenizi kullandığınız metin editörü ile kaydederken BOM’suz UTF-8 karakter kodlaması ile kaydettiğinize emin olun. UTF-8 kullanırsanız projeleriniz asla Türkeç, Çinçe, Rusça vs. gibi karakter problemi yaşamazsınız.
head
öğemiz ayrıca belgemizin başlığını(
<title>Selam</title>
) içeriyor. Tarayıcıların nerdeyse hepsi
title
etiketleri arasına yazılan yazıyı pencerenin ve sekmenin üstünde yazar.
Yorumlar ise tarayıcılar tarafından işlenmeyen yazı alanlarıdır. Belgenizin kaynağını görüntülerseniz görebilirsiniz ve genellikle kendiniz için veya takım arkadaşınız için not bırakmak için yazarsınız.
<!--
ile başlayıp
-->
ile biter.
Bir belge örneğimizde olduğu gibi harici bir kaynağı işaret eden
link
öğesine sahip olabilir. Bu harici kaynaklar RSS besleme adresleri, stil dosyaları veya favicon resimleri olabilir. Harici kaynakla dökümanımızın arasındaki ilişkiyi tanımlamak içinse
rel
özelliğini kullanıyoruz. Bu örneğimizde
link
etiketi ile harici kaynaktan CSS stil dosyamıza ulaştık ve
rel="stylesheet"
ile bunun stil dosyamız olduğunu tarayıcıya söyledik.
Stillerimizi tanımlamak için bir sonraki satırda görebileceğiniz üzere
<style>..</style>
öğesini kullandık.
link
öğesi ile stil dosyamızı harici bir kaynaktan içeri aktarabildiğimiz gibi belge içerisinde de
<style>
etiketini kullanarak da stillerimizi oluşturabiliriz.
Sonuç olarak
link
ve
meta
öğelerinin birer boş öğe olduğunu da bu sayede görmüş olduk.
Tırnak İşareti Kullanmamız Gerekmiyor muydu?
Son örneğimizde farkettiyseniz öğelerin özelliklerini yazarken tırnak işareti kullanmadık. Peki özellikleri tanımlarken tırnak kullanmamıza gerek yok mu? Aslında bu sorunun cevabı hem evet hem de hayır. Eğer özelliğiniz değeri tek bir kelimeden oluşuyorsa tırnak kullanmanız gerek yoktur fakat değeri boşluk içeriyorsa kesinlikle tırnak kullanma zorunluluğunuz vardır. Çift tırnak ” veya tek tırnak ‘ kullanmak sizin zevkinize kalmış bir durumdur. Aşağıdaki örnekle bu durumu pekiştirelim:
<code class=php kodurenlendir><?php echo 'Selam!'; ?></code>
Bu örnekte
class
özelliğine iki değer verdik fakat tırnak içine almadık. Tarayıcı bunu şöyle okuyacaktır:
<code class='php' kodurenklendir><?php echo 'Selam!'; ?></code>
Sadece php değeri class olarak değerlendiriecektir ve kodurenklendir ise boş bir özellik adı olarak değerlendirilecek.
Sonuç
HTML5’in ne olduğunu sizi de fazla boğmadan anlatmaya çalıştım. Bu yazıyı yazarken HTML’e kısmen de olsa aşina olduğunuzu göz önünde bulundurarak hazırladım. Bir sonraki yazıda belgelerimizi biraz daha şekillendirmeye başlayacağız kısmet olursa. Hatalı olduğum yanlış telafuz ettiğim yerler olursa, sorularınız varsa lütfen yorum olarak bana iletin. Sevgilerimle,