Podstawowa struktura strony

Na początku należy powiedziec kilka słów o selektorach i składni języka. Większość selektorów występuje w parach i wyróżniamy znaczniki otwierające i zamykajace:

<znacznik> – znacznik otwierający
</znacznik> – znacznik zamykający

Przykłady użycia w kodzie:

[html]
<h1>Nagłówek pierwszego stopnia</h1>
<h6>Nagłówek szóstego stopnia</h6>
<p>Tekst akapitowy</p>
<a href="http://wp.pl">odsyłacz do wp</a>
[/html]

Należy zwrócić uwagę, że wszelkie znaczniki piszemy małymi literami.

Występują jednak również znaczniki, które nie posiadają pary zamykającej np:

[html]
<img src="plik.jpg">
<hr/>
[/html]

W wersji HTML5 nie musimy domykać znacznika img, ale spotyka się wciąż (co nie jest błędem) samodomykanie części znaczników.

[html]

<img src="plik.jpg" />
[/html]

Wszystkie znaczniki będę opisywał i wyjaśniał kiedy i jak ich używać. Zanim jednak rozpoczniemy pisanie właściwe kodu należy zainstalować dowolny edytor kodu html. Wszystko można oczywiście napisać w notatniku systemowym, ale to z mojego punktu widzenia czysty masochizm … W chwili obecnej korzystam z darmowego edytora firmy Adobe Beackets i uważam, że to bardzo dobra alternatywa dla chociażby Notepad++, lecz wybór edytora to indywidualna sprawa. Zaletami edytorów jest chociażby kolorowanie składni i automatyczne zamykanie znaczników, co znacznie przyspiesza pracę.

Czas na podstawową strukturę strony.
Rozpoczynamy od deklaracji określającej język kodawania. Jak widzimy znacznik występuje pojedynczo i nie posiada samodomknięcia.

[html]

<!doctype html>

[/html]

Następnie mamy znaczniki<html>

[html]

<!doctype html>
<html>

</html>
[/html]

Pomiędzy parą znaczników <html></html> znajduje się tak zwana sekcja head oraz body, którą określają odpowiednio znaczniki:

[html]

<!doctype html>
<html>
<head>

</head>

<body>

</body>
</html>

[/html]

W sekcji head umieszcza się w większości kod, który nie jest prezentowany użytkownikowi, ale niezbędny dla prawidłowego jej wyświetlania. W sekcji body zaś znajduje się właściwa treść strony. Poniżej przedstawiam kod z przykładowymi wpisami w sekcji head oraz wyjaśnieniami w postaci komentarza. W tej chwili warto zaznaczyć, że w całym dokumencie html można używać komentarzy, które nie są widoczne dla użytkownika, a jedynie są pomocą dla webmastera.

Komentarz ma następującą składnię:

[html]

<!– tekst komentarza –>

[/html]

Czas na wpisy dla sekcji head z opowiednik mkomentarzem:

[html]
<head>
<!–kodowanie polskich znaków–>
<meta charset="utf-8" />
<!–słowa kluczowe dla wyszukiwarek–>
<meta name="keywords" content="słowa,kluczowe,rozdzielone, przecinkami" />
<!–opis strony dla wyszukiwarek –>
<meta name="description" content="Opis zawartości witryny" />
<!–informacja o auorze–>
<meta name="author" content="Imię Nazwisko" />
<!– informacja o prawach autorskich do witryny–>
<meta name="copyright" content="Imię Nazwisko" />
<!– informacja o języku witryny –>
<meta name="language" content="pl" />
<!– informacja dla robotów o indexowaniu strony –>
<meta name="robots" content="all" />
<!– opcje: index, noindex, follow, nofollow, none, all –>
<title>Tytuł strony widoczny w zakładce</title>
</head>
[/html]

W bardzo podstawowej wersji dokument html przygotowany do wypełniania strony treścią może wyglądać następująco:

[html]
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tytuł strony</title>
</head>
<body>
<!–właściwa treść strony–>
</body>
</html>
[/html]


Back to: HTML5 i CSS