Chcesz uruchomić własną stronę bez instalowania rozbudowanego środowiska programistycznego? Pokażę, jak zrobić stronę internetową HTML w Notepad++, zapisać ją poprawnie, otworzyć w przeglądarce i stopniowo rozbudować o style, obrazy oraz podstrony.

Przygotuj folder i pierwszy plik HTML

Notepad++ jest edytorem tekstu z kolorowaniem składni, numerami wierszy i wygodną obsługą wielu plików. Do rozpoczęcia pracy nie potrzebujesz płatnego programu, serwera ani znajomości skomplikowanych narzędzi. Potrzebujesz jedynie edytora, przeglądarki i osobnego folderu na projekt.

Najpierw utwórz folder, na przykład moja-strona. Dzięki temu wszystkie elementy pozostaną razem, a ścieżki do grafik, arkuszy stylów i podstron nie zaczną się mieszać. W Notepad++ wybierz utworzenie nowego dokumentu, a potem zapisz go jako index.html.

Podczas zapisywania zwróć uwagę na typ pliku. W polu rodzaju dokumentu wybierz opcję pozwalającą zapisać plik jako wszystkie typy, a nazwę wpisz dokładnie jako index.html. Jeżeli system dopisze końcówkę .txt, przeglądarka potraktuje dokument jak zwykły tekst.

Ustaw też kodowanie UTF-8. To ważne, gdy na stronie pojawiają się polskie znaki, takie jak ą, ę, ł albo ź. W przeciwnym razie zamiast poprawnego tekstu możesz zobaczyć przypadkowe symbole.

Wklej prosty szkielet pierwszej strony

Na początek nie komplikuję kodu. Poniższy przykład zawiera deklarację dokumentu, kodowanie znaków, tytuł karty przeglądarki oraz podstawową treść. Znaczniki HTML opisują strukturę, a przeglądarka zamienia je na widoczny dokument.

Witaj na mojej stronie
To jest mój pierwszy dokument HTML utworzony w Notepad++.

Czym się interesuję

  
Technologie
  
Programowanie
  
Nowe rozwiązania cyfrowe

Po wklejeniu kodu zapisz plik skrótem Ctrl + S. Element

W Notepad++ możesz włączyć język HTML z menu języków. Kolorowanie składni nie zmienia działania strony, ale pomaga szybko zauważyć brakujący cudzysłów, literówkę lub niedomknięty znacznik. Z mojego doświadczenia właśnie takie drobiazgi zabierają początkującym więcej czasu niż samo napisanie pierwszej wersji.

Dodaj wygląd za pomocą CSS

Czysty HTML odpowiada głównie za treść i strukturę. Kolory, odstępy, szerokość elementów oraz krój pisma ustala się w CSS, czyli języku arkuszy stylów. Na początku możesz umieścić prosty fragment stylów bezpośrednio w dokumencie.

Wstaw ten kod nad pierwszym nagłówkiem, a strona zyska czytelniejszy układ i podstawową hierarchię wizualną. Nie przesadzaj jednak z liczbą reguł. Na tym etapie ważniejsze jest zrozumienie, że HTML opisuje element, a CSS określa, jak ten element wygląda.

Gdy stylów zacznie przybywać, przenieś je do osobnego pliku o nazwie style.css. Wtedy dokument HTML pozostanie przejrzysty, a wygląd całej strony będzie można zmienić w jednym miejscu. Przy kilku podstronach to rozwiązanie szybko przestaje być wygodą, a staje się zwyczajnie rozsądną organizacją projektu.

Otwórz stronę i poprawiaj ją metodą prób

Po zapisaniu pliku przejdź do folderu projektu i otwórz index.html dwuklikiem. System uruchomi go w domyślnej przeglądarce. Jeżeli strona otworzy się jako tekst z widocznymi znacznikami, sprawdź rozszerzenie pliku oraz to, czy kod został zapisany jako HTML, a nie TXT.

Praca nad prostą stroną polega na krótkim cyklu: edytujesz kod, zapisujesz plik, przechodzisz do przeglądarki i odświeżasz widok. Najczęściej używam skrótu Ctrl + S w Notepad++ i Ctrl + R w przeglądarce. Taka pętla daje szybką informację, czy zmiana faktycznie działa.

Jeśli przeglądarka nie pokazuje polskich znaków, wróć do kodowania dokumentu i zapisz plik jako UTF-8. Jeśli nie widać stylów, sprawdź, czy reguły CSS znajdują się w poprawnie zapisanym dokumencie i czy nie brakuje nawiasu klamrowego.

Przeczytaj również: Jaki edytor HTML wybrać? Przewodnik dla każdego poziomu.

Trzy błędy, które pojawiają się najczęściej

• Plik ma końcówkę .html.txt, ponieważ system ukrywa znane rozszerzenia.
• Znacznik został otwarty, ale nie został prawidłowo zamknięty.
• W kodzie pojawiła się zła ścieżka do obrazka, arkusza CSS albo podstrony.

Dobrym nawykiem jest zapisywanie plików z prostymi nazwami bez spacji i polskich znaków, na przykład kontakt.html albo logo.png. Ogranicza to liczbę problemów przy późniejszym przenoszeniu projektu na hosting.

Rozbuduj projekt o obrazy, linki i podstrony

Gdy pierwsza wersja działa, możesz dodać obraz zapisany w tym samym folderze co plik HTML. Atrybut alt opisuje grafikę i pomaga osobom korzystającym z czytników ekranu.

Jeśli zdjęcie znajduje się w podfolderze obrazy, ścieżka powinna wyglądać tak:

Podstronę tworzysz podobnie jak stronę główną. Zapisz drugi dokument jako kontakt.html, a w pliku głównym dodaj odnośnik.

Kontakt

To ważny moment, bo projekt przestaje być pojedynczym ćwiczeniem, a zaczyna przypominać prawdziwą witrynę. W osobnych plikach możesz umieścić informacje o autorze, ofertę, portfolio lub dane kontaktowe. Wszystkie dokumenty powinny znajdować się w przemyślanej strukturze folderów.

Na przykład prosty projekt może wyglądać tak:

moja-strona/
├── index.html
├── kontakt.html
├── style.css
└── obrazy/
    └── zdjecie.jpg

Jeśli przeniesiesz plik graficzny albo zmienisz nazwę podstrony, popraw również odwołanie w kodzie. Niedziałający obraz lub link zwykle nie oznacza poważnej awarii, tylko niezgodność między nazwą pliku a ścieżką wpisaną w HTML.

Kiedy Notepad++ wystarczy, a kiedy potrzebujesz więcej

Notepad++ bardzo dobrze sprawdza się przy nauce HTML, prostych wizytówkach, dokumentach ćwiczeniowych i niewielkich stronach statycznych. Daje pełną kontrolę nad kodem, działa szybko i nie ukrywa przed użytkownikiem tego, co dzieje się w pliku.

Największym ograniczeniem edytora jest brak podglądu na żywo i automatycznej kontroli wielu błędów. Nie traktuję tego jednak jako wady na początku nauki. Ręczne pisanie kodu pozwala zrozumieć, dlaczego element pojawia się w konkretnym miejscu i jak HTML łączy się z CSS.

Do publikacji potrzebujesz hostingu, czyli miejsca na serwerze, oraz opcjonalnie własnej domeny. Sam lokalny projekt kosztuje 0 zł, ale udostępnienie go w internecie wiąże się z opłatami zależnymi od wybranego dostawcy. Przed zakupem sprawdź, czy hosting obsługuje potrzebne technologie, a nie tylko przechowuje pliki.

Najkrótsza droga od kodu do własnej witryny

Najpierw utwórz folder, zapisz dokument jako index.html w kodowaniu UTF-8 i wklej prosty szkielet. Później dodaj treść, CSS, obrazy oraz kolejne pliki, za każdym razem sprawdzając efekt w przeglądarce.

Nie próbuj od razu budować rozbudowanego portalu. Jedna dobrze działająca strona z nagłówkiem, akapitami, listą i jednym obrazem nauczy Cię więcej niż skopiowany szablon z dziesiątkami niezrozumiałych reguł. Kiedy opanujesz tę bazę, przejście do JavaScriptu, systemu CMS albo bardziej zaawansowanego edytora będzie znacznie łatwiejsze.