HTML'de Bağlantılar (Linkler)

Web sayfanızda bir yazı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.

Hemen bir örnek verelim;

<a href="https://google.com/tr">Google'a git</a> 

Burada Google'a git yazısına tıklandığında google.com.tr'ye gidecektir. Bu şekilde bir sayfadan başka bir sayfaya bağlantı gerçekleştirilmektedir.

Örnektede görüldüğü üzere href niteliği, 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.

HTML'de target Niteliği

href dışında birde target niteliği var. Bu nitelik ile bağlantının nasıl açılacağını belirliyoruz. Değer olarak aşağıdakilerden birisini almak zorunda;

_self - varsayılan değer budur, mevcut sayfada açar.
_blank - bağlantıyı yeni sayfada açar.
iframeAdı - bağlantıyı belirlenen iframe çerçevesi içerisinde açar.

Örneğin yeni sayfada açılacak bir bağlantı oluşturalım.

<a href="https://prototurk.com" target="_blank">Prototürk</a> 

Tıklandığında Prototürk'ü yeni sekmede açacaktır. Birde iframe çerçevesi içerisinde açtırmak var. Onuda şöyle bir örnekle görelim;

<p>
    Prototürk'ü açmak için <a href="https://prototurk.com" target="browser">tıklayın!</a>
</p>
    
<iframe name="browser" width="600" height="300"></iframe> 

Henüz iframe etiketini öğrenmedik ancak öğrendikten sonra gelip bunun örneğine tekrar bakıp daha iyi kavrayabilirsiniz. Kısaca şuan yaptığı bağlantıya tıkladığımda ilgili adresi benim belirlediğim bir frame yani çerçeve içerisinde açması.

HTML Bağlantıyı Iframe İçerisinde Açtırma

Resimlere Bağlantı Vermek

Henüz resim etiketini öğrenmemiş olsakta bu seferlik es geçip örneği inceleyelim.

<a href="https://prototurk.com">
    <img src="resim.png">
</a> 

Belge İçerisinde Bağlantı Vermek

Kitapların başlarında bir liste olur, neyin hangi sayfada olduğunu gösteren. Örneğin 3. bölüme geçmek için 40. sayfaya gitmek gerekir. Burada bağlantıyı 40. sayfaya göre ayarlayıp basıldığında gitmek mümkün. Gerçek hayata uyarlarsak tam olarak bunu yapıyor :) Bir örneklendirelim;

<p>
    <a href="#bolum1">1. Bölüme Git</a> <br>
    <a href="#bolum2">2. Bölüme Git</a>
</p>

<div id="bolum1">

    <p>
        <strong>1. Bölüm</strong>
    </p>

    <p>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
    </p>

    <p>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
    </p>

    <p>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
    </p>

</div>

<div id="bolum2">

    <p>
        <strong>2. Bölüm</strong>
    </p>

    <p>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
    </p>

    <p>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
    </p>

    <p>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
    </p>

</div> 