29. Pozostałe elementy HTML

Znasz już prawie wszystkie elementy HTML5, w tym znasz wszystkie najczęściej używane i kilka rzadziej używanych z nich. W tym rozdziale kursu poznasz pozostałe. Niektóre z nich są używane rzadko lub mają specyficzne zastosowania, ale warto wiedzieć o ich istnieniu, bo może kiedyś będzie trzeba z nich skorzystać.

We wcześniejszych rozdziałach omawialiśmy elementy z luźnym podziałem na kategorie. W kilku pierwszych rozdziałach kursu omawialiśmy więc głównie elementy służące do znakowania różnego rodzaju fragmentów tekstu (np. strong, em itd.), a potem przeszliśmy do elementów struktury dokumentu HTML5, formularzy i tabel.

Ten rozdział podzielimy sobie dla ułatwienia na kategorie. Zaczniemy od trzech elementów zaliczanych do kategorii interaktywnych: details, summary i dialog.

Elementy interaktywne HTML5

Do kategorii elementów interaktywnych w HTML5 zaliczają się details, summary i dialog. Ich interaktywność polega na tym, że wchodzą one w interakcję z użytkownikiem.

Elementy details i summary są ze sobą ściśle powiązane.

Element details tworzy na stronie rodzaj rozwijanego okienka, w którym można umieścić dowolne dodatkowe informacje, takie które nie zawsze są potrzebne użytkownikowi. Dobrym przykładem jego zastosowania może być spis treści artykułu, który można przedstawić w zwiniętej formie, aby nie zajmował dużo miejsca, którą użytkownik w razie potrzeby może rozwinąć.

Natomiast element summary reprezentuje podpis lub legendę dotyczące pozostałej zawartości elementu summary, którego jest potomkiem (musi być jego pierwszym dzieckiem).

Za pomocą tych dwóch elementów moglibyśmy na przykład utworzyć spis treści tego artykułu, podobny do widocznego w pasku bocznym:

<details>
  <summary>W artykule</summary>
  <ol>
    <li>Elementy interaktywne HTML5</li>
	   <li>Elementy skryptowe</li>
    <li>Treść osadzona</li>
    <li>Wstawianie audio na stronę</li>
	   <li>Wstawianie wideo na stronę</li>
  </ol>
</details>

W przeglądarce to wygląda tak, jak na poniższym zrzucie ekranu (oczywiście wygląd elementu i jego zawartości można uatrakcyjnić za pomocą CSS):

Ewentualnie możemy sprawić, aby zawartość elementu details była domyślnie otwarta. W tym celu należy mu nadać atrybut logiczny open:

<details open>…

Trzeci element interaktywny to dialog, który służy do tworzenia okien dialogowych. W oknie takim można wyświetlić wiadomość dla użytkownika, poprosić o odpowiedź na pytanie itd.

Pełną funkcjonalność okna można uzyskać przy użyciu skryptów, np. JavaScript, ale warto też wiedzieć, że do interakcji z nim można używać także formularzy, które mają atrybut method ustawiony na wartość dialog.

<dialog open>
  <blockquote>Nie tykać kobiet; świeżo malowane.</blockquote>
  <p>Autor: Honoré de Balzac</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Zwróć uwagę na atrybut open. Gdyby nie został dodany, domyślnie okno byłoby niewidoczne.

W przeglądarce internetowej ten element wyglądałby tak, jak na poniższym zrzucie ekranu. Kliknięcie przycisku OK spowoduje zniknięcie okna.

Następna kategoria elementów, którą się zajmiemy, to tzw. elementy treści osadzonej (ang. embedded content). Jednego jej przedstawiciela, element img, znasz już bardzo dobrze.

Elementy treści osadzonej

W HTML5 istnieje kilka elementów treści osadzonej. Jak sama nazwa wskazuje, za ich pomocą osadzamy na stronach HTML różnego rodzaju treści, np. element img służy do wstawiania obrazów na strony, a element video umożliwia umieszczanie na nich filmów wideo. Poniższa tabela zawiera zestawienie elementów z tej kategorii z krótkimi opisami.

Nie będziemy szczegółowo zajmować się wszystkimi tymi elementami, ale przyjrzymy się dokładniej paru z nich.

Responsywne grafiki

W rozdziale dotyczącym dostosowywania stron internetowych do urządzeń mobilnych poznaliśmy techniki CSS umożliwiające tworzenie responsywnych stron internetowych oparte na tzw. zapytaniach medialnych. To jednak nie jest jedyna technika umożliwiająca sprawienie, aby strona lepiej wyglądała i sprawniej działała w różnych urządzeniach.

Język HTML5 zawiera element picture umożliwiający wybór różnych obrazów graficznych do załadowania na stronie w zależności od rozmiaru ekranu. Element ten może zawierać dowolną liczbę elementów source i jeden element img, ewentualnie z dodatkowymi elementami skryptowymi.

Sam element picture jest tylko mało interesującym kontenerem. Ciekawsze jest to, co znajduje się w jego treści, czyli elementy source i img.

Spójrz na poniższy przykład, który mógłby znaleźć się w naszej witrynie „Ciekawi ludzie” na stronie o Feynmanie:

