Internet Zona O internecie, w internecie

Aby zrobić prostą stronę internetową w HTML, potrzebujesz jedynie przeglądarki, edytora tekstu i kilku plików w jednym folderze; reszta to kwestia wpisania odpowiedniego kodu krok po kroku. Ten poradnik przeprowadzi Cię przez cały proces: od pomysłu, przez stworzenie pliku index.html i arkusza styles.css, aż po uruchomienie strony w przeglądarce.

Co będzie Ci potrzebne?

Treść

Zanim zaczniesz pisać kod, przygotuj podstawowe narzędzia:

  • komputer z przeglądarką internetową – np. Chrome, Firefox, Edge;
  • edytor tekstu / kodu – wystarczy Notatnik, ale wygodniej korzystać z Notepad++, Visual Studio Code czy Sublime Text;
  • podstawowa znajomość obsługi folderów i plików – tworzenie, zapisywanie i zmiana nazw.

Wszystkie popularne poradniki tworzenia stron w HTML zaczynają od wyboru edytora oraz przygotowania folderu projektu.

Krok 1 – zaplanuj prostą stronę

Zanim cokolwiek napiszesz, odpowiedz sobie na kilka pytań:

  • cel strony – np. wizytówka, blog, portfolio;
  • sekcje – nagłówek, menu, główna treść, stopka;
  • elementy na stronie – w tym:
  • tekst (opisy, akapity),
  • nagłówki,
  • lista usług lub zalet,
  • zdjęcia lub logo,
  • linki (np. do mediów społecznościowych).

Najpierw zaplanuj strukturę i zawartość, a dopiero potem pisz kod – prosty szkic (góra strony, menu, treść, stopka) znacząco ułatwia pracę.

Krok 2 – utwórz folder projektu i podstawowe pliki

Znajdź miejsce na dysku (np. w „Dokumentach”) i wykonaj te kroki:

  1. Stwórz główny folder, np. moja_strona.
  2. W środku utwórz:
  • plik index.html – będzie to główna strona Twojej witryny,
  • podfolder css – w nim powstanie arkusz stylów,
  • podfolder images – na przyszłe obrazki (opcjonalnie, ale warto).
  1. W folderze css utwórz plik styles.css.

Taki porządek (osobno HTML, osobno CSS, osobno grafiki) to standard w projektach webowych i dobry nawyk od pierwszego dnia.

Krok 3 – szkielet dokumentu HTML w pliku index.html

Otwórz plik index.html w wybranym edytorze i zacznij od tzw. szkieletu HTML5. Wpisz:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona internetowa</title>
<meta name="description" content="Prosta strona internetowa napisana w HTML i CSS.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Tutaj wstawisz treść strony -->
</body>
</html>

Wyjaśnienie najważniejszych elementów:

  • <!DOCTYPE html> – informuje przeglądarkę, że dokument jest w standardzie HTML5;
  • <html lang="pl"> – początek dokumentu; atrybut lang="pl" oznacza język polski;
  • <head> – zawiera informacje techniczne (tytuł, opis, podłączenie CSS);
  • <meta charset="UTF-8"> – ustawia kodowanie znaków, dzięki czemu polskie litery wyświetlają się poprawnie;
  • <title> – tekst widoczny na karcie przeglądarki;
  • <link rel="stylesheet" href="css/styles.css"> – podłącza arkusz stylów CSS z katalogu css;
  • <body> – wszystko, co widzi użytkownik (treść strony).

To prosty, sprawdzony szkielet startowy – zobaczysz go w większości rzetelnych poradników.

Krok 4 – dodanie podstawowych elementów strony w HTML

Teraz wypełnimy sekcję <body> treścią. Poniżej przykładowa prosta struktura wizytówki:

<body>
<header>
<h1>Moja pierwsza strona internetowa</h1>
<p>Witaj na mojej pierwszej stronie stworzonej w HTML i CSS!</p>
</header>

<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>

<main>
<section id="o-mnie">
<h2>O mnie</h2>
<p>Nazywam się Jan Nowak i uczę się tworzyć strony internetowe.</p>
</section>

<section id="oferta">
<h2>Co znajdziesz na tej stronie?</h2>
<ul>
<li>Podstawowe informacje o HTML</li>
<li>Przykładowe fragmenty kodu</li>
<li>Linki do przydatnych materiałów</li>
</ul>
</section>

<section id="kontakt">
<h2>Kontakt</h2>
<p>Możesz się ze mną skontaktować, wysyłając wiadomość na adres:
<a href="mailto:jan.nowak@example.com">jan.nowak@example.com</a>
</p>
</section>
</main>

<footer>
<p>&copy; 2026 Moja pierwsza strona internetowa</p>
</footer>
</body>

