Dodatkowe elementy HTML

Poprzednie ćwiczenia to takie, w których omówiliśmy:

  • Podstawowe informacje o tagach i elementach HTML.
  • Jak stworzyć strukturę strony internetowej.
  • Semantyczny kod HTML i sprawdzone metody

Ten artykuł pozwala rozszerzać wiedzę na temat HTML i omawiać dodatkowe elementy tego języka.

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

Umożliwiają one tworzenie treści tekstowych i nadają im strukturę, styl oraz znaczenie. Jest wiele fragmentów tekstu, które mogą zawierać wymienione niżej elementy.

Element cytatu blokowego

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

Ten przykład pokazuje, jak wykorzystać element <blockquote> ze słynnym cytatem Mahatmy Gandhiego. Jest wiele świetnych cytatów, które zapewniają zapadające w pamięć treści i znaczenia. Pomyśl o swoich ulubionych inspirujących postaciach i ich cytatach.

Gdy używasz cudzysłowów i odwołujesz się do informacji ze źródła, używaj elementu <blockquote>. Element <blockquote> tworzy w prezentacji unikalne wcięcie i wyrównanie, a także używa tagu otwierającego i zamykającego. Metoda <blockquote> jest szczególnie przydatna, gdy używasz dłuższych cudzysłowów, które obejmują wiele wierszy tekstu.

W elemencie <blockquote> możesz też używać różnych elementów, np. nagłówka, akapitu czy listy.

Element <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

Strona internetowa często zawiera sekcję z najczęstszymi pytaniami i dodatkowe informacje dostępne dla użytkowników. Są to sekcje z najczęstszymi pytaniami, które są często powtarzane w przypadku informacji o produktach, planu podróży lub dowolnego rodzaju pytania i odpowiedzi.

Przydatny jest element <details>, ponieważ korzysta on z ujawnionego widżetu z dodatkowymi informacjami. Element ma wbudowaną funkcję przełączania, a użytkownik może otwierać i zamykać przełącznik. Po otwarciu przełącznika treść dodatkowych informacji się rozwija i użytkownik może je przeczytać. Gdy przełącznik jest wyłączony, treść dodatkowych informacji jest ukryta przed użytkownikiem. Aby nazwać sam widżet <details>, użyj elementu <summary>.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Oto działanie elementu <figure>. Tutaj widać, że atrybut <figure>, używany razem z elementem <figcaption>, może poprawić wrażenia wizualne.

Cały czas masz dostęp do obrazów w całym internecie i innych przydatnych danych wizualnych. Elementy wizualne pomagają przyciągnąć uwagę użytkownika i zapewniają mu świetne wrażenia. Element <figure> służy do oznaczania obrazów, tabel, wykresów itp. Tworząc własne treści w odniesieniu do głównej treści.

Element <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

Element <time> nadaje zarówno znaczenie, jak i semantykę, dzięki czemu zwiększa funkcjonalność w przypadku takich działań jak planowanie spotkań online, publikowanie daty i godziny artykułu na blogu, archiwum itp. Przykładowe witryny, w których użyto elementu <time>, to np. korzystanie z Kalendarza Google, publikowanie artykułu na żywo na platformie czy czytanie historycznych archiwów online w witrynie biblioteki.

Element <time> odwołuje się do czasu i może reprezentować zegar 24-godzinny lub konkretną datę, która może się dostosować do strefy czasowej i lokalizacji. Ten element wymaga tagu otwierającego i zamykającego oraz tagu <time> i </time>. Możesz dodać atrybut datetime, aby daty były odczytywane w formacie czytelnym dla komputera.

Metadane dokumentu

<title>Sarah's Favorite Food Recipes</title>

Za każdym razem, gdy wpisujesz adres URL witryny, na pasku przeglądarki lub na karcie strony internetowej wyświetla się nazwa elementu <title>. Jest to tytuł określony dla strony internetowej. Ten element jest ważny i używa go do wyświetlania listy powiązanych stron internetowych w wynikach wyszukiwania. Długość tytułu może być różna: od krótkiego i opisowego po dłuższy i bardziej opisowy.

Scenariusz: masz jakąś stronę internetową, ale nie pamiętasz jej adresu URL. Wpisz słowa kluczowe w wyszukiwarce. Wyszukiwarka ułatwia odszukanie strony internetowej, której szukasz. Nazwa <title> widoczna w wynikach wyszukiwania jest widoczna w wyszukiwarce.

Umieszczone elementy treści

Oprócz tekstu możesz używać różnych dodatkowych elementów.

Element <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Gdy sfinalizujesz zakupy online i klikniesz opcję płatności, taką jak PayPal lub Apple Pay, te funkcje są często dodawane do strony internetowej z ikoną <iframe>. Korzystanie z mapy online w celu wyszukania firmy lokalnej to kolejny typowy proces. Ten rodzaj interfejsu użytkownika można dodać do strony za pomocą elementu iframe. W powyższym przykładzie widoczny jest adres URL Wikipedii w elemencie iframe zatytułowanym „Wikipedia”.

Element <iframe> umożliwia wstawianie treści z innego źródła i umieszczanie ramki na stronie internetowej. Tworzy on prostokątną ramkę i wyświetla zawartość w przeglądarce. Ramka umożliwia prezentowanie w elemencie <iframe> układu w kształcie okna. To potężny sposób na uatrakcyjnianie swoich stron internetowych, dodając do nich treści.

Elementy formularzy

<progress max="100" value="30"> 30% </progress>

Gdy oglądasz dłuższy film, wykład czy wypełniasz obszerny wniosek, wizualny pasek postępu pomoże Ci śledzić postępy. Element <progress> jest przydatny w takich sytuacjach.

Ten element jest przedstawiony jako pasek wizualny z kolorem tła. Pasek wizualny może mieć różne rozmiary i kolory tła. Na pasku postępu możesz opcjonalnie używać atrybutów max i value. Atrybut max ustawia liczbę zmiennoprzecinkową, a atrybut value informuje o postępie w wykonaniu zadania.

Tworzenie scenariusza

<canvas id="canvas"></canvas>

Aby móc rysować grafikę i animacje w czasie rzeczywistym, użyj elementu <canvas>. Aby utworzyć obszar roboczy, umieść element <canvas> na stronie HTML. Aby ta funkcja mogła rysować i tworzyć grafikę, ten element wymaga kodu JavaScript.

Elementy zawartości tabeli

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

Element <table>

Element <table> tworzy tabelę. Jest to punkt wyjścia do dodawania kolejnych elementów z wierszami i kolumnami. Tabele są często umieszczane na stronach internetowych, co pomaga w porządkowaniu i wyświetlaniu informacji. Elementem <table> jest np. możliwość przedstawiania użytkownikowi informacji w postaci tabeli, np. tych, które można znaleźć w arkuszu kalkulacyjnym.

Element <th>

Element <th> jest nagłówkiem grupy komórek.

Element <tr>

Element <tr> definiuje wiersz komórek w tabeli. W tym miejscu możesz dodać określone dane komórkowe.

Element <td>

Element <td> tworzy komórkę i dodaje do niej potrzebną treść.

Podsumowanie

W tym artykule przedstawiliśmy dodatkowe elementy HTML i wykorzystaliśmy Twoje umiejętności kodowania. Znasz już treść, tekst w tekście, treść umieszczoną i elementy tabeli. Już wiesz, jak działają dodatkowe elementy HTML. Tak trzymaj!