Nitelikler HTML elemanları hakkında ek bilgi sağlar.
HTML Öznitelikleri (Html Attributes)
- Tüm HTML öğelerinin özellikleri olabilir.
- Öznitelikler bir öğe hakkında ek bilgi sağlar.
- Öznitelikler her zaman başlangıç etiketinde belirtilir.
- Öznitelikler genellikle ad / değer çiftleri olarak gelir: name = ‘value’ gibi.
Href Özniteliği
HTML bağlantıları <a> etiketi ile tanımlanır. Bağlantı adresi href niteliğinde belirtilir.
Örnek:
|
1 2 3 |
<a href="https://www.algoritmaornekleri.com">Bağlanmak için tıklayın</a> |
Bağlantılar ve <a> etiketi hakkında daha fazla bilgiyi Html Dersleri konusunun ilerleyen bölümlerinde bulabilirsiniz.
src Özniteliği
HTML görüntüleri <img> etiketi ile tanımlanır.
Görüntü kaynağının dosya adı, src özniteliğinde belirtilmiştir.
Örnek:
|
1 2 3 |
<img src="resim1.jpg"> |
Genişlik (width) ve Yükseklik (height) Özniteliği
HTML’deki resimler, görüntünün genişliğini ve yüksekliğini belirten özniteliklere sahiptir.
Örnek:
|
1 2 3 |
<img src="resim1.jpg" width="500" height="600"> |
Görüntü boyutu piksel cinsinden belirtilir: “width = ‘500’“, 500 piksel genişliğinde demektir.
HTML Image kullanımı bölümümüzdeki görüntüler hakkında daha fazla bilgi edineceksiniz.
alt Özniteliği
alt özniteliği, bir görüntü gösterilemediğinde kullanılacak alternatif bir metin belirtir.
Niteliğin değeri ekran okuyucular tarafından okunabilir. Bu şekilde, web sayfasına ‘dinleyen’ biri, ör. Görme engelli bir kişi, elemanı ‘duyabilir’.
Örnek:
|
1 2 3 |
<img src="cpu.jpg" alt="Cpu Resmi"> |
style Özniteliği
Stil özelliği, renk, yazı tipi, boyut vb. Gibi bir öğenin stilini belirtmek için kullanılır.
|
1 2 3 |
<p style="color:red">Bu bir paragraf.</p> |
Not: CSS dersleri bölümünde stil verme ile ilgili daha kapsamlı bilgiler bulabilirsiniz.
lang Özniteliği
Belgenin dili <html> etiketinde bildirilebilir.
Dil lang niteliğiyle bildirilmiştir.
Dil bildirmek, erişilebilirlik uygulamaları (ekran okuyucular) ve arama motorları için önemlidir.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> |
title Özniteliği
<p> öğesine bir title özniteliği eklendiğinde paragrafın üzerine fare ile gelindiğinde başlık özniteliğinin değeri bir ipucu olarak görüntülenir.
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <h2 title="Başlık">The title Attribute</h2> <p title="Bu bir açıklama ."> Bu kodları yazdığınızda Mouse ile bu yazının üzerine gelip beklediğinde açıklama balonu göreceksiniz. </p> </body> </html> |
Ekran Görüntüsü:
Öznitelik (Attribute) Kullanımı Önerileri
- Html5 standartında Öznitelik kullanımında yazım kuralı olarak küçük harf ya da büyük harf kısıtlaması yoktur. Örneğin title özniteliği için “title” ta da “TITLE” şeklinde bir yazım kabul edilecektir. Fakat bizim önerimiz küçük harf kullanımı yönündedir.
- Html5 standartında özellik yazımında çift tırnak ” ” kullanımı mecbur değildir. Örneğin href özniteliği tırnak kullanılmadan aşağıdaki şekilde de yazılabilir.
<a href=https://www.algoritmaornekleri.com>
Bizim önerimiz tırnakların kullanılması yönündedir. XHTML gibi daha güçlü belge türleri için tırnak gereklidir.
Bunu yanı sıra aşağıdaki örnekteki gibi bir ifadede tırnak işaretlerinin kullanılmaması hataya yol açacaktır.
<p title=Html Hakkında>
Tek Tırnak mı Çift Tırnak mı Kullanılmalı ?
Nitelik değerlerinin etrafındaki çift tırnak, HTML’de en yaygın olanlardır, ancak tek tırnaklar da kullanılabilir.
Bazı durumlarda, öznitelik değerinin kendisi çift tırnak içerdiğinde, tek tırnak kullanılması gerekir.
Örnek:
|
1 2 3 |
<p title='Web Tasarım "algoritmaornekleri" sitesinden öğrenilir.'> |
Örnek:
|
1 2 3 |
<p title="Web Tasarım 'algoritmaornekleri.com' sitesinden öğrenilir."> |
Html de Kullanılan Öznitelik (Attributes) Değerleri
| Attribute | Açıklama |
|---|---|
| alt | Resim görüntülenemediğinde, bir resim için alternatif bir metin belirtir. |
| disabled | Bir giriş öğesinin devre dışı bırakılması gerektiğini belirtir. |
| href | Bir bağlantının URL’sini (web adresi) belirtir. |
| id | Bir öğe için benzersiz bir kimlik belirtir. |
| src | Bir resmin URL’sini (web adresi) belirtir. |
| style | Bir öğe için satır içi CSS stilini belirtir. |
| title | Bir öğe hakkında ek bilgi belirtir (araç ipucu olarak görüntülenir). |
HTML’ de kullanılan tüm Özniteliklere ulaşmak için tıklayın. (Eklenecek…)