Lekcja WebDev: Tworzymy stronę pizzerii krok po kroku! 🍕
Czas: 1,5 godziny
Poziom: Początkujący
Pliki: index.html
, menu.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pizzeria Bella</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Treść strony -->
</body>
</html>
<!DOCTYPE html>
– deklaracja typu dokumentu.<html lang="pl">
– główny znacznik strony z językiem.<head>
– meta-informacje (tytuł, kodowanie, link do CSS).<meta name="viewport">
– zapewnia responsywność na urządzeniach mobilnych.<header>
: Logo i menu nawigacyjne (użyte w obu plikach).<section>
: Sekcje treści (np. #home
, #reviews
).<footer>
: Stopka z prawami autorskimi.Dlaczego?
Semantyczne tagi poprawiają czytelność kodu i SEO.
W index.html
:
<nav>
<ul>
<li><a href="#home">Strona Główna</a></li>
<li><a href="menu.html">Menu</a></li>
</ul>
</nav>
menu.html
przenosi do osobnej strony.#home
to anchor, który przewija do sekcji na tej samej stronie.