https://www.halilbeycan.com/274.gif

HTML5 İzin Verilen Attribute Değerleri a Etiketi

314
9 ay önce
 0

Bildiğiniz üzere HTML5 HTML’in son sürümüdür ve HTML5 yazarken w3c’nin belirlediği standartlar ile yazmamız gerekmek. HTML5 İzin Verilen Attribute Değerleri adı altında tüm etiketleri inceleyeceğiz.

Eğer yeni makalelerim’den anında haberdar olmak istiyorsanız Facebook Sayfamı beğenebilir veya bildirimleri açabilirsiniz çok uzatmadan konumuza geçelim.

html5-izin-verilen-attribute-degerleri-a-etiketi
HTML5 İzin Verilen Attribute Değerleri a Etiketi

HTML5 a (Anchor) Etiketi Nedir?

HTML5 a etiketi site içerisinde kullanıcıların daha rahat dolaşması ve istediklerini bulması için site için link(url) vermemize veyahut başka sitelere link vermemize olanak sağlayan bir etikettir.

Aşağıdaki şekilde kullanılmaktadır.

<a href="https://www.halilbeycan.com">Link'e Vereceğiniz İsim</a>

HTML5 a Etiketin’de Hangi Attribute Değerlerine İzin Verilmekte

Öncelikle neden HTML yerine HTML5 diye nitelendiriyorum çünkü eski HTML sürümlerinde kullanılan “Attribute” değerlerine bakmayacağız HTML5 sürümündekilere bakacağız.

  • href
  • download
  • hreflang
  • media
  • ping
  • referrerpolicy
  • rel
  • target
  • type

Yukarıda listelemiş olduğum attribute değerlerini HTML5 a etiketi için kullanabilirsiniz.

Diğer türlü kafanıza göre bir kullanım yaptığınızda W3C HTML VALİDATOR adresinden tarama yaparsanız izin verilmeyen kullanım hatasını aldığınızı görürsünüz.

Şimdi yukarıda listelediğimiz değerlerin ne işe yaradıklarına göz atalım isterseniz.

HTML5 a Etiketi href Özniteliği(Attributes)

href özniteliği bağlantının hedefini yani url adresini belirtmemize olanak tanır yukarıda da gösterdiğim ve aşağıda da göreceğiniz gibi bir kullanımı bulunmaktadır.

<a href="https://www.halilbeycan.com">Link'e Vereceğiniz İsim</a>

NOT: Arkadaşlar öncelikle şunu belirtmek isterim konumuz ile alakası yok ama var html’de iki attribute arasında mutlaka boşluk olmalıdır. Eğer boşluk yoksa bir bozulma sorun teşkil etmez lakin. W3C Gözünde bu bir sorundur.

Örnek olarak aşağıdaki gibi olmalıdır.

Yanlış kullanım:

<a href="https://www.halilbeycan.com"target="_blank">Link'e Vereceğiniz İsim</a>

Doğru kullanım:

<a href="https://www.halilbeycan.com" target="_blank">Link'e Vereceğiniz İsim</a>

Yukarı da gördüğünüz gibi href = çift tırnaklardan sonra boşluk bırakmadan target yazılmış bu yanlış bir kullanımdır buna dikkat etmenizi öneririm.

HTML5 a Etiketi download Özniteliği(Attributes)

download özniteliği ise linkin bir indirme bağlantısı olduğunu belirtir misal örnek olarak href özniteliğine bir resim adresi verdiğiniz aşağıdaki gibi.

<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg">Link'e Vereceğiniz İsim</a>

Eğer yukarıda ki şekilde kullanırsanız resim’in bulunduğu adrese gider ama siz bu linke tıklayınca resmi indirmesini istiyor iseniz o zaman yardımınıza downland özniteliği koşmakta.

<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg" download>Link'e Vereceğiniz İsim</a>

Yukarı daki gibi download eklediğiniz’de adrese gitmek yerine adres teki dosyayı indirmenizi sağlar.

HTML5 a Etiketi hreflang Özniteliği(Attributes)

hreflang özniteliği ise bağlantıdaki dosyanın dilini belirtir aşağıda ki şekilde kullanılmaktadır.

<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg" hreflang="tr">Link'e Vereceğiniz İsim</a>

HTML5 a Etiketi media Özniteliği(Attributes)

media özniteliği kullanılan a etiketinin hangi cihaz için platform için optimize edildiğini belirtir örnek olarak iphone gibi konuşma basılı tutma vb. Media özniteliği birden fazla değer kabul edebilir.

HTML5 Media Özniteliğinin(Attribute) Aldığı Değerleri Bu Makalemde Detaylı Bir Şekilde Anlatmış Bulunmaktayım.

Aşağıda ki şekilde kullanımı mevcuttur.

<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg" media="print and (resolution:300dpi)">Link'e Vereceğiniz İsim</a>

HTML5 a Etiketi ping Özniteliği(Attributes)

ping özniteliği ise kullanıcı oluşturduğunuz bağlantıya tıkladığında bildirilecek bir url tanımanıza olanak sağlar. Örnek vermek gerekirse misal kaç kişi bu bağlantıya tıkladı bunu saymak istiyorsunuz diyelim.

