INFORMATIKA AZ EGYETEMEN

INTERNET AZ EGYETEMEN

Huszonhatodik rész

SAJÁT WEB LAP KÉSZÍTÉSE IV.

Egy kicsit hosszúra nyúlt nyári szünet után ismét folytatódik sorozatunk, amelynek elõzõ cikkét az
érdeklõdõk a Fórum májusi számában találhatják meg (illetve a Weben az Archívumban).

Elõzõ alkalommal épphogy elkezdtünk ismerkedni a táblázatok készítésének módjával, készítettünk is egy egyszerû kis táblázatot, most nézzünk egy-két trükköt a táblázat paramétereinek felhasználásával.

TÁBLÁZATOK FINOMABB BEÁLLÍTÁSAI

A TÁBLÁZAT MÉRETEZÉSE

Már az elõzõ részben szó esett arról, hogy a táblázat mérete automatikusan igazodik a beleírt szöveghez, ha másképp nem intézkedünk. Nézzünk néhány helyzetet, amikor be kell avatkoznunk, változtatnunk kell az automatikusan kirajzolódó táblázaton. Például:

Nem elég határozott a táblázat kerete, táblázatunk "beleveszik" a környezetbe.
Túlságosan közel íródnak az adataink a vonalakhoz, a beleírt adatok (pl. számok) nehezen olvashatók.
Nem elég markánsak a táblázat celláit elválasztó vonalak.
A táblázat szélessége nem megfelelõ, nem illeszkedik a Web lapunk valamelyik másik objektumához, vagy a képernyõ szélességéhez.

Nézzük meg, ilyen esetekben mit tehetünk.

Nem elég határozott a táblázat kerete.

Ha ez a gondunk, akkor az elõzõ részben már említett "BORDER" paramétert kell használnunk, csak ezúttal nem magában, hanem egy megfelelõ értéket adva, például "BORDER=10" formában. Ekkor a táblázatunk úgy fog megjelenni, mintha egy kissé kiemelkedne a környezetébõl. (3-10 közötti értékeknél nagyobbra jellemzõen nincs szükség.)

Túlságosan közel íródnak az adataink a vonalakhoz.

Természetesen erre is van egy olyan paraméterünk, amit pont erre találtak ki, az a neve, hogy "CELLPADDING", és a táblázatot nyitó <TABLE> tag-en belül kell megadni. Ebbõl persze máris következik egy apró hiányossága, mégpedig az, hogy csak az egész táblázatra vonatkozóan, egységesen lehet megadni. A megadható érték persze sokféle lehet, de ha nem akarunk túlzásokba esni, akkor kb. 3-10 közötti érték ezúttal is meg fog felelni a céljainknak. A pontos értéket kísérletezéssel érdemes beállítani. Alapértelmezett értéke (ha semmit nem adunk meg) CELLPADDING=2.

Nem elég markánsak a táblázat celláit elválasztó vonalak.

Az ezt a helyzetet megoldó paraméternek "CELLSPACING" a neve, és tulajdonképpen a táblázat egyes celláinak egymástól mért távolságát adhatjuk meg vele. Alapértelmezett értéke CELLSPACING=2.

A táblázat szélessége nem megfelelõ.

A táblázat szélességének megadására több módszer közül is választhatunk. Akkor a legegyszerûbb a dolgunk, ha a teljes képernyõ szélességét kitöltõ táblázatra van szükségünk. Ekkor a "WIDTH=100%" segít rajtunk. Ebbõl máris ki lehet következtetni, hogy a teljes táblázat szélességét százalékos formában szabályozhatjuk, mégpedig a megnyitott ablak szélességének százalékában.

A WIDTH paraméter azonban nemcsak százalékosan adható meg, hanem pixelben is. Na ja, de mi az a pixel? A képernyõn kirajzolódó képek, szövegek apró pontokból állnak össze. Ezeket a pontokat hívjuk pixelnek. A szokásos beállítások a mai monitorok többsége esetében a 640x480, illetve a 800x600 pixeles képméret, ehhez lehet viszonyítani. A pixeles megadás hátránya, hogy nem rugalmas, nem tudja figyelembe venni, hogy a felhasználó nem feltétlenül teljes képernyõnyire kinyitva böngészi az Internetet. Van persze elõnye is, ha például valami miatt a táblázat szélessége kötött, akkor pontosan így tehetjük a szélességét függetlenné a beállított ablakmérettõl. Ilyen ok lehet, ha zavaró az adatok megtörése, de az is, ha például valamilyen képi háttérhez akarjuk illeszteni.

