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, hrefnitelikte 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 widthve 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
altnitelik; bir görüntü görüntülenemiyorsa eğer alternatif bir metin, kullanılarak belirtilir.
Özelliğin değeri altekran 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 titlenitelik 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.
hrefYukarı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 hrefnitelik, bağlantılar için adres bilgileri sağlar.
widthve 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 …