`, która informuje przeglądarkę o używanej wersji języka w tym przypadku HTML5. Następnie cała zawartość strony zamykana jest w głównym znaczniku ``. Warto dodać do niego atrybut `lang="pl"`, który określa język strony, co jest ważne dla wyszukiwarek i narzędzi do odczytywania stron.

Skopiuj poniższy kod i wklej go do nowego, pustego pliku w Notepad++:

   

 
Witaj na mojej stronie!
 
To jest akapit tekstu.

Ten kod to minimalna, ale kompletna struktura dokumentu HTML5. Zauważ, że składa się on z dwóch głównych części: `

` i ``, które omówimy szczegółowo poniżej.

Wyjaśnienie struktury: Czym jest `head` i `body` i co w nich umieszczać?

Dokument HTML dzieli się na dwie kluczowe sekcje, każda z innym przeznaczeniem:

• `` (nagłówek dokumentu): Ta sekcja zawiera metadane, czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika w przeglądarce. Znajdziesz tu takie elementy jak tytuł strony (`
• `` (ciało dokumentu): To jest serce Twojej strony! W tej sekcji umieszczasz całą widoczną zawartość, którą użytkownik zobaczy w przeglądarce. Wszystkie teksty, nagłówki, obrazy, linki, tabele i inne elementy, które tworzą wizualną stronę internetową, powinny znajdować się właśnie tutaj.

Nadajemy stronie tytuł: Rola znacznika ``

Znacznik `

`. Aby nadać strukturę Twojej stronie, używamy nagłówków i akapitów:

• Nagłówki (`

  ` do `

  `):

  Służą do tworzenia hierarchii treści. Znacznik `

  ` to najważniejszy nagłówek na stronie zazwyczaj tytuł główny. Powinien być użyty tylko raz na każdej stronie, aby jasno określić jej główny temat. Mniejsze nagłówki (od `

  ` do ``) służą do podziału treści na sekcje i podsekcje. Pamiętaj o zachowaniu logicznej hierarchii nie używaj `` bezpośrednio po ``, pomijając ``.

• Akapity (`

  `):

  Służą do oznaczania bloków tekstu. Każdy akapit powinien zawierać spójną myśl lub fragment treści. Użycie znacznika `

  ` automatycznie dodaje odstępy przed i po tekście, co poprawia czytelność.

W naszym przykładowym kodzie mamy już nagłówek `

Witaj na mojej stronie!` i akapit `

To jest akapit tekstu.

`. Spróbuj dodać więcej akapitów lub nagłówków niższego rzędu, aby zobaczyć, jak zmienia się układ strony.

Kluczowy moment: Jak poprawnie zapisać plik i zobaczyć efekty?

Napisaliśmy już nasz pierwszy kod HTML. Teraz nadszedł kluczowy moment musimy go zapisać w odpowiedni sposób, aby przeglądarka mogła go poprawnie odczytać. To właśnie teraz Twój kod ożyje i zobaczysz efekty swojej pracy!

Zapisywanie pliku: Wybór rozszerzenia `. html` i kodowania UTF-8

Aby poprawnie zapisać plik w Notepad++, wykonaj następujące kroki:

1. W Notepad++ wybierz z menu "Plik" -> "Zapisz jako...".
2. Otworzy się okno dialogowe zapisywania. Przejdź do folderu, który stworzyłeś wcześniej (np. "moja-strona").
3. W polu "Nazwa pliku" wpisz nazwę dla swojej strony, na przykład index.html. Nazwa index.html jest standardową nazwą dla strony głównej w wielu projektach.
4. W polu "Typ" (lub "Zapisz jako typ") wybierz opcję "All files (*.*)". To bardzo ważne, aby system nie dodał automatycznie rozszerzenia `.txt`.
5. Na dole okna, w sekcji "Kodowanie", upewnij się, że wybrane jest "UTF-8". To jest krytyczny krok dla poprawnego wyświetlania polskich znaków!
6. Kliknij przycisk "Zapisz".

Gratulacje! Twój pierwszy plik HTML został zapisany!

„Krzaczki” zamiast polskich znaków? Rozwiązanie problemu z ``

Częstym problemem, z którym borykają się początkujący, są tzw. "krzaczki" (np. ą zamiast ą, ś zamiast ś) zamiast prawidłowo wyświetlanych polskich znaków. Dzieje się tak, gdy przeglądarka nie wie, jakiego kodowania użyć do interpretacji tekstu. Rozwiązanie jest proste i już je zastosowaliśmy w naszym kodzie!

