14. Encje HTML i CSS

W poprzednim rozdziale była mowa o rodzajach cudzysłowów i encjach CSS, które ułatwiają posługiwanie się nimi w kodzie CSS. To jednak nie jedyne zastosowanie tych konstrukcji, które ponadto występują w różnych wariantach.

Encje są obecne zarówno w CSS jak i HTML, ale w każdym z tych języków mają nieco inną formę. Można powiedzieć, że encje CSS są prostsze, ponieważ występują tylko w jednej formie, natomiast w HTML istnieją aż trzy rodzaje encji. Przyjrzymy się im wszystkim, a zaczniemy od encji HTML.

Encje HTML

Zaczniemy od tego, po co w ogóle istnieją encje. Ich głównym przeznaczeniem w HTML jest ułatwienie wstawiania „nietypowych” znaków na stronę. Powiedzmy na przykład, że chcesz na swojej stronie umieścić notkę o prawach autorskich ze znakiem ©. Na klawiaturze nie znajdziesz takiego znaku, ale w łatwy sposób wstawisz go na stronę właśnie za pomocą encji.

Ponadto początek i koniec każdego znacznika HTML określają znaki < i >. Są one zarezerwowane, więc nie można ich umieszczać bezpośrednio w treści strony internetowej, ponieważ mogłyby zostać zinterpretowane przez przeglądarkę jako początek lub koniec znacznika.

Znaki zarezerwowane, a także znaki specjalne, znaki niedostępne na klawiaturze i tak naprawdę wszystkie inne, na stronach internetowych można umieszczać za pomocą encji HTML.

Wyróżniamy trzy rodzaje encji HTML: nazwane, dziesiętne i szesnastkowe (heksadecymalne). Encje nazwane pochodzą ze standardowego zestawu, który można znaleźć w specyfikacji języka HTML. Natomiast encje dziesiętne i szesnastkowe wykorzystują numery znaków ze standardu UTF-8 (można je znaleźć tutaj).

Aby więc utworzyć encję dziesiętną lub szesnastkową, wystarczy sprawdzić numer wybranego znaku w zestawie znaków UTF-8 w formacie dziesiętnym lub szesnastkowym i umieścić go w odpowiedniej składni na stronie HTML. Poniżej znajduje się szczegółowy opis sposobów użycia każdego typu encji.

Encje nazwane

Encja nazwana określa wybrany znak za pomocą zdefiniowanej nazwy. Składa się ona ze znaku &, słowa kluczowego i średnika, np.: & – ta encja zostanie zastąpiona znakiem & na stronie internetowej.

W standardzie HTML5 encji nazwanych jest bardzo dużo i ich pełną listę można znaleźć na stronie https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references (w sekcji Najczęściej używane encje znajduje się zestawienie kilku najczęściej używanych encji z uwzględnieniem wszystkich form zapisu).

Encje dziesiętne

Encja dziesiętna (zwana też decymalną) określa wybrany znak za pomocą jego numeru w formacie dziesiętnym w standardzie UTF-8. Składa się ona ze znaków &#, liczby dziesiętnej i średnika, np.: & – ta encja też zostanie zastąpiona znakiem & na stronie internetowej.

Z kolei znak < ma w zestawie UTF-8 numer 60, więc odpowiadająca mu encja dziesiętna to <, a znak > ma w tym zestawie znaków numer 62, więc odpowiadająca mu encja to >.

Encje szesnastkowe

Encja szesnastkowa jest bardzo podobna do dziesiętnej, tylko zamiast wartości dziesiętnych używa numerów szesnastkowych znaków UTF-8 oraz ma w składni dodatkową literę x po krzyżyku, czyli składa się ze znaków &#x, liczby szesnastkowej i średnika, np.: & – ta encja, podobnie jak dwie poprzednie, również wstawi na stronę znak &.

Z tego wynika, że każdy znak za pomocą encji można wstawić na stronę na trzy sposoby:

<p>To jest znak &amp;</p>
<p>To jest znak &#38;</p>
<p>To jest znak &#x26;</p>

Wynik:

<p>To jest znak &</p>
<p>To jest znak &</p>
<p>To jest znak &</p>

Encje CSS

Encje CSS wykorzystują szesnastkowe numery znaków z zestawu UTF-8, ale różnią się składnią od encji HTML, która w ich przypadku jest prostsza.

Encja znakowa CSS składa się z ukośnika \ i numeru szesnastkowego wybranego znaku, np.:

q {quotes: " \00BB" " \00AB"}

Powyższa reguła CSS definiuje cudzysłów składający się ze znaków » i « dla elementu q.

Najczęściej używane encje

Poniższa tabela zawiera wykaz niektórych najczęściej używanych encji nazwanych dostępnych w HTML.

W poprzednim rozdziale nauczyliśmy się tworzyć różne rodzaje cytatów i przy okazji poznaliśmy kilka podstawowych własności CSS. Ten rozdział można traktować jako rozszerzenie wiadomości na temat encji z poprzedniego rodziału.

To znaczy, że cały czas obracamy się w tematyce znakowania różnego rodzaju elementów tekstowych. Są one bardzo łatwe w użyciu, dzięki czemu stanowią doskonałą bazę do budowania podstawowych umiejętności w zakresie posługiwania się językami HTML i CSS.

W następnym rozdziale idziemy tym tropem i poznamy kilka elementów HTML5 reprezentujących różnego rodzaju wyróżnienia tekstu. Na przykład, czy wiesz, jaki element HTML5 służy do oznaczania bardzo ważnego tekstu? Albo za pomocą jakiego elementu oznaczyć fragment tekstu, który podczas czytania na głos podkreślilibyśmy przez położenie na niego akcentu? Jeśli nie, to w następnym rozdziale dowiesz się między innymi tego oraz poznasz kilka kolejnych przydatnych własności CSS.

Podsumowanie

• Encje HTML i CSS mogą reprezentować dowolny znak, ale najczęściej są używane do reprezentowania znaków, które nie są bezpośrednio dostępne na klawiaturze.
• Encje nazwane HTML wykorzystują słowa kluczowe.
• Encje dziesiętne HTML wykorzystują numery dziesiętne znaków z zestawu UTF-8.
• Encje szesnastkowe HTML wykorzystują numery szesnastkowe znaków z zestawu UTF-8.
• W encjach CSS są wykorzystywane numery szesnastkowe znaków z zestawu UTF-8.

Ćwiczenia

1. Dla podanych encji nazwanych znajdź ich numery dziesiętne i szesnastkowe, a następnie utwórz z nich encje HTML: ⤐, ⅓, ℕ, ☎.
2. Używając encji ☎ wyświetl na stronie duży czerwony telefon, mniej więcej taki jak poniżej:

   ☎