<picture>
  <source media="(max-width: 768px)" srcset="img/feynman-small.png">
  <source srcset="img/feynman-big.png">
  <img src="feynman.png">
</picture>

Element source ma kilka atrybutów. W tym przykładzie użyliśmy dwóch z nich. Pierwszy to media, w którym można wpisać dowolne zapytanie medialne, a drugi to srcset, w którym można podać listę deskryptorów obrazów rozdzielanych przecinkami. W powyższym przykładzie jego wartość ma najprostszą możliwą postać, czyli reprezentuje po prostu adres obrazu.

Ostatnim dzieckiem elementu picture zawsze powinien być element img, który zostanie użyty przez przeglądarki nieobsługujące elementu picture i source lub w sytuacji, gdy żaden nie zostanie dopasowany do obecnego stanu okna.

Gdybyśmy dodali powyższy element picture do naszej strony, to na ekranach o szerokości do 768 pikseli wyświetlany byłby obraz feynman-small.png, a na większych – feynman-big.png. W przeglądarkach nieobsługujących elementów picture i source zostałby wyświetlony element feynman.png.

Jeśli masz ochotę zrobić coś samodzielnie, możesz przygotować na swoje strony różne wersje obrazów i dodać je do stron za pomocą odpowiednich elementów source (nie zapomnij też o atrybutach width i height).

Dzięki temu w urządzeniach mobilnych będą ładowane mniejsze obrazy, co przyczyni się do zmniejszenia ilości zużywanego transferu, który w ich przypadku czasami jest ograniczony.

Ponadto za pomocą elementów source można zabezpieczyć się przed ewentualnym brakiem obsługi określonego formatu grafiki przez przeglądarki. Na przykład:

<picture>
  <source srcset="img/feynman.webp">
  <source srcset="img/feynman.png">
  <source srcset="img/feynman.jpg">
  <source srcset="img/feynman.gif">
  <img src="feynman.png">
</picture>

W tym przypadku przeglądarka wybierze pierwszy format, który obsługuje, a pozostałe zostaną przez nią zignorowane.

Audio i wideo

Do wstawiania treści dźwiękowych i wideo na strony internetowe w HTML5 służą elementy audio i video w połączeniu ze znanym nam już elementem source.

Ich składnia jest bardzo prosta. Spójrz na poniższe dwa przykłady:

<video controls>
  <source src="film.mp4" type="video/mp4">
    <track src="napisy_pl.vtt" kind="subtitles" srclang="en" label="Polski">
    Twoja przeglądarka nie  obsługuje elementu video.
  </video>
  <audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Twoja przeglądarka nie obsługuje elementu audio.
</audio>

Zarówno elementowi audio, jak i video nadaliśmy atrybut controls, który powoduje pojawienie się przycisków odtwarzacza, bez których byłby on niewidoczny.

Ponadto elementy source mają atrybut src określający adres i atrybut type określający typ MIME pliku multimedialnego.

Podobnie jak element picture, elementy video i audio mogą zawierać dowolną liczbę elementów source, wskazujących na przykład pliki w różnych formatach jako zabezpieczenie przed brakiem obsługi któregoś z nich przez przeglądarkę.

Na końcu znajduje się treść tekstowa, która zostanie wyświetlona w przeglądarkach nieobsługujących elementów video i audio.

Z kolei element track określa napisy do pliku multimedialnego – może być użyty zarówno w elemencie audio, jak i video. Znaczenie jego atrybutów jest następujące:

• src – adres pliku z napisami
• kind – rodzaj ścieżki tekstowej
• srclang – język pliku z napisami
• label – etykieta widoczna dla użytkownika

O wszystkich opisanych tu elementach można powiedzieć sporo więcej. Szczegółowe informacje znajdziesz na stronach, do których prowadzą łącza w ich nazwach.

Elementy skryptowe

Kolejną i ostatnią już kategorią elementów HTML5, którą słabo poznaliśmy do tej pory, są elementy skryptowe.

Znamy element script, służący do wstawiania skryptów na strony, ale oprócz niego istnieje jeszcze kilka innych elementów zaliczających się do tej samej kategorii. Poniższa tabela zawiera zestawienie wszystkich elementów skryptowych HTML5.

Podsumowanie

Teraz znasz już wszystkie elementy HTML5. Najważniejsze znasz całkiem dokładnie, a rzadziej używane znasz pobieżnie, ale wiesz, gdzie w razie potrzeby szukać dodatkowych informacji. Umiesz też już bardzo sprawnie posługiwać się technologią CSS. Przynajmniej jeśli uważnie przestudiowałeś lub przestudiowałaś wszystkie rozdziały i ćwiczenia…

To jest przedostatni rozdział naszego kursu. Mam nadzieję, że dzięki temu kursowi udało Ci się pokochać technologie HTML i CSS z wzajemnością. W ostatnim rozdziale znajdziesz krótkie podsumowanie zdobytej wiedzy oraz parę wskazówek na temat tego, czego jeszcze warto się nauczyć w dziedzinie tworzenia stron internetowych.