HTML alapok › 1. modul: Az első weboldal › 1.4 lecke
HTML alapok · 1.4 lecke
A head címke: ami a színfalak mögött van
A head részbe írt dolgok nem jelennek meg az oldalon, mégis nélkülük az ékezetek összekuszálódnak, a mobilon apró lesz minden, és a keresőtalálatban „Document” áll a címed helyén. Ebben a leckében megismered a head legfontosabb elemeit.
A lecke végére
- megkülönbözteted a head és a body szerepét;
- megadod a karakterkódolást, és tudod, miért fontos a magyar ékezetekhez;
- beszédes címet írsz, és tudod, hol jelenik meg;
- beállítod a mobilnézetet (viewport) és az oldal leírását.
Mielőtt elkezded
Szükséged lesz a doctype-ra és a nyelvválasztásra.
Mi van a head-ben, és mi a body-ban?
A HTML-dokumentum két részből áll. A head (fej) az oldalról szóló információkat tartalmazza a böngészőnek és a keresőknek, a body (törzs) pedig azt, ami az oldalon látszik. Egy könyvnél a head a borító és a kolofon (cím, kiadó, nyelv), a body maga a szöveg.
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Anna oldala – hobbik és kedvencek</title> <meta name="description" content="Anna bemutatkozó oldala a kedvenc hobbijairól."> </head>
A karakterkódolás: hogy az ő és az ű is ő és ű legyen
A számítógép minden betűt számként tárol. A karakterkódolás mondja meg, melyik szám melyik betűt jelenti. A mai szabvány az UTF-8, amely a világ összes írásjelét ismeri, a magyar ő és ű betűt is.
Jósold meg!
Mi történik, ha lemarad a <meta charset="utf-8">, és a szövegben az áll, hogy „Szép tűzőgép”?
Megoldás
Előfordulhat, hogy a böngésző rossz kódolással olvassa, és ilyen jelek jelennek meg: „Szép tűzÅ‘gép”. Ezt a jelenséget „karakterzavarnak” is hívják. A charset sor legyen a head legelején, hogy a böngésző még a szöveg előtt olvassa el.
A fájl mentése is számít
A VS Code alapból UTF-8 kódolással ment: ezt a jobb alsó sarokban látod. Ha ott más áll, kattints rá, és válaszd az UTF-8-at.
A cím: a title címke
A title tartalma nem az oldalon jelenik meg, hanem:
Ebből tudod, melyik lapon mi van, ha sok van nyitva.
Ez lesz az elmentett oldal neve.
A találati listában a kék, kattintható cím.
Írd át!
Melyik a jobb cím egy iskolai fotószakkör oldalán? „Document”, „Főoldal”, vagy „Fotószakkör – Kossuth Gimnázium”? Miért?
Megoldás
A „Fotószakkör – Kossuth Gimnázium”, mert a fülön, a könyvjelzőben és a keresőben is egyértelmű. A jó cím rövid (kb. 60 karakterig), és az oldal tartalmára utal.
Mobilnézet: a viewport
Az okostelefonok böngészői alapból úgy tesznek, mintha széles asztali képernyőn jelenítenék meg az oldalt, aztán kicsinyítik. Ettől minden apró lesz. A viewport sor azt mondja: „a képernyő valódi szélességét használd”.
<meta name="viewport" content="width=device-width, initial-scale=1">
Próbáld ki!
A böngészőben nyomd meg az F12-t, majd a Ctrl + Shift + M billentyűket: ez a mobilnézet-szimuláció. Nézd meg az oldaladat a viewport sorral és nélküle is!
Az oldal leírása
A description egy egy-két mondatos összefoglaló az oldalról. A keresők gyakran ezt mutatják a találat címe alatt, ezért érdemes úgy megírni, hogy kedvet csináljon a kattintáshoz.
Mi kerülhet még a head-be?
A 3.2 leckében megtanulod, hogyan kapcsolod ide a stíluslapot, a szkriptet és az oldalikont. Ezek is mind a head-be kerülnek.
Hibavadászat
1. A cím a body-ban
<body> <title>Anna oldala</title>
Mi a baj?
A title csak a head-ben működik. A body-ban nem jelenik meg a fülön, és szabálytalan is.
2. Karakterzavar
Ãœdvözöllek az oldalamon!
Mi a baj?
Hiányzik vagy nem az elején van a <meta charset="utf-8">, vagy a fájl nem UTF-8 kódolással van mentve. Pótold, és ellenőrizd a VS Code jobb alsó sarkát.
3. Apró oldal a telefonon
Mi a baj?
Hiányzik a viewport sor, ezért a telefon asztali szélességet szimulál, és kicsinyít. Tedd be a head-be.
Projekt: a saját oldalad feje
Folytasd a saját oldalad projektet!
- Mindkét oldalad (
index.html,rolam.html) head részében legyen charset, viewport, beszédes cím és leírás. - A két oldal címe legyen különböző (például „Anna oldala – főoldal” és „Anna oldala – rólam”).
- Nézd meg mindkét oldalt mobilnézetben is (F12, majd Ctrl + Shift + M).
Kész vagy, ha…
…mindkét oldal fülén beszédes, különböző cím látszik, az ékezetek rendben vannak, és mobilon is olvasható a szöveg.
Ellenőrizd magad!
Mi a különbség a head és a body között?
A head az oldalról szóló információkat tartalmazza, a body a látható tartalmat.
Miért kell a charset?
Hogy a böngésző jól olvassa a betűket, az ékezeteseket is.
Hol jelenik meg a title?
A böngészőfülön, a könyvjelzőben és a keresőtalálatban.
Mit csinál a viewport?
Megmondja a mobilböngészőnek, hogy a képernyő valódi szélességét használja.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a weblap részei és szerkezete, fájlformátumok (karakterkódolás).
Módszertan
A karakterzavar és a viewport nélküli mobiloldal látványos, azonnal megtapasztalható hibák, amelyek jól motiválnak. A mobilnézet-szimuláció (F12, Ctrl + Shift + M) valódi szakmai eszköz.
Szakmai megjegyzés
A charset legyen a head első eleme (a dokumentum első 1024 bájtján belül). A description a keresőoptimalizálás része, de a rangsorolást közvetlenül nem befolyásolja, a kattintási hajlandóságot viszont igen.
Időterv
A head szerepe: 7 perc. Charset: 10 perc. Title: 8 perc. Viewport és leírás: 10 perc. Hibavadászat és projekt: 10 perc.