Witaj w świecie tworzenia stron internetowych! Ten artykuł to Twój przewodnik krok po kroku, który pokaże Ci, jak od podstaw stworzyć swoją pierwszą, prostą stronę HTML, używając jedynie Notatnika. Przygotuj się na fascynującą podróż do fundamentów web developmentu, która otworzy przed Tobą drzwi do cyfrowego świata.

Dlaczego Notatnik to wszystko, czego potrzebujesz na start?

Kiedy zaczynasz swoją przygodę z tworzeniem stron internetowych, prostota jest Twoim najlepszym przyjacielem. Dlatego właśnie Notatnik, narzędzie dostępne w każdym systemie Windows, jest idealnym miejscem do rozpoczęcia nauki HTML. Nie potrzebujesz żadnych skomplikowanych programów ani drogiego oprogramowania. Notatnik pozwala Ci skupić się na tym, co najważniejsze: na nauce samej składni HTML i zrozumieniu, jak buduje się strukturę strony internetowej. Eliminuje to początkowy chaos związany z obsługą zaawansowanych edytorów, pozwalając Ci w pełni skoncentrować się na kodzie.

Zapomnij o skomplikowanych programach zacznij od podstaw

Wielu początkujących zniechęca się, widząc interfejsy profesjonalnych edytorów kodu, pełnych funkcji, których na początku nie rozumieją. Notatnik jest inny. Jego minimalistyczny wygląd sprawia, że od razu wiesz, co masz robić. Możesz po prostu pisać kod, obserwować, jak działa, i stopniowo budować swoją wiedzę. To podejście pozwala na głębsze zrozumienie podstaw, bez rozpraszania się zbędnymi opcjami. W końcu, zanim nauczysz się biegać, musisz nauczyć się chodzić, prawda?

Co to jest HTML i dlaczego nie jest to język programowania?

Zanim zagłębimy się w kodowanie, wyjaśnijmy sobie, czym właściwie jest HTML. HTML to skrót od HyperText Markup Language, czyli Hipertekstowy Język Znaczników. Jego głównym zadaniem jest strukturyzowanie treści na stronach internetowych. Myśl o nim jak o szkielecie strony definiuje, co jest nagłówkiem, co akapitem, co obrazkiem, a co linkiem. Ważne jest, aby zrozumieć, że HTML nie jest językiem programowania. Nie pozwala na wykonywanie skomplikowanych operacji logicznych, obliczeń czy tworzenie dynamicznych interakcji. Jest to język opisowy, który mówi przeglądarce, jak ma wyświetlić poszczególne elementy strony.

Krok 1: Przygotowanie warsztatu pracy jak uruchomić Notatnik?

Pierwszym krokiem jest uruchomienie programu Notatnik. Jest on dostępny w każdym systemie operacyjnym Windows, więc nie musisz niczego instalować. Oto jak możesz go znaleźć:

1. Kliknij przycisk Start w lewym dolnym rogu ekranu.
2. Wpisz "Notatnik" (lub "Notepad") w pasku wyszukiwania.
3. Kliknij ikonę Notatnika, która pojawi się w wynikach wyszukiwania.

Alternatywnie, możesz użyć skrótu klawiaturowego: naciśnij klawisze Win + R, wpisz `notepad` i naciśnij Enter. Niezależnie od metody, przed Tobą otworzy się proste, białe okno Twój nowy plac budowy dla stron internetowych.

Krok 2: Fundament każdej strony poznaj obowiązkową strukturę HTML

Każda strona internetowa, nawet najprostsza, musi mieć swoją podstawową strukturę. W HTML5 jest ona bardzo prosta i zawsze wygląda podobnie. Poznajmy jej kluczowe elementy, które musisz umieścić na samym początku swojego kodu.

Deklaracja ``: sygnał dla przeglądarki, z czym ma do czynienia

Na samym początku pliku HTML umieszczamy specjalną deklarację: <! DOCTYPE html>. Ten krótki zapis to sygnał dla przeglądarki internetowej, informujący ją, że mamy do czynienia z dokumentem napisanym w najnowszej wersji języka HTML, czyli HTML5. Jest to niezwykle ważne, ponieważ przeglądarka na tej podstawie wie, jak poprawnie zinterpretować i wyświetlić zawartość strony. Bez tej deklaracji strona może być renderowana w trybie zgodności wstecznej, co może prowadzić do nieoczekiwanych problemów z wyświetlaniem.

Znaczniki ``, `` i ``: szkielet Twojej pierwszej strony

Po deklaracji DOCTYPE, cała zawartość strony internetowej musi być umieszczona wewnątrz głównego znacznika . Ten znacznik otacza wszystko, co znajduje się na stronie. Wewnątrz wyróżniamy dwie kluczowe sekcje:

• : Ta sekcja zawiera tzw. metadane, czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika. Znajdują się tu na przykład ustawienia dotyczące kodowania znaków, tytuł strony czy linki do zewnętrznych arkuszy stylów.
• : To serce Twojej strony. Wszystko, co widzisz na ekranie tekst, obrazy, linki, przyciski znajduje się właśnie wewnątrz znacznika .

Jak ustawić polskie znaki? Rola znacznika ``

Aby Twoja strona poprawnie wyświetlała polskie znaki diakrytyczne, takie jak ą, ę, ć, ó, potrzebujesz odpowiedniego kodowania znaków. W tym celu w sekcji umieszczamy znacznik . Kodowanie UTF-8 jest standardem w internecie i obsługuje szeroką gamę znaków z różnych języków, w tym polskiego. Jest to absolutnie kluczowe dla czytelności Twojej strony dla polskich użytkowników.

Tytuł na karcie przeglądarki, czyli do czego służy znacznik ``?

Znacznik , umieszczany również w sekcji , definiuje tytuł Twojej strony internetowej. Ten tytuł jest bardzo ważny, ponieważ pojawia się na karcie przeglądarki, w zakładkach, a także w wynikach wyszukiwania. Dobrze dobrany tytuł pomaga użytkownikom zidentyfikować Twoją stronę i zachęca do kliknięcia. Pomyśl o nim jak o etykiecie Twojej strony w cyfrowym świecie.

Krok 3: Czas na treść! Jak dodać tekst do Twojej strony?

Teraz, gdy mamy już szkielet strony, czas wypełnić ją treścią! Sekcja jest miejscem, gdzie umieszczamy wszystko, co będzie widoczne dla odwiedzających. Zacznijmy od podstawowych elementów tekstowych.

Twój pierwszy nagłówek: użycie znacznika ``

Każda strona powinna mieć jasny nagłówek, który informuje o jej głównym temacie. W HTML służy do tego znacznik

. Jest to nagłówek pierwszego poziomu, zazwyczaj największy i najważniejszy na stronie. Możesz go użyć tylko raz na stronie, aby podkreślić jej główny temat. Istnieją również inne znaczniki nagłówków, od

do

, które służą do tworzenia podtytułów i nagłówków niższego rzędu, pomagając w organizacji treści.

Akapity bez tajemnic: jak formatować tekst za pomocą `

`?

Dłuższe fragmenty tekstu grupujemy w akapity. W HTML służy do tego znacznik

(od angielskiego "paragraph"). Każdy element umieszczony wewnątrz znacznika

i

będzie traktowany jako osobny akapit. Przeglądarka zazwyczaj dodaje niewielki odstęp pionowy między akapitami, co poprawia czytelność tekstu. Używanie znacznika

jest kluczowe dla poprawnej struktury i semantyki strony.

Przykładowy kod: skopiuj i wklej swoją pierwszą kompletną stronę

Oto kompletny przykład kodu HTML, który zawiera wszystkie omówione do tej pory elementy. Możesz go skopiować i wkleić bezpośrednio do Notatnika:

   

 
Witaj w moim świecie HTML!
 
To jest mój pierwszy akapit na stronie stworzonej w Notatniku. Uczę się podstaw HTML i jestem bardzo podekscytowany! Pamiętaj, że kodowanie UTF-8 jest kluczowe dla poprawnego wyświetlania polskich znaków, takich jak ą, ę, ć.

Krok 4: Kluczowy moment jak poprawnie zapisać plik HTML?

Zapisanie pliku w odpowiedni sposób jest absolutnie kluczowe, aby przeglądarka internetowa mogła go rozpoznać i wyświetlić jako stronę WWW. Poniżej znajdziesz precyzyjne instrukcje, jak to zrobić poprawnie.

Instrukcja zapisu krok po kroku: nazwa, rozszerzenie i kodowanie

Gdy Twój kod jest gotowy w Notatniku, wykonaj następujące kroki:

