- fBecome a fan on Facebook
- tFollow us on Twitter
- cAdd us on Flickr
- aFollow our updates through RSS
- kSubscribe to our newsletter
STRUKTURA DOKUMENTU HTML
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.