Struktura dokumentu HTML

Język HTML to język znaczników. A znacznik charakteryzuje się tym, że jest zawarty w nawiasach ostrych.

Na przykład: znacznik <p> oznacza rozpoczęcie akapitu (bo akapit to po angielsku paragraph.

Język XHTML wywodzi się z połączenia języka HTML ze ścisłymi zasadami języka XML. Szczegóły historyczne nie są w tej chwili istotne, ważne żeby pamiętać podstawowe zasady:

  • każdy znacznik powinien być pisany małymi literami,
  • każdy znacznik, który rozpoczynasz powienien mieć znacznik kończący (czyli jak rozpoczniej akapit znacznikiem <p> to musisz go zakończyć znacznikiem </p>),
  • jeżeli znacznik nie ma odpowiednika zamykającego, stosujemy tak zwane samozakończenie, czyli na przykład znacznik oznaczający przejście do następnej linii (tak jak wciśnięcie Entera w Wordzie) oznaczany jest przez <br />, a znacznik oznaczający poziomą linię rozdzielającą oznaczany jest przez <hr />

Resztę zasad poznasz w praniu, natomiast teraz czas przyjrzeć się naszemu plikowi html. Otwórz więc w swoim edytorze plik index.html naszego szablonu. Jeżeli używasz programu HateML, upewnij się, że masz kolorowanie składni (menu Widok - Poświetlanie składni) ustawione na HTML.

Plik index to plik strony głównej każdego serwisu www

Na przykładzie tego pliku wytłumaczymy ogólną strukturę strony.

Plik html zaczyna się od określenia typu dokumentu, tak zwanej deklaracji DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Deklaracja ta zawiera informację o tym, w jakim jezyku napisana jest strona. W naszym przypadku jest to język XHTML 1.0 Transitional. Z tego fragmentu kodu korzysta Walidator stron, który sprawdza poprawność strony pod względem zgodności z definicją języka. Choć kod ten może wyglądać trochę niezrozumiale to nie masz co się tym przejmować gdyż wygląda on dla danej odmiany języka zawsze tak samo. Wystarczy więc go przy tworzeniu nowej strony po prostu skopiować skądś i wkleić.

Zauważ, że deklaracja jeszcze nie trzyma się opisanych wyżej zasad, nie jest to element języka. Od tej pory już wszystkie elementy będą zgodne z zasadami.

Po deklaracji typu dokumentu mamy znacznik rozpoczynający stronę www:

<html xmlns="http://www.w3.org/1999/xhtml">

Zwróć uwagę na to, że znacznik ma tutaj dodatkowy parametr o nazwie xmlns. Wartość tego parametru zawarta jest nastęnie w cudzysłowiu po znaku równości. Parametr ten również informuje o tym, że mamy do czynienia z językiem XHTML i jest wymagany przez walidator.

Znacznik <html> ma na samym dole pliku odpowiadający mu znacznik zamykający:

</html>

Wszystko, co znajduje się między znacznikami <html> i </html> to właśnie cały dokument html.

W przypadku naszej strony napotykamy teraz na coś takiego:

<!-- this template was designed by http://www.tristarwebdesign.co.uk - please visit for more templates & information - thank you. -->

Jest to tylko i wyłącznie informacja dla osoby, która zagląda w kod strony (czyli od dzisiaj również dla Ciebie). Tekst znajdujący się pomiędzy znacznikami <!-- oraz --> jest traktowany przez przeglądarkę jak komentarz i nie jest brany pod uwagę podczas wyświetlania strony. Możesz to również wykorzystać jeżeli chcesz na chwilę wyłączyć wyświetlanie jakiegoś fragmentu strony, lub umieszczenie w kodzie strony notatki dla siebie (tak na wszelki wypadek, jeśli zapomnisz skąd coś się tam wzięło). Twój edytor powinien również odpowiednio pokolorować ten fragment, najczęściej na szaro albo na zielono. Jeżeli komentarzy w stronie jest dużo możesz je spokojnie usunąć żeby zmniejszyć objętość pliku.

Kolejnym elementem strony jest nagłówek zawarty między znacznikami <head> oraz </head>. Nagłówek zawiera informacje o stronie, które również nie są wyświetlane w oknie przeglądarki. Przyjrzymy się mu za niedługą chwilę.

No i po nagłówku mamy nareszcie znacznik <body>, który rozpoczyna właściwą zawartość Twojego serwisu www.

Dalej następuje cała treść (którą również omówimy w dalszej części), a kiedy już się ona skończy pojawia się znacznik zamykający, czyli </body>.

Raz jeszcze struktura dokumentu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   nagłówek strony
</head>
<body>
   treść strony
</body>
</html>

A zagnieżdżenie znaczników (zwanych czasem tagami) można przedstawić tak:

html
head

nagłówek strony - informacje o stronie

body

treść strony - tekst, obrazki itd.

Czyli oprócz najbardziej charakterystycznych znaczników strony zapamiętaj sobie to, że między danym znacznikiem otwierającym i zamykającym mogą się również zawierać inne znaczniki. Mówimy wówczas, że są one zawarte (zagnieżdżone) węwnątrz siebie, (tak jak <head> i <body> są zawarte w <html>).