1. Kliknij w menu Plik, a następnie wybierz opcję Zapisz jako....
2. W oknie, które się pojawi, w polu Nazwa pliku wpisz nazwę dla swojej strony. Najczęściej używaną nazwą dla strony głównej jest index.html. Najważniejsze jest, aby na końcu nazwy dodać rozszerzenie .html.
3. Następnie, w tym samym oknie, znajdź pole Zapisz jako typ. Domyślnie może być ustawione na "Dokumenty tekstowe (*.txt)". Koniecznie zmień to ustawienie na "Wszystkie pliki". To zapobiegnie dodaniu przez Notatnik niechcianego rozszerzenia `.txt` na końcu.
4. Bardzo ważne jest również ustawienie kodowania. W polu Kodowanie wybierz UTF-8. Jest to gwarancja, że polskie znaki (jak ą, ę, ć) będą wyświetlane poprawnie w przeglądarce.
5. Wybierz lokalizację na swoim komputerze, gdzie chcesz zapisać plik (np. na pulpicie lub w specjalnie utworzonym folderze), a następnie kliknij przycisk Zapisz.

Według danych CreativeCoding.pl, poprawne zapisanie pliku z rozszerzeniem `.html` i kodowaniem UTF-8 jest kluczowe dla jego poprawnego działania i wyświetlania. Ten prosty krok decyduje o tym, czy Twoja praca przyniesie oczekiwany efekt.

Najczęstszy błąd: dlaczego plik zapisuje się jako dokument tekstowy i jak tego uniknąć?

Jednym z najczęstszych błędów popełnianych przez początkujących jest niezmienienie ustawienia "Zapisz jako typ" na "Wszystkie pliki". Skutkuje to zapisaniem pliku jako index.html.txt. Gdy przeglądarka próbuje otworzyć taki plik, widzi go jako zwykły dokument tekstowy, a nie stronę internetową. Dlatego zapamiętaj: zawsze wybieraj "Wszystkie pliki" w polu "Zapisz jako typ", aby upewnić się, że plik ma prawidłowe rozszerzenie `.html`.

Krok 5: Wielki finał jak zobaczyć swoją stronę w przeglądarce?

Po wykonaniu wszystkich poprzednich kroków, nadszedł moment triumfu! Teraz możesz zobaczyć efekt swojej pracy w akcji. Otwarcie pliku HTML w przeglądarce jest niezwykle proste.

Przeczytaj również: Kolorowe tło w HTML/CSS: Od podstaw po gradienty i obrazy

Prosta metoda na otwarcie pliku `. html` i podziwianie efektów

Aby zobaczyć swoją pierwszą stronę HTML, wykonaj następujące kroki:

1. Przejdź do folderu na swoim komputerze, w którym zapisałeś plik z rozszerzeniem .html (na przykład index.html).
2. Kliknij dwukrotnie lewym przyciskiem myszy na ikonie tego pliku.

Twój domyślny program do przeglądania stron internetowych (np. Google Chrome, Mozilla Firefox, Microsoft Edge) automatycznie otworzy plik i wyświetli Twoją stronę. Zobaczysz nagłówek "Witaj w moim świecie HTML!" i poniżej pierwszy akapit. Brawo! Udało Ci się stworzyć swoją pierwszą stronę internetową!

Alternatywnie, możesz otworzyć pustą kartę w przeglądarce, a następnie przeciągnąć ikonę zapisanego pliku .html z folderu bezpośrednio na okno przeglądarki. Efekt będzie ten sam.

Co dalej? Pierwsze kroki w świecie stylowania (CSS)

Gratulacje! Właśnie stworzyłeś swoją pierwszą stronę internetową przy użyciu samego Notatnika. To wspaniały początek Twojej podróży w świat tworzenia stron. Ale to dopiero wierzchołek góry lodowej. Aby Twoje strony wyglądały atrakcyjnie i profesjonalnie, potrzebujesz czegoś więcej niż tylko struktury HTML. Kolejnym, naturalnym krokiem w nauce jest poznanie CSS (Cascading Style Sheets), czyli Kaskadowych Arkuszy Stylów. CSS pozwala Ci kontrolować wygląd strony kolory, czcionki, rozmieszczenie elementów i wiele, wiele więcej. Zachęcam Cię do dalszej nauki i eksplorowania możliwości, jakie daje połączenie HTML i CSS. To dopiero początek fascynującej przygody z tworzeniem stron!