W związku z pojawieniem się HTML5 opiszę tu kilka ważnych zmian oraz schemat opracowany przeze mnie budowy szablonu.
Pierwsza zmiana !
Zamiast <!doctype bla bla bla.....>
Mamy po prostu <!doctype html>. Tak to wszystko :)
Następnie przy tagu html mamy polecenie dir oraz lang. Informuje to o języku strony (lang) oraz że tekst pisany jest od lewej (w tym przypadku) strony.
Czyli zamiast <html> mamy <html lang="pl" dir="ltr">.
Następnie mamy tag meta, który został uproszczony. Przykład - tag informujący o kodowaniu w utf-8:
<meta charset="UTF-8">
Inną zmianą jest tag odwołujący się do zewnętrznego skryptu np. JS.
<script src="script.js"></script>
Widać znaczną różnicę. Kod jest o wiele łatwiejszy do zapamiętania jak i przejrzystszy.
No i oczywiście kod CSS:
<link rel="stylesheet" href="style.css">
Niektóre tagi już za nami :) Co dalej?
Inne ważne zmiany to:
- Dodanie <article> - tag dla artykułów
- Dodanie <section> - tag dla różnych sekcji np. główny artykuł, reklama...
- Dodanie <header> - tag dla header'u
- Dodanie <footer> - tag dla stopki
- Dodanie <nav> - tag dla nawigacji
- Doadnie <aside> - tag dla "wyróżnienia" kawałka tekstu z np. artykułu
Tagi zamykamy standardowo dodając "/" czyli np. <nav> Jakaś nawigacja </nav>
Jak dla mnie to więcej do stworzenia dobrej strony nie jest nam potrzebne jednak jeśli chcesz zagłębić się bardziej w świat HTML5 to zapraszam Cię TUTAJ .
Najważniejsze elementy mamy omówione. Teraz przedstawiam wam mój schemat na stronę w html5.
<!doctype html>
<html lang="pl" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Web site title</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
</ul>
</nav>
</header>
<section id="container">
<section id="main">
<p>Main text</p>
</section>
<section id="box">
<p>Other text</p>
</section>
</section>
<footer>
<p>Footer text</p>
</footer>
</body>
</html>
To na tyle. Do następnego poradnika !
Brak komentarzy:
Prześlij komentarz