Ten artykuł to kompleksowy przewodnik dla początkujących, którzy chcą nauczyć się tworzyć proste strony internetowe od podstaw, wykorzystując fundamentalną technologię HTML. Dowiesz się, czym jest HTML, jakie narzędzia są niezbędne do rozpoczęcia pracy, a także krok po kroku zbudujesz swoją pierwszą stronę, poznając podstawowe znaczniki i zasady.

Dlaczego HTML to nadal fundament, od którego musisz zacząć swoją przygodę z tworzeniem stron?

Zacznijmy od podstaw. Kiedy myślisz o budowaniu domu, nie zaczynasz od malowania ścian czy układania mebli, prawda? Najpierw potrzebujesz solidnego fundamentu i konstrukcji. W świecie tworzenia stron internetowych tym fundamentem jest właśnie HTML, czyli HyperText Markup Language. To on odpowiada za całą strukturę i treść, którą widzisz na stronie teksty, obrazy, linki, nagłówki czy listy. Bez HTML nie ma strony internetowej, to takie proste.

W dzisiejszych czasach nowoczesne strony internetowe to jednak coś więcej niż tylko statyczna treść. Dlatego HTML nigdy nie działa sam. Zawsze towarzyszą mu dwie inne kluczowe technologie front-endowe, tworząc nierozłączne trio:

• CSS (Cascading Style Sheets): Jeśli HTML jest szkieletem, to CSS jest jego ubraniem i makijażem. Odpowiada za wygląd i styl strony kolory, czcionki, układ elementów, marginesy, cienie. Dzięki CSS Twoja strona będzie wyglądać atrakcyjnie i profesjonalnie.
• JavaScript: To już "mózg" strony. JavaScript dodaje interaktywność sprawia, że strona reaguje na działania użytkownika, pozwala na tworzenie animacji, walidację formularzy, dynamiczne ładowanie treści i wiele, wiele więcej.

Z mojego doświadczenia wynika, że zrozumienie, za co odpowiada każda z tych technologii, jest kluczowe na początku. HTML to punkt wyjścia, podstawa, na której budujemy resztę. Bez solidnej struktury HTML, nawet najlepsze style CSS czy zaawansowany JavaScript nie zdziałają cudów. Dlatego skupimy się na nim w pierwszej kolejności.

Zanim napiszesz pierwszą linię kodu: Niezbędne i całkowicie darmowe narzędzia na start

Zanim zanurkujemy w świat znaczników i atrybutów, potrzebujesz odpowiednich narzędzi. Dobra wiadomość jest taka, że wszystkie, które są Ci potrzebne na początek, są całkowicie darmowe. Nie musisz wydawać ani złotówki, aby zacząć kodować.

Głównym bohaterem będzie tutaj edytor kodu. Może i teoretycznie dałoby się pisać kod HTML w zwykłym Notatniku, ale uwierz mi to droga przez mękę. Profesjonalny edytor kodu to jak przesiadka z ołówka na nowoczesny komputer dla pisarza. Znacząco ułatwia pracę i przyspiesza naukę. Dla początkujących, bez wahania polecam Visual Studio Code (VS Code) od Microsoftu. Dlaczego?

• Podpowiadanie składni (IntelliSense): Kiedy zaczynasz pisać tag HTML, VS Code automatycznie podpowiada Ci możliwe opcje i zamyka tagi. To ogromna oszczędność czasu i sposób na unikanie literówek.
• Kolorowanie składni: Różne elementy kodu (tagi, atrybuty, wartości) są pokolorowane, co sprawia, że kod jest znacznie bardziej czytelny i łatwiejszy do zrozumienia.
• Formatowanie kodu: VS Code potrafi automatycznie uporządkować i sformatować Twój kod, dbając o wcięcia i spójność. Czysty kod to czytelny kod!
• Wbudowany terminal: Możesz uruchamiać komendy bezpośrednio z edytora, co jest bardzo wygodne.
• Bogactwo rozszerzeń: Społeczność stworzyła tysiące rozszerzeń, które dodają nowe funkcjonalności, od podglądu na żywo po integrację z Git.

Poza edytorem kodu, potrzebujesz również przeglądarki internetowej. To w niej będziesz testować i podglądać efekty swojej pracy. Niezależnie od tego, czy używasz Chrome, Firefoxa, Edge czy Safari, każda nowoczesna przeglądarka świetnie się do tego nadaje. Pamiętaj, aby regularnie odświeżać stronę w przeglądarce po każdej zmianie w kodzie, aby zobaczyć aktualny efekt. To kluczowy element cyklu deweloperskiego!

Krok po kroku: Budujemy Twoją pierwszą, prostą stronę internetową w HTML

No dobrze, czas na konkrety! Otwórz swój edytor kodu (np. VS Code) i stwórz nowy plik. Zapisz go jako index.html. To standardowa nazwa dla głównej strony internetowej. Teraz zaczniemy pisać kod.

