5. A szöveg tördelése I.
Az előző fejezetben láttuk, hogyan lehet formázni a betűket a HTML-ben. Ebben a fejezetben megismerjük azokat a parancsokat, melyekkel a szöveg formázható. A HTML-elemek itt is ugyanolyanok, mint a korábbiakban: hatásukat nyitó- és záróelemek között fejtik ki.
Az előre formázott szöveg
A harmadik fejezetben láthattuk, hogy a böngésző maga tördeli a szöveget: akkora szélességű sorokba írja, hogy éppen elférjen a képernyőn. Láttuk, hogy ha meg akarjuk törni a sort, akkor a <br> elemre van szükségünk. Igen ám, de mi van akkor, amikor sok sortörésre van szükségünk (pl. versek esetében)? Ilyenkor nem túl takarékos módszer minden sor végére <br>-t írni. Ráadásul előfordulhat, hogy nem szeretnénk, ha a böngésző egy sort megtörne, inkább fusson ki a sor a képernyőből (ilyenkor általában a böngészőben alul megjelenik egy csúszka, melyet mozgatva a teljes sor megtekinthető). Erre a problémára a HTML több megoldást is kínál, mi itt csak a legegyszerűbbel foglalkozunk: az előre formázott szöveggel.
Az előre formázott szöveget a <pre> elemmel jelöljük. A <pre> elem hatására ott is sortörés lesz, ahol a forrásba, ill. ahol a forrásban nincs sortörés, ott a böngésző sem töri meg a sort, inkább hagyja kifutni a képernyőről. A <pre> használatakor a halmozott szóközök is megjelennek. A <pre> további hatása, hogy a szöveg fix szélességű betűkkel jelenik meg. Mindez igencsak emlékeztet a közönséges szövegfájlok megjelenítésére. Lényeges különbség azonban, hogy a HTML-elemek a <pre> elemben is érvényesek, tehát az előre formázott szövegben is lehetnek kurzív, félkövér vagy egyéb betűk – sőt, a <br> is sortörés vált ki. Vigyázzunk azonban, mert ha egymás után áll a <br> és a sortörtés, azt a böngésző két sortörésként fogja megjeleníteni!
Feladat: írjuk át a korábban elkészített, személyes adatainkat tartalmazó oldalunkat úgy, hogy a <br> és a nem törhető szóköz helyett a <pre> elemet használjuk!
A bekezdések
A korábbiakban az új bekezdések jelzésére egyszerűen a <br> elemet használtuk. Ez megtörte a sort, ami egy új bekezdésnek felel meg. A HTML-ben azonban van egy olyan elem, amelyet kifejezetten a bekezdések jelölésére hoztak létre. Ez a <p>. Hatására a böngésző új sorba kezdi írni a szöveget. A legtöbb böngésző a <p> használatakor nagyobb sorközt szúr be, mint az egyszerű <br> használatakor, így a bekezdések jobban elkülönülnek. A <p> további sajátossága, hogy nem kötelező használni a záróelemét: amikor a böngésző egy új <p> nyitóelemmel találkozik, akkor az előző bekezdést automatikusan lezárja. A <p> elembe nem ágyazhatunk más bekezdésformázó elemet, mert a bekezdést ekkor is lezárja. Mindezek ellenére a forrás jobb áttekinthetősége érdekében tanácsos használni a </p> záróelemet is.
A böngészők a bekezdésen belül általában balra zárják a szöveget. Ezt megváltoztathatjuk az align (=igazítás) paraméter használatával. Az <p align=right> paraméter például jobbra zárja a szöveget. Az align-nek még a következő értékeket adhatjuk: center (középre igazítás), ill. justify (sorkizárás). Ha biztosak akarunk lenni abban, hogy a böngésző balra zárja a sorokat, adjuk meg a left értéket!
A szöveg hierarchiáját befolyásoló elemek
A <p> elemhez igen hasonló a <div> csoportosító. A bekezdésekkel szemben azonban a csoportosítók egymásba ágyazhatók. (A <div> nem jár akkora sorközzel, mint a <p>.) Ha tehát egy csoportosítóban jobbra igazítást adunk meg, néhány sorral lejjebb pedig megnyitunk egy újabb csoportosítót, melyben középre igazítunk, majd ezt lezárjuk, néhány sort írunk, majd lezárjuk az első csoportosítót is, akkor három bekezdést kapunk: az első és az utolsó jobbra, a középső pedig középre lesz igazítva. A <div> elem célja, hogy a szöveg hierarchiáját, a bekezdések egymásba ágyazódását jelezze. Ennek a funkciójának azonban önmagában nem tesz eleget. Hogy ez valóban látszódjon, ahhoz a stíluslapok használatára van szükség – erről azonban csak később ejtünk szót.
Sokkal feltűnőbben utal a hierarchiára a <blockquote>. Ezt eredetileg hosszabb (több soros) idézetek megjelenítésére szánták. Jellemzője, hogy előtte és utána nagyobb a sorköz, és szűkebb margók között jelenik meg a szöveg. Az ilyen bekezdések egymásba ágyazása lehetséges, de nem szabályos. A <blackquote> azért sem alkalmas egymásba ágyazott bekezdések megjelenítésére, mert nem adható meg a szöveg igazítása: ez mindig balra történik. Viszont megadható egy másik paraméter, a cite. Ennek ugyan nincs semmilyen hatása a szöveg megjelenésére, viszont megadhatjuk vele, hogy az interneten hol találhatjuk meg a szöveg eredetijét. Az url-t egyenlőségjel után, idézőjelbe kell írni.
A címek
Ahhoz, hogy hosszabb szövegünket jól tagolhassuk,címekre (főcímekre, alcímekre) van szükségünk. Ezeket írhatjuk természetesen bekezdések formájába is, ám a html ennél sokkal jobb lehetőséget biztosít. Ezek az úgynevezett H-elemek, melyeket fejléceknek is szokás nevezni. Ezek a <gt;-n belül egy h-t és egy számot tartalmaznak. A szám egész szám, a legkisebb értéke egy, a legnagyobb hat lehet. A <h1>—<h6> címsorok alapesetben félkövéren jelennek meg, előttük és utánuk nagyobb sorköz van. A legnagyobb betűkkel az egyes, a legkisebbekkel a hatos jelenik meg. A <h1> a <basefont> és <font> elemek size paraméterében megadott 6-os méretnek, a <h6> az egyes méretnek felel meg. Erre érdemes figyelni, mert előfordulhat, hogy a címsorunk kisebb lesz a szövegnél – ez pedig nem kelt jó benyomást. A címsor természetesen mindig le kell zárni a megfelelő elemmel.
A címsoroknál is használható az align paraméter, de a sorkiegyenlítésnek ez esetben nincs sok értelme.
Az elválasztóvonal
Előfordulhat, hogy szövegünket nagyobb részekre szeretnénk tagolni, de nem akarunk a részeknek címet adni. Ilyenkor jön jól a <hr> elem. Ez egy vízszintes vonalat húz az elválasztandó bekezdések közé. Alapesetben ez a vonal egy pixel vastagságú, a teljes sort kitölti és árnyékolt. A size paraméterben azonban megadhatjuk a vastagságát, a width paraméterben megadhatjuk, hogy milyen hosszú legyen (pixelben vagy százalékban, a noshade paraméter hatására pedig eltűnik az árnyék. (Az Opera böngészőben a noshade hatástalan.) Példák:
<hr size=3 width="75%" noshade>
Egy három pixel vastagságú, a képernyő szélességének háromnegyedét kitöltő, nem árnyékolt vonal.
<hr size=5 width=500>
Öt pixel vastagságú, 500 pixel hosszú vonal. (A vonal hosszát érdemes százalékban megadni, hogy a különböző felbontású képernyőkön is hasonló hatást keltsen.)
A vonalat alapesetben a böngésző középre igazítja (nem balra, mint a szövegeket). Az align paraméter természetesen itt is használható. (A sorkiegyenlítésnek itt sincs sok értelme, ráadásul a Netscape és az Explorer a balra, az Opera a középre igazítással tekinti egyenértékűnek.)
Feladatok
1. Most már valódi szövegeket is tudunk tördelni. Látogassuk meg a Magyar Elektronikus Könyvtárat, és töltsünk le néhány olyan szöveget (pl. novellákat), melyek .txt fomátumban vannak. Alakítsuk át őket html-lé! Használjunk minél több szövegformázó elemet! Készítsük el ugyanazt a szöveget több változatban is!
2. Készítsünk néhány vonalból álló esztétikus zárómintákat szövegeinkhez! Nézzünk meg néhány egyszerűbb példát! Kísérletezzünk bátran!