Witaj! Jeśli kiedykolwiek zastanawiałeś się, jak powstają strony internetowe i chcesz poczuć magię tworzenia własnej witryny od zera, ten artykuł jest dla Ciebie. Pokażę Ci, jak przy użyciu prostego Notatnika stworzyć swoją pierwszą stronę internetową, zrozumieć podstawy języka HTML i zobaczyć, jak przeglądarka przekształca kod w coś widocznego. To praktyczny przewodnik, który pozwoli Ci "dotknąć" kodu bez potrzeby instalowania skomplikowanych programów.

Dlaczego tworzenie strony w Notatniku to wciąż świetny pomysł na start?

W dzisiejszych czasach, gdy dostępnych jest mnóstwo zaawansowanych narzędzi do tworzenia stron, może wydawać się to cofaniem w czasie. Jednak dla początkującego, który chce zrozumieć fundamenty, nauka od podstaw w prostym edytorze tekstu, takim jak Notatnik, ma ogromną wartość edukacyjną. Pozwala to na bezpośrednie zobaczenie, jak kod, który piszesz, jest interpretowany przez przeglądarkę, bez ukrywania się za abstrakcjami bardziej złożonych środowisk.

Cofnij się do korzeni: Zrozum, jak naprawdę działa internet

Kiedy tworzysz stronę w Notatniku, masz bezpośredni kontakt z czystym kodem HTML. To właśnie ten język jest podstawą każdej strony internetowej. Widząc, jak proste znaczniki budują strukturę i treść, zaczynasz rozumieć, co dzieje się "pod maską" przeglądarki. To solidny fundament, który zaprocentuje w przyszłości, gdy będziesz zgłębiać bardziej zaawansowane technologie. Jak podaje Creative Coding, to właśnie bezpośrednie obcowanie z kodem pozwala najlepiej zrozumieć jego działanie.

Czego potrzebujesz? (Spoiler: masz to już na swoim komputerze)

Najlepsza wiadomość jest taka, że do rozpoczęcia tej przygody nie potrzebujesz niczego specjalnego. Wystarczy Ci komputer z systemem Windows, na którym standardowo zainstalowany jest Notatnik. Jeśli korzystasz z innego systemu, podobny efekt uzyskasz za pomocą prostego edytora tekstu, jak TextEdit na macOS. Drugim niezbędnym narzędziem jest przeglądarka internetowa Chrome, Firefox, Edge, Safari każda z nich doskonale poradzi sobie z otwarciem Twojego pliku HTML.

Krok 1: Tworzymy fundament, czyli szkielet Twojej pierwszej strony WWW

Każda strona internetowa, niezależnie od jej złożoności, opiera się na języku HTML. HTML, czyli HyperText Markup Language (język znaczników hipertekstowych), to zbiór reguł i elementów, które definiują strukturę i treść strony. Przeglądarka internetowa, którą używasz do przeglądania sieci, potrafi czytać i interpretować ten kod, wyświetlając go w formie, którą widzimy na ekranie.

Co to jest HTML i dlaczego przeglądarka go "rozumie"?

Pomyśl o HTML jak o szkielecie strony. Mówi on przeglądarce, gdzie znajduje się nagłówek, gdzie akapit tekstu, a gdzie obrazek. Przeglądarki są zaprojektowane tak, aby rozpoznawać te znaczniki i na ich podstawie budować wizualną reprezentację strony. Bez HTML-a, przeglądarka nie wiedziałaby, co i jak ma wyświetlić.

Struktura absolutnie każdej strony: znaczniki ``, `` i ``

Każdy dokument HTML musi mieć pewien podstawowy szkielet. Zacznijmy od najważniejszych elementów:

• </code>: To deklaracja typu dokumentu. Mówi ona przeglądarce, że mamy do czynienia z dokumentem HTML5, czyli najnowszą wersją języka.
• : To główny kontener, który obejmuje całą zawartość strony. Wszystko, co znajduje się na Twojej stronie, musi być zamknięte w tym znaczniku.
• : Ta sekcja zawiera informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek. Znajduje się tu na przykład tytuł strony.
• : Tutaj umieszczamy całą treść, którą użytkownik faktycznie widzi na stronie teksty, obrazy, linki, wszystko.

Pierwszy kod do wklejenia: Pusty, ale działający szablon

Otwórz Notatnik i wklej poniższy kod. To absolutne minimum, które pozwoli Ci stworzyć pustą, ale poprawną strukturę strony:

