HTML Nitelikleri

Önceki derslerimizde web sayfasının iskeletini oluşturduk ve içerisine başlık ve paragraflar ekledik. Şu an elimizde kaba bir yapı var. Ama bu yapının parçaları hakkında daha fazla detay öğrenmemiz gerekiyor. Örneğin:

Bu duvara bir tablo asacağız, ama hangi tabloyu?
Bu bir pencere, ama boyutları ne kadar?

Bu soruların cevabını veren, elementlere ek bilgi ve özellikler eklemeye HTML Nitelikleri (HTML Attributes) diyoruz.

HTML Nitelikleri Nasıl Yazılır?

Nitelikler her zaman bir elementin açılış etiketinin içerisine yazılırlar ve genellikle isim="değer" şeklinde bir yapıya sahiptirler.

İsim: Eklemek istediğimiz özelliğin türüdür (örneğin: href - bağlantının adresi, src - resmin kaynağı).
Değer: O özelliğe atadığımız değerdir (örneğin: "https://teknomosfer.com" veya "aslan.png").

En Sık Kullanılan HTML Nitelikleri

Bazı nitelikler HTML'in temel işlevlerini yerine getirmek için çok önemlidir. Gelin en önemlilerini örneklerle inceleyelim.

href Niteliği (Bağlantılar için)

<a> etiketini tek başına kullanmak anlamsızdır. Onun bir bağlantı olabilmesi için href niteliği ile nereye gideceğini belirmemiz gerekir.

<a href="https://teknomosfer.com">TeknoMosfer'e gitmek için tıklayın.</a>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır:

Burada href niteliği, bağlantının hedefini belirtir.

src Niteliği (Resimler için)

<img> etiketi, hangi resmi göstereceğini src (source/kaynak) niteliği olmadan bilemez.

<img src="resimler/aslan.png">

Burada src niteliği, resimler klasörünün içeresinde bulunan aslan.png dosyasını sayfada göstermesini söyler.

width ve height Nitelikleri (Boyutlandırma için)

Bir resmin veya başka bir elementin genişliğini ve yüksekliğini belirlemek için kullanılmaktadır. Değerler piksel cinsinden kabul edilir.

<img src="resimler/aslan.png" width="600" height="200">

Bu kod, tarayıcıya resmi 600 piksek genişliğinde ve 300 piksel yüksekliğinde göstermesini söyler.

alt Niteliği (Alternatif metin)

<img> etiketinin en önemli niteliklerinden biridir. alt niteliğinin üç önemli görevi bulunmaktadır:

Erişilebilirlik: Görme engelli kullanıcıların ekran okuyucuları, resimde ne olduğunu bu metni okuyarak anlatır.
Hata Durumu: Eğer resim herhangi bir sebepten dolayı yüklenemezse, alt metni resmin yerinde görünür.
SEO: Google, resmin ne hakkında olduğunu anlamak için bu metni kullanmaktadır.

<img src="resimler/aslan.png" alt="Ormanda bir aslan.">

style Niteliği (Stil ve renk için)

Elementlere doğrudan CSS stilleri eklemek için kullanılır. Örneğin bir metnin arka planını değiştirebilirsiniz:

<p style="background-color: red;">Bu paragrafın arka planı kırmızı.</p>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır:

NOT: style niteliği hızlı testler için kullanışlı olsa da, profesyonel web geliştirmede stiller genellikle ayrı CSS dosyalarında bulunur.

lang Niteliği (Dil belirtmek için)

<html> etiketinin içine yazılarak tüm web sayfasının ana dilini belirtmektedir. Bu, hem arama motorları hem de ekran okuyucular için çok önemlidir. Türkçe bir sayfa için kullanım:

<html lang="tr">

title Niteliği (Ek bilgi ve ipucu için)

Fare imlecini bir elementin üzerine getirdiğinizde küçük bir kutucuk içinde görünen ek bilgiyi sağlamaktadır.

<p title="Bu bir ipucu metnidir.">Fareyle üzerine gel.</p>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır:

Unutulmaması Gereken Kurallar

Nitelikler her zaman küçük harfle yazılır (örneğin: href doğrudur, HREF yanlıştır).
Nitelik değerlerini her zaman tırnak içerisine alın (href="sayfa.html" doğrudur, href=sayfa.html yanlıştır).