Aşağıda ki şekilde kullanım yapabilirsiniz.

<a href="https://www.halilbeycan.com" ping="https://www.halilbeycan.com/izleme.php">Link'e Vereceğiniz İsim</a>

Kullanıcı yukarıda ki bağlantıya tıkladığında “https://www.halilbeycan.com/izleme.php” adresine bir HTTP POST isteği gönderir siz bu izleme.php dosyasında bu post isteiğini kontrol ederek değeri arttırabilirsiniz.

Böylece kaç kişi adrese tıklamış bunu kolayca öğrenebilirsiniz.

HTML5 a Etiketi referrerpolicy Özniteliği(Attributes)

referrerpolicy özniteliği url’i yönlendirenin bilgisini girmenize izin verir yine bu özniteliğin aldığı değerleri başka bir makalede detaylıca anlatacağım. Aşağıda ki gibi kullanımı mevcuttur.

<a href="https://www.halilbeycan.com" referrerpolicy="origin">Link'e Vereceğiniz İsim</a>

HTML5 a Etiketi rel Özniteliği(Attributes)

rel özniteliği url’in kullanıldığı sayfa ile url’in hedef sayfasında ki ilişkiyi belirtmektedir. Aşağıda ki şekilde kullanabilirsiniz.

<a href="https://www.halilbeycan.com" rel="nofollow">Link'e Vereceğiniz İsim</a>

HTML5 rel Özniteliği (Attribute) Nedir? adlı makalemde detaylı bir şekilde rel özniteliğini anlatmış bulunmaktayım.

Şimdi soran olur belki aldığı değerleri neden başka makalede anlatacaksın diye bu öznitelikler sadece a etiketi için geçerli değil diğer etiketlerde de kullanılmakta yani kendimi tekrar etmemek için bu yolu izliyorum.

HTML5 a Etiketi target Özniteliği(Attributes)

target özniteliği verilen adresin nasıl açılacağını belirtmenize yarar örnek olarak bulunduğunuz sayfada yeni sekmede yeni bir pencerede.

Aldığı değerler ise şöyledir.

_blank

Bağlantının yeni sekmede açılacağını bildirir.

_self

Bağlantının bulunduğunuz pencerede açılacağını belirtir. Ayrıca varsayılan değerdir.

_parent

Bağlantının üst pencerede açılmasını sağlar.

_top

Bağlantının pencerenin tüm gövdesinde açılmasını sağlar.

Aşağıda ki şekilde kullanımı mevcuttur.

<a href="https://www.halilbeycan.com" target="_blank">Link'e Vereceğiniz İsim</a>

HTML5 a Etiketi type Özniteliği(Attributes)

type özniteliği bağlantının türünü belirtir misal bir web sayfasımı resimmi bunun gibi. Aşağıdaki şekilde kullanımı mevcuttur değerlerine yine ayrı bir konuda değineceğim.

<a href="https://www.halilbeycan.com" type="text/html">Link'e Vereceğiniz İsim</a>

Eğer makalemin yararı dokunduysa bu beni çok mutlu eder destek olmak ve daha çok kişinin bilinçli bir şekilde html kodlama yapmasına yardım etmek için paylaşabilirsiniz.

Ayrıca merak ettiğiniz ve aklınıza takılan yerleri yorum yaparak bana iletebilirsiniz.

Bir sonraki HTML5 İzin Verilen Attribute Değerleri konusunda görüşmek üzere selamet ile kalın. Ayrıca eğer wordpress blog teması arayışın var ise kendi geliştirmişim olduğum MikiBLOG WordPress Teması na göz atabilirsin.

Kaynak: https://www.w3schools.com/tags/tag_a.asp

Yazar
{halilbeycan0@gmail.com}

Merhaba ben Halil Front-end developer ve wordpress tema geliştiricisiyim bilgisayara olan ilgim 10. yaşlarıma dayanmakta. 15-16 yaşlarımda bilgisayar kullanmayı iyice çözdüm ve programlamaya ilgi duymaya başladım ilk olarak visualbasic.net ile kendi çapımda kendim için programlar geliştirdim zamanla web'e ilgi duydum ve internet sitesi kurmak istedim tabi hosting domain bilmediğim için bedavasitem ve wix gibi siteler ile yapmıştım bunu ama sürekli araştıran öğrenen ve kendini geliştiren biri olduğum için kısa süre sonra domain ve hosting'in ne olduğunu öğrendim sonra ilk .com'lu sitemi açtım o sırada wordpress ile tanıştım zaten programlamaya ilgimin olması sayesinde wordpress için tema geliştirmek istedim ve ilk wordpress temamı hazır bir html şablonu wordpress'e entegre ederek hazırlamıştım sonrasında ise html, css ve js öğrenerek kendimi geliştirdim ve şuan müşterilim için front-end development ve wordpress tema geliştirme işleri yapıyorum.

Yorumlar (Yorum yapılmamış)

    Yorum Yapmak İstemezmisiniz.

Bir cevap yazın

Zorunlu Alanlar "*" İle İşaretlenmiştir