Zwróć uwagę na znaczniki takie jak , który jest ważny dla poprawnego wyświetlania polskich znaków, oraz , który określa tytuł widoczny na karcie przeglądarki.

Krok 2: Czas wypełnić stronę treścią - pierwsze znaczniki w akcji

Teraz, gdy mamy już szkielet, dodajmy do naszej strony coś widocznego. HTML oferuje wiele znaczników, które pomagają nam formatować treść. Oto kilka podstawowych, które przydadzą się na początek:

Jak stworzyć nagłówek, który przyciąga wzrok? Poznaj tag ``

Nagłówki służą do hierarchicznego porządkowania treści. Najważniejszy nagłówek na stronie tworzymy za pomocą znacznika

Przykład użycia:

Witaj na mojej stronie!

Dodajemy akapity tekstu za pomocą znacznika `

`

Zwykły tekst, który chcemy umieścić na stronie, zazwyczaj umieszczamy w akapitach, używając znacznika

Przykład użycia:

To jest mój pierwszy akapit tekstu. Jestem podekscytowany, że mogę tworzyć własne strony internetowe!

Jak umieścić klikalny link do innej strony? Używamy ``

Chcesz, aby Twoi użytkownicy mogli przejść do innej strony? Służy do tego znacznik (od "anchor", czyli kotwica). Kluczowy jest atrybut href, który zawiera adres URL strony docelowej.

Przykład użycia linku do strony Google:

Kliknij tutaj, aby przejść do Google

Dodając atrybut target="_blank" do znacznika , sprawisz, że link otworzy się w nowej karcie przeglądarki.

Krok 3: Kluczowy moment - jak poprawnie zapisać plik i zobaczyć efekt?

To jest moment, w którym widzisz owoce swojej pracy! Poprawne zapisanie pliku jest kluczowe, aby przeglądarka mogła go zinterpretować. Zróbmy to krok po kroku.

Instrukcja zapisu, która ratuje przed frustracją: wybór "Wszystkie pliki" i rozszerzenie .html

Po wklejeniu kodu do Notatnika, wybierz z menu Plik opcję Zapisz jako.... W oknie, które się pojawi, zwróć uwagę na dwa kluczowe elementy:

• Zapisz jako typ: Z rozwijanej listy wybierz opcję Wszystkie pliki (\*.\*). To bardzo ważne, ponieważ domyślnie Notatnik może próbować zapisać plik jako tekstowy (.txt).
• Nazwa pliku: Nadaj swojemu plikowi nazwę, która musi kończyć się rozszerzeniem .html. Najczęściej używana nazwa dla strony głównej to index.html. Możesz też nazwać go np. moja_pierwsza_strona.html.

Pamiętaj: Nazwa pliku z rozszerzeniem .html informuje system i przeglądarkę, że jest to strona internetowa.

Dlaczego kodowanie UTF-8 jest niezbędne dla polskich znaków?

W tym samym oknie zapisu, znajdź opcję Kodowanie. Upewnij się, że jest wybrana opcja UTF-8. Dlaczego to takie ważne? Kodowanie UTF-8 to standard, który pozwala na poprawne wyświetlanie znaków z różnych języków, w tym polskich liter diakrytycznych (ą, ć, ę, ł, ń, ó, ś, ź, ż). Bez tego, zamiast polskich znaków, możesz zobaczyć dziwne symbole.

Otwieramy Twoje dzieło w przeglądarce - chwila prawdy!

Po zapisaniu pliku, zlokalizuj go w folderze, w którym go zapisałeś. Teraz wystarczy dwukrotnie kliknąć na ikonę pliku. Powinien on otworzyć się w Twojej domyślnej przeglądarce internetowej, prezentując treść, którą wpisałeś w Notatniku!

Krok 4: Dodajmy trochę stylu! Podstawy CSS bez tajemnic

HTML odpowiada za strukturę, ale to CSS (Cascading Style Sheets, czyli Kaskadowe Arkusze Stylów) nadaje stronie wygląd. CSS pozwala nam kontrolować kolory, czcionki, rozmiary, odstępy i wiele więcej. Na początek pokażę Ci, jak dodać proste style bezpośrednio w pliku HTML.

Czym jest CSS i dlaczego oddziela się wygląd od struktury?

CSS to język, który opisuje, jak elementy HTML mają wyglądać. Oddzielenie wyglądu (CSS) od struktury (HTML) jest jedną z fundamentalnych zasad tworzenia stron internetowych. Dzięki temu kod jest bardziej czytelny, łatwiejszy w utrzymaniu i modyfikacji. Możesz zmienić wygląd całej strony, edytując tylko plik CSS, bez dotykania kodu HTML.

