Dodatkowe elementy HTML

Czego dowiedzieliśmy się z poprzednich ćwiczeń:

  • Podstawy tagów i elementów HTML.
  • Jak stworzyć strukturę strony internetowej.
  • Semantyczny kod HTML i sprawdzone metody.

W tym artykule pogłębiasz swoją wiedzę o języku HTML i omawiasz dodatkowe elementy tego języka.

Elementy zawartości tekstowej

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

Te elementy umożliwiają tworzenie treści tekstowych i nadają im strukturę, styl i znaczenie. Istnieje wiele fragmentów tekstu, które mogą zawierać poniższe 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 użyć elementu <blockquote>, co świadczy o słynnym cytatie Mahatmy Gandhiego. Istnieje wiele świetnych cytatów, które dostarczają zapadających w pamięć treści i znaczenia. Pomyśl o swoich ulubionych inspirujących osobach i ich cytatach.

Używaj elementu <blockquote>, gdy używasz cytatów i odwołujesz się do informacji ze źródła. Element <blockquote> tworzy unikalne wcięcie i wyrównanie w prezentacji oraz używa zarówno tagu otwierającego, jak i zamykającego. <blockquote> jest szczególnie przydatny, gdy stosujesz dłuższe cytaty, 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>

Często strona internetowa zawiera sekcję najczęstszych pytań i udostępnia użytkownikowi dodatkowe informacje. Znajdują się tam sekcje z najczęstszymi pytaniami, które są wspólne dla informacji o produktach, planów podróży oraz innych rodzajów pytań i odpowiedzi.

Przydatny jest element <details>, który zawiera dodatkowe informacje. Element ma wbudowaną funkcję przełączania, a użytkownik może go otworzyć i zamknąć. Gdy przełącznik jest otwarty, treść dodatkowych informacji jest rozwinięta i użytkownik może ją odczytać. Po zamknięciu przełącznika informacje dodatkowe będą ukryte przed użytkownikiem. Aby nazwać 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>

To jest działanie elementu <figure>. Jak widać, zastosowanie <figure> w połączeniu z elementem <figcaption> może poprawić wrażenia wizualne.

W całej sieci dostępne są obrazy i inne przydatne dane wizualne. Elementy wizualne przyciągają uwagę użytkownika i zapewniają satysfakcję. Element <figure> służy do oznaczania obrazów, tabel, wykresów itp. Działanie tej funkcji polega na tworzeniu własnych 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> ma zarówno znaczenie, jak i znaczenie semantyczne, co ułatwia takie działania jak planowanie spotkań online, publikowanie daty i godziny artykułu na blogu, publikowanie archiwów itp. Przykładami witryn, w których można użyć elementu <time>, są korzystanie z Kalendarza Google, publikowanie artykułu na platformie czy czytanie historycznych archiwów online z biblioteki.

Element <time> odwołuje się do czasu i może reprezentować czas 24-godzinny lub konkretną datę, którą można dostosować do strefy czasowej i lokalizacji. Ten element wymaga tagu otwierającego i zamykającego – <time> i </time>. Możesz dodać atrybut datetime, aby umożliwić odczytywanie dat 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 pojawia się nazwa <title>. Jest to tytuł strony internetowej. Ten element jest ważny i jest używany przez wyszukiwarkę 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: zastanawiasz się nad stroną internetową, ale nie pamiętasz adresu URL witryny. Wpisz słowa kluczowe w wyszukiwarce. Wyszukiwarka pomaga w znalezieniu strony internetowej, której szukasz. Możesz też wyświetlić nazwę <title> pojawiającą się w wynikach wyszukiwania.

Umieszczone elementy treści

Poza tekstem warto mieć do dyspozycji różne dodatkowe elementy.

Element <iframe>

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

Gdy skończysz robić zakupy online i klikniesz opcję płatności, np. PayPal lub Apple Pay, funkcje te są zwykle dodawane do strony internetowej z <iframe>. Wyświetlanie mapy w internecie w celu wyszukania lokalnej firmy to kolejne częste doświadczenie. Elementy iframe tego typu można dodawać na stronie internetowej. W powyższym przykładzie adres URL z Wikipedii został umieszczony 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 prostokątną ramkę i wyświetla zawartość w przeglądarce. Ramka umożliwia prezentację układu w kształcie okna w elemencie <iframe>. To skuteczny sposób dodawania treści do strony internetowej, która zwiększa jej atrakcyjność.

Elementy formularza

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

Gdy oglądasz dłuższy film, wykład lub wypełniasz obszerny formularz, w śledzeniu postępów może Ci pomóc wizualny pasek postępu. W takich sytuacjach element <progress> jest przydatny.

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 określa liczbę zmiennoprzecinkową, a atrybut value informuje o postępie w danym zadaniu.

Tworzenie scenariusza

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

Aby rysować grafikę i animacje w czasie rzeczywistym, użyj elementu <canvas>. Aby utworzyć obiekt canvas, umieść element <canvas> na swojej stronie internetowej HTML. Ten element wymaga kodu JavaScript do rysowania i tworzenia grafiki.

Elementy treś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 początkowy do dodawania kolejnych elementów z wierszami i kolumnami. Tabele często pojawiają się na stronach internetowych, ułatwiając porządkowanie i wyświetlanie informacji. Jednym z przypadków użycia elementu <table> jest prezentowanie użytkownikowi informacji tabelarycznych, takich jak rodzaj informacji znalezionych w arkuszu kalkulacyjnym.

Element <th>

Element <th> to nagłówek grupy komórek.

Element <tr>

Element <tr> definiuje wiersz komórek w tabeli. Tutaj możesz dodać dane z określonej komórki.

Element <td>

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

Podsumowanie

W tym artykule udało Ci się odkryć dodatkowe elementy HTML i rozwijać swoje umiejętności kodowania. Wiesz już więcej o treści, tekście w tekście, treściach umieszczonych na stronie i elementach tabel. Teraz już wiesz, jak zrozumieć dodatkowe elementy HTML. Tak trzymaj!