Składnia XHTML
Składnia XHTML jest zgodna ze składnią XML
XHTML składa się przede wszystkim z tekstu, w który wplecione są znaczniki (inaczej tagi, ang. tags) oznaczające różne elementy języka. Elementy to np. akapity, nagłówki, odnośniki.
Układ tekstu w pliku XHTML (łamanie wierszy, odstępy) nie ma wpływu na to, jak tekst będzie prezentował się w przeglądarce. Wyglądem tekstu steruje się za pomocą odpowiednich elementów XHTML i współpracującego z nim języka CSS.
Znaczniki i elementy
Każdy element zaczyna się i kończy znacznikiem. Między znacznikiem otwierającym, a zamykającym znajduje się zawartość elementu. Element może zawierać tekst oraz inne elementy (dla przykładu akapit może zawierać tekst i odnośniki).
Każdy znacznik otoczony jest nawiasami trójkątnymi (<
i >
). Wielkość liter ma znaczenie (<znacznik>
to nie to samo, co
<ZnaczNik>
), więc w nazwach znaczników i atrybutów należy używać tylko małych liter.
Znacznik otwierający (rozpoczynający) element zaczyna się od nazwy elementu.
<kot>
Znacznik otwierający (kot jest odtąd)
Znacznik zamykający (kończący) element przed nazwą ma znak /
.
</kot>
Znacznik zamykający (dotąd)<kot>mysz</kot>
Element kot zawierający tekst „mysz”.
Jeśli element jest pusty (nie zawiera tekstu ani innych elementów), zapisuje się go tak:
<kot></kot>
Pusty element
Można też użyć skróconej składni, która znaczy dokładnie to samo, co powyższa konstrukcja:
<kot />
Pusty element — znacznik jednocześnie otwierający i zamykający
Elementy mogą być zagnieżdżone
<kot><łepek><nosek /></łepek></kot>
ale nie mogą nachodzić na siebie, co oznacza, że element, który był otwarty jako ostatni musi być zamknięty jako pierwszy. Nie można przeplatać ze sobą znaczników.
<kot><pazury><lewa-łapa></pazury></lewa-łapa><prawa-łapa><pazury></prawa-łapa></pazury></kot>
Przeplatanie znaczników jest niedozwolone.
<kot>
<lewa-łapa>
<pazury></pazury>
</lewa-łapa>
<prawa-łapa>
<pazury></pazury>
</prawa-łapa>
</kot>
Poprawna konstrukcja — najpóźniej otwarty element jest zamykany najwcześniej.
Atrybuty
Atrybutów używa się do określenia cech elementu. Definiuje się je tylko w znaczniku otwierającym (w tym w znaczniku określającym pusty element) i dotyczą one całego elementu. Każdy atrybut ma swoją nazwę i wartość.
<kot imie="mrucyfon" />
Znacznik kot posiadający atrybut imie o wartości mrucyfon
Jeden element może mieć dowolnie dużo atrybutów, ale każdy musi mieć swoją unikalną nazwę. Nie można w jednym znaczniku dwa razy definiować atrybutu o tej samej nazwie:
<kot imie="mruczek" imie="kicius" />
Błędny zapis.
<kot imiona="mruczek kicius" />
<kot imie="mruczek" drugie-imie="kicius" />
Poprawne zapisy.
Nie może być atrybutu bez wartości. Wartość zawsze musi być ujęta w cudzysłów. Kolejność atrybutów jest bez znaczenia.
Białe znaki
Składnia jest bardzo elastyczna, jeśli chodzi o białe znaki. Można wstawiać spacje, znaki tabulacji, a nawet przejścia do nowej linii w następujących miejscach:
<znacznik
atrybut
=
"przykładowa
wartość"
>
<inny-znacznik
/>
</znacznik
>
Powyższa konstrukcja jest równoważna z:
<znacznik atrybut="przykładowa wartość">
<inny-znacznik/>
</znacznik>
Przykłady:
Element x zawierający dwa puste elementy y oraz tekst:
<x><y />tekst<y></y></x>
Element x zawierający jeden element y zawierający tekst:
<x><y>tekst</y></x>
Praktyczny przykład XHTML:
<h1>Witaj świecie!</h1>
<p>To jest mój <em>pierwszy</em> fragment HTML.</p>
Encje (ang. entities)
Aby umieścić w tekście znaki <, >, " i & tak, aby nie zostały zinterpretowane jako część składni XHTML, należy użyć specjalnego zapisu:
Znak | Encja | Nazwa | Kiedy używać |
---|---|---|---|
< | < | Less than | Tam, gdzie mogą wystąpić znaczniki |
> | > | Greater than | Do pary z < (opcjonalnie) |
" | " | Quote | W treści atrybutów otoczonych cudzysłowem |
' | ' | Apostrophe | Wystąpienie w treści znaku apostrofu (tylko XHTML i XML) |
& | & | Ampersand | Zawsze, gdy chce się wypisać & (również w atrybutach) |
Znaki w tekście automatycznie zamienia na encje funkcja PHP htmlspecialchars()
, którą ze względów bezpieczeństwa należy używać za każdym razem, gdy wypisuje się tekst na stronie.
Istnieje jeszcze wiele innych encji, ale tylko te są niezbędne. Pozostałe znaki specjalne lepiej przedstawić za pomocą odpowiedniego kodowania znaków.
<p>
Akapit umieszcza się w elemencie<
p>
</p>
Komentarze
Komentarz zaczyna się od <!--
, a kończy na -->
. Komentarze mogą być tylko między znacznikami i nie mogą
zawierać pary minusów.
Ćwiczenia
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 01.04.2007, 11:16