HTML Linkleri - Hyperlinkler
Link, bağlantı demektir.
Linkler, hemen hemen bütün web sitelerinde bulunur.
Linkler, üzerlerine tıklandığında, kullanıcıların, bir sayfadan başka bir sayfaya gitmelerine olanak tanır.
Html linkleri, Hyperlinklerdir.
Bir hiperlik; üzerine tıklandığında bizi başka bir dökümana aktaracak bir yazı veya bir görseldir.
HTML Linklerinin Yazım Kalıbı
Html linkleri <a> tagı ile tanımlanır ve kod kalıbı aşağıdaki gibidir:
<a href="url">link texti veya görseli</a>
href özelliği, url değerini alır. url, linkin kullanıcıyı götüreceği sayfanın adresidir. url bir internet sayfası, bir resim, video gibi her türlü döküman adresi olabilir.
Link texti veya göreseline tıkladığımızda web tarayıcı bizi url adresine götürecektir.
href özelliği, url değerini alır. url, linkin kullanıcıyı götüreceği sayfanın adresidir. url bir internet sayfası, bir resim, video gibi her türlü döküman adresi olabilir.
Link texti veya göreseline tıkladığımızda web tarayıcı bizi url adresine götürecektir.
Aşağıdaki örneğe dikkat edelim:
<a href="http://www.dersimizkod-html.blogspot.com.tr">sitemize gitmek için tıklayınız</a>
Bu linkin html sayfamızdaki çıktısı aşağıdaki gibi olacaktır:
Site İçi Linkler (Local Linkler)
Yukarıdaki örnekte tam bir url adresi verilmiştir. Fakat, sitemiz içinde de linkler verebiliriz. Örneğin sitemizi kaydettiğimiz klosör içerisinde ve html dosyamız ile aynı yerde bir resim dosyası olsun. Bu resim dosyasının adı resmim.jpg olsun. Bu resim dosyasını, html sayfamızda bir local link ile ziyaretçilerimize göstermemiz mümkündür. Bunun için yapmamız gereken tek şey url adresine dikkat etmemizdir. Aşağıdaki link işimizi görecektir:
<p>resmi görmek için <a href="resmim.jpg">tıklayınız</a></p>
HTML Link Renkleri
Fare bir link elemanının üzerine geldiğinde iki olay gerçekleşir:
- Fare oku küçük bir ele döner.
- Link elemanının rengi değişir.
- Unvisited (tıklanmamış) bir link elemanı, mavi renkte ve altı çizili olacaktır.
- Visited (tıklanmış) bir link elemanı, mor renkte ve altı çizili olacaktır.
- Active (fare ile tıklandığı anda) link elemanı, kırmızı ve altı çizili olacaktır.
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Yukarıdaki örnekte;
a:link seçicisi linkin ilk görünümünü düzenler;
a:visited seçicisi, linkin tıklandıktan sonraki stilini düzenler;
a:hover seçicisi, fare linkin üzerine geldiğinde linkin stilini düzenler;
Target özelliğine vediğimiz değerlere göre linkimiz farklı yerlerde açılacaktır. Bu değerlerin ne anlama geldiği aşağıda verilmiştir:
Eğer web sayfamız bir frame içinde sınırlandırılmışsa, target değerini _top olarak ayarlayıp, sayfayı bu frame'den kurtarabiliriz.
a:link seçicisi linkin ilk görünümünü düzenler;
a:visited seçicisi, linkin tıklandıktan sonraki stilini düzenler;
a:hover seçicisi, fare linkin üzerine geldiğinde linkin stilini düzenler;
a:active seçicisi, linkin tıklandığı andaki stilini düzenler.
HTML Linklerinde Target (Hedef) Özelliği
Kullanıcı, verdiğimiz linke tıkladığında, link dökümanının hangi pencerede açılacağını belirleyebiliriz. Bunun için yapılması gereken <a> tagının içine bir de target özelliği eklemektir. Aşağıdaki kalıba dikkat edelim:
<a href="resmim.jpg" target="_blank">bu bir resim linkidir</a>
<a href="resmim.jpg" target="_blank">bu bir resim linkidir</a>
Target özelliğine vediğimiz değerlere göre linkimiz farklı yerlerde açılacaktır. Bu değerlerin ne anlama geldiği aşağıda verilmiştir:
| Target Değeri | Anlamı |
|---|---|
| _blank | Linki, yeni bir pencere veya sekmede açar |
| _self | Linki, aynı pencerede açar. (bu değer varsayılandır) |
| _parent | Linki, üst çerçevede (frame) açar |
| _top | Linki, pencerede tam sayfa olarak açar |
| frameAdi | Linki, adı verilen çeçevenin (frame) içinde açar |
Eğer web sayfamız bir frame içinde sınırlandırılmışsa, target değerini _top olarak ayarlayıp, sayfayı bu frame'den kurtarabiliriz.
Görsellere (img) Link Atama
Bir resim veya video dosyasına da link verebiliriz. Kullanıcalar bu görsellere tıkladığında verdiğim url adresine yönlendirilecektir.
<img src="resmim.gif" alt="Burada bir resim vardır" style="width:42px;height:42px;border:0">
Yukarıda bir gif resmi elemanı verilmiştir. Bu kod, html dosyamızla aynı adreste (url) kayıtlı resmim.gif adlı bir resim dosyasını sayfamızda gösterir.
Bu resim elemanını olduğu gibi <a> ve </a> link tagları arasına koyarsak, bu resmi hem göstermiş hem de resme link vermiş oluruz. Yani:
<a href="http://www.dersimizkod-html.blogspot.com.tr" target="_blank">
<img src="resmim.gif" alt="Burada bir resim vardır" style="width:42px; height:42px; border:0">
</a>
border:0 kodu, IE9 ve daha eski sürümlerinde, resme otomatik bir çerçeve konmasını engellemek için eklenir.
HTML Sayfa İşaretçisi (Bookmark) Linki
Html safya işaretçileri, bir web sayfasının kendi içinde bir yerden başka bir yere sıçramamızı sağlar.
Özellikle uzun sayfalarda, sayfanın herhangi bir yerinden başka bir yerine bir link yardımı ile hızlı bir şekilde sıçrama imkanımız vardır.
Bunun için öncelikle, sıçramak istediğimiz sayfa elemanına bir işaretçi bırakmamız gerekir. İşaretçi aslında bir id yani kimliktir. Örneğin:
<h1 id="baslik1"> bu sayfanın ilk başlığıdır</h1>
Yukarıdaki başlığa bir kimlik vererek bir işaretçi koymuş olduk.
Atadığımız id'lerin Türkçe karakter içermemesine dikkat etmeliyiz.
Şimdi sayfanın başka bir yerindeki, istediğimiz html elemanına bir link atayarak bu başlığa sıçrayabiliriz. Örneğe dikkat edelim:
Atadığımız id'lerin Türkçe karakter içermemesine dikkat etmeliyiz.
Şimdi sayfanın başka bir yerindeki, istediğimiz html elemanına bir link atayarak bu başlığa sıçrayabiliriz. Örneğe dikkat edelim:
<a href="#baslik1"> ilk başlık</a>
Artık ilk başlık kelimeleri, bir link haline gelmiş ve tıklandığında, bizi aynı sayfanın yukarısındaki baslik1 elemanına götürecektir.
Örnekte görüldüğü gibi, sayfa işaretçisini (id), url olarak belirtirken, başına bir diyez işareti mutlaka koymalıyız.
Eğer başka bir html sayfasından, aynı başlığa bir link atamak istiyorsak da aşağıdaki gibi bir html kodu işimizi görecektir.
Diyelim ki yukarıdaki başlığımız konu1.html adlı bir sayfada bulunsun ve biz de konu2.html sayfasından bu başlığa ulaşmak için bir link yazmak isteyelim. O zaman konu2.html sayfamıza şöyle bir eleman eklememiz gerekir:
<a href="konu1.html#baslik1"> ilk başlık</a>
Yukarıdaki html elemanı, bizi doğrudan istediğimiz sayfayadaki istediğimiz başlığa ulaştıracaktır. (sayfaların ikisi de aynı url'de (aynı klasör içinde) kaydedilmiş olmalıdır)
Artık ilk başlık kelimeleri, bir link haline gelmiş ve tıklandığında, bizi aynı sayfanın yukarısındaki baslik1 elemanına götürecektir.
Örnekte görüldüğü gibi, sayfa işaretçisini (id), url olarak belirtirken, başına bir diyez işareti mutlaka koymalıyız.
Eğer başka bir html sayfasından, aynı başlığa bir link atamak istiyorsak da aşağıdaki gibi bir html kodu işimizi görecektir.
Diyelim ki yukarıdaki başlığımız konu1.html adlı bir sayfada bulunsun ve biz de konu2.html sayfasından bu başlığa ulaşmak için bir link yazmak isteyelim. O zaman konu2.html sayfamıza şöyle bir eleman eklememiz gerekir:
<a href="konu1.html#baslik1"> ilk başlık</a>
Yukarıdaki html elemanı, bizi doğrudan istediğimiz sayfayadaki istediğimiz başlığa ulaştıracaktır. (sayfaların ikisi de aynı url'de (aynı klasör içinde) kaydedilmiş olmalıdır)
Hiç yorum yok:
Yorum Gönder