3. A HTML-dokumentum
A HTML-dokumentum szabályos felépítése
Ebben a fejezetben megtanuljuk, miként kell felépülnie egy oldal forrásának. Nem lesz nehéz dolgunk, mindössze néhány egyszerű parancsot kell megtanulnunk. Előre kell bocsátanunk — az olvasó előbb vagy utóbb úgyis észrevenné —, hogy sok oldal hibátlanul megjelenik akkor is, ha ezeket az alapvető parancsokat elhagyjuk. Azonban egyszerűbb és elegánsabb, ha használjuk őket.
A HTML-dokumentumról célszerű jelölni, hogy HTML-ben van írva. Éppen ezért a HTML-dokumentum első eleme mindig <html>, utolsó sora pedig </html>. (A HTML-elemeket angolul tag-nek, [teg]-nek nevezik, gyakran ilyen néven találkozhatunk velük.) Bizonyára emlékszünk rá, hogy minden HTML-elem <> jelek közé kerül. Azt is tudnunk kell, hogy a legtöbb elem egy nyitó- és egy záróelemből áll. Az elem hatása a nyitóelemtől a záróelemig tart. A záróelem neve mindig ugyanaz, mint a nyitóelemé, de a záróelem mindig egy / jellel kezdődik. Érdemes megjegyezni azt is, hogy az elemeknél nincs különbség a kis- és nagybetűk között, tehát a <HTML>, <HtMl> ugyanolyan szabályos, mint a <html>. Mi több, a záróelmeben használhatunk más betűket, mint a nyitóelemben. Célszerű azonban hozzászoknunk, hogy elemeinket csak kis-, vagy csak nagybetűkkel írjuk. Ebben a segédletben az összes elemet kisbetűvel fogjuk írni (de ha valaki belekukkant a forrásba, nagybetűs elemeket is talál: bizony, e sorok írója sem hibátlan).
Valójában a szabványos dokumentum legelső eleme a dokumentum típusát jelzi, formája pedig ehhez hasonló: <!doctype html public "-//w3c//dtd html 3.2//en"> Ez körülbelül azt jelenti, hogy a dokumentum a 3.2-es verziójú HTML-ben van megírva, és hogy angol nyelvű (en — a magyar hu lenne). Ez a sornak az a célja, hogy jelezze a böngészőnek: ha nem ismeri a 3.2-es verziót (csak egy korábbit), akkor hagyja figyelmen kívül a számára érthetetlen elemeket. Valójában azonban a böngészők amúgy is figyelmen kívül hagyják, amit nem értenek, így ennek a sornak nincs nagy jelentősége. Példáinkban mi sem fogjuk használni.
A HTML-dokumentum két fő részből áll: fejből és a testből. A fej általában a teljes dokumentumra vonatkozó információkat, utasításokat hordozza, míg a test tartalmazza magát a megjelenítendő lapot. A fej a <head> és a </head> elemek, a test pedig a <body> és a </body> elemek közé kerül.
Az elemeket általában a könnyű olvashatóság kedvéért célszerű külön sorokba írni. Egy egyszerű, még üres, de már szabályos HTML-dokumentum tehát így néz ki:
<html>
<head>
</head>
<body>
</body>
</html>
A dokumentum címe
Az előbbi példának még önmagában nem sok értelme volt, de eljött az idő, hogy elkészítsük első oldalunkat! A oldalnak nem kötelező címet adni, de igen előnyös. Meg kell azonban jegyeznünk, hogy az oldal címének semmi köze annak a fájlnak a nevéhez, amelyikben az oldal van. Az oldalnak olyan címet adunk, amilyet szeretnénk: elvileg sem a tartalma, sem a hosszúsága nincs korlátozva. Az oldal címe a böngészó ablakának bal felső sarkában fog megjelenni (ott, ahol most az „A HTML-dokumentum” felirat olvasható.)
A dokumentum címét a fejben (tehát a <head> és a </head> között) kell megadnunk. Nagyon egyszerű: a dokumentum címét a <title> és a </title> elemek közé kell beírni. Ezt könnyen ellenőrizhetjük, ha belenézünk ennek az oldalnak a forrásába. Tegyük is meg. Ha ezzel megvagyunk, próbáljuk is ki, hogy nekünk is működik-e!
Indítsuk el a szerkesztőnket (pl. a Jegyzettömböt), és írjuk be az alábbi sorokat:
<html>
<head>
<title>Itt olvasható a cím</title>
</head>
<body>
</body>
</html>
Ezután mentsük el a fájlt, de úgy, hogy a kiterjesztése .htm (vagy .html) legyen. (A két megoldás között néhány speciális esettől eltekintve nincs lényegi különbség: amikor lesz, fel fogjuk rá hívni a figyelmet. Fontos azonban, hogy az állományra mindig azzal a kiterjesztéssel hivatkozzunk, amellyel elmenettük. Ha komolyan rászántuk magunkat, hogy végigcsináljuk a segédlet gyakorlatait, érdemes egy külön könyvárat létrehozni: ebben tarthatjuk gyakorlatainkat, próbálkozásainkat.) Ezután nyissuk meg az oldalt a böngészőből. Látni fogjuk, hogy a cím megjelenik ott, ahol kell.
A sortörés és a nem törhető szóköz
Talán már ebből láthatjuk, hogy a HTML egyáltalán nem bonyolult dolog. Az oldalt elkészíteni még egyszerűbb. Amit a testbe (a <body> és a </body> közé) írunk, az ugyanis szinte pontosan ugyanúgy fog megjelenni, mint ahogyan azt leírtuk. Próbáljuk is ki! Készítsünk egy fájlt az alábbi tartalommal (ne felejtsük el, hogy .htm kiterjesztéssel kell elmenteni!):
<html>
<head>
<title>Sorok</title>
</head>
<body>
Ez itt az első sor.
Ez itt a második sor.
Ez itt a harmadik sor.
Ez itt hányadik sor? A negyedik!
</body>
</html>
Nyissuk meg ezt a fájlt a böngészővel!
Valószínűleg nem azt látjuk, amit vártunk. A böngésző ugyanis egy sorba fogja írni a teljes szöveget. Vegyük azonban kisebb méretűre a böngésző ablakát! Figyeljük meg, hogy amikor a böngésző ablaka keskenyebb lesz, mint a sor hossza, a böngésző automatikusan új sorban kezdi a ki nem férő szavakat. Ha nagyon összehúzzuk a böngésző ablakát, a böngésző több sorba fogja tördelni a szöveget: mindig éppen annyiba, amennyi szükséges.
Miért van ez így? Azért, mert amikor elkészítjük a dokumentumunk forrását, még nem tudjuk, hogy milyen körülmények között fogják azt olvasni. Nem tudjuk, kis vagy nagy monitoron, kinyitott vagy kisebbre vett böngészőablakkal stb. Éppen ezért nem lenne célszerű, ha a böngésző ott kezdene új sort, ahol mi kezdtünk, hiszen lehet, hogy az egyik gépen az sokkal keskenyebb lenne a böngésző ablakánál, míg a másik gépen túllógna rajta. Nem beszélve arról, hogy az elkövetkezendőkben sok olyan elemet fogunk tanulni, amilyet a sor közepébe írunk, de ami nem jelenik meg a böngészőben (legfeljebb valamilyen hatása van). Ha ilyenkor is az számítana, hogy a forrásban hol van sortörés, akkor egészen különböző hosszúságú sorok jelennének meg a böngészőben.
Mielőtt teljesen elmerülnénk a böngészők működésének elvi kérdéseiben, keressünk gyakorlati megoldást a problémánkra! Van ilyen, méghozzá a <br> elem. Ennek hatására a böngésző az új sor elejére ugrik, és ott folytatja az írást. Javítsuk ki a forrást, és nézzük meg az eredményt!
<html>
<head>
<title>Sorok</title>
</head>
<body>
Ez itt az első sor. <br>
Ez itt a második sor. <br>
Ez itt a harmadik sor. <br>
Ez itt hányadik sor? A negyedik! <br>
</body>
</html>
Szokjunk hozzá, hogy a <br> elé rakjunk egy szóközt. Ennek általában nincs sok jelentősége, de a Netscape Navigatorban néha tördelési problémákat okoz, ha a sortörést jelző elemet közetlenül az utolsó betű vagy írásjel után írjuk. A legegyszerűbb, ha hozzászokunk a szóközhöz.
Vegyük észre, hogy a <br> egy ponton hat, tehát </br> elemre nincs szükség! Éppen ezért ilyen elem nincs is!
Ha megnéztük az eredményt, láthatjuk, hogy a sorok a helyükre kerültek. Azonban észre kell vennünk, hogy az „A negyedik!” felkiáltás előtt mindössze egy szóköz van! Sőt, írhatunk akár több sornyi szóközt is a kérdés és a válasz közé (próbáljuk ki!), a böngésző csak egyet fog megjeleníteni. Jól jegyezzük meg, ez is a böngészők egy fontos jellemzője: csak egy szóközt jelenítenek meg. Igen ám, de mi van akkor, ha nekünk több szóközre van szükségünk egymás után? Először is szeretném megnyugtatni a kedves olvasót, hogy a HTML rendkívül sokoldalú szövegformáló eszköz, ezért általában erre nincs szükség. Ha mégis, akkor van erre egy specilis lehetőség, az . A HTML-ben vannak ugyanis speciális karakterek: ezek jelölése a & (és) jellel kezdődik és a pontosvesszővel ér véget. Az nbsp rövidítés jelentése: non-break space, azaz nem törhető szóköz. Próbáljuk is ki!
<html>
<head>
<title>Sorok</title>
</head>
<body>
Ez itt az első sor. <br>
Ez itt a második sor. <br>
Ez itt a harmadik sor. <br>
Ez itt hányadik sor? A negyedik! <br>
</body>
</html>
Láthatjuk, hogy minél több -t írunk a forrásba, annál távolabb kerül a kérdéstől a válasz.
A magyar betűk helyes megjelenítése
Attól függően, hogy az olvasónak milyen böngészője van, illetve attól, hogy az hogy van beállítva, az ő helyén vagy valóban ő-t látot, vagy egy olyan o-t, amelynek apró hullámvonal van a tetején. Sőt, ha ű-t próbált írni a szövegbe, előfordulhatott, hogy annak helyén egy olyan u jelent meg, melyen apró „háztető” volt. Ahhoz, hogy a böngésző megfelelően jelenítse meg ékezetes betűinket, meg kell neki adnunk, hogy melyik kódolást használjuk. Ezt úgy tehetjük meg, ha a fejbe beírjuk a következő sort:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
Ez a sor azt mondja meg a böngészőnek, hogy a forrást az iso-8859-2 kódolás szerint kell megjelenítenie (ez a kódolás tartalmazza a közép-európai betűket). Ezt a sort akkor is rakjuk be a forrásunkba, ha a mi böngészőnk helyesen jeleníti meg a lapot nélküle is: nem tudhatjuk ugyanis, hogy aki meg fogja nézni a honlapunkat, milyen beállításokkal rendelkezik. (Ha beírtuk a sort, de ennek ellenére nem jelennek meg helyesen az ékezetes betűk, akkor valószínűleg a böngészőnk nem engedélyezi a kódolás meghatározását. Ekkor bizonyára nem csak a saját lapunk nem jelenik meg helyesen, de mások sem. Ebben az esetben vizsgáljuk meg a böngésző beállításait!)
Feladatok
1. Írjunk egy oldalt, melynek „Személyes adatok” a címe, És amely egymás alatti sorokban tartalmazza nevünket, címünket, telefonszámunkat stb.! A sor elején nevezzük meg az adatot (pl. név), majd kettőspont, három szóköz, és maga az adat.
Nézzük meg a példa egy lehetséges megoldását, és hasonlítsuk össze a sajátunkkal! Próbáljuk megérteni a különbségeket!
2. Próbáljuk megváltoztatni a forrást! Mi változik, ha egy <br> elemmel kezdjük a testet? És ha többel? Próbáljuk meg, mi történik, ha egy vagy több <br> elemet írunk a sorok közé! Mi a jelentősége annak, hogy az utolsó sor után írunk-e <br>-t?
3. Próbáljunk meg annyi -t írni az adat megnevezése és az adat közé, hogy az adatok egymás alá kerüljenek! Sikerül? Ha nem, miért nem? Nézzük meg az eredményt egy másik böngészőn is! Milyen különbségeket látunk?
4. Gondoljuk végig, milyen lépéseket kell megtennünk, ha egy közönséges szöveges állományt (.txt) át szeretnénk írni HTML-be! Milyen elemeket nem szabad semmiképpen sem kihagynunk? Minek kell a fejbe kerülnie? Hová kell <br>-t írnunk? Hogyan érhetjük el, hogy minden bekezdés egy kissé beljebb kezdődjön (beütés)? Ha van ilyen állományunk, próbáljuk meg átalakítani! Ha nincs, keressünk az interneten, és azt alakítsuk át!