Primer lesson: hipertekstowy język znaczników

Hypertext Markup Language (HTML)

HTML oznacza Hypertext Markup Language. Jest to standardowy język znaczników dokumentów przeznaczonych do wyświetlania w przeglądarce internetowej. HTML może być wspomagany przez technologie takie jak Cascading Style Sheets (CSS) i języki skryptowe, takie jak JavaScript.

Podstawa sieci

W swojej istocie Internet to rozległa sieć komputerów połączonych globalnie. Podstawowym sposobem interakcji z tą siecią jest sieć WWW (WWW), system powiązanych ze sobą dokumentów hipertekstowych, do których można uzyskać dostęp za pośrednictwem Internetu. Sercem WWW są strony internetowe, które są dokumentami napisanymi w języku HTML. HTML zapewnia podstawową strukturę witryn, która jest następnie ulepszana i modyfikowana za pomocą innych technologii, takich jak CSS i JavaScript.

Struktura dokumentów HTML

Struktura dokumentu HTML opiera się na zestawie zagnieżdżonych znaczników, czyli elementów ujętych w nawiasy ostre. Tagi te informują przeglądarkę internetową, jak wyświetlić zawartość. Przykładem prostej struktury dokumentu HTML jest:

 <!DOCTYPE html>
<html>
    <głowa>
        <title>Tytuł strony</title>
    </head>
    <ciało>
        <h1>To jest nagłówek</h1>
        <p>To jest akapit.</p>
    </ciało>
</html>

Ten kod definiuje podstawową stronę internetową z tytułem, nagłówkiem i akapitem tekstu.

Elementy HTML i znaczniki

Dokumenty HTML składają się z elementów HTML. Każdy element jest reprezentowany przez znacznik początkowy, część treści i znacznik końcowy. Znaczniki początkowe i końcowe elementu są identyczne, z tą różnicą, że znacznik końcowy zawiera ukośnik przed nazwą elementu.

Na przykład tag <code><p></code> zawiera akapit tekstu i ma następującą strukturę:

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

Różne elementy służą różnym celom. Na przykład:

W nagłówkach używane są tagi od <code><h1>...</h1></code> do <code><h6>...</h6></code>.
Znacznik <code><a></code> definiuje hiperłącze.
Znacznik <code><img></code> osadza obraz w dokumencie.

Atrybuty

Elementy HTML mogą mieć atrybuty dostarczające dodatkowych informacji o elementach. Atrybuty są umieszczane w znaczniku początkowym elementu i często podawane są w parach nazwa/wartość, np. <code>name="value"</code>.

Na przykład, aby osadzić obraz, używamy tagu <code><img></code> z atrybutem <code>src</code> (źródło) w celu określenia adresu URL obrazu:

 <img src="adres do obrazu.jpg" alt="Opis obrazu">

Atrybut <code>alt</code> zapewnia alternatywny tekst obrazu, jeśli nie można go wyświetlić.

Linki i nawigacja

Użycie tagu <code><a></code> tworzy hiperłącza, które są podstawą wzajemnych powiązań w sieci. Hiperłącze może prowadzić do innej strony internetowej, innej sekcji tej samej strony lub nawet pliku do pobrania. Na przykład:

 <a href="https://example.com">Odwiedź witrynę example.com</a>

Spowoduje to utworzenie linku do <code>https://example.com</code>.

Listy

HTML udostępnia elementy do tworzenia list. Istnieją dwa podstawowe typy list:

Listy nieuporządkowane (<code><ul></code>), gdzie kolejność elementów nie jest istotna. Pozycje na liście nieuporządkowanej są oznaczone punktorami.
Listy uporządkowane (<code><ol></code>), gdzie kolejność elementów ma znaczenie. Pozycje na liście uporządkowanej są ponumerowane.

Każdy element listy jest zawarty w znaczniku <code><li></code> (element listy).

HTML5

HTML5 to najnowsza ewolucja standardu, wprowadzająca wiele nowych funkcji, które odzwierciedlają współczesne potrzeby w zakresie dokumentów multimedialnych i interaktywnych. Należą do nich nowe elementy strukturalne (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>) , elementy graficzne (<code><canvas></code> do rysowania, <code><svg></code> do skalowalnej grafiki wektorowej) oraz elementy multimedialne (<code><audio></code> i <code ><wideo></kod>).

Semantyczny HTML

Semantyczny HTML odnosi się do użycia znaczników HTML w celu wzmocnienia semantyki, czyli znaczenia informacji na stronach internetowych. Zamiast jedynie definiować wygląd i zachowanie elementów (jest to zadanie dla CSS i JavaScript), semantyczny HTML dokładnie opisuje strukturę i typ treści. Na przykład tag <code><article></code> wskazuje, że zawartość jest artykułem, natomiast tag <code><nav></code> oznacza menu nawigacyjne.

Używanie semantycznego kodu HTML poprawia dostępność i możliwość wyszukiwania treści internetowych, czyniąc je bardziej użytecznymi i wykrywalnymi.

Wniosek

HTML to podstawowa technologia sieci WWW, zapewniająca podstawową strukturę stron internetowych. Dzięki zastosowaniu tagów, atrybutów i elementów HTML umożliwia tworzenie dokumentów strukturalnych. Rozumiejąc i wykorzystując HTML, można tworzyć szeroką gamę treści dostępnych w Internecie, od prostych dokumentów tekstowych po złożone, interaktywne doświadczenia multimedialne. Znajomość języka HTML, będącego podstawą tworzenia stron internetowych, jest niezbędna każdemu, kto chce projektować lub programować dla Internetu.

hipertekstowy język znaczników