HTML Academy · Ders

id, class, style ve title

Temel genel öznitelikleri herhangi bir HTML öğesine uygulamayı öğrenin.

id, class, style ve title, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Genel Öznitelikler

Genel öznitelikler herhangi bir HTML öğesine uygulanabilir:

id — benzersiz tanımlayıcı
class — bir veya daha fazla CSS sınıfı
style — satır içi CSS
title — araç ipucu metni
Ve daha birçok öznitelik: lang, hidden, tabindex, data-*...

id Özniteliği

id özniteliği, bir öğeye benzersiz bir tanımlayıcı atar:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

id Kullanım Alanları

id özniteliği birden çok amaca hizmet eder:

CSS hedefleme: #hero-banner { ... }
JavaScript seçimi: document.getElementById('signup-form')
Parça gezinmesi: <a href="#installation">
ARIA etiketleme: aria-labelledby="modal-title"

class Özniteliği

class özniteliği bir veya daha fazla CSS sınıfı atar:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id ile class Karşılaştırması

Her biri ne zaman kullanılmalı:

id — sayfadaki belirli tek bir öğe
class — birden çok öğeye uygulanan stil kalıbı

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

style Özniteliği

style özniteliği satır içi CSS ekler:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

Satır İçi style Ne Zaman Kullanılır?

Satır içi style şu durumlarda kabul edilebilir:

JavaScript tarafından ayarlanan dinamik değerler
CSS yazılırken değeri bilinmeyen değerler (kullanıcı tarafından belirlenen renkler ve genişlikler)
E-posta HTML'i (e-posta istemcileri harici CSS'yi kaldırır)

Statik görsel sunum tercihleri için style kullanmayın — bunlar CSS'de yer almalıdır.

title Özniteliği

title özniteliği, üzerine gelindiğinde araç ipucu metni sağlar:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

title Erişilebilirliğinin Sınırlamaları

title özniteliğinin önemli erişilebilirlik sorunları vardır:

Klavye ile gezinme yoluyla erişilemez
Dokunmatik ekranlarda gösterilmez
Ekran okuyucu davranışı tutarsızdır
Kritik bilgileri yalnızca title içine koymayın

Önemli bilgiler için aria-label veya görünür metin kullanın.

Özgüllük: id ile class ve satır içi kullanım

CSS özgüllüğü düşükten yükseğe doğru:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

class Adlandırma Kuralları

Yaygın class adlandırma kuralları:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Hızlı Kontrol

id özniteliğiyle ilgili temel kural nedir?

Özet: id class style title

Temel genel öznitelikler:

id — sayfa başına benzersizdir; CSS, JavaScript, parçalar ve ARIA için kullanılır
class — yeniden kullanılabilir; birden çok sınıf boşluklarla ayrılır
style — satır içi CSS (ölçülü kullanın; harici CSS'yi tercih edin)
title — araç ipucu; klavye veya dokunmatik ekran kullananlar için erişilebilir değildir
CSS'de id özgüllüğü > class özgüllüğü

Sıkça Sorulan Sorular

“id, class, style ve title” dersi ücretsiz mi?

Evet — “id, class, style ve title” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“id, class, style ve title” dersinde ne öğreneceğim?

Temel genel öznitelikleri herhangi bir HTML öğesine uygulamayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“id, class, style ve title” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön