W poprzedniej lekcji napisaliśmy naszą pierwszą stronę w której używaliśmy już znaczników a dokładniej trzech:
<html></html> – określa ramy naszego kodu HTML,
<head></head> – na razie nie ma zawartości ale w kolejnych artykułach zmienimy ten stan rzeczy.
<body></body> – między tymi znacznikami umieszcza się kod który widać w przeglądarce internetowej.

W tym artykule dowiemy się jak są zbudowane i jakie są rodzaje znaczników HTML.

Dodajemy nowy znacznik: <h1> – nagłówek

 

Poszczególne znaczniki (również wykorzystywany w tym przykładzie <h1>) będziemy omawiać w kolejnych artykułach.
Zapiszmy nasz plik i zobaczmy jak wygląda nasza strona. Po odświeżeniu strony powinieneś zobaczyć taki rezultat:

Na powyższym zdjęciu widzimy, że nasz tekst jest większy i pogrubiony. Przeanalizujmy teraz nasz nowy element który składa się z:
– znacznika otwierającego

Znacznik otwierający h1

-znacznika zamykającego:

Znacznik zamykający /h1

Między znacznikam znajduje się zawartość elementu w naszym wypadku będzie to tekst: „Hello world”. Całość prezentuje się następująco:

Element HTML: h1

Nasz element składa się z 2 znaczników (otwierającego i zamykającego) oraz zawartości. W naszym przypadku jest to sam tekst. Nie zawsze tak jest, bardzo często zawartość może również posiadać inne elementy HTML (zagnieżdżone elementy)

 

Zagnieżdżone elementy HTML

W zasadzie to już używaliśmy zagnieżdżonych znaczników. Przykład takiego zagnieżdżenia: <html> ma w sobie <head> oraz <body> a ten z kolei ma w sobie jeszcze dodany niedawno przez nas <h1>. Przeanalizujmy jeszcze jeden przykład który można zobaczyć. Dodamy podkreślenie tylko do słowa „world”.

Jak widzimy na powyższym przykładzie dodaliśmy do elementu <h1> nowy element <u> który podkreśla fragment tekstu znajdujący się między znacznikiem otwierającym <u> i zamykającym </u>. Zapiszmy nasz plik i zobaczmy jak wygląda nasza strona (nie zapomnij o odświeżeniu strony).

Wszytko zadziałało tak jak się tego spodziewaliśmy tekst znajdujący się w elemencie <u> jest podkreślony. Podkreślony tekst posiada również właściwości elementu <h1> ponieważ jest on wewnątrz tego elementu.

 

Element bez zawartości i znacznika zamykającego

Przykładem takiego znacznika jest <br> – Używamy go, gdy chcemy natychmiast zakończyć linię i przejść do następnej (wszystkie „normalne” znaki końca linii są ignorowane przez przeglądarkę np „Enter” w kodzie strony).

Wynik naszej zmiany możemy zobaczyć na poniższym obrazku

Jak widzimy słowo „world” zostało przeniesione do nowej lini, znacznik <h1> zadziałał. 🙂 W kolejnym artykule przyjrzymy się bliżej innemu „pustemu” znacznikowi a mianowicie <img>.

Podsumowanie:

Każda strona wyświetla w przeglądarce internetowej składa się z elementów HTML.

Element składa się z znacznika otwierającego, zawartości elementu oraz znacznika zamykającego. Elementy mogą posiadać w swojej zawartości inne elementy HTML.

Znacznik skład się z nazwy „h1” znajdującej się w nawiasach ostrych < >. Nazwa elementu w znaczniku zamykającym jest poprzedzona PRAWYM ukośnikiem. Pamiętajmy, że musi być to PRAWY ukośnik z lewym niestety nie zadziała.

W języku HTML wielkość liter nie ma znaczenia moglibyśmy nasze znaczniki zapisywać w taki sposób: <H1></H1>, <BODY></BODY>, <Body></Body> wszystkie te znaczniki są poprawne i zostały by poprawnie zinterpretowane przez przeglądarkę. Przyjęło się jednak żeby używać małych liter i tego będziemy się trzymali w naszym kursie.

W języku HTML wyróżniamy również elementy które nie posiadają zawartości oraz znacznika zamykającego. Przykładem takich elementów jest: <br> – przejście do nowej linii który pokazaliśmy w przykładzie powyżej, <img> – element dzięki któremu będziemy mogli dodawać obrazki do naszej strony. W następnym artykule będziemy korzystali właśnie z znacznika <img> nauczymy się dodawać atrybuty do naszych znaczników dzięki którym np wyświetlimy zdjęcie na stronie zmienimy kolor tekstu itp.