HTML alapok › 1. modul: Az első weboldal › 1.5 lecke
HTML alapok · 1.5 lecke
A body szerepe: minden, ami látszik
Ami a weboldalon látszik, az mind a body-ban van. De a body-n belül is rend van: a címkék egymásba ágyazódnak, mint a dobozok a dobozban. Ebben a leckében megérted ezt a „fa” szerkezetet, és megnézed a böngésző fejlesztői eszközében is.
A lecke végére
- elmagyarázod, mi kerül a body-ba és mi a head-be;
- helyesen ágyazod egymásba a címkéket;
- behúzással átláthatóvá teszed a kódodat;
- a fejlesztői eszközökben megnézed az oldal fa szerkezetét.
Mielőtt elkezded
Szükséged lesz a head ismeretére.
Mi van a body-ban?
A body a látható tartalom helye: címsorok, bekezdések, képek, linkek, listák, táblázatok, gombok. Egy dokumentumban pontosan egy body van, közvetlenül a head után.
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <title>Anna oldala</title> </head> <body> <h1>Szia, Anna vagyok!</h1> <p>Szeretek <strong>kosarazni</strong> és rajzolni.</p> </body> </html>
Jósold meg!
Ha a <p> bekezdést a head-be írod a body helyett, meg fog jelenni az oldalon?
Megoldás
A böngészők „jóindulatúak”: a hibás helyre írt látható tartalmat gyakran automatikusan a body-ba teszik, így megjelenhet. Mégis hiba: a kód szabálytalan, más böngészőben másképp viselkedhet, és a validátor jelezni fogja. A látható tartalom helye mindig a body.
A HTML mint fa
A HTML elemei egymásba ágyazódnak, mint a dobozok a dobozban. Ha lerajzolod, egy fejjel lefelé fordított fát kapsz, ezt a böngésző DOM-fának (Document Object Model) nevezi:
Szülő és gyerek
A fa nyelvén a body a p szülője, a strong pedig a p gyereke. Ezeket a szavakat a CSS-ben és a JavaScriptben is sokat fogod hallani.
Helyes beágyazás: amit utoljára nyitsz, azt zárd elsőként
A címkék nem keresztezhetik egymást. Ha egy bekezdésen belül nyitsz egy kiemelést, azt a bekezdés vége előtt kell lezárni:
<p>Szeretek <strong>kosarazni</strong>.</p><p>Szeretek <strong>kosarazni.</p></strong>Egy jó szabály
Olyan, mint a zárójelek a matematikában: amit utoljára nyitottál, azt kell elsőként bezárni.
Behúzás: hogy te is átlásd
A böngészőt nem érdekli a behúzás, neked viszont sokat segít. Minden gyerekelemet húzz beljebb két szóközzel vagy egy tabulátorral, mint a fenti példában. Így ránézésre látszik, mi van mi alatt.
Csináld meg!
A VS Code-ban nyomd meg a Shift + Alt + F billentyűket (Macen: Shift + Option + F): a program automatikusan rendbe teszi a behúzásokat.
Nézd meg a fát a böngészőben!
- Nyisd meg a saját oldaladat a böngészőben.
- Nyomd meg az F12-t, és válaszd az Elements (Elemek) fület.
- A kis háromszögekkel nyitogasd a fát: látod a head-et, a body-t és a gyerekeiket.
- Vidd az egeret egy sor fölé: az oldalon kiemelődik a hozzá tartozó elem.
Szakmai eszköz
Ezt az eszközt a webfejlesztők naponta használják. A 8. modulban még részletesebben megismered.
Hibavadászat
1. Kereszteződő címkék
<p>Ez <em>nagyon fontos.</p></em>
Mi a baj?
Az em a bekezdésen belül nyílt, ezért előbb azt kell lezárni: </em></p>.
2. Tartalom a body után
</body> <p>Köszönöm, hogy itt jártál!</p> </html>
Mi a baj?
A bekezdés a body záró címkéje után áll. A böngésző valószínűleg megjeleníti, de szabálytalan: tedd a </body> elé.
3. Két body
<body>...</body> <body>...</body>
Mi a baj?
Egy dokumentumban csak egy body lehet. A teljes tartalom egyetlen body-ba kerül.
Projekt: tartalom a saját oldaladra
Folytasd a saját oldalad projektet!
- Az
index.htmlbody-jába írj egy főcímet és két bekezdést magadról (személyes adat nélkül), egy kiemelt szóval (strong). - Tedd rendbe a behúzásokat a Shift + Alt + F billentyűkkel.
- Nézd meg a fát a fejlesztői eszközök Elemek fülén, és rajzold le a füzetedbe.
Kész vagy, ha…
…a kódod helyesen beágyazott, jól behúzott, és a füzetbe rajzolt fa megegyezik azzal, amit a böngésző mutat.
Ellenőrizd magad!
Hány body lehet egy dokumentumban?
Egy.
Mi a DOM-fa?
A HTML-elemek egymásba ágyazásának fa szerkezetű képe, ahogy a böngésző látja.
Mi a helyes zárási sorrend?
Amit utoljára nyitottál, azt zárod be elsőként.
Hol nézheted meg a fát a böngészőben?
A fejlesztői eszközök (F12) Elements, azaz Elemek fülén.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a HTML-dokumentumok szerkezeti elemei. A fa szerkezet fogalma előkészíti a CSS kiválasztóit és a JavaScript DOM-kezelését.
Módszertan
A dobozos és a fás hasonlat vizuális támaszt ad, a fejlesztői eszközök Elemek füle pedig a valós, böngészőbeli fát mutatja. A fa lerajzolása a füzetbe elmélyíti a megértést (kettős kódolás).
Időterv
A body szerepe: 8 perc. A fa és a beágyazás: 15 perc. Behúzás: 5 perc. Elemek fül: 8 perc. Hibavadászat és projekt: 9 perc.