A WIDTH abban is eltér az elõzõ paraméterektõl, hogy nemcsak a táblázat egészére, hanem egyes oszlopokra vonatkoztatva is megadhatjuk. Mivel oszlopot egyben definiáló utasítás nincs, ezért a sorok definícióin belül (<TR>...</TR>) kell figyelnünk arra, hogy mindenütt a megfelelõ helyre kerüljön a cella definíciókon (<TD>…</TD>) belül a szélesség megadása.

Nézzünk most már egy kis mintát, hogy is néz ki egy olyan táblázat megadásának kezdete, ami az ablak szélességének 80%-át tölti ki, széles szegélye van, és a beleírt szövegek nem "tapadnak" a vonalakhoz:

<TABLE BORDER="5" WIDTH="80%"
CELLSPACING="5" CELLPADDING="5>"

ILLESZKEDÉSEK BEÁLLÍTÁSA A TÁBLÁZATBAN

A figyelmes olvasó bizonyára észrevette az elõzõ részben, hogy a táblázat fejlécének celláiba (<TH>…</TH>) a beírt szöveg vastagítva, középre igazítva íródik, míg az adatok alaphelyzetben balra igazítva jelennek meg. Ezeket az alapértelmezéseket a már jól ismert ALIGN paraméterrel bírálhatjuk felül.

Az ALIGN paramétert azonban több helyre írhatjuk. Ha a táblázatot definiáló <TABLE> tag-en belülre kerül, akkor magának a táblázatnak az elhelyezkedését fogja meghatározni. Írhatjuk a sorokat definiáló <TR> tag-en belülre is, például így: <TR ALIGN="Center"> (a beállított értéket itt nem feltétlenül szükséges idézõjelbe tenni, de úgy olvashatóbb), ebben az esetben a soron belül a táblázat adott sorának minden egyes cellájára vonatkozik a megadott illeszkedés. Ezen kívül természetesen minden egyes cella definíciójába (<TD>) kerülhet ALIGN paraméter, ekkor csak az adott cellára vonatkozik a beállítás. (Ez természetesen felülbírálhatja a sorra beállított értéket.)

CÍM A TÁBLÁZATHOZ

Mire lehet még szükség a fentieken kívül? Például arra, hogy a táblázatunknak adjunk egy látható címet, ami vagy közvetlenül a táblázat alá, vagy közvetlenül föléje íródik ki. Erre szolgál egy újabb tag, amit a <TABLE> utáni sorban célszerû megadni. Ez a <CAPTION>…</CAPTION> páros tag. A tag két része közé írhatjuk a megjelenítendõ szövegünket, amihez használhatjuk az ALIGN paramétert. Ennek értéke értelmesen 4 féle lehet. Ha "Top", akkor a táblázat fölött középen, ha "Left" vagy "Right" akkor ugyancsak fölül, de a bal vagy a jobb szélhez igazítva, ha pedig "Bottom", akkor alul középen jelenik meg a felirat. (Alul balra, illetve jobbra illeszteni így nem lehet.)

CELLÁK EGYESÍTÉSE

Aki sok táblázattal találkozott már, annak biztosan eszébe jutott, hogy lehetnek olyan helyzetek, amikor egymás melletti, vagy egymás alatti cellákat valamiért össze kell vonnunk. Erre is van lehetõség, bár segédprogram használata nélkül igencsak odafigyelést igénylõ a módszer. A felhasználható paraméterek a COLSPAN, illetve a ROWSPAN, amikkel a feladat megoldható. Arra kell figyelni, hogy a HTML nyelv nem ellenõrzi, hogy helyesen adtuk-e meg az oszlopok, illetve sorok számát. A COLSPAN után írt értékkel azt határozhatjuk meg, hogy hány oszlopon keresztül akarjuk a cellákat összevonni, azaz hány egymás melletti cellát akarunk egyesíteni. A ROWSPAN esetében ugyanez az egymás alatt elhelyezkedõ cellákra vonatkozik. Az összevont cellákat - ha a többi sorokban nincs összevonás - az összevonás elõtti darabszámmal kell figyelembe venni, amikor egyeztetjük a sorokon belül a cellák számát.

