HTML Bağlantı Ekleme

HTML Bağlantı (Link) Ekleme 

HTML'de link (bağlantı) oluştururken <a> etiketini kullanırız. Gelin bu etiketin sözdizimini inceleyelim. 

<a href="url">Bağlantı Metni</a>

Örnekte de görüldüğü üzere <a> etiketinin içerisindeki href özelliğini kullanarak link (bağlantı) sözdizimini oluşturuyoruz.

Şimdi bir örnek ile bu sözdizimini işlevsel hale getirelim. 

<a href="https://onurkul.com.tr/hakkimda">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>

Örneğin çıktısı şu şekildedir:

Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.

Target Özelliği

Varsayılan olarak, bağlantıya tıkladığınızda mevcut sayfadan çıkarak, yönlendirdiğimiz sayfaya gidecektir. Fakat, bağlantıyı farklı şekillerde açmak için bu özelliği kullanmalıyız. Gelin bu özelliği detaylı olarak inceleyelim. 

Target özelliği içerisine bazı nitelikler alır.

• _self - Bağlantıyı tıklandığı pencerede (sekmede) açar.
• _blank - Bağlantıyı yeni bir pencere (sekme) şeklinde açar.
• _parent - Bağlantıyı ana çerçevede açar
• _top -  Bağlantıyı pencerenin tam gövdesinde açar. 

Şimdi bu nitelikleri detaylı olarak inceleyeceğiz. 

<a href="https://onurkul.com.tr/hakkimda" target="_self">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>

<a href="https://onurkul.com.tr/hakkimda" target="_blank">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>

<a href="https://onurkul.com.tr/hakkimda" target="_parent">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>

<a href="https://onurkul.com.tr/hakkimda" target="_top">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>

Tüm bu örnekleri canlı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz. 

Bir Görsele Bağlantı Ekleme

Bir görseli bağlantı olarak kullanmak için, <a> etiketi içerisine <img> etiketini kullanmanız yeterli olacaktır. Örnek:

<a href="https://onurkul.com.tr/html">
<img src="https://onurkul.com.tr/uploads/images/202102/web.png" alt="HTML" style="width:42px;height:42px;">
</a>

Örneğimizin çıktısı şu şekildedir: 

Bağlantıya E-posta Adresi Ekleme

Kullanıcının e-posta programını açan bir bağlantı oluşturmak için, mailto özelliğini kullanırız.

<a href="mailto:[email protected]">İletişim</a>

Bağlantıya Başlık Ekleme

Öğe hakkında ek bilgi vermek ve başlık eklemek için, title özelliğini kullanabiliriz. 

<a href="https://onurkul.com.tr/html" title="Onur KUL - HTML Bölümü">HTML</a>