Ajánlás a HTML formátumú dokumentumokhoz

Utolsó módosítás: 2003.07.15.

Az alábbi lista a MEK-ben elhelyezett HTML-anyagokhoz készült. Az itt felsorolt szempontok csak ajánlások, nem kötelező mindig és mindegyiket betartani, túl nagy munkát és unalmas egyformaságot jelentene minden dokumentumot pontosan ilyenre átalakítani. Az eleve szépen formázott, jól olvasható HTML dokumentumoknál legfeljebb csak néhány, egyszerűen megvalósítható módosítást érdemes csinálni az egységesítés kedvéért, de azoknál az anyagoknál, amelyeket egyébként is át kellene szerkeszteni, vagy amelyeket ASCII text vagy Word formátumokból konvertálunk át HTML-be, célszerű minél több szempontot érvényesíteni az alábbiakból.

Természetesen nem lehet minden előfordulható helyzetre ajánlást adni, ezért az itt nem szereplő esetekben a MEK alapelveit érdemes követni: egyszerű, praktikus és esztétikus megoldásokat kell választani.

Általános szempontok:

- Kisbetűs, ékezet és szóköz nélküli, betűkből és számokból álló (esetleg még "-" és "_" jeleket tartalmazó), lehetőleg max. 8+3 karakteres file- és directory-neveket kell használni, melyek minden operációs rendszeren egyformán működnek.

- Minden file-t egyetlen könyvtárba kell tenni, és ezen belül szükség esetén további alkönyvtárak lehetnek (pl. ha túl sok állományból áll a dokumentum). A belső linkeknek természetesen relatív címzésűeknek kell lenni a dokumentumot tartalmazó könyvtáron belül.

- A külső linkeket kerülni kell, de ha mégis szükségesek, akkor egy target="_blank" opcióval új ablakban kell megnyitni őket.

- A kezdőlap - mely egy több részből álló dokumentum esetében általában a címlapot és a tartalomjegyzéket tartalmazza - egy index.htm nevű file-ban legyen. Minden további lapról legyen visszalépési lehetőség az index.htm-re.

- Több részből álló anyagoknál a file-ok nevét a dokumentum címéből és egy 2-3 jegyű sorszámból célszerű képezni (pl. janosv01.htm, janosv02.htm..., janosv01.gif, janosv02.gif...)

- A HTML formátumú dokumentumokat egyrészt minél kevesebb darabba célszerű tördelni (hogy könnyebben letölthetők legyenek és hogy kevesebbet kelljen lapozni), másrészt viszont kívánatos, hogy egy-egy Web-oldal mérete ne haladja meg a 2-300 kbyte-ot (képekkel együtt), mert ennél nagyobb oldalak letöltése túl sokáig tart és megjelenítésük problémákat okozhat a böngészőknek kisebb teljesítményű gépeken. A tördelést fejezet-határoknál érdemes megtenni.

- Lehetőleg ne használjunk böngészőfüggő HTML-címkéket és speciális eszközöket: stíluslapokat (CSS), szerver-oldali beillesztést (SSI), parancs- és programnyelveket (JavaScript, CGI, PHP, Java, Flash stb.), helyzetérzékeny térképeket (image-map). Frame-ek használhatók, amennyiben a dokumentum jellege megkívánja, de ha van egyszerűbb megoldás is, akkor inkább azt válasszuk, mert például egy bal oldali frame-ben elhelyezett tartalomjegyzéket a vakok számára készült felolvasóprogramok minden oldalon egybeolvasnak a főszöveggel. Mindenképpen kerülendő a Word 2000-ben levő HTML-konvertáló használata, mely rengeteg fölösleges elemet tartalmazó, nehezen megjeleníthető XHTML kódot hoz létre. Word dokumentumokat inkább Word'97-ből mentsünk HTML-be, majd töröljük a fölösleges <font face=> címkéket.

Képek

- A dokumentumokhoz tartozó illusztrációkon és a lapozáshoz használható nyíl-ikonokon kívül más képi elemeket ne használjunk: kerülendők a háttértapéták, a díszítő vonalak és gombok, az animált GIF-ek stb.

- Az előre és hátra lapozáshoz, valamint az index-htm-re való visszalépéshez használhatunk egyszerű, színvilágában és stílusában illeszkedő nyilakat (jobb, bal és fel), de ilyenkor az "alt=" opcióval adjuk meg a nyíl funkcióját ("ELŐRE", "VISSZA", "KEZDŐLAP"), hogy a képek nélkül is érthető legyen a szerepük. A lapozó nyilakat az egyes oldalak alján, egy <hr> elválasztó vonal alatt érdemes elhelyezni (jobbra, balra és középre igazítva).

- A dokumentumban található rajzokhoz, képletekhez, képként bevitt táblázatokhoz, különleges betűtípussal készült feliratokhoz stb. 16 vagy 256 árnyalatú, non-interlaced, 89-es verziójú (szükség esetén transzparens) GIF formátumot célszerű használni. A PNG formátum nem ajánlott, mert a régi böngészők nem ismerik.

- A fényképeket 15-30%-os, "standard encoding" tömörítésű JPEG állományokban kell tárolni, ".jpg" végződésű file-okban.

- Csak a ténylegesen szükséges és használt képméretre konvertáljuk a képeket, fölösleges tár- és letöltési idő-pazarlás a "size=" opcióval a HTML-állományban lekicsinyíteni a nagyobb méretű képeket, ami ráadásul komoly minőségromlást is eredményez.

