Użytkownicy na całym świecie korzystają z różnych systemów operacyjnych i z wielu dostępnych przeglądarek. Podstawową zasadą przygotowania strony internetowej jest stworzenie jej struktury w taki sposób, aby wyświetlała się poprawnie, bez względu na system jakiego używają internauci.
W tym celu został opracowany szablon dokumentu HTML, który zalecam stosować, gdyż będziemy mieć pewność, że strona będzie właściwie wyświetlana w oknie dowolnej przeglądarki.
Nowe znaczniki struktury dokumentu HTML5
Wraz z nową wersją – HTML5 wprowadzono nowe elementy, które porządkują strukturę dokumentu HTML. Poprawiono także różnice w interpretacji błędów przez przeglądarki internetowe czego efektem było odmienne wyświetlanie zawartości strony.
Struktura dokumentu HTML5
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Tytuł strony</title>
</head>
<body>
<header></header>
<section>
<p>To jest nasza nowa strona internetowa HTML5 CSS3.</p>
</section>
<footer></footer>
</body>
</html>Na samej górze dokumentu HTML definiujemy typ dokumentu (w naszym przypadku HTML).
Pomiędzy znacznikami head umieszczamy deklaracje odpowiedzialne m.in. za wygląd strony, pozycjonowanie, kodowanie znaków (charset=utf-8) – dzięki temu zapisowi polskie znaki będą poprawnie interpretowane przez przeglądarkę internetową.
Właściwa część strony będzie zawierać się pomiędzy znacznikami body.
Dodatkowo stronę podzielimy na 3 główne boksy. Pierwszy header, w nim możemy umieścić logo, menu. Niżej section – właściwa zawartość strony. Na samym dole footer, w którym może znaleźć się powtórzone menu, informacje kontaktowe.
W HTML5 dodatkowo możemy zastosować więcej niż jeden nagłówek H1 (w HTML4 na stronie mógł znaleźć się jeden nagłówek najwyższego poziomu – H1).
<article>
<h1>Pierwszy nagłówek H1<h1>
</article>
<article>
<h1>Drugi nagłówek H1<h1>
</article>
<article>
<h1>Trzeci nagłówek H1<h1>
</article>Tytuł strony
Zwrócę jeszcze uwagę na tytuł strony, który będzie widoczny na pasku naszej przeglądarki internetowej. Tytuł umieszczamy w części head. Jest on niezbędnym elementem strony. Tytuł powinien być zwięzły i odnosić się do zawartości naszego serwisu.
<head>
<title>Tytuł strony</title>
</head>Tytuł strony pojawia się w wynikach wyszukiwania wyszukiwarek internetowych, dlatego zwróćmy szczególną uwagę na przygotowanie trafnego, zachęcającego użytkowników do odwiedzenia naszej witryny internetowej.
Nowe znaczniki CSS3 wpływające na estetykę
CSS3 podobnie jak HTML5 jest kompatybilny wstecz dlatego wszystko to, co zostało zdefiniowane we wcześniejszej wersji będzie miało zastosowanie w nowym wydaniu. CSS3 jest rozszerzeniem CSS2 i teraz możemy stosować m.in. zaokrąglone narożniki (border-radius), tło gradientowe, animacje ruchu.
Więcej nowych znaczników omówię w kolejnych lekcjach kursu CSS.