Web sitenizde bir bağlantıya tıklandığında başka bir web sitesine, başka bir sayfaya ya da başka bir dosyaya göndermek isterseniz bir bağlantı oluşturmanız gerekir. Bu bağlantıyıda html'de <a> etiketi ile oluşturuyoruz.
<a href="https://eminylmz.dev">Blog siteme git</a>
Burada Blog siteme git yazısına tıklandığında eminylmz.dev adresine gidecektir. Bu şekilde bir sayfadan başka bir sayfaya bağlantı gerçekleştirilmektedir.
Örnektede görüldüğü üzere href parametresi, tıklandığında gidecek adresi belirlemek için kullanılır. <a> etiketinde sadece href niteliği bulunmaz, daha bir çok nitelikle birlikte kullanılabilir.
<a> etiketi ile farklı bir dosyaya geçiş nasıl yapılır?
web site klasörünüzde index.html ve hakkimda.html sayfasını olduğunu düşünelim, bir link olacak ve tıklandığında hakkimda.html sayfasına gidecek. Hemen örneklendirelim.
<a href="/hakkimda.html">Hakkımda</a>
target parametresihref dışında birde target parametresi var. Bu parametre ile bağlantının nasıl açılacağını belirliyoruz. Değer olarak aşağıdakilerden birisini almak zorunda;
Örneğin yeni sayfada açılacak bir bağlantı oluşturalım.
<a href="https://eminylmz.dev" target="_blank">Blog</a>
Tıklandığında eminylmz.dev'i yeni sekmede açacaktır.
| download | Belirtilen hedefin kullanıcı tarafından indirilmesini sağlar. |
| href | Belirtilen hedefin kullanıcı tarafından ziyaret edilmesini sağlar. |
| hreflang | Ziyaret edilecek olan bağlantının hangi dilde olduğunu belirtir. |
| ping | Bağlantının izlenmesine yardımcı olur. |
| rel | Bağlantı verilen adres ile ilişki türünü belirler. |
| target | Bağlantının ne şekilde açılacağını belirler. |
| type | Bağlantı hedefinin türünü belirtir. |
download Kullanımı
<a href="https://eminylmz.dev/panel/uploads/settings_v/toggkox4.jpg" download>Görseli indir</a>
hreflang Kullanımı
<a href="https://eminylmz.dev" hreflang="tr">Yazılım ve Tasarım Hakkında Yazılar</a>
ping Kullanımı
<a href="https://eminylmz.dev/kategoriler" ping="https://eminylmz.dev/takip.php">Yazılım ve Tasarım Hakkında Yazılar</a>
ping özniteliği çok yaygın bir kullanım ağına sahip olmasa da, özel istatistik oluşturma, tıklanmayı takip etme konusunda oldukça yararlı olabilcek bir parametredir.
rel Kullanımı
<!-- rel nofollow kullanım örneği -->
<a href="https://eminylmz.dev" rel="nofollow">Yazılım ve Tasarım Hakkında Yazılar</a>
<!-- rel noreferrer noopener kullanım örneği -->
<a href="https://eminylmz.dev" rel="noreferrer noopener">Yazılım ve Tasarım Hakkında Yazılar</a>
rel=”nofollow” belirttiğimiz bağlantılarda arama motorlarına kısa bu bağlantıyı takip etmemesini belirtmiş oluyoruz. SEO puanını paylaşmamak adına bu tarz yöntemler tercih edilebiliyor. rel=”nofollow” kullanılmayan bağlantılar varsayılan olarak “dofollow” şeklinde değerlendirilmektedir. Ancak gerçekte HTML’in dofollow diye tanıdığı bir değer bulunmamaktadır. “nofollow” belirtilmeyen tüm bağlantılar, arama motorları tarafından takip edilmektedir.
rel=”noreferrer noopener” kullanımı ise oldukça kritik ve önemlidir. Farklı bir döküman ve ya alan adına bağlantı oluştururken, noreferrer ve ya noopener değerlerini belirtmeniz, hatta en iyi uygulama olarak aralarında bir boşluk ile iki değere de yer vermeniz önemlidir.
rel=”noreferrer noopener” kullanımı, aşağıdaki target özniteliğinde bahsedeceğimiz yeni pencerede bağlantı açıldığı (target=”_blank”) zaman, hem web sayfanızın performansını, hem de güvenliğini korumaktadır.
Henüz resim etiketini öğrenmemiş olsakta bu seferlik es geçip örneği inceleyelim.
<a href="https://eminylmz.dev">
<img src="resim.png">
</a>
Kısacası <a> etiketinin içine alacağınız her ne olursa olsun, tıklayınca href parametresinin almış olduğu değere gönderecektir.
Sorular (0)