HTML · lekcja 02

Tekst w HTML

Jak dzielić, wyróżniać i cytować tekst na stronie?

Powtórka: szkielet i znaczniki
Wyróżnianie: co ważne, co podkreślone
Nowa linia, kreska, cytaty, znaki specjalne
Ćwiczenie: artykuł o Waszym hobby

Powtórka z poprzedniej lekcji

Trzy pytania na rozgrzewkę

Co idzie do <head>, a co do <body>?
Który znacznik zamykacie pierwszy: <p><b>tekst … ?
Po co jest <meta charset="utf-8">?

Wyróżnianie

Ważne czy tylko z naciskiem?

Kiedy mówicie, jedno słowo podkreślacie głosem, a inne jest naprawdę ważne, np. ostrzeżenie. HTML ma na to dwa znaczniki:

<p>Zrób to <em>dzisiaj</em>, nie jutro.</p>       nacisk (przeglądarka: kursywa)
<p><strong>Uwaga:</strong> nie dotykaj kabla.</p>   ważne (przeglądarka: pogrubienie)

em = nacisk (jak zmiana tonu głosu), strong = ważne (ostrzeżenie, coś, czego nie wolno przegapić).
Czytnik dla niewidomych czyta je inaczej, wyszukiwarka też je widzi. Dlatego są lepsze niż zwykłe b i i.

MDN, „Emphasis and importance”

Wyróżnianie

A po co są b, i, u?

Zmieniają tylko wygląd, bez znaczenia „ważne”. Używacie ich, gdy tekst ma wyglądać inaczej, ale nie jest ważniejszy.

Znacznik	Wygląd	Kiedy?
`<b>`	pogrubienie	nazwa produktu, słowo kluczowe w instrukcji
`<i>`	kursywa	tytuł książki, obce słowo, myśl bohatera
`<u>`	podkreślenie	rzadko: użytkownik pomyli z linkiem

Zasada na dziś: ważne → strong, nacisk → em, tylko wygląd → b albo i. Kolory i czcionki to praca dla CSS, nie dla HTML.

MDN, „Emphasis and importance” (b, i, u)

Dzielenie tekstu

Nowa linia i kreska

<p>ul. Szkolna 5<br>
00-001 Warszawa</p>        adres w jednym akapicie, dwie linie

<hr>                                  pozioma kreska: koniec części tekstu

br łamie linię w środku akapitu. Nie robi nowego akapitu i nie służy do robienia odstępów.
hr to zmiana tematu, jak gwiazdki między rozdziałami w książce.
Oba nie mają zamknięcia.

MDN, „Headings and paragraphs” · br i hr: standard HTML

Cytaty

Cytat długi i cytat w zdaniu

<blockquote>
  <p>Program musi być napisany dla ludzi, a tylko przy okazji dla maszyn.</p>
</blockquote>

<p>Jak mówi mój dziadek, <q>co nagle, to po diable</q>.</p>

blockquote: cytat jako osobny blok, przeglądarka robi wcięcie.
q: krótki cytat w środku zdania, przeglądarka sama dodaje cudzysłowy.

Ciekawostka z MDN: cudzysłów, który przeglądarka dokleja do q, może zależeć od języka strony. Przy quotes: auto w CSS ten sam znacznik dostanie inny znak cudzysłowu po angielsku, francusku czy niemiecku.

MDN, element blockquote i q · ciekawostka: developer.mozilla.org/en-US/docs/Web/CSS/quotes

Drobiazgi

Skrót, indeks górny i dolny

<abbr title="HyperText Markup Language">HTML</abbr>   po najechaniu myszą widać rozwinięcie
H<sub>2</sub>O                                             indeks dolny
2<sup>10</sup> = 1024                                       indeks górny

Atrybut title działa na każdym znaczniku: to dymek z podpowiedzią po najechaniu myszą.

MDN, „Advanced text formatting” (abbr, sub, sup)

Znaki specjalne

Jak napisać < na stronie?

Znak < zaczyna znacznik, więc nie można go po prostu wpisać. Zamiast niego piszecie kod z & i średnikiem:

Chcecie pokazać	Piszecie	Uwaga
<	`<`	less than
>	`>`	greater than
&	`&`	bo & zaczyna kod
spacja, której nie wolno złamać	` `	np. między liczbą a jednostką: 5 km

MDN, „Entity” (encje znakowe)

Najważniejsza myśl

HTML mówi, czym coś jest, nie jak wygląda

Nagłówek, akapit, cytat, ważne słowo: HTML nazywa rolę tekstu.
Wygląd (kolor, wielkość, czcionka) ustawimy w CSS, osobno.
Dzięki temu ta sama strona działa na telefonie, w czytniku dla niewidomych i w wyszukiwarce.

Test: gdybyście wyłączyli wszystkie style, czy z samych znaczników wciąż wiadomo, co jest tytułem, co cytatem, a co ostrzeżeniem? Jeśli tak, HTML jest dobrze napisany.

MDN, „Emphasis and importance” (semantics)

Ćwiczenie 1 · przy komputerze · 15 minut

Ćwiczenie 1: artykuł o Waszym hobby

Nowy plik hobby.html ze szkieletem, tytuł na karcie: nazwa hobby.
h1 z nazwą hobby, pod nim dwa h2: „Dlaczego to lubię” i „Jak zacząć”.
Pod każdym h2 co najmniej jeden akapit. W tekście: jedno słowo z naciskiem (em) i jedno ostrzeżenie (strong).
Jeden cytat blokowy (blockquote) i jeden skrót z rozwinięciem (abbr).
Na końcu hr i akapit z adresem klubu lub sklepu, dwie linie przez br. W tym adresie jedno   między liczbą a jednostką lub ulicą.

Ma się pojawić: tytuł, dwa śródtytuły, kursywa i pogrubienie w tekście, cytat z wcięciem, dymek po najechaniu na skrót, kreska i adres w dwóch liniach.

Ćwiczenie 2 · na kartce · 5 minut

Ćwiczenie 2: który znacznik?

Do każdego opisu dopiszcie znacznik:

Ostrzeżenie „Nie zapisuj hasła w pliku”.
Tytuł książki w środku zdania, tylko wyglądem.
Wzór chemiczny CO2.
Znak „większy niż” w tekście o matematyce.
Adres w dwóch liniach w jednym akapicie.

Podsumowanie

Co musicie umieć po tej lekcji?

Odróżnić strong i em od b i i. Powiedzieć, kiedy którego użyć.
Złamać linię (br) i oddzielić części tekstu (hr).
Wstawić cytat blokowy i cytat w zdaniu, skrót z rozwinięciem, indeks górny i dolny.
Napisać na stronie znaki <, >, & i twardą spację.

Na następnej lekcji: listy w HTML, czyli wypunktowania, numeracje i listy definicji.

Rozkład: Tekst w HTML → Listy w HTML

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
strong i em zamiast b i i	Standard w każdym większym serwisie: czytniki ekranu i wyszukiwarki na tym polegają, audyty dostępności to sprawdzają.	nadal w użyciu
br do adresu	Tak, ale nigdy do robienia odstępów między akapitami. Odstępy robi CSS.	nadal w użyciu
u (podkreślenie)	Prawie nie występuje: użytkownicy biorą podkreślenie za link.	unikane
Znaki specjalne wpisywane ręcznie	Edytory i systemy CMS podmieniają je same, ale w kodzie szablonów wciąż piszecie `&` i `<`.	nadal w użyciu