HTML alapok › 2. modul: Szöveg › 2.3 lecke
HTML alapok · 2.3 lecke
A br és a hr: sortörés és témaváltás
Két rövid, lezáró nélküli címke, amelyeket sokan rosszul használnak: a br-rel térközt csinálnak, a hr-rel díszvonalat. Ebben a leckében megtanulod, mire valók valójában, és mikor jobb helyettük más megoldás.
A lecke végére
- a
br-t ott használod, ahol a sortörés a tartalom része (vers, postai cím); - a
hr-rel témaváltást jelölsz; - tudod, hogy a térközt és a díszvonalat a CSS adja;
- megismered az üres (lezáró nélküli) elemeket.
Mielőtt elkezded
Szükséged lesz a bekezdésekre.
A br: sortörés egy egységen belül
A 2.2 leckében láttad, hogy a kódban lévő sortörést a böngésző szóközzé alakítja. Ha egy bekezdésen belül valóban új sort szeretnél, a br (break) címkét használod. Egy vers esetében a sortörés a tartalom része:
<h2>Petőfi Sándor: Szeptember végén (részlet)</h2> <p> Még nyílnak a völgyben a kerti virágok,<br> Még zöldel a nyárfa az ablak előtt,<br> De látod amottan a téli világot?<br> Már hó takará el a bérci tetőt. </p>
A böngészőben így jelenik meg
Még nyílnak a völgyben a kerti virágok,
Még zöldel a nyárfa az ablak előtt,
De látod amottan a téli világot?
Már hó takará el a bérci tetőt.
Mikor jó a br, és mikor nem?
p. Nagyobb térköz: CSS. Felsorolás: lista (2.4 lecke).
Jósold meg!
Valaki így csinál térközt két bekezdés között: <br><br><br>. Mi a gond ezzel?
Megoldás
Működik, de rossz gyakorlat. A felolvasóprogram több üres sort „olvashat fel”, a térköz mérete telefonon és gépen nem szabályozható, és ha a webhely kinézetét meg akarod változtatni, minden oldalon kézzel kell átírnod. A térköz a CSS dolga.
A hr: témaváltás
A hr (horizontal rule, vízszintes vonal) jelentése a mai HTML-ben: témaváltás egy szövegen belül, például egy történetben a helyszín változása, vagy egy cikkben egy új, önálló rész.
<p>A délelőtt matekdolgozattal telt.</p> <hr> <p>Délután végre az edzésen voltam.</p>
A vonal csak a látszat
A böngésző alapból vonalként rajzolja ki, de a felolvasóprogramok „elválasztóként” jelzik. Ha csak egy díszvonalat szeretnél, azt a CSS-sel (például egy szegéllyel) érdemes megoldani.
Üres elemek: nincs záró címke
A br és a hr üres elem: nincs tartalmuk, ezért záró címkéjük sincs. Ugyanilyen a meta, a link és az img is.
br vagy br/?
Régebbi kódokban <br /> formát is látsz (a perjellel). A mai HTML-ben mindkettő helyes, a rövidebb <br> az elterjedtebb. A </br> viszont hibás!
Hibavadászat
1. Záró br
Első sor</br>Második sorMi a baj?
A br üres elem, nincs záró címkéje. Helyesen: <br>.
2. Bekezdések br-rel
Első gondolat.<br><br>Második gondolat.Mi a baj?
Két külön gondolat két külön bekezdés: <p>Első gondolat.</p><p>Második gondolat.</p>
3. Díszvonal hr-rel minden cím alatt
<h2>Rólam</h2> <hr> <p>Anna vagyok…</p>
Mi a baj?
A cím és a hozzá tartozó szöveg között nincs témaváltás. Ha a cím alá vonal kell, azt a CSS adja.
Projekt: vers vagy postai cím a saját oldaladon
Folytasd a saját oldalad projektet!
- A Rólam oldalra tegyél egy kedvenc versszakot vagy dalrészletet (1929 előtt megjelent, szabadon felhasználható művet, vagy saját szöveget) br-rel tördelve.
- Ha az oldalad két, eltérő témájú részből áll, jelöld a váltást hr-rel.
- Nézz végig a kódodon: van-e olyan br, amelynek térközként bekezdés vagy CSS lenne a helye?
Kész vagy, ha…
…a br csak ott szerepel, ahol a sortörés a tartalom része, és a hr valódi témaváltást jelöl.
Ellenőrizd magad!
Mikor használd a br-t?
Ha a sortörés a tartalom része, például versben vagy postai címben.
Mit jelent a hr a mai HTML-ben?
Témaváltást a szövegen belül.
Hogyan csinálj térközt?
CSS-sel, nem br-ekkel.
Mi az üres elem?
Tartalom és záró címke nélküli elem, például br, hr, img, meta.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a weblap szerkezeti elemei. Irodalmi kapcsolódás: vers tördelése (tantárgyi kapcsolódás a magyar irodalommal).
Módszertan
A lecke két gyakori rossz beidegződést (br mint térköz, hr mint díszvonal) cserél a jelentés alapú használatra. A Petőfi-részlet közkincs, így jogtisztán használható, és irodalmi kapcsolódást ad.
Időterv
A br és helyes használata: 15 perc. A hr: 8 perc. Üres elemek: 5 perc. Hibavadászat és projekt: 17 perc.