1. Podstawowa struktura dokumentu HTML
Witaj w świecie web developmentu! Wyobraź sobie, że budujesz dom: HTML to fundamenty i szkielet, bez których wszystko się zawali. To język znaczników, który mówi przeglądarce, jak zorganizować treść – od tekstu po multimedia. Bez solidnej struktury strona może wyglądać chaotycznie, nie działać na urządzeniach mobilnych lub nawet nie załadować się poprawnie. W tej lekcji zanurzymy się w podstawy, byś mógł stworzyć swój pierwszy, w pełni poprawny dokument HTML. Gotowy? Zaczynamy!
Dlaczego to ważne? W erze miliardów stron internetowych, poprawny HTML zapewnia dostępność (np. dla czytników ekranu), optymalizację SEO (wyszukiwarki kochają semantykę) i kompatybilność z przeglądarkami. Nauczysz się minimalnego szkieletu, który jest bazą dla 99% stron na świecie – od prostych blogów po złożone aplikacje jak Facebook czy Google.
Historia w pigułce: Od HTML1 do HTML5
HTML powstał w 1991 roku dzięki Timowi Berners-Lee, twórcy WWW. Początkowo był prosty, ale ewoluował. Dziś używamy HTML5 (od 2014 r.), który wprowadził multimedia, semantykę i responsywność. Ciekawostka: Bez deklaracji DOCTYPE starsze przeglądarki wracają do lat 90., powodując "quirks mode" – chaotyczne renderowanie!
Minimalny, poprawny dokument HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj świecie!</h1>
<p>To jest moja pierwsza strona. HTML to podstawa webu!</p>
<!-- Komentarz: Autor - Twój Nick, Data: 2023 -->
</body>
</html>
Witaj świecie!
To jest moja pierwsza strona. HTML to podstawa webu!
Wypróbuj to sam! Otwórz edytor tekstu (np. Notatnik, VS Code – polecamy darmowy VS Code dla kolorowania kodu), zapisz jako .html i otwórz w przeglądarce. Magia? Nie, to HTML w akcji!
Najważniejsze elementy wyjaśnione krok po kroku
- <!DOCTYPE html> – Deklaracja typu dokumentu. Mówi przeglądarce: "To HTML5!". Bez niej aktywuje się tryb kompatybilności wstecznej (quirks mode), co psuje CSS i JS. Ciekawostka: W HTML4 było to dłuższe, np. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">.
- <html lang="pl"> – Korzeń całego dokumentu. Atrybut lang określa język (pl dla polskiego), co pomaga w SEO, dostępności (czytniki ekranu) i stylizacji (np. cudzysłowy). Zawsze dodawaj, by strona była globalnie przyjazna!
- <meta charset="UTF-8"> – Kodowanie znaków. UTF-8 obsługuje polskie litery (ą, ć, ł) i emotikony. Bez tego? "Krzaki" zamiast tekstu. To standard od lat, obsługuje ponad 100 języków.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> – Responsywność. Dostosowuje stronę do ekranu (telefony, tablety). Initial-scale=1.0 oznacza brak zoomu domyślnego. W erze mobile-first (ponad 50% ruchu z telefonów) to must-have!
- <title>Tytuł</title> – Widoczny w zakładce, wynikach wyszukiwania i bookmarkach. Powinien być unikalny, opisowy (do 60 znaków dla SEO). Przykład: "Kurs HTML – Podstawy" zamiast "Strona".
- <head> – Sekcja metadanych. Tu dodajesz linki do CSS, JS, favicons czy meta dla social media (np. Open Graph). Niewidoczna dla użytkownika, ale kluczowa dla maszyn.
- <body> – Treść widoczna. Tu trafia wszystko: teksty, obrazy, formularze. Semantyka (używaj <header>, <main>, <footer> w zaawansowanych) poprawia dostępność.
- <!-- Komentarz --> – Niewidoczne notatki. Idealne na TODO, autorstwo czy wersje. Przeglądarka je ignoruje, ale Ty je widzisz w kodzie. Używaj mądrze, by kod był czytelny!
Ważne: Struktura <html>, <head> i <body> to jak rozdziały książki – dzielą na logiczne części. To podstawa semantycznego HTML, który ułatwia indeksowanie przez Google i nawigację dla niepełnosprawnych.
Dodatkowe best practices i pułapki
Unikaj zagnieżdżania tagów błędnie (np. <p> w <h1> – to nonsens semantyczny). Używaj małych liter dla tagów (konwencja). Waliduj kod: Wklej do validator.w3.org i napraw błędy. Ciekawostka: Błędy HTML powodują, że strona zużywa więcej zasobów przeglądarki!
Zadanie praktyczne – poziom podstawowy
Stwórz plik index.html, wklej kod powyżej. Zmień tytuł na "Moja Super Strona", dodaj drugi paragraf z opisem siebie i komentarz z dzisiejszą datą. Otwórz w dwóch przeglądarkach (np. Chrome i Firefox) – zauważ różnice? Dodaj <meta name="description" content="Krótki opis strony"> w head.
Zadanie zaawansowane – eksperyment
Usuń <!DOCTYPE html> i sprawdź, co się dzieje (użyj narzędzi deweloperskich: F12 w Chrome). Dodaj <link rel="stylesheet" href="style.css"> w head, stwórz plik style.css z body { background: lightblue; } i zobacz efekt. Podziel się w komentarzach poniżej!