Az érdeklõdõk, elemezni szeretõk vizsgálják meg, próbálják ki ezt a kis forrás-részletet:

<TABLE BORDER="10" CELLSPACING="5"
CELLPADDING="5" WIDTH="250">
<CAPTION ALIGN="Bottom">Táblázat</CAPTION>
<TR>
<TH COLSPAN=2>Fejléc</TH>
</TR>

<TR>
<TD ROWSPAN=2><P ALIGN=Center><B>Adatok:</B></TD>
<TD><P ALIGN=Right>11</TD>
</TR>

<TR>
<TD><P ALIGN=Right>222</TD>
</TR>
</TABLE>

A megjelenõ táblázat kb. így néz ki:

Táblázat

Fejléc
Adatok:	11
	222

TÁBLÁZATOK EGYMÁSBA ÁGYAZÁSA

Az egymásba ágyazás (táblázat a táblázatban) megengedett mûvelet, ritkán szükséges valódi táblázatok esetében, de jó szolgálatot tehet akkor, ha a táblázatot arra kívánjuk felhasználni, hogy (láthatatlan kerettel) szövegek, képek elrendezését befolyásoljuk a képernyõn. Tipikusan ilyen feladat lehet, amikor például több versszakos, több oszlopba tördelt verset szeretnénk a képernyõn kulturáltan elhelyezni.

A táblázatok befejezéseképpen egy apró trükk: hogyan készíthetünk (a Fórumban is több helyen látható módon) olyan aláírást, ahol az aláíró beosztása az aláírás alatt, ahhoz képest középre igazítva jelenik meg:

<CENTER>
<TABLE CELLPADDING="2"ALIGN="Center" WIDTH="90%">

<TR>
<TD WIDTH="50%"></TD>
<TD WIDTH="50%"><P ALIGN=Center><B>Szerzõ Neve<BR>/beosztás/</B></TD>
</TR>

</TABLE>
</CENTER>

Elõször is egy kis fogalom-tisztázás. Maga a "frame" (ejtsd: frém) szó keretet jelent, míg a táblázat keretezésénél fentebb használt "border" igazi jelentése: határ. A frame alatt azonban a WEB lapok készítésekor azt értik, amikor a lap képernyõje több részre van felosztva, és ezek más-más tartalommal vannak feltöltve. Ezek a tartalmak persze általában összefüggenek egymással, a leggyakoribb megoldás az, amikor a kép bal oldalán egy menüt találunk, míg a jobb oldalon vagy ismertetõt, vagy a menü alapján változó tartalmat. Egy lapot természetesen kettõnél több részre is feloszthatunk, választhatunk a függõleges és a vízszintes felosztás között, de a túl sok részre bontott lap nehezen kezelhetõ, esetenként annak is nehéz átlátni, aki "csak" olvassa (pedig neki készül!), de szinte lehetetlen feladat elé állíthatja saját magát a lap készítõje is. A szerzõ tapasztalata szerint háromnál több frame használata egy lapon kerülendõ! A túl sok frame a sok betöltendõ lap miatt a kész Web lapunk betöltõdési idejét is növeli, ezáltal elriaszthatja a lassabb vonalon érkezõ látogatót.

FRAME-EK KÉSZÍTÉSE

A fenti figyelmeztetést már csak azért is érdemes komolyan venni, mert egy több frame-re osztott WEB lap elkészítéséhez a tervezett frame-ek számánál eggyel több HTML lap elkészítésére van szükség. Legegyszerûbben talán úgy fogalmazhatjuk meg, hogy van egy "leíró", vezérlõ lap, és minden egyes frame-hez tartozik egy-egy önálló, a HTML szabályainak megfelelõ lap. Egy nagyon egyszerû leíró lap lehet például a következõ:

<HTML>
<HEAD>
  <TITLE>Több keretbõl álló lap</TITLE>
</HEAD>

<FRAMESET COLS="20%,80%">
<FRAME SRC="bal_oldal.htm" NAME="bal"
  MARGINWIDTH="20"SCROLLING="No" NORESIZE>
<FRAME SRC="jobb_oldal.htm" NAME="jobb" MARGINWIDTH="20">
</FRAMESET>

