Aby pisać strony w HTML, należy poznać podstawowe zasady tego języka, który służy do tworzenia struktury i treści stron internetowych. HTML (HyperText Markup Language) opiera się na znacznikach (tagach), pozwalających opisać zarówno podstawową konstrukcję dokumentu, jak i konkretne elementy strony, takie jak nagłówki, akapity, obrazy, linki czy formularze.
Podstawowa struktura dokumentu HTML
Każda strona HTML zaczyna się od deklaracji typu dokumentu (<!DOCTYPE html>), następnie opisuje zawartość w znacznikach <html>, a jej główne sekcje to <head> (informacje o stronie, np. tytuł, meta dane, osadzanie stylów, skryptów) oraz <body> (wszystko, co widzi użytkownik – treść strony).
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykładowa Strona</title>
</head>
<body>
<h1>Witamy na mojej stronie!</h1>
<p>To jest pierwszy akapit.</p>
</body>
</html>
Kluczowe znaczniki HTML i ich zastosowania
- Nagłówki (
<h1>do<h6>) – określają tytuły i podtytuły, gdzie<h1>to najważniejszy nagłówek; - Akapit (
<p>) – służy do wyodrębnienia paragrafów tekstu; - Listy – uporządkowane (
<ol>) i nieuporządkowane (<ul>) oraz punkty listy (<li>); - Obrazek (
<img src="ścieżka" alt="opis">) – umożliwia dodanie grafiki; - Link (
<a href="adres">treść</a>) – pozwala tworzyć hiperłącza; - Przyciski i inne elementy formularzy, np.
<input>,<form>,<button>.
Przykład:
<h2>O mnie</h2>
<ul>
<li>Lubię programować</li>
<li>Piszę bloga o technologii</li>
</ul>
<img src="avatar.jpg" alt="Moje zdjęcie">
<a href="kontakt.html">Kontakt</a>
Struktura funkcjonalna strony – nowoczesne sekcje HTML5
Nowoczesne strony korzystają ze znaczników semantycznych, które jasno określają przeznaczenie danej części strony:
<header>– nagłówek strony (np. logo, menu główne);<nav>– nawigacja serwisu (menu);<main>– główna zawartość;<section>– wydzielony dział treści;<article>– samodzielny fragment (np. wpis na blogu);<aside>– treści poboczne, np. boczne panele;<footer>– stopka strony z informacjami kontaktowymi, prawami autorskimi itp.
Przykład:
<body>
<header>
<h1>Nazwa strony</h1>
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="uslugi.html">Usługi</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Ostatnie aktualności</h2>
<p>Najnowsze informacje z firmy...</p>
</article>
<section>
<h2>Opinie klientów</h2>
<p>„Świetna współpraca!”</p>
</section>
</main>
<aside>
<h3>Reklama</h3>
<p>Tu może być Twoja reklama.</p>
</aside>
<footer>
<p>© 2025 Moja Firma</p>
</footer>
</body>
Dobre praktyki przy pisaniu stron HTML
- Zawsze używaj poprawnej hierarchii znaczników (np. jeden
<h1>na stronę); - Uzupełniaj atrybuty
altprzy obrazkach – ważne dla SEO i dostępności; - Dbaj o semantykę: używaj sekcji HTML5, ułatwia to pozycjonowanie i nawigację czytnikom ekranu;
- Stosuj polskie znaki w atrybucie
lang="pl", a znakowanie polskich liter pozwala na prawidłowe wyświetlanie w przeglądarkach; - Komentuj kod tam, gdzie to konieczne:
<!-- To jest komentarz -->; - Testuj stronę w różnych przeglądarkach.
Stylizacja stron – podstawowe wprowadzenie do CSS
Sam HTML odpowiada za strukturę i treść. Za wygląd odpowiadają arkusze stylów (CSS). Style zwykle dodajemy w sekcji <head>, wykorzystując znacznik <style>, lub podpinając zewnętrzny plik .css.
Przykład prostego stylu w tym samym pliku:
<head>
...
<style>
body { font-family: Arial, sans-serif; }
h1 { color: navy; }
img { max-width: 300px; }
</style>
</head>
Narzędzia przydatne podczas pracy
- Do edytowania kodu HTML wystarczy prosty edytor tekstu (Notepad++, VS Code, Sublime);
- Przeglądarki internetowe interpretują i wyświetlają kod HTML. Wystarczy dwukrotnie kliknąć plik HTML, by zobaczyć efekt.
Prosty, kompletny projekt przykładowej strony osobistej
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Strona osobista Anny</title>
<style>
body { background: #f5f5f5; color: #333; font-family: Arial, sans-serif; }
header, footer { background: #4682b4; color: white; text-align: center; padding: 1em; }
main { margin: 2em; background: white; padding: 2em; border-radius: 8px; }
nav ul { list-style: none; padding: 0; }
nav li { display: inline; margin: 0 1em; }
aside { background: #eee; padding: 1em; margin-top: 2em; border-radius: 6px; }
</style>
</head>
<body>
<header>
<h1>Anna Nowak</h1>
<nav>
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Projekty</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<h2>O mnie</h2>
<p>Cześć! Jestem początkującą programistką webową.</p>
<img src="anna.jpg" alt="Anna Nowak">
</main>
<aside>
<h3>Aktualności</h3>
<p>Nowy wpis na blogu: „Nauka HTML od podstaw”</p>
</aside>
<footer>
<p>© 2025 Anna Nowak</p>
</footer>
</body>
</html>
Dzięki powyższym informacjom i przykładom możesz samodzielnie stworzyć prostą, a następnie coraz bardziej rozbudowaną stronę internetową w HTML. W miarę postępów warto zapoznawać się z zaawansowanymi tematami, takimi jak formularze, osadzanie multimediów czy integracja z JavaScript i CSS, co pozwala budować dynamiczne, nowoczesne serwisy www.
