HTML alapok › 1. modul: Az első weboldal › 1.3 lecke
HTML alapok · 1.3 lecke
Doctype és nyelvválasztás: az oldal első két sora
Minden weboldal ugyanazzal a két sorral kezdődik. Kicsinek tűnnek, de nélkülük a böngésző régi, „kompatibilitási” üzemmódba kapcsol, a felolvasóprogram pedig angol kiejtéssel olvasná fel a magyar szöveget. Nézzük meg, miért!
A lecke végére
- megmagyarázod, mit csinál a
; - megadod a weboldal nyelvét a
langattribútummal; - tudod, miért fontos a nyelv a képernyőolvasóknak, a fordítóknak és a keresőknek;
- egy idegen nyelvű részletet külön megjelölsz.
Mielőtt elkezded
Szükséged lesz az Emmettel készült vázra.
A doctype: „ez egy mai weboldal”
<!DOCTYPE html> <html lang="hu"> <!-- ide jön a head és a body --> </html>
A nem HTML-címke, hanem egy dokumentumtípus-nyilatkozat: azt üzeni a böngészőnek, hogy a mai, szabványos HTML szerint jelenítse meg az oldalt. Mindig ez az első sor, előtte semmi nem állhat.
Jósold meg!
Mi történik, ha lemarad a doctype? Hiba üzenet jelenik meg?
Megoldás
Hibaüzenet nem jelenik meg, de a böngésző átkapcsol egy régi, úgynevezett kompatibilitási üzemmódba (angolul quirks mode), amely a 90-es évek hibás böngészőit utánozza. Emiatt a méretek, a térközök és a CSS egy része másképp működik. Az ilyen hibákat nagyon nehéz megtalálni, ezért a doctype soha ne maradjon le!
Régen hosszabb volt
A régebbi HTML-változatoknál a doctype egy hosszú, nehezen megjegyezhető sor volt. A HTML5-tel lett ilyen rövid, és azóta ezt használjuk.
A nyelv: lang="hu"
A html címke az egész dokumentumot körülöleli. A lang attribútuma mondja meg, milyen nyelvű az oldal. A nyelvet szabványos, kétbetűs kóddal adjuk meg:
| Nyelv | Kód |
|---|---|
| magyar | hu |
| angol | en |
| német | de |
| osztrák német (nyelvváltozat is megadható) | de-AT |
Figyelj!
A magyar nyelv kódja hu, nem hun és nem hungarian. A kód nem a kis- és nagybetűn múlik, de szokás szerint kisbetűvel írjuk.
Kinek fontos a nyelv?
Az akadálymentesség egyik alapja
A nemzetközi akadálymentességi irányelv (WCAG) egyik első követelménye, hogy az oldal nyelve meg legyen adva. Egyetlen attribútum, és rengeteg embernek könnyíted meg az olvasást.
Idegen nyelvű részlet az oldalon belül
Ha egy magyar oldalon egy mondat vagy idézet más nyelvű, azt is megjelölheted a lang attribútummal, bármelyik címkén:
<p>A kedvenc mondásom: <span lang="en">Practice makes perfect.</span></p>
Csináld meg!
A saját oldaladon írj egy mondatot egy idegen nyelvű idézettel vagy kedvenc dalod címével, és jelöld meg a nyelvét. Ha van képernyőolvasód (például a Windows Narrátor: Ctrl + Windows + Enter), hallgasd meg, hogyan olvassa fel!
Hibavadászat
1. Megjegyzés a doctype előtt
<!-- A saját oldalam --> <!DOCTYPE html>
Mi a baj?
A megjegyzés még belefér, de a doctype előtt a legjobb, ha semmi nincs. Régebbi böngészők a megjegyzéstől is kompatibilitási módba kapcsoltak. Tegyük a megjegyzést a doctype után.
2. Rossz nyelvkód
<html lang="hun">
Mi a baj?
A magyar nyelv kódja hu. A hun háromjegyű kód más szabványhoz tartozik, a böngészők és a felolvasók nem mindig értik.
3. Maradt az Emmet-alapérték
<html lang="en">
Mi a baj?
Az Emmet angolra állítja a nyelvet. Magyar oldalon mindig írd át hu-ra, különben a felolvasó angol kiejtéssel olvas.
Projekt: a saját oldalad nyelve
Folytasd a saját oldalad projektet!
- Ellenőrizd, hogy az
index.htmlés arolam.htmlelső sora a doctype. - Mindkét oldalon legyen
lang="hu". - Tegyél a Rólam oldalra egy idegen nyelvű mondatot, a nyelvét megjelölve.
Kész vagy, ha…
…mindkét oldal szabványos doctype-pal kezdődik, a nyelv magyar, és az idegen nyelvű részlet is jelölve van.
Ellenőrizd magad!
Mit csinál a doctype?
Megmondja a böngészőnek, hogy a mai, szabványos HTML szerint jelenítse meg az oldalt.
Mi történik doctype nélkül?
A böngésző kompatibilitási (quirks) módba kapcsol, és egyes elemek másképp jelennek meg.
Mi a magyar nyelv kódja?
hu
Kinek segít a lang attribútum?
A képernyőolvasóknak, a fordítóknak, az elválasztásnak és a keresőknek.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a HTML formátumú dokumentumok szerkezeti elemei. Kapcsolódik az akadálymentes kommunikációhoz (az online kommunikáció témaköréből).
Szakmai megjegyzés
A lecke a doctype hatását a kompatibilitási mód fogalmával magyarázza, ami a későbbi CSS-hibakeresésnél is hasznos. A lang attribútum szerepét a WCAG 3.1.1-es (Language of Page) követelménye alapján, a felolvasó és a fordítás példáján mutatja be.
Módszertan
A Windows Narrátorral vagy más felolvasóval tartott rövid bemutató (magyar szöveg lang="en" és lang="hu" beállítással) a diákok számára is azonnal érthetővé teszi a különbséget. Ez erős, emlékezetes élmény.
Időterv
Doctype: 10 perc. Nyelv és kinek fontos: 15 perc (felolvasós bemutatóval). Részlet és hibavadászat: 12 perc. Projekt: 8 perc.