HTML Nitelik Yapısı! (Adım Adım Açıklamalar)

Nitelikler, HTML öğeleri hakkında ek bilgi sağlar.
HTML Nitelikleri
Tüm HTML öğelerinin nitelikleri olabilir.
Öznitelikler, bir öğe hakkında ek bilgi sağlar.
Öznitelikler her zaman başlangıç etiketinde belirtilir.
Öznitelikler genellikle şöyle bir isim / değer çifti ile gelir: name = “value”
Href Özniteliği
HTML bağlantıları <a>
etiketi ile tanımlanır . Bağlantı adresi, href
nitelikte belirtildi :
<a href="https://www.armyyazilim.com">Bu bir linktir.</a>
See the Pen link by ArmyYazılım (@armyyazilim) on CodePen.
<a>
Bu eğitimde daha sonra bağlantılar ve etiket hakkında daha fazla bilgi edineceksiniz .
Src Özniteliği
HTML görüntüleri <img>
etiketi ile tanımlanır .
Resim kaynağının dosya adı, nitelikte belirtildi src
:
<img src="https://armyyazilim.com/wp-content/uploads/2019/10/css.png">
See the Pen img by ArmyYazılım (@armyyazilim) on CodePen.
Genişlik ve yükseklik
HTML görüntülerinde görüntünün genişliğini ve yüksekliğini belirten özellikler width
ve height
öznitelikler vardır:
<img src="https://armyyazilim.com/wp-content/uploads/2019/10/css.png" width="500" height="600">
See the Pen img yükseklik genişlik by ArmyYazılım (@armyyazilim) on CodePen.
Genişlik ve yükseklik varsayılan olarak piksel cinsinden belirtilir; width = “500” 500 piksel genişliğinde demektir.
Alt özellik
alt
nitelik; bir görüntü görüntülenemiyorsa eğer alternatif bir metin, kullanılarak belirtilir.
Özelliğin değeri alt
ekran okuyucuları tarafından okunabilir. Bu şekilde, web sayfasını “dinleyen” bir kişi, örneğin görme engelli bir kişi, etiketi “duyabilir”.
<img src="https://armyyazilim.com/wp-content/uploads/2019/10/css.png" alt="Css3 logosu">
See the Pen css3 logo by ArmyYazılım (@armyyazilim) on CodePen.
Bu alt
özellik aynı zamanda görüntü gösterilemediğinde de faydalıdır (örneğin yoksa):
<img src="img_yok.jpg" alt="Resim yok açıklaması">
Var olmayan bir görüntüyü göstermeye çalışırsak ne olacağını görün:
See the Pen resim yok by ArmyYazılım (@armyyazilim) on CodePen.
Stil niteliği
Bu style
özellik, renk, yazı tipi, boyut vb. gibi bir öğenin stilini belirtmek için kullanılır.
Örnek;
<p style="color:red">Bu bir paragraftır.</p>
Çıktısı;
See the Pen kırmızı by ArmyYazılım (@armyyazilim) on CodePen.
Şekillendirme hakkında daha sonra bu eğitimde ve CSS Eğitimimizde daha fazlasını öğreneceksiniz .
Lang Öznitelik
Belgenin dili <html>
etikette belirtilebilir.
Dil niteliği ile ilan edilir lang
.
Dil bildirimi erişilebilirlik uygulamaları (ekran okuyucuları) ve arama motorları için önemlidir.
<!DOCTYPE html>
<html lang="tr-TR">
<body>
...
</body>
</html>
İlk iki harf dili (en) belirtir. Bir lehçesi varsa, ikinci harf bölümünü daha ekleyin (ABD). Mesela: en-US. Burada ingilizcenin Amerikan ingilizcesini seçiyoruz.
Başlık Özniteliği
Burada, elemana bir title
nitelik eklenir <p>
. Title özelliğinin değeri, paragrafın üzerinde fareyi kaldırdığınızda araç ipucu olarak görüntülenir:
<p title="bu paragrafın açıklamasıdır.">
Bu bir paragraftır.
</p>
Çıktısı;
See the Pen paragraf title by ArmyYazılım (@armyyazilim) on CodePen.
Öneririz: Küçük Harf Özelliklerini Kullan
HTML5 standardı, küçük harfli nitelik adları gerektirmez.
Başlık niteliği, title veya TITLE gibi büyük veya küçük harflerle yazılabilir .
ArmyYazılım önerir: HTML, XHTML gibi sıkı denetime sahip dosyalar için küçük harf talep eder.
ArmyYazılım’da her zaman küçük harf öznitelik adları kullanırız.
Öneririz: Tırnak işaretli Öznitelik Değerleri
HTML5 standardı, nitelik değerleri etrafında tırnak gerektirmez.
href
Yukarıda gösterilen özellik, tırnak işaretleri olmadan yazılabilir ancak biz tavsiye etmiyoruz.
Kötü kullanım;
<a href=https://www.armyyazilim.com>
İyi kullanım;
<a href="https://www.armyyazilim.com">
ArmyYazılım önerir: HTML, XHTML gibi sıkı belge türleri için tırnak işareti gerekir.
Bazen tırnak kullanmak gerekir . Bu örnek, bir boşluk içerdiğinden title niteliğini doğru göstermiyor:
<p title=Army Yazılım>
See the Pen paragraflar by ArmyYazılım (@armyyazilim) on CodePen.
Tırnak kullanmak en yaygın olanıdır. Tırnakları atlamak hatalara neden olabilir.
ArmyYazılım’da her zaman nitelik değerlerinin etrafında tırnak işaretleri kullanırız.
Tek veya Çift Tırnak?
Öznitelik değerleri etrafında çift tırnak, HTML’de en yaygın olanıdır, ancak tek tırnaklar da kullanılabilir.
Bazı durumlarda, öznitelik değeri kendisi çift tırnak içerdiğinde, tek tırnak kullanmak gerekir:
<p title='İbrahim "Geliştirici" Bozkurt'>
Ya da tam tersi:
<p title="İbrahim 'Geliştirici' Bozkurt">
Her iki kullanımda doğrudur.
Bölüm özeti
Tüm HTML öğelerinin nitelikleri olabilir.
Bu title
özellik ek “araç ipucu” bilgisi sağlar.
Bu href
nitelik, bağlantılar için adres bilgileri sağlar.
width
ve height
özellikleri, resimlere ilişkin boyut bilgileri sağlamak için kullanılır.
Bu alt
özellik ekran okuyucuları için metin sağlar.
ArmyYazılım’da her zaman küçük harf öznitelik adları kullanırız
ArmyYazılım’da hep çift tırnak öznitelik değerleri kullanırız.
HTML Nitelikleri
Aşağıda, HTML’de sıkça kullanılan ve bu derste daha fazla bilgi alacağınız bazı niteliklerin alfabetik listesi verilmiştir:
Nitelik | Açıklama |
---|---|
alt | Görüntü gösterilemediğinde, görüntü için alternatif bir metin belirtir. |
disabled | Bir giriş öğesinin devre dışı bırakılması gerektiğini belirtir |
href | Bağlantının URL’sini (web adresini) belirtir |
id | Bir öğe için benzersiz bir kimlik belirtir |
src | Bir resmin URL’sini (web adresini) belirtir |
style | Bir öğe için satır içi bir CSS stili belirtir |
title | Bir öğe hakkında ek bilgi belirtir (araç ipucu olarak görüntülenir) |
İlginizi çekebilir…
WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …