Az opciók leírásánál a paraméterezés a következőket jelenti:
| [/]A | name/K, href/K, rel, rev, title, target/K, shape/K Ez egy mutató (href) vagy cimke (name, target, bookmark) tag, amellyel meghatározzuk egy dokumentum elérési módját és helyét (URL). Ha cimkeként használjuk természetesen nem kell URL-t megadni. A zárótagot soha nem lehet elhagyni! |
| name | ="cimke" Egy belépési pontot jelöl ki egy dokumentumban, ahonnan kezdve a böngésző megjeleníti a dokumentumot. Mivel jelen esetben nem a hivatkozási szöveg, hanem maga a tag a navigációs pont, ezért a szöveget el is lehet hagyni a tag és a zárótag közül, egyszerüen így adható meg: <A NAME="cimke"></A> |
| href | ="[protokoll://][útvonal/]dokumentum.htm[#cimke]" Egy hipertext kapcsolatot fűz a szövegbe. A tag és a zárótag közti szövegrészt kiemelten jelzi. Egy kép is lehet a szöveg helyén (kerettel jelzi). HREF="#cimke" Ugyanazon dokumentumon belül egy másik, NAME="cimke"-vel megjelölt helytől kezdődően jeleníti meg a dokumentumot. HREF="útvonal/dokumentum.htm" HREF="útvonal/dokumentum.htm#cimke" A megadott útvonalon elérhető dokumentum nevű .htm kiterjesztésü dokumentumot tölti be az éppen használt gép megadott könyvtárából. Ha a '#cimke' is meg van adva, akkor attól kezdődően jeleníti meg. |
| title | ="cím" |
| target | ="frémnév" Ez az opció az ún. többfrémes megjelenítéskor használatos. Segítségével egy másik frémen is megjeleníthetsz dokumentumot. |
A dokumentumok szinesítésére GIF, JPEG, és újabban PNG formátumú képeket, sőt animációkat is felhasználhatsz. Az első kettő az elterjedt formátum, de a ping (egyes forrásokban pong) képek rengeteg előnyük miatt egyre inkább el fognak terjedni.
A nagy terjedelmű, sokszinű - főleg a JPEG-nél - képeket lehetőleg kerülni kell,
hiszen senki nem szereti, ha egy oldal negyed óráig töltődik le...
| IMG | src/K, alt/K, width/N, HEIGHT/N, UNITS/K, ALIGN/K, BORDER/S|N,
HSPACE/N, VSPACE/N, USEMAP/S, ISMAP/S Ezzel a taggal és opcióival fűzhetsz be képet a dokumentumodba, beállíthatod a méretét, pozícióját, és egyéb tulajdonságait. |
| src | ="[útvonal/]kép.gif|jpg|png" A megadott (útvonalon lévő) képet betölti és megjeleníti a szöveg között. További paraméterek megadása nélkül a kép saját paramétereit használja fel a megjelenítéshez. |
| alt | ="megnevezés" Ha egy képet valamilyen oknál fogva nem tud (vagy nem akar) betölteni, vagy megjeleníteni a böngésző, akkor az opcióval megadott szöveget jeleníti meg helyette. Ez akkor hasznos, ha egy kép egyben hypertext-hivatkozás is, hiszen a felhasználó innen tudhatja meg mire kattint. Addig is, amíg a böngésző megjeleníti a képet, az itt megadott szöveg látszik. |
| units | =pixels|en A tag opcióinak paraméterezésére használt adatok mértékegységét határozhatod meg. A default a pixels, az 'en' épp a fele a pontméretnek. Az opció hatása csak az utánalévő opciókra vonatkozik. |
| width height |
=széles =magas A kép szélessége és magassága pixelben. Egy ekkora képernyőhelyet fog lefoglalni a képnek, addig is, amíg az megérkezik. Ha nem adod meg, megvárja, amíg a kép is megjön, és csak akkor rendezkedik. |
| align | =left|right|top|middle|bottom A kép igazítása az aktuális szövegsorhoz viszonyítva. Ha nem adod meg, a kép alsó pixelsora kb. a betűkészlet ún. bázissorával lesz egyvonalban. Ennél a tagnál az ALIGN opciónak adhatsz paraméterként függőleges igazítást is |
| border | [=szám] Keretet rajzol a kép köré. Kapcsolóként használva a default keretet jeleníti meg. |
| hspace vspace |
=méret =méret A kép körüli üres terület méretét adhatod meg vízszintes és függőleges irányban, az UNITS opcióval meghatározott mértékegységgel. |
| usemap | ="#azonosító" Egy a MAP taggal előre meghatározott kép'térképet' (image map) tudsz felhasználni. Az azonosítót utána meg kell adnod a MAP tagnak: <map NAME="azonosító"> |
Egy dokumentumba fűzött kép különböző méretű és alakú területeit
lehetőséged van ún. kattintózónának kijelölni. Ehhez be kell illeszteni egy képet
a html dokumentumba (IMG usemap), majd a 'MAP' taggon belül az AREA tag segítségével
lehet megadni a képen lévő kattintózónák helyzetét, alakját és a zónákhoz
rendelt hipertext mutatókat (URL).
Ezután a felhasználónak nem kell mást csinálnia, csak belekattintani egy ilyen
zónába. Tipikus példa:
Budapest térképe
(itt lehetőség van az utcajegyzékben történő keresésre is).
Egy
másik példa a naprendszerről.
(a végén lesz egy egyszerűbb példa forrásnyelven illusztrálva).
| [/]MAP | NAME/K Egy 'image map' meghatározásának kezdő és zárótagja. Egyetlen paramétere van, ami kötelező. |
| name | ="azonosító" Az 'image map' neve, amit a kép befűzését végző 'IMG' tag 'USEMAP' opciójával előzőleg meg kell adnod az alábbi módon: <IMG SRC="pik.gif" USEMAP="#kep"> <MAP NAME="kep"> ...<AREA ...COORDS="..." HREF="..."> ...<AREA ...COORDS="..." HREF="..."> ...<AREA ...COORDS="..." HREF="..."> </MAP> |
| AREA | SHAPE/K, ALT/K, COORDS/K, HREF/K, NOHREF/S A tag egy kattintózónát határoz meg az előzőleg megjelenített képen, ha meghatároztad az 'image map'-ot. A tagot a MAP-/MAP tagok között használhatod csak eredményesen. |
| shape | =rect|circle|poly Az opcióval a kattintózóna alakját határozhatod meg. Ha az opciót elhagyod, alapesetként négyszög alakú zónának veszi. (ha számítod a koordinátákat és méreteket, figyelj oda, ne nagyon lógjanak le a képről!) |
| alt | ="megjegyzés" Ha a böngésző nem tudja (vagy nem akarja) megjeleníteni a zónák alapjául szolgáló képet, a megjegyzéseket fogja kirakni, mivel ezek mégiscsak hivatkozások lennének és jó, ha tudja a felhasználó, hogy mire kell(ene) kattintania |
| coords | ="vízsz1, függ1, vízsz2, függ2" ="vízsz, függ, rádiusz" ="vízsz1, függ1, vízsz2, függ2 ..." A zónák pozíciói, sorban a következőkhöz: négyszög, kör, sokszög. A mértékegység pixel, a kép bal felső sarka pedíg a 0:0 pont. A négyzetnél a masodik koordinátapárt megadhatod szazalékos arányban is, az egész képhez viszonyítva: COORDS="vízsz, függ, széles%, magas%" |
| href | ="[útvonal/]dokumentum.htm[#navig_pont] Ezzel az opcióval adhatod meg a kapcsolatot, vagyis azt a dokumentumot, amit a zónára kattintva megjelenít a böngésző. |
| nohref | ˇ Egy kapcsoló típusú opció, melyet akkor kell megadnod, ha nem tartozik a zónához kapcsolat. például még nem készült el az a lap) |
Az igért példa az 'image map'-ról és a kattintózónákról
A példában egy 280 pixel széles, 201 pixel magas (width="280" height="201") képet olvasunk be, 4 részre osztjuk (jobb, bal, alsó, felső) és a különböző részekre kattintva más más oldalakat érünk el:
<MAP NAME="kep"> <AREA SHAPE=rect ALT="balfelso" COORDS=" 0, 0,139,100" HREF="balfelso.htm"> <AREA SHAPE=rect ALT="balalso" COORDS=" 0,101,139,201" HREF="balalso.htm"> <AREA SHAPE=rect ALT="jobbfelso" COORDS="140, 0,280,100" HREF="jobbfelso.htm"> <AREA SHAPE=rect ALT="jobbalso" COORDS="139,101,280,201" HREF="jobbalso.htm"> </MAP> <IMG SRC="cusl2.jpg" USEMAP="#kep">
ImageMap webbot segítségével:
<!--webbot
bot="ImageMap"
rectangle=" (0,0) (139,100)
balfelso.htm"
rectangle=" (0,101) (139,201) balalso.htm"
rectangle="(140, 0) (280,100) jobbfelso.htm"
rectangle="(139,101) (280,201) jobbalso.htm"
src="p2b.jpg" width="280"
height="201"
alt="cusl2.jpg (24766 bytes)" -->
Az űrlapok a felhasználóval való párbeszédet szolgálják. Az űrlapot egy FORM markup nyit és zár, ezen belül kell megadni az ürlaphoz tartozó különböző objektumokat, mezőket (az ürlap szerkezetét). Ezek az objektumok az INPUT mező különböző alakjai. Kiemelném a SELECT mezőt mint a több előre megadott lehetőség (menü) közötti választást szolgáló objektumot.
Az űrlap kitöltése után azt is meg kell határozni, hogy mi történjen az űrlapra beírt ill. az ott beállított adatokkal. A kitöltés végén egy eseménynek kell bekövetkeznie, ami jelzi, hogy az űrlap mezői ki vannak töltve, és a feldolgozás megkezdhető. A feldolgozás módja már nem része a hipertextnek, ehhez egy programra van szükség, amely a szükséges műveleteket elvégzi. Ez a program gyakran cgi-script, lehet Java program, vagy perl script is. Egyszerűbb esetekben JavaScript is használható. A JavaScript előnye, hogy teljesen integrálható egy html dokumentumba, így a felhasználó gépén azonnal elkészül a válasz, ami szintén hipertext formában jelenik meg.
Nézzük meg részletesen milyen objektumokat, eszközöket biztosit a
html erre a célra:
| [/]FORM | ACTION/K, METHOD/K, ENCTYPE/K Az űrlap - maradjunk ennél a terminológiánál - határoló tagjai. |
| action | ="[útvonal/]szkript" Az itt megadott szkript fog elindulni a megfelelő gomb megnymása után. Ez általában egy ún. CGI szkript, de elvileg lehet bármilyen program. A JavaScript is alkalmas erre. |
method |
METHOD=get|post A leírások szerint azt határozza meg, hogy a szerver fogadja, vagy küldje az adatokat. Ha nem adod meg, akkor 'get' módban van. |
enctype |
="kódolás" Az űrlap tartalom kódolásának típusa. Alapbeállítás a 'application/x-www-form-urlencoded'. (Részletesebben utánnanézhetsz az RFC1867 (Form-based File Upload in HTML) leírásban) |
| name | ="azonosító" Egy nevet rendelhetsz a formhoz, amit akkor fog azonosításra használni, amikor elküldi a szervernek vagy a JavaScript felhasználja. |
INPUT |
TYPE/K, NAME/K, VALUE/K, CHECKED/N, SIZE/N, MAXLENGHT/N, SRC/K, ALIGN/K A felhasználó beavatkozási lehetőségeit határolhatod körül. A lényeg, hogy dokumentumban megjelenik egy szövegbeviteli mező, vagy gomb és a felhasználónak be kell írnia valamit, vagy meg kell nyomnia egy gombot. |
| type | =text|button|password|checkbox|radio|submit|reset|file|hidden|image Az input objektum típusai valamelyiket kötelező megadni. text ˇ Szövegbevitelre szolgáló mező, amelynek szélességét a 'SIZE' opcióval kell karakterben megadni. button ˇNyomógomb. A rákattintás az az esemény, amely elindítja az input mezőkön bevitt adatok feldolgozását password ˇ Hasonló a 'text' típushoz, csak begépeléskor a karakterek helyett egy-egy '*' jel jelenik meg a mezőben. checkbox ˇ Kicsiny négyzet alakú objektum, egymás melleti, egymást nem kizáró lehetőségek közüli választásra szolgál. Kiválasztott állását egy 'pipa' rajzolat mutatja. radio ˇ Kicsiny kör alakú objektum, egymást kizáró lehetőségek közüli választásra szolgál. Kiválasztott állását a körön belül egy fekete pötty mutatja. submit ˇ Ha a felhasználó lenyomja ezt a gombot, a forma tartalmát elküldi a szervernek. (az átküldött adatokat aztán már egy program, vagy rutin feldolgozhatja) reset ˇ Visszaállítja az összes mező és gomb betöltéskori tartalmát és állását. file ˇ Szintén egy szövegmező, hasonlóan a 'text' paraméterhez, de egy állománynevet vár. hidden ˇ Ez nem jelenít meg semmit, csak egy névhez rendelhetsz vele tartalmat... image ˇ Egy grafikát rendelhetsz egy gombhoz. |
| name | ="azonosító" Egy nevet rendelhetsz a mező, vagy gomb tartalmához, amit akkor fog azonosításra használni, amikor elküldi a szervernek vagy a JavaScript-nek. |
| value | ="alap_érték" Egy alapbeállítást adhatsz meg a szövegbeviteli mezőnek, vagy feliratot a 'reset', ill. 'submit' típusú gomboknak. |
| checked | Ez a gomb lesz kijelölt állapotban a lap betöltésekor a 'radio', ill. a 'checkbox' gombok közül. |
| size | =méret A szövegbeviteli mező szélességét határozza meg, amennyiben ennyi karakter széles lesz. (körülbelül) |
| maxlength | =hossz A szövegbeviteli mezőbe beírható szöveg maximális hosszát adhatod meg, karakterben számolva. |
| src | ="[útvonal/]kép.kit" Egy képet adhatsz meg a gomb megjelenítéséhez. |
| align | =left|right|top|middle|bottom A szokásos igazítás a rendelkezésre álló helyen belül: balra, jobbra, fel középre és le. Az alapértelmezés a 'bottom'. |
| [/]TEXTAREA | NAME/K, ROWS/S, COLS/S Egy szöveges ablakot nyit gördítősávokkal és egyebekkel a dokumentumon belül. Ez egy többsoros szövegbeviteli terület, melynek szélességét és magasságát meg lehet adni. Az a szöveg, amit a tag és a zárótag között adsz meg, az megjelenik a mezőben. A mező teljes felületére írhatsz, ha a kurzorral kimész a mezőből, az ablak automatikusan továbbgördül. |
| name | ="név" Egy név, melynek segítségével a szerver azonosítani tudja a mezőt, amikor megkapja a tartalmát. |
| rows cols |
=széles =magas egy-egy egész számot kell itt megadnod, amelyek karakterben kifejezve meghatározzák a szövegbeviteli mező szélességét és magasságát. A méretek kiszámolásakor a PRE taghoz tartozó karaktereket használja. |
| [/]SELECT | NAME/K, SIZE/N, MULTIPLE/S Egy ciklikus gombot, vagy egy kiválasztó listát jelenít meg a dokumentumban. A gomb, vagy lista formáját és magasságát a tag opcióival adhatod meg, a tartalmát az OPTION taggal, a szélességét pedíg a benne lévő szöveg határozza meg. |
| name | ="név" Egy név, amelynek segítségével a szerver azonosítani tudja az elküldött adatokat. |
| size | =magas A kiválasztó lista magassága karaktersorban megadva. A gomb ilyenkor mindig listaként jelenik meg. |
| multiple | ˇ Engedélyezi az ún. többes kiválasztást a kiválasztó listában. A kijelölt elemek a háttérszin megváltoztatásával jelzik is állapotukat. |
| OPTION | SELECTED/S, VALUE/N A SELECT tag által határolt szövegrészen belül használható és a ciklikus gomb, vagy kiválasztó lista egyes elemeit határozza meg. |
| selected | ˇ A dokumentum megjelenítésének pillanatában ez az elem az alapértelmezett. |
| value | =érték A kiválasztás elküldésekor ezt a számot, vagy fűzért fogja átadni értékként a névhez tartozó tartalomként a szervernek. |
Példa forrásnyelven checkbox mezőkre :
<form method="POST"
action="prog">
<p><input type="checkbox" name="C3" value="ON"> Kémia
<br>
<input type="checkbox" name="C2" value="ON"> Fizika
<br>
<input type="checkbox" name="C1" checked value="ON"> Matematika
<br>
<input type="submit"
value="Submit"
name="B1">
<input type="reset"
value="Reset"
name="B2"></p>
</form>
A fenti forrásnyelv így jelenik meg a böngészőben
(működik, ki lehet őket pipálni és resetelni):
Forrásnyelvű példa radio tipusú input-ra:
A radio tipus csak egy lehetőség kiválasztását teszik lehetővé egy csoporton belül. Az egy csoportba tartozó, összefüggő elemeket a közös nevük köti össze (a példában mindkét radio tipus az R1 nevű input objektumhoz tartozik: name="R1") Természetesen több különböző nevű input objektum is létrehozható, és az ezekhez tartozó radio tipusok egymástól független választást tesznek lehetővé.
<form method="POST" action="prog">
<p><input type="radio" name="R1" value="V1" checked>
<input type="radio"
name="R1" value="V2">
<input type="submit"
value="Submit"
name="B1">
<input type="reset"
value="Reset"
name="B2"></p>
</form>
Példa forrásnyelven 3 különböző input mezőre:
<form method="POST" action="program">
<input type="text"
name="T1" size="20">
<input type="submit"
value="Submit"
name="B1">
<input type="reset"
value="Reset"
name="B2">
</form>
A fenti forrásnyelv így jelenik meg a böngészőben:
Az előbbi példa de most textarea-val. Itt hosszab szöveg bevitelére is lehetőség van.
<form method="POST" action="ProgramHelye">
<textarea rows="2" name="S1" cols="20"></textarea>
<input type="submit"
value="Submit"
name="B1">
<input type="reset"
value="Reset"
name="B2">
</form>
A fenti forrásnyelv így jelenik meg a böngészőben:
Egy példa 4 INPUT és egy SELECT mezőt tartalmazó hipertext FORM-ra:
<form name="calculator">
<
input type="text" name="A" size="8"><select name="op" size="1">
<option>+ </option>
<option>- </option>
<option>* </option>
<option>/ </option>
</select><input type="text" name="B" size="8">
<input type="button" value=" = " onclick="compute(document.calculator)">
<input type="text" name="result" size="8"> </p>
<
/form>A fenti forrásnyelv egy (itt nem látható) JavaScript programot (compute) hív meg
és így jelenik meg a böngészőben:
Az alábbi form 5 input objektumot tartalmaz, ebből 3 checkbox tipsú és tartlamaz egy submit és egy reset tipusú inputot is. A példa egy e-mailt küld az action="mailto:valaki@valahol" által megjelölt címre. A levél törzse a válsztástól függően tartalmazza a HCl=megrendelem stb. információt. A HTML forrás nyelvet módosíthatod az alábbi ablakban: