1.1 Tabele

Tabele pozwalają wyświetlać złożone relacje, umieszczając dowolną zawartość w komórkach. Należy ich używać tylko do zaznaczania danych tabelarycznych: harmonogram transportu, kalendarz, wyniki meczów, transakcje finansowe, menu w restauracji, cennik itp. To znaczy informacje, które logicznie można przedstawić w formie tabelarycznej, na przykład za pomocą Google Sheets.

Pomocne: Elementy tabeli semantycznie opisują dane tabelaryczne, a używanie ich do innych celów stanowi naruszenie semantyki, np. nie powinniśmy używać tabel do tworzenie sekcji która pokazuje członków naszego zespołu lub pokazuje czym zajmuje się nasza firma.

Poniżej będziemy wpisywać znaczniki dla tego rozkładu jazdy pociągów.

SCSS:
.table-train{
    border-collapse: collapse;
    border: solid thick;

    tbody {
            border: solid medium;
    }
    
    td {
        border: solid thin;
        height: 1.4em;
        width: 1.4em;
        text-align: center;
        padding: 0;
    }
}
            

Tabela to zbiór wierszy z komórkami. Przyjrzyjmy się podstawowym znacznikom.

• <table> - określa całą tabelę, kontener dla zawartości.
• <tr> - wiersz tabeli (table row). Nie może być pusty, musi zawierać co najmniej jedną komórkę.
• <td> - komórka tabeli (table data). Może być używana tylko wewnątrz wiersza. Każdy wiersz tabeli musi mieć taką samą liczbę komórek.

Oznaczmy znacznikami rozkład jazdy pociągów tabelą z trzema wierszami.

            <table>
              <tr>
                <td>433</td>
                <td>London - Paris</td>
                <td>5 godzin</td>
              </tr>
              <tr>
                <td>701</td>
                <td>New York - Chicago</td>
                <td>7 godzin</td>
              </tr>
              <tr>
                <td>258</td>
                <td>Oslo - Warsaw</td>
                <td>4 godziny</td>
              </tr>
            </table>
          

Domyślnie tabela nie ma specjalnego formatowania, na przykład tak ciemnej ramki jak na obrazku. W tym celu używany jest CSS, podobnie jak w przypadku każdego innego formatowania treści.

1.2 Komórki nagłówkowe

Aby utworzyć wiersz z nagłówkami kolumn, używamy standardowego znacznika <tr> dla wiersza i oznaczamy komórki specjalnym znacznikiem <th> (table header) - semantycznym znacznikiem komórki nagłówkowej. Domyślnie tekst wewnątrz <th> jest zaznaczony pogrubioną czcionką i jest wyśrodkowany.

            <table>
              <tr>
                <th>Numer</th>
                <th>Trasa</th>
                <th>Czas podróży</th>
              </tr>
              <tr>
                <td>433</td>
                <td>Kijów - Kowel</td>
                <td>5 godzin</td>
              </tr>
              <tr>
                <td>701</td>
                <td>Charków - Dniepr</td>
                <td>7 godzin</td>
              </tr>
              <tr>
                <td>258</td>
                <td>Lwów - Odessa</td>
                <td>4 godziny</td>
              </tr>
            </table>
          

1.3 Sekcje tabeli

Aby ulepszyć semantykę znaczników tabeli, istnieje kilka znaczników strukturalnych.

• <thead> - nagłówek, który opakowuje grupę wierszy tabeli w obszarze nagłówka.
• <tbody> - ciało, opakowuje główną grupę wierszy tabeli.
• <tfoot> - stopka, oznacza grupę wierszy tabeli w obszarze stopki.

W rozkładzie pociągów można wybrać nagłówek z jednego wiersza z nazwami kolumn i ciało.

            <table>
              <thead>
                <tr>
                  <th>Numer</th>
                  <th>Trasa</th>
                  <th>Czas podróży</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td>433</td>
                  <td>Kijów - Kowel</td>
                  <td>5 godzin</td>
                </tr>
                <tr>
                  <td>701</td>
                  <td>Charków - Dniepr</td>
                  <td>7 godzin</td>
                </tr>
                <tr>
                  <td>258</td>
                  <td>Lwów - Odessa</td>
                  <td>4 godziny</td>
                </tr>
              </tbody>
            </table>
          

