HTML Nitelikleri

HTML nitelikleri, HTML öğeleri hakkında ek bilgi sağlar.

HTML Nitelikleri

Tüm HTML öğelerinin nitelikleri olabilir
Nitelikler öğeler hakkında ek bilgi sağlar
Nitelikler her zaman başlangıç etiketinde belirtilir
Nitelikler genellikle aşağıdaki gibi ad/değer çiftleri halinde gelir: name=”value”

href Özelliği

<a> etiketi linki (köprüyü ) tanımlar. href özelliği bağlantının gittiği sayfanın URL’sini belirtir.

<a href="https://www.turkyazilimci.com">TurkYazilimci Ücretsiz Eğitim Sitesi</a>

src Özelliği

<img> etiketi, bir görüntüyü bir HTML sayfasına gömmek için kullanılır. src özelliği, görüntülenecek görüntünün yolunu belirtir. Önceki yazılarda buna ait bir örnek yapmıştık.

<img src="turkyazilimci_logo.jpg">

URL’yi src özelliğinde belirtmenin iki yolu vardır:

1. Mutlak URL – Başka bir web sitesinde barındırılan harici bir görsele bağlantılar.

Örnek:

src="https://www.erensarigul.info/images/logo.jpg".

Önemli not : Harici görseller telif hakkı kapsamında olabilir. Kullanma iznini almazsanız telif hakkı yasasını ihlal edebilirsiniz. Ayrıca harici görüntüleri sık sık kontrol etmezseniz ilgili siteden kaldırılabilirler.

2. Relative URL – Web sitesinde barındırılan bir görsele 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 eğik çizgiyle başlıyorsa alan adına göre olacaktır.

Örnek:

src="/images/img_girl.jpg"

Mutlak URL’de belirttiğimiz gibi harici bir linkten bağlantı verilmesi durumunda telif hakkı veya resmin silinmesi gibi durumlar olabileceğinden Relative yani göreceli link kullanmak her zaman daha iyidir.

Genişlik ve Yükseklik Nitelikleri

<img> etiketi ayrıca görüntünün genişliğini ve yüksekliğini (piksel cinsinden) belirten genişlik ve yükseklik niteliklerini de içermelidir:

<img src="turkyazilimci_logo.jpg" width="500" height="600">

alt Özellikleri

<img> etiketi için gereken alt özelliği, görselin herhangi bir nedenle görüntülenememesi durumunda görsel için alternatif metni belirtir. Bunun nedeni yavaş bağlantıdan, src özelliğindeki bir hatadan ya da kullanıcının ekran okuyucu kullanması olabilir. Dilerseniz olmayan bir görsel linkini vererek alt etiketini daha net görebilirsiniz.

<img src="turkyazilimci_logo.jpg" alt="Türk yazılımcı ücretsiz eğitim logosu">

style Özelliği

Style özelliği, bir öğeye renk, yazı tipi, boyut ve daha bir çok özellik eklemek için kullanılır.

<p style="color:red;">Bu kırmızı bir paragraf.</p>

Style özelliği ile ilgili bir çok özellik mevcuttur. Bunları ilerleyen yazılarda detaylı olarak yazacağız.

lang Özelliği

Web sayfasının yayın yaptığı dili belirtmek için her zaman <html> etiketi içerisinde lang niteliği eklenmelidir. Bunun amacı arama motorlarına ve çeviri özelliği yapan internet tarayıcılarına yardımcı olmaktır.

Aşağıda sayfa dilinin İngilizce olduğunu gösteren bir örnek vardır;

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Lang özelliğinde dil koduna ülke kodları da eklenebilmektedir. Yani ilk iki karakter HTML sayfasının dilini, son iki karakter ise ülkeyi tanımlar.

Aşağıdaki örnekte dil olarak İngilizce ve ülke olarak Amerika Birleşik Devletleri belirtilmektedir:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

İlerleyen yazılarda yine HTML Dil Kodları başlığı altında daha detaylı bilgiler vereceğiz.

title Özelliği

Title özelliği, bir öğe hakkında bazı ekstra bilgileri tanımlar.

title özelliğinin değeri, fareyi öğenin üzerine getirdiğinizde bir araç ipucu olarak görüntülenir:

<p title="Ben bir mesaj kutusuyum. Yazı Hakkında Bilgi Veriyorum.">Bu uzun bir paragraftır. Yazı Üzerinde Bekleyip Detayları Görün.</p>

Önerimiz: Özellik Belirtirken Her Zaman Küçük Harf Niteliklerini Kullanın.!

HTML standardı, küçük harfli öznitelik adlarına gerek duymaz.

Başlık özelliği (ve diğer tüm özellikler), başlık veya TITLE gibi büyük veya küçük harfle yazılabilir.

Ancak W3C, HTML’de küçük harf niteliklerini önerir ve XHTML gibi daha katı belge türleri için küçük harf niteliklerini uygun görür ve buna göre uyarı verir. Biz de daha önceki yazılarımız gibi sizlere küçük harf kullanımını öneriyoruz.

Diğer bir önerimiz ise sürekli tırnak işareti kullanın.

Önerilen Kullanım

<a href="https://www.turkyazilimci.com/">Siteye Git</a>

Önerilmeyen Kullanım

<a href=https://www.turkyazilimci.com/>Siteye Git</a>

Tek veya Çift Tırnak? Hangisini Kullanmalıyım ?

Özellik değerlerinin etrafındaki çift tırnak HTML’de en yaygın olanıdır, ancak tek tırnak da kullanılabilir.

Bazı durumlarda, nitelik değerinin kendisi çift tırnak içerdiğinde, tek tırnak işaretinin kullanılması gerekir:

<p title='Bir "Başka Yazılım" Sitesi'>

Ya da tam tersi bir durum;

<p title="Bir Başka 'Yazılım' Sitesi">

Bölüm Özeti

Tüm HTML öğelerinin nitelikleri olabilir
<a>’nın href özelliği, bağlantının gittiği sayfanın URL’sini belirtir
<img>’nin src özelliği, görüntülenecek resmin yolunu belirtir
<img> öğesinin width ve height özellikleri, resimler için boyut bilgisi sağlar
<img> alt özelliği bir görsel için alternatif bir metin sağlar
style özelliği, bir öğeye renk, yazı tipi, boyut ve daha fazlası gibi stiller eklemek için kullanılır.
<html> etiketinin lang özelliği Web sayfasının dilini bildirir
Title özelliği, bir öğe hakkında bazı ekstra bilgileri tanımlar.

HTML Eğitimi

3 Ekim 2023

Was this article helpful?