` oraz znacznikach ``, `

Twoja pierwsza strona WWW: zrobisz ją w 5 minut, używając tylko Notatnika

Wielu moich uczniów pyta mnie, od czego zacząć naukę tworzenia stron internetowych. Zawsze odpowiadam: od Notatnika! To może brzmieć archaicznie w dobie zaawansowanych edytorów kodu, ale uwierz mi, to najlepsza szkoła. Pozwala zrozumieć absolutne fundamenty, jak przeglądarka interpretuje kod i jak buduje stronę, bez ukrywania złożoności przez automatyczne uzupełnianie czy podpowiedzi. To świetne ćwiczenie edukacyjne, które buduje solidne podstawy.

Czego dokładnie potrzebujesz? (Spoiler: masz to już na komputerze)

Do tego poradnika nie potrzebujesz żadnego specjalistycznego oprogramowania. Wystarczy Ci Notatnik (lub inny prosty edytor tekstu, jeśli używasz systemu operacyjnego innego niż Windows) oraz przeglądarka internetowa, taka jak Chrome, Firefox czy Edge. Obie te rzeczy są już zazwyczaj zainstalowane na większości komputerów, więc możesz zacząć od razu!

Krok 1: Przygotowanie miejsca pracy czysty plik w Notatniku

Jak uruchomić Notatnik w systemie Windows?

Zacznijmy od uruchomienia naszego głównego narzędzia Notatnika. To bardzo proste:

1. Kliknij ikonę lupy lub pole wyszukiwania na pasku zadań (obok przycisku Start).
2. Wpisz "Notatnik" (lub "Notepad" w angielskiej wersji systemu).
3. Kliknij ikonę aplikacji Notatnik, która pojawi się w wynikach wyszukiwania.

Otworzy się puste okno programu, gotowe na przyjęcie Twojego pierwszego kodu HTML.

Pierwsze linijki kodu: stwórzmy szkielet strony

Gdy Notatnik jest już otwarty, masz przed sobą czystą kartkę. To właśnie tutaj wpiszemy kod, który stanie się Twoją stroną internetową. Na razie nie musisz się martwić o to, co dokładnie wpisać skupimy się na tym w kolejnych krokach. Ważne jest, abyś miał otwarty program i był gotowy do pisania.

Krok 2: Niezbędna struktura HTML co musi zawierać każdy plik?

Każda strona internetowa, niezależnie od jej złożoności, opiera się na podstawowej strukturze. To jak szkielet budynku bez niego nic nie będzie stało stabilnie. Pokażę Ci, co musi znaleźć się w każdym pliku HTML.

Deklaracja ``: dlaczego to takie ważne?

Znaczniki ``, `` i ``: poznaj anatomię strony internetowej

Po deklaracji `DOCTYPE` następuje główny znacznik ``. Jest on "opakowaniem" dla całej zawartości Twojej strony. Wewnątrz `` znajdują się dwie główne sekcje:

• ``: 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 (np. tytuł strony, kodowanie znaków, linki do stylów CSS).
• ``: To jest serce Twojej strony! Wszystko, co użytkownik widzi w oknie przeglądarki tekst, obrazy, linki, nagłówki znajduje się właśnie tutaj.

Oto jak wygląda podstawowy szkielet:

Klucz do polskich znaków: magiczna linijka ``

Jednym z najczęstszych problemów, z którymi spotykają się początkujący, są "krzaczki" zamiast polskich znaków (ą, ę, ć, ł, ń, ó, ś, ź, ż). Aby tego uniknąć, musisz powiedzieć przeglądarce, jakiego kodowania znaków używasz. Robi się to za pomocą znacznika ``, który umieszczamy w sekcji `

Tytuł Twojej strony, czyli co zobaczą inni na karcie przeglądarki

Każda strona powinna mieć tytuł. To ten tekst, który pojawia się na karcie przeglądarki lub na pasku tytułowym okna. Ustawiamy go za pomocą znacznika `

Krok 3: Dodajemy treść niech Twoja strona ożyje!

Mając już szkielet, możemy zacząć wypełniać naszą stronę treścią. Pokażę Ci podstawowe znaczniki, które pozwolą Ci dodać nagłówki, akapity, linki i obrazy.

Jak stworzyć nagłówki, by uporządkować treść? (``, ``)

Nagłówki służą do strukturyzowania treści i dzielenia jej na sekcje. Mamy do dyspozycji sześć poziomów nagłówków, od `

` (najważniejszy, używany zazwyczaj raz na stronie dla głównego tytułu) do `

` (najmniej ważny). Używaj ich logicznie, aby ułatwić czytelnikom nawigację po treści.

 
Witaj na mojej stronie!
 
O mnie
 
To jest krótki akapit o mnie.
 
Moje zainteresowania
 
Lubię programować i czytać książki.

Twój pierwszy akapit tekstu ze znacznikiem `

`

Akapity to podstawowy sposób na prezentowanie tekstu na stronie. Każdy akapit powinien być zamknięty w znaczniku `

`. Przeglądarka automatycznie doda odstępy między akapitami, co poprawia czytelność.

 
Witaj na mojej stronie!
 
To jest moja pierwsza strona internetowa, którą stworzyłem w Notatniku. Jestem bardzo podekscytowany!
 
Mam nadzieję, że ten poradnik pomoże również Tobie w postawieniu pierwszych kroków w świecie HTML.

Jak dodać link do innej strony za pomocą znacznika ``?

Linki (hiperłącza) to esencja internetu. Pozwalają łączyć Twoją stronę z innymi stronami, plikami czy nawet sekcjami w tym samym dokumencie. Tworzymy je za pomocą znacznika `` (anchor), a adres docelowy podajemy w atrybucie `href` (hypertext reference).

 
Odwiedź moją ulubioną wyszukiwarkę: Google.

Chcesz wstawić obrazek? Użyj znacznika ``

Obrazki wzbogacają każdą stronę. Aby wstawić obrazek, używamy znacznika ``. Jest to znacznik samodomykający się, co oznacza, że nie ma znacznika zamykającego ``. Musisz podać ścieżkę do obrazka w atrybucie `src` (source) oraz tekst alternatywny w atrybucie `alt`, który jest ważny dla dostępności (wyświetla się, gdy obrazek się nie załaduje lub dla osób korzystających z czytników ekranu).

Jeśli obrazek znajduje się w tym samym folderze co plik HTML, wystarczy podać jego nazwę. Jeśli jest w podfolderze, musisz podać pełną ścieżkę.

Krok 4: Zapisywanie pliku najważniejszy moment całego procesu

Teraz, gdy masz już swój kod, nadszedł najważniejszy moment: zapisanie pliku w taki sposób, aby przeglądarka rozpoznała go jako stronę internetową. To tutaj często pojawiają się błędy, więc bądź bardzo uważny!

Dlaczego opcja "Zapisz jako" jest kluczowa?

Zamiast zwykłego "Zapisz", zawsze używaj opcji "Zapisz jako" (Plik > Zapisz jako...). Pozwala ona na pełną kontrolę nad nazwą pliku, jego rozszerzeniem oraz, co najważniejsze, nad kodowaniem znaków. To te szczegóły decydują o tym, czy Twój plik zostanie poprawnie zinterpretowany jako strona WWW.

Jak prawidłowo nazwać plik? Tajemnica rozszerzenia `.html`

Nadaj swojemu plikowi sensowną nazwę, na przykład `index.html` (index.html to standardowa nazwa dla strony głównej). Kluczowe jest jednak dodanie rozszerzenia `.html` na końcu nazwy. To właśnie to rozszerzenie informuje system operacyjny i przeglądarkę, że mają do czynienia z dokumentem HTML, a nie zwykłym plikiem tekstowym.

Ustawienie "Wszystkie pliki" i kodowanie UTF-8: uniknij typowych błędów

W oknie "Zapisz jako" musisz zwrócić uwagę na dwie bardzo ważne rzeczy:

1. "Zapisz jako typ": Domyślnie Notatnik może próbować zapisać plik jako "Dokument tekstowy (*.txt)". Musisz to zmienić na "Wszystkie pliki (*.*)". Bez tego Notatnik doda rozszerzenie `.txt` do Twojej nazwy, tworząc plik np. `index.html.txt`, który nie zostanie rozpoznany jako strona internetowa.

2. "Kodowanie": Na dole okna "Zapisz jako" znajdziesz opcję kodowania. Upewnij się, że wybrane jest "UTF-8". To gwarantuje, że wszystkie znaki, w tym polskie litery, zostaną prawidłowo wyświetlone w przeglądarce. Jeśli wybierzesz inne kodowanie (np. ANSI), możesz ponownie zobaczyć "krzaczki".

Po ustawieniu tych opcji kliknij "Zapisz". Gratulacje, Twój plik HTML jest gotowy!

Krok 5: Wielka chwila jak otworzyć swoją stronę w przeglądarce?

Masz już gotowy plik HTML. Teraz pora zobaczyć efekty swojej pracy!

Otwieranie pliku HTML w Chrome, Firefox lub Edge

Otworzenie Twojej pierwszej strony WWW jest niezwykle proste:

• Znajdź plik, który właśnie zapisałeś (np. `index.html`) w folderze na swoim komputerze.
• Dwukrotnie kliknij na ten plik. System operacyjny powinien automatycznie otworzyć go w Twojej domyślnej przeglądarce internetowej.
• Alternatywnie, możesz przeciągnąć plik z folderu bezpośrednio do otwartego okna przeglądarki.

Powinieneś zobaczyć swoją stronę, dokładnie tak, jak ją zakodowałeś! Jeśli coś poszło nie tak, nie martw się to normalne na początku. Przejdźmy do rozwiązywania problemów.

