HTML'de Bağlantılar ve Köprüler

by trustix


Eklenme Tarihi : 16 Aralık 2020 13:30 Views:     478



Giriş

 

HTML'de bağlantılar genelde başka bir içeriğe ya da başka bir web sayfasına yönlendirmek için kullanılmaktadır. Buradaki başka bir web sayfası harici bir uygulama olabileceği gibi bir arama bölümü ya da web sayfasının kendi içeriği olabilir. Ya da sayfa içinde başka bir bölüme köprü atılabilir. Böyle durumlarda kullanılan HTML etiketi <a> etiketidir.

HTML'de <a> etiketinin söz dizimi

    <a href="Burasu URL ya da köprü adresi verilecek bölümdür.">Bağlantı ya da Köprü İçeriği</a>

 

<a> etiket de diğer birçok HTML etiketi gibi bazı öznitelikler ve bu özniteliklere bağlı parametreler alabilir. Bu öznitelikleri bir liste halinde verdikten sonra örnek incelemeye geçebiliriz.

 

<a> Etiketinin Öznitelikleri

href Hedef adresi belirtir. Adres URL ya da dizin şeklinde olabilir.
hreflang href ile kurulan bağlantının dilini belirtir.
rel Mevcut sayfa ile bağlantılı içerik arasındaki ilişkiyi belirtir.
target Bağlantının yeni bir sayfada mı yoksa başka bir şekilde mi açılacağınız belirtir.
title Metin üzerindeki ek bilgiyi belirtir.    Fare imleci ile bağlantı metni üzerine gelindiğinde ortaya çıkan bir içerik oluşturur.
download  Kullanıcı fare ile bağlantıyı ya da köprüyü tıkladığında indirilecek olan dosyayı belirtir.

 

Örnek:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Bağlantılar ve Köprüler </title>
</head>
<body>
    
    <!--
        Sitenin kendisine bir iç bağlantı oluşturuyoruz. Site dilini tr olarak belirtiyoruz.
        target bölümünü _blank olarak belirtiyoruz. title bölümüne ise site adını yazıyoruz.
        Metne tıkladığımızda bizi site anasayfasına yönlendirecektir.
    -->
    <a href="https://vikikod.com/" rel="internal" hreflang="tr" target="_blank" title="vikikod">Siteye Gitmek için tıklayınız.</a>

</body>
</html>

Dosya Aktarım Protokolüne göre bağlantının sağlanması.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Bağlantılar ve Köprüler </title>
</head>
<body>
    
    <!--
        site adından önce ftp yazarak bir web sayfasına köprü atmak yerine
        bir ftp protokolü ile dosya aktarım protokolü şeklinde bağlanmasını 
        sağlayabilirsiniz.
    -->
    <a href="ftp:vikikod.com/" rel="internal" hreflang="tr" target="_blank" title="vikikod">Siteye Gitmek için tıklayınız.</a>

</body>
</html>

 

target Özniteliği Güvenlik Problemi

target özniteliğinin _blank olarak belirtilmesi, sayfanın açılış şeklinin kullanıcıya bırakılması anlamına gelir. Kullanıcı isterse yeni bir sekmede ya da yeni bir pencerede açabilir. Ancak bu birtakım güvenlik problemlerine sebeb olabilir. Şöyle ki  daha önce kontrol etmediğiniz ya da  güvenliğinden emin olmadığınız web sayfaları _blank değeri nedeni ile Javascript kullanarak JS'deki window.opener nesnesine kısmen erişebilirler. Bu durumda erişim daha sonra nesnein lokasyonuna birtakım kötü amaçlı kod veya script parçaları bırakabileceği anlamına gelir. Bu nedenle target özniteliği _blank olarak belirtildiğinde <a> etiketine ayrıca rel özniteliği ile noopener değeri belirtilmelidir. Ayrıca bazı tarayıcılar noopener değerini desteklemedikleri için extradan noreferrer ifadesi de mutlaka eklenmelidir.

 

 

Örneğin:

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Bağlantılar ve Köprüler </title>
</head>
<body>
    
    <!--
        site adından önce ftp yazarak bir web sayfasına köprü atmak yerine
        bir ftp protokolü ile dosya aktarım protokolü şeklinde bağlanmasını 
        sağlayabilirsiniz.
    -->
    <a href="güvenli olmayan site bağlantısı.. rel="noopener noreferrer"  hreflang="tr" target="_blank" title="test">Siteye Gitmek için tıklayınız.</a>

</body>
</html>

 

HTML'de bağlantılar, köprülere ve bunları yapma yöntemine değinmeye çalıştık.

Herkese İyi Kodlamalar.

 





0

Yorum Formu

vikikod.com    © 2019