Każda strona internetowa powinna być budowana w myśl trzech głównych zasad:
- Sekcje: nagłówek, nawigacja, treść, stopka.
- Dobra struktura HTML
- Brak błędów w kodowaniu
Zacznijmy od pierwszej. Chcemy aby nasz dokument był podzielony na cztery główne części. Z tego powodu użyjemy znacznika <div>. Div jest angielskim skrótem słowa “division”, które w języku polskim oznacza dywizję, podział, oddział, itp. Oto przykładowy szablon strony z jej głównymi elementami:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html lang=”pl”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf=8″>
<title>Moja pierwsza strona</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
<div id=”header”>
<!– nagłówek! –>
</div>
<div id=”navigation”>
<!–nawigacja! –>
</div>
<div id=”content”>
<!– treść! –>
</div>
<div id=”footert”>
<!– stopka! –>
</div>
</body>
</html>
Na samym początku deklarujemy <!DOCTYPE>, czyli typ dokumentu, który określany jest standardami W3C. Istnieje wiele różnych typów i różnia się one między innymi jakimi znacznikami możemy się posługiwać w danym dokumencie. Jeśli używasz programu typu Micromedia Dreamweaver do budowy stron, to nie musisz się martwić typem dokumentu, ponieważ program ten sam określa typ i podpowiada ci jakich znaczników możesz używać. Równie dobrze możesz nie stosować znacznika <!DOCTYPE>. W takim przypadku przeglądarki będą interpretować twoją stronę w tzw. “quirks mode”. Wolisz jednak okreść typ, ponieważ wówczas przeglądarki będą go wyświetlać według odpowiedniego standardu.
Następnym znacznikiem jest <head>. Element ten zawiera metadane, które nie będą widoczne na stronie. W sekcji tej znajduje sie obecnie określenie języka, określenie zestawu znaków (UTF=8 – czcionki uniwersalne), tytuł strony widoczny na samej górze przeglądarki oraz link to pliku CSS.
Dokument, który użytkownicy strony zobaczą w przeglądarce mieści się pomiędzy znacznikami <body> i </body>.
Znacznik body zawiera następujące elementy:
<div id=”header”>
<h1>Moja pierwsza strona</h1>
</div>
<div id=”navigation”>
<h2>Nawigacja</h2>
<ul>
<li><a href=”podstrona1.html”>Podstrona 1</a></li>
<li><a href=”podstrona2.html”>Podstrona 2</a></li>
<li><a href=”podstrona3.html”>Podstrona 3</a></li>
</ul>
</div>
<div id=”content”>
<h2>Treść</h2>
<p>Tutaj znajduje się artykuł</p>
</div>
<div id=”footer”>
<p>Autorem jest BLA BLA </p>
</div>
…
Określiliśmy cztery sekcję dokumentu. Każda z sekcj posiada odpowiedni atrybut ID. Atrybut ten możemy zdefiniować w pliku CSS dla każdej sekcji. W taki oto sposób otrzymaliśmy szablon dokumentu HTML, który nie jest powiązany z wyglądem strony. W danym szablonie używając pliku CSS możemy przesuwać odpowiednie sekcje w prawo, lewo, górę i dół. Możemy manipulować ich wyglądem w stopni na jaki pozwala nam nasza wyobraźnia.
Comment