Struktura HTML: elementy budulcowe
Poznaj podstawową strukturę dokumentu HTML.
Struktura HTML: elementy budulcowe to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Struktura HTML: elementy składowe
Witaj w drugiej lekcji! Dziś pozna Pan strukturę dokumentu HTML i dowie się, jak poszczególne jego części współdziałają. Można potraktować to jako naukę szkieletu strony internetowej.
Struktura dokumentu HTML
Dokument HTML ma określoną strukturę, którą rozumie przeglądarka. Przypomina ona przepis mówiący przeglądarce, co ma zrobić.
Podstawowe części dokumentu HTML to:
- Deklaracja typu dokumentu: Informuje przeglądarkę, że jest to dokument HTML.
- Znacznik HTML: Zawiera całą treść strony.
- Sekcja head: Zawiera informacje o stronie, takie jak tytuł.
- Sekcja body: Zawiera treść widoczną dla użytkownika.
Jak wygląda ta struktura?
Oto podstawowa struktura dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
Deklaracja typu dokumentu
Deklaracja <!DOCTYPE html> znajduje się na początku każdego dokumentu HTML. Informuje przeglądarkę, że należy oczekiwać HTML5, czyli najnowszej wersji HTML-a.
Można potraktować ją jako początek przepisu na dokument HTML!
Znacznik HTML
Znacznik <html> jest głównym kontenerem całego kodu dokumentu. Informuje przeglądarkę: „Wszystko, co znajduje się wewnątrz, jest kodem HTML”.
Wygląda on tak:
<html>
<!-- All other HTML tags go here -->
</html>
Sekcja head
Sekcja <head> zawiera informacje o stronie internetowej, które nie są widoczne bezpośrednio na stronie. Na przykład:
- Tytuł: Tekst wyświetlany na karcie przeglądarki.
- Informacje meta: Dodatkowe informacje, takie jak opis strony.
Przykład:
<head>
<title>My Cool Web Page</title>
</head>
Sekcja body
Sekcja <body> zawiera wszystko, co jest widoczne dla użytkownika, na przykład tekst, obrazy i odnośniki. To główny obszar treści.
Przykład:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
Połączenie wszystkich elementów
Oto kompletny przykład dokumentu HTML zawierającego wszystkie omówione przed chwilą części:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
Świetna praca!
Gratulacje! Poznał Pan strukturę dokumentu HTML. Wie Pan już, jak wszystkie części współdziałają, tworząc stronę internetową. W następnej lekcji zaczniemy dodawać do stron rzeczywistą treść. Proszę przygotować się do zbudowania swojego pierwszego arcydzieła internetowego!
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 16
- Lekcje
- 35
Często zadawane pytania
Czy lekcja „Struktura HTML: elementy budulcowe” jest bezpłatna?
Tak — pełny tekst „Struktura HTML: elementy budulcowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Co nauczysz się w „Struktura HTML: elementy budulcowe”?
Poznaj podstawową strukturę dokumentu HTML. Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Struktura HTML: elementy budulcowe”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym jest HTML?
- Struktura HTML: elementy budulcowe
- Tagi i elementy HTML
- Tworzenie pierwszej strony HTML