1.4 Nagłówek tabeli

Jeśli tabela ma nagłówek, można oczywiście oznaczyć go za pomocą znaczników nagłówka.

            <h1>Rozkład jazdy pociągów</h1>
            <table>
              <!-- Znaczniki tabeli -->
            </table>
          

Ale byłoby bardziej semantycznie użyć specjalnego znacznika tabeli <caption>, który powinien znajdować się wewnątrz tabeli jako pierwszy element.

            <table>
              <caption>
                Rozkład jazdy pociągów
              </caption>

              <!-- Reszta znaczników tabeli -->
            </table>
          

1.5 Łączenie komórek

Niektóre tabele są zrobione tak, że trzeba połączyć kilka komórek poziomo lub pionowo.

Napiszmy znaczniki takiej tabeli dodając dodatkowe komórki, biorąc pod uwagę, że „Usługa w chmurze" zajmie dwie komórki w pionie, a „Użycie" - trzy w poziomie.

<table>
  <thead>
    <tr>
      <th>Usługa w chmurze</th>
      <th>Użycie</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <th></th>
      <th>Użytkownicy</th>
      <th>Odwiedzenia</th>
      <th>Rozmiar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Google</td>
      <td>12000</td>
      <td>307000</td>
      <td>1000 Tb</td>
    </tr>
    <tr>
      <td>Amazon</td>
      <td>9000</td>
      <td>200500</td>
      <td>800 Tb</td>
    </tr>
  </tbody>
</table>
            

Zwróćcie uwagę na puste znaczniki <th>, każdy wiersz musi mieć taką samą liczbę komórek, więc na razie zostawimy "dodatkowe" puste. W rezultacie otrzymujemy taką tabelę.

Zasady równej liczby komórek w wierszach i kolumnach nie można cofnąć, ale można ją ominąć. Aby rozszerzyć komórkę w poziomie, używa się atrybutu colspan, w pionie - rowspan.

Trzeba określić grupę komórek do scalenia, a następnie ustawić atrybut colspan dla najwyższej lewej komórki w grupie z liczbą komórek do scalenia po prawej stronie i / lub rowspan na dole. Następnie konieczne jest usunięcie komórek, które stały się niepotrzebne po prawej stronie i / lub na dole.

W naszym zadaniu komórka "Usługa w chmurze" powinna zajmować 2 komórki w pionie, więc dodajemy do niej rowspan="2" i usuwamy puste <th> w wierszu poniżej. Podobnie z komórką "Użycie" ustawiamy colspan="3"i usuwamy dwie sąsiednie komórki po prawej stronie w tym wierszu.

<table>
  <thead>
    <tr>
      <th rowspan="2">Usługa w chmurze</th>
      <th colspan="3">Użycie</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <th></th>
      <th>Użytkownicy</th>
      <th>Odwiedzenia</th>
      <th>Rozmiar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Google</td>
      <td>12000</td>
      <td>307000</td>
      <td>1000 Tb</td>
    </tr>
    <tr>
      <td>Amazon</td>
      <td>9000</td>
      <td>200500</td>
      <td>800 Tb</td>
    </tr>
  </tbody>
</table>
            

1.6 Przykład

Fixed Table header

2.1 Znaczniki tekstu

2.2 Znacznik <dl>

Znacznik <dl> (description list) jest to kontener na listę par terminów i ich opisów, czyli słownik. Istnieje znacznik <dt> do tagowania terminów i znacznik <dd> do opisów. Służy do zaznaczania (tagowania) listy definicji, na przykład podczas tworzenia glosariusza, książki telefonicznej itp.

JPEG

Large files that do not require transparent backgrounds or animations. This format is ideal for vivid photorealistic photographs as it can contain millions of colors.

PNG

Has an additional parameter for describing transparency - the alpha channel. Suitable for images with transparent or monochrome backgrounds. Used for icons and decorative items.

webP

A replacement format for PNG and JPEG, but with incomplete browser support. When equal image quality, the compressed files will be smaller than PNG and JPEG on average by 25%.

2.2 Znacznik <span>

Uniwersalny kontener dla małej zawartości tekstowej, takiej jak pojedyncze słowa, fragmenty słów lub frazy w tablicy tekstowej. Podobnie jak znacznik <div>, nie ma znaczenia semantycznego i służy do dodatkowej stylizacji.

            <p>
              Znacznik <span class="znacznik-span">span</span> jest to uniwersalny pojemnik na małą
              zawartość tekstową.
            </p>
          

Spanowi z atrybutem class="znacznik-span" za pomocą CSS można dodać style, na przykład inny kolor tekstu, jego rozmiar itp.

Znacznik span jest to uniwersalny pojemnik na małą zawartość tekstową.

2.3 Znacznik <pre>

Domyślnie przeglądarka ignoruje podziały wierszy i więcej niż jedną spację z rzędu. Ten znacznik umożliwia dodanie przeformatowanego tekstu z wymuszonymi znakami końca wiersza. Na przykład zaznaczanie tekstu piosenki lub wiersza.

            Wyatt resteth here, that quick could never rest;
            Whose heavenly gifts increased by disdain,
            And virtue sank the deeper in his breast;
            Such profit he by envy could obtain.
          

2.4 Znacznik <sup> i <sub>

Przeznaczone do wyświetlania znaków w górnym (<sup>, skrót od superscript) i dolnym (<sub>, skrót od subscript) indeksie. Na przykład do oznaczania prostych wzorów matematycznych lub chemicznych.

            <p>Formula of water  - H<sub>2</sub>O</p>
            <p>Total area of the room - 150м<sup>2</sup>.</p>
            <p>Solve the equation a<sup>3</sup>+a<sup>2</sup>=4</p>
          

Formula of water - H₂O

Total area of the room - 150м².

Solve the equation a³+a²=4

2.5 Znacznik <time>

Datę i godzinę można zapisać zwykłym tekstem, ale lepiej jest użyć specjalnego znacznika <time>. Data dla osoby to tekst wewnątrz znacznika, a dla maszyny - wartość atrybutu datetime w formacie ISO 8601.

            <p>
              Najnowsze wiadomości <time datetime="2019-12-14">14 grudnia 2019 roku</time>.
            </p>
            <p>
              Spotkanie odbyło się o <time datetime="2018-07-14T11:30">11:30 rano</time>.
            </p>
          

Najnowsze wiadomości 14 grudnia 2019 roku.

Spotkanie odbyło się o 11:30 rano.

Przeglądarka wyświetli tylko tekst wewnątrz znacznika. Osoba zobaczy zrozumiały tekst, a technologie asystujące odczytają atrybut datetime i uzyskają dokładną wartość w wymaganym formacie.

2.6 Znacznik <address>

Przeznaczony do przechowywania danych kontaktowych autora artykułu, bloku informacji lub całej strony internetowej. Informacje kontaktowe mogą mieć dowolną odpowiednią formę, na przykład adres fizyczny, adres e-mail, link do strony internetowej, numeru telefonu, znacznik sieci społecznościowej.

            <address>
              c. London, <br />
              Dalton House <br />
              66 Windsor Avenue, SW19 2RR
            </address>

            <address>
              <a href="mailto:mango@mail.pig">mango@mail.pig</a>
              <a href="tel:+1112223344">(111) 222-33-44</a>
            </address>
          

Zwróćcie uwagę na znacznik <br>, służy on do oznaczania tablicy tekstu z wymuszonymi podziałami wierszy w celu wizualnego formatowania. Na przykład zaznaczenie jednego wiersza adresu w kilku wierszach.

Uwaga: Znacznik <br/> (skrót od line break) nie jest używany do wymuszonego dodawania podziałów wierszy między znacznikami ani do dzielenia tablicy tekstu na akapity.

2.7 Znacznik <strong> i <b>

Używane do podkreślenia ważnego słowa lub całej frazy w tekście. Wizualnie oba znaczniki pogrubiają tekst i na pierwszy rzut oka nie ma między nimi różnicy, ale tak nie jest.

Znacznik <strong> semantycznie podkreśla tekst jako ważny i wskazuje, że jest to znaczące słowo lub fraza. Na przykład zaznaczyć ostrzeżenie lub dowolną część tekstu, na którą użytkownik powinien najpierw zwrócić uwagę.

            <p>
              <b>Uwaga!</b> Okres subskrypcji dobiega końca.
              <strong>Konto zostanie zawieszone.</strong> Odnów subskrypcję lub skontaktuj
              się z pomocą techniczną.
            </p>
          

Uwaga! Okres subskrypcji dobiega końca. Konto zostanie zawieszone. Odnów subskrypcję lub skontaktuj się z pomocą techniczną.

Znacznik <b> (skrót od bold) powoduje, że tekst jest tylko wizualnie pogrubiony, przyciąga uwagę, ale nie przywiązuje szczególnej wagi.

Interesująco: W przypadku technologii asystujących, takich jak czytnik ekranu, tekst zawinięty w <strong> ma szczególne znaczenie i będzie dodatkowo wyróżniony intonacją.

2.8 Znacznik <em> i <i>

Używane do akcentowania uwagi na fragmentach tekstu. Wizualnie oba znaczniki sprawiają, że tekst jest kursywą i na pierwszy rzut oka nie ma między nimi różnicy, ale tak nie jest.

Znacznik <em> (skrót od emphasis) semantycznie podkreśla tekst, na który kładzie się specjalny nacisk, który zmienia znaczenie frazy. Na przykład można podkreślić sarkazm.

            <p>Jak <em>się cieszę</em> gdy wynagrodzenie jest spóźnione!</p>
            <p>Jak <i>smutno</i> gdy świeci słońce!</p>
          

Jak się cieszę gdy wynagrodzenie jest spóźnione!

Jak smutno gdy świeci słońce!

Znacznik <i> (skrót od italic) sprawia, że tekst jest tylko wizualnie kursywą, zwraca na siebie uwagę, ale nie przywiązuje szczególnej wagi. Na przykład wydzielić terminy w zdaniu.

Interesująco: W przypadku technologii asystujących, takich jak czytnik ekranu, tekst zawinięty w <em> ma specjalny nacisk i będzie dodatkowo wyróżniony intonacją.

2.9 Znacznik <blockquote> i <cite>

Element HTML <blockquote> wskazuje, że załączony tekst jest rozszerzonym cytatem. Zazwyczaj jest to renderowane wizualnie przez wcięcie. Adres URL źródła cytatu można podać za pomocą atrybutu cite, podczas gdy tekstową reprezentację źródła można podać za pomocą elementu <cite>.

  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.
    </p>
  </blockquote>
  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
          

Przykład:

Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.

—Aldous Huxley, Brave New World

3.1 Wideo i audio

Przed HTML5 znaczniki wideo i audio były trudnym zadaniem. W nowoczesnym standardzie dodano nowe znaczniki do oznaczania treści multimedialnych z obsługą różnych formatów, wbudowanych elementów sterujących itp.

3.2 Wideo

Sparowany znacznik służy do oznaczania treści wideo <video>.

            <video
              src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
              poster="https://images.pexels.com/photos/595804/pexels-photo-595804.jpeg?w=640"
              width="640"
              controls
              autoplay
              loop
              preload="auto"
            ></video>
          

Przeanalizujmy atrybuty.

• src - wskazuje adres pliku wideo
• poster - adres obrazu, który jest używany jako plakat, jeśli wideo nie zostało załadowane lub nie jest jeszcze odtwarzane
• width i height - ustawiają wysokość i szerokość, jak w obrazie
• controls - atrybut "flaga", jeśli występuje, dodają się elementy sterujące wideo
• autoplay - atrybut "flaga", jeśli jest obecny, rozpocznie się odtwarzanie wideo jak tylko ono będzie dostępne
• loop - atrybut "flaga", jeśli jest obecny, wideo zostanie powtórzone w pętli

Atrybut preload wskazuje tryb wstępnego ładowania wideo. Jego wartość wpływa na to, jakie informacje zostaną załadowane. Wartość domyślna zależy od przeglądarki, w której została otwarta strona internetowa.

• none - nie pobierać wideo z wyprzedzeniem
• metadata - pobrać informacje o usłudze ładowania (czas trwania itp.)
• auto - pobrać całe wideo z wyprzedzeniem

Formaty wideo

