Rozpoczynanie przygody z tworzeniem stron internetowych może wydawać się skomplikowane, ale zapewniam Cię, że wcale takie nie jest! Dziś pokażę Ci, jak stworzyć swoją pierwszą, prostą podstronę internetową, używając narzędzia, które masz już na swoim komputerze z systemem Windows Notatnika. To idealny sposób, aby bez żadnych dodatkowych narzędzi i skomplikowanych programów postawić pierwsze kroki w świecie HTML i zrozumieć jego podstawy.

Dlaczego Notatnik to dobry (i jednocześnie ograniczający) start w świat HTML?

Z mojego doświadczenia wynika, że Notatnik jest naprawdę doskonałym narzędziem do rozpoczęcia nauki HTML dla absolutnie początkujących. Jego prostota, a właściwie brak jakichkolwiek "wspomagaczy", zmusza nas do ręcznego pisania każdego elementu kodu. To właśnie dzięki temu procesowi, bez podpowiedzi czy automatycznego uzupełniania, zaczynamy naprawdę rozumieć, co robimy i dlaczego dany tag wygląda tak, a nie inaczej.

Pełna kontrola i nauka od zera: Zalety prostego edytora

Gdy zaczynałem swoją przygodę z kodowaniem, również korzystałem z Notatnika. To, co wtedy wydawało się uciążliwe brak podświetlania składni czy autouzupełniania z perspektywy czasu okazało się ogromną zaletą edukacyjną. Musiałem ręcznie wpisać każdy nawias, każdą literę, każdy atrybut. To wymusiło na mnie pełne zrozumienie każdego elementu kodu i jego funkcji. Buduje to solidne fundamenty, które procentują w przyszłości, gdy przesiadasz się na bardziej zaawansowane narzędzia. W Notatniku nie ma drogi na skróty, co jest najlepszym nauczycielem.

Pułapki i ograniczenia Notatnika: Kiedy warto pomyśleć o czymś więcej?

Oczywiście, Notatnik ma swoje pułapki i ograniczenia, o których warto pamiętać. Brak podświetlania składni sprawia, że łatwo o błędy, które są trudniejsze do wyłapania. Nie ma autouzupełniania, które przyspiesza pisanie kodu, ani walidacji, która od razu wskazałaby Ci literówki. Co więcej, nie oferuje on wbudowanego podglądu strony, więc każdą zmianę musisz zapisywać i odświeżać w przeglądarce. Te braki mogą spowalniać pracę na bardziej zaawansowanym etapie. Dlatego też, kiedy opanujesz już podstawy i poczujesz się pewniej, zdecydowanie warto pomyśleć o przesiadce na bardziej wyspecjalizowane edytory kodu, takie jak Visual Studio Code, o czym opowiem na końcu.

Fundament każdej podstrony: Niezbędna struktura dokumentu HTML

Wyobraź sobie budowę domu. Nie zaczynasz od dachu, prawda? Najpierw musisz wylać solidne fundamenty i postawić szkielet. Podobnie jest z każdą stroną HTML. Ma ona swój podstawowy szkielet, który jest fundamentem, na którym buduje się całą zawartość. Zrozumienie tej struktury to klucz do tworzenia poprawnych i funkcjonalnych stron.

Krok 1: Otwórz Notatnik i wklej ten podstawowy szkielet kodu

Zacznijmy od otwarcia Notatnika. Gdy już to zrobisz, wklej do niego poniższy kod. To jest absolutny punkt wyjścia dla każdej strony, którą będziesz tworzyć. Nie martw się, jeśli na razie nie rozumiesz każdego elementu zaraz wszystko wyjaśnię.

Ten kod to nasz fundament. Zawsze zaczynaj od niego, a potem będziesz dodawać do niego swoją własną treść.

Co oznaczają `DOCTYPE`, `head` i `body`? Proste wyjaśnienie dla każdego

Przyjrzyjmy się bliżej tym podstawowym elementom:

