HTML · lekcja 09

Dodatkowe elementy HTML

Drobiazgi, które przydają się na prawie każdej stronie

Pojemniki bez znaczenia: div i span; komentarze i encje
Okno w oknie: iframe z mapą lub filmem
Rozwijany blok, zaznaczenie, data, paski postępu, klawisze
Ćwiczenie: strona FAQ z mapą i stopką

Rozgrzewka · 3 minuty

Trzy pytania z formularzy

Który znacznik otacza cały formularz i mówi, gdzie wysłać dane?
Jaki type pola input ukrywa wpisywane znaki kropkami?
Po co label ma atrybut for?

Pojemniki · div i span

Pudełko i kawałek

Czasem chcecie zgrupować treść, ale żaden znacznik nie pasuje. Do tego są dwa pojemniki bez własnego znaczenia:

div zaczyna nową linię i zajmuje całą szerokość, jak pudełko na półce. span siedzi w środku zdania, jak zakreślacz na jednym słowie.
Oba nic nie zmieniają na stronie, dopóki nie dodacie CSS. Używacie ich dopiero wtedy, gdy nie pasuje żaden znacznik ze znaczeniem.

MDN: „<div> HTML content division element” i „<span> HTML content span element” · developer.mozilla.org/docs/Web/HTML/Reference/Elements/div · …/span

Powtórka i nowe encje

Komentarz i znaki, których nie ma na klawiaturze

<!-- Stopka: zmienić rok na początku stycznia -->
<p>&copy; 2016 Klub Modelarski · bilet: 5&nbsp;&euro;</p>

Piszecie	Widać	Do czego?
`©`	©	znak praw autorskich w stopce
`€`	€	cena w euro
` `	spacja	spacja, której przeglądarka nie złamie na nową linię (5 €, 10 km)

Encja to kod znaku: zaczyna się od &, kończy średnikiem. Komentarz  widzicie tylko Wy w kodzie, przeglądarka go pomija.

MDN: „Entity” · developer.mozilla.org/docs/Glossary/Entity · komentarze: „Basic HTML syntax”

Osadzanie · iframe

iframe: okno w oknie

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=20.99,52.22,21.03,52.24&layer=mapnik"
        width="600" height="400" title="Mapa dojazdu do klubu"></iframe>

src = adres osadzanej strony, width i height = rozmiar okna w pikselach (bez nich: 300 na 150), title = opis dla czytnika ekranu.
Kodu nie piszecie z głowy: YouTube „Udostępnij → Umieść”, OpenStreetMap „Udostępnij → HTML”. Kopiujecie i wklejacie.

MDN: „<iframe> HTML inline frame element” · developer.mozilla.org/docs/Web/HTML/Reference/Elements/iframe

Osadzanie · iframe

Kiedy uważać z iframe?

Osadzacie cudzą stronę razem z jej kodem. Cudzy kod = cudze zasady. Wstawiajcie tylko to, czemu ufacie (YouTube, mapa), i tylko przez https://.
Każde okno w oknie to osobna strona do wczytania: pamięć i czas. Jedna mapa tak, dziesięć filmów na jednej stronie nie.
Nie każda strona pozwala się osadzić. Banki i portale blokują to celowo, wtedy okno zostaje puste.

Atrybut sandbox to kaganiec dla osadzonej strony: bez skryptów, bez formularzy, bez wyskakujących okienek. Jak to wygląda w firmach, zobaczycie na slajdzie „w produkcji”.

MDN: „General embedding technologies” (Security concerns) · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies

Rozwijany blok · details i summary

Rozwijany blok bez JavaScriptu

<details>
  <summary>Czy trzeba mieć własny sprzęt?</summary>
  <p>Nie. Na pierwsze zajęcia sprzęt wypożycza klub, za darmo.</p>
</details>

summary to napis na klapce, zawsze jako pierwszy w details. Bez niego przeglądarka wpisze swój tekst („Szczegóły”).
Kilka details z tym samym name="faq" = akordeon: otwiera się tylko jeden naraz.

Ciekawostka z MDN: atrybut name to nowość w details. Dawniej taki akordeon (tylko jeden otwarty naraz) dało się zrobić wyłącznie JavaScriptem. Dziś wystarczy ten jeden atrybut, bez skryptu.

MDN: „<details> HTML details disclosure element” i „<summary>…” · developer.mozilla.org/docs/Web/HTML/Reference/Elements/details · …/summary · ciekawostka: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#name

Drobiazgi · mark i time

Zakreślacz i data dla maszyny

<p>Szukaliście „silnik”: model z <mark>silnikiem</mark> elektrycznym.</p>

<p>Zlot odbył się <time datetime="2016-01-20">20 stycznia 2016</time>
o <time datetime="19:30">19:30</time>.</p>

mark = zakreślacz: tekst ważny w tej chwili, np. słowo, które pasuje do wyszukiwania. Przeglądarka daje żółte tło.
time pokazuje datę po ludzku, a w datetime trzyma ją maszynowo: rok-miesiąc-dzień albo godzina:minuty. Dzięki temu wyszukiwarka i kalendarz wiedzą, o który dzień chodzi.

MDN: „<mark> HTML mark text element” i „<time> HTML time (date) element” · developer.mozilla.org/docs/Web/HTML/Reference/Elements/mark · …/time

Drobiazgi · progress i meter

Dwa paski: postęp i poziom

Wysyłanie pliku: <progress value="70" max="100">70 %</progress>

Miejsce na dysku: <meter value="0.9" low="0.3" high="0.8">90 %</meter>

Znacznik	Co pokazuje?	Z życia
`progress`	jaka część zadania jest już zrobiona, od 0 do `max`	pasek pobierania pliku
`meter`	wartość w znanym zakresie; `low` i `high` zmieniają kolor	wskaźnik paliwa, poziom baterii

Tekst w środku (70 %) widzą tylko stare przeglądarki, które nie obsługują paska. progress bez value kręci się w kółko: „coś trwa, nie wiadomo ile”.

MDN: „<progress> HTML progress indicator element” i „<meter> HTML meter element” · developer.mozilla.org/docs/Web/HTML/Reference/Elements/progress · …/meter

Strona techniczna · code, kbd, samp

Kod, klawisze i odpowiedź komputera

<p>Zapiszcie plik: <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>W GitHub Desktop kliknijcie <kbd>Push origin</kbd>. To samo w konsoli: <code>git push</code>.</p>
<p>Komputer odpowiada: <samp>Everything up-to-date</samp></p>

Znacznik	Czym jest tekst?
`code`	fragment kodu albo polecenie do wpisania
`kbd`	to, co użytkownik wciska lub klika: klawisz, przycisk
`samp`	to, co komputer wypisał w odpowiedzi

Wszystkie trzy wyglądają podobnie (czcionka jak z maszyny do pisania), ale mówią co innego. Tak pisze się instrukcje i dokumentację.

MDN: „Advanced text features” (code, pre, var, kbd, samp) · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features

Head · meta i favicon

Trzy linijki do head, które warto znać

<meta name="description" content="Klub modelarski: zajęcia, cennik, dojazd.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon">

description: zdanie o stronie, które wyszukiwarka pokazuje pod tytułem w wynikach. Na stronie go nie widać.
viewport (powtórka): „Telefonie, pokaż stronę w swojej szerokości, nie pomniejszaj”. Bez tego na telefonie widać mikroskopijną stronę.
Favicon: mała ikonka na karcie przeglądarki i w zakładkach. Plik .ico albo .png obok index.html.

MDN: „What's in the head? Web page metadata” · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata

Dodatkowe elementy · egzamin

Tak pytają na egzaminie

1. <head> <meta name="Description" content="…"> </head>
Metainformacja "Description" zawarta w pliku źródłowym HTML powinna zawierać

opis, co znajduje się na stronie.
informację, kto jest autorem strony.
wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.
nazwę programu, przy użyciu którego została stworzona strona.

CKE, E.14 styczeń 2019, zad. 2

Ćwiczenie 1 · przy komputerze · 12 minut

Ćwiczenie 1: strona FAQ z mapą

W swoim folderze ze stronami stwórz nowy plik faq.html ze szkieletem. W head dodaj meta description jednym zdaniem o klubie, sklepie lub szkole, o których piszesz.
Dodaj h1 „Najczęstsze pytania”, a pod nim trzy details z summary (pytanie) i p (odpowiedź). Wszystkie trzy z name="faq".
Dodaj h2 „Jak do nas trafić?”, a pod nim mapę: na openstreetmap.org znajdź miejsce, kliknij „Udostępnij → HTML” i skopiuj cały iframe. Dopisz do niego title.
Dodaj stopkę w p: znak ©, rok, nazwa. W drugiej linii (br) dopisz „Ostatnia zmiana:” i dzisiejszą datę w time z datetime w zapisie rok-miesiąc-dzień.
Zapisz, F5, sprawdź.

Ma się pojawić: trzy klapki, po kliknięciu otwiera się jedna i zamyka poprzednia, mapa w oknie, w stopce © i data. Ctrl+U: description i datetime są w kodzie, choć na stronie ich nie widać.

mapa: openstreetmap.org, panel „Udostępnij”

Ćwiczenie 2 · na kartce · 3 minuty

Ćwiczenie 2: który element?

Do każdej sytuacji dopisz jeden znacznik z dzisiejszej lekcji:

Pasek „pobrano 40 %” podczas pobierania pliku.
Film z YouTube na stronie klubu.
Instrukcja: „wciśnij F5”.
Regulamin zwinięty w klapkę, rozwijany po kliknięciu.
Jedno słowo w zdaniu, które ma dostać kolor z CSS.
Poziom naładowania baterii 15 % (mało).

Pytania kontrolne

Trzy pytania na koniec

Czym różni się div od span i kiedy sięgacie po któryś z nich?
Po co iframe ma atrybut title, skoro na stronie go nie widać?
Co się stanie, gdy w details zabraknie summary?

Na następnej lekcji: audio i wideo w HTML, czyli własne pliki dźwiękowe i filmy bez YouTube.

Rozkład: Dodatkowe elementy HTML → Audio i wideo w HTML

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
details jako akordeon	FAQ i menu mobilne coraz częściej bez JavaScriptu: mniej kodu, działa od razu, czytnik ekranu rozumie. Wygląd klapki poprawia CSS.	nadal w użyciu
iframe z mapą lub filmem	Standard osadzania cudzych usług (mapy, filmy, płatności). W firmach dochodzi `sandbox` i `loading="lazy"`, żeby okno wczytało się dopiero, gdy użytkownik do niego dojedzie.	nadal w użyciu
iframe bez ograniczeń	Osadzona strona z `sandbox` nie odpala skryptów ani formularzy, dopóki jej tego nie pozwolicie. Zasada MDN: nigdy razem `allow-scripts` i `allow-same-origin`.	zasada bezpieczeństwa
div na wszystko	Nagminne w kodzie generowanym przez narzędzia. Dobre zespoły pilnują: najpierw znacznik ze znaczeniem, div dopiero, gdy nic nie pasuje.	nadużywane

MDN: „General embedding technologies” (Security concerns) i „<iframe>” (sandbox, loading)