Wyświetlanie znaków specjalnych i symboli
W tej lekcji zajmiemy się zagadnieniem, które jest właściwie rzadko używane, jednak w niektórych sytuacjach jego znajomość okazuje się niezbędna.
Na początek warto oczywiście wyjaśnić to czym będziemy się zajmować. Znaki specjalne, to znaki mające jakieś szczególne znaczenie w HTML. Przykładem takiego znaku jest chociażby<który jest używany na początku znaczników HTML. Natomiast symbole, którym się przyjrzymy w tym rozdziale, to znaki, których czasami chcemy użyć, ale nie znajdują się one na naszej klawiaturze. Popularnym przykładem jest symbol euro€.
Znaki specjalne
We wstępie wyjaśniliśmy ogólnie czym są znaki specjalne, warto jeszcze dodać jakie problemy wiążą się z tym zagadnieniem. Załóżmy, że chcesz wyświetlić na stronie poniższy tekst:
| 1 | Do tworzenia paragrafów używamy znacznika <p>. |
|---|---|
W pierwszej chwili może Ci się wydawać, że wystarczy po prostu umieścić ten tekst w kodzie w następujący sposób.
| 123 | <p> Do tworzenia paragrafów używamy znacznika <p>.</p> |
|---|---|
Jednak powyższy kod nie zadziała dobrze. Przeglądarka widząc<p>w tekście nie wie, że ma to być zwykły tekst i potraktuje go jako otwarcie kolejnego paragrafu. Efekt będzie taki, że na stronie zostaną wyświetlone dwa akapity, pierwszy z tekstem “Do tworzenia paragrafów używamy znacznika” oraz drugi zawierający wyłącznie kropkę “.”.
Aby uzyskać oczekiwany przez nas efekt, musimy użyć innej reprezentacji znaków<i>. Poprawny przykład znajduje się poniżej.
| 123 | <p> Do tworzenia paragrafów używamy znacznika <p>.</p> |
|---|---|
<!DOCTYPE html>
<html>
<head>
<title>Moja fajna strona</title>
<meta charset="UTF-8">
</head>
<body>
<p>
Do tworzenia paragrafów używamy znacznika <p>.
</p>
</body>
</html>
Jak widzisz, zastąpiliśmy w kodzie znak<sekwencją<, a>zapisaliśmy jako>. W ten właśnie sposób możemy zapisywać w kodzie HTML znaki specjalne i symbole. Na początku takiego zapisu znajduje się zawsze&, następnie unikalne oznaczenie znaku, a na koniec średnik;.
lt_to skrót od_less than, czylimniejszy niż, natomiastgt_pochodzi od_greater than, co oznaczawiększy niż. Zamiast tych skrótów możemy również użyć liczbowej reprezentacji znaków, jest to odpowiednio<i>, jednak skróty nazw chyba łatwiej zapamiętać niż liczby.
Co ciekawe, jeśli w tekście umieścimy sam znak<, w formie, która nie przypomina otwarcia lub zamknięcia znacznika, to najprawdopodobniej zostanie on wyświetlony poprawnie. Kluczowe jest w tym przypadku słowonajprawdopodobniej, powinniśmy więc zawsze używać reprezentacji z&dla znaków, które mają jakieś specjalne znaczenie w HTML, tyczy się to również apostrofów""które reprezentujemy poprzez".
Zadanie 1
Wyświetl test:“<div> jest przykładem elementu blokowego”.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Strona tworzona w trakcie kursu HTML</title>
</head>
<body>
<p>
<div> jest przykładem elementu blokowego
</p>
</body>
</html>
Symbole
Teraz zajmiemy się wyświetlaniem na stronie różnych dodatkowych symboli, które nie znajdują się na klawiaturze. Ich przykładem może być wspomniane już euro€, ale również symbole takie jak znak praw autorskich©, czy znak towarowy®.
Dzięki zastosowaniu kodowania UTF-8 (<meta charset="UTF-8">), nic nie stoi na przeszkodzie, aby umieścić tego typu znaki bezpośrednio w kodzie HTML, zostaną one poprawnie wyświetlone. Pojawia się jednak problem z tym, jak napisać taki znak. Co prawda można stosować skróty na klawiaturze, które spowodują napisanie niektórych z tych symboli, jednak mało kto zna te skróty, a poza tym nie można przy ich pomocy zapisać wszystkich znaków.
Rozwiązanie jest podobne jak w pierwszej części tej lekcji i polega na wykorzystaniu zapisu z&i;.
| 12345 | <ul><li>€ - euro;</li><li>© - znak praw autorskich;</li><li>® - znak towarowy;</li></ul> |
|---|---|
<!DOCTYPE html>
<html>
<head>
<title>Moja fajna strona</title>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>€ - euro;</li>
<li>© - znak praw autorskich;</li>
<li>® - znak towarowy;</li>
</ul>
</body>
</html>
Pokazaliśmy Ci już kilka reprezentacji znaków specjalnych i symboli. Nie ma sensu wypisywać na tej stronie ich wszystkich, ponieważ jest ich bardzo wiele i na pewno nie będziesz się ich wszystkich uczyć na pamięć. Warto zapamiętać te, których będziesz najczęściej używać, a gdy będziesz potrzebować symbolu, którego reprezentacji nie znasz, możesz zajrzeć na stronęhttps://dev.w3.org/html5/html-author/charref. Zawiera ona symbole wraz z ich reprezentacją w postaci&nazwa;Zanjdują się tam też reprezentacje liczbowe symboli, to od Ciebie zależy, czego wolisz używać.
Zadanie 2
Wyświetl na stronie następujące symbole:
- § - znak paragrafu;
- ^ - symbol koniunkcji (iloczynu logicznego);
- £ - symbol funta brytyjskiego, czyli waluty Wielkiej Brytanii.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Strona tworzona w trakcie kursu HTML</title>
</head>
<body>
<p>
§ &\#x0005E; £
</p>
</body>
</html>
Podsumowanie
W tej lekcji zajęliśmy się wyświetlaniem różnego rodzaju symboli oraz znaków specjalnych. Na początek wyjaśniliśmy czym one są, następnie miałeś okazję zobaczyć problemy związane z ich wyświetlaniem, a potem omówiliśmy to w jaki sposób je dokładnie wyświetlać. Cenny okazuje się również link do strony zawierającej listę znaków specjalnych i symboli.
Jest to już ostatnia lekcja naszego kursu podstaw HTML. Mamy nadzieję, że kurs Ci się spodobał i wiele się dzięki niemu nauczyłeś. Teraz zachęcamy Cię do wykorzystania zdobytej wiedzy w praktyce, czyli samodzielnego stworzenia prostej strony internetowej. Już niedługo kolejny kurs, omawiający bardziej zaawansowane zagadnienia związane przede wszystkim z HTML5.