Znaki diakrytyczne i oznaczanie języka dokumentu

Znaki diakretyczne

Wprowadzenie

Znaki diakrytyczne to specjalne znaki używane w wielu językach, które modyfikują litery i zmieniają ich wymowę lub znaczenie. Przykłady to polskie „ą”, „ę”, „ć”, niemieckie „ä” czy francuskie „é”. W kontekście stron internetowych, prawidłowe wyświetlanie tych znaków wymaga odpowiedniego kodowania.

Oznaczanie języka dokumentu HTML umożliwia przeglądarkom i narzędziom wspomagającym lepsze zrozumienie tekstu, poprawną interpretację znaków oraz poprawną obsługę funkcji takich jak sprawdzanie pisowni czy interpretacja dat.

Teoria

1. Znaki diakrytyczne i kodowanie znaków

  • Znaki diakrytyczne: Znaki nad i pod literami, które zmieniają wymowę lub znaczenie słów. Są używane w wielu językach i muszą być prawidłowo zakodowane w stronach internetowych.
  • Kodowanie znaków: HTML obsługuje różne sposoby kodowania znaków, ale najpopularniejszym standardem jest UTF-8, który obsługuje szeroki zakres znaków.
  • Deklaracja kodowania w HTML: W celu poprawnego wyświetlania wszystkich znaków, kodowanie powinno być zadeklarowane w sekcji <head> dokumentu HTML, co zapewnia poprawne renderowanie tekstu w różnych przeglądarkach i systemach operacyjnych.

2. Oznaczanie języka dokumentu HTML

  • Znacznik lang: Oznaczenie języka w dokumencie HTML pozwala przeglądarkom lepiej rozumieć i wyświetlać tekst. Umożliwia również narzędziom, takim jak czytniki ekranowe, poprawną interpretację wymowy tekstu i innych funkcji.
  • Oznaczanie języka dla całego dokumentu: Zazwyczaj język dla całego dokumentu oznacza się w znaczniku <html>, np. dla języka polskiego czy angielskiego.
  • Oznaczanie języka dla poszczególnych sekcji: Możliwe jest również określenie języka dla poszczególnych sekcji tekstu, co jest przydatne na stronach wielojęzycznych.

3. Escapowanie znaków specjalnych w HTML

  • Znaki specjalne w HTML: Niektóre znaki, takie jak <, > czy &, mają specjalne znaczenie w HTML i wymagają użycia tzw. kodów encji (entity codes), aby były poprawnie wyświetlane.
  • Escapowanie znaków: Stosowanie kodów HTML dla znaków specjalnych, aby przeglądarka wyświetlała je poprawnie bez interpretowania ich jako część kodu HTML.

4. Lokalizacja a język dokumentu

  • Lokalizacja strony: Oznaczanie języka i kodowanie znaków ma kluczowe znaczenie w procesie lokalizacji strony internetowej, czyli dostosowywania jej do odbiorców z różnych regionów świata. Dzięki temu strona może automatycznie dostosować formaty dat, waluty, jednostki miary oraz inne elementy językowe.

Ćwiczenia Praktyczne

Ćwiczenie 1: Dodawanie kodowania UTF-8 i oznaczanie języka

  • Utwórz nowy dokument HTML.
  • W sekcji <head> dodaj deklarację kodowania UTF-8.
  • Oznacz język dokumentu na polski.
  • Wstaw nagłówek i paragraf zawierający polskie znaki diakrytyczne.

Ćwiczenie 2: Tworzenie dokumentu z różnymi językami

  • Stwórz dokument HTML, w którym znajdą się teksty w dwóch językach: polskim i angielskim.
  • Oznacz język dokumentu za pomocą atrybutu lang.
  • Każda sekcja tekstu powinna być odpowiednio oznaczona językiem (polski i angielski).

Ćwiczenie 3: Escapowanie znaków specjalnych

  • Utwórz dokument HTML, w którym poprawnie wyświetlisz tekst zawierający znaki specjalne, takie jak <, >, &.
  • Dodatkowo, dodaj fragmenty tekstu z innymi znakami diakrytycznymi, np. z francuskiego, niemieckiego, hiszpańskiego.
  • Przykłady słów do escapowania:
  • 10 > 5 & 5 < 10
  • Brève mise à jour
  • Übersetzung & Gestaltung
  • Café "La Luna"
  • 50% zniżki na "wszystko"
  • ¿Cómo estás?

Ćwiczenie 4: Dokument HTML z wielojęzycznymi sekcjami

  • Utwórz dokument HTML z pięcioma sekcjami, w których znajdą się teksty w różnych językach:
  1. Polski
  2. Francuski
  3. Niemiecki
  4. Hiszpański
  5. Włoski
  • Oznacz odpowiednio język każdej sekcji za pomocą atrybutu lang.
  • Każda sekcja powinna zawierać nagłówek i akapit tekstu w danym języku.