Gdzie umieścić kod CSS? Prosta metoda na start wewnątrz tagu ``

Najprostszym sposobem na dodanie stylów do naszej pierwszej strony jest umieszczenie ich w sekcji , wewnątrz nowego znacznika . Wszystkie reguły CSS, które tu wpiszesz, będą miały zastosowanie do elementów na Twojej stronie.

Praktyczne przykłady: Jak zmienić kolor tła i czcionki na Twojej stronie?

Dodajmy teraz trochę kolorów. Wklej poniższy kod CSS do sekcji , pomiędzy znaczniki i :

body { font-family: Arial, sans-serif; /* Użyj czcionki Arial lub podobnej bezszeryfowej */ background-color: #f4f4f4; /* Jasnoszary kolor tła */ color: #333; /* Ciemnoszary kolor tekstu */ margin: 20px; /* Dodaj marginesy wokół całej treści */ text-align: center; /* Wyrównaj tekst do środka */
} h1 { color: #0056b3; /* Granatowy kolor dla nagłówka */
} p { line-height: 1.6; /* Zwiększ odstęp między liniami tekstu */
} a { color: #007bff; /* Niebieski kolor dla linku */ text-decoration: none; /* Usuń podkreślenie linku */
} a:hover { text-decoration: underline; /* Dodaj podkreślenie po najechaniu myszką */
}

Po zapisaniu pliku i odświeżeniu strony w przeglądarce, zobaczysz znaczącą różnicę w jej wyglądzie!

Kompletny kod Twojej pierwszej strony: skopiuj, wklej i eksperymentuj

Oto pełny kod Twojej pierwszej, prostej strony internetowej, łączący HTML i CSS. Możesz go skopiować, wkleić do Notatnika, zapisać jako index.html (pamiętając o kodowaniu UTF-8 i typie pliku "Wszystkie pliki") i otworzyć w przeglądarce.

W pełni działający przykład prostej strony-wizytówki z nagłówkiem, tekstem i stylami

    

 
Witaj na Mojej Pierwszej Stronie!
 
To jest mój pierwszy akapit tekstu, stworzony w Notatniku. Jestem dumny z tego, co udało mi się osiągnąć!
 
Możesz kliknąć tutaj, aby przejść do Google.
 
Eksperymentuj z kodem i zobacz, jak zmienia się wygląd strony!

Jak modyfikować gotowy kod i obserwować zmiany w przeglądarce?

Teraz najlepsza część zabawa! Zmieniaj tekst, kolory w sekcji , dodawaj nowe akapity (

Gratulacje, Twoja pierwsza strona działa! Co dalej?

Stworzenie i uruchomienie tej prostej strony to Twój pierwszy, ważny krok w świecie tworzenia stron internetowych. Zrozumiałeś podstawy HTML i CSS, nauczyłeś się zapisywać pliki i widzieć efekty swojej pracy. To ogromny sukces!

Ograniczenia Notatnika: Dlaczego profesjonaliści używają innych narzędzi?

Notatnik jest świetny do nauki podstaw, ale ma swoje ograniczenia. Profesjonalni deweloperzy używają bardziej zaawansowanych edytorów kodu, takich jak Visual Studio Code, Sublime Text czy Notepad++. Te narzędzia oferują funkcje, które znacznie ułatwiają pracę: podświetlanie składni (kolorowanie kodu), autouzupełnianie, podpowiedzi, wbudowane narzędzia do kontroli wersji (Git) czy podgląd na żywo. To wszystko przyspiesza proces tworzenia i pomaga unikać błędów.

Przeczytaj również: Jak dodać tło HTML – proste sposoby na atrakcyjne tło strony

Twoja ścieżka rozwoju: Odkryj moc zaawansowanego CSS i podstawy JavaScript

To, co zrobiliśmy, to dopiero początek. Świat web developmentu jest ogromny i fascynujący. Po opanowaniu podstaw HTML i CSS, warto zgłębić:

• Bardziej zaawansowany CSS: Poznaj selektory, pozycjonowanie elementów, responsywność (dostosowanie strony do różnych rozmiarów ekranów), animacje i przejścia.
• JavaScript: To język programowania, który dodaje interaktywność Twoim stronom. Dzięki niemu możesz tworzyć dynamiczne elementy, formularze, gry i wiele więcej.

Pamiętaj, że nauka to proces. Eksperymentuj, buduj, popełniaj błędy i ucz się na nich. Każda kolejna linijka kodu przybliża Cię do celu!