• </code>: To nie jest tag HTML w ścisłym sensie, a raczej deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5, czyli najnowszą wersją HTML. Jest to ważne, ponieważ dzięki temu przeglądarka wie, jak poprawnie zinterpretować kod.
• : To główny kontener dla całej Twojej strony. Wszystko, co znajduje się na stronie, musi być umieszczone wewnątrz tego tagu. Atrybut lang="pl" informuje przeglądarkę (i wyszukiwarki), że język treści na stronie to polski.
• : Sekcja zawiera metadane o stronie, czyli informacje, które nie są bezpośrednio widoczne dla użytkownika na stronie, ale są kluczowe dla jej działania i wyświetlania. Znajdują się tu takie elementy jak tytuł strony (widoczny w zakładce przeglądarki), linki do arkuszy stylów (CSS) czy skrypty JavaScript. Jest to niewidoczna, ale niezwykle ważna część strony.
• : To jest serce Twojej strony, jeśli chodzi o widoczną treść. Wszystko, co użytkownik zobaczy na ekranie tekst, obrazy, linki, nagłówki, listy musi znajdować się wewnątrz tagu . Z perspektywy użytkownika to właśnie ta sekcja jest najważniejsza.

Klucz do polskich znaków: Dlaczego linijka `` jest Twoim największym przyjacielem?

Zwróć szczególną uwagę na linijkę w sekcji . Dla nas, w Polsce, jest ona absolutnie kluczowa! Bez niej, polskie znaki diakrytyczne, takie jak "ą", "ę", "ć", "ń", "ó", "ś", "ł", "ż", "ź", zostaną wyświetlone jako nieczytelne "krzaczki". UTF-8 to standard kodowania znaków, który obsługuje praktycznie wszystkie języki świata, w tym nasz polski alfabet. Zawsze upewnij się, że ta linijka znajduje się w Twoim kodzie, aby Twoja strona wyglądała profesjonalnie i była czytelna dla polskich użytkowników.

Jak poprawnie zapisać plik jako stronę HTML? Uniknij najczęstszego błędu!

Wielu początkujących popełnia błąd właśnie na tym etapie. Prawidłowe zapisanie pliku jako strony HTML to kluczowy krok, bez którego Twoja praca nie będzie widoczna w przeglądarce. Nie martw się, pokażę Ci, jak to zrobić poprawnie.

Instrukcja krok po kroku: Zapisywanie pliku z rozszerzeniem .html

Postępuj zgodnie z poniższymi krokami, aby zapisać swój plik:

1. W Notatniku wybierz z górnego menu opcję "Plik", a następnie "Zapisz jako...".
2. Otworzy się okno "Zapisz jako". Znajdź pole tekstowe oznaczone jako "Nazwa pliku".
3. W tym polu wpisz pełną nazwę pliku wraz z rozszerzeniem .html. Na przykład: moja_podstrona.html. Pamiętaj, aby nazwy plików były proste, bez spacji i polskich znaków (zamiast spacji użyj podkreślnika, np. moja_pierwsza_strona.html).
4. To jest najważniejszy krok! Koniecznie zmień "Typ zapisu" (lub "Zapisz jako typ") z domyślnego "Dokumenty tekstowe (*.txt)" na "Wszystkie pliki (*.*)". Bez tej zmiany Notatnik doda rozszerzenie .txt na końcu Twojej nazwy, co spowoduje, że plik będzie np. moja_podstrona.html.txt i przeglądarka go nie rozpozna jako strony internetowej.
5. Wybierz folder, w którym chcesz zapisać swój plik (np. na Pulpicie lub w specjalnie utworzonym folderze "Moje strony HTML").
6. Kliknij przycisk "Zapisz".

Po wykonaniu tych kroków powinieneś mieć w wybranym folderze plik z ikoną Twojej domyślnej przeglądarki internetowej.

Jak sprawdzić, czy działa? Otwieranie Twojej nowej podstrony w przeglądarce

Teraz nadszedł moment prawdy! Sprawdźmy, czy Twoja pierwsza podstrona działa:

