HTML5'te link vermek için <a> etiketi kullanılır. Verilen linkli yazılar standart olarak mavi renkte olurlar. Eğer bu link siteyi ziyaret edenin daha önceden ziyaret ettiği bir sayfaya bağlantı veriyorsa mor renkte görüntülenir. O an ziyaret edilmekte olan linklerin rengi ise kırmızıdır. Ayrıca standart durumda linkler her zaman altı çizgili şekilde görüntülenir. Bu ayarlar CSS kullanılarak değiştirilebilir.
Linklerin üzerine gelindiğinde fare imleci el şekline dönüşür. Linke tıklandığında bağlantı verilen dokümana gidilir. Linkler yazı ya da resim şeklinde olabilir.
<a> etiketiyle birlikte kullanılan niteliklerle linkler işlevsel olarak şekillendirilir. Etiketlerin arasına ise link oluşturacak eleman yerleştirilir.
href
href niteliği <a> etiketi ile kullanılan en önemli niteliktir. Eğer bu nitelik kullanılmazsa aşağıda sıralanan diğer nitelikler de kullanılamaz. href niteliği href="URL" şeklinde kullanılır ve linkin gideceği bağlantıyı belirtir.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>
URL kısmına girilecek değerin tam bir web adresi olması şart değildir. Sayfanın baz olarak verdiği adresle göreceli olarak da bir adres verilebilir. Sayfanın baz olarak verdiği adres bulunduğu klasördür. Şimdi deneme olarak "deneme_klasor" isminde bir klasör açabilirsiniz. Bunu yaptıktan sonra aşağıdaki kodu kullanarak bu klasör içinde "deneme.html" ve "deneme2.html" adlı iki HTML dosyası oluşturun. Ardından aynı klasör içine "deneme_klasor2" isminde bir klasör açın ve yine aşağıdaki kodu kullanarak bu yeni klasör içinde "deneme3.html" isimli bir HTML dosyası oluşturun. Bu üç dosyanın birbirinden farkını sezebilmeniz için <p> etiketleri arasındaki "Deneme" yazısını "deneme2.html" ve "deneme3.html" dosyaları için sırasıyla "Deneme 2" ve "Deneme 3" olarak değiştirebilirsiniz.
<!DOCTYPE html>
<html>
<body>
<p>Deneme</p><br>
<a href="deneme.html">Deneme</a><br>
<a href="deneme2.html">Deneme 2</a><br>
<a href="deneme_klasor2/deneme3.html">Deneme 3</a><br>
</body>
</html>
Yukarıda anlatılanları yaptıysanız elinizde şöyle bir yapı olmalı:
deneme_klasor
+deneme.html
+deneme2.html
deneme_klasor2
+deneme3.html
+deneme.html
+deneme2.html
deneme_klasor2
+deneme3.html
Şimdi "deneme.html" dosyasını çalıştırın. Burada 3 link görünecektir. "Deneme 2" linkine tıklayın. Link sizi "deneme2.html" dosyasına götürecektir. Çünkü link aynı klasör içindeki "deneme2.html" dosyasına bağlantı vermektedir. Yeni açılan sayfadaki "Deneme" linkine tıklayarak tekrar "deneme.html" dosyasına dönebilirsiniz. Burada "Deneme 3" linkine tıklayın. Link aynı klasörde bulunan "deneme_klasor2" klasörü içindeki "deneme3.html" dosyasına bağlantı vermektedir. Böylece "deneme3.html" dosyasına geçmiş olacaksınız. Buradaki linkler ise çalışmayacaktır. Çünkü bu sayfanın baz adresi diğer ikisinden farklı olarak "deneme_klasor2" isimli klasördür. Bu da linklerle uyuşmamaktadır. Örneğin "Deneme" linkine tıkladığınızda tarayıcıya mevcut dosyayla aynı klasör içindeki, yani "deneme_klasor2" klasöründeki "deneme.html" dosyasına gitmesi söylenecektir. Fakat "deneme_klasor2" içerisinde böyle bir dosya yoktur.
Üst klasöre link vermek için ../ yapısı kullanılır. Örneğin "deneme3.html" dosyasının içerisindeki ilk link şu şekilde yazılırsa doğru dokümana gidebilecektir.
<a href="../deneme.html">Deneme</a><br>
İki üst klasöre gidileceği zaman da ../../ şeklinde bir yapı kullanılmalıdır. Bu gösterim kullanılarak farklı klasörlere de gidilebilir. Örneğin elimizde şöyle bir yapı bulunsun:
deneme_klasor2
+deneme.html
deneme_klasor3
+deneme2.html
Bu durumda "deneme2.html" isimli dosyada "deneme.html" dosyasına giden bir bağlantı şu şekilde kurulur
<a href="../deneme_klasor2/deneme.html">Deneme</a><br>
Görüldüğü gibi
önce ../ yapısı ile bir üst klasöre gidilmiş daha sonra da bu klasöre göreceli olarak dosyanın adresi girilmiştir.
href niteliği kullanılarak sayfanın içindeki bir kısma da gidilebilir. Bunun için öncelikle bir etiket ile birlikte id niteliği kullanılarak gidilecek kısma bir ad verilmelidir. Daha sonra href niteliği href="#kısım" şeklinde kullanılarak belirtilen kısma gidilebilir. Aşağıdaki kodda en alt taraflarda kurallar diye bir kısım tanımlanmıştır. Kurallar linkine tıklandığında oraya gidilecektir. Bunu net olarak görebilmek için aşağıdaki kodda [...] şeklinde belirtilen yerlere de <p>Lorem ipsum... </p><br> kalıbını ekleyin. Özellikle üsttekine 7-8 tane eklemeniz "Kurallar" kısmını sayfanın görünmeyen kısmına atılması için gereklidir.
<!DOCTYPE html>
<html>
<body>
<a href="#kurallar">Kurallar</a><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
[...]
<a id="kurallar">Kurallar</a><br>
[...]
</body>
</html>
hreflang
hreflang niteliği bağlantı verilen dokümanın yazıldığı dili belirtmek için kullanılır ve kullanım şekli şöyledir: hreflang="dil_kodu". Dil kodlarının listesine Ek Bilgiler kısmından ulaşabilirsiniz.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.tbmm.gov.tr" hreflang="tr">TBMM</a>
</body>
</html>
target
target niteliği bağlantı verilen sayfanın nerede açılacağını belirtir ve _self, _blank, _parent, _top ve çerçeve_ismi olmak üzere alabileceği beş farklı değer vardır. _self değeri bağlantı verilen sayfanın linkin içinde bulunduğu çerçevede açılmasını sağlar. _blank değeri kullanıldığında bağlantı verilen sayfa yeni bir pencerede ya da sekmede açılır. _parent değeri sayfanın linkin içinde bulunduğu çerçeveyi barındıran çerçevede açılmasını sağlar. _top değeri kullanıldığı zaman sayfa linkin içinde bulunduğu pencerenin tamamını kaplayacak şekilde açılır. Çerçeve ismi kullanıldığında ise sayfa ismi verilen çerçevede açılır. Çerçevelerin oluşturulması ileride anlatılacaktır. Şimdilik çerçeveler oluşturulmuş şekilde sayfaları içeren aşağıdaki dosyayı indirmek bu nitelikleri anlamak için yeterli olacaktır.
İndirdiğiniz .zip dosyasının içerisindekileri bir klasörün içine alın. Bu dosyalardan "deneme.html" içerisinde şu kodu barındırmaktadır.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.microsoft.com" target="_self">Self</a><br>
<a href="http://www.microsoft.com" target="_blank">Blank</a><br>
<a href="http://www.microsoft.com" target="_parent">Parent</a><br>
<a href="http://www.microsoft.com" target="_top">Top</a><br>
</body>
</html>
Görüldüğü gibi niteliklerin dördünün herbiri bir link için kullanılmıştır. "deneme2.html" isimli dosya içerisinde iki çerçeve barındırmaktadır. Bunlardan birisi Microsoft'un sitesini diğeri ise "deneme.html" dosyasını görüntülemektedir. Microsoft'un sitesini barındıran çerçeve "microsoft" olarak adlandırılmıştır ve deneme iki içerisindeki kodda aşağıdaki satırla oluşturulmuş bir link bulunmaktadır:
<a href="deneme.html" target="microsoft">Framename<a>
"deneme3.html" dosyası ise bir çerçeve içermektedir ve bu çerçevede "deneme2.html" dosyası görüntülenmektedir. Dosyalardaki bütün linkler Microsoft'un sitesine bağlantı vermektedir.
"deneme3.html" dosyasını açtığınızda büyük bir çerçeve içine yerleştirilmiş iki çerçeve görüntülenecektir. Alttaki çerçeve içinde gösterilen dosya "deneme.html"dir. Şimdi bu çerçeve içindeki linklere tıklandığında olacakları inceleyelim:
"Self" linkine tıklandığında bağlantı linkin içinde bulunduğu çerçevede açılacaktır. "Blank" linkine tıklandığında bağlantı yeni bir pencerede ya da yeni bir sekmede açılacaktır. "Parent" linkine tıklandığında bağlantı linkin bulunduğu çerçeveyi içeren çerçevede açılacaktır. Bu çerçeve de iki küçük çerçeveyi içinde barındıran büyük çerçevedir. "Top" linkine tıklandığında ise bağlantı tüm pencereyi kapsayacak şekilde açılacaktır. Son olarak "deneme.html" dosyasına bağlantı veren "Framename" linki denenecek olursa bu bağlantının da "microsoft" ismi verilmiş olan üstteki çerçevede açıldığı görülecektir.
target niteliği kullanılmadığı zaman linkler standart olarak target niteliği _self değeri ile kullanılmış gibi açılır.
download
download niteliği download="dosya_ismi" şeklinde kullanılır ve verilen bağlantının indirilmesini sağlar. dosya_ismi yerine girilecek değer indirilecek dosyanın ismi olacaktır. Bu nitelik yazının yazıldığı an itibari ile bilinen tarayıcılardan Google Chrome, Mozilla Firefox ve Opera tarafından desteklenmektedir.
<!DOCTYPE html>
<html>
<body>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHaKHgW2_H4FnPiFMFLvVxmg9zUmscWGbeWU1sxk5X2sahLQsbr5_waMjTsa8S-qNrk5Fpui1vAh66UZEtus9f4LLMJlPhml0U5vPTKgWpl8i8NTtpzAIEO4oY69T5bD-BLFAkcpC5vPs/s1600/E%C5%9F+%C3%9Cr%C3%BCn+E%C4%9Frisi.PNG" download="Eş Ürün Eğrisi">Grafik</a>
</body>
</html>
rel
rel niteliği rel="değer" şeklinde kullanılır ve mevcut dosyayla bağlantı verilen dosyanın arasındaki ilişkiyi belirtir. Bu niteliğin alabileceği değerler aşağıdadır.
alternate: Bağlantı verilen dokümanın mevcut sayfanın alternatif bir versiyonu olduğunu belirtir.
archives: Bağlantı verilen dokümanın mevcut sayfayı arşivleyen bir doküman olduğunu belirtir.
archives: Bağlantı verilen dokümanın mevcut sayfayı arşivleyen bir doküman olduğunu belirtir.
author: Verilen bağlantının yazının yazarı hakkında bilgi veren bir sayfaya gittiğini belirtir.
bookmark: Linkin sayfanın kalıcı bağlantısı olduğunu belirtir.
external: Bağlantı verilen sayfanın sitenin dışında olduğunu belirtir.
first: Linkin bir serideki ilk sayfaya bağlantı verdiğini belirtir.
external: Bağlantı verilen sayfanın sitenin dışında olduğunu belirtir.
first: Linkin bir serideki ilk sayfaya bağlantı verdiğini belirtir.
help: Linkin bir yardım dokümanına bağlantı verdiğini belirtir.
index: Linkin hiyerarşik bir yapıdaki en üst sayfaya bağlantı verdiğini belirtir.
index: Linkin hiyerarşik bir yapıdaki en üst sayfaya bağlantı verdiğini belirtir.
license: Linkin dokümanın telif haklarıyla alakalı bir dokümana bağlantı verdiğini belirtir.
last: Linkin bir serideki son sayfaya bağlantı verdiğini belirtir.
last: Linkin bir serideki son sayfaya bağlantı verdiğini belirtir.
next: Linkin bir serideki bir sonraki sayfaya bağlantı verdiğini belirtir.
nofollow: Linkin gereksiz bir yere bağlantı verdiğini belirtir. Arama motorlarının botları bu linklere gitmez.
noreferrer: Tarayıcının bağlantıya giderken referans bilgisi vermemesini ister.
sidebar: Link verilen dokümanın kenar çubuğu gibi ikincil bir ortam için uygun olduğunu belirtir.
noreferrer: Tarayıcının bağlantıya giderken referans bilgisi vermemesini ister.
sidebar: Link verilen dokümanın kenar çubuğu gibi ikincil bir ortam için uygun olduğunu belirtir.
prefetch: Link verilen bağlantının ön belleğe alınması gerektiğini belirtir.
prev: Linkin bir serideki bir önceki sayfaya bağlantı verdiğini belirtir.
search: Linkin bir arama aracına bağlantı verdiğini belirtir.
tag: Linkin sayfayla alakalı bir etiket olduğunu belirtir.
up: Linkin hiyerarşik bir yapıdaki bir üst sayfaya bağlantı verdiğini belirtir. Kaç seviye üstteki bir sayfaya gidileceğini belirtmek için birden fazla up da yazılabilir.
up: Linkin hiyerarşik bir yapıdaki bir üst sayfaya bağlantı verdiğini belirtir. Kaç seviye üstteki bir sayfaya gidileceğini belirtmek için birden fazla up da yazılabilir.
type
type niteliği type="değer" şeklinde kullanılır ve bağlantı verilen 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" değeri kullanılabilir. Kullanılabilecek tüm değerleri öğrenmek için internette "MIME types" şeklinde arama yapılabilir.
media
media niteliği media="değer" şeklinde kullanılır ve bağlantı verilen dosyanın hangi ortam ve cihaz için optimize edilmiş olduğu bilgisini verir.
media niteliğine girilebilecek cihaz/ortam değerleri şunlardır:
all: Bağlantı verilen sayfanın tüm cihazlar için optimize olduğunu belirtir. media niteliğinin kullanılmaması durumunda standart olarak kabul edilen durum budur.
aural: Bağlantı verilen sayfanın konuşma sentezleyicileri için optimize edildiğini belirtir.
braille: Bağlantı verilen sayfanın görme engellilere yönelik cihazlar için optimize edildiği belirtilir.
handheld: Bağlantı verilen sayfanın avuç içi cihazlar için optimize edildiğini belirtir.
projection: Bağlantı verilen sayfanın projeksiyon cihazları için optimize edildiğini belirtir.
print: Bağlantı verilen sayfanın yazıcıdan çıktı almaya yönelik optimize edildiğini belirtir.
screen: Bağlantı verilen sayfanın bilgisayar ekranları için optimize edildiğini belirtir.
tty: Bağlantı verilen sayfanın teleks ya da benzeri sabit karakter büyüklüğüne sahip bir cihaz için optimize edildiğini belirtir.
tv: Bağlantı verilen sayfanın televizyon tipi düşük çözünürlüklü cihazlar için optimize edildiğini belirtir.
Bunun dışında nicel ya da nitel değerler verilebilecek değerler de vardır:
width: Bağlantı verilen sayfanın optimize edildiği gösterim alanının genişliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
media niteliğine girilebilecek cihaz/ortam değerleri şunlardır:
all: Bağlantı verilen sayfanın tüm cihazlar için optimize olduğunu belirtir. media niteliğinin kullanılmaması durumunda standart olarak kabul edilen durum budur.
aural: Bağlantı verilen sayfanın konuşma sentezleyicileri için optimize edildiğini belirtir.
braille: Bağlantı verilen sayfanın görme engellilere yönelik cihazlar için optimize edildiği belirtilir.
handheld: Bağlantı verilen sayfanın avuç içi cihazlar için optimize edildiğini belirtir.
projection: Bağlantı verilen sayfanın projeksiyon cihazları için optimize edildiğini belirtir.
print: Bağlantı verilen sayfanın yazıcıdan çıktı almaya yönelik optimize edildiğini belirtir.
screen: Bağlantı verilen sayfanın bilgisayar ekranları için optimize edildiğini belirtir.
tty: Bağlantı verilen sayfanın teleks ya da benzeri sabit karakter büyüklüğüne sahip bir cihaz için optimize edildiğini belirtir.
tv: Bağlantı verilen sayfanın televizyon tipi düşük çözünürlüklü cihazlar için optimize edildiğini belirtir.
Bunun dışında nicel ya da nitel değerler verilebilecek değerler de vardır:
width: Bağlantı verilen sayfanın optimize edildiği gösterim alanının genişliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
height: Bağlantı verilen sayfanın optimize edildiği gösterim alanının yüksekliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
device-width: Bağlantı verilen sayfanın optimize edildiği cihazın ekran genişliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
device-height: Bağlantı verilen sayfanın optimize edildiği cihazın ekran yüksekliğini belirtir. max- ve min- ön ekleri de kullanılabilir.
aspect-ratio: Bağlantı verilen sayfanın optimize edildiği gösterim alanının genişlik/yükseklik oranını belirtir. max- ve min- ön ekleri de kullanılabilir.
device-aspect-ratio: Bağlantı verilen sayfanın optimize edildiği cihazın ekranının genişlik/yükseklik oranını belirtir. max- ve min- ön ekleri de kullanılabilir.
orientation: Bağlantı verilen sayfanın manzara veya portre görünümlerinden hangisine göre optimize edildiğini 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: Bağlantı verilen sayfanın optimize edildiği ortamdaki renk başına bit değerini belirtir. max- ve min- ön ekleri de kullanılabilir.
color-index: Bağlantı verilen sayfanın optimize edildiği ortamın desteklediği renk sayısını belirtir. max- ve min- ön ekleri de kullanılabilir.
monochrome: Bağlantı verilen sayfanın optimize edildiği gri skalada çalışan cihazdaki piksel başına bit değerini belirtir. max- ve min- ön ekleri de kullanılabilir.
resolution: Bağlantı verilen sayfanın optimize edildiği ortamın piksel yoğunluğunu belirtir. max- ve min- ön ekleri de kullanılabilir.
grid: Bağlantı verilen sayfanın 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 optimize edildiğini belirtir. Girilen değerin 1 olması optimize edilen ortamın tek tip karakterli ortam olduğunu, 0 olması bitmap bir ortam olduğunu belirtir.
scan: Bağlantı verilen sayfanın aralıklı tarama için mi yoksa tek seferde tarama için mi optimize edildiğini 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.
orientation: Bağlantı verilen sayfanın manzara veya portre görünümlerinden hangisine göre optimize edildiğini 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: Bağlantı verilen sayfanın optimize edildiği ortamdaki renk başına bit değerini belirtir. max- ve min- ön ekleri de kullanılabilir.
color-index: Bağlantı verilen sayfanın optimize edildiği ortamın desteklediği renk sayısını belirtir. max- ve min- ön ekleri de kullanılabilir.
monochrome: Bağlantı verilen sayfanın optimize edildiği gri skalada çalışan cihazdaki piksel başına bit değerini belirtir. max- ve min- ön ekleri de kullanılabilir.
resolution: Bağlantı verilen sayfanın optimize edildiği ortamın piksel yoğunluğunu belirtir. max- ve min- ön ekleri de kullanılabilir.
grid: Bağlantı verilen sayfanın 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 optimize edildiğini belirtir. Girilen değerin 1 olması optimize edilen ortamın tek tip karakterli ortam olduğunu, 0 olması bitmap bir ortam olduğunu belirtir.
scan: Bağlantı verilen sayfanın aralıklı tarama için mi yoksa tek seferde tarama için mi optimize edildiğini 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 sayfanın minimum 400 piksel genişlikli bilgisayar ekranları için optimize edildiğini gbelirtir.
media="all and (aspect-ratio:16/9)"
Yukarıdaki nitelik sayfanın minimum 16/9 genişlik/yükseklik oranına sahip tüm cihazlar için optimize edildiğini belirtir.
media="print and (resolution:600dpi)"
Yukarıdaki nitelik sayfanın 600 dpi çözünürlükte yazdırmaya göre optimize edildiğini belirtir.
media="(max-width:500px),(min height:700px)"
Yukarıdaki nitelik sayfanın genişliği 500 pikselden küçük ya da yüksekliği 700 pikselden büyük gösterim alanları için optimize edildiğini 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 optimize bir sayfa oluşturulduğunu belirtir. Yukarıdaki örnek, sayfanın maksimum genişliği 500 piksel olan gösterim alanları haricindeki ortamlar için optimize edildiğini belirtir.
Yazıları Biçimlendirme <<<<< HTML5 >>>>> Head