Witaj w świecie tworzenia stron internetowych! Jeśli kiedykolwiek zastanawiałeś się, jak powstają witryny, które codziennie odwiedzasz, ten przewodnik jest dla Ciebie. Pokażę Ci, jak stworzyć swoją pierwszą stronę HTML od podstaw, używając do tego najprostszego narzędzia dostępnego w systemie Windows Notatnika. To idealny punkt startowy dla absolutnie początkujących, którzy chcą postawić swoje pierwsze kroki w kodowaniu, bez konieczności instalowania jakiegokolwiek dodatkowego oprogramowania.

Notatnik Twój pierwszy krok w świecie HTML

Notatnik, choć na pierwszy rzut oka wydaje się być bardzo prostym narzędziem, jest idealnym punktem wyjścia do nauki HTML. Dlaczego? Przede wszystkim dlatego, że jest dostępny na każdym komputerze z systemem Windows, więc nie musisz niczego instalować ani konfigurować. Możesz od razu przejść do pisania kodu.

Dla początkujących, prostota Notatnika jest jego największą zaletą. Brak zaawansowanych funkcji, podpowiedzi czy kolorowania składni zmusza do ręcznego pisania każdego tagu, co moim zdaniem świetnie utrwala podstawy i pomaga zrozumieć strukturę języka HTML. To trochę jak nauka jazdy na rowerze bez kółek bocznych na początku trudniej, ale efekty są lepsze.

Plik HTML to nic innego jak zwykły plik tekstowy, który zawiera specjalne instrukcje (tagi) zrozumiałe dla przeglądarki internetowej. Kiedy otwierasz taki plik w przeglądarce, ona interpretuje te tagi i na ich podstawie wyświetla stronę internetową, którą widzisz na ekranie. Zatem, Notatnik pozwoli nam stworzyć te instrukcje w najczystszej postaci.

Krok 1: Budujemy fundamenty szkielet dokumentu HTML

Każda strona internetowa, niezależnie od jej złożoności, opiera się na podstawowej, spójnej strukturze. To fundament, na którym budujemy całą treść. Zrozumienie tego szkieletu jest kluczowe, aby Twoja strona była poprawnie interpretowana przez przeglądarki. W Notatniku, zacznij od wpisania poniższych tagów:

• <! DOCTYPE html>: To deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5, czyli najnowszą wersją języka. Zawsze umieszczaj ją na samym początku pliku.
• ...: Ten tag jest głównym kontenerem dla całej zawartości Twojej strony. Wszystko, co tworzysz, musi znajdować się wewnątrz tych tagów.
• ...: Sekcja "głowy" dokumentu. Tutaj umieszczamy metadane, czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek.
  • : Ten tag jest niezwykle ważny, zwłaszcza w Polsce! Określa kodowanie znaków jako UTF-8, co gwarantuje poprawne wyświetlanie polskich znaków diakrytycznych (ą, ć, ę, ł, ń, ó, ś, ź, ż). Bez niego zamiast "żółć" możesz zobaczyć "żółć".
  • : Tekst umieszczony między tymi tagami będzie tytułem Twojej strony, widocznym w zakładce przeglądarki. To pierwsza rzecz, którą użytkownik zobaczy w górnej części okna przeglądarki.
• ...: To jest "ciało" dokumentu, czyli miejsce, gdzie umieszczasz całą widoczną zawartość Twojej strony tekst, obrazy, linki, filmy i wszystko, co użytkownik zobaczy na ekranie.

Krok 2: Dodajemy treść tekst, nagłówki i linki

Kiedy masz już podstawowy szkielet, czas wypełnić go treścią. HTML oferuje wiele tagów do strukturyzowania i prezentowania informacji. Poniżej przedstawię Ci te najważniejsze, które pozwolą Ci stworzyć prostą, ale funkcjonalną stronę. Pamiętaj, aby umieszczać je wewnątrz tagów ....

• Nagłówki (
  do
  ): Służą do tworzenia tytułów i podtytułów.
  to najważniejszy nagłówek (tytuł strony), a
  najmniej ważny. Używaj ich hierarchicznie, aby nadać strukturę Twojej treści.

  Witaj na mojej pierwszej stronie!
  To jest podtytuł
  Jeszcze mniejszy nagłónek

• Akapity (
  ): To podstawowy tag do tworzenia bloków tekstu, czyli akapitów. Przeglądarka automatycznie dodaje odstępy między akapitami, co ułatwia czytanie.

  To jest pierwszy akapit mojej strony. Piszę tutaj o tym, jak łatwo jest tworzyć strony HTML.
  Ten akapit zawiera więcej informacji i pokazuje, że tekst jest podzielony na czytelne bloki.

• Linki (): Tag (od "anchor") służy do tworzenia hiperłączy, które przenoszą użytkownika do innych stron lub miejsc w dokumencie. Kluczowym atrybutem jest href, który określa adres docelowy.

  Odwiedź stronę Google, aby znaleźć więcej informacji.
  Możesz też sprawdzić moją drugą stronę (jeśli ją stworzysz w tym samym folderze!).

• Obrazki (): Tag pozwala wstawiać obrazy na stronę. Jest to tag samodomykający się, co oznacza, że nie ma tagu zamykającego (np. ). Wymaga dwóch kluczowych atrybutów:
  • src: Określa ścieżkę do pliku obrazu. Jeśli obrazek znajduje się w tym samym folderze co plik HTML, wystarczy podać jego nazwę (np. mojobrazek.jpg).
  • alt: To tekst alternatywny, który wyświetla się, gdy obrazek nie może zostać załadowany, lub jest czytany przez czytniki ekranowe dla osób niewidomych. Jest bardzo ważny dla dostępności i SEO.

    Oto piękny obrazek:
    

Krok 3: Zapisujemy plik uniknij pułapki rozszerzenia

Ten krok jest absolutnie kluczowy! Wielu początkujących popełnia błąd na tym etapie, co skutkuje tym, że przeglądarka zamiast strony internetowej wyświetla kod źródłowy. Musisz upewnić się, że Notatnik zapisze Twój plik z rozszerzeniem .html, a nie .txt. Oto jak to zrobić krok po kroku:

1. Otwórz okno "Zapisz jako": W Notatniku kliknij "Plik" w lewym górnym rogu, a następnie wybierz "Zapisz jako...".
2. Wybierz lokalizację: Wybierz folder na swoim komputerze, w którym chcesz zapisać swoją stronę. Najlepiej stworzyć nowy, pusty folder, aby zachować porządek.
3. Kluczowy krok zmiana "Typu pliku": W oknie "Zapisz jako" znajdziesz pole "Typ pliku". Domyślnie będzie tam ustawione "Dokumenty tekstowe (*.txt)". Musisz kliknąć na to pole i z rozwijanej listy wybrać opcję "Wszystkie pliki (*.*)". To jest moment, który decyduje o sukcesie!
4. Nadaj nazwę z rozszerzeniem: W polu "Nazwa pliku" wpisz nazwę dla swojej strony, a koniecznie dodaj na końcu rozszerzenie .html. Na przykład, możesz nazwać swój plik index.html (index.html to standardowa nazwa dla strony głównej) lub mojastrona.html.
5. Zapisz plik: Po wykonaniu powyższych kroków, kliknij przycisk "Zapisz". Teraz Twój plik powinien mieć ikonę przeglądarki internetowej (np. Chrome, Firefox) i być gotowy do otwarcia jako strona internetowa.

Jeśli pominiesz krok 3 i 4, Notatnik zapisze plik jako mojastrona.html.txt, a przeglądarka potraktuje go jako zwykły tekst, a nie stronę HTML.

Krok 4: Otwieramy stronę zobacz swoje dzieło w przeglądarce

