Web sitelerimizi tasarlarken, birçok yerde hem kendi sitemiz içerisinde, hem de farklı sitelere bağlantı veririz. Bizde bu yazımızda bir HTML belgesinde nasıl link verme konusunu anlatacağız.

Link Verme Etiketi (<a>) ve Href Parametresi

Bir HTML belgesinde link verme işlemi <a> ve </a> etiketleri arasında yapılır. Bu iki etiket arasında kalan kısım bizim link verdiğimiz kısımdır.

Href parametresi ile linkin bizi nereye yönlendireceğini belirtiriz. Örneğin, kullanıcıyı farklı bir sayfaya, sayfa içerisinde farklı bir yere, resimlere ve e-posta adresine yönlendirebiliriz. Ayrıca bir zip arşivine veya müzik dosyasına da link verebilirsiniz. Şimdi temel bir link verme kodunu görelim. 

<a href="url">Linki vereceğiniz kısım</a>

<a> etiketi ile arada kalan kısmın link olduğunu, href etiketi ile bu linkin kullanıcıyı nereye yönlendireceğini belirttik. Örneğin evrenselkod.com’a link vermek istediğimizde kullanacağımız kod satırı şu şekilde olmalıdır; 

<a href="https://www.evrenselkod.com/">Evrensel Kod</a>

Link Verirken Target Parametresi

Bir html sayfasında linke tıkladığınızda, o link mevcut tarayıcı penceresinde gözükecektir. Bunu değiştirmek isterseniz target parametresini kullanmalısınız.

Target parametresinin hangi değerleri alabileceğini görelim.

  • _self : Varsayılandır. Linke tıkladığınızda aynı pencerede açılmasını sağlar. Özellikle belirtmeniz gerekmez.
  • _blank : Linki yeni bir pencerede açar.

Hemen yeni sekmede açılan bir link verme örneği görelim.

<a href="https://www.evrenselkod.com/" target="_blank">Evrensel Kod</a>

Link Verme Türleri

Sayfa İçi Link Verme

Bazı durumlar sayfanızın en aşağısından tek tıkla en yukarısına link vermeniz gerekebilir. Özellikle uzun sayfalarda bunu yapmanız gerekecektir. Buna sayfa içi link verme denir.

Bu yazı dikkatini çekebilir.   HTML Tablolar

Sayfa için link vermek için name parametresini kullanırız. Daha sonra farklı bir yerde bu parametrenin kullanıldığı yere gitmesi için link veririz. Bir örnekle görelim. 

<a name="ust"></a>

Bu etiketi sayfamızın en başına koyarız. 

<a href="#ust">En üste çık</a>

Bu etiketi de sayfamızın alt kısmına koyarız. ‘En üste çık’ linkine tıklayan kişi sayfanın en üst kısmına yönlendirilir.

Denemek için buraya tıklayın

Farklı Bir Sayfaya Link Verme

Kullanımı çok basittir. Yukarıda da bir örneğini yapmıştık. Hemen bir örnek daha yapalım. Bu seferde Google’a link verelim.

<a href="https://www.google.com/">Google'a gitmek için tıkla</a>

Bir E-mail’e Link Verme

Bir email bağlantısı oluşturmak istiyorsanız, linkinizin başına mailto: koymanız yeterlidir. Örneğin;

<a href="mailto:deneme@deneme.com">Mail yollamak için tıklayınız</a>

Bir Resme Link Verme

Bir resme link vermek istediğinizde resmin kodunu link verme etiketlerine almanız yeterlidir. 

<a href="https://www.google.com/">
    <img src="images/resim.jpg">
</a>

Burada ‘resim.jpg’ adlı resme tıklandığında Google’a yönlendirecektir.

Linke Başlık Verme

Bir linke başlık vermek isterseniz title parametresi kullanmalısınız. Title parametresi genellikle link hakkında ek bilgi verir. Bu bilgi fare imleciniz link üzerine geldiğinde görünür. 

<a href="https://www.google.com/" title="Google'a giymek için tıklayın">Google</a>

Denemek için aşağıdaki Google yazısının üzerine fare imlecinizi getirin.

Google

Html derslerimizin bu yazısında bir HTML sayfasında link (bağlantı) verme işlemi nasıl yapılır sorusunu cevapladık. Umarım yararlı olmuştur. Diğer HTML derslerimizi görmek için buraya tıklayabilirsiniz.