Podstawowa anatomia dokumentu HTML5

Każdy dokument HTML5 zaczyna się od pewnej standardowej struktury:

• </code>: Ta deklaracja informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Zawsze umieszcza się ją na samym początku.
• : To główny element, który otacza całą zawartość strony. Atrybut lang="pl" informuje przeglądarkę i wyszukiwarki, że językiem strony jest polski, co jest ważne dla dostępności i SEO.
• : Sekcja zawiera meta-informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są kluczowe dla przeglądarek i wyszukiwarek.
  • : Określa kodowanie znaków, co jest niezbędne do poprawnego wyświetlania polskich liter (ą, ę, ć, itd.).
  • : To bardzo ważny meta-tag dla responsywności, który mówi przeglądarce, aby strona była prawidłowo skalowana na urządzeniach mobilnych.
  • : Tekst wewnątrz tego tagu pojawia się jako tytuł zakładki w przeglądarce. Jest to również jeden z najważniejszych elementów dla SEO.
• : Tutaj znajduje się cała widoczna treść Twojej strony internetowej. Wszystko, co użytkownik zobaczy, będzie umieszczone wewnątrz tego znacznika.

Tworzymy treść: Nagłówki, akapity i listy

Teraz wypełnijmy sekcję treścią. Zaczniemy od nagłówków, które są kluczowe dla struktury i czytelności.

 
Witaj na mojej pierwszej stronie!
 
To jest akapit tekstu. Uczę się tworzyć strony internetowe od podstaw.
 
Co znajdziesz na tej stronie?
 
 
Podstawy HTML
 
Przykłady kodu
 
Wskazówki dla początkujących
 
 
Moje ulubione języki programowania (na razie)
 
 
HTML (oczywiście!)
 
CSS (bo sprawia, że wszystko wygląda ładnie)
 

• do
  : Służą do tworzenia nagłówków.
  to najważniejszy nagłówek (zazwyczaj tylko jeden na stronę), a
  najmniej ważny. Ważne jest, aby zachować ich hierarchię nie przeskakuj z
  od razu do
  . To poprawia czytelność i jest dobre dla SEO.

• : To znacznik akapitu. Używaj go do zwykłego tekstu.
• (unordered list): Tworzy listę nieuporządkowaną (zazwyczaj z punktorami). Każdy element listy to
• (list item).
• (ordered list): Tworzy listę uporządkowaną (zazwyczaj z numeracją). Również używa
• dla elementów.

Dodajemy interaktywność i multimedia: Linki i obrazy

Strony internetowe to przede wszystkim sieć powiązanych ze sobą dokumentów. Do tego służą linki, a obrazy urozmaicają treść.

  
Przydatne linki
 
Odwiedź MDN Web Docs, aby dowiedzieć się więcej o HTML.
 
Obrazek na stronie
 

• : To znacznik linku (anchor). Atrybut href (hypertext reference) zawiera adres URL, do którego link prowadzi. Atrybut target="_blank" sprawia, że link otwiera się w nowej zakładce przeglądarki.
• : Służy do wstawiania obrazów.
  • src (source): Podaje ścieżkę do pliku obrazu. Może to być adres URL lub ścieżka do pliku na Twoim komputerze.
  • alt (alternative text): To bardzo ważny atrybut! Zawiera tekstowy opis obrazu. Jest kluczowy dla dostępności (czytniki ekranowe dla osób niewidomych odczytują ten tekst) oraz dla SEO (wyszukiwarki rozumieją, co jest na obrazku). Nigdy o nim nie zapominaj!

Semantyczne znaczniki HTML5: Uporządkuj swoją stronę

W starszych wersjach HTML do strukturyzowania strony często używano uniwersalnego znacznika

 
 
Moja Super Strona!
  
 
 
 
O mnie
 
Jestem początkującym deweloperem, który uwielbia uczyć się nowych rzeczy.
 
 
 
Mój pierwszy artykuł
 
Dzisiaj nauczyłem się podstaw HTML.
 
  
 

/* style.css */
body { font-family: 'Arial', sans-serif; /* Zmienia rodzaj czcionki dla całej strony */ background-color: #f4f4f4; /* Jasnoszare tło */ color: #333; /* Ciemny kolor tekstu */ margin: 20px; /* Dodaje margines wokół całej treści */
} h1 { color: #0056b3; /* Niebieski kolor dla nagłówka H1 */ text-align: center; /* Wyśrodkowanie tekstu */
} p { line-height: 1.6; /* Zwiększa odstępy między liniami w akapitach */
} a { color: #007bff; /* Niebieski kolor dla linków */ text-decoration: none; /* Usuwa podkreślenie linków */
} a:hover { text-decoration: underline; /* Podkreśla link po najechaniu myszką */
}