HTML Attributes/Nitelikler

1-Nitelikler html ogelerine ek bilgiler vermemizi saglar.
2-Nitelikler tüm Html elemanlarina eklenebilir
3-Nitelikler,birinci etiket olan acma etiketine eklenir
4-Nitelikler genel olarak isim="deger" formatindadir.
5-Bazi nitelikler tum html ogelerinde olabilsede bazilari sadece etikete ozel olabilir.

ORNEK:
<!DOCTYPE html>
<html lang="en">
<body>
	<p align="left">Ben Sola Hizalandim.</p>
	<p align="center">Ben Ortaya Hizalandim.</p>
	<p align="right" title="Sagdaki Text">Ben Saga Hizalandim.</p>
</body>
</html>
Yukardaki koda ait nitelik kullanimlarini farkettiz mi?
1-<html lang="tr-TR"> seklinde bir kullanim ile belgenin dili Turkce olarak belirtilmis.burda lang isim,"tr-TR" ise degerdir

2-p etiketlerinde de align isminde bir nitelik kullandigimizi gordunuz mu?
ve degerler sirayla,left,center ve right
yukarda da belirttigimiz gibi p tagina birtakim ek bilgiler sunduk. icerik sola hizali olsun,ortada olsun,sagda olsun gibi.

3-en sondaki p etiketine digerlerinde olmayan "title" isminde bir nitelik daha ekledik.imleci bu text'in ustune getirdiginizde kucuk bir aciklama metni ekranda gorunecektir.
KODUN EKRAN GORUNTUSU:

Su ana kadar kullandigimiz Nitelikleri Tekrar edelim
  • title : imlec ile html ogesi uzerine geldigimizde gorunecek kucuk aciklama metni ayarlamayi saglar
  • href:Link icin bir adres belirlememizi saglar.(a)
  • src:Resim kaynaginin adresi(img)
  • alt:Verilen adreste resim bulunamazsa kullaniciya gosterilecek alternatif metin.(img)
  • lang:Dokumanin dilini belirtebiliriz
  • width:Ogenin genislik degeri biz daha once img icin kullandik
  • height:Ogenin yukseklik degeri biz daha once img icin kullandik

HTML Temel isimli dersi tekrar incelerseniz link ve img icin nitelikleri nasil kullandigimizi tekrar gorebilirsiniz.

Dersler ilerledikce burda belirtilmeyen cok sayida niteligi kullanacagiz,cunku bircok nitelik sadece tag'a ozeldir ornegin tablolar konusuna gelince baska nitelikler ogrenecegiz.
Formlar bolumune gelince oldukca fazla yeni niteliklerle karsilasacagiz.bütün bunlardan burda bahsetmek adim adim ilerleyen arkadaslarimizin zorlanmasina sebep olacaktir.

Core Attributes/Cekirdek Nitelikler

HTML ogelerinin neredeyse tamaminda kullandigimiz nitelikler sunlardir.

id,class,style,title
title'dan bolca bahsettik biz digerleriyle devam edelim
  • HTM-ID

    HTML ogesinin "Kimlik Numarasi" gibi dersem sanirim yerinde olacaktir.
    Fakat gercek anlamda bir sayi vermek zorunda degiliz !
    ORNEK:
    <p id='makale'>Makale Texti </p>
    iste burda 'makale' ismi bizim kullandigimiz p elementinin numarasi(ID) oldu.artik bu p sayfada yer alan diger paragraf taglarindan farkli cunku id'si makale olan sadece 1 tane p tagi vardir,hatta tum sayfada sadece makale kimlik numarali 1 tane html ogesi bulunmalidir!
    peki ID vermek ne ise yarar?
    CSS konusuna gelince p elementlerine bir stil verdigimizi dusunun,yazilan stil hepsini etkileyecektir,oysa makale ID bilgisine sahip ogeye stil uygularsak sadece 1 tane oge bu stilden etkilenir.

    Bir sayfanin/yazinin belirli bolumlerine ID verilerek bu sayfaya verilen linklerin dogrudan istedigmiz bolumu gostermesini saglayabiliriz. oldukca fazla icerikli sayfalarda bu yontem kullanislidir (Bu isleme yer isareti olusturmak denir) ...
    Javascript ve css derslerinde surekli ID kullaniyor olacagiz
  • id degerlerini bir sayi ile baslatmamak onerilen bir davranistir!
    (ben chrome ile denedim css uygulanamiyor)

    HTML Class

    Okullarda her ogrencinin bir sinifi vardir bilirsiniz.sinifta yer alan tum ogrenciler bazi konularda ortak bilgilere sahiptir
    Ornegin Tarih derslerine ayni hoca gelir.[istisnalari bilemem :)]
    iste ogrenciler gibi HTML ogelerinide bazen ayni sinifa dahil etmek bize kolaylik saglar. Yine CSS'den bahsetmeliyim
    Ornegin sayfadaki tum basliklari kirmizi yapmak istersek CSS tarafinda bir sinif olustururuz,adida "kirmizibaslik" olsun ve asagdaki koda bakalim

    <h1 class='kirmizibaslik'>BASLIK-1</h1>
    <h2 class='kirmizibaslik'>BASLIK-10</h2>
    <p class='kirmizibaslik'>Bu Bir Text...</p>
    Sayfada yer alan basliklar(sinifi kirmizibaslik olanlar!) kirmizi olacaktir.
    Koda tekrar bakarsak p elementide kirmizibaslik sinifina sahip oldugu icin onun icerigide kirmizi olacaktir!.

    NOT:Okullarda bazi dersler secmelidir arada sinif degisimleri olur,ornegin 9C sinifinin ogrencisi arada 10A sinifina gidip baska arkadaslariyla ders alabilir bu sorun degil ozaman ben bu durum icin soyle sinif degeri yazabilirim(ogrenci isimli bir tag oldugunu dusunun)
    <ogrenci class='9C 10A'>Ad Soyad</ogrenci>
    Bu Konular CSS,Javascript tarafinda isimize yarayacak
  • HTML Style

    style niteligi ile dogrudan html ogesine css uygulayabiliriz.
    ORNEK:
    <p style="color:red;font-size:24px;">Ben kirmizi renkliyim ve font boyutumda 24px.</p>
    SONUC:

    Ben kirmizi renkliyim ve font boyutumda 24px.

Nitelik isim ve degerlerinin genel olarak kucuk harfle kullanimi tercih edilir.

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com