Prosta strona internetowa nie wymaga od razu frameworka ani zaawansowanej wiedzy programistycznej. Wystarczy edytor kodu, plik index.html i przeglądarka, a potem można stopniowo dodać style CSS, responsywność oraz interakcje w JavaScript. Pokażę, jak utworzyć stronę HTML od podstaw, jak ją uruchomić, uporządkować i przygotować do publikacji.

Przygotuj narzędzia i pierwszy folder projektu

Do rozpoczęcia pracy wystarczy edytor tekstu, ale zwykły Notatnik szybko przestaje być wygodny. Ja wybieram edytor przeznaczony do kodowania, ponieważ podświetlanie składni, automatyczne zamykanie znaczników i skróty Emmet ograniczają liczbę banalnych pomyłek.

Utwórz nowy folder, na przykład moja-strona, a w nim plik index.html. Nazwa ma znaczenie, ponieważ wiele serwerów traktuje ten plik jako stronę główną witryny. Do tego możesz od razu dodać plik style.css oraz folder images na grafiki.

• index.html przechowuje strukturę strony,
• style.css opisuje kolory, odstępy i układ,
• images zawiera zdjęcia oraz ilustracje,
• plik JavaScript, na przykład script.js, przyda się dopiero wtedy, gdy dodasz interakcje.

Na tym etapie nie potrzebujesz serwera ani domeny. Lokalna praca kosztuje 0 zł, a efekt możesz od razu sprawdzić w przeglądarce. Publikacja w internecie to osobny etap, który wymaga domeny i hostingu.

Utwórz strukturę dokumentu HTML

HTML nie jest językiem programowania, lecz językiem znaczników. Opisuje, czym jest dany fragment treści, na przykład nagłówkiem, akapitem, listą albo nawigacją. Dzięki temu przeglądarka wie, jak wyświetlić stronę, a wyszukiwarki i czytniki ekranu lepiej rozumieją jej zawartość.

W pliku index.html możesz zacząć od takiego fragmentu:

  

    
Technologie
    
Moja pierwsza strona
    
To krótki opis projektu stworzonego w HTML i CSS.
  

  

    
Czym się zajmuję
    
Tworzę proste rozwiązania internetowe dla małych projektów.
  

  

    
Kontakt
    
Napisz do mnie, jeśli chcesz porozmawiać o współpracy.
  

Element main oznacza główną zawartość dokumentu, a header i section porządkują kolejne części strony. Do pełnego dokumentu dodaj jeszcze deklarację typu dokumentu, kodowanie UTF-8, tytuł strony oraz ustawienie języka polskiego za pomocą atrybutu lang="pl". W edytorach takich jak Visual Studio Code skrót ! i klawisz Tab zwykle generują podstawowy szablon automatycznie.

Nie pomijaj tytułu dokumentu i kodowania znaków. Bez UTF-8 polskie litery mogą wyświetlać się nieprawidłowo, a bez konkretnego tytułu karta przeglądarki będzie mało czytelna.

Najważniejsze znaczniki na początek

Najczęstszy błąd początkujących polega na używaniu znaczników wyłącznie ze względu na ich wygląd. Nagłówka nie wybieraj dlatego, że jest większy, tylko dlatego, że opisuje rangę treści. Struktura ma pierwszeństwo przed dekoracją, bo wygląd później łatwo zmienisz w CSS.

Dodaj CSS, żeby strona była czytelna

Sam HTML tworzy funkcjonalny dokument, ale bez stylów wygląda bardzo surowo. W pliku style.css możesz umieścić prostą bazę, która poprawi typografię, szerokość treści i wygląd sekcji:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #1f2937;
  background: #f3f4f6;
  line-height: 1.6;
}

.container {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
  padding: 48px 0;
}

section {
  margin-top: 32px;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
}

h1,
h2 {
  line-height: 1.2;
}

Aby style zadziałały, połącz arkusz CSS z dokumentem HTML za pomocą elementu link umieszczonego w metadanych strony. Ścieżka musi wskazywać dokładnie nazwę pliku, dlatego literówka w style.css wystarczy, aby cała strona wróciła do domyślnego wyglądu.

Ja zwykle zaczynam od prostego układu i dopiero później dodaję kolory, cienie oraz animacje. Efektowny wygląd nie naprawi nieczytelnej treści, a nadmiar ozdobników często pogarsza szybkość działania i dostępność.

HTML, CSS i JavaScript pełnią różne funkcje

