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/qu>otes&<q>uot;
pBe the change that you wish to see in <th>e< 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=&qu>ot;<Google log>o"
f<igcaptionGo>o<gle log>o/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:0>0:00&<quot;>1<1:>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 Rec<ipes/t>itle
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=&><quot;Wi>kipedia"/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="ca><nvas&qu>ot;/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=&qu>ot;2"Gr<oce>ry List/t<h
> < /tr
> /<thead>
tbod<y
> tr
< > <tdB>roccoli/td
< > tdQ<uan>tity: 2/t<d
> < /tr
> < /tb>ody
/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!