HTML id (Kimlik) Yapısı!

#HTML

html id Kimlik niteliği her etiket için ayrı özellikler belirtir. Her id niteliği sadece bir etiket için kullanılmalıdır ve id niteliği bir etikete özeldir.

HTML id (Kimlik) Özelliği
HTML id (Kimlik) Özelliği

Html id Niteliği HTML elemanı (değer HTML belgesi içinde benzersiz olmalıdır) için benzersiz bir kimlik belirtir.

Id Kimlik değeri, CSS ve JavaScript tarafından, belirli bir kimlik değerine sahip öğeye ilişkin bazı görevleri gerçekleştirmek için kullanılabilir.

CSS’de, belirli bir kimliğe sahip bir öğe seçmek için, bir hash (#) karakteri ve ardından öğenin kimliğini yazın:

Örnek

“myHeader” kimliğine sahip bir öğeyi stillendirmek için CSS kullanın:

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

Çıktısı;

See the Pen html id kullanımı by ArmyYazılım (@armyyazilim) on CodePen.

İpucu: id özelliği herhangi bir HTML öğesinde kullanılabilir.

Not: Kimlik değeri büyük / küçük harf duyarlıdır.

Not: id değeri en az bir karakter içermelidir ve karakterler arası boşluk bulunamaz. Bunun yerine alt çizgi veya titre kullanarak kelimeler veya karakterler birleştirilmelidir.

Class ve id Arasındaki Fark

Bir HTML öğesi, yalnızca bu tek öğeye ait benzersiz bir kimliğe yani id ye sahip olabilirken, sınıf adı birden çok öğe tarafından kullanılabilir:

<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Çıktısı;

See the Pen html id ve class farkı by ArmyYazılım (@armyyazilim) on CodePen.

Aramızdaki bazı işgüzar arkadaşlar 🤣 üsteki örnekteki id yi alıp diğerinde aynen kullanırlarsa çalıştığını görecekler ancak mantıken çalışmaz ve hata alırsınız.

Görünürde çalışırdır ancak tarayıcılarda hata ile karşılaşırsınız. Bu hatayı en çok javascript bölümünde kullandığınızda göreceksiniz.

Bu gerçekten önemli bir konudur. Bir id kimliği sadece bir etiket için kullanılmalıdır.

İd ile sayfada bir yere link verme!

HTML yer imleri, okuyucuların bir Web sayfasının belirli bölümlerine atlamasına izin vermek için kullanılır.

Web sayfanız çok uzunsa, yer işaretleri yararlı olabilir.

Bir yer imi oluşturmak için önce yer imini oluşturup ardından bir link eklemelisiniz.

Bağlantı tıklandığında, sayfa yer imi ile konuma ilerler.

Örnek

İlk önce, şu idözellik ile bir yer imi oluşturun :

<h2 id="C4">Bölüm 4</h2>

Ardından, aynı sayfadan yer imine (“Bölüm 4’e atla”) bir link ekleyin:

<a href="#C4">Bölüm 4'e atla</a>

Veya başka bir sayfadan yer imine (“Bölüm 4’e atla”) bir link ekleyin:

<a href="html_demo.html#C4">Bölüm 4'e atla</a>

Çıktısı;

Biz örneğin çıktısını aynı sayfada bir bölüme gitmek için ayarladık ancak siz başka sayfada da istediğiniz alana gidebilirsiniz.

See the Pen html id link by ArmyYazılım (@armyyazilim) on CodePen.

JavaScript’te id niteliğini kullanma

JavaScript, bir öğeye belirtilen id kimliği kullanarak, getElementById()yöntemi kullanarak erişebilir :

Örnek

JavaScript’le metni işlemek için id niteliğini kullanın:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Çıktısı;

See the Pen html js id by ArmyYazılım (@armyyazilim) on CodePen.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt ///