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:

<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>

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:

<img src="plik.jpg">
<hr/>

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


<img src="plik.jpg" />

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.


<!doctype html>

Następnie mamy znaczniki<html>


<!doctype html>
<html>

</html>

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


<!doctype html>
<html>
<head>

</head>

<body>

</body>
</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ę:


<!-- tekst komentarza -->

Czas na wpisy dla sekcji head z opowiednik mkomentarzem:

<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>

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

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

Back to: HTML5 i CSS