Aby stworzyć stronę internetową w HTML i CSS, należy zaplanować układ oraz funkcje serwisu, a następnie przygotować pliki kodu: HTML odpowiada za strukturę i treść, CSS za wygląd. Poniżej znajdziesz kompleksowy poradnik krok po kroku wraz z praktycznymi przykładami i omówieniem najważniejszych zagadnień.
Czym jest HTML i CSS?
- HTML (HyperText Markup Language) – definiuje strukturę strony, czyli nagłówki, akapity, obrazy, linki, menu itp.;
- CSS (Cascading Style Sheets) – odpowiada za wizualny wygląd strony, czyli kolory, rozmiary czcionek, rozmieszczenie elementów, grafiki tła i inne aspekty prezentacji.
Przygotowanie plików
Zacznij od utworzenia nowego folderu na dysku, np. moja-strona. Wewnątrz niego utwórz dwa pliki:
- index.html – główny plik ze strukturą strony;
- style.css – plik z regułami stylów CSS.
Struktura pliku HTML
Oto bazowy szablon pliku index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja pierwsza strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Witamy na mojej stronie!</h1>
<nav>
<ul>
<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>
</header>
<main>
<section id="o-mnie">
<h2>O mnie</h2>
<p>Jestem początkującym twórcą stron internetowych. Uczę się HTML i CSS.</p>
</section>
<section id="oferta">
<h2>Oferta</h2>
<ul>
<li>Projektowanie stron WWW</li>
<li>Opieka nad stroną</li>
<li>Pozycjonowanie w wyszukiwarkach</li>
</ul>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<p>Możesz napisać na adres: <a href="mailto:[email protected]">[email protected]</a></p>
</section>
</main>
<footer>
<p>© 2025 Moja Strona</p>
</footer>
</body>
</html>
Wyjaśnienie:
- <!DOCTYPE html> – deklaruje standard HTML5;
- sekcja <head> – zawiera metadane, tytuł strony i połączenie z arkuszem stylów CSS;
- w <body> – znajdują się główne części: nagłówek, nawigacja (menu), główna treść podzielona sekcjami oraz stopka.
Tworzenie stylów w pliku CSS
Przykładowa zawartość pliku style.css:
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f0f0f0;
color: #333;
}
header {
background-color: #004080;
color: #fff;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
main {
max-width: 900px;
margin: 30px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
}
footer {
text-align: center;
padding: 15px;
background-color: #002050;
color: #eee;
position: fixed;
bottom: 0;
width: 100%;
}
Opis wybranych reguł:
- ustawienia całej strony (
body), - kolorowy baner nagłówka (
header), - menu w poziomie (
nav ul,nav ul li), - wygląd poszczególnych sekcji (
main,footer), - responsywność dzięki szerokościom i marginesom.
Praktyczne porady i zastosowania
- stosuj podział na sekcje – dzięki tagom
<header>,<main>,<footer>,<section>strona jest czytelna i semantyczna; - menu warto budować jako listę – aby łatwo je stylizować i później dostosowywać do wyświetlania na różnych urządzeniach;
- zamiast wszystko w jednym pliku – stosuj oddzielne pliki na kod HTML, CSS oraz ewentualnie JavaScript;
- rozbuduj stronę o grafiki (tag
<img>), formularze kontaktowe (<form>), własne style na przyciski czy interaktywne animacje.
Rozszerzenia i kolejne kroki
- wprowadź media queries w CSS – dla lepszej responsywności na urządzeniach mobilnych;
- dodaj faviconę oraz metadane Open Graph do osadzania w social media;
- z czasem warto nauczyć się JavaScript – do interaktywnych funkcji;
- regularnie sprawdzaj stronę pod kątem zgodności ze standardami W3C.
Podsumowanie przykładowych zastosowań stron HTML+CSS
- portfolio lub wizytówka internetowa,
- blog osobisty,
- strona kontaktowa lokalnej firmy,
- galeria prac graficznych (z wykorzystaniem
<figure>i<img>), - prosty sklep prezentacyjny (bez płatności).
Stworzenie własnej strony od podstaw umożliwia pełną kontrolę nad jej wyglądem oraz przygotowanie solidnej podstawy do dalszej nauki i rozwoju web developmentu.
