Poprawna budowa dokumentu HTML i XHTML :: StrefaWWW >> Webmaster, Kurs HTML, PHP, JavaScript, News

SZUKANA FRAZA:

Poprawna budowa dokumentu HTML i XHTML

Data publikacji: 2007-01-26
Autor: Tomasz -Łysy- Brudny

Artykuł ten jest przeznaczony głównie dla osób dopiero zaczynających swoją przygodę z tworzeniem witryn internetowych, jednak może się on również okazać przydatny osobom już w pewnym stopniu doświadczonym w tej dziedzinie, ponieważ zdarza się, że często nie zdajemy sobie sprawy z popełnianych błędów.

Wiele osób nie ma pojęcia, lub ma wątpliwości co do tego jak powinna wyglądać poprawna budowa dokumentu HTML. Poprawna pod kątem walidatorów jak i wyszukiwarek internetowych, dzięki którym nasza strona powinna podskoczyć o kilka a nawet kilkanaście miejsc do góry.

Zanim przejdziemy do sedna sprawy trzeba sobie uświadomić, że strony powinno się pisać w XHTML'u który jest następcą poczciwego HTML'a. Chodzi tutaj przede wszystkim o budowę szkieletu strony, który powinien się opierać o div'y a nie jak to miało miejsce w HTML'u o tabele, ponieważ nie są one do tego przeznaczone. Budowa strony opartej o div'y ma swoje niewątpliwe zalety, takie jak:

- Mniejsza objętość kodu, co się przedkłada również na mniejszą objętość pojedynczego dokumentu .html (optymalną wielkością dokumentu .html jest od 5-15 KB).

- Większa przejrzystość kodu, a co za tym idzie łatwiejsza aktualizacja strony.

- Pełna kontrola nad wyglądem strony dzięki przeniesieniu formatowania do arkusza styli (CSS).

Polecam stronę http://osiolki.net/faq/xhtmlfaq jeżeli chcesz się dowiedzieć więcej na ten temat i być może znaleźć odpowiedź na któreś z nurtujących Cię pytań.

Budowa dokumentu HTML i XHTML składa się z dwóch głównych części: znacznika otwierającego i zamykającego head, oraz znacznika otwierającego i zamykającego body, natomiast całość jest zawarta w znaczniku html, nad którym jest umieszczony DTD (Document Type Definition - Definicja Typu Dokumentu), oraz w przypadku XHTML tzw. prolog.

- Dla dokumentów HTML wyróżniamy 2 rodzaje DTD:

Transitional (przejściowa)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset (ramkowa)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

- Dla dokumentów XHTML 1.0:

Strict (ścisła)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional (przejściowa)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset (ramkowa)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

- Dla dokumentu XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Pomiędzy znacznikami head (ang. głowa) umieszczamy takie informacje jak: kodowanie strony (właściwym kodowaniem strony dla naszego języka jest ISO-8859-2), tytuł strony, opis strony, słowa kluczowe, sposób indeksowania przez wyszukiwarki, arkusz styli, etc. Natomiast pomiędzy znacznikami body (ang. ciało) umieszczamy główną zawartość, a więc to co chcemy aby widziały osoby przeglądające naszą stronę.

- Poprawna budowa dokumentu HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">

<title>Tytuł strony</title>

<meta name="description" content="opis strony">

<meta name="keywords" content="slowa kluczowe">

<meta name="author" content="autor strony">

<meta name="robots" content="all">

<link rel="stylesheet" href="lokalizacja arkusza styli" type="text/css">

</head>

<body>

<p>Zawartość strony</p>

</body>

</html>

- Poprawna budowa dokumentu XHTML:

<?xml-stylesheet href="lokalizacja.css" type="text/css"?>

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

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

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

<head>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />

<title>Tytuł strony</title>

<meta name="description" content="opis strony" />

<meta name="keywords" content="slowa kluczowe" />

<meta name="author" content="autor strony" />

<meta name="robots" content="all" />

<link rel="stylesheet" href="lokalizacja.css" type="text/css" />

</head>



<body>

<p>Zawartość strony</p>

</body>

</html>

Podczas budowania strony należy pamiętać o kilku istotnych rzeczach:

- Staraj się przenosić całe formatowanie tekstu do zewnętrznego arkusza styli, a w dokumencie .html odwoływać się do niego poprzez class (klasy).

- Kod JS (JavaScript) dłuższy niż kilka linijek przenieś do zewnętrznego dokumentu i odwołuj się do niego poprzez kod:

<script type="text/javascript" src="lokalizacja.js"></script>
- Wszystkie znaczniki, oraz atrybuty pisz z małej litery.

- Zawsze zamykaj znaczniki w odwrotnej kolejności do otwieranych, przykład:

Dobrze:
jakiś tekst
Źle:
jakiś tekst
- Zawsze ujmuj wartości atrybutów w cudzysłów.

- Dla dokumentów pisanych w XHTML pusty znacznik musi się kończyć />, przykład:
 <hr />
- Używaj odpowiednich znaczników do tego co masz zamiar przedstawić,
a więc np.
* Dla menu, oraz nieuporządkowanych używaj znacznika <ul />.
* Dla nagłówków używaj znaczników <hx /> gdzie x oznacza cyfrę od 1-6.
* Dla akapitów używaj znacznika  a dla krótkich wyróżnień tekstu znacznika .

Mam nadzieję, że powyższy artykuł przyczyni się choć w części do zrozumienia co oznacza poprawna budowa witryny internetowej.

Informacje:

Poprawna budowa dokumentu HTML i XHTML