BODY és META
Az eddigi képnél kicsit bonyolultabb, árnyaltabb fogalmazás szükséges a teljes értékû HTML lapokhoz. Ezentúl a dokumentum sablonjához a következõt ajánlom: (minta30.html)- A másik sor (<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">) pedig a magyar karakterkészlet használtára keszíti elõ a gépet.
- Lehetõség nyílik arra is, hogy egy dokumentumot állandóan frissítsünk. A <META HTTP-EQUIV="REFRESH" CONTENT=2> használata például 2 másodpercenként frissít egy weblapot! (Tõzsdei árfolyamoknál még jól jöhet.)
- Több értelme lehet egy másik webhely automatikus betöltésének. A <META HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://poszter.ini.hu/"> tag például az URL-ben megadott webhelyet hozza be 5 másodperc elteltével!
- Szintén érdemes használni a <META HTTP-EQUIV="Reply-to" content="hivatalos@tferi.hu"> taget is, ami a lehetséges válaszcímet adja meg.
Egy másik fontos elem a <BODY> és a </BODY> közé ékelt szövegtörzs nyitóeleme. Rengeteg lehetõséget tartalmaz és igen sokféleképpen lehet alkalmazni. Lehetséges paraméterei közül csak a lényegesebbek kerülnek itt felsorolásra:
- BGCOLOR="színkód" - background color; A háttérszín neve vagy kódja.
- ALINK="színkód" - active link; Az éppen aktív link(ek) színkódja vagy neve.
- VLINK="színkód" - visited link; A már meglátogatott linkek színkódja vagy neve.
- LINK= "színkód" - link's color. A még meg nem látogatott linkek színkódja vagy neve.
- TEXT="színkód" - text color; A sima (linkek nélküli) szöveg színkódja vagy neve.
- BACKGROUND="url" - Háttérkép neve (esetleges útvonallal).
- BGPROPERTIES=FIXED - Vízjel megadása. Ez így nem gördíthető!
- TITLE="szöveg" - Ez a szöveg lesz kiírva az egérmutató fölé (mintegy segítségként), ha az ablak fölé ér.
- NOWRAP="TRUE" - Szöveg nem törhető meg automatikusan. Alapértelmezés: NOWRAP="FALSE".
- SCROLL="NO" - Eltünteti az oldalsó scrollozó-csíkot. Alapértelmezés: SCROLL="YES". Lehetséges érték még: "AUTO" (automatikus).
- BOTTOMMARGIN=n - Alsó margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
- TOPMARGIN=n - Felsõ margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
- LEFTMARGIN=n - Bal oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.
- RIGHTMARGIN=n - Jobb oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.
További elemek is lehetnek a weblap fejlécében:
- <ISINDEX> : Nem tartalmaz semmi szöveget és nincsen záróeleme sem. A böngészõ számára jelzi, hogy kereshetõ (indexelhetõ) dokumentumról van szó. Javasolt helyette a "robots" META-tag használata.
- <LINK> : Jelzi a dokumentum kapcsolatát más dokumentumokkal, stíluslappal címszalaggal, stb. Kell záróelem. Paraméterei: DISABLED - megtiltja az elem használatát; HREF="url" - élõkapocs létrehozása; MEDIA="SCREEN" vagy MEDIA="PRINT" vagy MEDIA="ALL" - meghatározza a dokumentum kimenetét, lehetõségek: képernyõ,nyomtató, minden (alapértelmezés)
22.12.) Térképek
Ha egy bonyolultabb képünk van rengeteg utalással és felirattal és/vagy rajzzal, akkor célszerû egy olyan rendszert kialakítani, amelynél egyes részekre kattintva nyitódhat meg egy újabb kapcsolat. Mintaképpen nézzük meg a következõ képet és file-t: (minta31.html) (Megjegyzés: a fenti kép a PhotoShop 5.0 és a CorelDraw 9 programokkal készült!)
A dolog lényege, hogy a térképnek és a feldolgozott utalásoknak nem kell azonos file-ban lennie, de lassabb kapcsolatú gépek miatt célszerû azonos file-ba tenni a két anyagot. Az elsõ fontos utasítás az IMG SRC-ben lévõ USEMAP paraméter. Itt meg kell adni a térképfeldolgozó file, valamint a térkép helyét.
A térkép feldolgozásához kell a <MAP name="térképneve"> tag. A konkrét élõkapcsokat az <area> tag szabályozza. Paraméterei:
- shape = rect (téglalap), circle (kör), poly(polygon), default (mindenhol máshol - egyéb helyen)
- coords = koordináták. Téglalap esetén két átellenes saroké, kör esetén a középpont és a sugár, poligon esetén sorban a sarkok (az utolsó legyen azonos az elsõvel!).
- href = élõkapocs. Teljes utalás is lehet, nem csak egyszerû file.
- alt = alternatív szöveg.
- target = Megnyitandó file helye (pl.) megosztás esetén.
- title = az egérmutató hatására kiírandó szöveg.
- nohref = ennek a területnek nincsen élõkapcsa.
Minták: Kapcsolatok (4. fejezet). 10. feladat: Nem feltétlenül könnyû egy ilyen térkép (elsõ) elõkészítése, de némi próbálkozás után a fenti minta alapján sikerülhet!
22.13.) Kérdôívek a HTML dokumentumban
Egy weblapon kérdõíveket is közzé tehetünk, amelyek használata első pillantásra nem feltétlenül egyszerű!A <FORM METHOD="mód" ACTION="mit csináljak vele"> és a </FORM> közötti utasítások határozzák meg az ûrlapot.
- Az ACTION határozza meg a feldolgozást végzõ programot. Ez többnyire a kiszolgáló szerverén a /cgi-bin/ könyvtárban van, de lehet E-mailben is elküldeni. Ez utóbbi sokkal egyszerübb és nem kell hozzá semmilyen feldolgozó-program. Olvasása a legegyszerűbb szövegszerkesztövel (értsd: NotePad/Jegyzettömb) is lehetséges! Ha mindenáron egy feldolgozó-programot kell megcímezni, akkor kiterjesztése többnyire PHP vagy ASP szokott lenni. Vigyázat! Az ilyen programok írása nem feltétlenül egyszerű!
Minta levélküldésre: <ACTION METHOD="mailto:hivatalos@tferi.hu">
Minta feldolgozó-programra: <ACTION METHOD="feldolgoz.php"> - A METHOD a kitöltött ûrlap továbbítási módját határozza meg. Ez lehet GET (Hozzáfûzi az ûrlapot az url-hez - idõnként túl hosszúra nyúlhat az url!), illetve POST (adatcsomagban - biztonságos!)
- Érdemes használni POST adatküldés esetén az ENCTYPE="TEXT/PLAIN" paramétert, mert így tapasztalatom szerint minden levelezõprogram jól megérti a küldött adatokat, még az egyébként igen kényes www.freemail.hu is!
- Az <INPUT NAME="név" TYPE="típus" ALIGN="igazítás"> utasítással határozható meg egy kitöltendô ûrlapmezô.
- A NAME természetesen a mezônév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. Ez gyakorlatilag szabadon megválasztható, de javasolt a klasszikus DOS szabványait megtartani és nem túl sokat variálni a nevekkel. Tapasztalatom szerint nem minden E-mail-en elküldött ûrlap jön át tökéletesen, ha túl sok a magyar elnevezés.
- Az ALIGN természetesen igazítást jelent. Lehetséges értékei: left, right, center.
- Itt is használható a TITLE, mely itt is az egér hatására megjelenő szöveget jelenti. Tapasztalatom szerint bonyolultabb űrlapoknál sok mező rossz kitöltése elkerülhető pár TITLE tag-gel.
- A TYPE pedig az adattípus, melyet vár a beviteli mezô. Lehetséges típusok:
TEXT -szöveg, PASSWORD - jelszó (nem jelenik meg bevitelkor!), HIDDEN-rejtett (ez sem jelenik meg), CHECKBOX - kapcsoló (több is kiválasztható egyszerre), RADIO - kapcsoló (egyszerre csak egyet lehet kiválasztani), RANGE - numerikus adat, FILE - csatolandó fájl, SUBMIT - adattovábbító gomb, RESET - megsemmisítõ (inicializáló) gomb, BUTTON - egyéb nyomógomb.
Az <INPUT> utasításban további opciók is szerepelhetnek, a fô opciók értékeitôl függôen: - A VALUE kiegészítô opcióval megadott értéket veszi fel alapértelmezésként a szöveges vagy numerikus beviteli mezô. Értékét nem kell megadni.
- TEXT típusú mezô esetén egy további opció, a SIZE="méret" opció határozza meg az ablak szélességét, a MAXLENGTH="érték" pedig a maximális hosszt. Lehetséges paraméter a READONLY, mley nevébõl adódóan csak olvashatóvá teszi a file-t.
- A CHECKBOX és a RADIO típusú mezôk további paramétere lehet a CHECKED opció, mely bekapcsolja a kapcsolót - alapértelmezésként.
- A RANGE típusú mezô esetén megadható az a tartomány, melybe a bevitt értéknek bele kell esnie, a MAX="maximum" és a MIN="minimum" további opciókkal.
- A FILE típusú mezôben megadott fájl az ACCEPT kiegészítô opcióval megadott MIME módon csatolódik az elküldendô kérdôívhez. (Megjegyzés: Egy Browse nyomógombbal támogatott fájlkeresô-ablakból lehet a fájlt kiválasztani.)
- A SUBMIT és a RESET gombokhoz tartozó kiegészítô opció a VALUE="felirat", amely a gombok feliratát jelöli ki. Egyébként a SUBMIT gomb lenyomásának hatására küldi el az ûrlapadatokat a kérdôív a feldolgozó programnak, a RESET gomb lenyomása pedig az alapértékekkel tölti fel a beviteli mezôket.
- A BUTTON gombot nem feltétlenül kell használni, mivel gyakorlatilag semmilyen szerepe nincsen!
- Hosszabb szöveg bevitelére alkalmas a <TEXTAREA NAME="név" ROWS="magaság" COLS="szélesség" VALUE="szöveg"> és a </TEXTAREA> utasításpár, amely egy beviteli ablakot nyit megadott szélességben és sorban. A VALUE az alapértelmezésként megjelenítendô szöveget adja meg.
- Egy kérdésre adandó válasz egyszerû - menübõl történô - kiválasztását teszi lehetôvé a kérdôíven a <SELECT NAME="név" SIZE="sor"> és a </SELECT> utasításokkal létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> utasítással adhatjuk meg. Az OPTION fontos paramétere a VALUE="érték", ami a szöveges/karakteres mezõknél igen hasznos lehet. Érdemes használni, de nem szabad egy kérdõíven túl sok választást megadni, mert akkor tapasztalatom szerint az internetes felhasználó nem hajlandó végigcsinálni a kérdõívet.
- A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a SELECT-ben választható menüpontok egy szkrollozható menüben. Hiánya esetén, hagyományos legördülô menübôl lehet választani. A MULTIPLE opció esetén több menüpont is kijelölhetô egyszerre. Az <OPTION SELECTED> formájú utasítás adja meg az alapértelmezett választást!
- Érdekes paraméterként lehet alkalmazni az ACCESSKEY=gomb-ot, amelynél a böngészõben lehet megadni az ûrlapra ugráshoz használt ALT+gomb kombinációt!
- Használható a DISABLED is, ami az éppen aktuális elem aktív használatát tiltja le.
- Érdemes elgondolkozni az AUTOCOMPLETE="ON", illetve "OFF" használatán egyes szöveges mezőknél, persze a jelszómezőket kivéve. Nevéből érthetően ez engedélyezi a mező automatikus kitöltését, ha már a felhasználó járt ott!
- Lehetőségként felmerülhet, hogy alkalomadtán el kell rejteni a fókuszt, magyarul azt a helyet, ahová először írni lehet. (A dolog értelme: a felhasználónak muszáj legalább egyet kattintania az űrlap kitöltése előtt!)
Ezt a HIDEFOCUS="true" értékkel tehetjük lehetővé. Alapértelmezésben a fókusz látható, azaz HIDEFOCUS="false". - Itt is felhasználható, igény szerint akár elemenként is a LANG="nyelvi_kód". A hazánkban használt legfontosabb nyelvi kódok:
hu = Hungarian/Magyar en = English/Általános angol en-us = English - United States /Amerikai angol de = German - Standard/Általános német de-at = German - Austria/Osztrák német ro = Romanian/Román ru = Russian/Orosz cz = Czeh/Cseh
A következõ példa egy nem kifejezetten egyszerû kérdõívet mutat be: (minta32.html)
| <html> <head> <meta http-equiv="Content-Language" content="hu"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Tamás Ferenc</title> </head> <body> <form method="post" action="MAILTO:ferenctamas@freemail.hu" enctype="text/plain"> <h1 align="center">Tamás Ferenc</h1> <h2 align="center">A számítástechnika alapjai CD-ROM megrendelõlapja</h2> <h3 align="center"><span style="background-color: #FF0000">EZ CSAK MINTA, NEM MEGRENDELÕLAP!</span></h3> <p align="center"> </p> <div align="center"> <center> <table border="1" width="75%"> <tr> <td width="60%"> <input type="checkbox" name="Konyv1" value="ON" checked disabled> Tamás Ferenc: A számítástechnika alapjai könyv</td> <td width="15%" align="right">4.777 KByte</td> </tr> <tr> <td width="60%"> <input type="checkbox" name="PPT" value="ON" checked disabled> Kiváló minõségû bemutató PowerPoint fájlok</td> <td width="15%" align="right">300.000 KByte</td> </tr> <tr> <td width="60%"> <input type="checkbox" name="Free" value="ON"> Ajánlott ingyenes programok</td> <td width="15%" align="right">150.000 KByte</td> </tr> <tr> <td width="75%" colspan="2"> <p align="center"><b> <input type="checkbox" name="Rendel" value="Rendel" checked> IGEN, megrendelem a fenti feltételekkel a CD-ROM-ot és vállalom a kifizetést az általam választott módon!</b></p> </td> </tr> <tr> <td width="60%">Megrendelõ neve</td> <td width="15%" align="right"> <input type="text" name="Név" size="40" value="Teljes név"></td> </tr> <tr> <td width="60%">Irányítószám</td> <td width="15%" align="right"> <input type="text" name="Irszam" size="20" value="8000"></td> </tr> <tr> <td width="60%">Város</td> <td width="15%" align="right"> <input type="text" name="Város" size="37" value="Város"></td> </tr> <tr> <td width="60%">Felhasználási terület(ek)</td> <td width="15%" align="right"><select size="2" name="MitCsinal" multiple> <option selected value="Önálló tanulás">Önálló tanulás</option> <option value="Kiscsoportos tanfolyam">Kiscsoportos tanfolyam</option> <option value="Általános iskola">Általános iskola</option> <option value="Középiskola">Középiskola</option> <option value="Felsõoktatás">Felsõoktatás</option> <option value="Egyéb">Egyéb</option> </select></td> </tr> <tr> <td width="60%">Fizetési mód</td> <td width="15%" align="right"> <input type="radio" value="posta" name="Hogyan" checked>Postai utánvétellel <p><input type="radio" value="bank" name="Hogyan">Banki átutalással</td> </tr> <tr> <td width="60%"> Megjegyzés</td> <td width="15%" align="right"> <textarea rows="2" name="S1" cols="20"></textarea></td> </tr> <tr> <td width="75%" colspan="2" align="center">A CD-ROM ára <b>2000 Ft + ÁFA</b>, valamint <b>300 Ft</b> csomagolási és postaköltség! <h3><input type="submit" value="Megrendelem!" name="Elõfizetés"> Mindösszesen: <b><span style="background-color: #FF0000">2800 Ft</span></b> <b> </b><input type="reset" value="Kilépés" name="Kilépés"></h3> </td> </tr> </table> </center> </div> </form> </body> </html> |
Még valami: ne ilyen szintű legyen az Ön első kérdőíve, kedves olvasó!
Csak lassacskán haladjon a pofonegyszerűtől a nehezebb felé!
11. feladat: Készítsen egy kérdőivet, mely egy E-mail címre postázza el a látogató megkérdezett nevét! Minta: fel11.html
12. feladat: Az előző kérdőívet bővítse úgy, hogy egy újabb 4 soros szövegmezőbe lehessen beírni a felhasználó teljes postacímét! Minta: fel12.html
13. feladat: Az előző kérdőívet bővítse úgy, hogy a felhasználótől kérje be a nemét is egy választómezővel (RADIO BUTTON)! Minta: fel13.html
14. feladat: A előző kérdőívet bővítse egy legördülő mezővel, melynek segítségével a felhasználó megadhatja életkorát évtizedekben! Minta: fel14.html
0 megjegyzés:
Megjegyzés küldése