Tüm internet linkler üzerine kuruludur.
HTML sayfaları birbirine linkler ile bağlanır.
Linkler kullanıcıların tıkladıklarında başka sayfaya geçmelerini sağlar.
Web siteleri yüzlerce hatta binlerce sayfadan oluşur.
Bu sayfalar arasında gezinmek için linkleri kullanırız.
İnternette farenin işaretçisini bir linkin üzerine götürdüğünüzde ok simgesi el simgesine dönüşür.
Bu sayfada tıklayabildiğiniz her şey bir linktir.
HTML Link Nasıl Oluşturulur?
Bir link bir web sitesine, bir HTML belgesine veya herhangi bir dosyaya verilebilir.
<a> etiketi link vermek için kullanılan etikettir.
<a href="URL">Link yazısı</a>
href özelliğine verilen URL değeri başka bir HTML sayfası, bir web sitesi veya herhangi bir dosya olabilir.
Başka bir web sitesine link şu şekilde verilir:
href özniteliği link tıklandığında yönlendirilecek adresi içerir.
link yazısı web sayfasında kullanıcının gördüğü kısımdır.
Link tıklandığında kullanıcı uzmanim.net adresine yönlendirilecektir.
Yukarıdaki örnekte biz başka bir web sitesine giden link oluşturduk.
Yerel linkler geçerli web sitesi içinde verilen linklerdir.
<p>
<a href="/html">HTML Dersleri</a>
</p>
<p>
<a href="/css">CSS Dersleri</a>
</p>
Varsayılan olarak bir link tüm internet tarayıcılarda şu renklerde görüntülenir:
Fakat bu renkler varsayılan ve siz CSS ile rengini değiştirmediğinizde görünen renklerdir.
CSS ile linklerin tüm bu hallerinin renklerini değiştirmek mümkündür.
<html>
<head>
<style>
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: yellow;
text-decoration: none;
}
a:hover {
color: red;
background-color: yellow;
text-decoration: underline;
}
a:active {
color: black;
}
</style>
</head>
<body>
<a href="/html">HTML Öğren</a>
</body>
</html>
target özniteliği ile tıklanan linkin nasıl açılacağı belirlenir.
target özniteliği şu değerlere sahip olabilir:
<a href="https://uzmanim.net" target="_blank">uzmanim.net'i ziyaret et</a>
<p>Link tıklandığında bu pencere sabit duracak ve link yeni pencerede açılacak</p>
_top özelliği biraz daha anlaması zor bir değer olabilir. Şu örnekle daha iyi anlaşılacaktır:
<p>Bu sayfa bir çerçeveden oluşmaktadır.</p>
<a href="https://uzmanim.net" target="_top">uzmanim.net'e git</a>
Kendin Dene sayfası frame (çerçeve) içeren bir sayfadır. _top bu sayfada daha anlaşılır olacaktır.
Bir resme link vermek istiyorsanız, resim HTML kodunu <a> etiketi ile sarmanız gerekir:
HTML belgeniz içinde uzun bir yazınız varsa, bu yazının belirli bir bölümüne link vermek isteyebilirsiniz.
Sadece yazılar için değil, aşağıya doğru uzayan uzun bir sayfanız varsa yine bu sayfada belirli bir bölüme link verebilirsiniz.
Bunun için yapmanız gereken link vermek istediğiniz yere id sahibi bir HTML elementi eklemektir:
<p><a href="#bolum2">Bölüm 2'ye git</a></p>
<h2>Bölüm 1 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2 id="bolum2">Bölüm 2 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 3 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 4 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 5 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 6 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 7 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 8 </h2>
<p>Bu bölüm şunlardan oluşur</p>