To rozdzielenie jest praktyczne, a nie tylko teoretyczne. Gdy treść, wygląd i zachowanie są zapisane osobno, łatwiej rozbudować stronę, poprawić błąd albo przygotować wersję mobilną.

Sprawdź stronę na komputerze i telefonie

Zapisz oba pliki, a potem otwórz index.html w przeglądarce. Po każdej zmianie odśwież stronę, najlepiej skrótem Ctrl + R. Jeżeli widzisz surowy tekst zamiast strony, najczęściej plik został zapisany jako index.html.txt albo edytor potraktował go jak zwykły dokument tekstowy.

Testuj nie tylko wygląd na dużym monitorze. W narzędziach deweloperskich przeglądarki możesz włączyć tryb urządzenia mobilnego i sprawdzić szerokości typowe dla telefonów. Responsywność oznacza dopasowanie układu do różnych ekranów, a nie tylko zmniejszenie całej strony.

Przed publikacją sprawdź kilka podstawowych rzeczy:

• czy tekst nie wychodzi poza ekran telefonu,
• czy przyciski i linki są łatwe do kliknięcia,
• czy obrazy mają opisowy atrybut alt,
• czy kontrast tekstu względem tła jest wystarczający,
• czy nagłówki tworzą logiczną hierarchię,
• czy strona działa po wyłączeniu JavaScriptu, jeśli nie jest on niezbędny.

Na tym etapie przydaje się walidacja HTML, czyli sprawdzenie dokumentu pod kątem błędów składni. Nie traktuję jej jak wyroczni, ale pomaga znaleźć niedomknięte elementy, błędne atrybuty i literówki, które w większym projekcie potrafią długo pozostać niezauważone.

Opublikuj stronę i unikaj typowych błędów

Strona otwierana z dysku działa tylko na Twoim komputerze. Aby udostępnić ją innym, potrzebujesz hostingu, domeny oraz sposobu przesłania plików na serwer, najczęściej przez panel usługodawcy albo klienta FTP. Przy prostej stronie wizytówce wystarczą zwykle pliki HTML, CSS i obrazy, bez bazy danych.

Przed wysłaniem projektu zmniejsz duże zdjęcia i używaj nowoczesnych formatów, takich jak WebP, jeśli hosting i narzędzia na to pozwalają. Grafika ważąca kilka megabajtów może spowolnić stronę bardziej niż kilkadziesiąt dodatkowych linii CSS.

Przeczytaj również: VBA co to? Poznaj język automatyzacji Excela i Office

Błędy, które najczęściej zatrzymują początkujących

• Nieprawidłowe rozszerzenie pliku - zapisanie dokumentu jako TXT sprawia, że przeglądarka nie interpretuje go jak HTML.
• Brak cudzysłowów przy atrybutach - zapisuj na przykład class="container", a nie class=container.
• Zła ścieżka do CSS lub obrazu - nazwa folderu i pliku musi zgadzać się co do każdego znaku.
• Pomijanie tekstu alternatywnego - obraz bez alt jest mniej dostępny i trudniejszy do zrozumienia bez grafiki.
• Budowanie layoutu spacjami - do układu używaj CSS, a nie wielu spacji, pustych akapitów i przypadkowych podziałów wiersza.

Jeśli strona ma formularz, logowanie, płatności albo panel użytkownika, sam HTML i CSS nie wystarczą. Potrzebny będzie JavaScript oraz część serwerowa, która bezpiecznie obsłuży dane. Prosta strona statyczna jest świetnym początkiem, ale nie udaje aplikacji internetowej.

Od pierwszego pliku do własnego projektu

Najlepszy sposób nauki to mały, zamknięty projekt. Zamiast kopiować rozbudowany szablon, zbuduj stronę o sobie, portfolio albo prostą wizytówkę usługi i samodzielnie dodaj trzy sekcje, obraz, listę oraz odnośnik.

Gdy podstawy zaczną być naturalne, rozwiń projekt o formularz kontaktowy, wersję mobilną i publikację na hostingu. Największy postęp daje regularne poprawianie własnego kodu, bo wtedy od razu widzisz zależność między strukturą dokumentu a efektem w przeglądarce.

Nie musisz znać całego HTML przed napisaniem pierwszej strony. Wystarczy opanować kilka semantycznych elementów, nauczyć się czytać błędy i konsekwentnie oddzielać treść od wyglądu. To solidna baza do dalszej nauki CSS, JavaScriptu i tworzenia bardziej zaawansowanych serwisów.