Gratulacje! Masz już swój pierwszy plik HTML. Teraz nadszedł czas, aby zobaczyć efekty Twojej pracy w przeglądarce internetowej. Istnieją dwie proste metody, aby to zrobić:

Metoda 1: Przeciągnij i upuść (Drag and Drop)
Otwórz swoją ulubioną przeglądarkę internetową (np. Chrome, Firefox, Edge). Następnie znajdź plik mojastrona.html w folderze, w którym go zapisałeś. Kliknij na niego i przeciągnij bezpośrednio do otwartego okna przeglądarki. Przeglądarka automatycznie otworzy plik i wyświetli Twoją stronę!

Metoda 2: Otwórz plik z menu przeglądarki
Otwórz przeglądarkę internetową. W większości przeglądarek znajdziesz opcję "Otwórz plik" lub "Otwórz plik..." w menu (zazwyczaj pod "Plik" lub ikoną trzech kropek/kresek w prawym górnym rogu). Kliknij na nią, a następnie przejdź do folderu, w którym zapisałeś swój plik mojastrona.html i wybierz go. Strona powinna się załadować.

Jeśli zamiast strony widzisz kod źródłowy, prawdopodobnie popełniłeś błąd przy zapisywaniu pliku. Oto najczęstsze przyczyny i rozwiązania:

• Błędne rozszerzenie pliku: Sprawdź, czy plik na pewno ma rozszerzenie .html (np. mojastrona.html), a nie .html.txt. Jeśli tak, zmień nazwę pliku, usuwając .txt. Upewnij się, że w ustawieniach folderów masz włączone wyświetlanie rozszerzeń plików.
• Niepoprawne kodowanie znaków: Jeśli widzisz "krzaczki" zamiast polskich znaków, upewnij się, że w sekcji Twojej strony masz tag .

Przeczytaj również: Jak połączyć CSS z HTML? 3 metody, by strona zachwycała!

Co dalej? Kiedy Notatnik przestaje być wystarczający

Notatnik to świetne narzędzie do stawiania pierwszych kroków, ale w miarę jak Twoje umiejętności będą rosły, szybko zauważysz jego ograniczenia. Brak kolorowania składni, automatycznych podpowiedzi czy wbudowanych narzędzi do debugowania sprawia, że praca nad większymi projektami staje się męcząca i podatna na błędy. W pewnym momencie, moim zdaniem, warto przesiąść się na bardziej zaawansowany edytor kodu.

Na szczęście, istnieje wiele darmowych i potężnych edytorów kodu, które znacząco ułatwią Ci pracę. Oto kilka z nich, które gorąco polecam:

• Notepad++: To rozbudowana wersja Notatnika, dostępna tylko dla Windows. Oferuje kolorowanie składni, numerację linii, możliwość otwierania wielu plików w zakładkach i wiele innych przydatnych funkcji.
• Visual Studio Code (VS Code): Bardzo popularny, darmowy i otwartoźródłowy edytor od Microsoftu, dostępny na wszystkie systemy operacyjne. Posiada ogromną liczbę rozszerzeń, wbudowany terminal, kontrolę wersji (Git) i inteligentne podpowiedzi kodu. To obecnie jeden z najczęściej wybieranych edytorów przez profesjonalistów.
• Sublime Text: Płatny (choć można go używać za darmo z przypomnieniami o zakupie), szybki i bardzo konfigurowalny edytor. Ceniony za swoją wydajność i minimalistyczny interfejs.

Zachęcam Cię do eksperymentowania z różnymi edytorami, aby znaleźć ten, który najlepiej odpowiada Twoim preferencjom. Pamiętaj też o dobrym nawyku sprawdzania poprawności kodu. Istnieją darmowe walidatory online, takie jak W3C Markup Validation Service, które pomogą Ci znaleźć błędy w Twoim HTML-u i nauczyć się pisać czysty, zgodny ze standardami kod.