Masz kilka minut i zwykły komputer, a mimo to możesz uruchomić własną stronę internetową bez instalowania rozbudowanego programu. Pytanie, jak zrobić stronę HTML w Notatniku, prowadzi do prostego ćwiczenia, które dobrze pokazuje, jak działa kod, zapis pliku i przeglądarka. Poniżej przeprowadzę Cię przez cały proces, od pustego dokumentu po pierwsze style CSS i poprawianie typowych błędów.

Od pustego pliku do działającej strony

Do rozpoczęcia pracy potrzebujesz tylko Notatnika, przeglądarki i osobnego folderu na pliki. Nie musisz kupować programu, zakładać hostingu ani znać JavaScriptu. Strona będzie działała lokalnie na Twoim komputerze, czyli zobaczysz ją w przeglądarce, ale nikt z internetu nie otworzy jej jeszcze pod publicznym adresem.

Ja radzę utworzyć folder o prostej nazwie, na przykład moja-strona. Dzięki temu później łatwiej odnajdziesz plik i dodasz do niego arkusz stylów, zdjęcia albo kolejne podstrony.

1. Otwórz systemowy Notatnik.
2. Wklej lub wpisz poniższy kod.
3. Wybierz opcję Plik, Zapisz jako.
4. W polu nazwy wpisz index.html.
5. Ustaw typ pliku na Wszystkie pliki i kodowanie na UTF-8.
6. Otwórz zapisany plik w przeglądarce.

Na początek użyj krótkiego dokumentu. Pomija on opcjonalne znaczniki, które przeglądarka potrafi uzupełnić automatycznie, ale nadal zawiera podstawowe elementy potrzebne do wyświetlenia treści.

Witaj na mojej stronie
To mój pierwszy dokument HTML utworzony w Notatniku.

Po otwarciu pliku zobaczysz duży nagłówek i akapit. Jeśli zmienisz tekst w Notatniku, zapiszesz dokument skrótem Ctrl+S i odświeżysz przeglądarkę klawiszem F5 albo Ctrl+R, rezultat pojawi się od razu.

Jak zapisać plik, żeby przeglądarka go rozpoznała

Najczęstszy problem początkujących nie wynika z błędu w kodzie, lecz z niewłaściwej nazwy pliku. Notatnik często proponuje zapis tekstowy, dlatego dokument może otrzymać nazwę index.html.txt. System ukrywa wtedy końcówkę .txt, a przeglądarka traktuje plik jak zwykły tekst.

Jeśli nie widzisz rozszerzeń plików w Eksploratorze, włącz ich wyświetlanie w ustawieniach widoku. To drobna zmiana, ale bardzo ułatwia kontrolę nad tym, czy pracujesz z dokumentem HTML, czy nadal z plikiem tekstowym.

W polskich znakach ważne jest kodowanie UTF-8. Dodatkowy znacznik meta charset="utf-8" informuje przeglądarkę, jak odczytać litery takie jak ą, ę, ł i ż. Bez niego tekst może wyglądać poprawnie na jednym komputerze, a na innym wyświetlać niezrozumiałe symbole.

Jak zbudować treść strony bez znajomości programowania

HTML opisuje znaczenie poszczególnych fragmentów dokumentu. Nie musisz zapamiętywać wielu poleceń. Na początek wystarczy kilka znaczników, które otaczają treść i wskazują przeglądarce, czym ona jest.

• h1 oznacza główny nagłówek strony.
• h2 i h3 porządkują kolejne sekcje.
• p tworzy akapit.
• ul oraz li służą do listy punktowanej.
• ol tworzy listę numerowaną.
• a pozwala dodać odnośnik.

Każdy znacznik ma zwykle wersję otwierającą i zamykającą. W kodzie poniżej zobaczysz prostą stronę przedstawiającą autora i jego zainteresowania.

Poznaj mnie
Uczę się tworzyć strony internetowe i testuję pierwsze pomysły.

Moje zainteresowania

  
technologie
  
fotografia
  
podróże


Zobacz także moją stronę kontaktową.
Przejdź do kontaktu

