Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Sınıflar (Classes) adlı yazımızda HTML’de sınıfların kullanımınıi yani class'ların kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 11 – Sınıflar (Classes) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML ID (Kimlik Özellikleri) konusuna gözatıp, HTML’de etiketlerin id'lerini inceleyip , css ile şekillendirmeler yapacağız.
İlk önce ID kavramına bir göz atalım. ID (identification), sistemin bizleri tanıyabilmesi ve kim olduğumuzu anlayabilmesi için kullanılan bir nevi kimlik'tir. İngilizce'den gelen identification kelimesi ID olarak kısaltılıp, Türkçe'ye kimlik olarak çevrilmektedir. ID'ler aslında günlük hayatımızın her yerinde var , mesela T.C. kimlik numaralarımız da birer ID örneğidir. ID'ler benzersiz olmalıdır yani aynı ID'ye ait birden fazla nesne olamaz.
HTML'de ID kullanımı da bu amaçla kullanılmaktadır. ID niteliği , bir HTML etiketi için benzersiz bir kimlik belirtir. Yani o etiket HTML belgesinde benzersiz olmalıdır.
Bir etikete ID vermemizin sebebi ise , ID değeri CSS ve JavaScript tarafından belirtilen ID değerine sahip benzersiz bir etikete bazı görevler atamak için kullanılır.
ID'ler HTML'de id parametresi ile tanımlanır. CSS'te ise ID'ler "#" işareti ile çağrılır.
ÖRNEK KULLANIM
<p id="example">Lorem Ipsum </p>
ID ve CLASS arasındaki farklar nelerdir ?
ID'ler benzersiz olmalıdır, yani bir html etiketine yönelik yaptığımız bir etki sadece ona ait olmasını istiyorsak ID ile tanımlarız. Ama aynı etkiyi birden fazla etikette göstermek istiyorsak Class ile tanımlarız. Kısaca farkları bu diyebiliriz.
NOT : ID değeri büyük küçük harf duyarlıdır.
ID KULLANIMI ÖRNEK KODLARI
<!doctype html>
<html>
<head>
<title>ID Kullanımı</title>
<style>
#baslik {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="baslik">Başlığım</h1>
</body>
</html>
Örneğimizde style etiketi arasına #baslik adında bir css kodu ekledik. Bu CSS kodunun başındaki # işareti onun bir ID'ye ait olduğunu gösteriyor. Sonrasında h1 etiketimizin parametresine id ekleyip, baslik değerini ekledik. Kullandığımız "baslik" adında ki ID'yi artık başka bir yerde kullanamayız.
Tebrikler! Bu derste HTML’de ID Kullanımını, ID kavramını , HTML'de Kimlik kullanımını , CSS'de ID kullanımını öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin onikinci kısmı olan dersimizde , HTML’de ID Kullanımı konusunu öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !
