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.
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>
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!