Aby poinformować przeglądarkę, że ma do czynienia z dokumentem typu HTML należy na samym początku wstawić znacznik <html> – jednocześnie na samym końcu powinno się go zamknąć odpowiednim znacznikiem zamykającym jakim jest </html>. Tak oto utworzyliśmy ramę dokumentu.
Szablon dokumentu
Jednakże oprócz <html> należy zadbać o pojawienie się kilku innych niezbędnych elementów. Przyjrzyjmy się poniższemu podstawowemu szablonowi dokumentu typu (x)HTML
[codesyntax lang=”html4strict”]<!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>
<title>Tytuł strony</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”Description” content=”Nazwa” />
<meta name=”Keywords” content=”slowa,kluczowe” />
</head>
<body bgcolor=”white” text=”black”>
<span>
Treść…
<!– KOMENTARZ –>
</span>
</body>
</html>[/codesyntax]
Dla osoby, która pierwszy raz ma styczność z HTML’em powyższy zapis może być całkowicie niezrozumiały. Jednakże jest to szablon pliku HTML, który używany jest na każdej stronie. Teraz krótkie omówienie każdej z linii.
[codesyntax lang=”html4strict”]<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>[/codesyntax]
Deklaracja DTD – informuje ona przeglądarkę w jakim języku została napisana strona. W tym przypadku XHTML 1.0 Strict, jest to obecny standard tworzenia stron. Nie trzeba zapamiętywać tego zapisu, jednakże należy go umieścić na początku każdego dokumentu.
[codesyntax lang=”html4strict”]<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl” lang=”pl”>[/codesyntax]
Otwarcie znacznika <html> wraz z informacją o języku w jakim jest napisana strona.
[codesyntax lang=”html4strict”] <head>
<title>Tytuł strony</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”Description” content=”Nazwa” />
<meta name=”Keywords” content=”slowa,kluczowe” />
</head>[/codesyntax]
Wszystko co znajduje się pomiędzy <head>, a </head> to nagłówek dokumentu.
[codesyntax lang=”html4strict”]<title>Tytuł strony</title>[/codesyntax]
Znacznik <title> to tytuł strony, który znajduje się na górnym pasku przeglądarki.
[codesyntax lang=”html4strict”]<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />[/codesyntax]
Deklaracja strony kodowej. Czyli informacja o kodowaniu w jakim został zapisany dokument. Na Windowsie, aby w przeglądarce pojawiły się polskie znaki trzeba będzie najprawdopodobniej zamienić utf-8 na iso-8859-2.
[codesyntax lang=”html4strict”]<meta name=”Description” content=”Nazwa” />[/codesyntax]
Gdzie nazwa wpisujemy opis naszej strony. Zostanie on wyświetlona w wyszukiwarce internetowej.
[codesyntax lang=”html4strict”]<meta name=”Keywords” content=”slowa,kluczowe” />[/codesyntax]
Gdzie slowa,kluczowe wpisujemy po przecinku słowa kluczowe, które najtrafniej pasują do tematyki naszego serwisu.
Znaczników <meta> jest oczywiście o wiele więcej jednakże nie są wymagane do prawidłowego funkcjonowania strony, tym bardziej do nauki podstaw HTML’a.
[codesyntax lang=”html4strict”] <body bgcolor=”white” text=”black”>
<span>
Treść…
</span>
</body>[/codesyntax]
Nadszedł czas na właściwą cześć strony, czyli jej ciało. Atrybut bgcolor określa kolor tła strony, natomiast text kolor tekstu. Wszystko co znajduje się pomiędzy znacznikami <body>, a </body>pojawi się w oknie przeglądarki. W tym przypadku na ekranie zostanie wyświetlony napis „Treść…”.
[codesyntax lang=”html4strict”]<!– KOMENTARZ –>[/codesyntax]
Słowa objęte w <!– –> to komentarz, to co jest wewnątrz zostanie pominięte przez przeglądarkę i nie zostanie wyświetlone.
Zostaliśmy zapoznani z podstawowym szablonem języka HTML. Czas na umówienie podstawowych znaczników formatujących tego języka.