Primer lesson: hipertekstowy język znaczników

Język znaczników hipertekstu ( HTML )

HTML to skrót od Hypertext Markup Language. Jest to standardowy język znaczników dla 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.

Podstawy sieci Web

W swej istocie internet jest rozległą siecią komputerów połączonych globalnie. Podstawowym sposobem interakcji z tą siecią jest World Wide Web ( WWW ), system połączonych dokumentów hipertekstowych dostępnych za pośrednictwem internetu. Sercem WWW są strony internetowe, które są dokumentami napisanymi w HTML . HTML zapewnia podstawową strukturę witryn, która jest następnie ulepszana i modyfikowana przez inne technologie, takie jak CSS i JavaScript.

Struktura dokumentów HTML

Dokument HTML jest ustrukturyzowany zgodnie z zestawem zagnieżdżonych znaczników, które są elementami ujętymi w nawiasy kątowe. Znaczniki te informują przeglądarkę internetową, jak wyświetlać zawartość. Przykład prostej struktury dokumentu HTML to:

 <!Typ dokumentu html>
<html>
    <głowa>
        <title>Tytuł strony</title>
    </głowa>
    <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 i znaczniki HTML

Dokumenty HTML składają się z elementów HTML. Każdy element jest reprezentowany przez znacznik początkowy, pewną zawartość i znacznik końcowy. Znaczniki początkowy i końcowy elementu są identyczne, z wyjątkiem tego, że znacznik końcowy zawiera ukośnik przed nazwą elementu.

Na przykład znacznik <code><p></code> obejmuje 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:

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

Atrybuty

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

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

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

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

Linki i nawigacja

Użycie znacznika <code><a></code> tworzy hiperłącza, które są podstawą wzajemnego powiązania sieci. Hiperłącze może prowadzić do innej strony internetowej, innej sekcji na tej samej stronie, a nawet do pliku do pobrania. Na przykład:

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

Tworzy link do <code>https://example.com</code>.

Listy

HTML dostarcza elementy do tworzenia list. Istnieją dwa podstawowe typy list:

Listy nieuporządkowane (<code><ul></code>), gdzie kolejność elementów nie jest znacząca. Elementy na liście nieuporządkowanej są oznaczone punktorami.
Listy uporządkowane (<code><ol></code>), gdzie kolejność elementów ma znaczenie. Elementy 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 dotyczące 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) i elementy multimedialne (<code><audio></code> i <code><video></code>).

Semantyczny HTML

Semantyczny HTML odnosi się do użycia znaczników HTML w celu wzmocnienia semantyki lub znaczenia informacji na stronach internetowych. Zamiast po prostu definiować, jak elementy wyglądają lub zachowują się (to zadanie dla CSS i JavaScript), semantyczny HTML dokładnie opisuje strukturę i rodzaj zawartości. Na przykład znacznik <code><article></code> wskazuje, że zawartość wewnątrz jest artykułem, podczas gdy znacznik <code><nav></code> oznacza menu nawigacyjne.

Użycie semantycznego HTML poprawia dostępność i możliwości wyszukiwania treści internetowych, czyniąc je bardziej użytecznymi i łatwiejszymi do odnalezienia.

Wniosek

HTML jest podstawową technologią World Wide Web, zapewniającą podstawową strukturę stron internetowych. Dzięki użyciu tagów, atrybutów i elementów HTML umożliwia tworzenie ustrukturyzowanych dokumentów. Rozumiejąc i stosując HTML , można tworzyć szeroką gamę treści dostępnych w sieci, od prostych dokumentów tekstowych po złożone interaktywne doświadczenia multimedialne. Jako podstawa rozwoju sieci, opanowanie HTML jest niezbędne dla każdego, kto chce projektować lub rozwijać sieć.

hipertekstowy język znaczników