Elementy HTML

Otwierający znacznik, zawartość między znacznikami i zamykający znacznik – te trzy elementy tworzą podstawowy składnik HTML. Można to porównać do pisania opowiadania: otwierający znacznik jest jak prolog wprowadzający czytelnika, zawartość między znacznikami to rozwijająca się fabuła pełna treści, a zamykający znacznik jest jak epilog, który zamyka historię i nadaje jej pełne znaczenie. Razem, te części tworzą spójną całość, nadając strukturę i sens całemu dokumentowi.

Pamiętaj, że znaczniki HTML mają wpływ nie tylko na wygląd, ale i na semantykę strony - to one nadają znaczenie naszym elementom. Wszystkie znaczniki HTML są zdefiniowane i opisane w dokumentacji MDN, która jest świetnym źródłem wiedzy dla każdego developera.

Jeśli szukasz łatwiejszych w odbiorze materiałów, polecamy stronę htmlreference.io, na której znajdziesz wszystkie znaczniki HTML wraz z przykładami ich zastosowania. Jeżeli preferujesz materiały w języku polskim, możesz skorzystać z polskojęzycznego odpowiednika lub przetłumaczyć strony po angielsku za pomocą wtyczki Chrome Google Translate lub translate.google.pl. Warto jednak zaznaczyć, że czytanie dokumentacji w języku angielskim pozwala na lepsze przygotowanie do dalszych etapów nauki programowania, gdyż większość materiałów i źródeł jest tworzona właśnie w tym języku.

Zachęcamy do zapisywania linków do stron, które wydają się Ci pomocne lub które są często odwoływane w treści kursu. Będą one dobrym punktem odniesienia w miarę Twojego postępu w nauce HTML.

Tworzenie tagu obrazka (

img

)

Stworzymy tag

img

, który wyświetla obrazek z URL "https://example.com/image.jpg". Dodaj atrybut

alt

opisujący obrazek:

1<img src="https://example.com/image.jpg" alt="Opis obrazka">

Tworzenie akapitu (

p

)

Stworzymy akapit z dowolnym tekstem:

1<p>To jest przykładowy akapit.</p>

Tworzenie nagłówków (

h1

,

h2

,

h3

):

Stworzymy nagłówki

h1

,

h2

oraz

h3

z odpowiednim tekstem.

1<h1>Najważniejszy nagłówek</h1>
2<h2>Średni nagłówek</h2>
3<h3>Mniej ważny nagłówek</h3>

Wyróżnianie tekstu (

strong

i

em

)

Stwórz zdanie, w którym użyjesz tagów

strong

i

em

do wyróżnienia tekstu.

1<p>To jest <strong>ważny tekst</strong> i to jest <em>podkreślony tekst</em>.</p>

Praktyka

Oto przykład strony wykorzystującej różne elementy HTML o tematyce egipskiej:

Eksperymentuj z tym kodem! Dodaj własne elementy, zmień treści, zobacz jak różne znaczniki wpływają na wygląd strony.