`, ``, `

` (metadane, tytuł) i `` (widoczna treść).

Czy wiesz, że swoją pierwszą stronę internetową możesz stworzyć w 5 minut, używając tylko Notatnika?

Wiele osób myśli, że tworzenie stron internetowych to domena zaawansowanych programistów, wymagająca skomplikowanego oprogramowania i specjalistycznej wiedzy. Nic bardziej mylnego! Właśnie teraz, z pomocą prostego Notatnika, możesz zacząć swoją przygodę z kodowaniem i stworzyć swoją pierwszą, działającą stronę WWW. Ten poradnik jest dla Ciebie, jeśli szukasz prostego sposobu na zrozumienie, jak działa sieć i jak powstają strony internetowe od absolutnych podstaw.

Dlaczego Notatnik to idealne narzędzie na start?

Notatnik to narzędzie, które masz w swoim komputerze z systemem Windows od razu po jego zainstalowaniu. Nie musisz niczego pobierać ani instalować. To jego ogromna zaleta na samym początku. Pozwala on na pisanie "czystego" kodu HTML, bez żadnych dodatkowych funkcji czy podpowiedzi, które mogłyby rozpraszać początkującego. Dzięki temu możesz skupić się na nauce samej struktury języka HTML i zrozumieć, jak poszczególne znaczniki wpływają na wygląd strony. To jak nauka pisania alfabetu, zanim zaczniesz układać zdania najpierw poznajesz podstawy, bez zbędnych ułatwień.

Czego dokładnie potrzebujesz, aby zacząć (spoiler: niewiele)?

• Systemowy Notatnik: Dostępny w każdym systemie Windows.
• Dowolna przeglądarka internetowa: Na przykład Google Chrome, Mozilla Firefox, Microsoft Edge lub inna, której używasz na co dzień.

Krok 1: Przygotowanie środowiska pracy – czyli jak otworzyć Notatnik i stworzyć swój pierwszy plik HTML

Zaczynamy od najprostszych rzeczy. Otwarcie Notatnika i przygotowanie pliku to fundament, od którego zależy powodzenie całego przedsięwzięcia. Postępuj zgodnie z poniższymi instrukcjami, a szybko będziesz miał gotowy do edycji pusty dokument.

Jak znaleźć i uruchomić Notatnik w systemie Windows?

1. Kliknij przycisk Start w lewym dolnym rogu ekranu.
2. Wpisz w pasku wyszukiwania słowo "Notatnik" (lub "Notepad").
3. Kliknij na ikonę Notatnika, która pojawi się w wynikach wyszukiwania.
4. Alternatywnie, możesz przejść przez Start -> Wszystkie programy (lub Aplikacje) -> Akcesoria Windows -> Notatnik.

Tworzenie pliku `index.html`: kluczowy moment, od którego wszystko się zaczyna

Nazwa pliku dla strony głównej strony internetowej to zazwyczaj `index.html`. Użycie tej nazwy jest standardem w branży web developmentu. Rozszerzenie `.html` jest absolutnie kluczowe to ono informuje przeglądarkę internetową, że ma do czynienia z plikiem strony internetowej, a nie zwykłym dokumentem tekstowym. Bez tego rozszerzenia przeglądarka nie będzie wiedziała, jak zinterpretować zawartość pliku.

Sekret poprawnego zapisu: Dlaczego musisz wybrać "Wszystkie pliki" i kodowanie UTF-8?

To jeden z najważniejszych kroków, który często sprawia problemy początkującym. Aby upewnić się, że Twoja strona wyświetli się poprawnie, zwłaszcza z polskimi znakami, musisz zwrócić uwagę na dwa elementy podczas zapisywania pliku:

1. W Notatniku wybierz Plik, a następnie Zapisz jako....
2. W oknie dialogowym, które się pojawi, znajdź pole "Zapisz jako typ". Kliknij na nie i z rozwijanej listy wybierz opcję "Wszystkie pliki (*.*)". Jest to niezbędne, aby móc nadać plikowi własne rozszerzenie.
3. W polu "Nazwa pliku" wpisz pełną nazwę swojego pliku wraz z rozszerzeniem, na przykład: index.html lub moja_pierwsza_strona.html.
4. Na samym dole okna zapisywania znajdź opcję Kodowanie. Kliknij na nią i wybierz UTF-8. Dlaczego UTF-8? Jest to standard kodowania znaków, który obsługuje szeroką gamę symboli z różnych języków, w tym polskie znaki diakrytyczne (takie jak ą, ę, ć, ł, ń, ó, ś, ź, ż). Bez tego ustawienia, polskie znaki mogą wyświetlać się jako niezrozumiałe "krzaczki".

Po wykonaniu tych kroków kliknij przycisk Zapisz.

Krok 2: Fundamenty każdej strony – poznaj podstawową strukturę kodu HTML

Każda strona internetowa, niezależnie od tego, jak skomplikowana by była, opiera się na tej samej podstawowej strukturze. Zrozumienie jej jest kluczowe, aby móc budować dalej. Poniżej znajdziesz gotowy "szkielet" Twojej pierwszej strony, który możesz od razu wykorzystać.

Gotowy szkielet do skopiowania: Twoja pierwsza, działająca strona w kilku linijkach

Otwórz pusty plik w Notatniku i wklej poniższy kod. Następnie zapisz go jako plik `.html` z kodowaniem UTF-8, zgodnie z instrukcjami z poprzedniego kroku.

  

 
Witaj, Świecie HTML!
 To jest akapit mojej pierwszej strony internetowej, stworzonej w Notatniku. Jestem dumny!

Co oznaczają ``, ``, `` i ``? Krótkie i proste wyjaśnienie

Przyjrzyjmy się bliżej elementom, które tworzą podstawę każdej strony HTML:

• </code>: Ta linijka informuje przeglądarkę, że dokument jest napisany w najnowszej wersji języka HTML (HTML5). To rodzaj deklaracji, która pomaga przeglądarce poprawnie zinterpretować resztę kodu.
• : To główny znacznik, który obejmuje całą zawartość strony internetowej. Wszystko, co znajduje się na stronie, musi być umieszczone wewnątrz tego znacznika.
• : Sekcja nagłówkowa zawiera informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika. Znajdują się tu metadane, takie jak kodowanie znaków czy tytuł strony, które są ważne dla przeglądarki i wyszukiwarek.
• : To "ciało" dokumentu. Tutaj umieszczamy całą treść, którą użytkownik zobaczy na swojej przeglądarce tekst, obrazy, linki, nagłówki i wszystko inne.

Jak ustawić tytuł strony widoczny w karcie przeglądarki za pomocą znacznika ``?

Znacznik , umieszczony w sekcji , definiuje tytuł Twojej strony. Ten tytuł jest wyświetlany na karcie przeglądarki, a także pojawia się w wynikach wyszukiwania Google. W naszym przykładzie tytułem jest "Moja Pierwsza Strona w Notatniku". Wystarczy zmienić tekst między a , aby zmodyfikować tytuł.

Prawidłowe wyświetlanie polskich znaków: rola ``

Ponownie podkreślę znaczenie znacznika . Umieszczony w sekcji , informuje przeglądarkę, że strona używa kodowania UTF-8. Jest to kluczowe dla poprawnego wyświetlania polskich znaków diakrytycznych. Bez tej linii, zamiast "ą", "ę", "ć" mogłyby pojawić się wspomniane wcześniej "krzaczki", co znacznie utrudniałoby czytanie treści.

Krok 3: Czas na treść! Jak dodawać tekst, nagłówki i linki?

Teraz, gdy masz już gotowy szkielet swojej strony, czas wypełnić ją treścią. HTML oferuje wiele znaczników, które pomagają strukturyzować informacje i czynić je czytelnymi zarówno dla użytkowników, jak i dla wyszukiwarek internetowych.

Hierarchia jest ważna: Jak używać nagłówków od `` do ``?

Nagłówki służą do oznaczania tytułów i podtytułów na stronie. Istnieje sześć poziomów nagłówków, od

Główny tytuł strony
Sekcja pierwsza
Podsekcja 1.1
Podsekcja 1.1.1
Podsekcja 1.1.1.1
Podsekcja 1.1.1.1.1

Tworzenie akapitów: znacznik ``, którego będziesz używać bez przerwy

Znacznik

To jest pierwszy akapit mojej strony. Zawiera on kilka zdań tekstu, które mają na celu przekazanie pewnej informacji użytkownikowi.
A to już drugi akapit. Widać wyraźnie, że jest oddzielony od poprzedniego, co ułatwia czytanie.

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

Hiperłącza, czyli linki, pozwalają użytkownikom przechodzić między stronami internetowymi. Używamy do tego znacznika (anchor) z atrybutem href, który określa adres docelowy.

Przejdź do wyszukiwarki Google

Ten kod stworzy klikalny tekst "Przejdź do wyszukiwarki Google", który po kliknięciu przeniesie użytkownika na stronę główną Google.

Jak stworzyć listę wypunktowaną (``) i numerowaną (` `)?

Listy są świetnym sposobem na prezentowanie danych w uporządkowany sposób. Istnieją dwa główne typy list:

• Lista nienumerowana (wypunktowana): Używa znacznika
  (unordered list). Każdy element listy umieszczamy wewnątrz znacznika
• (list item).
• Lista numerowana: Używa znacznika
  (ordered list). Również każdy element listy umieszczamy wewnątrz znacznika
• .

Oto przykłady:

Lista zakupów (nienumerowana):
 
Chleb
 
Mleko
 
Jajka
 
Kroki do wykonania (numerowana):
 
Otwórz Notatnik.
 
Napisz kod HTML.
 
Zapisz plik jako .html.

Krok 4: Ożywiamy stronę – jak wstawić obrazek?

Strony internetowe stają się ciekawsze, gdy zawierają elementy wizualne. Dodanie obrazka do Twojej strony jest proste, ale wymaga zwrócenia uwagi na kilka szczegółów.

Znacznik `` w praktyce: Jak poprawnie wskazać źródło obrazka (`src`)?

Do wstawiania obrazków służy znacznik . Jest to tzw. znacznik pusty, co oznacza, że nie potrzebuje znacznika zamykającego. Kluczowym elementem jest atrybut src (source), który określa ścieżkę do pliku obrazka.

Atrybut `alt` – dlaczego jego uzupełnienie jest ważniejsze, niż myślisz?

Atrybut alt (alternative text) jest niezwykle ważny. Zawiera krótki opis obrazka. Jest on wyświetlany, gdy obrazek z jakiegoś powodu nie może zostać załadowany (np. błąd w ścieżce, wolne połączenie internetowe). Co ważniejsze, jest on odczytywany przez czytniki ekranu dla osób niewidomych lub niedowidzących, co czyni Twoją stronę bardziej dostępną. Dobry opis pomaga również wyszukiwarkom zrozumieć zawartość obrazka, co ma wpływ na SEO (optymalizację pod kątem wyszukiwarek).

Gdzie umieścić plik z obrazkiem, aby strona go znalazła?

Najprostszym sposobem dla początkujących jest umieszczenie pliku z obrazkiem w tym samym folderze, w którym znajduje się Twój plik HTML (np. `index.html`). Wtedy w atrybucie src wystarczy podać samą nazwę pliku obrazka (np. `moje_zdjecie.png`). Jeśli obrazek znajduje się w podfolderze (np. o nazwie `obrazy`), ścieżka będzie wyglądać tak: `obrazy/moje_zdjecie.png`.

Krok 5: Wielki finał – jak wyświetlić swoją stronę w przeglądarce?

Nadszedł czas, aby zobaczyć efekty swojej pracy! Wyświetlenie strony w przeglądarce jest ostatnim, ale bardzo satysfakcjonującym krokiem.

Otwieranie pliku HTML: od prostego dwukliku po metodę "przeciągnij i upuść"

Masz kilka prostych sposobów, aby otworzyć swój plik HTML w przeglądarce:

• Dwukrotne kliknięcie: Znajdź zapisany plik `.html` w folderze, w którym go zapisałeś, i kliknij go dwukrotnie. System powinien automatycznie otworzyć go w domyślnej przeglądarce internetowej.
• Przeciągnij i upuść: Otwórz swoją ulubioną przeglądarkę internetową. Następnie, korzystając z eksploratora plików, przeciągnij plik `.html` bezpośrednio do okna przeglądarki.
• Otwórz za pomocą: Kliknij prawym przyciskiem myszy na plik `.html`, wybierz opcję "Otwórz za pomocą" i wybierz z listy przeglądarkę, której chcesz użyć.

Wprowadziłem zmiany w kodzie, ale ich nie widzę! Co robić?

To bardzo częsty problem u początkujących. Po wprowadzeniu jakichkolwiek zmian w kodzie HTML w Notatniku, musisz pamiętać o dwóch rzeczach:

1. Zapisz plik: Po każdej zmianie w Notatniku, wybierz Plik -> Zapisz (lub użyj skrótu klawiszowego Ctrl+S), aby zapisać wprowadzone modyfikacje.
2. Odśwież stronę w przeglądarce: Wróć do okna przeglądarki, w którym otwarta jest Twoja strona. Naciśnij klawisz F5 na klawiaturze lub kliknij przycisk odświeżania (zwykle strzałka okrężna) obok paska adresu. Dopiero wtedy przeglądarka wczyta zaktualizowaną wersję pliku HTML.

Najczęstsze błędy początkujących i jak ich unikać

Nawet najprostsze zadania mogą kryć pułapki. Oto kilka typowych błędów, na które warto uważać, aby uniknąć frustracji.

Błąd #1: Zapominanie o zamykaniu znaczników (np. `` bez ``)

Większość znaczników HTML występuje w parach: znacznik otwierający i znacznik zamykający (np.

). Zapomnienie o dodaniu znacznika zamykającego może prowadzić do nieprzewidzianego zachowania strony, a nawet do błędów w jej wyświetlaniu. Zawsze staraj się zamykać swoje znaczniki, chyba że jest to znacznik pusty (jak ).

Błąd #2: Problemy z polskimi znakami, czyli "krzaczki" na stronie

Jak już wielokrotnie wspominałem, kluczem do poprawnego wyświetlania polskich znaków jest użycie kodowania UTF-8 zarówno podczas zapisywania pliku w Notatniku, jak i w nagłówku strony za pomocą znacznika . Bez tego będziesz widzieć nieczytelne znaki.

Błąd #3: Obrazek się nie wyświetla – najczęstsze przyczyny

• Błędna ścieżka w `src`: Upewnij się, że nazwa pliku obrazka w atrybucie src jest wpisana poprawnie, z uwzględnieniem wielkości liter i rozszerzenia (np. `.jpg`, `.png`).
• Obrazek w złym miejscu: Plik obrazka musi znajdować się tam, gdzie wskazuje ścieżka w kodzie. Najprościej jest umieścić go w tym samym folderze co plik HTML.
• Literówka w nazwie pliku: Sprawdź dokładnie nazwę pliku obrazka w folderze i porównaj ją z tym, co wpisałeś w kodzie.

Co dalej? Twoja droga po stworzeniu pierwszej strony w Notatniku

Gratulacje! Właśnie stworzyłeś swoją pierwszą stronę internetową. To ogromny krok naprzód. Ale to dopiero początek Twojej podróży w świat tworzenia stron WWW.

Ograniczenia Notatnika: Kiedy warto przesiąść się na profesjonalny edytor kodu?

Notatnik jest świetny na sam początek, ale ma swoje ograniczenia. Gdy zaczniesz tworzyć bardziej złożone strony, zauważysz, że brakuje mu wielu przydatnych funkcji. Profesjonalne edytory kodu, takie jak Visual Studio Code (VS Code), Sublime Text czy Atom, oferują między innymi: kolorowanie składni (co ułatwia czytanie kodu), autouzupełnianie kodu (przyspiesza pisanie), podgląd na żywo (widzisz zmiany w przeglądarce bez odświeżania) oraz wiele innych narzędzi ułatwiających pracę.

Przeczytaj również: Mail w HTML - jak stworzyć skuteczny i responsywny mailing?

Krok w stronę stylów: Czym jest CSS i jak dodać kolory do swojej strony?

HTML odpowiada za strukturę i treść strony. Ale jak sprawić, by strona wyglądała atrakcyjnie? Tutaj z pomocą przychodzi CSS (Cascading Style Sheets), czyli język arkuszy stylów. CSS pozwala Ci kontrolować kolory, czcionki, rozmiary elementów, ich rozmieszczenie i wiele więcej. Po opanowaniu podstaw HTML, kolejnym naturalnym krokiem jest nauka CSS, aby nadać swoim stronom unikalny wygląd.