Efekt działania fragmentu kodu HTML polega na wyświetleniu strukturalnej strony internetowej złożonej z kilku sekcji ułożonych pionowo, gdzie każda sekcja pełni określoną funkcję – nagłówek, menu, opis autora oraz stopka. Każdy taki obszar jest oznaczony odpowiednim kontenerem <div> i posiada unikalną klasę, co pozwala łatwo nadać mu własny styl za pomocą CSS.
Omawiany kod HTML wygląda następująco:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Moja pierwsza strona</title>
</head>
<body>
<div class="top">
<h1>Witaj na stronie</h1>
</div>
<div class="menu">
<a href="index.html">Strona Główna</a>
</div>
<div class="kim-jestem">
<h2>Kim jestem?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor atque eveniet id quasi autem quis porro molestiae dolorem laudantium qui corrupti, perspiciatis exercitationem blanditiis optio aliquam dolore necessitatibus aliquid recusandae placeat ducimus libero tenetur doloribus.</p>
</div>
<div class="footer">
Realizacja: <a href="https://zdobywcysieci.pl">Zdobywcy Sieci</a>
</div>
</body>
</html>Jak wygląda wynik działania tego kodu?
Po uruchomieniu przeglądarka wyświetli stronę, która przykładowo (bez dodatkowego stylowania CSS) będzie miała taki układ:
- W górnej części znajduje się nagłówek z napisem „Witaj na stronie”.;
- Pod nagłówkiem widoczne jest poziome menu z jednym odnośnikiem „Strona Główna”.;
- Następnie sekcja opisana jako „Kim jestem?” z przykładowym tekstem typu Lorem Ipsum.;
- Na dole strony znajduje się stopka z informacją o autorze/realizacji oraz klikalnym linkiem.
W najprostszej, nieostylowanej wersji wynik będzie przedstawiał się jako cztery poziome pasy tekstu, jeden pod drugim. Jeśli dodać style CSS, każdy z obszarów może mieć własne kolory, odstępy, czcionki lub tło, co znacząco poprawia estetykę układu.
Szczegółowe omówienie poszczególnych elementów
- <div class=”top”> – kontener nagłówka, zawiera najważniejszy tytuł strony. Zazwyczaj duży, widoczny u góry.;
- <div class=”menu”> – sekcja nawigacyjna z linkiem do strony głównej (można tu umieszczać więcej odnośników).;
- <div class=”kim-jestem”> – sekcja opisowa, w tym miejscu autor przedstawia się lub wstawia dowolne informacje.;
- <div class=”footer”> – stopka serwisu, gdzie zwykle zamieszcza się informacje o twórcach czy prawach autorskich.
Taki układ jest standardem na większości stron WWW – dzielenie wyraźnych sekcji pozwala na czytelne zaprezentowanie treści oraz łatwe jej rozbudowywanie.
Przykłady zastosowań podobnych struktur HTML
Strona firmowa albo wizytówka
- nagłówek z nazwą firmy, menu nawigacyjne z odnośnikami do sekcji „O nas”, „Oferta”, „Kontakt”, sekcja opisowa z informacjami i stopka z danymi kontaktowymi.
Portfolio
- w nagłówku imię i nazwisko twórcy, menu do wyboru kategorii prac, sekcja z prezentacją doświadczenia lub projektów, a w stopce linki do profili społecznościowych.
Blog
- nagłówek z tytułem bloga, menu z listą kategorii, główna sekcja z postami i opisem autora („Kim jestem?”), a w stopce informacje o prawach autorskich.
Strona wydarzenia (eventu)
- nagłówek z nazwą wydarzenia, menu z planem czy programem, sekcja informacyjna z opisem osoby organizującej wydarzenie oraz stopka z podziękowaniem za wsparcie.
Dlaczego warto korzystać z podziału na sekcje?
- Łatwość nawigacji – każda sekcja może zostać łatwo zidentyfikowana i odseparowana od reszty zarówno wizualnie, jak i semantycznie.;
- Proste wdrażanie styli CSS – wystarczy określić stylizację dla danej klasy w pliku CSS (np.
.menu { background: #ddd; }), by zmienić wygląd całego obszaru.; - Przejrzystość kodu – dobrze opisane sekcje kodu ułatwiają utrzymanie i rozwijanie strony.;
- Możliwość dynamicznego rozbudowywania – dodając kolejne
<div>z różnymi klasami, możesz elastycznie dodawać funkcjonalności i treść.
Podsumowanie – jak użyć kodu w praktyce?
Jeśli chcesz osiągnąć podobny efekt działania jak w powyższym przykładzie:
- kopiuj kod do pliku z rozszerzeniem
.html, - w razie potrzeby dodaj plik
style.cssz własnymi stylami, - wyświetl stronę w przeglądarce, aby zobaczyć ułożenie sekcji,
- dowolnie modyfikuj zawartość oraz rozbudowuj strukturę, zgodnie z potrzebami swojej witryny.
Taki fundament pozwala zbudować dowolną stronę – od prostego portfolio po rozbudowany serwis informacyjny.
