CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Meydan okuma - Çok dilli RTL

HTML kursu · Uzman · Ders 37/39

hreflang, dir ve bidi içeren iki dilli RTL sayfa yazarsın.

Çok dilli ve RTL sayfa

Birden çok dilde yayın yapan sayfalar üç şeyi doğru kurar: dil, yön ve alternatif bağlantılar. <html lang="tr" dir="ltr"> kök dili ve yazı yönünü bildirir; RTL diller için dir="rtl" kullanılır. Sayfanın diğer dil sürümlerine <link rel="alternate" hreflang="en"> ile bağlantı verilir; hreflang="x-default" dil belirtmeyen ziyaretçiye düşecek sürümü seçer.

Yinelenen içeriği önlemek için <link rel="canonical"> ana sürümü işaretler. Gömülü RTL metinlerde yön zorlanması gerekirse <bdi> ve <bdo> kullanılır. Bu katman birlikte tutarlı bir çok dilli deneyim kurar.

Uygulama Çok dilli head bölümü yaz

Çok dilli bir sayfanın head bölümünü yaz. Kök etiket <html lang="tr" dir="ltr"> olsun. head içine <link rel="canonical"> bağlantısı, en az iki <link rel="alternate" hreflang="..."> bağlantısı ve bir hreflang="x-default" alternatifi ekle.

Örnek çözümü göster 
Kökte lang ve dir; head'de canonical ve iki alternate (biri x-default) olmalı.

Örnek çözüm:
<html lang="tr" dir="ltr">
<head>
  <link rel="canonical" href="https://site.example/tr/">
  <link rel="alternate" hreflang="en" href="https://site.example/en/">
  <link rel="alternate" hreflang="x-default" href="https://site.example/tr/">
</head>
</html>

Kendini test et

  1. Çok dilli öznitelikleri eşleştir

    lang="tr"
    Türkçe dil kodu
    dir="rtl"
    Sağdan sola yazı yönü
    hreflang="en"
    İngilizce alternatif
    hreflang="x-default"
    Dil belirtilmemiş varsayılan
    rel="canonical"
    Ana sürümü işaretle

  2. Hangi dir değeri Arapça için kullanılır?

    • ltr
    • auto
    • rtl
    • ttb
    Cevabı göster

    rtl — Doğru. Arapça sağdan sola yazıldığı için dir="rtl" kullanılır.

  3. Alternatif sürümü bağla

    <link rel="alternate" ____ href="https://site.example/en/">
    Cevabı göster 
    <link rel="alternate" hreflang="en" href="https://site.example/en/">

  4. bdi öğesi ne zaman kullanılır?

    • Gömülü yönü belirsiz metinlerde
    • Sadece resimlerin yanında
    • Form gönderiminde
    • Tablo başlıklarında
    Cevabı göster

    Gömülü yönü belirsiz metinlerde — Doğru. bdi, yönü belirsiz gömülü metni izole eder.

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