Aby stworzyć własną stronę internetową w HTML krok po kroku, należy przejść przez kilka kluczowych etapów: od wyboru narzędzi, przez napisanie kodu, po zastosowanie podstawowych stylów. Poniżej znajdziesz szczegółowy poradnik opisujący cały proces oraz praktyczne przykłady zastosowań.
Wybór narzędzi
Do napisania strony w HTML wystarczy prosty edytor tekstowy, np. Notatnik, choć znacznie wygodniej korzystać z edytorów takich jak Notepad++, Sublime Text albo Visual Studio Code. Pozwalają one na łatwiejsze zarządzanie plikami i oferują kolorowanie składni, co ułatwia pracę.
Struktura projektu i tworzenie plików
Najlepiej utworzyć nowy folder, w którym będą znajdować się wszystkie pliki twojej strony – na początek to:
- index.html – plik główny z kodem HTML strony;
- style.css – opcjonalny, oddzielny plik ze stylami CSS, które nadadzą stronie wyglądu.
Szkielet strony HTML
Każda strona HTML zaczyna się od podstawowego szkieletu:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Treść strony pojawi się tutaj -->
</body>
</html>
Wyjaśnienie elementów:
- <!DOCTYPE html> – informuje przeglądarkę, że używamy HTML5;
- <html lang=”pl”> – początek struktury, atrybut „lang” określa język strony;
- <head> – sekcja nagłówkowa, tu podajemy m.in. kodowanie znaków, tytuł strony i link do stylów CSS;
- <body> – tutaj znajduje się cała widoczna treść strony.
Dodawanie treści – podstawowe znaczniki HTML
Najczęściej używane znaczniki to:
- Nagłówki –
<h1>Nagłówek główny</h1>
<h2>Podtytuł</h2> - Akapity –
<p>To jest przykładowy akapit tekstu.</p> - Listy –
Lista nieuporządkowana:
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
</ul>
Lista uporządkowana:
<ol>
<li>Pierwszy krok</li>
<li>Drugi krok</li>
</ol>
- Obrazy –
<img src="obrazek.jpg" alt="Opis alternatywny"> - Linki –
<a href="https://www.przyklad.pl">Kliknij tutaj</a>
Tworzenie prostego układu strony
Przykład rozbudowanej strony głównej:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykładowa strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Moja Przykładowa Strona</h1>
<nav>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Witamy!</h2>
<p>To jest przykładowy tekst prezentujący podstawowe elementy HTML.</p>
</section>
<section>
<h2>Nasza oferta</h2>
<ul>
<li>Strony internetowe</li>
<li>Aplikacje webowe</li>
<li>Szkolenia z HTML</li>
</ul>
</section>
<section>
<h2>Kontakt</h2>
<p>Napisz do nas: <a href="mailto:[email protected]">[email protected]</a></p>
</section>
</main>
<footer>
© 2025 Moja Strona Internetowa
</footer>
</body>
</html>
Dodawanie stylów CSS
Aby poprawić wygląd strony, warto zastosować CSS. W pliku style.css możesz dodać np.:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
margin: 20px;
padding: 20px;
background: white;
border-radius: 8px;
}
Teraz po odświeżeniu strony zobaczysz bardziej estetyczny układ i wyraźniejsze bloki.
Zastosowania – czego można się nauczyć dalej?
Znając już podstawy tworzenia strony internetowej w HTML i CSS, możesz:
- Tworzyć wizytówki firmowe i portfolio online – prosta prezentacja danych kontaktowych, usług, wykształcenia;
- Budować blogi lub strony informacyjne – dodając kolejne sekcje, wpisy, galerie zdjęć;
- Projektować landing page pod usługi lub produkty –
- Realizować projekty edukacyjne – ćwiczenie oznaczania różnych struktur HTML przygotuje do nauki bardziej zaawansowanych technologii (np. JavaScript, systemy CMS, frameworki frontendowe).
Najczęstsze błędy początkujących
- Brak zamknięcia znaczników HTML,
- Niezgodność literówek w nazwach plików (np. index.html vs. Index.html),
- Zapominanie o dołączeniu pliku CSS lub błąd w ścieżce,
- Niezadeklarowanie kodowania znaków (brak
<meta charset="UTF-8">).
Tworzenie własnej strony HTML to świetny pierwszy krok do zgłębiania tworzenia stron WWW. Nawet proste projekty pozwolą zrozumieć podstawowe zasady działania internetu i przygotują grunt pod rozwój w innych technologiach.
