- Katılım
- 30 Eki 2016
- Mesajlar
- 6,974
- Beğeniler
- 12
- Puanları
- 18,020
- Konum
- Zonguldak
- Ad Soyad
- Turhan Karabulut
- Meslek
- Emlak
- Yaş
- 45
HTML Bağlantı Ekleme
HTML'de bağlantı (link) oluştururken kullandığımız öğeleri, bu konumuzda ele alıyoruz.
HTML Bağlantı (Link) Ekleme
HTML'de link (bağlantı) oluştururken <a> etiketini kullanırız. Gelin bu etiketin sözdizimini inceleyelim.
Ö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.
Örneğin çıktısı şu şekildedir:
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.
Tüm bu örnekleri canlı görüntülemek ve düzenlemek için,
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:
Ö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.
Bağlantıya Başlık Ekleme
Öğe hakkında ek bilgi vermek ve başlık eklemek için, title özelliğini kullanabiliriz.
HTML'de bağlantı (link) oluştururken kullandığımız öğeleri, bu konumuzda ele alıyoruz.
HTML'de link (bağlantı) oluştururken <a> etiketini kullanırız. Gelin bu etiketin sözdizimini inceleyelim.
CSS:
<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.
CSS:
<a href="https://onurkul.com.tr/hakkimda">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>Örneğin çıktısı şu şekildedir:
You do not have permission to view link
Giriş yap veya üye ol.
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.
CSS:
<a href="https://onurkul.com.tr/hakkimda" target="_self">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>
CSS:
<a href="https://onurkul.com.tr/hakkimda" target="_blank">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>
CSS:
<a href="https://onurkul.com.tr/hakkimda" target="_parent">Buraya tıklayarak hakkımda bölümüne gidebilirsiniz.</a>
CSS:
<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,
You do not have permission to view link
Giriş yap veya üye ol.
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:
CSS:
<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.
CSS:
<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.
CSS:
<a href="https://onurkul.com.tr/html" title="Onur KUL - HTML Bölümü">HTML</a>