- Ha egy lapon túl sok, nagy méretű kép van, akkor készítsünk kis (kb. 150-300 képpont széles) bélyegképet és erre linkeljük az eredeti méretű képet.

A fejléc

- A <title> mezőben a mű szerzőjét, majd egy kettőspont és szóköz után a címét kell feltüntetni Latin-2 ékezetekkel. Több részből álló dokumentumoknál minden file fejlécében ezt kell feltüntetni, majd esetleg zárójelben a fejezetcímet is oda lehet írni.

- A fejlécben fel kell tüntetni az ékezetes betűkhöz használt kódolást ("iso-8859-2") és a magyar nyelv kódját ("hu"). Vagyis:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="hu">

- Egyéb "meta" elemeket nem kötelező beírni, mert a dokumentumra vonatkozó bibliográfiai és egyéb meta-adatok egy egységes, index.html nevű "borítólap"-on lesznek Dublin Core szabvány szerint, amit egy program generál.

A dokumentum

- A dokumentum külalakját 800x600-as 256 színű képernyőre kell tervezni, de ügyelni kell arra, hogy más felbontásban is jól olvasható maradjon. Vagyis lehetőleg mindenütt relatív méreteket adjunk meg (betűméret, táblázat-szélesség stb.), és kontrasztos színeket használjunk, amelyek akár még 16 színű üzemmódban is olvasható szöveget eredményeznek (világos alapon sötét betűk). Egy ajánlott színösszeállítás, ami mindenféle böngészővel és felbontásban szépen mutat:
<body text="#000000" bgcolor="#FFFFEE" link="#660000" vlink="#664422" alink="#444444">

- Bár csak az újabb böngészők ismerik, de érdemes egy "leftmargin=25 rightmargin=25" értéket beállítani a <body> címkében, mert akkor a szöveg nem megy ki az ablak széléig és kellemesebben olvasható.

- A betűméretek állításához a <font size=> címkét használjuk, mert egységesebb eredményt ad a különböző böngészőkkel, mint a <h1>, <h2> stb. A főcímekhez általában elegendő egy <font size=+3>, a fejezetcímekhez és más kiemeléshez pedig egy <font size=+2> és <font size=+1>. Lábjegyzetekhez, alsó és felső indexekhez <font size=-1>-et használjunk.

- <font face=> címkét lehetőleg ne használjunk, mert nem lehet tudni, hogy az olvasónak van-e megfelelő fontkészlete a gépén, és ez kiszámíthatatlan eredményre vezet. Ha mégis különböző betűkre van szükségünk, akkor a "Times", "Arial" és "Courier" fontokat alkalmazzuk csak (az alap-betűtípus ilyenkor is a Times). Különleges betűkkel írt feliratokat GIF képként tegyünk fel inkább.

- Az ISO 8859-2 (Latin-2) szabvány szerint kell írni az ékezetes betűket, nem használunk "acute"-kódolást, mert megnöveli a méretet és rosszul olvashatóvá teszi a file-t. Nem használjuk ki a Windows-1250 kódtábla és a HTML egyéb speciális karaktereit sem, mivel ezek nem biztos, hogy helyesen jelennek meg minden böngészőben, nem menthetők rendesen más formátumba, nem értelmezik őket a felolvasó programok, illetve a teljesszövegű keresőt is megzavarják. (Az idézőjeleket egyszerű " karakterrel kell írni az idézet elején és végén egyaránt, a belső idézőjeleket &#0187; illetve &#0171; kódokkal, a gondolatjeleket egy egyszerű - jellel, a félbehagyott mondatot jelző három pontot pedig így: ... )

- Az ISO 8859-2 kódtáblából hiányzó karaktereket Unicode szabvány szerint kell kódolni NCR (Numeric Character Representation) módon. (A "&#" jelek után a karakter kódját kell írni tízes számrendszerben, majd egy ";"-vel lezárni.) Néhány gyakoribb karakter kódja: a` => &#224; a^ => &#226; e` => &#232; e^ => &#234; n~ => &#241; További kódok: http://www.alanwood.net/unicode/

- A bekezdéseket <p> címkével kell elválasztani egymástól. Hosszabb, folyamatos szövegeknél (pl. regények) a <p align=justify> opció ajánlható, mert így szebb az összhatás. A bekezdések elejére nem kell behúzást csinálni (pl. egy kis képpel vagy &nbsp; kódokkal), a jó olvashatósághoz elegendő a <p> által létrehozott távolság a bekezdések között.

- Verseknél és rövid felsorolásoknál a <br> címkével kell lezárni a sorokat (a versszakok között egy további <br> kell). Ha beljebb is akarjuk rendezni ezeket a sorokat, akkor a <dir> címkét használjuk. Minkét oldali margó-behúzáshoz (pl. levelek vagy idézetek esetében) a <blockquote> címke ajánlható.

- Lábjegyzeteket vagy egyszerűen az oldal aljára lehet tenni egy <hr> után és <name> címkékkel ellátva hivatkozni rájuk, vagy egy külön file-ba tenni az összes lábjegyzetet és egy keskeny alsó frame-ben megjeleníteni a képernyő alján. A lábjegyzet hivatkozásokat sorszámozni kell (ha csak egy-két darab van, akkor elegendő csillagokkal jelölni őket) és szögletes zárójelek közé tenni. Még szebb, ha kicsit meg vannak emelve és le vannak kicsinyítve, így:
<font size=-1>^[07]</font>