Znacznik , umieszczony w sekcji `

`, informuje przeglądarkę, że dokument został zakodowany w standardzie UTF-8. Jest to uniwersalne kodowanie, które obsługuje większość języków świata, w tym polskie znaki diakrytyczne. Upewnienie się, że ten znacznik jest obecny w Twoim kodzie i że plik został zapisany z kodowaniem UTF-8 w Notepad++, całkowicie eliminuje problem "krzaczków".

Jak otworzyć swoją stronę w przeglądarce Chrome, Firefox lub Edge?

Teraz nadszedł czas na wielki finał otwarcie Twojej strony w przeglądarce! To prostsze niż myślisz:

1. Przejdź do folderu, w którym zapisałeś swój plik HTML (np. "moja-strona").
2. Znajdź plik o nazwie index.html.
3. Dwukrotnie kliknij na ten plik.

Twoja strona powinna otworzyć się automatycznie w domyślnej przeglądarce internetowej (Chrome, Firefox, Edge, Safari itp.). Zobaczysz swój nagłówek "Witaj na mojej stronie!" i akapit tekstu. To jest Twój pierwszy krok w świecie tworzenia stron WWW!

Wzbogacamy treść: Jak dodać linki i obrazy do swojej strony?

Strona internetowa to nie tylko tekst. Aby była użyteczna i atrakcyjna, potrzebuje interaktywnych elementów, takich jak linki, które pozwalają nawigować po sieci, oraz obrazy, które wzbogacają wizualnie jej zawartość. Dodajmy je do naszej strony!

Tworzymy pierwszy link: Praktyczne użycie znacznika `` i atrybutu `href`

Znacznik (od "anchor") służy do tworzenia hiperłączy, czyli popularnych "linków". To właśnie dzięki nim możemy przenosić się między stronami internetowymi. Kluczowym elementem znacznika `` jest atrybut href (od "hypertext reference"), który określa adres docelowy linku.

Możesz linkować do:

