Od pliku do strony: jak faktycznie powstaje strona internetowa
Strona internetowa nie jest niczym magicznym. To po prostu kilka plików tekstowych, które przeglądarka potrafi odczytać i wyświetlić w atrakcyjnej formie. Fundamentem są dwa języki: HTML (szkielet i treść) oraz CSS (wygląd i układ). Zrozumienie ich podstaw wystarcza, aby samodzielnie stworzyć prostą, ale w pełni działającą stronę WWW.
Najprostsza możliwa strona to jeden plik: index.html. Można go utworzyć w zwykłym edytorze tekstu, zapisując plik w odpowiednim formacie. Gdy taki plik otworzy się w przeglądarce, ta zaczyna czytać kod od góry do dołu, rozpoznaje znaczniki HTML i na tej podstawie rysuje to, co widzimy na ekranie.
CSS wchodzi do gry, kiedy trzeba nadać stronie konkretny wygląd: ustawić kolory, wyrównać elementy, dostosować układ do telefonu i monitora, uporządkować marginesy i odstępy. HTML bez CSS przypomina dokument w Wordzie bez formatowania: treść jest, ale całość wygląda bardzo surowo. Połączenie obu technologii pozwala przejść od surowego „szkicu” do kompletnego projektu.
Proces tworzenia strony internetowej zwykle wygląda podobnie: najpierw powstaje szkic struktury w HTML, potem dołączane są style CSS, później ewentualnie dochodzi JavaScript. Sam HTML i CSS wystarczą, by stworzyć wizytówkę firmy, blog, prosty landing page czy stronę informacyjną – czyli zdecydowaną większość tego, co codziennie oglądają użytkownicy.
Struktura dokumentu HTML: szkielet każdej strony WWW
Minimalny dokument HTML krok po kroku
Każda poprawna strona w HTML zaczyna się od konkretnego szkieletu. Przeglądarka oczekuje pewnych elementów w określonej kolejności. Najprostszy szablon nowoczesnej strony HTML5 wygląda tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
</head>
<body>
<p>Witaj w świecie HTML i CSS!</p>
</body>
</html>
Każda linijka ma swoje zadanie:
- <!DOCTYPE html> – informacja dla przeglądarki, że dokument używa standardu HTML5. Dzięki temu przeglądarka nie przełącza się w „tryb zgodności” ze starymi stronami.
- <html lang=”pl”> – główny element otaczający całą stronę, z atrybutem lang określającym język treści. To pomaga m.in. czytnikom ekranowym i wyszukiwarkom.
- <head> – sekcja nagłówkowa dokumentu. Zawiera informacje o stronie, ale nie jej właściwą treść widoczną dla użytkownika.
- <meta charset=”UTF-8″> – ustawienie kodowania znaków. UTF-8 pozwala bez problemu używać polskich liter i większości alfabetów.
- <title> – tytuł strony wyświetlany na karcie przeglądarki i w wynikach wyszukiwania.
- <body> – główna treść strony: nagłówki, akapity, listy, obrazy, formularze i wszystko, co użytkownik zobaczy w oknie przeglądarki.
Przy tworzeniu pierwszej strony najlepiej przygotować taki „szablon bazowy” i kopiować go dla kolejnych plików HTML, stopniowo rozbudowując zawartość body i sekcję head.
Rola sekcji <head> w działaniu strony
Sekcja head nie jest efektowna wizualnie, bo użytkownik jej nie widzi, ale ma duży wpływ na działanie, wydajność i widoczność strony. To tutaj umieszcza się dane techniczne, informacje dla wyszukiwarek, ikony czy odwołania do plików CSS i skryptów.
Typowe elementy w <head> to między innymi:
- <meta charset=”UTF-8″> – kodowanie znaków, omawiane wcześniej.
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> – kluczowy element dla stron responsywnych. Informuje przeglądarkę mobilną, że układ strony ma dopasować się do szerokości ekranu urządzenia.
- <meta name=”description” content=”Krótki opis strony”> – opis używany często jako fragment w wynikach wyszukiwania.
- <link rel=”stylesheet” href=”style.css”> – dołączenie zewnętrznego pliku CSS.
- <link rel=”icon” href=”favicon.ico”> – ikonka strony w karcie przeglądarki.
Przykładowa, nieco bardziej rozbudowana sekcja head może wyglądać następująco:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Podstawy HTML i CSS</title>
<meta name="description" content="Naucz się, jak powstaje strona internetowa na bazie HTML i CSS.">
<link rel="stylesheet" href="style.css">
</head>
Dzięki tym kilku liniom strona nie tylko poprawnie wyświetli polskie znaki, ale również będzie wygodna w obsłudze na smartfonach i czytelnie opisana w wyszukiwarce.
Elementy blokowe i liniowe: zrozumienie układu HTML
HTML składa się z elementów, które można podzielić na dwie podstawowe grupy: blokowe i liniowe. To rozróżnienie jest kluczowe dla układu strony i współpracy z CSS.
Elementy blokowe (np. <div>, <p>, <h1>–<h6>, <ul>, <section>) zajmują całą dostępna szerokość rodzica i zaczynają się od nowej linii. Zachowują się jak „klocki”, które układa się jeden pod drugim. Nadają strukturę, dzielą treść na bloki.
Elementy liniowe (np. <span>, <a>, <strong>, <em>, <img>) w naturalny sposób układają się w linii tekstu, nie rozpoczynają nowego wiersza. Służą do wyróżniania lub umieszczania drobnych elementów wewnątrz akapitów i nagłówków.
Przykład pokazujący różnicę:
<p>To jest akapit z <strong>ważnym</strong> słowem.</p>
<p>Drugi akapit.</p>
<p> jest elementem blokowym – każdy tworzy nową linię. <strong> jest liniowy – wyróżnia tekst, ale nie przerywa linii. Zrozumienie tego podziału bardzo ułatwia późniejsze pozycjonowanie elementów za pomocą CSS.
Najważniejsze znaczniki HTML do budowy treści
Nagłówki, akapity i semantyczna struktura tekstu
Podstawą czytelnej treści są nagłówki i akapity. HTML udostępnia sześć poziomów nagłówków: od <h1> (najważniejszy) do <h6> (najmniej ważny). W typowej stronie używa się zwykle poziomów <h1>–<h3>, rzadziej niższych.
Przykładowa struktura nagłówków w artykule może wyglądać tak:
<h1>Tytuł główny strony</h1>
<h2>Sekcja pierwsza</h2>
<p>Treść sekcji pierwszej...</p>
<h3>Podsekcja</h3>
<p>Treść podsekcji...</p>
<h2>Sekcja druga</h2>
<p>Treść sekcji drugiej...</p>
Element <h1> powinien być w dokumencie unikalny i reprezentować główny tytuł strony. Niższe poziomy nagłówków porządkują treść, ułatwiają użytkownikom „skanowanie” strony, a wyszukiwarkom – zrozumienie hierarchii informacji.
Do zwykłych akapitów tekstu służy <p>. Nie ma sensu nadużywać innego znacznika w roli akapitu. Z kolei <br> stosuje się wyłącznie do pojedynczego złamania linii, np. w wierszu lub adresie, a nie do tworzenia przerw między blokami tekstu.
Listy, cytaty i wyróżnienia w tekście
Gdy trzeba wyliczyć kilka punktów, używa się list. HTML dostarcza dwa podstawowe typy:
- <ul> – lista nieuporządkowana (zwykle wypunktowana kropkami lub myślnikami),
- <ol> – lista uporządkowana (numerowana).
Każdy element listy zapisuje się jako <li>:
<h2>Najprostsze elementy HTML</h2>
<ul>
<li>Nagłówki (<h1>–<h6>)</li>
<li>Akapity (<p>)</li>
<li>Listy (<ul>, <ol>, <li>)</li>
</ul>
Do cytowania większych fragmentów tekstu używa się <blockquote>, zwykle razem z akapitem w środku. Mniejsze wyróżnienia w tekście realizuje się za pomocą:
- <strong> – znaczące wyróżnienie (najczęściej pogrubienie, ale ważny jest sens – informuje, że treść ma większe znaczenie),
- <em> – wyróżnienie poprzez emfatyczne zaakcentowanie (zwykle kursywa),
- <code> – krótki fragment kodu komputerowego.
Dzięki tym kilku znacznikom tekst staje się bardziej czytelny, logicznie uporządkowany i lepiej odbierany zarówno przez człowieka, jak i przez wyszukiwarki.
Obrazy i atrybut alt: treść wizualna a dostępność
Grafika to ważny element większości stron WWW. Do osadzania obrazów używa się znacznika <img>. Jest to element pusty (nie ma znacznika zamykającego) i korzysta z atrybutów:
- src – ścieżka do pliku graficznego,
- alt – alternatywny tekst wyświetlany, gdy obraz się nie załaduje lub odczytywany przez czytniki ekranowe,
- width, height – wymiary obrazka (opcjonalne, ale przydatne).
Przykład poprawnego użycia:
<img src="logo.png" alt="Logo firmy XYZ" width="200" height="80">
Atrybut alt jest często pomijany, a ma ogromne znaczenie dla dostępności. Jeśli obraz niesie konkretną treść (np. infografika, wykres, zdjęcie produktu), alt powinien ją oddawać w skrócie. Jeśli grafika jest czysto dekoracyjna, a sama strona jest projektowana z myślą o dostępności, alt można zostawić pusty (<img src=”…” alt=””>), aby nie wprowadzać szumu dla czytników ekranowych.
Umieszczanie sensownych opisów alt pomaga także wyszukiwarkom zrozumieć zawartość graficzną i może poprawić widoczność w wyszukiwarce obrazów.
Linki i nawigacja po stronach
Strona internetowa żyje dzięki linkom. Podstawowym znacznikiem do tworzenia odnośników jest <a>. Najważniejszy atrybut to href, wskazujący na adres docelowy:
<a href="https://example.com">Przejdź do strony</a>
Linki dzielą się na:
- zewnętrzne – prowadzące do innych domen, np. <a href=”https://example.com”>Zewnętrzna strona</a>,
- wewnętrzne – prowadzące do innych podstron w obrębie tej samej witryny, np. <a href=”kontakt.html”>Kontakt</a>.
Można też tworzyć kotwice, czyli linki prowadzące do konkretnego miejsca na tej samej stronie. Wystarczy nadać elementowi atrybut id i odwołać się do niego za pomocą #:
<h2 id="sekcja-html">HTML</h2>
...
<a href="#sekcja-html">Przejdź do sekcji o HTML</a>
Ostrożnie trzeba podchodzić do atrybutu target=”_blank”, który otwiera link w nowej karcie. Warto używać go jedynie tam, gdzie użytkownik rzeczywiście powinien pozostać na obecnej stronie (np. podczas wypełniania formularza).
Semantyczny HTML: zrozumiała struktura strony
Nowe znaczniki HTML5: header, nav, main, footer
HTML5 wprowadził zestaw znaczników semantycznych, które opisują funkcję poszczególnych fragmentów strony. Zamiast używać wszędzie <div> i nadawać mu klasy, można sięgnąć po gotowe elementy:
- <header> – nagłówek strony lub sekcji (np. logo, menu, tytuł),
- <nav> – główna nawigacja, zbiory linków prowadzące po stronie lub witrynie,
- <section> – logiczna sekcja strony, zwykle z własnym nagłówkiem,
- <article> – samodzielna jednostka treści (np. wpis na blogu, news, karta produktu),
- <aside> – treść poboczna, dodatkowa (np. panel boczny, przypisy, linki pokrewne).
section, article, aside: logiczne dzielenie treści
Poza podstawowymi blokami jak <header> czy <footer>, HTML5 udostępnia też znaczniki przeznaczone do porządkowania właściwej treści strony. Zamiast układać wszystko w kolejnych <div>, można posłużyć się elementami opisującymi znaczenie fragmentu:
Układ prostego bloga może wyglądać tak:
<main>
<article>
<header>
<h1>Tytuł wpisu</h1>
<p>Data publikacji, autor</p>
</header>
<section>
<h2>Wprowadzenie</h2>
<p>Krótki wstęp do tematu...</p>
</section>
<section>
<h2>Główna część</h2>
<p>Szczegółowy opis zagadnienia...</p>
</section>
<footer>
<p>Tagi, link do komentarzy</p>
</footer>
</article>
<aside>
<h2>Najnowsze wpisy</h2>
<ul>
<li><a href="#">Tytuł 1</a></li>
<li><a href="#">Tytuł 2</a></li>
</ul>
</aside>
</main>
Taka struktura pomaga czytnikom ekranowym, wyszukiwarkom i wszelkim narzędziom analizującym stronę zrozumieć, która treść jest główna, a która tylko ją uzupełnia.
role i aria-label: dodatkowe wsparcie dla dostępności
Semantyczne znaczniki często wystarczą, ale w bardziej złożonych interfejsach przydają się atrybuty z rodziny ARIA. Służą do doprecyzowania ról i nazw elementów interfejsu, szczególnie gdy tworzy się zaawansowane komponenty (np. rozwijane menu, zakładki).
Prosty przykład nawigacji z dodatkowym opisem:
<nav aria-label="Główne menu">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="oferta.html">Oferta</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
Dzięki aria-label urządzenia asystujące komunikują użytkownikowi, że to „Główne menu”, a nie dowolna lista linków. W podobny sposób można opisywać przyciski ikonowe, które nie zawierają tekstu:
<button type="button" aria-label="Otwórz wyszukiwarkę">
<img src="icon-search.svg" alt="">
</button>
Warunek jest jeden: ARIA powinna uzupełniać istniejącą semantykę, a nie ją zastępować. Zaczyna się od poprawnego HTML, a dopiero potem korzysta z dodatkowych atrybutów.
Wprowadzenie do CSS: jak nadać styl stronie
Trzy sposoby dodawania CSS do dokumentu
Kod HTML opisuje strukturę i znaczenie, natomiast CSS odpowiada za wygląd. Style można podłączyć na kilka sposobów, z których każdy ma swoje miejsce:
- zewnętrzny arkusz – osobny plik .css, dołączany przez <link> w <head>,
- style w <style> – blok CSS zapisany bezpośrednio w dokumencie HTML,
- style inline – pojedynczy atrybut style w konkretnym znaczniku.
Najczęściej stosuje się pierwszą opcję, bo ułatwia to utrzymanie kodu i ponowne użycie styli na wielu stronach.
<!-- Zewnętrzny arkusz -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- Blok <style> w dokumencie -->
<head>
<style>
body {
font-family: system-ui, sans-serif;
}
</style>
</head>
<!-- Style inline (stosować oszczędnie) -->
<p style="color: red;">Ważny komunikat</p>
Style inline trudno nadpisywać i wyszukiwać w projekcie. Sprawdzają się jedynie w pojedynczych, wyjątkowych sytuacjach (np. test A/B, jednorazowa zmiana).
Selektory, właściwości i wartości: składnia CSS w praktyce
Podstawowy blok CSS składa się z selektora i listy par właściwość–wartość ujętej w nawiasy klamrowe:
selektor {
właściwość: wartość;
inna-właściwość: inna wartość;
}
Kilka prostych przykładów:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
font-size: 2rem;
color: #222;
}
p {
line-height: 1.6;
}
Selektor określa, do jakich elementów odnosi się dany fragment CSS (np. wszystkie <p>, wszystkie elementy z klasą .btn). Właściwości to konkretne cechy wyglądu, takie jak kolor tekstu (color), rozmiar czcionki (font-size), marginesy (margin), obramowanie (border).
Selektory typu, klas i identyfikatorów
W codziennej pracy używa się przede wszystkim trzech podstawowych rodzajów selektorów. Różnią się one zakresem działania i siłą nadpisywania styli.
- Selektor typu – wskazuje na znacznik HTML, np. body, p, h1.
- Selektor klasy – zaczyna się od kropki, można go nadać wielu elementom.
- Selektor identyfikatora – zaczyna się od #, w założeniu unikalny w dokumencie.
Przykład użycia klas i identyfikatora w HTML:
<h1 id="glowny-tytul">Podstawy HTML i CSS</h1>
<p class="lead">Krótki opis artykułu.</p>
<p>Dalsza treść...</p>
<a href="kontakt.html" class="btn">Skontaktuj się</a>
Oraz odpowiadający im CSS:
#glowny-tytul {
text-align: center;
}
.lead {
font-size: 1.1rem;
color: #555;
}
.btn {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #0077ff;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
Klasy są wygodnym sposobem na grupowanie elementów o podobnym wyglądzie. Można ich używać wielokrotnie i łączyć ze sobą, np. <button class=”btn btn-primary”>.
Dziedziczenie i specyficzność: dlaczego styl działa (lub nie)
Gdy projekt staje się większy, te same elementy mogą być opisane wieloma regułami CSS. O tym, który styl „wygra”, decydują trzy główne mechanizmy: kolejność, dziedziczenie i specyficzność.
- Kolejność – jeśli dwa identyczne selektory ustawiają tę samą właściwość, obowiązuje ten zapisany później w arkuszu.
- Dziedziczenie – część właściwości (np. color, font-family) przechodzi z elementu rodzica na potomków, inne (np. margin, padding) już nie.
- Specyficzność – im „dokładniejszy” selektor, tym większa ma pierwszeństwo.
Porównanie kilku selektorów (od najsłabszego do najsilniejszego):
- p { color: blue; }
- .info { color: green; }
- #komunikat { color: red; }
Dla elementu zapisanego jako <p id=”komunikat” class=”info”>…</p> zwycięży kolor czerwony, bo selektor z identyfikatorem (#komunikat) jest najbardziej szczegółowy.
Przydatna zasada z praktyki: unika się niepotrzebnie skomplikowanych selektorów (np. header nav ul li a.btn), bo w dłuższej perspektywie utrudniają nadpisywanie styli i refaktoryzację.
Układ strony z użyciem CSS
Box model: marginesy, obramowanie i wypełnienie
Każdy element w HTML traktowany jest przez CSS jak prostokąt, który składa się z kilku warstw. To tak zwany box model:
- content – właściwa treść (tekst, obrazek),
- padding – odstęp między treścią a obramowaniem,
- border – ramka dookoła,
- margin – zewnętrzny odstęp od innych elementów.
Prosty przykład z komentarzami:
.kafelek {
width: 300px; /* szerokość treści */
padding: 16px; /* odstęp wewnątrz */
border: 1px solid #ddd; /* cienka ramka */
margin: 16px; /* odstęp od innych elementów */
}
Domyślnie przeglądarka liczy szerokość i wysokość bez paddingu i borderu. Często wygodniej jest zmienić ten model na bardziej intuicyjny, dodając na początku arkusza:
*,
*::before,
*::after {
box-sizing: border-box;
}
Dzięki temu width obejmuje już padding i border, a planowanie układu staje się prostsze.
Flexbox: nowoczesne układanie elementów w rzędach i kolumnach
Do układania elementów obok siebie przez lata używano floatów i tabelek, ale dzisiaj najwygodniejszym narzędziem jest Flexbox. Pozwala tworzyć elastyczne wiersze i kolumny, które dobrze zachowują się na różnych szerokościach ekranu.
Aby włączyć Flexbox dla kontenera, wystarczy ustawić display: flex:
.kontener {
display: flex;
gap: 16px;
}
.kolumna {
background-color: #fff;
padding: 16px;
border-radius: 8px;
}
W HTML taki układ wygląda wtedy tak:
<div class="kontener">
<div class="kolumna">Kolumna 1</div>
<div class="kolumna">Kolumna 2</div>
<div class="kolumna">Kolumna 3</div>
</div>
Najczęściej używane właściwości Flexboxa to:
- flex-direction – ustawienie kierunku (row, column),
- justify-content – wyrównanie w osi głównej (np. space-between, center),
- align-items – wyrównanie w osi poprzecznej (np. stretch, center),
- flex – sposób „rozciągania się” elementu względem rodzeństwa.
Dla prostego układu trzech kolumn o równych szerokościach wystarczy:
.kontener {
display: flex;
gap: 16px;
}
.kolumna {
flex: 1;
}
Responsywność: media queries i elastyczne jednostki
Użytkownicy wchodzą na strony z telefonów, tabletów, laptopów i dużych monitorów. Żeby układ był czytelny na każdym z tych urządzeń, stosuje się podejście responsywne. Trzonem są media queries – warunki, przy których CSS zmienia zachowanie.
Typowy przykład przełączania układu z trzech kolumn na jeden stosowany pionowo:
.kontener {
display: flex;
gap: 16px;
}
.kolumna {
flex: 1;
}
/* Na węższych ekranach (np. telefony) ustawiamy elementy jeden pod drugim */
@media (max-width: 768px) {
.kontener {
flex-direction: column;
}
}
Drugim filarem responsywności są elastyczne jednostki (%, rem, vw). Zamiast sztywnego font-size: 18px, często stosuje się np.:
html {
font-size: 16px;
}
body {
font-size: 1rem; /* 1 × 16px */
}
h1 {
font-size: 2rem; /* 2 × 16px */
}
Zmiana bazowej wielkości czcionki w jednym miejscu (na elemencie html) automatycznie skaluje cały tekst. Przy projektowaniu nagłówków, odstępów i bloków treści wyraźnie ułatwia to późniejsze korekty.
Łączenie HTML i CSS w prosty projekt
Mały przykład: wizytówka jednej strony (one-page)
Dla uporządkowania wszystkich elementów przydaje się krótki przykład kompletnej struktury. Poniższy szkic pokazuje, jak można połączyć semantyczny HTML z podstawowym CSS, tworząc prostą stronę-wizytówkę.
Struktura przykładowej strony: HTML krok po kroku
Poniżej kompletna, uproszczona struktura jednego pliku HTML z sekcjami typowymi dla małej strony-wizytówki:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moja strona wizytówka</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<nav class="nav">
<a href="#start" class="nav__logo">Logo</a>
<ul class="nav__list">
<li><a href="#o-mnie">O mnie</a></li>
<li><a href="#oferta">Oferta</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<section id="start" class="hero">
<h1>Jan Kowalski – projektant stron</h1>
<p class="hero__lead">Tworzę przejrzyste i szybkie witryny dla małych firm.</p>
<a href="#kontakt" class="btn btn--primary">Umów konsultację</a>
</section>
</header>
<main>
<section id="o-mnie" class="section section--light">
<div class="container">
<h2>O mnie</h2>
<p>Kilka zdań o doświadczeniu, podejściu do pracy i specjalizacji.</p>
</div>
</section>
<section id="oferta" class="section">
<div class="container">
<h2>Oferta</h2>
<div class="kontener uslugi">
<article class="kafelek usluga">
<h3>Strony firmowe</h3>
<p>Proste, czytelne witryny z nastawieniem na kontakt od klienta.</p>
</article>
<article class="kafelek usluga">
<h3>Sklepy internetowe</h3>
<p>Integracja z popularnymi systemami płatności i dostaw.</p>
</article>
<article class="kafelek usluga">
<h3>Audyt UX</h3>
<p>Analiza użyteczności istniejącej strony oraz lista usprawnień.</p>
</article>
</div>
</div>
</section>
<section id="kontakt" class="section section--light">
<div class="container">
<h2>Kontakt</h2>
<p>Napisz kilka zdań o swoim projekcie, a odpowiem najpóźniej następnego dnia roboczego.</p>
<form class="form">
<label class="form__field">
<span>Imię i nazwisko</span>
<input type="text" name="name" required>
</label>
<label class="form__field">
<span>Adres e-mail</span>
<input type="email" name="email" required>
</label>
<label class="form__field">
<span>Wiadomość</span>
<textarea name="message" rows="4" required></textarea>
</label>
<button type="submit" class="btn btn--primary">Wyślij</button>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>© <span id="year">2024</span> Jan Kowalski</p>
</div>
</footer>
</body>
</html>
Podstawowe style dla mini-projektu
Do takiej struktury dochodzi plik CSS, który ustawia ogólny wygląd, typografię i kilka prostych komponentów. Jeden z możliwych wariantów:
/* Reset / normalizacja w podstawowej formie */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
color: #222;
background-color: #f5f5f5;
}
/* Pomocniczy kontener ograniczający szerokość treści */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
}
/* Nagłówek i nawigacja */
.site-header {
background-color: #ffffff;
border-bottom: 1px solid #e0e0e0;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
max-width: 960px;
margin: 0 auto;
}
.nav__logo {
font-weight: 700;
text-decoration: none;
color: #0077ff;
}
.nav__list {
list-style: none;
display: flex;
gap: 16px;
margin: 0;
padding: 0;
}
.nav__list a {
text-decoration: none;
color: #333;
font-size: 0.95rem;
}
.nav__list a:hover {
color: #0077ff;
}
/* Sekcja startowa (hero) */
.hero {
padding: 64px 16px 48px;
text-align: center;
background: linear-gradient(135deg, #0077ff, #00aaff);
color: #ffffff;
}
.hero__lead {
max-width: 520px;
margin: 16px auto 24px;
font-size: 1.1rem;
}
/* Ogólne sekcje */
.section {
padding: 56px 0;
background-color: #f5f5f5;
}
.section--light {
background-color: #ffffff;
}
.section h2 {
margin-top: 0;
margin-bottom: 24px;
font-size: 1.8rem;
}
/* Przyciski */
.btn {
display: inline-block;
padding: 0.6rem 1.4rem;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.95rem;
text-decoration: none;
cursor: pointer;
text-align: center;
}
.btn--primary {
background-color: #ffffff;
color: #0077ff;
border-color: #ffffff;
font-weight: 600;
}
.btn--primary:hover {
background-color: #e6f1ff;
border-color: #d0e4ff;
}
/* Kafelki z usługami */
.uslugi {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.usluga {
flex: 1 1 260px;
background-color: #ffffff;
border-radius: 8px;
border: 1px solid #e0e0e0;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.usluga h3 {
margin-top: 0;
margin-bottom: 8px;
font-size: 1.2rem;
}
/* Formularz kontaktowy */
.form {
max-width: 520px;
}
.form__field {
display: flex;
flex-direction: column;
margin-bottom: 16px;
font-size: 0.9rem;
}
.form__field span {
margin-bottom: 4px;
}
.form input,
.form textarea {
font: inherit;
padding: 8px 10px;
border-radius: 4px;
border: 1px solid #cbd5e1;
resize: vertical;
}
.form input:focus,
.form textarea:focus {
outline: none;
border-color: #0077ff;
box-shadow: 0 0 0 1px #0077ff33;
}
/* Stopka */
.site-footer {
border-top: 1px solid #e0e0e0;
background-color: #ffffff;
padding: 16px 0;
font-size: 0.9rem;
}
.site-footer p {
margin: 0;
text-align: center;
color: #555;
}
/* Responsywność */
@media (max-width: 768px) {
.nav {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.hero {
padding-top: 48px;
padding-bottom: 40px;
}
.uslugi {
flex-direction: column;
}
}
Semantyka a dostępność: kilka dobrych nawyków
HTML to nie tylko wygląd, ale również struktura wykorzystywana przez czytniki ekranu, wyszukiwarki i różne urządzenia. Kilka prostych decyzji na etapie pisania znaczników mocno ułatwia życie osobom korzystającym z technologii asystujących.
- Użycie jednego logicznego łańcucha nagłówków: <h1> na tytuł strony, niżej <h2>, <h3> itd. bez przeskakiwania po poziomach.
- Stosowanie znaczników <nav>, <main>, <header>, <footer>, <section>, <article> zamiast samych <div>.
- Dodawanie atrybutu alt do obrazów z opisem treściowym, np. <img src=”portret.jpg” alt=”Jan Kowalski przy biurku”>.
- Kontrast tekstu do tła na poziomie czytelnym także na słabszych ekranach (ciemny tekst na jasnym tle lub odwrotnie).
- Logiczna kolejność w HTML zgodna z kolejnością odczytu – układ CSS nie powinien jej „łamac” tylko po to, by było efektowniej.
Przykład fragmentu HTML spełniającego te zasady przy prostym bloku z informacją:
<section aria-labelledby="sekcja-info">
<div class="container">
<h2 id="sekcja-info">Dla kogo są te usługi</h2>
<p>Najczęściej pracuję z małymi firmami, freelancerami i organizacjami pozarządowymi.</p>
</div>
</section>