Jak zrobić stronę internetową w Notepad++

Gotowy kod strony HTML do skopiowania – pierwsza strona w 5 minut

Skopiuj jeden z trzech szablonów poniżej, wklej go do Notatnika, zapisz plik jako index.html z kodowaniem UTF-8, a potem kliknij go dwukrotnie. Przeglądarka wyświetli działającą stronę internetową. To cała droga od pustego pliku do pierwszego efektu.

Który szablon wybrać? Jeśli robisz zadanie na informatykę i liczy się sam kod HTML – weź szablon pierwszy. Jeśli chcesz zobaczyć kolory i układ – drugi. Jeśli budujesz prostą wizytówkę z menu i sekcjami – trzeci. Wszystkie trzy zawierają dwie linijki, które większość poradników pomija: deklarację języka lang="pl" oraz meta viewport odpowiadający za poprawne skalowanie na telefonie.

Szablon 1 – minimalna strona HTML w 12 linijkach kodu

To najkrótszy kompletny dokument HTML, który przechodzi walidację. Nie ma tu nic zbędnego, więc dobrze widać samą strukturę strony.

<!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>
</head>
<body>
  <h1>Witaj na mojej stronie</h1>
  <p>To jest mój pierwszy akapit napisany w HTML-u. Zażółć gęślą jaźń.</p>
</body>
</html>

Zdanie „Zażółć gęślą jaźń” nie jest przypadkowe. Zawiera wszystkie polskie znaki diakrytyczne, więc od razu sprawdzisz, czy kodowanie pliku zostało ustawione poprawnie.

Szablon 2 – prosta strona internetowa z kolorami i stylami CSS

Ten szablon ma style zapisane wewnątrz tego samego pliku, w sekcji <style>. Dla pierwszej strony to lepszy wybór niż osobny plik style.css, bo nie da się pomylić ścieżki do arkusza stylów – a to najczęstsza przyczyna sytuacji „u mnie nie działają żadne kolory”.

