`, znacznikiem ``, sekcjami `

` i ``.

Czym jest HTML i dlaczego warto zacząć od niego naukę programowania?

Zacznijmy od podstaw: HTML (HyperText Markup Language) to język znaczników, a nie język programowania, jak często bywa mylnie postrzegany. Jego głównym celem jest definiowanie struktury i zawartości stron internetowych. To właśnie dzięki HTML przeglądarka wie, co jest nagłówkiem, co akapitem, a co linkiem. Dla mnie jest to idealny punkt startowy, ponieważ pozwala szybko zobaczyć efekty swojej pracy i zrozumieć podstawowe zasady budowania treści w internecie.

Szkielet, na którym zbudujesz wszystko: prosta analogia, którą musisz znać

Wyobraź sobie stronę internetową jako budynek. W tej analogii HTML jest jak szkielet konstrukcyjny fundamenty, ściany, stropy. Definiuje on podstawową strukturę: gdzie będzie pokój (sekcja), gdzie okno (obraz), a gdzie drzwi (link). Sam HTML nie dba o to, jakiego koloru będą ściany czy jakie meble znajdą się w środku. Za wygląd, czyli kolory, czcionki, marginesy i ogólny styl, odpowiada inny język CSS (Cascading Style Sheets). Zrozumienie tej różnicy jest kluczowe na początku Twojej drogi.

Twoje pierwsze narzędzia: Co jest potrzebne do pisania kodu HTML?

Dobra wiadomość jest taka, że do pisania kodu HTML nie potrzebujesz skomplikowanego, drogiego oprogramowania. Na początek wystarczy Ci prosty edytor tekstu, taki jak systemowy Notatnik w Windowsie, TextEdit na macOS, czy Gedit w Linuksie. To świetny sposób, aby poczuć, jak to jest pisać kod od zera. Jednak w miarę postępów, szybko docenisz zalety dedykowanych edytorów kodu. Oferują one kolorowanie składni (co ułatwia czytanie kodu), autouzupełnianie, podpowiedzi i wiele innych funkcji, które znacznie przyspieszają pracę. Moimi ulubionymi, darmowymi narzędziami, które z czystym sumieniem polecam początkującym, są Visual Studio Code, Notepad++, Brackets czy Atom. Wybierz ten, który najbardziej Ci odpowiada i zacznij eksperymentować!

Krok po kroku: Jak stworzyć i zapisać swój pierwszy plik HTML

Teraz przejdźmy do praktyki. Stworzenie pierwszego pliku HTML jest prostsze, niż myślisz. Poniżej przedstawiam instrukcję krok po kroku:

1. Otwórz prosty edytor tekstu: Uruchom Notatnik (Windows), TextEdit (macOS) lub inny podstawowy edytor.
2. Wpisz minimalny kod HTML: Skopiuj i wklej poniższy kod. To jest absolutne minimum potrzebne do wyświetlenia strony:

   
   
    
   
    
   Witaj świecie!
   
   

3. Zapisz plik z rozszerzeniem `.html`: Kliknij "Plik" -> "Zapisz jako...". W polu "Nazwa pliku" wpisz na przykład index.html. Bardzo ważne jest, aby zmienić typ pliku na "Wszystkie pliki" (lub podobny, w zależności od edytora), aby upewnić się, że plik zostanie zapisany z rozszerzeniem `.html`, a nie `.txt`. Wybierz dogodną lokalizację, np. pulpit.
4. Otwórz zapisany plik w przeglądarce internetowej: Przejdź do miejsca, gdzie zapisałeś plik. Kliknij na niego dwukrotnie. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej (Chrome, Firefox, Edge itp.), a Ty zobaczysz napis "Witaj świecie!" i tytuł "Moja pierwsza strona" w zakładce przeglądarki. Gratulacje, właśnie stworzyłeś swoją pierwszą stronę internetową!

Anatomia strony internetowej: Poznaj podstawową strukturę HTML

Każdy dokument HTML, który tworzysz, powinien mieć określoną, podstawową strukturę. Zaczyna się on od deklaracji </code>. Ten znacznik informuje przeglądarkę, że ma do czynienia z dokumentem HTML5, czyli najnowszą wersją języka. Cała pozostała zawartość strony musi znajdować się wewnątrz znacznika . To jest jak główny kontener, który obejmuje wszystko.

Głowa (``) i Ciało (``): Gdzie umieszczać poszczególne elementy?

Wewnątrz znacznika znajdziesz dwie główne sekcje: (głowa) i (ciało). Sekcja zawiera metadane, czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika. Znajdziesz tam na przykład (tytuł strony wyświetlany w zakładce przeglądarki), linki do arkuszy stylów CSS, skrypty JavaScript czy metaznaczniki opisujące stronę dla wyszukiwarek. Natomiast to serce Twojej strony tutaj umieszczasz całą widoczną treść: tekst, obrazy, linki, listy, tabele i wszystko inne, co użytkownik zobaczy na ekranie.

Sekret polskich znaków: Jak sprawić, by "zażółć gęślą jaźń" wyświetlało się poprawnie?

Pamiętam, jak na początku mojej drogi miałem problem z wyświetlaniem polskich znaków diakrytycznych (ą, ę, ć, ł, ń, ó, ś, ź, ż). Zamiast nich pojawiały się dziwne krzaczki. Rozwiązaniem jest prosty, ale niezwykle ważny metaznacznik, który należy umieścić w sekcji : . Ten znacznik informuje przeglądarkę, że strona została zakodowana w standardzie UTF-8, który obsługuje wszystkie znaki z różnych języków, w tym polskie. Zawsze umieszczaj go na początku sekcji , aby uniknąć problemów z kodowaniem.

Klocki LEGO internetu: Najważniejsze znaczniki HTML dla początkujących

Teraz, gdy znasz już podstawową strukturę, czas poznać "klocki LEGO", z których zbudujesz swoją stronę. HTML to w dużej mierze zbiór znaczników, a każdy z nich ma swoje konkretne przeznaczenie. Poniżej przedstawię te najważniejsze, które musisz opanować na początku.

Tytuły mają znaczenie: Jak używać nagłówków od `` do ``?

Nagłówki są kluczowe dla struktury i czytelności Twojej strony. Używamy ich do definiowania hierarchii treści, podobnie jak w książkach mamy tytuły rozdziałów i podrozdziałów. Znaczniki nagłówków to

Tytuł główny mojej strony
Pierwszy podrozdział
Tutaj znajduje się treść pierwszego podrozdziału.
Sekcja w podrozdziale
A tu szczegóły tej sekcji.

Akapity i bloki tekstu: Znacznik `