Pobranie tylko jednego formatu pliku wideo nie wystarczy, niektóre przeglądarki mogą go nie obsługiwać, a użytkownik nie będzie mógł obejrzeć wideo. Istnieje kilka popularnych formatów wideo, które należy udostępnić przeglądarce do wyboru: webm, mp4 i ogg.

Aby to zrobić, trzeba usunąć atrybut src z znacznika <video> i dodać nowy znacznik <source> dla każdego formatu. W atrybucie src należy ukazać adres pliku wideo, natomiast w atrybucie type format wideo. Przeglądarka wybierze pierwszy z listy, który obsługuje i załaduje, ignorując resztę.

            <video
              poster="https://images.pexels.com/photos/595804/pexels-photo-595804.jpeg?w=640"
              width="640"
              controls
            >
              <source
                src="http://techslides.com/demos/sample-videos/small.webm"
                type="video/webm"
              />
              <source
                src="http://techslides.com/demos/sample-videos/small.mp4"
                type="video/mp4"
              />
              <source
                src="http://techslides.com/demos/sample-videos/small.ogg"
                type="video/ogg"
              />
            </video>
          

Interesująco: Konwersja wideo i audio do wymaganych formatów jest zadaniem twórcy treści, menedżera treści lub w skrajnych przypadkach programisty.

3.3 Audio

Sparowany znacznik <audio> jest używany do oznaczania treści audio. Jego użycie jest bardzo podobne do <video>, ale można ustawić mniej atrybutów.

             <audio controls>
                <source
                  src="../music/Aylex - Energizer (freetouse.com).mp3"
                  type="audio/mpeg"
                  preload="auto"
                />
                <!-- <source src="song.ogg" type="audio/ogg" /> -->
                Your browser does not support the <code>audio</code> element.
              </audio>
          

Przeanalizujmy atrybuty.

• src - wskazuje adres pliku audio
• controls - atrybut "flaga", jeśli występuje, dodają się elementy sterujące audio
• autoplay - atrybut "flaga", jeśli jest obecny, rozpocznie się odtwarzanie audio jak tylko ono będzie dostępne
• loop - atrybut "flaga", jeśli jest obecny, audio zostanie powtórzone w pętli

Atrybut preload wskazuje tryb wstępnego ładowania pliku audio. Jego wartość wpływa na to, jakie informacje zostaną załadowane. Wartość domyślna zależy od przeglądarki, w której została otwarta strona internetowa.

• none - nie pobierać audio z wyprzedzeniem
• metadata - pobrać informacje o usłudze ładowania (czas trwania itp.)
• auto - pobrać całe audio z wyprzedzeniem

Formaty audio

Z obsługą formatu w przeglądarce z audio sytuacja jest lepsza. Wszystkie nowoczesne przeglądarki obsługują jeden z dwóch formatów: mp3 albo ogg.

Podobnie jak w przypadku wideo, usuwamy atrybut src i używamy znacznika <source> z atrybutamisrc i type.

            <audio controls>
              <source src="song.mp3" type="audio/mpeg" />
              <source src="song.ogg" type="audio/ogg" />
            </audio>
          

3.4 Wsparcie dla starszych przeglądarek

Jeśli przeglądarka jest bardzo stara i nie obsługuje treści multimedialnych HTML5, trzeba poinformować o tym użytkownika. Aby to zrobić, wewnątrz znaczników <video> albo <audio>, po wszystkich znacznikach <source> trzeba dodać wiersz tekstu, który przeglądarka wyświetli, jeśli nie obsługuje treści multimedialnych.

            <video
              poster="https://images.pexels.com/photos/595804/pexels-photo-595804.jpeg?w=640"
              width="640"
              controls
            >
              <source
                src="http://techslides.com/demos/sample-videos/small.webm"
                type="video/webm"
              />
              <source
                src="http://techslides.com/demos/sample-videos/small.mp4"
                type="video/mp4"
              />
              <source
                src="http://techslides.com/demos/sample-videos/small.ogg"
                type="video/ogg"
              />

              Your browser does not support the <code>video</code> element.
            </video>

            <audio controls>
              <source src="song.mp3" type="audio/mpeg" />
              <source src="song.ogg" type="audio/ogg" />

              Your browser does not support the <code>audio</code> element.
            </audio>
          

4.1 Filmy

Wprowadzenie do CSS

Wprowadzenie do CSS 2