• Zewnętrznych stron internetowych: Podając pełny adres URL (np. https://www.google.com).
• Innych stron w Twoim projekcie: Podając nazwę pliku (np. o-mnie.html).

Dodajmy link do naszej strony, umieszczając go w sekcji `

`, na przykład pod akapitem:

Odwiedź Google!

Po zapisaniu pliku i odświeżeniu strony w przeglądarce zobaczysz tekst "Odwiedź Google!", a kliknięcie w "Google" przeniesie Cię na stronę wyszukiwarki.

Jak wstawić obrazek za pomocą ``? Atrybuty `src` i `alt` bez tajemnic

Obrazy to nieodłączny element każdej nowoczesnej strony. Do ich wstawiania służy znacznik . Jest to tzw. znacznik samodomykający się, co oznacza, że nie posiada znacznika zamykającego (np. ).

Znacznik `` wymaga dwóch kluczowych atrybutów:

• src (source): Określa ścieżkę do pliku graficznego. Jeśli obrazek znajduje się w tym samym folderze co Twój plik HTML, wystarczy podać jego nazwę (np. obrazek.jpg).
• alt (alternative text): To tekst alternatywny, który wyświetla się, gdy obrazek nie może zostać załadowany. Jest niezwykle ważny dla dostępności (dla osób niewidomych korzystających z czytników ekranu) oraz dla SEO, ponieważ pomaga wyszukiwarkom zrozumieć, co przedstawia obrazek.

Aby dodać obrazek, najpierw umieść dowolny plik graficzny (np. `obrazek.jpg`) w tym samym folderze, co Twój plik `index.html`. Następnie dodaj poniższy kod do sekcji `

`, na przykład pod linkiem:

Zapisz plik, odśwież stronę, a zobaczysz swój obrazek! Pamiętaj, aby tekst w atrybucie `alt` był zawsze opisowy i sensowny.

[search_image] Przykład CSS w HTML

Czas na odrobinę stylu! Jak dodać kolory za pomocą CSS?

Twoja strona ma już strukturę i treść, ale wygląda dość... surowo, prawda? To dlatego, że HTML odpowiada za zawartość, a za wygląd odpowiada inny język CSS. Teraz pokażę Ci, jak dodać odrobinę stylu, aby Twoja strona stała się bardziej estetyczna i przyjemna dla oka.

Czym jest CSS i dlaczego oddziela się go od HTML?

CSS (Cascading Style Sheets) to język używany do opisywania prezentacji dokumentu napisanego w HTML. Mówiąc prościej, to dzięki CSS możesz zmieniać kolory, czcionki, rozmiary, układy elementów, tła i wiele, wiele więcej. To właśnie CSS sprawia, że strony internetowe są kolorowe, interaktywne i responsywne.

Oddzielanie CSS od HTML to dobra praktyka w web developmencie. Dlaczego?

• Łatwość utrzymania: Zmiana wyglądu całej strony lub wielu stron jednocześnie staje się znacznie prostsza wystarczy edytować jeden plik CSS.
• Spójność wyglądu: Zapewnia jednolity wygląd na całej witrynie.
• Elastyczność: Pozwala na dostosowanie wyglądu strony do różnych urządzeń (komputery, tablety, smartfony) bez zmiany struktury HTML.

Najprostsza metoda dla początkujących: Wewnętrzny arkusz stylów w znaczniku ``

Dla osób początkujących najłatwiejszym sposobem na dodanie CSS jest użycie tzw. wewnętrznego arkusza stylów. Polega to na umieszczeniu kodu CSS bezpośrednio w dokumencie HTML, wewnątrz znacznika , który z kolei znajduje się w sekcji `

`. Jest to świetny sposób, aby szybko zobaczyć efekty stylizacji bez tworzenia dodatkowych plików.

Praktyczny przykład: Jak zmienić kolor tła i czcionki na Twojej stronie?

Dodajmy trochę koloru do naszej strony! Wklej poniższy kod CSS do sekcji `

` Twojego pliku HTML, pod znacznikiem `, ale przed zamykającym znacznikiem ``:

Co tu się dzieje?

• body { background-color: lightblue; font-family: Arial, sans-serif; }: Ustawiamy jasnoniebieskie tło dla całej strony (dla elementu ) oraz zmieniamy domyślną czcionkę na Arial.
• h1 { color: navy; }: Zmieniamy kolor tekstu dla nagłówka `

  ` na granatowy.

• p { color: #333; }: Ustawiamy ciemnoszary kolor tekstu dla wszystkich akapitów `

  `.

Zapisz plik i odśwież stronę w przeglądarce. Zobaczysz, jak Twoja strona nabiera zupełnie nowego wyglądu! To jest właśnie magia CSS.

Co dalej? Unikaj tych błędów i rozwijaj swoje umiejętności

Gratulacje! Przeszedłeś przez cały proces tworzenia swojej pierwszej strony internetowej. To ogromny krok, ale pamiętaj, że nauka programowania to ciągła podróż. Aby uniknąć frustracji i efektywnie się rozwijać, warto zwrócić uwagę na kilka typowych błędów i zaplanować kolejne kroki.

Najczęstsze pułapki początkujących sprawdź, czy ich nie popełniasz

Wielu początkujących popełnia podobne błędy. Pamiętaj, że to normalne, ale świadomość tych pułapek pomoże Ci ich unikać:

• Brak zamykających znaczników lub ich nieprawidłowe zagnieżdżanie. Każdy znacznik otwierający (np. `

  `) musi mieć swój znacznik zamykający (`

  `), chyba że jest to znacznik samodomykający się (np. ``). Pamiętaj też o prawidłowej kolejności zamykania, jak w przypadku nawiasów.
• Brak atrybutu `alt` przy znacznikach ``. To błąd zarówno pod kątem dostępności, jak i SEO. Zawsze dodawaj opisowy tekst alternatywny.
• Używanie wielu znaczników `

  ` na jednej stronie lub zaburzanie hierarchii nagłówków.

  `

  ` powinien być unikalny i najważniejszy. Nagłówki powinny tworzyć logiczną strukturę, od `

  ` do `

  `.

• Zapisywanie pliku z domyślnym rozszerzeniem `.txt` zamiast `.html`. Przeglądarka nie rozpozna pliku tekstowego jako strony internetowej. Zawsze upewnij się, że plik ma rozszerzenie `.html`.
• Brak deklaracji kodowania ``, co powoduje błędy w wyświetlaniu polskich znaków. Ten mały znacznik ratuje Cię przed "krzaczkami" i jest absolutnie niezbędny.

Przeczytaj również: Jaka czcionka na stronę? Wybierz mądrze: UX, SEO i legalność.

Twoja ścieżka rozwoju: Gdzie szukać dalszej wiedzy o HTML, CSS i JavaScript?

To dopiero początek Twojej przygody! Aby stać się dobrym web developerem, musisz kontynuować naukę. Oto kilka sugestii, jak możesz rozwijać swoje umiejętności:

• Pogłębiaj wiedzę o HTML: Poznaj więcej znaczników (np. listy `
  `, `
  • `, tabele ``, elementy semantyczne takie jak `
    `, `