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>
Przyjazne klasy: prosty system nazewnictwa
Przy jednym pliku wszystko wydaje się jasne, jednak w większym projekcie łatwo zgubić się w klasach typu .box, .content2 czy .new-style. W praktyce przydaje się czytelny schemat nazewnictwa inspirowany np. BEM (Block–Element–Modifier).
Idea jest prosta:
- blok – samodzielny komponent, np. .card, .nav, .form,
- element – część bloku, pisana z podwójnym podkreślnikiem, np. .card__title, .nav__item,
- modyfikator – wariant wyglądu, z podwójnym myślnikiem, np. .card–highlight, .btn–secondary.
Mały przykład karty oferty z takim podejściem:
<article class="card card--highlight">
<h3 class="card__title">Pakiet Premium</h3>
<p class="card__text">Zawiera projekt graficzny, wdrożenie i podstawową optymalizację SEO.</p>
<a href="#kontakt" class="btn btn--primary card__cta">Zapytaj o termin</a>
</article>
.card {
background-color: #ffffff;
border-radius: 8px;
padding: 20px;
border: 1px solid #e0e0e0;
}
.card--highlight {
border-color: #0077ff;
box-shadow: 0 4px 10px rgba(0, 119, 255, 0.12);
}
.card__title {
margin-top: 0;
margin-bottom: 8px;
font-size: 1.2rem;
}
.card__text {
margin-bottom: 16px;
}
.card__cta {
margin-top: 8px;
}
Taki schemat nie rozwiązuje wszystkich problemów, ale ułatwia utrzymanie porządku po kilku miesiącach rozwoju strony.
Porządkowanie plików: struktura katalogów w małym projekcie
Nawet mała wizytówka z czasem potrafi urosnąć. Wprowadzenie prostego porządku od początku oszczędza szukania „tego jednego pliku”. Przykładowa struktura:
projekt/
├── index.html
├── kontakt.html
├── css/
│ ├── style.css
│ └── formularz.css
├── img/
│ ├── logo.svg
│ └── portret.jpg
└── js/
└── main.js
Dzięki temu w HTML odwołujesz się do zasobów przewidywalnie:
<link rel="stylesheet" href="css/style.css">
<img src="img/logo.svg" alt="Logo firmy">
<script src="js/main.js"></script>
Jeśli pojawia się więcej arkuszy stylów, można jeden plik potraktować jako główny i importować do niego kolejne moduły za pomocą @import lub narzędzi typu bundler. Na zupełnym początku często wystarczy pojedynczy style.css, ale dobrze mieć w głowie, że rozdzielenie styli na sekcje (np. komentarzami /* Layout */, /* Komponenty */, /* Formularze */) ułatwia późniejszą reorganizację.
Małe usprawnienia, które robią dużą różnicę
Kilka drobiazgów powtarza się w praktycznie każdym projekcie i szybko poprawia odbiór strony:
- Dodanie płynnych przejść dla hoverów i aktywnych elementów, np. linków w menu.
- Ograniczenie szerokości akapitów tekstu, żeby linia nie była zbyt długa na dużych monitorach.
- Przewidziany „oddech” – spójny system marginesów między sekcjami i nagłówkami.
Najczęściej zadawane pytania (FAQ)
Co to jest HTML i do czego służy?
HTML (HyperText Markup Language) to język służący do tworzenia struktury i treści strony internetowej. Za jego pomocą określasz, gdzie mają być nagłówki, akapity, listy, obrazy czy linki.
Przeglądarka odczytuje kod HTML od góry do dołu i na tej podstawie „rysuje” stronę, którą widzisz na ekranie. Bez HTML-a nie ma strony WWW – to jej podstawowy szkielet.
Co to jest CSS i czym różni się od HTML?
CSS (Cascading Style Sheets) to język służący do opisu wyglądu strony: kolorów, czcionek, marginesów, odstępów, układu elementów czy zachowania na różnych ekranach (telefon, tablet, monitor).
HTML określa treść i strukturę (np. „to jest nagłówek”), a CSS decyduje, jak ta treść wygląda (np. „nagłówek ma być niebieski, wyśrodkowany i większy”). HTML bez CSS działa, ale wygląda jak surowy dokument tekstowy.
Jak wygląda najprostsza strona internetowa w HTML?
Najprostsza strona WWW to pojedynczy plik HTML, najczęściej nazwany index.html. Zawiera on minimalny szkielet dokumentu, na przykład:
<!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>
Taki plik możesz stworzyć w prostym edytorze tekstu, zapisać z rozszerzeniem .html i otworzyć w przeglądarce.
Do czego służy sekcja <head> w HTML?
Sekcja <head> zawiera informacje o stronie, których użytkownik zazwyczaj nie widzi bezpośrednio. Trafiają tam m.in. dane techniczne, opis strony dla wyszukiwarek, ustawienia dla urządzeń mobilnych oraz odwołania do plików CSS.
Typowe elementy w <head> to na przykład:
<meta charset="UTF-8">– ustawienie kodowania znaków, aby poprawnie wyświetlać polskie litery,<meta name="viewport" ...>– poprawne skalowanie na smartfonach,<meta name="description" ...>– krótki opis strony widoczny w wynikach wyszukiwania,<link rel="stylesheet" href="style.css">– podłączenie arkusza stylów CSS.
Jaka jest różnica między elementami blokowymi a liniowymi w HTML?
Elementy blokowe (np. <div>, <p>, <h1>–<h6>, <section>) zajmują całą dostępną szerokość i zaczynają się od nowej linii. Zachowują się jak „klocki”, z których budujesz strukturę strony – jeden blok pod drugim.
Elementy liniowe (np. <span>, <a>, <strong>, <em>, <img>) wstawiają się wewnątrz tekstu i nie łamią linii. Używasz ich do wyróżniania fragmentów treści lub dodawania małych elementów w środku akapitu.
Jak poprawnie używać nagłówków <h1>–<h6> na stronie?
Nagłówki <h1>–<h6> porządkują treść i tworzą jej hierarchię. <h1> powinien być zwykle jeden na stronę i reprezentować główny tytuł (np. tytuł artykułu). Kolejne poziomy (<h2>, <h3> itd.) stosujesz do sekcji i podsekcji.
Dobrze zaplanowana struktura może wyglądać tak: <h1> – tytuł strony, <h2> – główne sekcje, <h3> – podsekcje wewnątrz <h2>. Ułatwia to nawigację użytkownikom oraz pomaga wyszukiwarkom zrozumieć, o czym jest strona.
Czy da się zrobić prostą stronę tylko w HTML i CSS, bez JavaScript?
Tak. HTML i CSS w zupełności wystarczą do stworzenia prostych, ale w pełni działających stron, takich jak wizytówka firmy, blog, strona informacyjna czy prosty landing page. JavaScript jest potrzebny dopiero wtedy, gdy chcesz dodać bardziej interaktywne funkcje (np. rozbudowane formularze, dynamiczne przeładowywanie treści, zaawansowane animacje).
Typowy proces tworzenia wygląda tak: najpierw powstaje struktura w HTML, potem dołączasz style CSS, a dopiero na końcu – w razie potrzeby – dodajesz JavaScript.
Najważniejsze punkty
- Strona internetowa to głównie pliki tekstowe z kodem HTML i CSS, które przeglądarka odczytuje i na ich podstawie „rysuje” widok strony.
- HTML odpowiada za strukturę i treść (szkielet strony), a CSS za wygląd i układ; sam HTML bez CSS jest funkcjonalny, ale wizualnie surowy.
- Każdy dokument HTML musi mieć podstawowy szkielet z deklaracją
<!DOCTYPE html>, elementem<html lang="...">, sekcjami<head>i<body>, aby poprawnie działał w nowoczesnych przeglądarkach. - Sekcja
<head>zawiera informacje techniczne (kodowanie, opis, viewport, odwołania do CSS i ikon), które wpływają na poprawne wyświetlanie, responsywność i widoczność strony w wyszukiwarkach. - Elementy blokowe (np.
<div>,<p>, nagłówki) tworzą układ w pionie, zajmując całą szerokość, a elementy liniowe (np.<span>,<strong>,<a>) mieszczą się w linii tekstu i służą do wyróżniania treści. - Zrozumienie różnicy między elementami blokowymi i liniowymi jest kluczowe dla poprawnego budowania układu strony i późniejszego stylowania za pomocą CSS.
- Znajomość podstaw HTML i CSS wystarcza, by stworzyć większość prostych stron: wizytówki, blogi, landing page’e i strony informacyjne, bez konieczności użycia JavaScriptu.
