Keretek

Egy böngészőablak általában egyetlen HTML-fájlban megírt tartalmat jelenít meg. Kereteknek nevezik azt a megoldást, amikor a böngészőablak több dokumentumot megjelenít egyidejűleg. A keretek használata jelenleg is látható, mivel a böngésző ablakának felhasználói felülete két részre van osztva, melyek egymástól függetlenül görgethetők: a baloldali, keskenyebb (a tartalomjegyzéket tartalmazó) és a jobboldali, szélesebb (az éppen betöltött fejezet szövegét tartalmazó) részre. A keretekkel lehetővé válik, hogy bizonyos információkat folyamatosan a képernyőn tartsunk (ebben az esetben a címeket), és azalatt a képernyő másik részén nagy mennyiségű szöveget töltsünk le és görgessünk.

Az első keretes példa

A keretes weblap egy olyan HTML-dokumentum, amelyben a <BODY>… </BODY> tagokat <FRAMESET>… </FRAMESET> tagokra cseréljük, amelyek közt <FRAME> tagokon belül megadjuk azokat a weblapokat, amelyeket az oldalon található különböző keretekben szeretnénk megjeleníteni.

Ez a HTML-összefoglaló két keretet használ, melyekben bal felől a böngésző ablakjának 22%-os szélességében a 00cimek.htm weblap, jobboldalt pedig 78%-os szélességben kezdetben a 00cimlap.htm weblap jelenik meg. Ha az előbb említett kép weblap meg van írva, akkor létre kell hoznunk egy harmadik (pl. index.htm nevű) keretes weblapot, mely megoldja, hogy az előbbi két weblap tartalma ugyanazon a felosztott felületen jelenjen meg. Az index.htm tartalma ez esetben a következő lesz:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>
  <TITLE>A weblapírás ábécéje — HTML-összefoglaló</TITLE>
</HEAD>

<FRAMESET COLS="22%, 78%">
  <FRAME SRC="00cimek.htm" NAME=fbal>
  <FRAME SRC="00cimlap.htm" NAME=fjobb>
</FRAMESET>

</HTML>

A <FRAMESET> kód

A <FRAMESET> kódnak két attribútuma van, a ROWS és a COLS. A ROWS attribútum két tényezőt határoz meg: a böngészőablakban egymás alatt megjelenő keretek számát és az egyes keretek magasságát. Az egyidejűleg megjelenített keretek teljes magasságának meg kell egyeznie a böngészőablak magasságával; a böngésző úgy is szabályozhatja a sorok magasságát, hogy valamennyi beleférjen. A ROWS formái a következők lehetnek:

ROWS="n" esetben a keret magassága n pixel lesz.

ROWS="n%" esetben a keret magassága a böngésző felhasználó területének n százaléka lesz.

ROWS="*" esetben a keret relatív méretezésű: a csillaggal jelölt keretnek adják a böngészők azt a helyet, ami a többi, pixelekben és százalékokban megadott keretek által elfoglalt területen felül megmarad.

ROWS="n*" esetben a keret a megmaradt területekből n-ed részt kap

Példák:

Mindkét alábbi programkód ugyanazt az eredményt produkálja:

<FRAMESET ROWS="20%, 80%">
<FRAMESET ROWS="20%, *">

Az alábbi HTML-kód három egymás alatti keretet hoz létre, ahol a legfelső keret magassága 120 pixel, a harmadiké a böngészőfelület 30 százaléka, a középsőé pedig a megmaradt területmagasság lesz:

<FRAMESET ROWS="120, *, 30%">

Ebben az esetben az ablak tetején egy 30% magasságú csík lesz, és alatta a 70%-os rész fele-fele arányban ketté lesz osztva:

<FRAMESET ROWS="30%, 70%">
  <FRAME SRC="x.htm" NAME=felso>
  <FRAMESET COLS="50%, 50%">
    <FRAME SRC="y.htm" NAME=also_bal>
    <FRAME SRC="z.htm" NAME=also_jobb>
  </FRAMESET>
</FRAMESET>

A COLS attribútum értékei és hatása azonos a ROWS attribútuméval, azzal a különbséggel, hogy a COLS segítségével a böngésző ablakának felületét nem egymás alatti, hanem egymás melletti keretekre oszthatjuk fel.

A <FRAME> kód

A weboldalon levő kereteket a <FRAME> taggal kell definiálnunk. Ha például négy különböző HTML-oldalt szeretnénk keretekben megjeleníteni, négy keretet kell létrehoznunk, tehát négy <FRAME> tagra van szükségünk.

SRC="url": kötelező attribútum; az url arra a forrásanyagra mutat, amely a keretben fog feltűnni. A forrásanyag általában a keretben megjelenítendő weblap állományának neve, de lehet egy link, kép, vagy bármilyen érvényes url.

NAME="ablaknév": a keret nevét adja meg, ami akkor fontos, ha azt szeretnénk, hogy ha az egyik ablakban/keretben egy linkre kattintunk, az információk a másik ablakban/keretben jelenjenek meg. Bár nem kötelező attribútum, sose hagyjuk el: minden keretnek adjunk egy betűvel kezdődő egyedi nevet. Példaképpen tekintsük a következő két keretet:

<FRAME SRC="00cimek.htm" NAME=fbal>
<FRAME SRC="00cimlap.htm" NAME=fjobb>

Ebben az esetben ha a 00cimek.htm kereten egy linkre rákattintva azt szeretnénk, hogy egy újabb weblap (pl. a 010elso.htm) a másik keretben töltődjön le, akkor a link TARGET attribútumában a második keret nevét adjuk meg:

<A HREF="010elso.htm" TARGET=fjobb>Az első weblap</A>

Az <A>…</A> kódpár TARGET attribútumának van egy néhány hasznos előre definiált értéke:

TARGET="_SELF": a hivatkozott weblap mindig abba a keretbe töltődik, amelyben a felhasználó a linkre rákattintott. (Ez az alapértelmezett eset.)

TARGET="_BLANK": a hivatkozott weblap egy új böngészőablakba töltődik. Ne használjuk túl sokszor, mert nem biztos, hogy weblapunk látogatói értékelik, ha minden pillanatban új ablakok ugranak elő.

a hivatkozott weblap annak közvetlen szülőkeretébe töltődik be, ha pedig a _PARENT célt tartalmazó aktuális weblapnak nincs szülője, akkor az attribútum úgy működik, mintha a _SELF értéket adtuk volna meg.

TARGET="_TOP": a hivatkozott weblap az egész ablakba töltődik be. Ha az aktuális weblap már a dokumentumhierarchia csúcsán van, a _TOP cél úgy viselkedik, mint a _SELF. Ezzel az attribútummal mélyen beágyazott keretek közül keveredhetünk ki, és sima, keret nélküli főoldalra juthatunk vissza.

FRAMEBORDER="Yes"|"No": ezzel adhatjuk meg, hogy legyen-e szegély a keretek körül. A szegélyek megkönnyítik a keretek közti különbségtételt, de útjába állhatnak az összefüggő, "varratmentes" oldal kialakításának.

MARGINWIDTH=n: a keret bal és jobb oldali margójának szélességét n pixel méretűre állítja, vagyis a kétoldalt n pixel szélességben nem fog írás kerülni. Ez az attribútum elhagyható, de egy kis margó mindig ott lesz, mert a böngésző a saját margóját alkalmazza, ami általában 1 vagy 2 pixel széles.

MARGINHEIGHT=n: ugyanúgy működik, mint a MARGINWIDTH, csak a keret felső és alsó margóinak magasságát szabályozza.

SCROLLING="Yes"|"No"|"Auto": a Yes és a No értékkel azt lehet beállítani, hogy legyen-e görgetősáv a keretben. Legajánlatosabb az alapértelmezett Auto értéket használni, mert ebben az esetben csak akkor fog görgetősáv megjelenni, ha több információt kell megjeleníteni, mint amennyi belefér az ablakba.

NORESIZE: ennek az attribútumnak a jelenléte letiltja a keretek átméretézését. Egyébként a kereteket elválasztó szegélyvonalat az egérrel el lehet húzni, ami által a keretek átméreteződnek.

Belső keret: <IFRAME>

Az <IFRAME> kód segítségével a <BODY>…</BODY> kódpáron belül a HTML-dokumentum belsejébe bárhova beilleszthetünk egy keretet:

<IFRAME SRC="111belso.htm" HEIGHT=130 FRAMEBORDER=1></IFRAME>

Zárójelben megjegyezném, hogy ha csak formázatlan szöveget szeretnénk egy görgethető ablakrészben megjeleníteni, megtehetjük úgy is, hogy <TEXTAREA>…</TEXTAREA> kódpár közé írjuk a szöveget:

<TEXTAREA NAME="példa" ROWS=10 COLS=30>
A TEXTAREA-ba írt szöveg karakterei azonos szélességű betűtípussal jelennek meg, és a szöveg nem formázható.

A HTML-kódba írt sortörések megjelenítéskor is megmaradnak.

A ROWS és a COLS attribútum a terület sorainak és oszlopainak számát jelöli, ahol ezt a méretet nem pixelben, hanem a monospace betű méretének (magasságának és szélességének) többszöröseiben kell számolni.
</TEXTAREA>

Visszatérve a keretekre, az <IFRAME> kód attribútumai:

SRC="url": a webes forrás (weblap, kép stb.), amit meg szeretnénk a belső keretben jeleníteni.

NAME="ablaknév": a keret neve, amit majd a linkek TARGET attribútumában célba vehetünk.

LONGDESC="szöveg": a belső keretben található információ hosszabb ismertetését ide lehet beírni.

WIDTH=n[%], HEIGHT=n[%]: a belső keret szélessége illetve magassága.

ALIGN=Left|Right|Center|Justify: a belső keret igazodása az oldalhoz.

A <FRAME> kódhoz hasonló módon az <IFRAME> kódhoz a következő attribútumok is járulhatnak: FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT, SCROLLING.

A belső keretekről még több információt meg lehet tudni a következő címen:

http://hotwired.lycos.com/webmonkey/96/37/index2a.html?tw=authoring