<NOFRAMES>
<BODY>
<P>Amit ide írunk, a böngészõk többségében nem fog látszani!
</BODY>
</NOFRAMES>
</HTML>

Fussunk át gyorsan a fenti listában vastagon szedett új kulcsszavakon! A <FRAMESET>…</FRAMESET> páros tag fogja közre a létrehozandó frame-ek definícióját. A <FRAMESET> belsejében megadott arány (COLS="20%, 80%") ezúttal azt adja meg, hogy a képet két oszlopra kívánjuk bontani, amiknek a szélessége a megadott arányban áll egymással. Ha a COLS (columns=oszlopok) kulcsszó helyett itt ROWS (rows=sorok) szerepel, akkor a képernyõt nem függõleges, hanem vízszintes osztóvonal fogja ketté választani.

Az egyes frame-ek méretét nemcsak százalékosan, hanem pixelben is megadhatjuk. Mivel az ablakok méretének egy grafikus operációs rendszerben változtathatónak kell maradnia, nem adhatunk meg minden frame-re konkrét szélesség értéket. A lehetséges megadás például így nézhet ki: COLS="200,1*", ekkor a baloldali frame 200 pixel széles lesz, míg a jobboldali frame-ünk kitölti az ablak maradék szélességét.

A <FRAMESET>…</FRAMESET> által közrefogott <FRAME> utasítások definiálják a jelen esetben bal, illetve jobb oldali oszlopba betöltõdõ HTML lapokat. Nézzük, itt mit is jelentenek az egyes paraméterek, amiket felhasználtunk. Az SRC jelenti a legkevesebb gondot, itt adhatjuk meg annak a lapnak a fájlnevét (esetleg elérési úttal együtt), amit az adott frame-be szeretnénk betölteni. A NAME paraméterrel az adott frame hivatkozási nevét állíthatjuk be, erre majd akkor lesz szükségünk, ha vezérelni szeretnénk, hogy egy-egy hivatkozás (link) hatására betöltõdõ lap hová is kerüljön. (Errõl majd a következõ részben ejtünk szót.)

A MARGINWIDTH paraméter a frame-be kerülõ szövegnek a frame szélétõl mért távolságát határozza meg, afféle margóként. (Használata nem kötelezõ.) A SCROLLING="No" beállítása a baloldali frame esetében letiltja a gördítõ sávok megjelenítését, míg a NORESIZE paraméter hatására a baloldali frame szélességét nem tudjuk az egérrel megváltoztatni. Természetesen ennek a két utóbbi paraméternek a megadása sem kötelezõ.

A </FRAMESET> lezárás után szereplõ <NOFRAMES>…</NOFRAMES> közé írhatunk olyan utasításokat, amik egy olyan HTML lapot definiálnak, ami akkor jelenik meg, ha a lapunkra valaki olyan (nagyon régi) böngészõ programmal tévedt, ami nem képes frame-ek megjelenítésére.

Most ennyi fért ebbe a cikkbe, legközelebb megnézzük, hogyan lehet beállítani, hogy egy-egy hivatkozás hatására betöltõdõ lap a képernyõn hol jelenjen meg (valamelyik frame-ben, vagy a teljes ablakban). Megnézünk még egy érdekes dolgot, mégpedig az "érzékeny (tér)képeket" (sensitive map), amik olyan képek, amelyek egyes területeit hivatkozásokként (linkekként) használhatjuk. Ha mindezt végignéztük, már nagyjából kialakul egy olyan utasítás készletünk, aminek a segítségével akár a Windows Jegyzettömb programjával is képesek lehetünk Web lapok készítésére. A gyakorlatban persze általában nem ezt használjuk, vannak kényelmesebb eszközök is. Akkor minek mindezt végig bogarászni? A "kényelmes" eszközök nem mindig adnak a kezünkbe minden lehetõséget, de szinte minden HTML szerkesztésre szánt programban van lehetõségünk a program által generált forrás listába történõ beavatkozásra, ha arra szükség van. Hogy ott mit látunk, és azzal mit kezdhetünk, az csak a (közel) teljes utasításkészlet ismeretében dönthetõ el, hajtható végre.

A következõ részig az érdeklõdõknek ismét sikeres kísérletezést, jó munkát kíván a szerzõ

Borbély László