<!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 z CSS</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 24px;
      color: #222222;
      background: #fafafa;
      line-height: 1.6;
    }
    h1 { color: #1a5fb4; }
    .karta {
      background: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 8px;
      padding: 16px;
    }
  </style>
</head>
<body>
  <h1>Witaj na mojej stronie</h1>
  <p>Ta strona ma już własną typografię, kolory i szerokość treści.</p>
  <div class="karta">
    <h2>Sekcja w ramce</h2>
    <p>Klasa "karta" nadaje temu blokowi tło i obramowanie.</p>
  </div>
</body>
</html>

Właściwość max-width razem z margin: 0 auto wyśrodkowuje treść i ogranicza jej szerokość. Bez tego tekst rozciąga się na całą szerokość monitora i staje się nieczytelny – to pierwsza rzecz, którą warto ustawić w każdym projekcie.

Szablon 3 – wizytówka firmowa z menu, sekcjami i stopką

Ten szablon używa znaczników semantycznych HTML5: <header>, <nav>, <main>, <section> i <footer>. Robią dokładnie to samo co zwykłe <div>, ale mówią przeglądarce, czytnikom ekranu i wyszukiwarce, czym jest dany fragment strony.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jan Kowalski - usługi hydrauliczne</title>
  <meta name="description" content="Usługi hydrauliczne w Sochaczewie. Naprawy, montaż, wyceny.">
</head>
<body>
  <header>
    <h1>Jan Kowalski - usługi hydrauliczne</h1>
    <nav>
      <a href="#oferta">Oferta</a> |
      <a href="#kontakt">Kontakt</a>
    </nav>
  </header>

  <main>
    <section id="oferta">
      <h2>Czym się zajmuję</h2>
      <ul>
        <li>Naprawa instalacji wodnych</li>
        <li>Montaż armatury łazienkowej</li>
        <li>Wymiana grzejników</li>
      </ul>
    </section>

    <section id="kontakt">
      <h2>Kontakt</h2>
      <p>Telefon: <a href="tel:+48123456789">123 456 789</a></p>
      <p>E-mail: <a href="mailto:jan@example.pl">jan@example.pl</a></p>
    </section>
  </main>

  <footer>
    <p>© 2026 Jan Kowalski</p>
  </footer>
</body>
</html>

Zwróć uwagę na linki tel: i mailto:. Na telefonie numer staje się klikalny i od razu uruchamia połączenie. To drobiazg, który na stronie usługowej realnie zwiększa liczbę kontaktów.

Notatnik czy Notepad++ – w którym edytorze kodu zacząć pisać HTML?

Systemowy Notatnik wystarczy, gdy piszesz jedną stronę jednorazowo. Notepad++ wybierz wtedy, gdy zamierzasz przy kodzie zostać dłużej niż godzinę. Różnica nie polega na tym, że jeden „lepiej pisze HTML” – plik wynikowy jest identyczny. Chodzi wyłącznie o to, jak szybko zauważysz własny błąd.

Notatnik (Windows) – dostępny od razu, bez instalacji. Nie koloruje składni, więc literówkę w nazwie znacznika zobaczysz dopiero w przeglądarce, gdy strona wygląda dziwnie.
Notepad++ – darmowy edytor na licencji GPL, do pobrania z oficjalnej strony projektu. Koloruje składnię, podświetla parę znaczników po kliknięciu i pokazuje numery linii, co skraca szukanie błędu z minut do sekund.
Visual Studio Code – sensowny dopiero wtedy, gdy masz kilka plików i chcesz podglądu na żywo. Dla jednej strony to nadmiar możliwości.
TextEdit (macOS) – działa, ale domyślnie zapisuje w formacie RTF. Trzeba najpierw wybrać Format → Konwertuj na zwykły tekst, inaczej zamiast strony powstanie dokument tekstowy z widocznymi znacznikami.

Jest jeszcze jedna rzecz, o której warto wiedzieć. Notatnik w Windows 11 dostał karty i przywracanie sesji (Microsoft rozwija tę aplikację od 2023 roku). Wygodne, ale bywa mylące: po ponownym otwarciu widzisz swój kod i zakładasz, że plik jest zapisany. Przywrócona sesja to nie to samo co zapis na dysku. Zanim odświeżysz przeglądarkę, wciśnij Ctrl+S.

Jak utworzyć plik HTML i zapisać go, żeby przeglądarka go otworzyła?

Plik HTML tworzysz przez zapisanie zwykłego dokumentu tekstowego z rozszerzeniem .html – pod warunkiem, że w oknie zapisu zmienisz typ pliku na „Wszystkie pliki”. Bez tej jednej zmiany Notatnik dopisze na końcu .txt i przeglądarka wyświetli kod jako tekst zamiast strony.

W Notatniku wybierz Plik → Zapisz jako.
W polu Zapisz jako typ ustaw Wszystkie pliki (*.*). To jest krok, który decyduje o wszystkim.
W polu Nazwa pliku wpisz index.html – razem z rozszerzeniem.
W polu Kodowanie wybierz UTF-8. Odpowiada za polskie znaki.
Wskaż folder i kliknij Zapisz.

Dlaczego akurat index.html? Bo serwery WWW traktują ten plik jako dokument domyślny katalogu. Po wgraniu strony na hosting wejdzie się na nią samym adresem domeny, bez dopisywania nazwy pliku. Na dysku lokalnym nazwa nie ma znaczenia, ale lepiej od razu przyzwyczaić się do standardu.

Jak sprawdzić, czy zapis się udał, zanim w ogóle otworzysz plik? Ikona pliku powinna zmienić się na ikonę Twojej przeglądarki, a w kolumnie „Typ” w Eksploratorze zobaczysz „Dokument HTML”. Jeśli nadal widzisz „Dokument tekstowy”, rozszerzenie się nie zapisało.

Zanim napiszesz pierwszą linijkę kodu, włącz w Eksploratorze plików zakładkę Widok → Rozszerzenia nazw plików. Windows domyślnie je ukrywa, więc plik strona.html.txt wygląda dokładnie jak strona.html. Jedno kliknięcie eliminuje problem, na którym początkujący potrafią utknąć na godzinę.

Co oznaczają <!DOCTYPE html>, <head> i <body> w strukturze dokumentu HTML?

Deklaracja <!DOCTYPE html> włącza w przeglądarce tryb standardowy renderowania. Sekcja <head> zawiera informacje o dokumencie, których użytkownik nie widzi na stronie. Sekcja <body> zawiera całą widoczną treść. To trzy elementy, bez których żadna strona internetowa nie działa poprawnie.

Warto rozumieć, co dokładnie robi doctype, bo większość opisów zatrzymuje się na „informuje o wersji HTML”. Jak podaje dokumentacja MDN Web Docs, brak deklaracji przełącza przeglądarkę w tryb zgodności (quirks mode), w którym stosuje ona stare, niestandardowe zasady liczenia rozmiarów elementów. Efekt: kod wygląda poprawnie, a układ strony rozjeżdża się bez wyraźnej przyczyny.

Co znajduje się w poszczególnych elementach szkieletu strony HTML:

<html lang="pl"> – korzeń dokumentu. Atrybut lang mówi czytnikom ekranu, jak wymawiać tekst, a przeglądarkom, czy proponować tłumaczenie.
<meta charset="UTF-8"> – deklaruje kodowanie znaków. Bez niego polskie litery zamieniają się w losowe symbole.
<meta name="viewport"> – odpowiada za skalowanie na telefonach. Bez tej linijki strona na smartfonie wyświetla się jak pomniejszona wersja desktopowa.
<title> – tytuł widoczny na karcie przeglądarki i w wynikach wyszukiwania Google.
<body> – wszystko, co użytkownik faktycznie zobaczy: nagłówki, akapity, obrazy, linki.

Kolejność ma znaczenie tylko w jednym miejscu: <meta charset> powinien znaleźć się jak najwyżej w sekcji <head>. Przeglądarka musi wiedzieć, jak interpretować znaki, zanim zacznie czytać resztę dokumentu.

Jak dodać nagłówki, akapity i listy do treści strony internetowej?

Nagłówki tworzysz znacznikami od <h1> do <h6>, akapity znacznikiem <p>, a listy parą <ul> lub <ol> ze znacznikami <li> w środku. Na jednej podstronie stosuj tylko jeden <h1> – to główny temat dokumentu.

Jest jedna rzecz, która zaskakuje niemal każdego przy pierwszej stronie: HTML ignoruje entery i wielokrotne spacje. Możesz w Notatniku rozdzielić tekst pięcioma pustymi liniami, a przeglądarka i tak sklei wszystko w jeden ciąg. Nowy akapit powstaje wyłącznie przez otwarcie kolejnego <p>, a pojedyncze złamanie linii przez <br>.

<h1>Tytuł strony</h1>
<p>Pierwszy akapit tekstu.</p>

<h2>Sekcja o mnie</h2>
<p>Drugi akapit, oddzielony od pierwszego nagłówkiem.</p>

<h3>Czym się zajmuję</h3>
<ul>
  <li>Pierwszy punkt listy</li>
  <li>Drugi punkt listy</li>
</ul>

<ol>
  <li>Krok pierwszy</li>
  <li>Krok drugi</li>
</ol>

Najczęstszy błąd na tym etapie to dobieranie nagłówka według wielkości czcionki. Ktoś chce mniejszy tekst, więc zamiast <h2> wstawia <h4>. Nagłówki budują hierarchię treści, a nie jej wygląd. Rozmiar zmienia się w CSS jedną linijką, a złamana hierarchia utrudnia korzystanie ze strony osobom używającym czytników ekranu.

Jak wstawić obraz i link w kodzie HTML, żeby na pewno zadziałały?

Obraz wstawiasz znacznikiem <img> z atrybutami src (ścieżka do pliku) i alt (opis). Link tworzysz znacznikiem <a> z atrybutem href. Najprostsza i najbezpieczniejsza opcja na start: trzymaj zdjęcia w tym samym folderze co plik HTML i podawaj samą nazwę pliku.

<img src="zdjecie.jpg" alt="Taras z desek kompozytowych przy domu" width="600">

<img src="obrazy/logo.png" alt="Logo firmy" width="200">

<a href="kontakt.html">Przejdź do kontaktu</a>

<a href="https://example.pl" target="_blank" rel="noopener">Otwórz w nowej karcie</a>

Atrybut alt nie jest ozdobnikiem. Odczytują go czytniki ekranu, a wyszukiwarki traktują jako opis treści obrazu. Opisuj to, co faktycznie widać, zamiast wpisywać „obrazek1”. Szerzej o tym, jak takie drobiazgi wpływają na odbiór strony, piszę w tekście o dostosowaniu strony internetowej do potrzeb osób z niepełnosprawnościami.

Dwie praktyczne uwagi, które oszczędzają nerwów. Po pierwsze: zdjęcie prosto z telefonu waży kilka megabajtów i potrafi ładować się kilka sekund – zmniejsz je przed wstawieniem. Po drugie: przy linkach otwieranych w nowej karcie dodawaj rel="noopener". To standardowe zabezpieczenie zalecane w dokumentacji MDN.

Jak otworzyć stronę HTML w przeglądarce i podglądać zmiany na bieżąco?

Kliknij zapisany plik dwukrotnie – otworzy się w domyślnej przeglądarce. Jeśli chcesz konkretnej przeglądarki, przeciągnij plik do jej okna albo kliknij prawym przyciskiem i wybierz „Otwórz za pomocą”. Adres w pasku zacznie się od file:///, co oznacza, że strona działa lokalnie, prosto z dysku.

Praca wygląda potem tak: zapisujesz plik w edytorze (Ctrl+S), przechodzisz do przeglądarki i odświeżasz (F5). Kolejność jest nieprzypadkowa – przeglądarka czyta plik z dysku, więc niezapisana zmiana po prostu dla niej nie istnieje. To wyjaśnia najczęstsze „zmieniłem kod, a nic się nie dzieje”.

Ustaw okna obok siebie – edytor po lewej, przeglądarka po prawej. Klawisz Windows + strzałka dzieli ekran w sekundę.
W Notepad++ użyj menu Uruchom – możesz otworzyć bieżący plik bezpośrednio w Chrome, Firefoksie lub Edge, bez szukania go w folderach.
Gdy zmiany w stylach nie wchodzą, wciśnij Ctrl+F5. To twarde odświeżenie, które pomija pamięć podręczną przeglądarki.

Warto wiedzieć, że tryb file:/// ma ograniczenia. Część mechanizmów – pobieranie danych z zewnętrznych plików czy niektóre czcionki – działa dopiero po wgraniu strony na serwer. Przy zwykłej stronie z tekstem, obrazami i CSS nie odczujesz tego w ogóle.

Strona się nie otwiera lub pokazuje krzaczki? 6 najczęstszych błędów początkujących

Prawie wszystkie problemy z pierwszą stroną HTML sprowadzają się do sześciu przyczyn. Zanim zaczniesz przepisywać kod od nowa, sprawdź je po kolei – w 9 na 10 przypadków winowajca jest na tej liście.

Plik zapisał się jako .html.txt – przeglądarka pokazuje kod jako zwykły tekst. Zapisz ponownie z typem „Wszystkie pliki” albo zmień nazwę pliku w Eksploratorze przy włączonych rozszerzeniach.
Zamiast polskich liter widać krzaczki – brakuje kodowania. Potrzebne są dwie rzeczy naraz: zapis pliku w UTF-8 oraz znacznik <meta charset="UTF-8"> w sekcji head. Sam meta znacznik nie naprawi źle zapisanego pliku.
Obrazek się nie wyświetla – sprawdź literówkę w nazwie, rozszerzenie (.jpg to nie .jpeg) i to, czy plik naprawdę leży tam, gdzie wskazuje ścieżka.
Zmiany nie są widoczne – plik nie został zapisany albo przeglądarka trzyma starą wersję w pamięci. Ctrl+S, potem Ctrl+F5.
Cała strona wygląda jak jeden link albo jeden nagłówek – gdzieś brakuje znacznika zamykającego. Notepad++ podświetla parę znaczników po kliknięciu, co pozwala znaleźć miejsce w kilka sekund.
Kod przeklejony z Worda przestał działać – edytory tekstu zamieniają proste cudzysłowy na typograficzne („ ”), a HTML ich nie rozumie. Przepisz atrybuty ręcznie albo wklejaj kod tylko przez Notatnik.

Jeśli po tej liście strona nadal się nie zachowuje, wklej kod do walidatora W3C. Narzędzie wskaże konkretną linijkę z błędem. Więcej o tym, jak czytać takie raporty i co realnie warto poprawiać, znajdziesz w artykule o walidacji strony internetowej zgodnie ze standardami W3C i WCAG.

Czy ChatGPT napisze za Ciebie kod HTML i jak sprawdzić, czy nie zmyśla?

Tak, modele językowe piszą poprawny kod HTML prostej strony i robią to szybciej niż człowiek. Problemem nie jest składnia – ta zwykle jest bezbłędna. Problemem jest to, że model nie widzi Twojego folderu, więc odwołuje się do plików, których u Ciebie nie ma.

To najczęstszy scenariusz porażki: dostajesz kod z linią <link rel="stylesheet" href="css/style.css"> i odwołaniami do images/hero.jpg, otwierasz stronę, a widzisz goły tekst bez stylów i ikonę zepsutego obrazka. Kod jest poprawny. Po prostu opisuje projekt, którego jeszcze nie zbudowałaś ani nie zbudowałeś.

Co zrobić, żeby generowany kod działał za pierwszym razem:

Poproś o jeden plik – napisz wprost: „cały kod w jednym pliku HTML, style w sekcji style, bez zewnętrznych plików i bibliotek”. Znika cały problem ścieżek.
Zastrzeż brak internetu – inaczej model doda linki do bibliotek z CDN, a strona rozjedzie się przy braku połączenia.
Podaj konkret zamiast opisu ogólnego – „wizytówka hydraulika: nagłówek, trzy usługi w liście, telefon klikalny, stopka” daje lepszy efekt niż „ładna strona firmowa”.
Przy błędzie wklej kod i to, co widzisz – nie opisuj problemu własnymi słowami. Model naprawia znacznie skuteczniej to, co dostał dosłownie.

Zanim uznasz wygenerowany kod za gotowy, przejdź trzy kroki weryfikacji. Otwórz stronę w przeglądarce i sprawdź, czy widać wszystkie elementy. Wciśnij F12 i zajrzyj do konsoli – czerwone komunikaty pokazują brakujące pliki. Na końcu wklej kod do walidatora W3C.

Warto też wiedzieć, czego szukać w kodzie od AI. Modele uczyły się na materiałach z wielu lat, więc czasem wracają przestarzałe znaczniki w rodzaju <center> czy <font>, wycofane wraz z HTML5. Działają jeszcze w przeglądarkach, ale to ślepa uliczka. Jeśli je zobaczysz, poproś o wersję zgodną z HTML5 i CSS.

Jak dodać kolory i własny wygląd do prostej strony HTML?

Za wygląd strony odpowiada CSS, czyli kaskadowe arkusze stylów. Dla pierwszej strony najprościej wpisać reguły w sekcję <style> wewnątrz <head>. Reguła składa się z selektora (co stylujemy) i deklaracji w klamrach (jak ma wyglądać).

<style>
  body { background: #f5f5f5; font-family: Arial, sans-serif; }
  h1 { color: #1a5fb4; font-size: 32px; }
  p { line-height: 1.6; }
  a { color: #b52d2d; text-decoration: none; }
  a:hover { text-decoration: underline; }
</style>

Style można wpisywać na trzy sposoby: bezpośrednio w znaczniku (style="..."), w sekcji <style> albo w osobnym pliku .css. Pierwszy sposób wygląda najprościej i najszybciej się mści – przy dziesięciu podstronach zmiana koloru linków oznacza edycję każdego znacznika osobno. Osobny plik CSS opłaca się od momentu, gdy strona ma więcej niż jedną podstronę. Zasady działania selektorów i kaskadowości rozwijam w przewodniku o tym, czym jest CSS i jak działają kaskadowe arkusze stylów.

Jak opublikować stronę HTML w internecie za darmo?

Statyczna strona HTML to zwykłe pliki, więc do publikacji wystarczy miejsce, które je udostępni. Bezpłatnie zrobisz to na GitHub Pages lub Netlify, otrzymując adres w subdomenie. Własna domena i klasyczny hosting z FTP to opcja płatna, ale dająca pełną kontrolę.

GitHub Pages – wrzucasz pliki do repozytorium i włączasz publikację w ustawieniach. Zgodnie z dokumentacją GitHuba usługa obsługuje wyłącznie strony statyczne, czyli dokładnie taki przypadek jak nasz.
Netlify – pozwala opublikować stronę przez przeciągnięcie folderu na stronę serwisu. Najszybsza droga, gdy nie chcesz zakładać repozytorium.
Klasyczny hosting + FTP – pliki wgrywasz programem w rodzaju FileZilla do katalogu głównego domeny. Wybierasz to, gdy zależy Ci na własnym adresie i skrzynce e-mail w domenie.

Po publikacji uważaj na jedną pułapkę, która na dysku lokalnym nie występuje. Serwery działają zwykle na Linuksie, a ten rozróżnia wielkość liter w nazwach plików. Odwołanie do Logo.PNG przy pliku logo.png na Windowsie zadziała, a na serwerze da błąd 404. Po każdym wgraniu przeklikaj więc stronę i sprawdź, czy wszystkie obrazy się ładują.

Sama publikacja nie oznacza jeszcze widoczności w wyszukiwarce. Nowa strona musi zostać znaleziona i zaindeksowana, a to osobny proces – opisuję go w tekście o tym, jak wypromować stronę internetową i zwiększyć jej widoczność.

Notatnik, kreator AI czy WordPress – czym naprawdę zbudować stronę firmową?

Do strony firmowej ręcznie pisany HTML rzadko się opłaca – nie z powodu jakości kodu, tylko kosztu utrzymania. Każda zmiana ceny, godzin otwarcia czy zdjęcia oznacza edycję pliku i ponowne wgranie go na serwer. Kreatory z AI i systemy CMS istnieją właśnie po to, żeby ten krok zniknął.

Statyczny HTML – sprawdza się przy stronie, która ma być zrobiona raz i nie zmieniać się przez rok. Ładuje się błyskawicznie i nie wymaga aktualizacji zabezpieczeń.
Kreator z generowaniem AI – daje efekt w kilkanaście minut. Ograniczeniem bywa uzależnienie od jednej platformy i utrudniony eksport treści przy przenosinach.
WordPress lub inny CMS – wybór przy blogu, wielu podstronach, formularzach i sklepie. Kosztuje regularne aktualizacje, ale daje pełną kontrolę nad treścią bez dotykania kodu.

Zanim wybierzesz narzędzie, odpowiedz na jedno pytanie: kto i jak często będzie edytował treść. Jeśli odpowiedź brzmi „ja, raz w roku” – statyczny HTML wystarczy. Jeśli „pracownik, co tydzień” – potrzebujesz panelu, a nie edytora kodu. Czym różnią się poszczególne rozwiązania od strony technicznej, wyjaśniam w artykule o tym, czym jest system CMS.

Prosta zasada decyzyjna: jeśli planujesz aktualizować treść częściej niż raz na kwartał, statyczny HTML przestaje się opłacać. Czas spędzony na edycji plików i wgrywaniu ich przez FTP szybko przekroczy koszt zwykłego hostingu z CMS-em.

Warto też oddzielić naukę od projektu komercyjnego. Pierwsza strona w Notatniku jest świetnym ćwiczeniem i realnie uczy, jak działa sieć. Strona, która ma przynosić klientów, wymaga jednak elementów wykraczających poza HTML: analityki, formularza z obsługą zgód, optymalizacji szybkości. Jeśli wolisz oddać to komuś, kto robi takie wdrożenia na co dzień, sprawdź, jak wygląda tworzenie stron internetowych dla firm.

Czego uczyć się po pierwszej stronie HTML – checklista kolejnych kroków

Po pierwszej działającej stronie najsensowniejszy kierunek to CSS, a dopiero potem cokolwiek innego. HTML odpowiada za strukturę i nauczysz się go w kilka wieczorów. Cała reszta wrażenia „prawdziwej strony” pochodzi ze stylów i układu.

Podstawy CSS – selektory, kolory, marginesy, model pudełkowy. Bez modelu pudełkowego każdy odstęp będzie zagadką.
Flexbox i CSS Grid – nowoczesne sposoby układania elementów w kolumny i wiersze, następca układów opartych na tabelach.
Responsywność – media queries i testy na telefonie. Zaczyna się od meta viewport, a kończy na tym, jak zrobić responsywną stronę działającą na każdym ekranie.
Formularze – pola, etykiety i wysyłka danych. To pierwszy moment, w którym sam HTML przestaje wystarczać; szczegóły opisuję w poradniku o tym, jak dodać formularz kontaktowy na stronę.
Semantyka i dostępność – poprawna hierarchia nagłówków, opisy alt, kontrast. Wpływa na odbiór strony przez ludzi i przez wyszukiwarki.
Wydajność – kompresja obrazów, ograniczanie zbędnego kodu. Więcej o tym w tekście o tym, na czym polega optymalizacja kodu strony internetowej.
JavaScript – dopiero na końcu, gdy struktura i wygląd nie sprawiają już problemów.

Zanim uznasz swoją pierwszą stronę za skończoną, przejdź krótką listę kontrolną:

Polskie znaki wyświetlają się poprawnie w przeglądarce.
Strona ma jeden nagłówek <h1> i wypełniony <title>.
Każdy obraz ma opis w atrybucie alt.
Wszystkie linki prowadzą tam, gdzie powinny – sprawdzone kliknięciem.
Strona wygląda poprawnie po zwężeniu okna do szerokości telefonu.
Walidator W3C nie zgłasza błędów krytycznych.

Jeśli wszystkie punkty się zgadzają, masz za sobą coś więcej niż ćwiczenie. Masz działającą stronę internetową napisaną od zera i rozumiesz każdą linijkę jej kodu – a to punkt wyjścia, z którego każdy kolejny krok jest już znacznie łatwiejszy.

Jak zrobić stronę internetową w HTML przy użyciu Notepad++?