HTML sayfalarının başında <head> elemanı bulunur. Bu etiketler arasındaki kısım sayfa hakkında bilgiler içerir. Bu bilgiler sadece bilgi amaçlı olabileceği gibi işlevsel de olabilir.
<title>
<title> etiketleri arasına sayfanın başlığı yazılır. Bu başlık tarayıcılarda sekme kısmında görünür. Bunun dışında sayfa sık kullanılanlara eklendiğinde bu isimle eklenir ve arama motorları da sonuçlarında bu bilgiyi görüntüler. Her HTML dokümanında <title> elemanının olması gereklidir. <title> elemanı <head> etiketleri arasına yerleştirilir ve bir sayfada en fazla bir tane olabilir.
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sayfa</title>
</head>
<body>
<p>Bu örnek bir HTML sayfasıdır. Tarayıcının sekme göstergesinde "Örnek Sayfa" yazısı görünmelidir.</p>
</body>
</html>
<base>
<base> elemanı sadece açılış etiketiyle kullanılan bir elemandır ve target ve href niteliklerinden en az biriyle birlikte kullanılmalıdır. target niteliği _self, _blank, _parent, _top ve "çerçeve ismi" değerlerinden birini alabilir. Burada belirtilen değer sayfadaki linklerin açılacağı yerin varsayılan değeri olur. Bu değerlerin ne manaya geldiği "Linkler" kısmında anlatılmıştır.
href niteliğinin karşısına bir adres girilir ve bu adres bundan sonra izafi adres belirtileceğinde baz alınan nokta olur. Buraya girilecek adres kesinlikle tam adres olmalı, baz alınan mevcut sayfaya göre izafi bir adres olmamalıdır.
Örnek olması açısından aşağıdaki dosya indirilebilir.
Bu dosyada "Base" klasörü bulunmakta ve hem bu klasörde hem de bu klasör içinde yer alan "alt_klasor" klasöründe birer tane "ornek.html" isimli dosya yer almaktadır. Şimdi "Base" klasörü içinde aşağıdaki kodları içeren bir HTML dosyası oluşturun.
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sayfa</title>
<base target="_blank">
</head>
<body>
<a href="ornek.html">Buraya tıklayınız</a>
</body>
</html>
Buradaki linke tıkladığınızda oluşturduğunuz sayfa ile aynı klasördeki "ornek.html" dosyası açılacaktır. Çünkü şu halde baz değer sayfanın içinde bulunduğu "Base" klasörüdür. <base> etiketi içerisindeki target niteliği ile sayfadaki linklerin yeni bir sekme ya da pencerede açılacağı belirtildiği için link bu şekilde açılacaktır. Şimdi oluşturduğunuz HTML dosyasının içeriğini aşağıdaki ile değiştirin. href niteliğinin karşısındaki değer tam olarak alt klasörün adresi olmalıdır.
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sayfa</title>
<base href="C:\...\Base\alt_klasor\>
</head>
<body>
<a href="ornek.html">Buraya tıklayınız</a>
</body>
</html>
Buradaki linke tıklandığında açılacak olan dosya "alt_klasor" klasörü içerisindeki "ornek.html" dosyası olacaktır. Çünkü <base> etiketi içerisindeki href niteliğiyle, izafi adres verilirken baz alınacak değer "alt_klasor" isimli klasör olarak belirtilmiştir. <base> etiketi <head> etiketlerinin arasında kullanılır ve her HTML sayfasında sadece bir tane <base> elemanı olabilir.
<link>
<link> etiketi de sadece açılış etiketiyle kullanılan bir etikettir, <head> etiketleri arasına yazılır ve mevcut sayfayla bir başka doküman arasında bir ilişki olduğunu belirtir. Bir HTML sayfasında birden fazla <link> elemanı bulunabilir. Aşağıda kurulabilecek ilişkilerin tamamı verilmiştir ama bu elemanın genel kullanımı sayfaya biçimlendirme yapan bir CSS dosyası bağlamak şeklindedir.
href niteliği kullanılarak mevcut sayfanın ilişkili olduğu dokümanın adresi belirtilir. Kullanımı href="URL" şeklindedir. Verilecek adres tam adres ya da baz alınan noktaya göre izafi bir adres olabilir. hreflang niteliği de mevcut sayfayla ilişkisi olduğu belirtilen dokümanın dilini belirtir. Kullanımı hreflang="dil_kodu" şeklindedir.
rel niteliği belirtilen dokümanla mevcut sayfanın ilişkisinin ne olduğunu belirtir. Kullanabileceği değerler şunlardır:
alternate: Belirtilen dokümanın mevcut sayfanın alternatif bir versiyonu olduğunu belirtir.
archives: Belirtilen dokümanın mevcut sayfayı arşivleyen bir doküman olduğunu belirtir.
author: Belirtilen dokümanın yazının yazarı hakkında bilgi veren bir doküman olduğunu belirtir.
first: Belirtilen dokümanın bir serideki ilk sayfa olduğunu belirtir.
help: Belirtilen dokümanın bir yardım dokümanı olduğunu belirtir.
icon: Belirtilen dokümanın sayfanın simgesi olduğunu belirtir. Burada belirtilen görsel tarayıcı sekmesinde de görülecektir.
index: Belirtilen dokümanın hiyerarşik bir yapıdaki en üst doküman olduğunu belirtir.
icon: Belirtilen dokümanın sayfanın simgesi olduğunu belirtir. Burada belirtilen görsel tarayıcı sekmesinde de görülecektir.
index: Belirtilen dokümanın hiyerarşik bir yapıdaki en üst doküman olduğunu belirtir.
license: Belirtilen dokümanın sayfadakilerin telif haklarıyla alakalı bir doküman olduğunu belirtir.
last: Belirtilen dokümanın bir serideki son sayfa olduğunu belirtir.
next: Belirtilen dokümanın bir serideki bir sonraki sayfa olduğunu belirtir.
sidebar: Belirtilen dokümanın kenar çubuğu gibi ikincil bir ortam için uygun olduğunu belirtir.
stylesheet: Belirtilen dokümanın sayfayı biçimlendiren bir doküman olduğunu belirtir. Eğer type niteliği ile dokümanın tipi belirtilmemişse varsayılan tip değeri text/css olur.
pingback: Belirtilen dokümanın mevcut sayfayla ilgili "pingback" işlemlerini yürüten doküman olduğunu belirtir.
stylesheet: Belirtilen dokümanın sayfayı biçimlendiren bir doküman olduğunu belirtir. Eğer type niteliği ile dokümanın tipi belirtilmemişse varsayılan tip değeri text/css olur.
pingback: Belirtilen dokümanın mevcut sayfayla ilgili "pingback" işlemlerini yürüten doküman olduğunu belirtir.
prefetch: Belirtilen dokümanın ön belleğe alınması gerektiğini belirtir.
prev: Belirtilen dokümanın bir serideki bir önceki sayfa olduğunu belirtir.
search: Belirtilen dokümanın bir arama aracı olduğunu belirtir.
tag: Belirtilen dokümanın sayfayla alakalı bir etiketi tanımladığını belirtir.
up: Belirtilen dokümanın hiyerarşik bir yapıdaki bir üst doküman olduğunu belirtir. Kaç seviye üstteki bir doküman olduğunu belirtmek için birden fazla up da yazılabilir.
media niteliği belirtilen dokümanın hangi ortamlar için mevcut sayfayla ilişkili olduğunu belirtir. Eğer verilen ilişkilerde çakışma olursa, örneğin belli bir ortam için iki farklı biçim dosyası ile ilişkilendirme yapıldıysa son yazılan ilişki geçerli olacaktır.
media niteliğine girilebilecek cihaz/ortam değerleri şunlardır:
all: Belirtilen ilişkinin tüm cihazlar için geçerli olduğunu belirtir. Eğer media niteliği kullanılmazsa bu değer varsayılan olarak kabul edilir.
aural: Belirtilen ilişkinin konuşma sentezleyiciler için geçerli olduğunu belirtir.
braille: Belirtilen ilişkinin görme engellilere yönelik cihazlar için geçerli olduğunu belirtir.
handheld: Belirtilen ilişkinin avuç içi cihazlar için geçerli olduğunu belirtir.
projection: Belirtilen ilişkinin projeksiyon cihazları için geçerli olduğunu belirtir.
print: Belirtilen ilişkinin yazdırma için geçerli olduğunu belirtir.
screen: Belirtilen ilişkinin bilgisayar ekranları için geçerli olduğunu belirtir.
tty: Belirtilen ilişkinin teleks ya da benzeri sabit karakter büyüklüğüne sahip cihazlar için geçerli olduğunu belirtir.
tv: Belirtilen ilişkinin televizyon tipi düşük çözünürlüklü cihazlar için geçerli olduğunu belirtir.
Bunun dışında nicel ya da nitel değerler verilebilecek değerler de vardır:
width: Belirtilen ilişkinin geçerli olduğu gösterim alanının genişliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
height: Belirtilen ilişkinin geçerli olduğu gösterim alanının yüksekliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
device-width: Belirtilen ilişkinin geçerli olduğu cihazın ekran genişliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
device-height: Belirtilen ilişkinin geçerli olduğu cihazın ekran yüksekliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
aspect-ratio: Belirtilen ilişkinin geçerli olduğu gösterim alanının genişlik/yükseklik oranını belirtir. max- ve min- ön ekleri de kullanılabilir.
device-aspect-ratio: Belirtilen ilişkinin geçerli olduğu cihazın ekranının genişlik/yükseklik oranını belirtir. max- ve min- ön ekleri de kullanılabilir.
orientation: Belirtilen ilişkinin manzara veya portre görünümlerinden hangisinde geçerli olduğunu belirtir. Manzara görünümü genişliğin yükseklikten büyük olduğu, portre görünümü yüksekliğin genişlikten büyük olduğu görünümü belirtir. Girilebilecek değerler landscape ve portrait olmak üzere iki tanedir.
color: Belirtilen ilişkinin geçerli olduğu ortamdaki renk başına bit değerini belirtir. max- ve min- ön ekleri de kullanılabilir.
color-index: Belirtilen ilişkinin geçerli olduğu ortamın desteklediği renk sayısını belirtir. max- ve min- ön ekleri de kullanılabilir.
monochrome: Belirtilen ilişkinin geçerli olduğu gri skalada çalışan cihazdaki piksel başına bit değerini belirtir. max- ve min- ön ekleri de kullanılabilir.
resolution: Belirtilen ilişkinin geçerli olduğu ortamın piksel yoğunluğunu belirtir. max- ve min- ön ekleri de kullanılabilir.
grid: Belirtilen ilişkinin LCD displayer ya da teleks gibi sabit karakter genişlikli bir ortam için mi yoksa bilgisayar ekranı gibi bitmap bir ortam için mi geçerli olduğunu belirtir. Girilen değerin 1 olması geçerli olduğu ortamın tek tip karakterli ortam olduğunu, 0 olması bitmap bir ortam olduğunu belirtir.
scan: Belirtilen ilişkinin sayfanın aralıklı tarama için mi yoksa tek seferde tarama için mi geçerli olduğunu belirtir. Girilebilecek değerler aralıklı tarama için interlace tek seferde tarama için progressive şeklindedir.
Yukarıda belirtilen değerlerin kendi değerleri ise iki nokta üst üste konduktan sonra karşısına yazılır. Örneğin width:500px, scan:interlace, grid:0 şeklinde değerler girilebilir.
Değerler mantıksal işlemlerle birlikte de kullanılabilir. Bunun için kullanılabilecek mantıksal işlemler ve, veya ve değilidir. ve işlemi için "and", veya işlemi için "," ve değili işlemi için "not" kullanılır.
Örnek olarak aşağıdaki kod parçalarına bakılabilir:
media="screen and (min-width:400px)"
Yukarıdaki nitelik verilen ilişkinin minimum 400 piksel genişlikli bilgisayar ekranları için geçerli olduğunu belirtir.
media="all and (aspect-ratio:16/9)"
Yukarıdaki nitelik verilen ilişkinin minimum 16/9 genişlik/yükseklik oranlı tüm ortamlar için geçerli olduğunu belirtir.
media="print and (resolution:600dpi)"
Yukarıdaki nitelik ilişkinin 600 dpi çözünürlükte yazdırma için geçerli olduğunu belirtir.
media="(max-width:500px),(min height:700px)"
Yukarıdaki nitelik ilişkinin genişliği 500 pikselden küçük ya da yüksekliği 700 pikselden büyük gösterim alanları için geçerli olduğunu belirtir.
media="not all and (max-width:500px)"
not işlemi diğer tüm ifadenin tamamını etkiler ve verilen ortam haricindeki ortamlar için geçerli bir ilişki tanımlandığını belirtir. Yukarıdaki örnek, ilişkinin maksimum genişliği 500 piksel olan gösterim alanları haricindeki ortamlar için geçerli olduğunu belirtir.
type niteliği type="değer" şeklinde kullanılır ve ilişki tanımlanan dosyanın türü hakkında bilgi verir. Birkaç örnek verilecek olursa; PDF dosyaları için "application/pdf", PPT dosyaları için "application/powerpoint" ya da "application/mspowerpoint", PNG türündeki resim dosyaları için "image/png", html dosyaları için "text/html", CSS dosyaları için "text/css" değeri kullanılabilir. Kullanılabilecek tüm değerleri öğrenmek için internette "MIME types" şeklinde arama yapılabilir.
sizes niteliği sadece icon niteliği ile birlikte kullanılabilir ve kullanım şekli sizes="YÜKSEKLİKxGENİŞLİK" şeklindedir. Bu şekilde ilişkilendirilen dosyanın yükseklik ve genişliği belirtilir. Bu yazının yazılış tarihinde bu nitelik bilinen tarayıcılarda desteklenmemektedir.
Aşağıdaki dosya iki farklı CSS dosyası içermektedir. Bu CSS dosyalarını bir klasör içine çıkararak aşağıdaki örneği inceleyebilirsiniz. Daha sonra oluşturacağınız HTML dosyası CSS dosyaları ile aynı klasörde olmalıdır.
<!DOCTYPE html>
<html>
<head>
<title>Link - Media Örneği</title>
<link rel="stylesheet" type="text/css" href="screen.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
<body>
<p>Bu sayfa normalde screen.css dosyasında belirtilen şekilde gösterilecektir.
Sayfa yazdırılmaya çalışılırsa print.css dosyasında belirtildiği gibi arkaplan
beyaz, yazılar siyah olacak şekilde görüntülenecektir.</p>
</body>
</html>
Yukarıdaki örnek kodda mevcut sayfa ile dışarıdaki iki doküman arasında ilişki kurulmuştur. Her iki elemanda da href niteliği ile dokümanın adresi verilmiştir. rel niteliği ile dokümanın biçim dosyası olduğu belirtilmiş, type niteliği ile de bu dosyaların CSS tipinde olduğu ifade edilmiştir. İlk ilişki tüm ortamlar için geçerliyken alttaki ilişki sadece yazdırma için geçerlidir. Bu durum media niteliği ile sağlanmıştır. Sayfa tarayıcıda açıldığında "screen.css" dosyası kullanılacaktır. Arka plan ve yazı renkli olacaktır. Sayfa yazdırılacak olursa "print.css" dosyasında belirtilen biçim kullanılacaktır. Bu dosyada arka planın beyaz yazının siyah olacağı belirtilmiştir.
<style>
<style> etiketiyle HTML dokümanı biçimlendirilebilir. Bu işlem <style> etiketinin içerisinde CSS özelliklerinin yazılmasıyla yapılır. <style> etiketleri scope niteliği ile kullanılmadığı müddetçe <head> etiketlerinin arasına yazılmalıdır.
<style> etiketiyle media ve type nitelikleri kullanılabilir. media niteliğinin karşısına biçimin hangi ortamlar için geçerli olacağı yazılır. Girilebilecek değerler daha önce anlatılan media niteliğinin değerleriyle aynıdır. type niteliğinin karşısına girilen değer biçimlendirmenin hangi tür dokümana has yazım tarzıyla yapılacağını belirtir. Şu anda desteklenen tek değer text/css olmakla birlikte bu değer HTML5'te varsayılan değerdir. Bu nedenle HTML5'te type niteliğinin kullanılması gereksizdir.
<!DOCTYPE html>
<html>
<head>
<title>Link - Media Örneği</title>
<style>
p {color:#66FFFF;}
body {background-color:#000000;}
</style>
</head>
<body>
<p>Bu sayfada arkaplan siyah, yazılar turkuaz olmalıdır. Biçimlendirme buna göre yapılmıştır.</p>
</body>
</html>
scope niteliği kullanıldığında biçimlendirmenin sadece içinde bulunduğu kısım için geçerli olduğu belirtilir. Bu durumda <style> etiketleri <head> etiketleri dışında kullanılır. scope niteliğinin karşısına değer yazılmaz. Bu nitelik yazının yazıldığı an itibari ile bilinen tarayıcılardan sadece Firefox tarafından desteklenmektedir.
<!DOCTYPE html>
<html>
<head>
<title>Style - Scoped Örneği</title>
<style>
p {color:black;}
body {background-color:yellow;}
</style>
</head>
<body>
<div>
<style scoped>
p {color:white;background-color:blue;}
</style>
<p>Bu paragraf mavi zemin üzerine beyaz yazıyla yazılmış olarak görünmelidir.</p>
</div>
<p>Bu paragraf sarı zemin üzerine siyah yazıyla yazılmış olarak görünmelidir.</p>
</body>
</html>
Yukarıdaki örnekte sayfa paragraflar sarı zemin üzerine siyah yazıyla yazılacak şekilde şekillendirilmiştir. Kodların arasındaki <div> elemanı ise scoped niteliği ile paragraflar mavi zemin üzerine beyaz yazıyla yazılacak şekilde biçimlendirilmiştir. Bu biçimlendirme sadece <div> etiketleri içinde kullanılacaktır. Bu kısmın dışında kalan paragraflar sayfanın biçimlendirilmesine uyacaktır.
<meta>
<meta> etiketleri ile sayfada görünmeyen fakat arama motorları ve tarayıcılarca kullanılabilecek bilgiler verilir. <meta> elemanı sadece açılış etiketi ile kullanılır ve <head> etiketleri arasına yerleştirilmelidir. <meta> etiketi ile birlikte charset, name, http-equiv ve content nitelikleri kullanılabilir.
charset niteliği ile birlikte HTML dokümanının hangi karakter kodlaması kullanılarak oluşturulduğu belirtilir. "UTF-8" kodlaması birçok dildeki karakterleri doğru şekilde gösterir. Özellikle Türkçe kodlanan sayfalar için "windows-1254" değeri kullanabilir. Burada dikkat edilmesi gereken sayfanın oluşturulduğu karakter kodlamasıyla, burada belirtilen kodlamanın aynı olmasıdır. Sayfa Notepad'de kaydedilirken "UTF-8" seçeneği seçilmişse yazılanlar Türkçe bile olsa bu niteliğe "windows-1254" değeri girilmemelidir. Tarayıcılar bu nitelik girilmese, hatta yanlış girilse dahi doğru kodlamayı tespit edebilmektedir. Fakat bunun garantisi yoktur.
name niteliği <meta> etiketleri arasında ne bilgisi verileceğini belirtir. Alabileceği değerler application-name, author, description, generator ve keywords olabilir.
application-name değeri <meta> etiketleri arasında sayfanın hangi uygulama adıyla geçtiği bilgisinin verileceğini ifade eder.
description değeri <meta> etiketleri arasında sayfa hakkında kısa bir açıklamanın belirtileceğini ifade eder.
generator değeri <meta> etiketleri arasında sayfanın neyle oluşturulduğu bilgisinin belirtileceğini ifade eder.
keywords değeri <meta> etiketleri arasında sayfayla ilgili anahtar kelimelerin belirtileceğini ifade eder.
http-equiv niteliği ile tarayıcıya bir HTTP başlığı bildirileceği söylenir. http-equiv niteliğine üç farklı değer girilebilir. content-type değeri girilirse tarayıcıya sayfanın hangi karakterle kodlandığı bilgisi verileceği söylenir. Aynı şey doğrudan HTML5 ile eklenen charset niteliği ile de yapılabilir. default-style değeri ile sayfada kullanılacak olan biçimlendirilmenin belirtileceği söylenir. Bu yapılırsa name niteliğine de bir değer girilmelidir. Ayrıca seçilecek biçimi belirten <link> ya da <style> elementine de title niteliği ile bir isim verilmelidir. title niteliğine girilen değerle content niteliğine girilen değer birbirini tutmalıdır. refresh değeri ile de sayfanın ne kadar zamanda bir yenileneceği bilgisi verileceği söylenir.
content niteliği ile http-equiv ya da name niteliğiyle bildirileceği söylenen bilgi bildirilir.
<meta> etiketinin kullanımıyla ilgili aşağıdaki kod parçasının incelenmesi yararlı olacaktır.
<head>
<title>Meta Örneği</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, head, meta">
<meta http-equiv="refresh" content="30">
</head>
Yukarıdaki kod parçasındaki ilk <meta> elemanı tarayıcıya sayfanın UTF-8 ile kodlandığını söylemektedir. İkinci <meta> elemanındaki name niteliği bu elemanla anahtar kelimeler verileceğini ifade etmiş ve content niteliği ile de bu anahtar kelimeler bildirilmiştir. Üçüncü <meta> elemanında ise http-equiv niteliği ile bir otomatik yenileme sıklığı verileceği belirtilmiş ve content niteliği ile de bu sıklığın 30 saniye olduğu söylenmiştir.