Budowanie szablonu strony w języku HTML

Każda strona internetowa powinna być budowana w myśl trzech głównych zasad:

Chcemy, aby nasz dokument był podzielony na cztery główne części, dlatego użyjemy znacznika <div>. Poniżej przykładowy szablon:

<!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="footer">
<!-- stopka -->
</div>

</body>
</html>

Znacznik <!DOCTYPE> określa typ dokumentu. Następnie w <head> definiujemy metadane, język, zestaw znaków, tytuł strony oraz podłączamy plik CSS. Zawartość widoczna dla użytkownika mieści się w sekcji <body>.

Przykładowa zawartość <body>:

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

Każda sekcja posiada atrybut id, który możemy stylizować w pliku CSS, co pozwala przesuwać i formatować sekcje niezależnie od treści.

Szybkie menu