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

#HTML

HTML nitelikler, html etiketleri hakkında ek bilgi sağlar.

HTML Nitelikleri! (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:

NitelikAçı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 …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt ////