Pytanie, jak zrobić stronę HTML w Notatniku, ma prostą odpowiedź: wystarczy zwykły edytor tekstu, kilka podstawowych znaczników i przeglądarka internetowa. Pokażę, jak utworzyć plik, zapisać go z właściwym rozszerzeniem, wyświetlić pierwszą stronę oraz uniknąć błędów, przez które zamiast witryny otwiera się zwykły dokument tekstowy.
Pierwsza strona HTML może powstać w kilka minut
- Notatnik wystarczy do napisania i zapisania podstawowego kodu HTML.
- Plik trzeba zapisać z rozszerzeniem .html, a nie .txt.
- Kodowanie UTF-8 chroni polskie znaki przed wyświetlaniem krzaków.
- Gotowy dokument otwiera się przez dwukrotne kliknięcie w plik.
- Po zmianie kodu stronę odświeża się zwykle klawiszem F5.
Co przygotować przed napisaniem pierwszej strony
Do prostego ćwiczenia nie potrzebujesz płatnego programu, serwera ani dostępu do internetu. Wystarczą Notatnik, przeglądarka i folder na pliki. Całość możesz wykonać bez ponoszenia kosztów, a pierwszą działającą wersję przygotować w około 10-15 minut.
HTML to język znaczników. Zamiast klasycznych poleceń programistycznych używa elementów opisujących strukturę treści, takich jak nagłówki, akapity, listy czy odnośniki. Notatnik nie podświetla składni i nie podpowiada kodu, ale właśnie dzięki temu dobrze pokazuje, że strona internetowa jest zwykłym plikiem tekstowym interpretowanym przez przeglądarkę.
Utwórz na pulpicie folder, na przykład moja-strona. Trzymanie wszystkich plików w jednym miejscu ułatwi późniejsze dodawanie obrazów, arkuszy stylów i kolejnych podstron.
Jak zapisać plik HTML w Notatniku
Otwórz Notatnik i wybierz opcję zapisania nowego dokumentu. Najważniejszy etap znajduje się w oknie zapisu, ponieważ system Windows często próbuje dopisać do nazwy rozszerzenie .txt.
- Wybierz Plik, a potem Zapisz jako.
- W polu nazwy wpisz index.html.
- W polu typu pliku wybierz Wszystkie pliki.
- Ustaw kodowanie UTF-8.
- Zapisz dokument w przygotowanym folderze.
Nazwa index.html jest przyjętym oznaczeniem strony głównej projektu. Nie jest obowiązkowa przy pracy na komputerze, ale przyda się później, gdy zechcesz opublikować witrynę na serwerze.
Jeżeli plik nazywa się index.html.txt, przeglądarka może otworzyć go jako dokument tekstowy albo pokazać sam kod. Gdy masz wątpliwości, w Eksploratorze plików włącz wyświetlanie rozszerzeń nazw plików. Dzięki temu zobaczysz pełną nazwę, a nie tylko jej skróconą wersję.
Prosty kod pierwszej strony
Wpisz do Notatnika poniższy kod. Zawiera tytuł karty przeglądarki, nagłówek, akapit, listę i odnośnik do kolejnego pliku. Znaki < i > otaczają znaczniki, czyli elementy rozpoznawane przez przeglądarkę.
Moja pierwsza strona
Witaj na mojej stronie
To mój pierwszy dokument HTML utworzony w Notatniku.
- Nauka HTML
- Ćwiczenia z kodu
- Tworzenie stron
Element informuje przeglądarkę, jak odczytywać znaki. Jest szczególnie ważny przy polskich literach, takich jak ą, ć, ę, ł czy ż. Samo zapisanie pliku w UTF-8 i wskazanie tego kodowania w dokumencie daje znacznie mniejsze ryzyko błędnego wyświetlania tekstu.
Znacznik i , a odnośniki tworzy się elementem z atrybutem href.
Po zapisaniu pliku przejdź do folderu i otwórz go dwukrotnym kliknięciem. Jeżeli wszystko zostało zapisane poprawnie, zobaczysz sformatowaną stronę, a nie surowy kod. Po każdej zmianie w Notatniku użyj skrótu Ctrl+S, wróć do przeglądarki i odśwież widok klawiszem F5.
Jak dodać wygląd za pomocą CSS
Sam HTML odpowiada głównie za strukturę. Kolory, odstępy, szerokość treści i typografię kontroluje CSS, czyli język stylów. Na początek możesz dodać prosty fragment między treścią dokumentu, aby strona od razu wyglądała czytelniej.
Reguła max-width: 760px ogranicza szerokość tekstu, dzięki czemu długie akapity nie rozciągają się na całą szerokość monitora. Z mojego doświadczenia właśnie takie drobne poprawki dają początkującej stronie największy efekt, bez konieczności poznawania rozbudowanych frameworków.
Przy większym projekcie CSS lepiej przenieść do osobnego pliku, na przykład style.css. Na etapie pierwszych ćwiczeń styl zapisany w tym samym dokumencie jest jednak wygodniejszy, bo od razu widzisz związek między kodem a rezultatem.
Obrazy, podstrony i porządek w plikach
Gdy podstawowa wersja działa, możesz dodać grafikę zapisaną w tym samym folderze. Przykładowy element wygląda tak:
Nazwa pliku w atrybucie src musi zgadzać się z nazwą zapisaną na dysku, łącznie z rozszerzeniem. Jeśli obraz znajduje się w folderze „obrazy”, ścieżka będzie wyglądała inaczej, na przykład obrazy/zdjecie.jpg. Atrybut alt opisuje grafikę i pomaga osobom korzystającym z czytników ekranu.
Podstronę utworzysz podobnie jak stronę główną. Zapisz drugi dokument jako kontakt.html, a potem połącz go z plikiem index.html za pomocą odnośnika. Oba pliki muszą znajdować się w tym samym folderze, chyba że użyjesz bardziej złożonych ścieżek.
Przy kilku plikach szybko zaczyna mieć znaczenie porządek. Dobrym minimum jest osobny folder na obrazy, jeden plik CSS oraz czytelne nazwy bez spacji i polskich znaków, na przykład o-mnie.html zamiast „O mnie.html”. Taki układ ogranicza pomyłki, gdy projekt zaczyna rosnąć.
Najczęstsze błędy i szybkie sposoby ich naprawy
| Problem | Prawdopodobna przyczyna | Rozwiązanie |
|---|---|---|
| Otwiera się Notatnik z kodem | Plik ma rozszerzenie .txt | Zmień nazwę na .html albo zapisz ponownie jako „Wszystkie pliki”. |
| Polskie znaki wyglądają niepoprawnie | Błędne kodowanie dokumentu | Zapisz plik w UTF-8 i dodaj deklarację kodowania. |
| Obraz się nie wyświetla | Zła nazwa lub lokalizacja pliku | Sprawdź pisownię, rozszerzenie i ścieżkę w atrybucie src. |
| Zmiany nie są widoczne | Przeglądarka pokazuje poprzednią wersję | Zapisz dokument i odśwież stronę klawiszem F5. |
| Strona wygląda jak zwykły tekst | Brak poprawnych znaczników HTML | Sprawdź, czy elementy mają właściwe nawiasy ostre i zamknięcia. |
Najczęściej problemem nie jest sam HTML, tylko zapis pliku. Dlatego zawsze zaczynam diagnozę od sprawdzenia pełnej nazwy, typu dokumentu i kodowania. Dopiero później szukam błędu w znacznikach.
Notatnik ma też ograniczenie, którego nie da się całkiem pominąć. Nie oferuje kolorowania składni, automatycznego zamykania znaczników ani kontroli błędów. Do pierwszych ćwiczeń jest świetny, ale przy większym projekcie wygodniejszy będzie edytor kodu z numerami wierszy i podpowiedziami.
Co zrobić po uruchomieniu pierwszej wersji
Nie próbuj od razu budować rozbudowanego serwisu. Najlepsza nauka polega na małych zmianach: dodaj nagłówek, zmień kolor, wstaw obraz, utwórz drugą stronę i sprawdź, co dokładnie zmieniło się w przeglądarce.
Kiedy swobodnie poruszasz się po podstawowych znacznikach, rozdziel projekt na trzy elementy: HTML dla struktury, CSS dla wyglądu i JavaScript dla interakcji. Notatnik pozwala rozpocząć naukę bez instalowania dodatkowych narzędzi, ale nie zastąpi pełnego środowiska pracy, gdy pojawią się formularze, responsywność i większa liczba plików.
Do publikacji strony potrzebujesz później domeny i hostingu albo usługi umożliwiającej udostępnianie plików w internecie. Lokalny dokument otwierany na komputerze jest dobrym środowiskiem do nauki, lecz sam w sobie nie sprawi, że strona będzie dostępna dla innych osób.
Od pustego pliku do własnego mini projektu
Najprostsza droga wygląda tak: utwórz folder, zapisz dokument jako index.html w UTF-8, wpisz kilka znaczników, otwórz plik w przeglądarce i poprawiaj go małymi krokami. Jeśli strona nie działa, najpierw sprawdź rozszerzenie oraz dokładne nazwy plików.
To niewielkie ćwiczenie daje solidne podstawy. Zobaczysz, jak przeglądarka interpretuje kod, nauczysz się struktury dokumentu i szybko przekonasz się, czy dalsza nauka HTML, CSS oraz JavaScript jest kierunkiem dla Ciebie.
