Zawartość metadata
- Data publikacji
- Ostatnio edytowano
Do kategorii zawartość metadata należą przede wszystkim elementy HTML, które mogą reprezentować dodatkowe informacje metadata o danym dokumencie HTML, jak również elementy HTML, które mogą tworzyć relację pomiędzy danym dokumentem HTML, a innymi plikami różnego typu, jak również elementy HTML, które mogą tworzyć dodatkową funkcjonalność danego dokumentu HTML za pomocą skryptów języka programowania (na przykład języka programowania JavaScript) lub za pomocą reguł języka CSS.
Przykład:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="https://webkod.pl/files/html/reguly-01.css" rel="stylesheet">
<title>Koszyk owoców</title>
</head>
<body>
<label>
Wybierz owoc:
<select id="lista-1">
<option>arbuz</option>
<option>gruszka</option>
<option>jabłko</option>
<option>malina</option>
<option>wiśnia</option>
</select>
</label>
<button id="przycisk-1">dodaj</button>
<p id="akapit-1">Twój koszyk owoców:</p>
<script src="https://webkod.pl/files/html/skrypt-01.js"></script>
</body>
</html>
Rezultat:
Twój koszyk owoców:
Nasza przykładowa struktura HTML zawiera w sobie dodatkową informację metadata dla przeglądarki internetowej o systemie kodowania znaków, który został przypuszczalnie wykorzystany przez nas do napisania zawartości danego dokumentu HTML. Wspomnianą informację w tym wypadku reprezentuje element meta
, który posiada atrybut charset
wraz z wartością utf-8
.
Ponadto nasza przykładowa struktura HTML zawiera w sobie informację o tytule danego dokumentu HTML. Wspomnianą informację reprezentuje element title
wraz ze swoją zawartością, czyli w tym wypadku ciągiem znaków Koszyk owoców
.
Dzięki elementowi link
, który posiada atrybut href
wraz z wartością https://webkod.pl/files/html/reguly-01.css
oraz atrybut rel
wraz z wartością stylesheet
dany dokument HTML został powiązany z zasobem internetowym w postaci pliku CSS o nazwie reguly-01
. Wspomniany plik CSS o nazwie reguly-01
zawiera w swojej zawartości przykładową regułę języka CSS, dzięki której to regule języka CSS po wyświetleniu w oknie przeglądarki internetowej elementu p
należącego do naszej przykładowej struktury HTML wspomniany element p
będzie posiadał nowy styl wyglądu, czyli w tym wypadku niebieski kolor tła.
Dzięki elementowi script
, który posiada atrybut src
wraz z wartością https://webkod.pl/files/html/skrypt-01.js
dany dokument HTML został powiązany z zasobem internetowym w postaci pliku JS o nazwie skrypt-01
. Wspomniany plik JS o nazwie skrypt-01
zawiera w swojej zawartości przykładowy skrypt języka programowania JavaScript, dzięki któremu to skryptowi języka programowania JavaScript po wyświetleniu w oknie przeglądarki internetowej naszej przykładowej struktury HTML wspomniana struktura HTML będzie zawierała w sobie dodatkową funkcjonalność, za pomocą której po wybraniu nazwy interesującego nas owocu z opcji wyboru reprezentowanych przez elementy option
elementu select
posiadającego atrybut id
o wartości lista-1
, wspomniana nazwa owocu wraz z elementem b
zostanie dodana do zawartości reprezentowanej przez element p
posiadający atrybut id
o wartości akapit-1
, lecz tylko gdy klikniemy na przycisk reprezentowany przez element buttom
posiadający atrybut id
o wartości przycisk-1
.
Kategoria zawartość metadata odgrywa ważną rolę w odniesieniu do kontekstów HTML, o których powiemy sobie wkrótce.