Co tu się dzieje (w skrócie):

  • Nagłówki – <h1> i <h2> oznaczają tytuły sekcji; h1 to główny tytuł strony, h2 to podtytuły;
  • Akapity – <p> to zwykły tekst;
  • Listy – typy list:
  • ul – lista wypunktowana;
  • li – pojedynczy punkt listy.
  • Linki – <a href="..."> kierują do sekcji na stronie (np. #o-mnie) lub zewnętrznych adresów, w tym e‑maili (mailto:);
  • Strukturalne znaczniki HTML5 – rola poszczególnych sekcji:
  • <header> – górna część strony (tytuł, logo);
  • <nav> – nawigacja (menu);
  • <main> – główna treść;
  • <section> – logiczne segmenty treści;
  • <footer> – stopka (np. prawa autorskie).

Takie uporządkowanie treści – nagłówek, menu, sekcje, stopka – jest standardem nawet w najprostszych projektach.

Krok 5 – dodanie stylów w pliku styles.css

Strona działa już jako prosty dokument HTML, ale wygląda bardzo surowo. Aby dodać kolory, czcionki i prosty układ, użyjemy CSS. Otwórz plik css/styles.css i wpisz np.:

/* Ustawienia ogólne dla całej strony */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}

/* Kontener główny – ogranicza szerokość treści */
main, header, nav, footer {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

/* Nagłówek */
header {
background-color: #0066cc;
color: #fff;
text-align: center;
}

/* Nawigacja (menu) */
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #004999;
text-align: center;
}

nav li {
display: inline-block;
margin: 0 10px;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

/* Linki w treści */
a {
color: #0066cc;
}

a:hover {
text-decoration: underline;
}

/* Sekcje */
section {
background-color: #fff;
margin-bottom: 20px;
padding: 20px;
border-radius: 4px;
}

/* Stopka */
footer {
text-align: center;
font-size: 0.9em;
color: #777;
}

To zestaw podstawowych stylów: kolor tła, czytelna czcionka, wyśrodkowany nagłówek i proste poziome menu – idealny na start nauki CSS.

Krok 6 – uruchomienie strony w przeglądarce

Gdy masz już wypełniony plik index.html oraz prawidłowo podłączony plik css/styles.css w sekcji <head>, możesz zobaczyć efekt w przeglądarce:

  1. Zapisz oba pliki w edytorze.
  2. Otwórz folder moja_strona w systemie.
  3. Kliknij dwukrotnie plik index.html, aby uruchomić stronę lokalnie.
  4. Przeglądarka wyświetli to, co wpisałeś w kodzie HTML.

Po każdej zmianie pamiętaj, aby zapisać pliki i odświeżyć stronę (F5), by zobaczyć aktualny efekt.

Krok 7 – dodanie obrazków i prostych dekoracji

Obrazki nadają stronie charakter. Aby dodać obraz, zapisz plik graficzny (np. logo) w folderze images, np. logo.png, a następnie w pliku index.html (np. w nagłówku) wstaw kod:

<header>
<img src="images/logo.png" alt="Logo mojej strony" style="max-width: 150px;">
<h1>Moja pierwsza strona internetowa</h1>
<p>Witaj na mojej pierwszej stronie stworzonej w HTML i CSS!</p>
</header>

Atrybut src wskazuje ścieżkę do pliku, a alt to opis alternatywny – ważny dla dostępności i gdy obrazek się nie załaduje.

Krok 8 – prosta nawigacja między kilkoma stronami (opcjonalnie)

Jeśli chcesz, aby Twoja witryna miała więcej niż jedną stronę, wykonaj te kroki:

  1. Skopiuj index.html i nadaj kopii nazwę, np. kontakt.html.
  2. Zmień treść w nowym pliku (sekcje, nagłówki).
  3. W menu (<nav>) użyj linków do plików:

<nav>
<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>

Wszystkie pliki HTML powinny znajdować się w tym samym folderze projektu, aby linki względne (np. index.html, kontakt.html) działały poprawnie.

Krok 9 – podstawy publikacji strony w internecie (w skrócie)

Do tej pory strona działa tylko lokalnie na Twoim komputerze. Aby była dostępna w internecie, potrzebujesz:

  • domeny – adresu strony (np. mojastrona.pl);
  • hostingu – serwera, na którym będą przechowywane pliki strony;
  • programu FTP (np. FileZilla) lub panelu w hostingu – do wgrywania plików na serwer.

Typowy proces publikacji wygląda tak:

  1. Rejestracja domeny i zakup hostingu.
  2. Zalogowanie do panelu hostingu lub połączenie przez FTP (np. FileZilla).
  3. Przesłanie plików z folderu moja_strona (w tym index.html, folderu css i images) do głównego katalogu na serwerze.
  4. Sprawdzenie w przeglądarce, czy domena wyświetla Twoją stronę.

Ten etap jest dodatkowy – do nauki samego HTML i CSS w zupełności wystarczy praca lokalna.

Co możesz zrobić dalej?

Gdy masz już pierwszą działającą stronę, rozważ kolejne kroki:

  • rozbudowa struktury HTML – o kolejne sekcje, np. <article>, <aside>, <figure>;
  • zaawansowane style CSS – układ w kolumnach, responsywność (dopasowanie do telefonu);
  • podstawy JavaScript – prosta interaktywność (efekty, przełączanie menu);
  • semantyka i dostępność – właściwe znaczniki, kontrast, teksty alternatywne, logiczna kolejność nagłówków.

Polskie poradniki krok po kroku zwykle zachęcają, aby po stworzeniu pierwszej prostej strony ćwiczyć przez modyfikowanie jej wyglądu i struktury, zamiast od razu zaczynać od skomplikowanych projektów.