Aby stworzyć prostą, estetyczną i funkcjonalną stronę internetową, konieczna jest znajomość HTML i CSS. Poniżej znajdziesz przewodnik od podstaw, opisujący praktyczne zastosowania tych technologii – z przykładami kodu oraz wyjaśnieniem najistotniejszych aspektów.
Czym jest HTML i CSS?
- HTML (HyperText Markup Language) to język służący do strukturyzowania treści na stronie – pozwala na wstawianie nagłówków, akapitów, obrazów, linków, list, tabel i formularzy;
- CSS (Cascading Style Sheets) służy do nadawania wyglądu elementom HTML – określa kolory, wielkości czcionek, marginesy, układ, odstępy i wiele więcej.
Struktura dokumentu HTML
Oto przykładowa podstawowa struktura strony:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mój pierwszy poradnik</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Poradnik: HTML i CSS od podstaw</h1>
</header>
<nav>
<ul>
<li><a href="#sekcja1">Podstawy HTML</a></li>
<li><a href="#sekcja2">Podstawy CSS</a></li>
<li><a href="#sekcja3">Przykładowe zastosowanie</a></li>
</ul>
</nav>
<section id="sekcja1">
<h2>Podstawy HTML</h2>
<p>HTML pozwala strukturyzować treść...</p>
</section>
<section id="sekcja2">
<h2>Podstawy CSS</h2>
<p>CSS umożliwia stylizację strony...</p>
</section>
<section id="sekcja3">
<h2>Przykład zastosowania</h2>
<p>Poniżej znajdziesz gotowy przykład.</p>
</section>
<footer>
<p>Copyright © 2025</p>
</footer>
</body>
</html>
Podstawy CSS – jak nadać styl?
Gdzie umieścić kod CSS?
- W osobnym pliku (np.
style.css; polecane w praktyce):
<link rel="stylesheet" href="style.css">
- W sekcji
<style>w pliku HTML:
<style>
p { color: blue; }
</style>
- Bezpośrednio w atrybucie
style– stosować raczej wyjątkowo:
<p style="color: blue;">Przykładowy tekst</p>
Składnia CSS
selektor { właściwość: wartość; /* kolejne właściwości: wartości */ }Przykład:
p { color: blue; font-size: 16px; }Powyżej każdy akapit na stronie będzie miał niebieski kolor tekstu i rozmiar 16 pikseli.
Praktyczne przykłady i zastosowania
Stylowanie nagłówka i stopki
header { background-color: #4B79A1; color: white; padding: 20px; text-align: center; }
footer { background-color: #243B55; color: #bbb; padding: 10px; text-align: center; }
Menu nawigacyjne w poziomie
nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; background: #eee; }
nav ul li { margin: 0 10px; }
nav ul li a { text-decoration: none; color: #4B79A1; font-weight: bold; transition: color 0.2s; }
nav ul li a:hover { color: #243B55; }
Stylizacja sekcji i akapitów
section { padding: 30px 10%; margin: 20px 0; background: #f8f8f8; border-radius: 8px; }
section h2 { color: #4B79A1; }
/* Dodaj tło do wybranej sekcji */
#sekcja3 { background: #cbe6fa; }
p { line-height: 1.6; }
Przykład kompletnej strony HTML i CSS
Plik HTML (index.html) –
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład strony HTML i CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Moja nowoczesna strona</h1>
</header>
<nav>
<ul>
<li><a href="#onas">O nas</a></li>
<li><a href="#oferta">Oferta</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<section id="onas">
<h2>O nas</h2>
<p>Tworzymy nowoczesne strony internetowe dla każdego.</p>
</section>
<section id="oferta">
<h2>Oferta</h2>
<ul>
<li>Projektowanie stron</li>
<li>Optymalizacja dla wyszukiwarek</li>
<li>Wsparcie techniczne</li>
</ul>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<p>email: [email protected]</p>
</section>
<footer>
<p>© 2025 Twoja Firma</p>
</footer>
</body>
</html>
Plik CSS (style.css) –
body { font-family: Arial, Helvetica, sans-serif; background-color: #f1f6fa; margin: 0; padding: 0; }
header, footer { background-color: #293b4a; color: white; text-align: center; padding: 20px 0; }
nav ul { display: flex; justify-content: center; list-style: none; background-color: #3b5b7c; margin: 0; padding: 10px 0; }
nav ul li { margin: 0 15px; }
nav ul li a { color: #fff; text-decoration: none; font-weight: bold; }
nav ul li a:hover { text-decoration: underline; color: #ffcc00; }
section { background: #ffffff; margin: 30px 10%; padding: 30px; border-radius: 10px; box-shadow: 0 2px 6px rgba(60, 80, 100, 0.1); }
h2 { color: #3b5b7c; }
footer { font-size: 0.9em; }
Typowe zastosowania HTML i CSS
- Budowa layoutów – nagłówek, menu, treść, stopka;
- Responsywność – połączenie z media queries;
- Styling interaktywnych elementów – przyciski, linki, formularze;
- Optymalizacja UX/UI – atrakcyjne kolory, marginesy, animacje.
Wskazówki praktyczne
- Wykorzystuj semantyczne znaczniki (
<header>,<nav>,<section>,<footer>) – by zwiększyć dostępność i czytelność kodu; - Stosuj zewnętrzny plik CSS przy większych projektach;
- Regularnie testuj efekty w przeglądarce;
- Nauka przez praktykę – kopiuj rozwiązania, modyfikuj, eksperymentuj.
Tworząc strony za pomocą HTML i CSS, masz pełną kontrolę nad ich strukturą oraz wyglądem. To solidna podstawa do rozpoczęcia przygody z web developmentem oraz baza do nauki kolejnych technologii frontendowych.
