Bağlantı Ekleme

a Etiketi (<a>...</a>)

Sayfalar arasında gezinmek ya da sayfa içerisinde başka bir bölüme atlamak için bağlantılardan (link) faydalanırız.

Bağlantılar sayfada fare ile üzerine gelindiği zaman tıklanabilir şekilde görüntülenirler:


Yukarıdaki bağlantıyı sayfaya eklemek için bağlantı olarak görüntülemek istediğimiz metni <a> ve </a> etiket çifti arasında kalacak şekilde işaretleriz:

<a>Bana Tikla!</a>

href Niteliği (<a href="...">)

Bağlantı tıklandığında nereye erişileceği href niteliğine verilecek değer ile belirtilir. Yukarıdaki örnekte bu özelliğin değeri boş bırakıldığı için bağlantıya tıklandığı zaman herhangi bir atlama olmuyor.

<a href="https://www.blogger.com">Blogger</a>

Ancak yukarıdaki şekilde hazırlanan bağlantıya tıklandığı zaman, www.blogger.com adresine bir atlama gerçekleştirilir.


target Niteliği (<a target="...">)

Bağlantıya tıklandığı zaman açılacak sayfanın nerede açılmasını istediğimizi belirtebiliriz. Bunun için target niteliğini kullanırız. Bu niteliğe verilebilecek değerler ve kullanıldıkları zaman davranış biçimleri şu şekildedir:

Not: Örnekleri tıklarken #cerceveAdi örneğinden başlayıp, alttaki çerçeve içerisinde açılacak dokümandaki bağlantıları tıklayacak şekilde takip ederseniz, her birinin gerçek işleyişini daha iyi görebilirsiniz.

#cerceveAdi Bağlanılacak sayfayı ismi ile belirtilen çerçeve içerisinde açar.
_blank Bağlanılacak sayfayı yeni bir pencere ya da tab içerisinde açar.
_self Bağlanılacak sayfayı içinde bulunduğu çerçeve içerisinde açar.
_parent Bağlanılacak sayfayı içinde bulunduğu çerçevi içeren ana çerçeve içerisinde açar.
_top Bağlanılacak sayfayı içinde bulunduğu çerçevi içeren pencere/tab içerisinde açar.




Sayfa içi atlama (<a target="#...">)

İstersek sayfa içerisinde istediğimiz bir bölüme de atlama gerçekleştirmemiz mümkündür. Bunun için atlama yapılacak yerin belirtilmesi gerekmektedir. Bu nedenle öncelikle id niteliğini öğrenmeliyiz.

id Niteliği (<... id="...">)

Atlama yapılacak yerin belirtilmesini sağlamak için id niteliğinden faydalanırız. id niteliğinin kullanımı aşağıdaki şekilde yapılmaktadır.

<p id="atlama_yeri_adi">.....</p>

Burada örnek olarak <p> etiketini kullandık; ancak istenilen hemen hemen her türlü etiket için id niteliği kullanılabilir.

Sayfa içi bağlantı vermek için <a> etiketini aşağıdaki şekilde kullanırız (# işaretini unutmayın):

<a href="#atlama_yeri_adi">Bana Tıklaya Atla</a>

Aşağıdaki bağlantıya tıklarsak bu sayfada yukarıda yer alan Bana Tıkla yazan bağlantının olduğu yere atlama yaparız.

Bana Tıklaya Atla


Resim Bağlantısı (<a href="..."><img src="..." /></a>)

İstersek resimden oluşan bir bağlantı oluşturabiliriz. Bunun için img etiketini a etiket çifti içerisine yerleştirmemiz yeterlidir.

<a href="atlama_adresi"><img src="resim_dosyasi_adi" /></a>

Aşağıda bu şekilde oluşturulmuş bir bağlantı örneği görülmektedir. Resme tıkladığınız zaman www.blogger.com sitesine yönlendirileceksiniz.



Bu sayfada öğrendiğimiz etiket ve niteliklerden oluşan HTML sayfamızın bir örneği aşağıdaki şekildedir: 

    <html>
      <head>
          <meta charset="UTF-8">
          <meta name="keywords" content="HTML,tags,etiketler,baglanti">
          <title>Bağlantı Ekleme</title>
      </head>
      <body>
          Blogger.com adresine gider: <a href="https://www.blogger.com">Blogger</a>
          <p>
              Bağlanılacak
              <a href="https://htmlilewebsayfalarihazirlama.blogspot.com/p/link-ekleme.html"
                 target="frame"
                 style="text-decoration:underline">sayfayı</a>
              ismi ile belirtilen çerçeve içerisinde açar.
          </p>
          <p>
              Bağlanılacak
              <a href="https://htmlilewebsayfalarihazirlama.blogspot.com/p/link-ekleme.html"
                 target="_blank"
                 style="text-decoration:underline">sayfayı</a>
              yeni bir pencere ya da tab içerisinde açar.
          </p>
          <p>
              Bağlanılacak
              <a href="https://htmlilewebsayfalarihazirlama.blogspot.com/p/link-ekleme.html"
                 target="_self"
                 style="text-decoration:underline">sayfayı</a>
              içinde bulunduğu çerçeve içerisinde açar.
          </p>
          <p>
              Bağlanılacak
              <a href="https://htmlilewebsayfalarihazirlama.blogspot.com/p/link-ekleme.html"
                 target="_parent"
                 style="text-decoration:underline">sayfayı</a>
              içinde bulunduğu çerçevi içeren ana çerçeve içerisinde açar.
          </p>
          <p>
              Bağlanılacak
              <a href="https://htmlilewebsayfalarihazirlama.blogspot.com/p/link-ekleme.html"
                 target="_top"
                 style="text-decoration:underline">sayfayı</a>
              içinde bulunduğu çerçevi içeren pencere/tab içerisinde açar.
          </p>
          <p>
              <a href="#link1">"Buraya atla" ya git</a>
          </p>
          <br />
          <div style="border:solid;width:700px;">
              <iframe name="frame"
                      id="frame"
                      frameborder="0"
                      style="width:700px;"></iframe>
          </div>
          <br/>
          <a href="https:\\www.blogger.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkvfw40oiOkM8_ecTMb3fmiPfWhuG9cPOlvTbBRyM68c5_VceC5BJI-tHnR1wiZXejOX302DU4Fvz0bWUd0lqb8HkRwYAKopJRNDJ1lmT-2vk0dP2oNiSbACKImKJVXZXn-x20bEdHso/s200/2018-12-01.jpg"/></a>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p id="link1">Buraya atla</p>
      </body>
    </html>


<< Resim Ekleme <<   >> Tablo Ekleme >>

Yorumlar

Yorum Gönder