Podstawy i struktura dokumentu

Podstawy i struktura dokumentu.

Mimo iż zawartość stron jest za każdym razem inna, to ich konstrukcja ma bardzo wiele wspólnych elementów — możemy uznać, że tworzą one szablon strony. W tym rozdziale omówię dokładnie wszystkie stale elementy języka XHTML/HTML oraz pokażę, w jaki sposób przygotować prosty szablon, dzięki któremu będzie znacznie łatwiej pracować nad tworzoną stroną.

Poszczególne podrozdziały zawierają opisy wszystkich podstawowych elementów języka, a podsumowaniem każdego z nich jest przykład ich użycia na stronie WWW.

Język XHTML/HTML składa się z szeregu znaczników, których forma jest ściśle określona przez specyfikację. Każdy znacznik posiada tak zwany znacznik otwierający i niemal każdy występuje w parze ze znacznikiem zamykającym. Poniżej zamieszczam schemat zapisu znacznika:

<znacznik_otwierający atrybut> </znacznik zamykający>

W praktyce wygląda to mniej więcej tak:

<p id=”identyfikator”></p>

Znacznik otwierający <p></p> zawiera atrybut, którym w tym przypadku jest id= „identyfikator” oraz —jak większość znaczników — znacznik zamykający. Niemal w każdym przypadku atrybut znajdujący się wewnątrz nawiasu kątowego jest opcjonalny, dlatego bardzo często znacznik z przykładu powyżej może mieć następującą postać:

<p> </p>

W przypadku języka HTML znaczniki, jak i atrybuty możemy wpisywać, używając zarówno dużych, jak i małych liter. Wyjątkiem są te elementy, które zawierają odwołania do innych plików; tu nazwa pliku musi być pisana dokładnie tak samo, jak wygląda w rzeczywistości.

Jeżeli jednak zdecydujesz się na korzystanie z języka XHTML, musisz pamiętać, że w tym przypadku nazwy znaczników oraz atrybuty zawsze wpisujemy, używając małych liter.

W przypadku atrybutów wartości występujące po znaku równości należy zawsze zapisywać, używając cudzysłowu.

Dla dokumentów korzystających z języka HTML cudzysłów można pominąć.

Bardzo ważną sprawą jest umieszczenie spacji wewnątrz znacznika. Nie wstawiaj jednak zbędnych spacji, gdyż tylko niepotrzebnie zwiększysz rozmiar pliku. Poniżej przedstawiam przykład poprawnie zapisanego znacznika.

<znacznik_otwierający atrybut=”wartość_atrybutu”></znacznik_zamykający>

Zwróć uwagę, że spacje znajdują się jedynie między nazwą znacznika i atrybutem oraz między atrybutami. Nie ma spacji po otwierającym i przed zamykającym nawiasem kątowym.

Znaczniki zamykające nigdy nie zawierają dodatkowych parametrów. Wspomniałem już o tym, że znaczniki prawie zawsze występują w parach — znacznik otwierający i zamykający, czyli, jak łatwo się domyślić, od tej zasady istnieją wyjątki. Jest ich niewiele, ale są. Poniżej wypisałem najważniejsze pojedyncze znaczniki wraz z odpowiednią formą zapisu dla języka HTML i XHTML.

Pojedyncze znaczniki — zapis zgodny z HTML i XHTML

HTML    XHTML

<br>    <br />

<hr>    <hr />

<img>    <img />

<meta>    <meta />

<link>    <link />

<base>    <base />

Jeżeli tworzysz stronę zgodną ze specyfikację HTML, to wymienione powyżej znaczniki nie muszą być zamykane. Natomiast w przypadku witryny zgodnej z XHTML konieczne jest zamknięcie znaczników zgodnie z przykładem. Zamknięcie wszystkich znaczników jest warunkiem niezbędnym do uzyskania strony WWW o poprawnym kodzie XHTML.

Niezależnie od tego, czy mamy doczynienia z HTML, czy XHTML, każdy dokument posiada ściśle określony szkielet, który nie zmienia się w zależności od zawartości strony. Oczywiście szkielet dla strony zbudowanej w oparciu o HTML różni się od tego, wykorzystywanego w stronach tworzonych w XHTML.

Poniżej zamieściłem przykładowy kod dla strony przygotowanej w oparciu o język XHTML. Na tej podstawie przeprowadzę analizę podstawowej struktury witryny wykonanej w oparciu o język XHTML i HTML.

<?xml version=”1.0″ encoding=”iso-8859-2″?>

<!D0CTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtmlł/DTD/xhtmll-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml :lang=”pl „>

<head>

</head>

<body>

</body>

</html>

W przypadku strony wykorzystującej język XHTML pierwszym wpisem jest:

<?xml version=”1.0″ encoding=“iso-8859-2”?>

Element ten popularnie jest nazywany prologiem i odpowiada za określenie wersji języka XML oraz sposobu kodowania znaków. Prawidłowa forma wpisu musi wyglądać tak, jak na powyższym przykładzie, i jest niezmiennna. Oczywiście, w przypadku korzystania z języka HTML deklaracja wersji języka XML jest zbędna i nie stosuje się jej.

