HTML alapok › 2. modul: Szöveg › 2.2 lecke
HTML alapok · 2.2 lecke
Bekezdés és kiemelés: a p, a strong és az em
A weboldalak szövegének nagy része bekezdésekből áll. Ebben a leckében megtanulod, hogyan kezeli a böngésző a szóközöket és a sortöréseket (meglepő lesz!), hogyan emelsz ki szöveget jelentés szerint, és hogyan írsz szép magyar tipográfiával.
A lecke végére
- bekezdésekre tagolod a szöveget a
pcímkével; - megérted, miért „tűnnek el” a fölösleges szóközök és sortörések;
- jelentés szerint emelsz ki szöveget (
strong,em); - magyar tipográfiai szabályok szerint írsz (idézőjel, nem törő szóköz).
Mielőtt elkezded
Szükséged lesz a címsorokra.
A bekezdés: p
<h2>A kedvenc sportom</h2> <p>Hatéves korom óta kosárlabdázom. Hetente háromszor edzek.</p> <p>A legjobb élményem egy megnyert döntő volt.</p>
A p (paragraph) egy összefüggő gondolategységet jelöl. A böngésző a bekezdések közé automatikusan térközt tesz, és minden bekezdés új sorban kezdődik: a p úgynevezett blokkszintű elem.
A nagy meglepetés: eltűnő szóközök
Jósold meg!
Így írod a kódot: <p>Szia! Hogy vagy?</p>, a „Hogy vagy?” előtt négy szóközzel, és még egy sortöréssel is. Hogyan jelenik meg?
Megoldás
Így: „Szia! Hogy vagy?”, egyetlen szóközzel. A böngésző a több egymás utáni szóközt és a kódban lévő sortöréseket egyetlen szóközzé vonja össze. A HTML a szerkezetet adja meg, nem a szöveg pontos elrendezését.
Akkor hogyan tagolok?
Új gondolat: új p. Új sor egy egységen belül (például versben): br, erről a 2.3 leckében lesz szó. Nagyobb térköz: CSS.
Kiemelés jelentés szerint
| Címke | Jelentés | Példa |
|---|---|---|
strong | fontos, komoly | A medencébe tilos fejest ugrani. |
em | hangsúlyos (máshogy mondanád ki) | Én ma jövök, nem holnap. |
b | kiemelt, de nem fontosabb (például kulcsszó) | A fotoszintézis során… |
i | más hangnem: cím, idegen szó, gondolat | Latin neve Felis catus. |
Miért nem mindegy?
A strong és a b ugyanúgy félkövér, az em és az i ugyanúgy dőlt. A különbség a jelentés: a felolvasóprogramok a strong-ot és az em-et hangsúlyosabban olvashatják fel, a keresők pedig fontosabbnak tekinthetik.
Szép magyar tipográfia a weben
olyan szóköz, amelynél nem törik a sor. Így nem marad a „10” az egyik sorban, a „kg” a másikban: 10 kg.< jelet a szövegben < formában írjuk, különben a böngésző címkének hinné.Csináld meg!
Írj egy bekezdést a saját oldaladra, amelyben van egy magyar idézőjeles idézet, egy gondolatjel és egy mértékegység nem törő szóközzel.
Hibavadászat
1. Szóközökkel igazított szöveg
<p>Név: Anna</p>
Mi a baj?
A böngésző a sok szóközt egyetlen szóközzé vonja össze, így az igazítás elveszik. Igazításra a CSS (vagy adatokhoz a táblázat) való.
2. Címsor a bekezdésben
<p>Bevezetés <h2>Első fejezet</h2></p>
Mi a baj?
A bekezdésbe nem kerülhet blokkszintű elem, például címsor. A böngésző ilyenkor önkényesen lezárja a bekezdést. Helyesen a címsor a bekezdés után, külön áll.
3. Kiemelés csak a kinézet miatt
<p><strong>Az egész bekezdés félkövér, mert így szebb.</strong></p>
Mi a baj?
A strong „fontosat” jelent. Ha minden fontos, akkor semmi sem az. A kinézetet a CSS adja.
Projekt: szöveg a saját oldaladon
Folytasd a saját oldalad projektet!
- Minden h2 alatt legyen legalább egy bekezdés.
- Használj legalább egy
strong-ot (valóban fontos dologra) és egyem-et (hangsúlyra). - Legyen a szövegben magyar idézőjel, gondolatjel és egy nem törő szóköz.
Kész vagy, ha…
…a szöveg bekezdésekre tagolt, a kiemelések jelentés szerint vannak, és a tipográfia magyar szabályok szerinti.
Ellenőrizd magad!
Mi történik a kódban lévő több szóközzel?
A böngésző egyetlen szóközzé vonja össze.
Mi a különbség a strong és a b között?
A strong fontosságot jelöl, a b csak kiemelést jelentésbeli fontosság nélkül; kinézetre azonosak.
Kerülhet-e címsor bekezdésbe?
Nem, a bekezdésbe nem kerülhet blokkszintű elem.
Mire jó a nem törő szóköz?
Hogy két összetartozó szó (például szám és mértékegység) ne kerüljön külön sorba.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: címsorok, bekezdések, szövegformázás; kapcsolódik a szövegszerkesztés tipográfiai szabályaihoz, és a magyar nyelvi helyesírási ismeretekhez.
Módszertan
Az „eltűnő szóközök” jóslós feladat egy tipikus tévképzetet (a HTML-t szövegszerkesztőként kezelik) tesz láthatóvá, és cseréli le helyes modellre. A strong, em, b, i táblázat a jelentés és a megjelenés szétválasztását tanítja, ami a CSS alapelve.
Időterv
A bekezdés: 6 perc. Eltűnő szóközök: 8 perc. Kiemelés: 12 perc. Tipográfia: 8 perc. Hibavadászat és projekt: 11 perc.