CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Çok dilli sayfa

HTML kursu · Uzman · Ders 23/39

Tüm i18n teknikleriyle iki dilli bir sayfa iskeleti yazarsın.

Bu grupta öğrendiklerimiz

Bu grupta uluslararasılaştırma tekniklerini gördün:

  • lang ve dir ile sayfa dilini ve yönünü bildirme
  • hreflang ile kardeş dil sayfalarını tanıtma
  • <bdi> ve <bdo> ile karışık yönli metni denetleme
  • RTL bağlamda tablo, form ve landmark yazma
  • canonical ve hreflang birlikte kullanma

Şimdi tüm bunları birleştirip iki dilli bir sayfa iskeleti kuracağız.

Uygulama İki dilli sayfa iskeleti

Türkçe ana sayfa için bir iskelet yaz. <html lang="tr" dir="ltr"> ile başla. <head> içine <meta charset="utf-8"> ve bir <title> (metin: Dergi) ekle. Head içine ayrıca üç <link rel="alternate" hreflang="..."> ekle: hreflang="tr" href="https://dergi.com/tr/", hreflang="en" href="https://dergi.com/en/" ve hreflang="x-default" href="https://dergi.com/tr/". Body içine bir <header> (içinde <h1>, metin: Dergi) ve bir <main> ekle.

Örnek çözümü göster 
<html lang="tr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dergi</title>
    <link rel="alternate" hreflang="tr" href="https://dergi.com/tr/">
    <link rel="alternate" hreflang="en" href="https://dergi.com/en/">
    <link rel="alternate" hreflang="x-default" href="https://dergi.com/tr/">
  </head>
  <body>
    <header>
      <h1>Dergi</h1>
    </header>
    <main></main>
  </body>
</html>

Kendini test et

  1. Etiket ve özniteliği eşleştir

    lang
    Dil kodunu bildirir
    dir
    Metin yönünü bildirir
    hreflang
    Kardeş dil sayfasını tanıtır
    bdi
    Yönü belirsiz metni sarar

  2. Türkçe html etiketini tamamla

    <html ____>
  <head></head>
  <body></body>
</html>
    Cevabı göster 
    <html lang="tr" dir="ltr">
  <head></head>
  <body></body>
</html>

  3. Hangi öznitelik RTL yönü bildirir?

    • dir
    • lang
    • charset
    • href
    Cevabı göster

    dir — Doğru. dir özniteliği metin yönünü (ltr/rtl) bildirir.

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