Pierwszym wspólnym i obowiązkowym — dla HTML i XHTML — elementem szkieletu strony jest wpis, określający rodzaj wykorzystywanego do jej stworzenia języka. W przypadku strony wykorzystującej język HTML pierwszy wpis może przyjmować następującą postać:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN” „http://www.w3.org/TR/html4/strict.dtd”>

Wiersz ten określa, iż nasza strona została zakodowana przy użyciu języka HTML w wersji 4.01 i nie zawiera żadnych elementów z wersji poprzednich. Informuje on również o tym, że strona nie jest oparta o ramki.

Kolejny możliwy wpis jest widoczny poniżej i informuje, że użyliśmy języka HTML 4.01 w wersji przejściowej, czyli takiej, która zawiera również znaczniki z poprzednich wersji języka HTML, np. 3.2.

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN”

„http://www.w3.org/TR/html4/1oose.dtd”>

Dla stron opartych o ramki i HTML w wersji 4.01 przewidziano następujący wpis:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Frameset//EN” „http://www.w3.org/TR/html4/frameset.dtd”>

W przypadku kodu strony wykorzystującej język XHTML deklaracja DOCTYPE wygląda nieco inaczej.

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd”>

Pierwszy możliwy wpis dotyczy sytuacji, w której przygotowaliśmy stronę wykorzystującą wyłącznie język XHTML i ściśle trzymamy się zaleceń specyfikacji. Innymi słowy, tego typu deklaracji używamy w stronach o „najczystszym” kodzie. Należy pamiętać, że gdy korzystamy z powyższej deklaracji, nie możemy stosować w kodzie strony ramek.

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

Druga wersja deklaracji DOCTYPE dotyczy sytuacji, w której wykorzystujemy język XHTML, ale nie trzymamy się ściśle zaleceń specyfikacji. Dokładniej mówiąc, kod zawiera elementy języka XHTML oraz HTML. Korzystanie z tej formy nie jest najlepszym rozwiązaniem, choć w praktyce okazuje się, że dzięki łagodniejszemu spojrzeniu na zalecenia specyfikacji znacznie prościej zbudować działającą stronę zgodną z XHTML.

<!D0CTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Frameset//EN” ”http://www.w3.org/TR/xhtml l/DTD/xhtml l-frameset.dtd“>

Ostatni wariant nagłówka DOCTYPE dopuszcza stosowanie ramek. W pozostałych zaleceniach niczym nie różni się od deklaracji DOCTYPE w wersji Transitional.

Kolejnym obowiązkowym elementem w strukturze dokumentu jest linia widoczna poniżej. Odpowiada ona za określenie znaczenia poszczególnych znaczników wykorzystywanych w kodzie strony. W przypadku tworzenia strony WWW wykorzystującej język XHTML wpis zawsze wygląda tak, jak na przykładzie:

<html xmlns=”http://www.w3.org/1999/xhtml11 xml: 1 ang=”pl „>

Jeżeli tworzysz stronę zgodną z językiem HTML, to powyższy wpis jest zastępowany przez sam znacznik <html >.

Kolejnym obowiązkowym i wspólnym elementem struktury dokumentu XHTML lub HTML jest znacznik <head></head>. Jest on odpowiedzialny za określenie podstawowych właściwości strony, takich jak strona kodowa, tytuł, informacje o autorze oraz słowa kluczowe i opis strony. Dokładne informacje na temat zawartości <head> znajdziesz w dalszej części niniejszego rozdziału.

Bezpośrednio po znaczniku zamykającym </head> znajduje się <body></body>, we wnętrzu którego zamieszczamy całą widoczną treść strony.

Właśnie poznałeś wszystkie niezbędne elementy, tworzące strukturę dokumentu XHTML lub HTML. Aby usystematyzować wiedzę, przyjrzyj się poniższym listingom zawierającym kompletną strukturę strony.

Listing struktury dokumentu XHTML

<?xml version=“1.0” encoding=”iso-8859-2″?>

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml l/DTD/xhtml l-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl”>

<head>

</head>

<body>

</body>

</html>

Listing struktury dokumentu HTML

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN” ”http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>
</head>
<body>
</body>
</html>

Następnym znacznikiem, który zalicza się do stałych elementów strony WWW, jest <title></title>. Odpowiada on za ustawienie tytułu strony, widocznego na belce tytułowej w oknie przeglądarki. Znacznik ten powinien znajdować się pomiędzy <head></head>.

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl”>

<head>
<title>Tomasz Dawski – strona domowa</title>
</head>
</html>

Tytuł jest jedynym elementem strony, który znajduje się w nagłówku dokumentu i jest widoczny bez konieczności analizy zawartości kodu strony.

Tytuł dokumentu jest jedynym elementem nagłówka strony, który jest widoczny w oknie przeglądarki. Oczywiście, jeżeli zapomnisz o dodaniu tego znacznika, nic się nie stanie, chociaż podczas promocji i pozycjonowania strony możesz mieć problemy z osiągnięciem zadowalających wyników. Pamiętaj również, że za pomocą informacji zawartych między tymi znacznikami strona jest opisywana w Ulubionych przeglądarki.