HTML Özellikleri
HTML nitelikleri, HTML öğeleri hakkında ek bilgi sağlar.
HTML Özellikleri
- Tüm HTML öğelerinin nitelikleri olabilir
- Nitelikler, öğeler hakkında ek bilgi sağlar
- Nitelikler her zaman başlangıç etiketinde belirtilir
- Nitelikler genellikle ad/değer çiftleri halinde gelir: name="value"
href Özelliği
<a>etiketi bir köprüyü tanımlar . Nitelik
href, bağlantının gittiği sayfanın URL'sini belirtir:
Örnek
<a href="https://www.w3schools.com">Visit W3Schools</a>
HTML Bağlantıları bölümümüzde bağlantılar hakkında daha fazla bilgi edineceksiniz .
src Özelliği
<img>etiketi, bir HTML sayfasına bir resim gömmek için kullanılır . Nitelik src, görüntülenecek görüntünün yolunu belirtir:
Örnek
<img src="img_girl.jpg">
Nitelikte URL'yi belirtmenin iki yolu vardır src
:
1. Mutlak URL - Başka bir web sitesinde barındırılan harici bir resme bağlantılar. Örnek: src="https://www.w3schools.com/images/img_girl.jpg" .
Notlar: Harici görseller telif hakkı kapsamında olabilir. Kullanmak için izin almazsanız, telif hakkı yasalarını ihlal ediyor olabilirsiniz. Ayrıca, harici görüntüleri kontrol edemezsiniz; aniden kaldırılabilir veya değiştirilebilir.
2. Göreli URL - Web sitesinde barındırılan bir resme bağlantılar. Burada URL, alan adını içermez. URL eğik çizgi olmadan başlıyorsa, geçerli sayfaya göre olacaktır. Örnek: src="img_girl.jpg". URL bir eğik çizgi ile başlıyorsa, etki alanına göre olacaktır. Örnek: src="/images/img_girl.jpg".
İpucu: Göreli URL'leri kullanmak neredeyse her zaman en iyisidir. Etki alanını değiştirirseniz kırılmazlar.
Genişlik ve yükseklik Nitelikleri
Etiket ayrıca görüntünün genişliğini ve yüksekliğini (piksel olarak) belirten ve niteliklerini <img>de içermelidir
:width
height
Örnek
<img src="img_girl.jpg" width="500" height="600">
alt Özellik
Etiket için gerekli altöznitelik <img>
, resim herhangi bir nedenle görüntülenemiyorsa, resim için alternatif bir metin belirtir. Bunun nedeni, yavaş bağlantı veya srcöznitelikteki bir hata ya da kullanıcının bir ekran okuyucu kullanması olabilir.
Örnek
<img src="img_girl.jpg" alt="Girl
with a jacket">
Örnek
Var olmayan bir resmi görüntülemeye çalışırsak ne olacağını görün:
<img src="img_typo.jpg" alt="Girl
with a jacket">
HTML Görselleri bölümümüzde görseller hakkında daha fazla bilgi edineceksiniz .
stil Özellik
Nitelik style, bir öğeye renk, yazı tipi, boyut ve daha fazlası gibi stiller eklemek için kullanılır.
Örnek
<p style="color:red;">This is a red paragraph.</p>
HTML Stilleri bölümümüzde stiller hakkında daha fazla bilgi edineceksiniz .
lang Özelliği
Web sayfasının dilini belirtmek için her zaman etiketin langiçine özniteliği eklemelisiniz. <html>Bu, arama motorlarına ve tarayıcılara yardımcı olmak içindir.
Aşağıdaki örnek, dil olarak İngilizce'yi belirtir:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
lang
Öznitelikteki dil koduna ülke kodları da eklenebilir . Bu nedenle, ilk iki karakter HTML sayfasının dilini, son iki karakter ise ülkeyi tanımlar.
Aşağıdaki örnek, dil olarak İngilizce'yi ve ülke olarak Amerika Birleşik Devletleri'ni belirtir:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Tüm dil kodlarını HTML Dil Kodu Referansımızda görebilirsiniz .
başlık Özellik
Nitelik title, bir öğe hakkında bazı ek bilgileri tanımlar.
Başlık özelliğinin değeri, fareyi öğenin üzerine getirdiğinizde bir araç ipucu olarak görüntülenecektir:
Örnek
<p title="I'm a tooltip">This is a paragraph.</p>
Öneriyoruz: Daima Küçük Harf Niteliklerini Kullanın
HTML standardı, küçük harfli öznitelik adları gerektirmez.
Title niteliği (ve diğer tüm nitelikler), title veya TITLE gibi büyük veya küçük harflerle yazılabilir .
Ancak W3C , HTML'de küçük harf öznitelikleri önerir ve XHTML gibi daha katı belge türleri için küçük harf öznitelikleri talep eder.
W3Schools'da her zaman küçük harfli öznitelik adları kullanırız.
Öneriyoruz: Daima Özellik Değerlerinden Alıntı Yapın
HTML standardı, nitelik değerleri etrafında tırnak işaretleri gerektirmez.
Ancak W3C , HTML'de alıntılar önerir ve XHTML gibi daha katı belge türleri için alıntılar ister .
İyi:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Kötü:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Bazen tırnak kullanmanız gerekir. Bu örnek, bir boşluk içerdiğinden title niteliğini doğru şekilde görüntülemeyecektir:
Örnek
<p
title=About W3Schools>
W3Schools'da her zaman öznitelik değerleri etrafında tırnak işaretleri kullanırız.
Tek veya Çift Alıntılar?
Nitelik değerleri etrafındaki çift tırnak, HTML'de en yaygın olanıdır, ancak tek tırnak da kullanılabilir.
Bazı durumlarda, öznitelik değerinin kendisi çift tırnak içerdiğinde, tek tırnak kullanılması gerekir:
<p title='John "ShotGun" Nelson'>
Ya da tam tersi:
<p title="John 'ShotGun' Nelson">
Bölüm özeti
- Tüm HTML öğelerinin nitelikleri olabilir
hrefözelliği ,<a>bağlantının gittiği sayfanın URL'sini belirtirsrcniteliği, görüntülenecek<img>görüntünün yolunu belirtir- Görüntüler için boyut bilgisi sağlayan
widthveheightözellikleri<img> altözniteliği, bir<img>resim için alternatif bir metin sağlarstyleNitelik, bir öğeye renk, yazı tipi, boyut ve daha fazlası gibi stiller eklemek için kullanılır .- Etiketin
langözelliği<html>, Web sayfasının dilini bildirir. titleNitelik, bir öğe hakkında bazı ek bilgileri tanımlar .
HTML Alıştırmaları
HTML Özellik Referansı
Her bir HTML öğesi için tüm niteliklerin tam listesi, HTML Nitelik Referansımızda listelenmiştir .