1. Przejdź do folderu, w którym zapisałeś plik moja_podstrona.html.
2. Znajdź ten plik. Powinien mieć ikonę Twojej domyślnej przeglądarki internetowej (np. Chrome, Firefox, Edge).
3. Kliknij go dwukrotnie lewym przyciskiem myszy. Powinien otworzyć się automatycznie w Twojej domyślnej przeglądarce internetowej.
4. Alternatywnie, możesz kliknąć plik prawym przyciskiem myszy, wybrać opcję "Otwórz za pomocą", a następnie wybrać z listy swoją ulubioną przeglądarkę.

Jeśli wszystko poszło zgodnie z planem, zobaczysz pustą stronę z tytułem "Moja Pierwsza Podstrona" w zakładce przeglądarki. Gratulacje! Właśnie stworzyłeś swoją pierwszą stronę HTML!

Czas na treść! Twoje pierwsze nagłówki, akapity i linki na podstronie

Skoro fundamenty i szkielet mamy już gotowe, czas wypełnić naszą stronę treścią. Wszystko, co zobaczy użytkownik, będziemy dodawać w sekcji . Zachęcam Cię do eksperymentowania z poniższymi przykładami. Pamiętaj, aby po każdej zmianie zapisać plik w Notatniku (Ctrl+S) i odświeżyć stronę w przeglądarce (F5), aby zobaczyć efekty.

Hierarchia jest ważna: Dodawanie nagłówków `` i akapitów `

`

Nagłówki służą do strukturyzowania treści i informowania o jej hierarchii.

Wklej poniższy kod do sekcji , zastępując komentarz :

Witaj na mojej pierwszej podstronie!
To jest podtytuł
Ten tekst to mój pierwszy akapit. Tutaj mogę pisać o czym tylko zechcę.
Pamiętaj, aby zapisać plik po każdej zmianie i odświeżyć przeglądarkę!

Zapisz plik i odśwież przeglądarkę. Zobaczysz, jak tekst został sformatowany!

Jak połączyć podstronę ze stroną główną? Tworzenie linku za pomocą ``

Strony internetowe to sieć połączonych dokumentów, a linki (hiperłącza) są tym, co je łączy. Używamy do tego tagu (od ang. "anchor") z atrybutem href (od "hypertext reference"), który wskazuje adres docelowy.

Dodaj te linki pod akapitami:

Wróć do strony głównej.
Odwiedź Google.

Pierwszy link zakłada, że masz plik index.html w tym samym folderze (to często nazwa głównej strony). Drugi link prowadzi do zewnętrznej strony. Atrybut target="_blank" sprawia, że link otwiera się w nowej karcie przeglądarki, co jest dobrym zwyczajem, gdy kierujesz użytkownika poza swoją witrynę.

Chcesz dodać obrazek? Oto jak użyć tagu ``

Strony bez obrazków są nudne! Aby wstawić obrazek, używamy tagu . Jest to tag samodomykający się, co oznacza, że nie ma tagu zamykającego . Kluczowe atrybuty to src (ścieżka do obrazka) i alt (tekst alternatywny, ważny dla SEO i dostępności).

Dodaj ten kod, pamiętając, że musisz mieć plik obrazka (np. moj_obrazek.jpg) w tym samym folderze co Twój plik HTML:

Jeśli obrazek nie wyświetla się, upewnij się, że nazwa pliku w atrybucie src jest dokładnie taka sama jak nazwa pliku obrazka (wielkość liter ma znaczenie!) i że znajduje się on w tym samym folderze co Twoja strona HTML.

Jak zorganizować informacje? Tworzenie list wypunktowanych i numerowanych

Listy to świetny sposób na uporządkowanie informacji. Mamy dwa główne typy: listy wypunktowane (nieuporządkowane,

Moje ulubione rzeczy:
 
Kawa
 
Książki
 
Programowanie
 
Kroki do stworzenia strony:
 
Otwórz Notatnik.
 
Wklej szkielet HTML.
 
Zapisz plik jako .html.
 
Dodaj treść.

  
Ten tekst jest granatowy na jasnoniebieskim tle.
 

Pierwsza sekcja treści.

Druga sekcja treści, oddzielona linią.