HTML'de referansların tanımı a öğesi aracılığıyla yapılır. Size kullanımını göstermeden önce, hyperlinklerle ilgili genel birkaç ipucu vermek istiyorum. Mutlaka iyi referans metinleri seçin. Sıradan bir geri ifadesi genellikle kimseye yardımcı olmaz. (Çünkü bir ziyaretçi genellikle harici bir siteden geldiğinde geri ifadesinin ne anlama geldiğini bilmez). Açıklayıcı referans metinleri seçmeye çalışın.
HTML'de hyperlinkler her zaman aynı prensibi izler.
<a href="videos.html">Güncel Videolar</a>
a öğesine href özelliği atanır. Bu href özelliği, değer olarak referans hedefini bekler. Önceki örnekte videos.html dosyasına referans verildi. Bu dosya, hyperlinkin tanımlandığı HTML dosyasıyla aynı dizinde bulunmaktadır.
Hyperlinklerin tanımlanmasıyla ilgili olarak, grafiklerin eklenmesiyle ilgili olarak da sunulan kurallar geçerlidir.
Ayrıca yalnızca proje içi referanslar belirleyebilirsiniz. Hyperlinkler aynı zamanda harici dosyalara ve alanlara da ayarlanabilir.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
<a> ve </a> etiketleri arasında yer alan metin sonuçta referans metnidir. Bu metin genellikle tarayıcılar tarafından altı çizili olarak gösterilir.
Hedef Pencere Belirtmek
Bir hyperlink'e tıklandığında, referans hedefi mevcut tarayıcı penceresinde açılır. Bu genellikle tamamen normaldir. Ancak, örneğin bir harici bir domaine referans vermiş olabilirsiniz. Bir ziyaretçi bu bağlantıya tıkladığında, referans hedefinin yeni bir tarayıcı penceresinde veya sekmede açılmasını isteyebilirsiniz. Bu yaklaşımın avantajı: Web siteniz arka planda açık kalır.
Ancak sitenizin her hyperlinkini harici bir pencerede açmamanız gerektiğini unutmayın, ziyaretçiler bundan hızlı bir şekilde rahatsız olabilir.a öğesinin target özelliği sayesinde, referans hedefinin açılacağı hedef pencere belirlenebilir. HTML başlangıçta target için üç standart değer sunar.
• _blank – Referans hedefi yeni bir tarayıcı penceresinde görüntülenir.
• _self – Referans hedefi mevcut tarayıcı penceresinde açılır.
• _parent – Bu, çerçeveden çıkmayı sağlar. (Lütfen HTML5'te çerçevelerin desteklenmediğine dikkat edin. Zaten bu tekniği artık kullanmamanız gerekmektedir, çünkü günümüzde daha iyi alternatifler bulunmaktadır. Çerçevelerle daha fazla ilgilenmek isteyenler, örneğin http://de.wikipedia.org/wiki/Frame_(HTML) sayfasında bilgi bulabilirler).
• _top – Yine çerçevelerle ilgili olarak kullanılır. Referans hedefini çerçevesiz açabilirsiniz.
Target özelliğini nasıl kullanacağınıza dair bir örnek:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Bu durumda, http://www.psd-tutorials.de referans hedefiniz yeni bir pencere/sekmede açılacaktır. Aslında aynı etkiyi elde etmek için _blank yerine halligalli gibi kurgusal bir isim kullanabilirsiniz. Ancak target özelliğini kullanırsanız, gerçekten birinden ayrılmış bir isim kullanmanızı tavsiye ederim.
Referans Temelini Belirleme
HTML dosyasının head bölümünde referans temelini tanımlayabilirsiniz. Bu tür bir referans temeli, tüm referans hedeflerinin belirli bir tarayıcı penceresinde gösterilmesini sağlar. Bu durum tabii ki genellikle çerçevelerle ilişkilendirildiğinde ilginçtir.
Bununla birlikte pratik olarak, örneğin tüm bağlantıları _blank aracılığıyla her zaman yeni bir tarayıcı penceresinde göstermek istiyorsanız, şöyle bir şeye sahip olursunuz:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Dolayısıyla her a tanımına bir target özelliği atamanız gerekecek.
Gördüğünüz gibi bu çok verimli değil. Aynı zamanda, birkaç ay sonra referans hedeflerini yeni bir pencerede açmak istemediğinize karar verirseniz işler daha da verimsiz hale gelir. Bu durumu, söz konusu referans temelini oluşturarak engelleyebilirsiniz. Bu, head içindeki base özelliğiyle tanımlanır. base öğesine, istenen değerdeki target özelliği atanır. Böyle bir kod örneği:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Bu sizin çok yazma işini kurtarır.
Çapa Tanımlama
Diğer dosyalara hiperbağlantılar nasıl ekleyebileceğinizi zaten gördünüz. Ancak bir HTML dosyası içinde aynı şekilde çapa adı verilen şeyleri tanımlayabilirsiniz. Ardından bu çapalara bağlantılar ekleyebilirsiniz. Bu özellik özellikle kapsamlı sayfalarda pratiktir. Böylece belgenin başında bir içindekiler tablosu tanımlayabilir ve ziyaretçilerin tarayıcı penceresi boyunca kaydırma yapmadan ilgili bölümlere atlamalarına olanak tanıyabilirsiniz.
Çapalar a öğesiyle oluşturulur. Ancak çapa tanımları href değil, name özniteliği ile iliştirilir.
<a name="seitenanfang">İçindekiler</a> <a name="kapitel1">İçindekiler Bölüm 1</a> <p>Buraya çok fazla metin gelecek.</p> <a name="kapitel2">İçindekiler Bölüm 2</a> <p>Buraya çok fazla metin gelecek.</p>
Çapa adlarını özgürce belirleyebilirsiniz. Ancak bunları mümkün olduğunca kısa seçmenizi, yalnızca küçük harfler kullanmanızı ve özel karakterlerden kaçınmanızı öneririm.
Bir çapaya yönlendirmek için, normal bir bağlantı tanımlarsınız, bu da bu eğitimin başlarında gösterildiği gibidir.
<a href="#seitenanfang">Sayfa Başına</a>
Önemli olan şey, bağlantı adına kare işareti eklenmesidir. href özniteliğine, kare işareti ile birlikte çapa adı atanır.
Ayrıca çapalara dosyaüstü bağlantılar da verebilirsiniz. Aşağıdaki örnekte, asıl HTML dosyasıyla aynı dizinde bulunan news.htm adlı bir dosya olduğunu varsayıyorum. news.htm içinde seitenanfang adlı bir çapa tanımlandı. Buna yönlendirmek için, hedef dosyanın adının (news.htm) ardından bir kare işareti not edilir. Ardından çapa adı eklenir.
<a href="news.htm#seitenanfang">Sayfa Başına</a>
Bu şekilde herhangi bir dosyada çapalara yönlendirmeler yapabilirsiniz.
