Ebben a leckében megismerkedünk a HTML5 nyelv azon címkéivel, amelyekkel a szövegek formázását, illetve speciális jelentését állíthatjuk be. Nemcsak a tageket ismertetjük, hanem a tipográfia világába is bevezetjük az Olvasót.
Kezdjük az ismerkedést azon tagekkel, amelyekkel a szövegek megjelenését tudjuk befolyásolni, illetve amelyekkel a szövegekhez speciális jelentést tudunk társítani. Nem térünk ki minden elemre, csak azokra, amelyek gyakrabban használatosak.
Mivel ebben a fejezetben szövegszintű elemekről tárgyalunk, fontos, hogy a tipográfia témaköréhez is kapcsolódjunk.
Tipográfiai kitekintő
Mielőtt rátérnénk a szöveg szintű elemekre, néhány alapfogalmat tisztázzunk. Ebben segítségünkre lesz a Szabadbölcsészet - Tipográfia tananyag, amelyet mélyebb feldolgozásra is javaslunk.
A tipográfiában megkülönböztetünk hamis és valódi betűket. A dőlt, félkövér (kövér) és kiskapitális betűknek a valódi verziója külön betűtípus, melyet külön rajzoltak a betűtervezők. Ezeknek külön karakterként vagy külön betűtípusként kell megjelenniük a számítógépes fájlokban is. Ha a gép nem talál ilyen fájlt, ő maga készít „hamis karaktereket egy algoritmus segítségével. Ezek a hamis betűk. Ilyenek használatát kerüljük, mert nem adnak esztétikus megjelenést!
Tipográfiai kitekintő
A dőlt (kurzív, italic, cursive) betűt eredetileg az itáliai kézírás („italica antiqua nova”), a humanista Itália új betűi 14. sz. Firenzéjében. „Kurzív” nevét folyóírás jellegéről kapta.
Az italic fő jellemzője nem az, hogy dőlt, hanem az, hogy a kézírásos (sűrűbb) íráshoz jobban hasonlít. A dőlt betű eredetileg külön betűtípus volt, mellyel több betű fért el ugyanakkora könyvben.
Mivel nem bontja meg a szöveg szürke tömbjének egységét, nehéz egy pillantással észrevenni az oldalon. Ezért mindig olyankor használjuk, ha a folyószöveg olvasása közben szeretnénk egy-egy szót nyomatékosítani az olvasó néma olvasásakor.
Akkor is használhatjuk, ha nem nyomatékokat akarunk adni a mondandónknak, hanem a dőlt betűvel kiemelt szövegrészt el akarjuk különíteni a szöveg más részétől. Ezt funkcionális kiemelésnek nevezzük. Például folyóiratra utaló bibliográfiában a folyóirat címe dőlt betűs, könyv esetében a könyv címe.
Kurzív szöveget hosszabb szövegrészek kiemelésére ne alkalmazzunk, mert nehezen olvasható.
A dőlt betűktől elkülönítik a döntött (faux italic, oblique) betűt, mely szintén „valódi” betű, de nincsenek rajzolatbéli eltérések a döntött és álló verzió között. (Valódi betűnek, a nem hamis, vagyis külön megtervezett, megrajzolt betűket nevezzük. A hamis betűket a számítógép generálja bizonyos algoritmusok szerint).
Az élőlények latin elnevezését – pl. Homo sapiens sapiens – mindig, minden nyelvű szövegben dőlt betűvel kell szedni.
<p>Valamennyi ma élő ember a <i>Homo sapiens sapiens</i> alfaj tagja.</p>
Valamennyi ma élő ember a Homo sapiens sapiens alfaj tagja.
Forrás: Szabadbölcsészet - Tipográfia
Mikor használhatjuk?
Attól, hogy egy szöveget <i> tag-ek közé írunk, még nem biztos, hogy tényleg dőltként jelenik meg. Vagy fordítva, olyan szövegek is megjelenhetnek dőltként, amelyeket nem <i> tag-ek közé írtunk. A szövegszintű formázásokat ugyanis a stíluslapok segítségével is megadhatjuk, illetve az elemek alapértelmezett megjelenését is felülbírálhatjuk. Ugyanez igaz a többi formázásra is (pl. félkövér, aláhúzott.)
Ne felejtsük el, hogy a szöveg szintű formázások nemcsak a látvány szempontjából fontosak, hanem szemantikai jelentést is hordoznak ezért nem mindegy, hogy például a dőlt megjelenést HTML taggel, vagy stíluslappal állítjuk be!
Mire használjuk?
Paraméterek: globális attribútumok
Vegyük a következő mondatot: Peti most tanulja a HTML nyelvet. Ezt élőszóban is eltérően hangsúlyozhatjuk, attól függően, hogy mit akarunk kifejezni. Ugyanígy írásban is különbséget tehetünk.
Ha azt akarjuk kihangsúlyozni, hogy ki tanulja a HTML nyelvet, akkor:
Peti most tanulja a HTML nyelvet.
<p><em>Peti</em> most tanulja a HTML nyelvet.</p>
Ha azt hangsúlyozzuk, hogy mikor zajlik a cselekvés: Peti most tanulja a HTML nyelvet.
<p>Peti <em>most</em> tanulja a HTML nyelvet.</p>
Ha azt akarjuk hangsúlyozni, hogy a HTML nyelvet tanulja, és nem mondjuk a PHP-t:
Peti most tanulja a HTML nyelvet.
<p>Peti most tanulja a <em>HTML nyelvet</em>.</p>
Tipográfiai kitekintő
Vastag betűt (félkövér [boldface, bold, semibold] vagy kövér = fett (extra bold]) betűt egy-egy kulcsszó vagy szócikk címének kiemelésére használjunk.
Akkor használjuk, ha a teljes szöveg elolvasása nélkül akarjuk az olvasó számára a kulcsszavakkal gyorsan áttekinthetővé tenni a szövegünket. Így ezeken végigugrálva tud eligazodni a szövegben.
A kiemelések közül a félkövérrel szedett szöveg marad a legjobban olvasható hosszabb szövegrészen keresztül is. Szinte mindig félkövérrel szedjük a képaláírásokat, általában a rövidebb hírfejeket és a negatív háttér előtt feltűnő szöveget is.
A dőlt félkövér betű csak az utóbbi idők találmánya, a tipográfusok ritkán használják.
Forrás: Szabadbölcsészet - Tipográfia
Mire használjuk?
Paraméterek: globális attribútumok
Az első számítógépem egy Amiga volt.
<p>Az első számítógépem egy <b>Amiga</b> volt.</p>
Mire használjuk?
Paraméterek: globális attribútumok
Figyelem! A termék szembe jutva irritációt okoz!
<p><strong>Figyelem!</strong> A termék szembe jutva irritációt okoz!</p>
Tipográfiai kitekintő
Aláhúzást nem használunk, ma már főképp azért nem, mert ez a tipográfiai megoldás ma a hipertext linkek számára van fenntartva (de nyomtatásban ez sem ajánlott, mert elcsúfítja a szöveg képét).
Kivétel ez alól olyan szakmai szöveg, ahol az aláhúzásnak sajátos értelme van, pl. nyelvtani mondatelemzéseket tartalmazó szöveg, ahol a hagyományos módon emeljük ki az állítmányt és az alanyt.
Forrás: Szabadbölcsészet - Tipográfia
Mire használjuk?
Paraméterek: globális attribútumok
Mondatelemzés: Egy kutya sétál az úton.
<p>Mondatelemzés: Egy <u>kutya</u> sétál az úton.</p>
Mivel a böngészőprogramok a hiperhivatkozásokat aláhúzással (is) jelölik, a felhasználók ezt megszokták. Ezért félő, hogy ha egy szöveget aláhúzunk, azt a felhasználók egy része hivatkozásnak tekinti, és megpróbál rákattintani, ezért használhatósági okokból nem érdemes ezzel a formázással élni, vagy csak speciális esetben.
A vizuális böngészőprogramok segítségével meggyőződtünk néhány szövegszintű elem hatásáról. De a vak emberek által használt képernyőolvasó programok megkülönböztetik-e ezen elemeket, és ha igen, akkor hogyan?
Készítettünk egy tesztállományt, melyet aztán felolvastattunk a JAWS program segítségével.
A forráskód a következő volt:
<!DOCTYPE html> <html lang="hu"> <head> <title>Szövegszintű elemek tesztelése képernyőolvasó programban</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <body> <p>Ez egy teszt szöveg</p> <p><i>Ez egy teszt szöveg</i></p> <p><em>Ez egy teszt szöveg</em></p> <p><strong>Ez egy teszt szöveg</strong></p> <p><b>Ez egy teszt szöveg</b></p> <p><u>Ez egy teszt szöveg</u></p> </body> </html>
Az eredmény nagyon lehangoló. Az alapbeállításokkal semmiféle különbséget nem hallunk a tesztszövegek között, vagyis a JAWS 14 képernyőolvasó nem hangsúlyozza máshogy a szöveget attól, hogy erősen kiemeljük, vagy hangsúlyosan kiemeljük.
Persze a képernyőolvasót átállíthatjuk az alapértelmezettől eltérő felolvasási sémára, amikor képes a szövegformázásokat bemondani, de azért érezhető, hogy ez nem a tökéletes megoldás...
Mire használjuk?
Paraméterek: globális attribútumok
Ajánlott fogyasztói ár: 9999 Ft/darab. 7999 Ft/darab
<p>Ajánlott fogyasztói ár: <s>9999 Ft/darab.</s> 7999 Ft/darab</p>
A mark taggel jelzett szöveg valamilyen különleges tulajdonsággal bír. Hasonló a strong taghez, viszont a mark taggel jelölt szövegnek nincs kiemelt fontossága. Egyszerű szövegkiemelés.
Mire használjuk?
Paraméterek: globális attribútumok
Ezt írta Ben a magyarországi barátjának: My bicycle is gray . Mit gondolsz Ben hol él, Amerikában vagy Angliában?
A fenti példában a gray szó írásmódjára akarjuk felhívni a figyelmet. Az brit angolban a szürke szót jellemzően e betűvel írják (grey).
Nézzünk egy példát egy találati listára. Ha például Neumann nevére kerestünk, akkor az eredményül kapott dokumentum formázható így:
<p><mark>Neumann</mark> János 1903. december 28-án született <mark>Neumann</mark> Miksa és Kann Margit első gyermekeként Budapesten, a Váczi körút (ma Bajcsy-Zsilinszky út) 62. sz. házban. </p> <p><mark>Neumann</mark> Miksa 1913-ban nemesi címet kapott, és felvette a margittai előnevet, így a család minden tagja jogosulttá vált ezen előnév használatára. Miksa fia, János így lett hivatalosan margittai <mark>Neumann</mark> János. János későbbi külföldi tartózkodása idején vette fel először a Johann von <mark>Neumann</mark>, majd később a John von <mark>Neumann</mark> nevet, a világ nagyobbik részén ma is így ismerik.</p>
Neumann János 1903. december 28-án született Neumann Miksa és Kann Margit első gyermekeként Budapesten, a Váczi körút (ma Bajcsy-Zsilinszky út) 62. sz. házban.
Neumann Miksa 1913-ban nemesi címet kapott, és felvette a margittai előnevet, így a család minden tagja jogosulttá vált ezen előnév használatára. Miksa fia, János így lett hivatalosan margittai Neumann János. János későbbi külföldi tartózkodása idején vette fel először a Johann von Neumann, majd később a John von Neumann nevet, a világ nagyobbik részén ma is így ismerik.
  |
 |
 |
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.