Najważniejsza zasada brzmi prosto: jeden dokument powinien mieć jeden główny nagłówek, a niższe nagłówki powinny wynikać z jego struktury. Dzięki temu strona jest czytelniejsza dla ludzi, przeglądarek i narzędzi odczytujących treść.

Plik kontakt.html nie zadziała, dopóki nie utworzysz go w tym samym folderze. Jeśli podstrona znajduje się w innym katalogu, trzeba wskazać właściwą ścieżkę. Na początku najlepiej trzymać wszystkie dokumenty w jednym miejscu, bo ogranicza to liczbę pomyłek.

Jak dodać wygląd za pomocą CSS

Czysty HTML jest funkcjonalny, ale wygląda surowo. Za kolory, czcionki, odstępy i szerokość elementów odpowiada CSS, czyli język stylów. Najłatwiej zacząć od reguł zapisanych bezpośrednio w dokumencie za pomocą znacznika style.

Ten fragment ustawia jasne tło, ogranicza szerokość tekstu i poprawia odstępy między wierszami. Ja szczególnie polecam zacząć od szerokości treści i czytelnego kontrastu, bo te dwie rzeczy dają większą poprawę niż przypadkowe dodawanie dekoracji.

Gdy projekt urośnie, przenieś style do osobnego pliku, na przykład style.css. Wtedy dokument HTML opisuje treść, a arkusz CSS odpowiada za wygląd. Taki podział ułatwia późniejsze zmiany, choć do jednej krótkiej strony w Notatniku nie jest jeszcze konieczny.

Co sprawdzić, gdy strona nie działa

Jeżeli przeglądarka pokazuje kod zamiast gotowej strony, najpierw sprawdź rozszerzenie pliku. Prawie zawsze przyczyną jest zapisanie dokumentu jako .html.txt albo otwarcie niewłaściwego pliku z folderu.

• Widzisz kod na ekranie - sprawdź, czy nazwa kończy się na .html.
• Nie działają polskie znaki - zapisz plik jako UTF-8 i pozostaw znacznik kodowania.
• Zmiany się nie pokazują - zapisz plik i odśwież przeglądarkę.
• Nie działa odnośnik - sprawdź pisownię nazwy drugiego pliku.
• Strona wygląda dziwnie - poszukaj brakującego znaku <, > albo cudzysłowu.

Dobrym sposobem na diagnozę jest usuwanie zmian po jednej. Jeśli po dodaniu nowego fragmentu wszystko się zepsuło, cofnij go, zapisz dokument i sprawdź ponownie. Taka metoda pozwala szybko znaleźć błąd, zamiast przepisywać całą stronę od początku.

Notatnik nie podpowiada składni i nie zaznacza pomyłek, dlatego przy większych projektach wygodniejszy będzie edytor kodu z kolorowaniem składni. Mimo to zwykły program ma jedną dużą zaletę: pokazuje HTML bez dodatkowych funkcji, które mogłyby ukryć przed początkującym to, co naprawdę dzieje się w pliku.

Co warto zrobić po uruchomieniu pierwszej strony

Kiedy podstawowy dokument już działa, dodaj osobne pliki dla kolejnych podstron, prostą nawigację i kilka własnych stylów. Dobrym ćwiczeniem jest stworzenie wizytówki z nagłówkiem, krótkim opisem, listą umiejętności oraz stroną kontaktową.

Nie próbuj od razu budować rozbudowanego portalu. Jedna mała, działająca strona nauczy Cię więcej niż duży fragment kodu skopiowany bez zrozumienia. Po drodze poznasz strukturę HTML, zapis plików, ścieżki między dokumentami i podstawy CSS, czyli fundamenty dalszej nauki tworzenia stron.

Notatnik świetnie nadaje się do startu i eksperymentów lokalnych, ale nie publikuje strony w internecie. Do tego potrzebujesz później hostingu, domeny i poprawnie przygotowanych plików. Na pierwszym etapie nie jest to jednak potrzebne, bo najważniejsze jest samodzielne napisanie kodu i zrozumienie, jak przeglądarka zamienia go w widoczną stronę.