html5 - Kurs HTML i CSS
HTML5 / Otwierany panel <details, summary>(interpretuje: Firefox 49, Opera 15, Chrome 12) Panel domyślnie zamknięty: <details> <summary>nagłówek</summary> ... </details> Panel domyślnie otwarty: <details open> <summary>nagłówek</summary> ... </details> Na stronach internetowych bardzo często spotykamy interaktywne elementy w postaci paneli, które otwierają się po kliknięciu w ich nagłówek myszką. Tego typu rozwiązanie jest szczególnie przydatne na stronach, zawierających dużo informacji. Aby nie przytłoczyć użytkownika...
- HTML5 / Pasek wyniku <meter>
Spis treści <meter> Pasek wyniku <meter value min max> Przedziały wartości <meter low high optimum> Pasek wyniku <meter value min max> (interpretuje: Firefox 16, Opera 11.5, Chrome 6) Wersja podstawowa: <meter value="współczynnik">alternatywa</meter> Minimum i maksimum: <meter value="wartość" min="minimum" max="maksimum">alternatywa</meter> alternatywa Alternatywna zawartość, wyświetlana w przeglądarkach, które nie obsługują HTML5. Powinno się tam umieścić np. zapisaną tekstowo...
- HTML5 / Podtytuł <hgroup>
Podtytuł pierwszego poziomu (główny): <hgroup> <h1>tytuł</h1> <p>podtytuł</p> </hgroup> Podtytuł drugiego poziomu (sekcji): <hgroup> <h2>tytuł</h2> <p>podtytuł</p> </hgroup> Podytuł trzeciego poziomu (podsekcji): <hgroup> <h3>tytuł</h3> <p>podtytuł</p> </hgroup> Podtytuł czwartego poziomu: <hgroup> <h4>tytuł</h4> <p>podtytuł</p> </hgroup> Podtytuł piątego poziomu: <hgroup> <h5>tytuł</h5> <p>podtytuł</p> </hgroup> Podtytuł szóstego poziomu (najniższej podsekcji): <hgroup>...
- Tekst HTML / Blokada indeksowania fragmentów treści <... data-nosnippet>
<div data-nosnippet>...</div> <span data-nosnippet>...</span> <section data-nosnippet>...</section> Co zrobić, jeśli w opisie naszej strony w wynikach wyszukiwania Google wyświetlają się nieadekwatne treści? Może to mieć miejsce, m.in. kiedy w treści strony są umieszczone jakieś elementy interfejsu użytkownika. Na przykład jeśli w naszym serwisie znajdują się fragmenty przykładowych tekstów (kody źródłowe, polecenia, wzory itp.), możemy chcieć ułatwić użytkownikowi skorzystanie z nich...
- Tekst HTML / Źródło <cite>
<cite>...</cite> wyświetlanie: w linii Zwykle jest napisany kursywą. Umieszcza się w nim tytuł utworu, do którego się odnosimy, ale nie sam cytat. Może to być np. tytuł książki, opracowania, wiersza, partytury, piosenki, scenariusza, filmu, programu telewizyjnego, gry komputerowej, rzeźby, obrazu, sztuki teatralnej, przedstawienia, opery, musicalu, wystawy, protokołu sprawy czy nazwa programu komputerowego itp. Element ten nie służy do oznaczania cytatów - do tego nadaje się znacznik...
- HTML5 / Responsywny obrazek <picture, source>
Spis treści <picture, source> Wstęp Dopasowanie formatu <picture, source type> Dopasowanie kadru <picture, source media> Wstęp (interpretuje: Firefox 38, Opera 25, Chrome 38) Znamy już sposób wstawienia obrazka na stronę za pomocą znacznika IMG. Niestety istnieją przypadki, kiedy jest on niewystarczający. Najczęściej ma to związek z urządzeniami mobilnymi. Trudno spodziewać się, że to samo zdjęcie będzie równie dobrze wyglądać zarówno na dużym ekranie laptopa i na niewielkim...
- HTML5 / Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>
Spis treści <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple> Typ <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week"> Minimum, maksimum, krok <input "date, month, week, time, datetime-local, number, range" min max step> Wiele wartości <input "email, file" multiple> Typ <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week">...
- HTML5 / Wstępne ładowanie <link "preload" as>
(interpretuje: Firefox 85, Opera 37, Chrome 50) <link rel="preload" as="rodzaj" type="typ" href="lokalizacja"> rodzaj W zależności od języka, w którym wybrane zasoby zewnętrzne są używane, można podać następujące wartości: w języku HTML - audio, document (dokument HTML), embed, frame, iframe, image, object, track, video w języku CSS - font, style (zewnętrzny arkusz stylów oraz import arkusza stylów) w języku JavaScript - fetch, json, script w języku XML - xslt (ang. Extensible...
- HTML5 / Element edytowalny <... contenteditable>
(interpretuje: Internet Explorer 6, Firefox 3.5, Opera 10, Chrome 4) Wersja podstawowa: <element contenteditable>...</element> Wersja rozszerzona: <element contenteditable="edycja">...</element> element Dowolny znacznik HTML 4.01 lub HTML5 edycja Można podać: true - element jest edytowalny (to samo co użycie contenteditable jako atrybut logiczny - bez podania wartości). false - element nie jest edytowalny. plaintext-only - tylko surowa zawartość tekstowa elementu jest edytowalna...
- HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>
(interpretuje: Internet Explorer 6, Firefox 2, Opera 10, Chrome 17) Cały formularz: <form autocomplete="autouzupełnianie">...</form> Wybrane pole: <input type="typ" autocomplete="autouzupełnianie"> Lista rozwijalna: <select autocomplete="autouzupełnianie">...</select> Obszar tekstowy: <textarea autocomplete="autouzupełnianie">...</textarea> autouzupełnianie Można podać: on - autouzupełnianie aktywne (domyślnie) off - autouzupełnianie nieaktywne typ Należy użyć dowolnego pola...