CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Rtl uyumlu işaretleme

HTML kursu · Uzman · Ders 21/39

RTL uyumlu tablo, form ve landmark yazmayı öğrenirsin.

RTL sayfa iskeleti

Bir RTL sayfa yazarken dir="rtl" özniteliğini <html> etiketine koyarsın; tüm sayfa sağdan sola akar. <header>, <nav>, <main> ve <footer> gibi landmark'lar yine aynı kalır; sadece görsel yön değişir.

Sayfanın bir bölümü LTR ise (örn. bir telefon numarası), o ögeye dir="ltr" verebilirsin. Bu, üst ögeden gelen yönü geçersiz kılar. Tek nokta: dir özniteliğini gerektiği yerde kullan; aşırı kullanma.

RTL tablo ve form

RTL bağlamda bir tablonun ilk sütun sağdan başlar; tarayıcı bunu dir="rtl" değerine göre otomatik yapar. Form etiketlerinde ise etiket ve giriş kutusu yerleşimi tersine döner; label'ın for özniteliği yine id ile eşleşir.

Önemli nokta: dir yalnızca görsel yönü değiştirir, anlamı değiştirmez. Bir <label for="eposta"> ile <input id="eposta"> bağı RTL'de de aynı çalışır; yalnızca görsel konum farklıdır.

Uygulama RTL sayfa iskeleti

Bir RTL sayfa iskeleti yaz. <html lang="ar" dir="rtl"> etiketiyle başla. İçine bir <head> ve <body> ekle. Body içine bir <header>, onun içine bir <h1> ekle (metin: Marhaba). Body içine bir <main> ve bir <footer> de ekle.

Örnek çözümü göster 
<html lang="ar" dir="rtl">
  <head><meta charset="utf-8"></head>
  <body>
    <header>
      <h1>Marhaba</h1>
    </header>
    <main></main>
    <footer></footer>
  </body>
</html>

Kendini test et

  1. RTL sayfada bir telefon numarasını LTR göstermek için ne yaparsın?

    • <p lang="rtl">
    • <span lang="ltr">
    • <p dir="rtl">
    • <span dir="ltr">
    Cevabı göster

    <span dir="ltr"> — Doğru. span içine dir="ltr" vererek sayfanın RTL akışını o öge için geri çevirirsin.

  2. label-input eşleşmesini tamamla

    <form>
  <label for="____">E-posta</label>
  <input id="eposta" type="email">
</form>
    Cevabı göster 
    <form>
  <label for="eposta">E-posta</label>
  <input id="eposta" type="email">
</form>

  3. Senaryoyu yön ile eşleştir

    Arapça sayfa
    dir="rtl"
    İngilizce sayfa
    dir="ltr"
    Karışık yönli metin
    <bdi>
    Yönü zorla
    <bdo>

Uzman bölümündeki tüm dersler

1 İleri erişilebilirlik

  1. WCAG ilkeleri
  2. Klavye navigasyonu
  3. Live regions
  4. Dialog ve modal
  5. Heading outline
  6. Özet - Erişilebilir widget

2 İleri ARIA desenleri

  1. ARIA roles
  2. States ve properties
  3. Grid ve tree
  4. Tabs ve accordion
  5. Menu ve menubar
  6. Özet - Erişilebilir tabpanel

3 Proje: Performanslı sayfa

  1. Proje: Performanslı sayfa
  2. Kritik kaynak sırası
  3. Görsel optimizasyonu
  4. Şablon ve noscript
  5. Proje sonu - Performans sayfası

4 Uluslararasılaştırma

  1. Lang ve dir
  2. Hreflang stratejisi
  3. Bidi ve bdo
  4. Rtl uyumlu işaretleme
  5. Çok dilli SEO
  6. Özet - Çok dilli sayfa

5 Proje: Güvenli sayfa

  1. Proje: Güvenli form sayfası
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Proje sonu - Güvenli sayfa

6 İleri web bileşenleri

  1. Custom element registry
  2. Slot ve shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM ve accessibility tree
  6. Özet - Bileşen kütüphanesi iskeleti

7 Uzman finali

  1. Meydan okuma - Erişilebilir dialog
  2. Meydan okuma - ARIA tabpanel
  3. Meydan okuma - Çok dilli RTL
  4. Meydan okuma - Güvenlik paketi
  5. Meydan okuma - Uzman projesi