Coś poszło nie tak? Najczęstsze problemy i jak je rozwiązać

Każdy programista, nawet ten najbardziej doświadczony, popełnia błędy. To część procesu nauki! Jeśli Twoja strona nie wygląda tak, jak oczekiwałeś, prawdopodobnie napotkałeś jeden z tych typowych problemów.

Moja strona wyświetla "krzaczki" zamiast polskich liter: co robić?

To najczęstszy problem, o którym już wspominałem. Jeśli widzisz dziwne znaki zamiast "ą", "ę" itp., sprawdź dwie rzeczy:

• W kodzie HTML: Czy w sekcji `` masz dodany znacznik ``? Upewnij się, że jest on poprawnie zapisany.
• Podczas zapisu pliku: Czy na pewno zapisałeś plik w Notatniku z kodowaniem "UTF-8"? Otwórz plik ponownie w Notatniku, wybierz "Plik" > "Zapisz jako...", i sprawdź opcję "Kodowanie" na dole okna. Jeśli było inne, zmień na UTF-8 i zapisz plik ponownie (nadpisując istniejący).

Widzę tylko kod, a nie stronę internetową: gdzie jest błąd?

Jeśli po otwarciu pliku w przeglądarce widzisz po prostu cały swój kod HTML, a nie sformatowaną stronę, oznacza to, że przeglądarka nie rozpoznała pliku jako dokumentu HTML. Prawie na pewno problem leży w sposobie zapisu pliku:

• Rozszerzenie pliku: Upewnij się, że Twój plik na pewno ma rozszerzenie `.html` (np. `mojastrona.html`), a nie `mojastrona.html.txt` czy `mojastrona.txt`. W systemie Windows, aby zobaczyć rozszerzenia plików, musisz wejść w "Opcje folderów" (lub "Opcje Eksploratora plików") i odznaczyć opcję "Ukryj rozszerzenia znanych typów plików".
• "Zapisz jako typ": Czy podczas zapisu w Notatniku wybrałeś opcję "Wszystkie pliki (*.*)", a nie "Dokumenty tekstowe (*.txt)"? Jeśli nie, Notatnik automatycznie dodał `.txt` do nazwy pliku. Zapisz plik ponownie, tym razem poprawnie.

Co dalej? Pierwsze kroki w świecie prawdziwego kodowania

Stworzenie strony w Notatniku to fantastyczny początek, ale muszę być z Tobą szczery to tylko wierzchołek góry lodowej. Notatnik jest świetny do nauki podstaw, ale w profesjonalnym świecie używa się innych narzędzi i technologii.

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

Notatnik nie oferuje wielu funkcji, które ułatwiają pracę programistom. Nie koloruje składni, nie podpowiada znaczników, nie wskazuje błędów. Profesjonalne tworzenie stron to także stylizowanie (CSS) i dodawanie interaktywności (JavaScript), czego Notatnik nie wspiera. To narzędzie do zrozumienia fundamentów, ale nie do efektywnej pracy nad większymi projektami.

Podstawy CSS: jak dodać kolory i style do Twojej prostej strony?

Twoja strona jest teraz funkcjonalna, ale prawdopodobnie wygląda dość... prosto. Aby dodać kolory, zmienić czcionki, ustawić marginesy czy stworzyć bardziej złożony układ, potrzebujesz CSS (Cascading Style Sheets). To język, który odpowiada za wygląd strony. Nauka CSS to naturalny kolejny krok po opanowaniu HTML.

Przeczytaj również: Jak zmienić czcionkę w HTML? CSS, Google Fonts i optymalne praktyki

Rekomendowane edytory kodu dla początkujących

Gdy poczujesz się pewnie z HTML i Notatnikiem, warto przesiąść się na bardziej zaawansowany edytor kodu. Ułatwią Ci one pracę i przyspieszą naukę. Oto kilka popularnych i darmowych opcji, które polecam:

• Notepad++: Prosty, lekki, ale znacznie bardziej funkcjonalny niż Notatnik. Oferuje kolorowanie składni, numerowanie linii i podstawowe funkcje edycji kodu.
• Visual Studio Code (VS Code): To obecnie jeden z najpopularniejszych edytorów kodu na świecie. Jest darmowy, potężny i oferuje mnóstwo rozszerzeń, które wspierają rozwój w niemal każdej technologii webowej. Ma wbudowane kolorowanie składni, autouzupełnianie i wiele innych udogodnień.
• Sublime Text: Płatny, ale z darmową wersją próbną bez ograniczeń czasowych. Ceniony za szybkość i minimalistyczny interfejs.

Wybór odpowiedniego edytora to kolejny krok w Twojej podróży programistycznej. Pamiętaj, że każdy ekspert kiedyś zaczynał od podstaw. Powodzenia!