` w praktyce

Podstawowym znacznikiem do umieszczania bloków tekstu jest

To jest pierwszy akapit mojego tekstu. Jest to podstawowy sposób prezentowania treści na stronie.
A to już drugi akapit. Pamiętaj, aby dzielić dłuższe teksty na mniejsze bloki, aby ułatwić czytanie.

Brama do innych światów: Jak tworzyć klikalne linki za pomocą ``?

Internet to sieć połączonych ze sobą dokumentów, a za te połączenia odpowiadają linki. Znacznik (anchor) służy do tworzenia hiperłączy. Kluczowym atrybutem jest href (hypertext reference), który określa adres docelowy linku. Możesz linkować do zewnętrznych stron lub do innych części swojej witryny:

Odwiedź Google w poszukiwaniu informacji.
Sprawdź stronę o nas w mojej witrynie.

Obraz wart tysiąca słów: Wstawianie grafik za pomocą znacznika ``

Obrazy są nieodłącznym elementem współczesnych stron internetowych. Znacznik służy do wstawiania grafik. Jest to tzw. znacznik samodomykający się, co oznacza, że nie ma znacznika zamykającego (np. ). Posiada dwa kluczowe atrybuty: src (source), który wskazuje ścieżkę do pliku obrazu, oraz alt (alternative text), który zawiera tekst alternatywny dla obrazu. Atrybut alt jest niezwykle ważny dla dostępności i SEO, o czym wspomnę później.

Porządek musi być: Tworzenie list punktowanych (``) i numerowanych (` `)

Często potrzebujemy uporządkować informacje w formie list. HTML oferuje dwa główne typy list:

Moje ulubione owoce:
 
Jabłka
 
Banany
 
Truskawki
 
Kroki do sukcesu:
 
Ucz się HTML
 
Ucz się CSS
 
Twórz projekty