0Pricing
HTML for Kids · Lekcja

Tagi i elementy HTML

Dowiedz się, czym są tagi i elementy oraz jak działają.

Tagi i elementy HTML to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 3 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.

Znaczniki i elementy HTML

Witaj w kolejnej lekcji! Dziś pozna Pan znaczniki i elementy HTML. To elementy składowe każdej tworzonej strony internetowej.

Tagi i elementy HTML — ilustracja 1

Czym są znaczniki HTML?

Znaczniki HTML to specjalne słowa kluczowe umieszczone w nawiasach ostrych <>. Informują przeglądarkę, co zrobić z zawartością znajdującą się wewnątrz.

Przykład znacznika:<h1>

Znaczniki zwykle występują parami: jako znacznik otwierający i znacznik zamykający.

Przykład:

<h1>Hello</h1>

Czym są elementy HTML?

Element HTML to połączenie znacznika otwierającego, treści i znacznika zamykającego.

Na przykład:

<h1>Welcome to My Page</h1>

Rodzaje znaczników

Istnieją dwa główne rodzaje znaczników:

  • Znaczniki parzyste: Mają znacznik otwierający i zamykający. Przykład: <p>Paragraph</p>
  • Znaczniki samozamykające: Nie wymagają znacznika zamykającego. Przykład: <img />

Często używane znaczniki

Oto kilka podstawowych znaczników HTML, których będzie Pan często używać:

  • <h1> to <h6>: Nagłówki — od największego do najmniejszego
  • <p>: Akapit
  • <a>: Odnośnik
  • <img>: Obraz
  • <br>: Złamanie wiersza

Zobaczmy przykład:

<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />

Atrybuty w znacznikach

Atrybuty dostarczają dodatkowych informacji o elemencie. Umieszcza się je w znaczniku otwierającym.

Przykład:

<a href="https://example.com" 
target="_blank">Visit Example</a>

Zagnieżdżanie znaczników

Jeden znacznik można umieścić wewnątrz innego. Nazywa się to zagnieżdżaniem.

Przykład:

<p>This is a <strong>bold</strong> word.</p>

Kolejność zamykania zagnieżdżonych znaczników

Pamiętaj: Zawsze zamykaj wewnętrzny znacznik przed zamknięciem zewnętrznego.

Przykład: połączenie wszystkich elementów

Oto przykład łączący wszystko, czego się dotąd nauczyliśmy:

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Example</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a <strong>simple</strong> paragraph of text.</p>
    <a href="https://example.com" target="_blank">Click here to learn more</a>
    <br />
    <img src="image.jpg" alt="A beautiful view" />
  </body>
</html>

Świetna praca!

Gratulacje! Poznał Pan znaczniki, elementy, atrybuty i zagnieżdżanie w HTML-u. To elementy składowe każdej tworzonej strony internetowej. W następnej lekcji napiszemy pierwszą stronę HTML z rzeczywistą treścią!

Tagi i elementy HTML — ilustracja 11

Często zadawane pytania

Czy lekcja „Tagi i elementy HTML” jest bezpłatna?

Tak — pełny tekst „Tagi i elementy HTML” 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 „Tagi i elementy HTML”?

Dowiedz się, czym są tagi i elementy oraz jak działają. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Tagi i elementy HTML”?

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

  1. Czym jest HTML?
  2. Struktura HTML: elementy budulcowe
  3. Tagi i elementy HTML
  4. Tworzenie pierwszej strony HTML
← Powrót do HTML for Kids