HTML Linkler

« Önceki Ders

Sonraki Ders »

---

HTML Linkler (Web Bağlantıları)

Linkler, yani bağlantılar, tüm web sayfalarında vardır. Linkler aynı web sitesinin farklı sayfalarına yönlendirilebileceği gibi farklı web sitelerinin sayfalarına da yönlendirilebilir.

HTML linki, bir web bağlantısıdır (hyperlink).

Web bağlantıları bir metin olabileceği gibi, bir resim de olabilir. Metin görünümündeki web bağlantısı tıklanabilir bir metni ifade ederken, resim üzerine eklenen web bağlantısı ise tıklanabilir bir resmi ifade eder.

HTML belgelerinde linkler yani bağlantılar <a> etiketi ile tanımlanır:

<a href="sayfa linki">bağlantı metni</a>

Örnek

<a href="html-giris.html">HTML Dersleri sayfamızı ziyaret edin</a>

href özelliği ile bağlantı yapılacak adres belirtilir (http://htmlvecssegitimi.blogspot.com/2016/01/html-link-verme-ornek.html)

bağlantı metni alanı görünen kısımdır (HTML ve CSS öğrenmek için bizi ziyaret edin.)

Bağlantı metnine tıklandığında, kullanıcı href özelliği ile belirtilen sayfaya yönlendirilir.

	Link, bağlantı metni yerine, bir HTML resmi veya başka bir HTML öğesi de olabilir.

---

HTML Yerel Linkler

Yukarıdaki örnekte sitemizden bir sayfanın linkini tam adresini yazarak verdik.

Yerel link, tam sayfa adresini yazmadan aynı websitesi içerisinde başka bir sayfaya bağlantı vermek için kullanılır:

Örnek

<a href="html-a-etiketi.html">HTML a Etiketi</a>

---

HTML Link Renkleri

Fare imlecini bir link üzerine hareket ettirdiğinizde, farenin oku küçük bir el simgesine dönüşür ve link öğesinin rengi değişir.

Tüm tarayıcılarda linkler varsayılan olarak şu özelliklerle görüntülenir:

• Ziyaret edilmemiş (unvisited) link altı çizili ve mavi renktedir
• Ziyaret edilmiş (visited) link altı çizili ve mor renktedir
• Aktif (active) link ise altı çizili ve kırmızı renktedir

Varsayılan renkleri stilleri kullanarak değiştirebilirsiniz:

Örnek

<style> a:link {color:green; background-color:transparent; text-decoration:none} a:visited {color:brown; background-color:transparent; text-decoration:none} a:hover {color:red; background-color:transparent; text-decoration:underline} a:active {color:orange; background-color:transparent; text-decoration:underline} </style>

---

HTML Linkler - target Özelliği

target özelliği link verilen sayfanın nerede açılacağını belirler.

Aşağıdaki örnekte link verilmiş olan sayfa yeni bir tarayıcı penceresinde ya da yeni bir sekmede açılacak:

Örnek

<a href="html-giris.html" target="_blank">HTML Derslerimizi ziyaret edin</a>

Target Değeri	Tanım
_blank
_self	Linki tıklandığı sayfada/çerçevede açar
_parent	Frame (çerçeve) ile kullanılır. Linki çerçeve içerisinde açar
_top	Frame (çerçeve) ile kullanılır. Linki çerçevenin içinde değil, pencerenin tamamında açar
frame_adı	Link verilen sayfayı ilgili frame'de (çerçeve) açar

Çerçeveye sığmayan sayfaların, çerçeve sınırlarından kurtulup pencerenin tamamında görüntülenmesi için target="_top" kullanabilirsiniz.

---

HTML Linkleri - Resimlere Link Verme

Resimlere link verirken de HTML <a> etiketi kullanılır.
Metne link verirken yazdığımız tıklanacak metin yerine, <img> etiketi ile resmin konumu yazılır.

Resimlere link verme örnek

<a href="html-dersleri.html"> <img src="smiley.gif" alt="HTML Dersleri" style="width:100px;height:100px;border:0"> </a>

Not: Internet Explorer 9 ve önceki versiyonlarının resimlere kenar çizgisi eklemesini önlemek için "border:0" eklenir.

---

HTML Linkler - Sayfa Buldurucu (Yer imi) Oluşturma

HTML yer imleri, kullanıcıların bir web sayfasının belirli kısımlarına hızlı geçiş yapabilmelerini sağlamak için kullanılır. Uzun sayfaları olan internet siteleri için pratik gezinme imkanı sağlar.

Sayfa içinde bir yer imi yapmak için öncelikle yer imini oluşturmalı, daha sonra da ona bir link eklenmelidir.

Link tıklandığında, sayfa yer imi olan kısma kayar ve o kısmı gösterir.

Sayfa Buldurucu (Yer imi) Oluşturma -Örnek-

İlk olarak id parametresi ile bir yer imi oluşturulur:

<h2 id="D10">Ders 10</h2>

Daha sonra yer imine ("Ders 10"), aynı sayfa içinden bir link eklenir:

<a href="#D10">Ders 10'a geçin</a>

*Yer imine başka bir sayfadan da link ekleyebilirsiniz

Örnek

<a href="html-dersleri.html#D10">Ders 10 başlıklı kısmı ziyaret edin</a>

---

Konu Özeti

• Bir link tanımlamak için HTML <a> etiketini kullanın
• Linkin adresini tanımlamak için HTML href özelliğini kullanın
• Linkin nerede açılacağını tanımlamak için HTML target özelliğini kullanın
• Bir resmi link olarak kullanmak için <a> içerisinde HTML <img> etiketini kullanın
• Sayfa içinde yer imleri tanımlamak için HTML id özelliğini (id="değer") kullanın
• Yer imine link vermek için HTML href özelliğini (href="#ideğer" kullanın

---

HTML Link Etiketleri

Etiket	Tanım
<a>	Bir hiperlinki (web bağlantısı) tanımlar

---

« Önceki Ders

Sonraki Ders »