A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / HTML-bevezető /Alapstruktúra nyelv és karakterkódolás megadásával

HTML-bevezető
- Alapstruktúra nyelv és karakterkódolás megadásával

HTML-bevezető

Alapstruktúra nyelv és karakterkódolás megadásával

Korábban felhívtuk a figyelmet a szemantika fontosságára. Ide tartozik az is, hogy a dokumentum nyelvét is precízen jelöljük. Ehhez a korábban bemutatott struktúrát érdemes kiegészítenünk. Mivel a példáinkban magyar nyelvű szövegeket fogunk elhelyezni (és vélhetően a kedves Olvasó is többnyire magyar nyelvű tartalmakat fog előállítani), érdemes az oldal nyelvét és karakterkódolását is eszerint beállítani.

Forráskód

<!DOCTYPE html>
    <html lang="hu">
        <head>
           <meta charset="utf-8">
           <title></title>
        </head>
    <body>
    </body>
</html>

Az oldal nyelvét a <html> tag lang paraméterében kell megadni. Magyar nyelvű tartalom esetén a hu kódot kell szerepeltetnünk, angol esetén az en kódot, francia esetén az fr-t. stb. Azt, hogy melyik nyelv esetén milyen kódot kell írnunk, az ISO 639-1 szabvány deklarálja.

Kapcsolódó akadálymentességi elvek

Az oldal nyelvének jelölése fontos akadálymentességi szempont. A WCAG 2.0 szabvány 3.1-es irányelvének 3.1.1-es alpontja a következő:

3.1.1 Az oldal nyelve: Az oldal nyelve minden weboldal esetében algoritmikusan meghatározható legyen. (A szint)

Miért kell egyáltalán ezzel foglalkoznunk?

Több ok miatt is, ezek közül néhány:

A vak felhasználók által használt képernyőolvasó programok ez alapján el tudják dönteni, hogy milyen nyelven olvassák fel a szöveget, amennyiben több nyelvű beszédszintetizátor is telepítve van.
Bizonyos nyelv megadások kihatnak arra, hogy a böngészőprogram milyen betűtípust választ a szöveg megjelenítésére.
A böngészőbe épített nyelvhelyesség-ellenőrző eszközök ez alapján tudják eldönteni, hogy az oldal milyen nyelvű.
A keresőprogramok a nyelv alapján is indexelik az oldalakat, ezért ha adott nyelvű oldalak között keres valaki, akkor nagyobb eséllyel találja meg az oldalunkat.

Mi a helyzet akkor, ha a lap több, eltérő nyelvű szöveget is tartalmaz?

Ebben az esetben a dokumentum általános nyelvének azt kell beállítani, ami a jellemzőbb nyelv, és a lang paramétert konkrét szövegblokkok, idézetek, stb. esetén is beállíthatjuk a lang paraméterrel, mint ahogy azt korábban a betűszó megadása esetén láttuk. Így akár egy magyar nyelvű oldalon elhelyezett angol nyelvű idézetet, rövidítést stb. is helyesen tud felolvasni egy képernyőolvasó program.

Mi a helyzet a speciális karakterekkel, ékezetes betűkkel?

Ahhoz hogy a magyar nyelvben használatos speciális karakterek, ékezetes betűk helyesen jelenjenek meg a különböző operációs rendszerekben található különböző alkalmazásokban, megfelelő karakterkódolást kell beállítani. Ez esetünkben az utf-8 kódolást jelenti. A beállítás úgy történik, hogy a dokumentum head részében el kell helyeznünk az alábbi meta tag-et:

Forráskód

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

A HTML5-ben van lehetőség arra is, hogy rövidebben adjuk meg ugyanezt az információt. Elég csak annyit írnunk, hogy:

Forráskód

<meta charset="utf-8">

Fontos

Ügyeljünk arra, hogy nem elég csak a kódban szerepeltetni az UTF-8 kódolást, magát a HTML-állományt is ilyen kódolással kell elmenteni az adott szerkesztőprogramban. Ennek módjára nem tudunk általános módszert mutatni, mert ahány program, annyiféle beállítás létezik. Valamelyikben a mentési folyamat során lehet beállítani a karakterkódolás típusát, valamelyikben még mentés előtt kell konvertálni a dokumentumot az adott formátumba.
Egyes szerkesztőprogramok felkínálják az UTF-8 kódolást BOM karakterrel, vagy anélkül. A BOM karakter (byte order mark) a dokumentum elején elhelyezett speciális kód. Ezt a kódot némelyik böngészőprogram rosszul kezeli, ezért a kódolásnál a BOM nélküli változatot használjuk!

Megjegyzés

A Notepad++ programban az állomány létrehozása után megadhatjuk annak kódolását a Kódolás menüpontban. Pl. Kódolás/UTF-8 kódolás BOM nélkül. Ha már egy meglévő állományt kell átalakítunk UTF-8 kódolásra, akkor a Kódolás/Átalakítás UTF-8 kódolásra BOM nélkül menüpontot válasszuk!

Karakterkódolás beállítása a Notepad++ alkalmazásban

Az alábbi példában már használjuk a nyelv és a karakterkódolás megadását is.

Érdekesség

Érdekesség: A wikipédia oldalán más tesztszövegeket is találunk, amelyekkel például az ékezetes betűk helyes megjelenése ellenőrizhető.

Gyakorlat

A fenti kódot másold ki egy kódszerkesztő programban, és ments el UTF-8-as kódolással, HTML-állományként. Ellenőrizd, hogy helyesen jelennek meg az ékezetek a böngészőprogramban!

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.