Masz pomysł na prostą wizytówkę, stronę projektu albo ćwiczenie z kodowania, ale nie chcesz od razu instalować rozbudowanego środowiska programistycznego? Pokażę Ci, jak zrobić stronę HTML w Notatniku, zapisać ją poprawnie, otworzyć w przeglądarce oraz dodać podstawowy wygląd CSS. Po drodze wyjaśnię też, skąd biorą się najczęstsze błędy, takie jak plik .html.txt albo brak polskich znaków.
Prosta strona internetowa wymaga tylko tekstu, poprawnego rozszerzenia i przeglądarki
- Koszt wynosi 0 zł, ponieważ wystarczy Notatnik i dowolna przeglądarka.
- Plik trzeba zapisać jako .html, a w polu typu wybrać Wszystkie pliki.
- Podstawowy dokument zawiera strukturę HTML, nagłówek, akapity i opcjonalne style CSS.
- Zmiany sprawdza się przez zapisanie pliku i odświeżenie strony skrótem Ctrl+R lub F5.
- Notatnik jest dobry do nauki, ale przy większym projekcie wygodniejszy będzie edytor kodu.
Od czego zacząć tworzenie strony HTML
Do pierwszego ćwiczenia potrzebujesz tylko Notatnika, przeglądarki internetowej i osobnego folderu na pliki. Nie musisz kupować hostingu ani instalować serwera. Strona uruchamiana lokalnie działa bez internetu, ponieważ przeglądarka odczytuje zapisany dokument bezpośrednio z dysku.Notatnik zapisuje zwykły tekst. HTML, czyli język znaczników używany do budowania struktury stron, również jest tekstem, dlatego takie narzędzie w zupełności wystarczy na początek. W praktyce to nawet niezła lekcja, bo każdy znak kodu wpisujesz samodzielnie i szybciej zauważasz, jak działa dokument.
Utwórz folder, na przykład moja-strona, i przechowuj w nim wszystkie pliki projektu. Unikaj na początku spacji oraz polskich znaków w nazwach plików, ponieważ prostsze nazewnictwo zmniejsza ryzyko problemów ze ścieżkami.
Co będzie potrzebne
- Notatnik w systemie Windows lub prosty edytor tekstu.
- Przeglądarka, na przykład Edge, Chrome albo Firefox.
- Folder projektu zapisany w łatwo dostępnym miejscu.
- Około 10 minut na przygotowanie pierwszej wersji.
Jeżeli korzystasz z Notepad++, Visual Studio Code albo innego edytora kodu, kroki są podobne. Różnica polega głównie na tym, że takie programy podpowiadają składnię i kolorują znaczniki. Do samego uruchomienia strony nie dają jednak żadnej magicznej funkcji, której nie ma zwykły Notatnik.
Pierwszy plik HTML krok po kroku
Otwórz Notatnik i wpisz poniższy kod. Jest celowo krótki, ale zawiera elementy potrzebne do wyświetlenia tytułu, nagłówka i treści.
Moja pierwsza strona
Witaj na mojej stronie
To mój pierwszy dokument HTML utworzony w Notatniku.
Uczę się budować strony internetowe krok po kroku.
Pierwsza linia informuje przeglądarkę, że dokument korzysta ze współczesnego standardu HTML. Element meta charset="UTF-8" odpowiada za prawidłowe wyświetlanie polskich znaków, a title ustawia nazwę widoczną na karcie przeglądarki.
Treść umieszczona między znacznikami main jest główną zawartością strony. Nagłówek h1 powinien opisywać najważniejszy temat dokumentu, natomiast znacznik p służy do tworzenia akapitów.
Jak zapisać dokument bez błędu
- W Notatniku wybierz Plik, a potem Zapisz jako.
- Wpisz nazwę index.html.
- W polu typu pliku wybierz Wszystkie pliki.
- Ustaw kodowanie UTF-8, jeśli taka opcja jest dostępna.
- Zapisz dokument w folderze moja-strona.
Najczęstsza pomyłka polega na pozostawieniu typu „Dokument tekstowy”. Wtedy Notatnik może utworzyć plik index.html.txt, mimo że na ekranie widzisz tylko pozornie właściwą nazwę. Jeśli strona nie otwiera się poprawnie, włącz w Eksploratorze opcję wyświetlania rozszerzeń nazw plików i sprawdź końcówkę nazwy.
Po zapisaniu kliknij plik index.html dwukrotnie. Powinien otworzyć się w domyślnej przeglądarce. Gdy widzisz nagłówek i dwa akapity, pierwszy etap jest gotowy.
Jak rozbudować stronę o treść i linki
Sama strona z jednym nagłówkiem szybko przestaje wystarczać. Możesz dodać śródtytuły, listę oraz odnośnik do drugiego dokumentu, zachowując prostą i czytelną strukturę.
Czego uczę się podczas pracy
- Podstaw HTML
- Formatowania tekstu
- Tworzenia prostych układów
Zobacz także
stronę kontaktową.
Lista wypunktowana korzysta z ul, a każdy jej element znajduje się w znaczniku li. Link tworzy element a, w którym atrybut href wskazuje nazwę docelowego pliku.
Jeżeli plik kontakt.html leży w tym samym folderze co index.html, wystarczy podać jego nazwę. Nie wpisuj ścieżki w rodzaju C:\Users\..., ponieważ taki odnośnik będzie działał tylko na Twoim komputerze.
Druga podstrona
Utwórz w tym samym folderze nowy dokument, zapisz go jako kontakt.html i dodaj prostą treść:
Kontakt
Kontakt
To jest druga podstrona mojego projektu.
Wróć na stronę główną
Ten przykład pokazuje ważną zasadę. Mała witryna może składać się z kilku niezależnych plików, które łączą się za pomocą względnych ścieżek. Dzięki temu od początku ćwiczysz sposób organizowania projektu używany także przy większych stronach.
Dodaj wygląd za pomocą CSS
HTML odpowiada głównie za strukturę, a CSS za wygląd. CSS, czyli kaskadowe arkusze stylów, pozwala zmieniać kolory, odstępy, szerokości i sposób wyświetlania elementów.
Na początek możesz umieścić style w dokumencie za pomocą atrybutu style. To szybkie rozwiązanie do nauki, choć przy większej stronie lepiej przenieść reguły do osobnego pliku.
Moja strona
Prosty projekt wykonany bez dodatkowych programów.
Parametr max-width: 700px ogranicza szerokość tekstu, dzięki czemu akapity są wygodniejsze do czytania. Z kolei margin: 40px auto dodaje odstęp od góry i centruje główny blok na szerszym ekranie.
Przeczytaj również: Jak zrobić drugą stronę HTML? Poradnik krok po kroku i linkowanie
Wygodniejszy wariant z osobnym plikiem
Utwórz drugi plik o nazwie style.css i wpisz do niego:
body {
background: #f4f6f8;
color: #20252b;
font-family: Arial, sans-serif;
}
main {
max-width: 700px;
margin: 40px auto;
padding: 24px;
background: white;
}
h1 {
color: #2457a6;
}W pliku HTML dopisz odwołanie do arkusza:
Oba pliki muszą znajdować się w tym samym folderze. Jeśli zmienisz nazwę arkusza albo zapiszesz go w innym miejscu, przeglądarka nie znajdzie stylów i wyświetli stronę bez formatowania.
Sprawdzaj zmiany i naprawiaj typowe błędy
Praca w Notatniku jest prosta, ale wymaga ręcznego pilnowania szczegółów. Po każdej zmianie zapisz plik skrótem Ctrl+S, wróć do przeglądarki i użyj F5 albo Ctrl+R. Jeżeli efekt się nie pojawia, najpierw sprawdź, czy edytujesz właściwy dokument.
| Objaw | Prawdopodobna przyczyna | Rozwiązanie |
|---|---|---|
| Przeglądarka pokazuje kod | Plik ma rozszerzenie .txt albo został otwarty w edytorze tekstu | Sprawdź nazwę i otwórz plik z końcówką .html |
| Brak polskich znaków | Niewłaściwe kodowanie dokumentu | Zapisz plik jako UTF-8 i dodaj deklarację kodowania |
| Nie działa link | Błędna nazwa pliku lub inny folder | Porównaj nazwę w href z nazwą pliku znak po znaku |
| Nie ma stylów CSS | Niepoprawna ścieżka do style.css | Umieść pliki razem albo popraw ścieżkę href |
| Zmiana nie jest widoczna | Strona nie została odświeżona lub plik nie został zapisany | Użyj Ctrl+S, a potem F5 |
Przydatna metoda polega na dodawaniu jednej zmiany naraz. Jeśli wprowadzisz jednocześnie nowy kod HTML i CSS, trudniej ustalić, który fragment spowodował problem. Sam często zaczynam od pustego dokumentu, dodaję jeden element i od razu sprawdzam rezultat, bo taka praca szybciej prowadzi do przyczyny błędu.
Zwracaj uwagę na pary znaczników, takie jak
i
alboKiedy Notatnik wystarczy, a kiedy lepiej wybrać inny edytor
Do nauki HTML, jednego ćwiczenia albo prostej lokalnej wizytówki Notatnik jest wystarczający. Nie podpowiada składni, nie wskazuje błędów i nie koloruje kodu, ale właśnie dzięki temu dobrze pokazuje, że strona internetowa jest zwykłym plikiem tekstowym interpretowanym przez przeglądarkę.
| Narzędzie | Najlepsze zastosowanie | Największa zaleta | Ograniczenie |
|---|---|---|---|
| Notatnik | Pierwsze ćwiczenia | Prostota i brak kosztów | Brak podpowiedzi kodu |
| Notepad++ | Małe i średnie projekty | Kolorowanie składni | Mniej funkcji niż rozbudowane IDE |
| Visual Studio Code | Większe strony i aplikacje | Rozszerzenia, podpowiedzi i kontrola projektu | Więcej ustawień na początku |
Do publicznego uruchomienia strony potrzebujesz później hostingu i domeny, ale nie są one potrzebne do nauki. Lokalny plik pozwala bezpłatnie przećwiczyć strukturę, style i linkowanie, zanim zdecydujesz, czy projekt jest na tyle dopracowany, by publikować go w internecie.
Co zmienić po ukończeniu pierwszej wersji
Najlepszy następny krok to niewielki projekt, na przykład strona o hobby, portfolio jednego przedmiotu albo wizytówka fikcyjnej firmy. Dodaj trzy podstrony, prostą nawigację, listę informacji i jeden arkusz CSS. Taki zakres wystarczy, by przećwiczyć większość podstaw bez zagubienia się w nadmiarze funkcji.
Gdy kod zacznie rosnąć, przyda się walidator HTML, narzędzia deweloperskie przeglądarki oraz edytor z automatycznym formatowaniem. Nie musisz jednak czekać na idealne narzędzia. Pierwszą działającą stronę da się stworzyć w kilka minut, a dalsza nauka polega głównie na świadomym testowaniu małych zmian.
Najważniejsze jest zapamiętanie prostego schematu: utwórz plik tekstowy, zapisz go z końcówką .html, otwórz w przeglądarce, popraw kod i odśwież widok. Kiedy ten cykl stanie się naturalny, HTML przestaje wyglądać jak zbiór tajemniczych symboli, a zaczyna działać jak czytelny opis strony.
