Carte Hypermedia - Neagu

Ciprian-Danie!
NEAGU, Daniela NEAGU

-
o Filme lli secvente de tip Macromedia Flash/Shockwave sunt
fo!osite pentru prezentari ce combina textul, grafica,
secventele audio ~ i video pentru realizarea aplicatiilor
interactive (figura 3-21, http://wVv.W.macromedia.com).
Figura 3-22. Web site-ul consortiufui VRML
o VRML (Virtual Reality Make-up Language) este 0 extensie a
HTML. Aceasta permite 0 realizare analoga HTML In s p a ~ i u l
3D (figura 3-22). Pentru vizualizare, se folosesc browser-e
speciale VRML sau browsere HTML cu un plug-in VRML.
Figura 3-23. Legatura catre adresa unei apficatii plug-in, in
pagini cu atribute speciale.
70
un
Ciprian-Daniel NEAGU. Daniela NEAGU
Pornind de la structura HTML de baza descrisa in sectiunea
precedenta, vom parcurge urmatoarele etape pentru a 1mbog<W
propria pagina Web folosind (preferabi!) informaiii personaiizate.
HTML ofera ase nivele de titluri (headings) implicite, numerotate
de la 1 la 6 (cea mai mare dimensiune este 1). Titlurile sunt afi:;;ate
cu caractere mai mari i eventual lntarite (figura 4-5). Etichetarea
unui titlu pe nivelul x folosete secventa: <Hx> ... </Hx> , x
avand valori de la 1 la 6.
Heading 1
Heading 2
HeadingS
Heading 4
HeadingS
Normaltexl
Figura 4-5. Tipurile implicite de tit/uri Tn HTML.
Obs: daca nu doriti sa aveti comportari anormale ale textului, nu
sariti peste nivele in document! Spre exempiu, daca incepeti cu un
titlu level-one, nu continuati cu un titlu level-three!'
Spre deosebire de editoarele de text, in fiierele HTML nu sunt
semnificative carriage returns, spatH/e, trecerile la finie noua
(Iinefeeds), deoarece sunt comprimate 'intr-un singur spatiu, de
catre browser, la a f i ~ a r e a documentului HTML. Prin urmare, nu
conteaz8 lungimea textului editat din documentul HTML.
74
Ciprian-Daniel NEAGU, Daniela NEAGU
Un exemplu de lista de definitii
NCSA
NCSA, the Natior.al Center for Supercomputing Applicallons. is located on the campus of
the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.
Figura 4-9. 0 !isla de defini(ii.
Intranle <DT> ~ i <DD> pot contine mai multe paragrafe sau alte
informal;i referitoare la defini\ie (inclusiv alte liste). Atributul
COMPACT poate fi folosit (figura 4-10) pentru termeni definiti in
cateva cuvinte (care se pot gasi pe aceeai linie cu termenul
definit):
<DL COMPACT>
<DT>-i
<DD>invokes NCSA Mosaic for Microsoft
using the initialization file defined in
<DT>-k
Windows
the path
<DD>invokes NCSA Mosaic for Microsoft Windows in
kiosk mode
</DL>
Un exemplu de lista compacta de definitii
-i invokes NCSA Mosaic for Nhcrosoft Windows using the initializallOn file defined in the
path
-k invokes NCSA Mosaic for Nhcrosoft Windows in kiosk mode
Figura 4-10. 0 /ista compacta de definifii.
78


Figura 4-14. Un exemplu de pagina personata hyperlext.
Pot exista legaturi catre anumite parti componente ale aceleai
pagini, caz In care trebuie inserate ancore' (targets) In respectiva
pagina. Ancorele sunt introduse prin tip de eticheta spec if
hypertextului, iar trimiterea respecta regulile de adresare reiativ8,
numele ancorei urmand numelui paginii delimitatorului #:
<html>
<head>
<title>My Home Page</title>
</head>
<body bgeolor="#COCOCO">
<a NAME="top"></a><eenter>
<hl>Weleome to my Page!</hl></center>
<center><font color="#FFOOOO">
<font size=+3>Hypertext</font></font>
<br>Un exemplu de legaturi HTML.</eenter>
<p>O pagina anterioara este ...
<a href="ex9.html">Pagina 9</a>
<center>
<a href= .. http://www.altavista.digital.com .. >Cauta
eu Altavista</a>
<br><a href="#top">Inceput de pagina</a></center>
</body>
</html>
Legaturile relative considera parcurgerea drumului Tntre
documentul cu hyperlegatura l?i destinatie, respctand convenlia
ca, in cazul in care trebuie sa se parcurga un folder superior
ierarhic, fiecare urcare in ierarhie sa fie semnalizata de 0 secventa
.. I .
82
63
-------------------------
Tabelele permit distribuirea aranjata a datelor (text, imagini,
legaturi, forme, alte tabele etc.) in fanduri ~ i coloane de eelule.
Sunt utile in general pentru aranjarea in pagina, d e ~ i tendinta
aetuala este aeeea de a folos! stiluri predefinite (style sheets).
Folosirea tabelelor poate erea probleme In eazul vizualizarii tn
sisteme ne-grafiee.
Tabelele pot contine 0 prima etieheta optionala caption, urmata
de unul sau mai multe randuri (rows). <tr> ... </tr>
Fiecare rand este format din una sau mai multe celule (cells) de tip
header <th> .. </th> sau date (data cells) <td> .. <ltd>
Celulele pot fi unite de-a lungul rfmdurilor sau coloanelor. Acest
model furnizeaz8 un mod limitat de control asupra formatului
paginii (spre exemplu, alinierea orizontala sau verticaia a
continutufui celulelor, stilului chenaru!ui: borders etc.)
<Table border=2 align=right>
<caption>
Un Exemplu
</caption>
<tr>
<th> a </th> <th> b </th>
</tr>
<th> C </th> <td> d <ltd>
</tr>
</Table>
Rezultatul unui astfel de cod este:
Un
Exemplu
Parametrii etichetei de definire a tabelelor:
84
o introducere prac:tica in HTML
Un exemplu de tabel cu diferite organizari ale liniilor i coloanelor,
inclusiv reuniri ale acestora (figura 4-16):
<HTML>
<HEAD>
<TITLE>Exemplu de tabel</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Un exemplu de tabel</H1>
<TABLE BORDER=2>
<CAPTION > Titlul tabelului </CAPTION>
<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Medie
</TH></TR>
<TR><TH>Inaltime</TH><TH> Greutate </TH></TR>
<TR><TD>Barbati</TD>
<TD ALIGN=CENTER> 69 </TD>
<TD ALIGN=CENTER> 150 </TD></TR>
<TR>
<TD> Femei </TD>
<TD ALIGN=CENTER> 64 </TD>
<TD ALIGN=CENTER> 130 </TD></TR>
</TABLE>
</BODY>
</HTML>
85
Ciprian-Daniel NEAGU, Daniela ________ _
</font>
</BODY>
</HTML>
Observafie: elementele care, Tn mod normal, pot
apare in sectiunea BODY nu trebuie introduse in fata
primufui element FRAMESET, in caz contrar elementul
FRAMESET fUnd ignorat.
Cadrele nu sunt intotdeauna 0 solu1ie agreata de utilizatori,
deoarece:
necesita incarcarea informatiei specifice mai multor documente,
ceea ce impune un timp de afiare mai mare, in special clientilor
ce folosesc dial-up; . ,
conduc la reducerea de afiare a continutului de
detaliu;
pot impune dificultati de navigare prin aglomerarea spa1iului
vizualizat, In special in cazul utilizarii prea multor cadre in aceeai
fereastra.
Cadrele permit impartirea ferestrei de navigare in mici ferestre,
fiecare afiand 0 anumita pagina Web. Aceasta metoda poate fi
lnsa folositoare:
in cazul navigarii 1ntr-un site Web, prin pastrarea continua a
unei referinte constante (un index sau 0 tabla de materii) intr-o
sec\iune a fereastrei pe ecran, in timp ce se parcurg diferite pagini
ale site-ului in alt cadru;
pentru pastrarea continua a unor anunturi (reclame, mesaje de
ajutor etc.) pe ecran,in timpul navigarii pe un site.
o caracteristica unica a cadrelor HTML este aceea ca necesita un
fiier HTML complet separat. Introducerea cadrelor in HTML a
condus la doua tipuri distincte de documente HTML:
,. documente frameset (layout): sunt fiiere HTML care contin
doar informatia asupra modului de impartire a ferestrei de
navigare. Nu conlin nici 0 informa,ie despre conlinutul fiecarei
ferestre: text, desene, hyperlegaturi etc.
.. documente body: sunt documentele HTML obinuite, ce con,in
toata informalia despre pagina Web, folosind etichete HTML
obinuite. Fiecare cadru are propriul body document, care produce
pagina Web vizibila Yn cadrul respectiv. in acest sens, cadrele
reprezinta 0 modalitate de a vizualiza mai multe pagini Web pe
ecran in acela; timp.
Ambele tipuri de documente (frameset i body) contin header-e
care descriu titlul paginii Web. Diferenta dintre ele este data de
88
o introducere practica in HTML
restul docurnentelor, continute In etichetele body tags sau
framesaf tags.
Sa consideram cu trei cadre. Codul ce produce 0 pagina
impaf\ita este descris de:
documentul frameset, care se "a.html";
documentele body, ce descriu continutu! fiecarui cadru, 9i se
numesc "x.html", ny.html" si "z.html".
Fil;derul a.html:
<html>
<head>
<title> A </title>
</head>
<frameset rows == *,*>
<frame sre == "x.html"
<frameset eols = *,*>
<frame sre "y.html"
<frame sre == "z.html"
</frameset>
</frameset>
</htrnl>
name == "upper">
name "lower left">
name "lower_right">
Formatul documentului frameset este similar unui body document.
Acesta incepe i se termina cu etichetele <html> </html>
contine header i title. Tn schimb, in timp ce Tn body
document, codul ce descrie continutul paginii Web este plasat
intre etichetele <body> </body>, in documentul frameset,
informalia este plasata intre etichetele drameset>
</frameset> (ce pot fi imbricate: incluse unele Tn altele).
Etichetele <frameset> declara imparlirea cadrelor, iar etichetele
<frame> sunt folosite pentru definirea cadrelor (etichetele
<frame> nu necesita perechea de inchidere </frame.
Etichetele de declarare <frameset> reprezinta primul pas in
crearea cadrelor descriu divizarea ferestrei in cadre mai mici.
Fiecare astfel de declaratie poate imparli fereastra 1n randuri sau
in dar nu in ambele in timp. Pentru oblinerea unei
ferestre , trebuie intal lmpartita fereastra in doua
randuri (top bottom), apoi randul bottom (de jos) este tmpartit in
doua coloane (loweUeft lower_right). Dimensionarea fiecarui
89
cadru poate fj realizata prin specificarea numarului de pixeii, prin
valoarea procentuala din dimensiunea ferestrei sau prin
dimensiuni relative.
Spre exemplu:
<frameset rows = 30, 33%, *, 2*>
divide fereastra in patru cadre orizontale, fiecare avand
dimensiunile enumerate in lista: primul rand are 30 pixeli Inaltime,
al doilea are 33% din lnaltimea totala a ferestrei. Folosirea
wildcard-ului n*n se refera la "restul ferestrei": deci restul ferestrei
este lmpartit in alte doua cadre, ultimul dintre Sle fiind de doua ori
mai mare decat primuL Figura 4-18 arata rezultatul acestei
declaralii (dimensiunea de 30 pixeli va fi caracterizata de marimea
ferestrei de navigare):
Figura 4-18. Un model de imparfire a unei ferestre fn cadre
orizonta/e.
Un rezultat asemanator poate fi oblinut prin utilizarea parametrului
eols = in lac de rows '" rezultand 0 fereastra descrisa ca In
figura 4-18, dar segmentata pe verticala. Oaca fereastra a fost
partajata incorect (mai ales prin specificarea dimensiunii In pixeli).
rezultatul va diferi de la browser la browser. Astfel. cel mai
avantajos mod de lucru este prin procentaj l?i eel putin un
specificator U*". in a. html spre exemplu, fereastra este
divizata 'in doua randuri egale prin rows =: * 1 * (similar cu "50% I
5 0 % 11 sau "50 % , * If ).
Observalie: fiecare cadru poate fi la randul sau lmparlit in coloane
sau randuri (daca fereastra a fost initial lmparlita in coloane,
fiecare cadru rezultat va fi imparlit apoi in randuri. Exista doua
modalitali de segmentare a cadrelor: fncuibare directa (direct
nesting) indirecta (indirect nesting).
incuibarea directa a cadrelor (direct nesting) presupune cadrele
divizate In acelal?i document, rezultand cadre distincte.
a . html descris anterior este un caz de incuibare directa.
90
>;'.
Spre exemplu, sa presupunem ca body documentul z. html
contine hyperlegatura:
<a href ;IIb.htmI" target="upper">Click here</a>
Cand se selecteaza hyperlegatura (figura 4-19) in cadrul din
dreapta (unde este localizat z. html). cadrul de sus se va
schimba din x. html in b. html. Deci, prin alegerea unei
hyperlegaturi Intr-un cadru, se poate actualiza un alt cadru fara
modificarea celorlalte. Analog, destinatia poate fi aleasa
"ioweUeft" sau "(ower_right" pentru actualizarea cadrelor din
partea de jos a ferestrei. Pentru modificarea tuturor cadrelor de jos
trebuie folosita Yncuibarea indirecta cu specificarea destina1iei
"lower".
target="upper" target="lower Jeft" target="'ower _right" target="lower"
Figura 4-19. Destinafii pentru b .htm!.
Unui frame i se poate da orice nume: 1n mod normal. se
evidentierea poziliei de pe ecran (ca mai sus) sau a functiei
("main", "contents" etc.). Exista l?i nume de ancore definite implicit,
care nu trebuie folosite in eticheta <frame> (ineep eu "_"):
"_self
ll
actualizeaza cadrul ce-l contine (este implicit daca nu
se specifica nici un target);
"yarent II actualizeaza cadrul parinte daca hyperlegatura
este intr-un cadru derivat (spre exemplu in cazul incuibarii
indirecte, "loweUeft" "lower_right" sunt cadre derivate ale
cadrului "lower");
" _top" actualizeaza intreaga fereastra, indiferent de modul de
partajare;
" blank" creaza 0 fereastra noua.
In interiorul etichetei <frameset ... > pot fi utilizate combinalij
intre parametrii:
rows = sizel, size2, ... , size n
Proprietatea fmparte fereastra sau cadruf parinte fn n
randuri. Dimensiunea poate fi specificata fn pixeJi,
procent din fnaltimea ferestrei (%), sau dimensiuni
relative (*).
eols = sizel, size2 I , size n
92
Daca un browser ce nu detecteaz8 cadre deschide 0 fereastra ce
declaratii frames, rezultatul este 0 pagina alba (versiunile
actuale ale browser-elor Netscape Navigator i internetExplorer nu
fac parte din aceasta categorie). Tn astfel de cazuri este
preferabila includerea etichetelor <noframes> .. </noframes>
(ignorate de celelalte browser-e). Unii proiectan1i Web folosesc
aceste etichete pentru apelarea unor copii ale site-ului ce nu
utilizeaza cadre este 0 varianta dificil de intretinut), in timp ce
In marea majoritate a cazurilor se insereaza un mesaj prin care se
ca se folosasc cadre sau sa faca 0 tegatura la body
documentul principal. Etichetale <noframes> sunt funclionaie
doar in cadrul creat de <frameset> l?i nu pot fi folosite "intr-un
body document.
Implementarea cea mal obil?nuita a acestei etichete Intr-un
frameset document aste urmatoarea:
<frameset ... >
<frame ... >
<noframes>
This document requires a frames-capable browser.
We apologize for the inconvenience!
</noframes>
</frameset>
Chiar daca nu a1i creat Inca forme Web, acestaa au putut deja fi
folosite ca utilizatori Web (In cazui c8utarilor pe Internet sunt
prev8zute, spre exemplu, forme care permit personalizarea cheilor
de c8utare; multe site-uri Web cer informatii de inregistrare; alte
site-uri au implementate linii chat). Formete Web (sau formele
HTML), reprezinta cel mai simplu mod de a transforma 0 pagina
Web, dintr-o publicatie on-line, Tntr-un instrument interactiv.
o forma HTML este 0 sectiune a unui document Web In care
utilizatorul poate introduce informatii. Acestea sunt trimise catre
serverul Web, unde pot fi inregistrate intr-o baza de date, pantru
utilizari ulterioare, sau pentru controlul informa\iilor returnata
utilizatorulul.
94
o introducere practica In HTML
Formele HTML pot realiza:
introducerea de text sau alegerea dintr-o paleta de optiuni;
colectarea mai multor elemente de informatie;
restrangerea raspunsurilor utilizatorului la un set de valori bine
definite;
structurarea informatiei furnizate de utilizator pentru procesarea
automata;
implementarea GUls (Graphical User Interfaces) pentru aplicatii
de retea sau pentru navigarea pe site-uri Web;
Formele HTML nu pot furniza 0 interfata utilizator complet
interactiva, ci doar construiesc 0 interogare sau un mesaj de
raspuns. Nu exista modalitati de a controla prin forme informalia
introdusa in Cmpurile text, ci doar de a furniza 0 modalitate de
introducere a textului utilizatorului. Manipularea informatiei
introduse de utilizator in forme necesita, in general, programe CGI
special concepute pentru a 0 procesa.
Se realizeaza prin etichete HTML (prin adaugarea i selectarea
proprietali1or unei forme, folosind un instrument de creare a
paginilor HTML, de tipul Netscape PageComposer sau Microsoft
FrontPage, sau chiar utilizand un simplu editor text).
[QI?!iXemplu de forma HTML =oJ
1ntr-o sursa HTML, 0 forma este semnalizata prin eticheta:
<FORM> .. <!FORM>. Daca avem un program ce va procesa
datele trimise, de forma (form handler, eel mai ades un
program CGI), se va adauga formei atributul ACTION"," uri"
pentru a indica pozi1ia programului i atributul METHOD=reqtype
pentru metoda de transmisie.
Observatie: Tn toate exemplele care urmeaza,
atribute/a optiona/e sunt semnalizate prin paranteze/e
patrate [ ] i se f%sese pentru a suplimenta
proprietafile unei forme.
Aproape toate forme/e trebuie sa fie descrise prin
atributu/ NAME (identificator a/ eomponentei formei).
Un exemplu de ereare a unei forme simple este dat in eele ee
urmeaza (figura 4-20):
<FORM ACTION="register.cgi" METHOD=POST>
95
<DL>
<DT>Your full name:
<DD><INPUT
JVlA_,,{LENGTH= 18 0 >
<DT>Your e-mail address:
<DD><INPUT TYPE=TEXT NAME="email"
MAXLENGTH=180>
</DL>
<P><INPUT TYPE=SUBMIT VALUE=HRegister">
</P></FORM>
SIZE=60
SIZE=60
Etichetele <FORM> </FORM> grupeaza campurife de
introducere impreuna cum unde vor fi procesate.
Etichetele specifice unei liste de definitie impun 0 mai buna
structurare a modului de i'mpartire a specificatiilor continutului
dialogului cu utilizatorul. Etichetele <P> .. </P> impun ca butonu!
submi t sa fie tratat ca buton separat.
Your full name:
Your e-mail address:
I
Figura 4-20. 0 simpla forma HTML.
Obsetvafie: Cele mai multe etichete HTML (ca <p>,
<PRE>, <BR> I <DL pot fi utilizate Intre <FORM> i
</FORM> pentru contro/ul aspectului formei.
Folosirea etichetelor <DT> i <DD> in interiorul unor
liste (marcate prin <DL> .. </DL conduce la 0 mai
clara identificare a asocierilor text de descriere a
forme/or. Tn general, Insa, se prefera etichete
<p> .. </P> pentru a grupa forme, i etichete <BR>
pentru a Ie separa.
Tn cadrul etichetelor <FORM> .. </FORM> sunt valabile urmatoarele
etichete HTML (HTML Form Tags: components ale formei):
96
o introducere practica In HTML
<INPUT [TYPE=TEXT] NAME = " text-identificator"
[SIZE=nn] [MAXLENGTH=l1n} [VALUE="default text
ll
]>
o eticheta INPUT cu atributul TYPE=TEXT furnizeaza utilizatorului
un prompt pentru 0 singura linie de text. Eticheta trebuie sa aiba
atributul NAME. Atributul SIZE se folosel1te pentru specificarea
numarului de caractere care sa caracterizeze dimensiunea
ferestrei de introducere. Atributul MAXLENGTH se folosete pentru
limitarea numarului de caractere de intrare. Daca valoarea
WvCLENGTH este rna; mare deceM valoarea SIZE, atunci browser-
ul va permite derulare (scroll) pe textul de intrare. Atributul VALUE
se pentru afil1area unui text de intrare implicit, ce va fi
afiat odata cu forma va putea fi modificat prin editare. Tn
exemplul anterior (figura 4-20) este ilustrat un caz de utilizare
INPUT TYPE=TEXT.
I INPUT TYPE=SUBMIT
<INPUT TYPE=SUBMIT [NAME= "buttol1-id"]
[VALUE="Button label text"]>
Eticheta INPUT cu parametrul TYPE=SUBMIT furnizeaza un buton
care trans mite informatia din forma completata catre adresa URL
data ca atribut ACTION in eticheta <FORM>. Informa1ia este
transmisa prin tipul de apel HTTP specificat de atributul METHOD al
formeL
o forma poate avea mai multe butoane SUBMIT, identificabile prin
valoareadin atributul optional NAME. Atributul NAME va fi transferat
prin datele forme; la apelul programului CGI pentru a permite
mecanismului de procesare a datelor formei sa determine ce
buton a fost folosit de utilizatof. Tn exemplul anterior (figura 4-20)
aste ilustrat un caz de utilizare a unui buton SUBMIT
[INPUT TYPE=RESET ._. __ ..

<INPUT TYPE=RESET [VALUE="Button label text"]>
o eticheta cu parametrul TYPE=RESET furnizeaza un buton care
terge forma seteaza con1inutul acesteia la valorile ini1iale.
Spre deosebire de cele mai mulfe etichete, In care
atributul NA. .. m este ob/igatoriu, in cazul INPUT
TYPE=SUBMIT acesta este optional, iar Tn cazul INPUT
TYPE=RESET nu exista.
Tn continuare vom exemplifica (fjgura 4-21) un simpiu buton de
reset.
97
Ciprian-Daniel NEAGU, Daniela N_E_A_G_U ____________ _
<FORM ACTION="choose.cgi" METHOD",POST>
<P>E-mail address: <INPUT TYPE=TEXT NAME = "email II
SIZE=60 </p>
<P>Please add me to the mailing list. </p>
<P> I am: </p>
<OL>
<LI><INPUT TYPE=RADIO NAJvIE="employer"
VALUE = "private " chECKED>Employed in the private
sector
<LI><INPUT TYPE=R)lJ)IO NP,ME="employer"
VALUE="public">Employed in the public sector
<LI><INPUT TYPE=RADIO NA.ME="employer"
VALUE="self">Self-employed
<LI><INPUT TYPE=RADIO NAME="employer"
VALUE="unemployed">Unemployed
</oL>
<P><INPUT TYPE=SUBMIT VALUE="Continue">
<INPUT TYPE=RESET VALUE="Clear form">
</p>
</FORM>
E-mail address:
Please add me to Ule mailing list.
lam:
1. r. Employed in the private sector
2. r Employed in the public sector
3 r Self-employed
4. r Unemployed
Figura 4-21. Exemplu de forma cu butoane radio.
----------------.. -- I
! INPUT TYPE=RADIO I
<INPUT TYPE=RADIO NAJv'lE="radio-set-id"
VALUE = "choice-id" [chECKED]>
98
o introducere practica Tn HTML
--------------._-------'-------
Este 0 forma ce permite utilizatorului sa aleaga dintr-un set de
alternative. Fiecare buton radio din setul de alternative din forma
are valoare a atributului. Evident, un singur buton radio
poate fi selectat 0 singura data (oPliune unica). Atributul VALUE
specifica datele transmise. Butoanele radio trebuie sa foloseasca
atribut NAME dar sa aiba diferite atributele VALUE. Atributul
CHECKED marcheaza un buton radio din lista, ca optiune implicita.
Tn exemplui anterior (fjgura 4-21) am folosirea
butoanelor radio ca seleclie de tipul 0 varianta din mai multe.
I INPUT TYPE=CHECKBOX
<INPUT TYPE=chECKBOX NA,,\1E=" box-set-id"
VALtJE="choice-id" [chECKED) >
o eticheta INPUT cu atributul TYPE=CHECKBOX of era utilizatoru/ui
posibilitatea de a alterna intre "on" "off". Este oarecum
similar butoanelor radio, cu ca, oricate componente
checkboxes pot fi selectate sau nu. Un checkbox selectat (" on ")
la transmiterea formei li va transmite propria valoare VALUE
pentru componenta respectiva. Mai multe componente
checkboxes pot fi grupate (ca butoanele radio), prin utilizarea
atribut NAME. Datele transmise in formaa sunt cele
specifice componentelor "on" (selectate), separate prin virgula.
Pentru 0 lista de checkbox, trebuie sa se includa pentru fiecare
op1iune un text care sa expliciteze semnificalia a!egerii.
Tn continuare vom exemplifica (figura 4-21) utilizarea
componentelor checkboxes.
<FORM ACTION="feedback.cgi" METHOD=POST>
<P> Please tell us what you thought of this Web
site. Select the checkboxes which you agree with:
</P>
<UL> <LI><INPUT TYPE=chECK.BOX NAt"lE="opinion"
VALUE = "understandable II >
The text was understandable.
<LI><INPUT TYPE=chECKBOX NAME = II opinion II
VALUE="navigable"> I found it easy to find my way
through the Web site.
<LI><INPUT TYPE=chECKBOX NAME = II opinion"
VALUE = " stylish" >
I was impressed by the style and presentation.
</UL>
<P><INPUT TYPE="HIDDEN" NAME="pages"
VALUE="brochure">Please add any other comments:
<TEXTAREA NAME="feedback" ROWS=5 COLS=40>
I think your brochure is:
99
Ciprian-Daniel NEAGU. Daniel_8_N_E_A_G_'_U _____ .
</TEXTAREA>
</P>
<P>
<INPUT TYPE=SUBMIT VALUE="Send comments">
<INPUT TYPE=RESET V}l..LUE= "Clear form" >
</p>
</FORM>
Please tell us what you thought of this Web site. Select the checkbozes which you agree wiih'
r The text was understandable.
r I found it easy to find my way through the Web site.
r I was impressed by the style and presentation,
II think your brochure is:
pre,." odd "'" ""'" ,--L
Figura 4-22. Un exemplu de utilizare a componente/or:
checkboxes, hidden fields, text area.
TYPE=IMAGE
<INPUT TYPE=IMAGE NAME="image-id" SRC="image--url"
[ALIGN=alignment] >
Eticheta de forma INPUT TYPE=ItFlAGE este similara etichetei
IMG. Folosirea ei are ea rezultat a f i ~ a r e a imaginii de la locatia SRC
cu optiunea ALIGN. 0 a stfe I de forma are doua caraGteristici ce 0
fac utMt
ia die pe image, date Ie formei completate sunt transmise
analog unei componente INPUT TYPE=SUBMIT;
permite utilizatorului sa aleaga 0 portiune din imagine.
Coordonatele in pixeli ale punctului ales de utilizator, identificatorii
image-id.x i image-id.y (abscisa este transmisa ca fiind continutul
atributului NAt'VJE. x iar ordonata ca NAME. y). sunt transmise
impreuna cu date!e formeL
100
______ O_i_llt_ro_ducere practica In HTML
Exemplul urmator ilustreaza folosirea unei componente INPUT
TYPE=IMAGE ca un buton Submit personaiizat (figura 4-23) dar,
In general, multe site-uri folosesc caracteristica referitoare la
coordonatele in pixeli pentru a prezenta meniuri grafice, tabele de
butoane sau Mrti de navigare in site. Comportarea este similara
etichetei referitoare la harta de imagini <IMG ISMAP>.
<FORM ACTION="select.cgi" METHOD=GET>
<H2>Choose which software to download:</H2>
<P><SELECT NAME="package" SIZE=3>
<OPTION VALUE="text" SELECTED>Text viewer
<OPTION VALUE="image">Image viewer
<OPTION VALUE="movie">Movie player
<OPTION VALLTE=" audio" >Sound player
<OPTION VALUE="editor">Media editor
</SELECT>
<SELECT NAME=" p latform">
<OPTION>IBM pc compatible
<OPTION>Macintosh (68000)
<OPTION>Macintosh {Power pc}
</sELECT>
<SELECT NAlVlE="options" MULTIPLE>
<OPTION>License
<OPTION>Media
<OPTION>Documentation
</SELECT>
</p>
<P>
<INPUT TYPE=" IMAGE" NAME="coords"
SRC="download.gif">
</p>
</FORM>
Figura 4-23. Cutii de selecfie i butoane imagini.
101
f!NPUT TYPE=HIDDEN
---------1
<INPUT TYPE=HIDDEN NAME="data-id" VALUE="hidden
form data" >
Eticheta INPUT TYPE=HIDDEN este 0 forma neuzuala, In sensu I
ca nu apare in forma HTML afil?ata, fiind 0 convenlie prin care
proiectantul trimite atributul VALUE ca data a formei, in special
daca programul de prelucrare este specificat In atributul ACTION
al mai multor forme.
Un exemplu (figura 4-24) al utilizarii componentei INPUT
TYPE=HIDDEN este i1ustrat in continuare:
<FORM ACTION="comments.cgi" METHOD=POST>
<P>In order that we may continue to provide a
high quality World Wide Web service, please take
the time to fill in this form.</P>
<DL>
<DT>Your surname (family name) :
<DD><INPUT NAME="surname" SIZE=20 MA,XLENGTH=60>
<DT>Your first name (given name) :
<DD><INPUT NAME="forename" SIZE=20 MAXLENGTH=60>
</DL>
<P>Your title:
[<INPUT
[<INPUT
[<INPUT
Mrs. ]
TYPE=RADIO NAME="title" VALUE="Mr"> Mr.]
TYPE=RADIO NAME="title" VALUE="Ms"> Ms.]
TYPE=RADIO NAME="title" VALUE="Mrs">
[<INPlJT TYPE=RADIO NAME="title" VALUE="Miss">
Miss. ]
[<INPUT TYPE=RADIO NAME="title" VALUE="Dr"> Dr.]
[<INPUT TYPE=RADIO NAME="title" VALUE",""> Other.]
</P>
<P>Please tell us what you thought of this Web
site. Select the checkboxes which you agree with:
</P>
<UL>
<LI><INPUT TYPE=chECKBOX
VALUE = "understandable " >
The text was understandable.
<LI><INPUT TYPE=chECKBOX
VALUE = " navigable " >
NAME="opinion"
NAME = "opinion"
I found it easy to find my way through the Web
site.
<LI><INPUT
VALUE="stylish">
TYPE=chECKBOX NAME = "opinion"
I was impressed by the style and presentation.
102
I
-----------------
TEXT A REA
<TEXTAREA NAME = "text-id" [COLS=nn) [ROWS=nn] >
default text</TEXTAREA>
Eticheta TEXTAREA prezinta 0 fereastra pentru editare de text pe
ma; multe linii (este un container HTML). Textul con,inut intre
etichetele <TEXTAREA> i </TEXTAREA> apare ca fiind un
continut implicit cazul prezentat In exemplul aferent figurii 4-22,
pentru care continutul implicit nu a fost inca modificat de utilizator).
Observatie: un container HTML este 0 pereche de
etichete, deschisa <AICl> 9i inchisa </AICI>, a care;
actiune se ap/ica textului cuprins intre etichete.
<SELECT NAME="select-id" [SIZE=nn) [MULTIPLE] >
<OPTION [VALUE="choice-id"] [SELECTED]>lst choice
<OPTION>2nd choice
<OPTION> ...
</SELECT>
Eticheta SELECT este 0 alternativa a butoanelor radio i
checkboxes, prezentand 0 lista de optiuni intr-o fereastra cu
defilare (scrolling window). Dad'! este folosit atributul MULTIPLE,
componenta SELECT este comparabila cu checkboxes, in sensu I
posibilita1ij selectarii mai multor variante. Atributu! SIZE specifica
numarul variantelor vizibile (controland deci dimensiunea ferestrei
de afiare). Atributul VALUE al fiecarei optiuni OPTION selectate
este transmis prin datele forme; pentru procesare (daca atributul
este omis, se transmite continutul optiunii selectate). Daca se
selecteaza mai multe optiuni, atributele VALUE sunt transmise
impreuna intr-o lista, separate prin virgula. In exemplul aferent
figurii 4-23 este tratat un caz al utilizarii etichetelor SELECT.
Formele HTML furnizeaza 0 modalitate simpla de a permite unui
utilizator de browser web sa transmita informatii catre site-ul Web
vizitat, sa caute eficient informa\ij l?i sa in Internet.
Toate acestea, cu observatia ca este absolut necesar, din partea
proiectantului Web, sa caute, sa aleaga i sa implementeze l?i
mijloace de securitate adecvate dimensiunii l?i functiunii
proiectului).
104
;:'-IHAL, S,) studiHm
de in IJrrnf:ttoap:o<J ,""'''' "'R"n,;;"
parfi a

" " - " " " " - " " - " - - - " - - - " - - - ~ - - - - - - - - - - - - - - - ~ ~ -
Aplicatii JavaScript pentru dinamizarea paginilor HTML
in scopul dinamizarii paginilor HTML la ac1iunile utilizatorului, ,
trebuie folosite tratarile de evenimente JavaScript, deoarece codul
JavaScript reactioneaza la evenimente.
Sa eonsideram urmatorul exemplu, care trateaza evenimentul
on Click:
<form>
<input type=="button" value="Click me"
onClick="alert('Yo')">
</form>
(a) (b)
Figura 5-2. Apelul unei functii alert JavaScript (b) prin
tratarea unui eveniment relativ fa un buton HTML (a).
in exemplul de mal sus, a fast dec/a rat ca element de forma HTML
un buton. Noutatea consta in apelul funcliei alert () in cadrul
etichetei <input>, la deteetarea evenimentului onClick. Acest
eveniment d e f i n e ~ t e acliunea care va fi executata daca butonul
este apasat. Functia alert permite deschiderea unei ferestre de
atenlionare (figura 5-2b). avand ca mesaj afiat, parametrul de
ape!.
Observafie: In aeest caz, apeluJ codului JavaScript
nu a fost realizat In interiorul etichete/or <script>,
cum se procedeaza In mod uzua/.
o atentie speciala trebuie acordata !ilhilimelelor folosite pentru
semnalizarea parametrului de tip text. In apelul funcliei alert apar
ghilimelele simple: 'Yo'. in schimb, la apelul functiei
document. wri te () , au fost folosite ghilimelele duble. De fa pt.
pot fi foiosite, pentru specificarea parametrilor de tip text, oricare
din cele doua tipuri de ghilimele. In interiorul funcliei alert apar
ghilimelele simple. deoarece aceasta este deja parametru apelului
onClick="alert ('Yo I) ", motiv pentru care au fost folosite de
fapt. imbricat, ambele tipuri.
107
Ciprian-Daniei NEAGU, Daniela NEAGU
Un apel care ar folosi doar un singur tip, de forma:
onClick="alert("Yo")", ar conduce la confuzii de
interpretare, in sensul identificarii parametrilor: spre exemplu,
unde incepe unde se termina parametrul de ape! al
evenimentului onClick. Acesta este motivul pentru care cele
doua tipuri de ghilimele trebuie sa alterneze, indiferent de ordinea
apariliei. Prin urmare, apelul: onClick= I alert ("Yo") , este la
fel de corect!
Marea majoritate a codurilor JavaScript inserate in documentele
HTML se bazeaza pe functii. Ideea este general valabita in cazul
functiilor: motivalia utilizarii functiilor este aceea de a grupa mai
multe comenzi, intr-o secvenla care sa fie folosita repetat, in mai
multe secliuni ale documentului.
Welcome to my homepage!
This is JavaScript!
This is JavaScript!
This is
Figura 5-3. Apelul repetat al unui segment de scriere
JavaScript.
Sa consideram exemplul urmator, care un anumit text de
trei on (figura 5-3):
<html>
<script language=",JavaScript II >

</script>
</head>
<body>
<form>
<input type=Hbutton" value="Calculate"
onClick="calculation()">
</form>
</body>
</html>
110
(a)
Figura 5-4. Apelul unei funcfii JavaScript de catcut.
Ciprian-Daniel NEAGU. Daniela NEA.G=-..::..U ___________ _
<center>
<img src="ruler.gif"
name="pic4"
height=15>
<p>
<a href=''http://www.stefan.org">My homepage</a>
</center>
</body>
</html>
images-{O]
elements[O]

Name: ...... !,
e-Mail: ,.\_ ...
f(Jrms[O}
elements{ lj
/images{l}
.............. .L.J . IJ .i ..I.]
My homepage -""linksfO]
Figura 5-5. Un exempfu de document HTML pentru ierarhia
JavaScript.
Documentul conline doua imagini, 0 hyperlegatura !1i 0 forma cu
doua text !1i un buton. Din punctul de vedere al ierarhizarii
JavaScript, fereastra browser-ului este un obiect window. Acest
obiect contine anumite elemente (de exemplu, bara de stare). Intr-
o astfel de fereastra, poate fi incarcata 0 pagina HTML. 0 astfel
de pagina este considerata un obiect document. Cu alte cuvinte,
obiectul document reprezinta documentul HTML curent, incarcat
de browser. Un obiect document este caracterizat de proprietati
specifice, spre exemplu culoarea de fundal a paginii. Toate
obiectele HTML (hyperlegaturi, forme, imagini inserate) sunt
considerate proprietali ale obiectului document. ierarhia
JavaScript creata pentru documentul descris anterior este
evidentiata in figura 5-6.
112
Aplica\ii JavaScript pentru dinamizarea paginilor HTML
docmnent
hiM!.- page
links[O]
th.link
elements[O]
Figura 5-6. lerarhia JavaScript a unui document HTML.
Din ierarhia prezentata in fjgura 5-6 putem identifica numele
implicit al obiectelor documentului HTML Spre exemplu,
adresarea imaginii din document se obtine astfel: plecand din
varful ierarhiei, primul document este document. Pentru a ajunge
la prima imagine a documentului, trebuie sa accesam vectorul
images, deci images[O]. Prin urmare, accesul prin cod JavaScript
a imaginii din document se realizeaza cu documenUmages[O}.
Pentru a putea folosi ce a introdus utilizatorul in primul element al
formei HTML. va trebui. similar, sa identificam calea de accesare a
acestui element, din ierarhie. Pornind sin va rfu I ieramiei, yom
urma calea catre primul element prin vectorul elements, prin
urmare: document.forms[O}.elements[O]. Ramane sa identificam
acea proprietate a unui element text al unei forme HTML care
conline valoarea lui: value. Tn concluzie, Iinia de cod care preia
valoarea introdusa de utilizator in elementul cu semnificatia Name
este:
name= document.forms[O] . elements [0] .value;
~ i r u l respectiv este memorat in variabila JavaScript name. Putem
sa folosim aceasta variabila in continuare, spre exemplu pentru a
returna 0 formula de salut: alert ("Hi " + name).
Cu toata simplitatea ~ i claritatea ierarhiei Javascript. ar putea fi
destul de greoi sa adresam prin indici numerici componentele unui
document HTML cu multe elemente, spre exemplu:
document.forms[3}.elements[17}. 0 astfel de problema se rezolva
prin atributul unic NAME al fiecarui obiect HTML, Spre exemplu, In
documentul considerat:
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
113
Clprian-Daniel NEAGU, Daniela NEAGU
Prin urmare, forms[O] poate fi accesata prin myForm. Putem
astfel sa inlocuim:
name= document.forms[O] . elements (0] .value;
cu:
name= document.myForm.name.valuei
Modalitatea de accesare devine astfel mai ul?oara 9i personalizata,
ma; ales in cazul paginilor cu multe obiecte, respectand insa cu
strictete denumirea atribuita obiectelor (nu se poate, spre
exemplu. folosi myform Tn loc de myForm). Proprietatile obiectelor
HTML, accesate prin ierarhia JavaScript pot fi folosite atat In
operalii de atribuire, citire sau calcuL Spre exemplu, in momentul
crearii unui document, se poate atribui 0 valoare initiala implicita
unui element text al formei:
<form name=="myForm">
<input type=="text" name=" input " value=="insert
your text">
<input type="button" value=="Write"
'Yo!' i ">
Tn codul descris In continuare vom identifica 9i vom folosi 0 mare
parte a propriebWlor unor obiecte HTML. Rezultatul este descris in
figura 5-7.
114
Figura 5-7. Un exemplu de control al proprietatilor obiectelor
unui document HTML prin functH JavaScript.
Aplicatii JavaScript pentru dinamizarea paginilor HTML
<HTML>
<HEAD>
<TITLE>Obiecte JavaScript</TITLE>

</script>
< I HEAD >
<body bgcolor=lightblue>
<form name="myForm">
<input type:="text" name="myText" value="insert
your text">
<input type="button" name="buttonl" value="Button
1"
onClick="first()">
<br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Button
2"
onClick="second()">
</form>
<p><br><br>
115
LXeschi{/6'rn:,--;
Gi:1
fie
tli;'fiiz:titor:
Similar ideii de ierarhizare a elementeior unei pagini Web, cadrele
sunt interpretate pe baza principiu. Fie 0 fereastra HTML
impai\ita de doua cadre:
<htrrtl >
ro\vs=H50%,50%1l>
<frame src"" " paqel, htm" name"''' framel" >
<frame src=H
</frameset
< >
ierarhia JavaScript pentru cele doua noi obiecte este urmatoarea:
parent
children
Figura 5-10. lerarhia JavaScript pentru cadre HTML
La baza ierarhiei se afia fereastra browser-ului. obiectul parinte
\'lindow. Cele doua cadre reprezinta descendentii acestuia in
ierarhie, caroia Ie sunt atribuite identificatorii unici framel
frame2. Prin intermediul acestora, informatia poate fi accesibila
intre diferitele elemente ale ierarhiei.
Una dintre problemele des Intalnite in gestionarea informaiiei din
cadre este deschiderea, Tntr-unul din cadre, a unei pagini a care:
adresa se ca hyperlegatura Tntr-un alt cadru ai ierarhieL
Este practic cazul meniurilor verticale sau hai\ilor de site aflate
Tntr-un cadru, Tn timp ce un alt cadru este folosit pentru
vizualizarea documentului cerut.
Practic, apar urmatoarele cazuri:
.. Cerere de accesare Intr-un obiect parinte a informatiei unui
cadru descendent;
" Cerere de accesare Tntr-un obiect descendent a informatiei
dintr-un obiect parinte;
,. Cerere de accesare intr-un obiect descendent a informaiiei
dintr-un alt obiect descendent
Din punctul de vedere a! ferestrei (identificata cu obiectul parinte),
cele doua cadre descendente se numesc framel *?i frame2, iar
legatura dUre acestea este directit Cu alte cuvinte, un script din
119
Ciprian-Daniei NEAGU, Daniela NEAGU
fereastra parinte (pagina care cadrele) poate accesa
orice informatie din cadrele descendente folosind direct numele
acestora 5-11). Spre exemplu, putem scrie:
frame2. document. write ("A message from the parent
window.") i
browser
window
/
'" "':ame2
framel
pageJ.htm
frame2
page2.htm
Figura 5-11. Accesarea informafiei din cadreJe descendente.
Sunt cazuri in care se accesarea, In sens invers, a
informatiei din documentul parinte intr-un cadru descendent, spre
exemplu daca se renuntarea la divizarea in cadre la un
moment dat. Eliminarea cadrelor reprezinta de fapt incarcatea in
fereastra parinte a unui alt document HTML, in locul celui care
define!?te cadrele curente. Acest document, ce trebuie inlocuit,
este de fapt documentul pannte. Fereastra parinte se acceseaza
din cadrele descendente (figura 5-12) folosind cuvintul cheie
parent. Pentru eliminarea cadrelor, spre exemplu, este necesara
utilizarea obiectului location al ferestrei parinte, cafuia trebuie sa Ii
atribuim, la /ocation.href, 0 alta adresa Web. Comanda finala va fi:
parent.location.href= ''http:// ... ";
framel
pagel.htm
browser
window
frame2
page2.htm
Figura 5-12. Accesarea informatiei din fereastra parinte Tn
cadrele descendente.
Ultimul caz de acces este aceta al utilizarii proprieta1i1or unui
obiect descendent de un script aflat lntr-un alt obiect descendent,
spre exemp!u, page1.htm. Din figura 5-13 se observa ca nu
exista 0 legatura directa intre cele doua obiecte.
120
NEAGU. Daniela NEAGU
Un script CGi (Common Gateway interface) este un program
Incarcat pe un server Web executat ca raspuns la 0 cerere a
unui utiiizator. Un fi:;;ier script CG! este scris intr-un limbaj de
programare astfel 'incat sa fie com pilat pentru a rula pe server sall
sa fie interpretat de un interpretor de pe server.
Printre iimbajele utilizate pentru scrierea unor script-Uii CGI
regasim:
.. limbaje compilate: C, C++, Ada;
II limbaje interpretate: Perl, JCL (Job Control l.anguage: spre
exemplu, limbajui de comanda unix sh).
Un script CG! este executat daca 0 eticheta de ancorare <A ...
sau 0 eticheta imagine <II'1G ... > indica spre un fil;;ier script CGI
nu catre un fiier obinuit. Statutul acestui ca fimd un script
CGi sau doar un fh;;ier HTML ests determinat In funqie de pozitia
fizica a pe server.
Observatie: fiierul script aste plasat pe aceeai
maina pecare ruleaza server-vI Web, i nu local, pe
maina adresata.
mod obi9nuit, fi!?ierele script CGI se gasesc pe server-ul Web,
in directorul cgi - bin. Localizarea exacta a acestui director pe
ma!?ina server este determinata de administratorul Web al
respectivu!ui sistem. Locaiizarea :;;i controlul directorului - bin
este determinata de administratorul Web, pentru a preintampina
eventuale probleme de securitate ce pot apare daca programe
arbitrare ar avea permisiunea sa fie executate de oricine
acceseaZ8 respectiva ma:;;ina. Exista astfel posibilitatea ca anumiti
administratori Web sa nu permita crearea unor script-uri CGI pe
m8f?ina Web gestio nata oricarui tip de utilizator al respectivului
sistem,
1. Utilizatorul a introdus informatia in forma HTML i aCiioneaz8
butonul Submi t (dedarat ca element al formei, Intre etichetele
<FORM> .. /FOR!'-b). Butonul este 0 legatura la aplicat!a CG!
de pe server.
2. Browser-ul foloS8f?te metoda POST I GET pentru a transmite
date!e formei cafre server.
122
1U
Aplicatii CG!

3. Informatia este transmisa prin Internet sau Intranet pana ia
serverul Web, care 0 transfera mai departe aplicatiei CGI
fo!osind stdin a! acesteia.
4. Aplicatia CGI proceseaza datele, dupa care genereaza
raspunsu! In format HTML i II transmite Tnapoi spre client
(serverul Web trebuie sa citeasca dispozitivul standard de
stdout al aplicatiei CGI).
5. Browser-ul Web interpreteaza codul HTML receptionat
rezultatu! pe ecranu! client. in general, HTML
de raspuns contine notificatii asupra procesarii datelor.
Tn mod ideal, un script urmeaza (folosind rutine
corespunzatoare pentru do-initialize, do-process do-
output):
1. Declaratii de Inceput ale programului.
2. Programul apeleaza do-initialize.
3. Programul apeleaza do-process.
4. Programul apeleaza do-output.
5. programu!ui.
Eticheta HTML care permite executarea scriptului CGI avand ca
nume de dynamic_page pe server-ul www.mc . com este:
<A HREF= .. http://www.mc.com/cgi-bin/dynamic_page">
Dynamic page
</A>
Tn momentul Tn care server-ul Web proceseaza un apel de fiier,
daca ace! se in directorui cgi - bin atunci, in
conditiile in care este marcat ca executabil, script-ul va rula
pe server. Daca nu este executabil, se va genera un mesaj
de eroare.
Ca rezultat al executarii unui script, este posibila une!
pagini HTML sau a unei imagini. in plus, poate accesa Tn
timpul execu1iei varia bile de mediu pentru a utiliza informa\ii
auxiliare despre procesuf pe care trebuie sa il realizeze. Prima
linie a datelor returnate trebuie sa fie:
ITiPUI datei returnateIText ---'------'1
... '"_. -. ..
jlmagine gif . I con_tc-e_n_t=-_t_y_p_e,,-, :_i_m.c;.a_g_ec..c/-,-g_i-,f--<i
Un exemplu de script CGi (pe un server Web aft at pe un sistem
ruland Unix) care returneaza lista utilizatorilor curenti legati pe
serverul Web:
123
1
Informatia "name",Your+name&action=find" este plasata In
variabila de mediu QUERY_STRING iar script-ul CGI script este
executat.
Un exemplu de aplicatie de parsing (de interpretare a datelor
transmise prin mecanismu! CGI) este utilizata pentru extragerea
componentelor individuale din QUERY_STRING l?i se bazeaza pe
urmatoarea Glasa C++ (vezi Anexa2).
class Parse
{
public:
Parse ( char [] );
-Parse () ;
void set( char [1 );
char *get_item( char [], int pos=l, bool=false
) i
char *get_item_n(
bool=false );
protected:
char [], int pos=l,
void remove_escape(char []) i
int hex ( char) j
char *map_uname( char [] ) i
private:
};
enum { SEP = '&' }; II Separator de campuri
char *the_str; II Girul interpretat
int the_length; II lungimea Girului
Membrii clasei sunt:
. . ..... . ........ , . , ..... ,.. .1
rl' -.-. - 'lset.e.aza irulde caractere ce va fl interpretat II
,Parse I
:\ : (parsed}.j
.. , . ... ' ... .... .. . I
Js:t .. , ... .. ..
" ... ',' !IIRetumeaza irul asociat cuvsmtUlui cheie!
.,:lget _ item ; transmis ca parametru. Daca nu eXistal
1 ; informatie de interpretat, returneaza NULL '
.r---- .' . . ., "", , " ., ., . .", ' .. ", . .. 1
:1 Returneaza irul . asociat cuvantului Cheie:.1
transmis ca parametru. Oaca nu exista
'informatie de interpretat, retumeaza irul null I
,
i
... (vid). ____ ,1
!get_item_n
I
Tn cazul folosirii metodelor get_item i get_iteITl.-n, al doilea
parametru (optional) specifica potrivirile asociat cuvantului
cheie pentru returnare. Aceasta permite regasirea informaliei
125
...
a t a ~ a t e cuvintelor cheie prestabilite. in plus, irurile returnate vor fi
amendate de urmatoarele substitu,ii:
+
Va fi convertit In spatiu.
=
Va separa numele campului de valoarea campului.
?
Va marca inceputul datelor din forma in linia de comanda.
&
Va fi folosi! ca delimitator intre perechile numelvaloare pentru
fiecare camp al formei HTML.
%HH
Va fi convertit In caracterul a carui valoare hexazecimala este HH.
-user
Va fi inlocuit de calea absoluta catre folderul utilizatorului doar
daca al treilea parametru (op1ional) este true.
Observatie: Definitia 0_ MAP va conduce la
neinc/uderea pentru procesare a codului pentru
-username. Aceasta este exp/icatia faptu/ui ca acest
cod poate fi campi/at i pentru maini care nu suporla
functia sistem map.:....uname definita In fiierul header
cgi/pwd.h.
Spre exemplu, daca QUERY_STRING contine:
tag=one&name=mike&action=%2BlO%25&tag=two&log=-ma
s/log&tag=three
atunci urmatorul program (vezi Anexa2), compilat, la rulare:
enum bool { false, true }i
#include <iostream.h>
#include <stdlib.h>
#include "parse.h"
#include "parse.cpp"
void maine}
{
char *query_str = getenv("QUERY_STRING")i
Parse list( query_str ) i
cout "name ="list.get item n(flname") "\n"i
cout"action="list.get:::::item:::::n("action
ll
) "\n"i
126
! n
L; -1. <
). ~ .
" i'
lj ;-
c:ondUCt;
Java permite crearea codurilor executa bile de mici dimensiuni
(appJet-uri), care sa ruleze in spaliul de memorie al unui browser.
Ca limbaj complet de programare, Java permite actiuni diverse. ca
desenarea, eompletarea bitmap, eontrolul i raspunsul la
evenimentele utilizator (user events), incarcarea documentelor de
la adresa specifieata etc. Din observatiile realizate asupra applet-
urilor Java folosite astazi pe Web, putem semnaliza ea
dezvoltatorii de Web folosesc Java in patru direetii principale:
crearea graficii animate, incluzand secvente repetate de
bitmap, prelucrarea atributelor bitmap, desene animate.
crearea obiectelor grafice (grafice, diagrame) pentru care nu
este necesara preluarea datelor de pe server prin script CGliASP.
Tn mod uzual, un grafic se creaza printr-o interogare a unei baze
de date, urmata de producerea unui GIF i trimiterea acestuia la
browser. Aceasta are dezavantajul timpului marit pentru
preluarea fiierelor GIF (in general de dimensiuni mar;) i pentru
crearea unui GIF pe server.
crearea "controalelor': butoane, egalizoare grafice etc. Prin
definirea i preluarea evenimentelor folosind Java applet,
programatorul poate crea obiecte grafice de control.
crearea aplicatiilor bazate pe colectii de controale ca zone de
editare, butoane, spa1ii de selectie etc. Aceasta capabilitate este
similara aplicatiilor JavaScript, dar programul este deja inclus i
com pilat, deci nu se dezvaluie codul sursa.
Nota: Java este un limbaj de programare orientat obiect derivat din
C++, avand toate avantajele POO ale C++ i evitand unele
aspecte neplaeute (alocare dinamica de memorie) pentru marirea
robustelii i seeuritalii codului. Java pune la dispozi!ie 0 coleclie
bogata de biblioteci (packages), ee extind capabilitali1e limbajului.
Printre acestea se numara 0 biblioteea pentru interfata utilizator
(AWT), 0 biblioteca 110, 0 biblioteca pentru ruerul in retea etc.
Programarea Java poate fi folosita pentru crearea applet-urilor ce
se incarea pe Web i sunt executate sub un browser, sau pentru
crearea aplicatiilor autonome (stand-alone). Subiectul acestui
capitol este crearea i folosirea applet-urilor sub browser de
navigare Web.
130
------------------------..... 1...
et
Cit
II
Aplicatii JAVA pentru pagini Web
public class Hello extends Applet
{
public void paint (Graphics g)
{
g.setColor(Color.red) ;
g.setFont(new Font ("Helvetica",Font.PLAIN,24 j
for (int x == 0 ; x < size() .height ; x++)
}
{
}
}
g.drawString("Hello World!", 10, x*15)i
ObseNatie: pentru fiecare nOu8 rulare a modificarilor
In pagina HTML consacrata app/et-ului Hello World!
folositi butonul Reload. Tn cazul in care nu obtineti
, , ,
rezultatu/ scontat, deschideti 0 nOU8 fereastm
Netscape!
Biblioteca AWT permite crearea interfelelor utilizator in interiorul
applet-urilor Java. Biblioteca contine controalele clasiee pentru
dezvoltarea unei interfe1e simple: butoane, spatii de editare (edit
areas), spatii de marcare (check boxes) etc. Tn plus, contine
cateva containere d ife rite , utile pentru aranjarea controalelor pe
ecran.
Exemplul urmator demonstreaza cum sa ereati un buton (push
button) i sa-I plasati intr-un container numit BorderLayout:
/ ButtonTest.java
import java.awt.*;
import java.applet.*;
public class ButtonTest extends Applet {
int Yi
Button bi
public ButtonTest()
y = 10;
}
setLayout(new BorderLayout(;
b == new Button ("Apply") ;
add ("North", b) i
public void paint (Graphics g) {
for (int x = 0 i X < size() . height x+=10) {
9 . drawString ("Hello World! ", y, x) i
}
}
}
133
It I
public boolean action(Event ev, Object arg)
{
}
if (ev.target instanceof Button)
{
if ("Apply" . equals (ev. arg) )
{
}
}
y+=10j
repaint() ;
return true;
return false;
Atributul ev. arg aduce eticheta butonului apasat; prin
compararea acestuia cu componentele listei etichetelor de
butoane se poate determina butonul apasat. Bineinteles, se pot
adauga i alte butoane la BorderLayout (Ia S, E ~ i V),
personalizand evenimentele care sa conduca la afil1ari.
Din exemplul precedent trebuie retinute doua aspecte importante:
A. Putem avea un singureontrol in fiecare din cele cine; pozilii ale
BorderLayout.
B. Daca plasam butoane in afara colturilor BorderLayout,
desenarea nu este 0 intrare separata. Spre exemplu, irul
"Hello World!" este afil1at pe suprafata applet-ului iar
butoanele acopera parti ale acesteia; prin urmare trebuie
controlata afil?area in suprafata corespunzatoare.
Pentru a rezolva ambele probleme, se poate folosi un panou
(panel) sau, in cazul unei suprafele de afiare-desenare, 0
panza (canvas). Un panel este preferabil pentru colectarea
impreuna a seturilor de controale, aranjandu-le intr-un rand care
controleaza dimensiunile, daca limitarile de spa1iu ale panoului 0
fac necesara:
/ / SimpleUI. java
import java.awt.*;
class PanelGraph extends Panel
{
int x = 10;
{
for (inc y = 0 i Y < size() .height
136
y+=15)
}
}
{
}
Aplicatii JAVA pentru pagini Web
g. drawString (IIHello World!" I x, y);
public void changeX()
{
x += 10;
repaint();
class PanelUI extends Panel {
Choice c;
}
Pane 1 Graph pg;
public PanelUI(PanelGraph pgIn)
{
add(new Button(IIApplyll i
add(new Label (IITest Colors", Label.RIGHT i
add(c = new Choice{;
c.addItem("Red") ;
c . addItem (" Green") ;
c.addItem("Blue") ;
pg = pg1ni
{
{
pg.changeX() ;
return true;
return false;
public class SimpleUI extends Applet
{
}
Pane 1 Graph pg;
Pane lUI pui;
public SimpleUI()
{
setLayout(new BorderLayout(;
pg = new PanelGraph() i
add ("Center" I pg) i
Panel p = new PanelUI(pg);
add ("North" 1 p) i
137
Aplicalii JAVA pentru pagini Web
Panoul va contine cele trei controale la nord, restul ferestrei fiind
alocata panoului grafic (figura 7-3). La clic pe buton, textul se va
deplasa.
Pentru a completa programul, vom modifica in Panel Graph
culoarea, In func1ie de culoarea selectata de utilizator (figura 7-4).
Clasa PanelGraph va fi modificata astfel:
class Panel Graph extends Panel
{
int x == 10i
Color c = Color.red;
{
g.setColor(c) i
for (int y == 0 ; y < size() . height ; y+==15)
{
}
g. drawString ("Hello World!", x, y);
public void changeX()
{
}
x +== 10;
repaint();
public void changeColor(Color cin)
{
c '" cini
repaint() ;
Vom modifica ~ i clasa PanelUI astfel:
{
{
if ("Red" . equals (c.getSelectedItem())
pg.changeColor(Color.red) i
if ("Green" . equals (c.getSelectedItem()
pg. changeColor (Color.green) i
if ("Blue". equals (c. getSelectedItem () ) )
pg.changeColor(Color.blue) i
return true;
return false;
139
HeiloWorld!
He!loWorldl
HelioWorldl
Hello World!
Hello World!
Hello World!
Hello World!
HelloWorfd!
Hello World!
He!loWorld!
Hello World!
Hello World!
HeiloWorld!
Hello World!
Hello World!
Hello World!
Hello World!
Figura 7-4. Un applet pentru selectia culoni din /ista de
culon.
Exista multe cazuri In care se dore!?te personalizarea applet-urilor
prin transmiterea parametrilor la apelul sau. Aceasta se realizeaza
prin transmiterea dinspre HTML a parametrilor doriti:
<title>Hello World Demo</title>
<hr>
<applet code=Hello.class width=300 height=120>
<param name=rOW8 value=
fl
4">
</applet>
<hr>
140
Aplica\ii JAVA pentru pagini Web
Parametrii pot avea orice nume dorim. Valoarea parametrilor
transmii dinspre HTML se preia cu metoda get Parameter a
clasei Applet:
String r "" getParameter("rows");
Daca numele parametrului nu exista, atunci getParameter
returneaza null:
if (r == null)
{
= 10; II default value
else
{
r Integer.parseInt(rs);
}
Java permite prograrnarea multi-tasking i faciliteaza lucrul cu
imagini (bitmaps). Aceste doua facilita1i pot fi combinate pentru a
crea anima1ie. Codul de rnai jos este un exemplu de simpla
animalie (figura 7-5): 0 imagine este deplasata pe verticala, de sus
in jos.
import java.awt.*;
public class Logo extends Applet implements
Runnable
{
Image imgi
Thread thd
int ii
null;
int imgWidth = 273;
int imgHeight = 202;
public void rune)
{
img=getImage(getCodeBase(), "tim3.gif");
if (img ! = null)
{
i=imgHeight;
repaint();
while (true)
{
try{Thread.sleep(1000}i}
catch(InterruptedException e) {}
i=O;
while (idmgHeight)
141
'; f
ie'!, sta.ct
Aplica1ii JAVA pentru pagini Web
Figura 7-5. Oep/asarea unei imagini pe verticala.
Metoda update desenul dat la pozilia specificata de
indexul i. In cazul in care se dorete animarea unui set de N
cadre (N este 0 constanta, spre exemplu 15), trebuie doar sa fie
incarcate eele N cadre (frames) intr-un vector de imagini i sa Ie
desenam pe fiecare (prin apeluri ale metodei paint), secvenlial,
in metoda update.
Componentele standard ale unei interfete sunt special realizate
pentru a oferi sau a prelua informaiii de la utilizator:
I' ...... r.::- ... . . . . ... . .... '1
.. .. __ ...... ....... _ ..... """ ... , .......... j
:lcOmponenta generica pentru crearea unui obiect:!
....... .. ....... ........ .. . ... ... ....... . ,I
. . .... .....Mn.
de .... J
.l'scrollbar!Bara de derulare!
: ...... - .......... ................ .. .... -........... , .. -..... , .... , ...... ..... ... ., ... ' ........
.. .. ...=1
ilTextl\rea . :Icamppentru editarea unor linii multipledE}text .'1
Componenta TextField permite introducerea de catre utilizator,
1n cadrul unei cutii ("box") a unei singure linii de text. Numarul de
caractere care sunt vizibile in fandul de text poate fi specificat
explicit.
143
--------------------........
Adaugarea unei componente TextField lntr-o fereastra se face
asemanator cu adaugarea unui buton sau a oricarei alte
componente:
TextField t = new TextField(12);
add(t) ;
Parametrul12 din apelul constructorUlui TextField (12) seteaza
lungimea textului care urmeaza sa fie la aproximativ 12
caractere. Utilizatorul poate tasta mai mult de 12 caractere, dar
numai unele dintre ele vor fi
Observatie: numarul de caractere afiate depinde de
caracterele tastate. Se pot afia ma; multe caractere,
daca forma caractere/or este mai ingusta.
Daca un este specificat ca parametru:
TextField t == TextField("your name") i
atunci campul text este creat ca avand implicit valoarea
parametrului. Se pot specifica in apeJ atat textul implicit, cat
lungimea textului, astfel:
TextField t == new TextField(lIyour name", 20);
Daca nu este setata 0 valoare implicita, deci nu se specifica
lungimea printr-un parametru, rezuItatuI este un text de un
singur caracter. Un exemplu simplu de introducere a unui control
al clasei TextField intr-un applet este urmatorul:
import java.awt.*;
public class Applet1 extends Applet{
TextField text;
}
public void init() {
text == new TextField(20) ;
add (text) i
in primele doua linii ale exemplului anterior se specifica faptul ca
programul clase din pachetele AWT si APPLET.
Instructiunea: public class Applet1 extends Applet
arata ca Appletl deriva din clasa Applet.
Tn continuare se declara "text" ca fiind un obiect al clasei
TextField. Apoi se apeleaza metoda init () a clasei Applet.
in cadrul metodei, se creaza un nou obiect TextField:
text=new TextField(20) ;
Prin linia add (text) se adauga obiectul TextField applet-ului.
144
Pentru a rula acest applet, se salveaza cu numele
Appletl. java, se compileaza, apoi se creaza un document
. html astfel:
<html>
<head>
<title>Applet Test Page</title>
</head>
<body>
<hl>Applet Test Page</hl>
<applet code="Appletl.class" width=200 height=150
name="Appletl">
</applet>
</body>
</html>
Campurile de tip TextArea sunt asemanatoare cu TextField,
numai ca permit introduce rea mai multor linii de text. Numarul de
linii i numarul de caractere vizibile de pe 0 linie din cadrul ariei de
text pot fi configurate. Exemplu:
TextArea t = new TextArea(5,20) i
add(t)i
Parametrii 5 i 20 ai constructorului specifica numarul de linii i
numarul de caractere de pe 0 linie. Daca textul introdus depaete
marginea ariei de afiat. apare 0 bara derulanta care permite
utilizatorului sa se deplaseze intre diferitele sec1iuni ale ferestrei.
Daca se specifica un ir ca parametiU:
TextArea t=TextArea("$ir de caractere",7, 25) i
atunci aria de text este creata avand irul parametru text implicit.
incarcat la inceput. Pentru a introduce 0 parte a acestui ~ i r la
inceputulliniei urmatoare se folosete caracterul "\n" astfel:
TextArea t=TextArea("$ir de \n ",7,25);
Sa studiem modul de utilizare a unui text introdus printr-un
TextField in exemplul urmator:
import java.awt.*;
import java.applet.*i
public class Applet2 extends Applet{
TextField textFieldi
public void init() {
textField = new TextField(20) ;
add (textField) i
public void paint (Graphics g) {
145
;',\
\.) }
; /
resize(600,300);
//dimensiunile initiale ale ferestrei
show() ;
}
void addComponents()
add(labl) ;
add("Center",tfl) ;
add(infLabel);
}
add (lab2) ;
add(tf2) ;
add (supLabel);
add(lab3);
add(tf3);
add (nrpLabel) ;
add (lab4) :
add (butl) ;
add (labS) :
public-boolean handleEvent(Event e)
if (e.id==Event.WINDOW DESTROY)
System.exit(O): -
return true:
}
else
if(e.id==Event.ACTION_EVENT&&e.target instanceof Button) {
try {
double inf=(new Double(tfl.getText() .doubleValue();
ihfLabel.setText("I1+inf) ;
double sup = (new Double(tf2.getText() .doubleValue():
supLabel.setText("I1+sup) ;
int nrPasi = Integer.parselnt(tf3.getText(;
nrpLabel.setText(""+nrpasi) ;
double result = integrTrap(inf,sup,nrPasi);
labS.setText(" Rezultatul integrarii este:"+result):
return true;
}
catch(NumberFormatException ell {
labS.setText("Format gresit la datele de intrare"+el);
}
catch(Exception e2) {
labS.setText(e2.getMessage( ;}
return true;
} else
if (e.id==Event.ACTION EVENT&&e.target
instanceof TextField){
return true;
else return false;
double integrTrap(double inf,double sup,int nrPasil throws
Exception {
if (nrPasi<=O) throw (new E..--cception (IINumar de pasi
incorect")l;
147
else {
double h=(sup-inf)/nrPasi;
if (inf==sup) return 0;
double suma=O;
for(int i=l;i<nrPasi;i++)
suma+=func(inf+i*hl;
return func{inf) +func(sup/2+suma)*h;
}
}
double func(double xl {
return Math.sqrt(1.2 + Math.sin(2*x+l)*Math.cos(x;
}
}
Programul creaza 0' grila de obiecte cu ajutorul clasei
GridLayout. Grila este completata de la stanga la dreapta i de
sus in jos. Fiecare dintre obiectele grilei sunt instanle ale unor
obiecte definite in Java. Prin event handler se trateaza
evenimentul generat de metoda handleEvent (). Evenimentul
poate fi inchiderea ferestrei, apasarea butoQului sau introducerea
unui ir de caractere. Tn cazul in care este apelat obiectul buton,
daca datele sunt corecte, se calculeaza integrala functiei func; iar
daca nu, se afieaza un mesaj (figura 7-6).
sup,
1
100
de pas! ( de Integrare )
12,0
Intrnnllo."" core eta ? Rezultalullntegraril
148
Figura 7-6. Gestionarea mai multor controale Java printr-o
gril8 de obiecte grafice.
1
Cli
Divizare
eu <DIV
aliniere
ALIGN=LEFTIRIGHTICENTER></DIV>
Citat
<BLOCKQUOTE></BLOCKQUOTE>
Evidentiere
<EM></EM>
Evidentiere
<STRONG></STRONG>
prin

Citat
<CITE></CITE>
Cod
<CODE></CODE>
Exemplu de
<SAMP></SAMP>

Exemplu de
<KBD></KBD>
intrare de fa
tastatura
Variabila
<VAR></VAR>
Definilie
<DFN></DFN>
Adresa de
<ADDRESS></ADDRESS>
autor
Font mare
<BIG></BIG>
Font mie
<SMALL></SMALL>
FORMAT DE PREZENTARE

<B></B>
Aplecat
Subliniat
Evidentiat
<STRIKE></STRIKE>
Evidentiat
<S></S>
150
(de obiee;
deplasat)
(de obieei
aplecat)
(de obicei

(de obicei
aplecat)
(listarea
codului
sursa)
(nu prea
raspandit)
(nu prea
raspandit)
(nu prea
raspandit)
fontu;ci;
r.iGfl j tt

':?

fonl'u:;'
font
/
>
Marimea <SPACER SIZE=?>
distantarii
Dimensiuni <SPACER WIDTH=? HEIGHT=?>
de distantare
Aliniere <SPACER
ALIGN=left I right I center>
LINK-URI $1 FI$IERE GRAFICE
Link catre <A HREF="URL"></A>
alt
document
Link catre <A HREF="URL#***"></A>
un target
Fereastra
t
inta
Definire
target Tn
document
Relatie
Rela\ie
inversa
<A HREF="#***"></A>
<A HREF="URL"
TARGET="***ILblankLselfLparentUop"></A>
<A NAME="***"></A>
<A REL=,,*u"></A>
<A REV="***"></A>
Tncarcare <IMG SRC="URL">
imagine
Aliniere
Aliniere
<IMG SRC="URL"
ALlGN=TOPIBOTTOMIMIDDLEILEFTIRIGHT>
<IMG SRC="URL" ALlGN=TEXTTOPI
ABSMIDDLEIBASELINEIABSBOTTOM>
Alternare <IMG SRC="URL" AL T="***">
text
Mapare <IMG SRC="URL" ISMAP>
imagine
Utilizare
imagine
mapata
152
<IMG SRC="URL" USEMAP="URL">
(1n alt
document)
(in a c e l a ~ i
document)
(nu prea
raspEmdit)
(nu prea
raspandit)
(daca
imaginea
nu este
incarcata)
(cere un
CGI)
r:,::nc;nar

(: () t!J'TE: T';:;:. t; [7, L ,", tJ

'fnc'hk;k)!tHa
Lungime <HR WIDTH="%">
(procent din
procentuala latimea
paginii)
Linie solida <HR NOSHADE> (fara aspect
3D)
Linie text <NOBR></NOBR> (previne
continu;3 trecerea la
linie noua)
Trecere la linie <WBR> (unde e
noua
nevoie)
LlSTE
Liste <UL> U> inainte de
nenumerotate
<LI> ...
fiecare element al
</UL>
listei)
Lista <UL COMPACT></UL>
(nenumerotata)
compacta
Tipul <UL (pentru toata \ista)
bullet-ului
TYPE=DIsclcIRCLEISQUARE>
<LI (acesta ~ i
TYPE=DISCI CIRCLE I SQUARE>
urmatorii)
Liste <OL> U> inainte de
numerotate <LI> ...
fiecare element al
</OL>
listei)
Usta <OL COMPACT></OL>
(numerotata)
compacta
Tipul <OL TYPE=AlaIIlill>
(pentru toata lista)
numaratorii
TYPE=AlaIIlill> <LI (acesta ~ i
subsecventele
sale)
Numarde <OL START=?> (pentru toata lista)
lnceput
<LI VALUE=?> (acesta ~ i
subsecvenlele
sale)
Liste de <DL><DT><DD></DL> (DT: termen
definilii DO: definilie)
Lista <DL COMPACT></DL> (de defini\ii)
compacta
154
"
)ste ch?

C:u;lo.are
funrf1Z:,tt
L ..
<:Li.i.R.>
;>
.;.
Tnfl:r\te de
fiecarc:
1)erlnlreH

[)in",ensiun(;t

Anexa 1: lista principalelor etichete HTML 4.0
Spatiere text <TEXTAREA
WRAP=OFF !VIRTUAL! PHYSICAL>
< / TEXTA.."tEA>
TABELE
Definire tabel <TABLE></TABLE>
Chenar tabel <TABLE BORDER=?></TABLE>
Spatiu intre <TABLE CELLSPACING=?>
celule
Spatiu fata de <TABLE CELLPADDING=?>
marginea celulei
Dimensiune <TABLE WIDTH=?>
dorita
Dimensiune <TABLE WIDTH="%">
procentuala
Linie de tabel <TR></TR>
Aliniere <TR ALIGN=LEFTIRIGHTI
CENTER I MIDDLE I BOTTOM
VALIGN=TOP/BOTTOM I MIDDLE>
CeluJa de tabel <TD></TD>
Aliniere <TD ALIGN=LEFT I RIGHT I
CENTER I MIDDLE I BOTTOM
VALIGN=TOpIBOTTOMIMIDDLE>
Fara linii noi <TD NOWRAP>
Pe cate coloane <TD COLSPAN=?>
se intinde
Pe cate linii se <TD ROWSPAN=?>
intinde
Dimensiune <TD WIDTH=?>
dorita
Dimensiune <TD WIDTH="%">
procentuala
Culoarea <TD BGCOLOR="#$$$$$$" >
fundalului
celulei
(1n pixeli)
(procentaj din
pagina)
(apare in
interiorul unei
linii de tabel)
(in pixeli)
(procentaj din
tabel)
157
----------------------------....
'::.
l\L I (:U\f;.;; j
i B'(}T1iT<)l\'I
<I.E
din
;. ...
{' ;.::.-
Cu,loaroa
UHL
<
I\TI\.f'lE :!': 11 \1 i
Gr,) cuno

Aliniere
Dimensiune
Distantare
DIVERSE
Comentariu
<APPLET
ALIGN="LEFT I RIGHT I CENTER">
<APPLET WIDTH=? HEIGHT=?>
<APPLET HSPACE=? VSPACE=?>
<1-- *** -->
HTML 3.2 Prolog <!DOCTYPE HTML PUBLIC
1f-//W3C//DTD
De ciiutat
Afiare
Trimitere ciiutare
URL fiier curent
Nume de baza-
fereastra
HTML 3.2//EN">
<ISINDEX>
<IS INDEX
PROMPT="***">
<A HREF="URL?***">
<fA>
<BASE HREF="URL">
<BASE TARGET==If***">
(in pixeli)
('in pixeli)
(neafiat de
browser)
(indica un
index de
ciiutat)
(text de afiat
la
introducere)
(se folosete
un semn de
intrebare)
(trebuie sa fie
in header)
(trebuie sa fie
in header)
Relatie <LINK REV=" * * * " (trebuie sa fie
Meta-informatii
Foi de stil
Script-uri JavaScript
160
REL= If * * *" HREF=" URL If> in header)
<META>
<STYLE></STYLE>
<SCRIPT></SCRIPT>
(trebuie sa fie
in header)
header parse. h (declaratia clasei Parse)
1/ Extrage components ale unui rezultat CGI
II Exemplu:
/1 name=Your+name&action=%2B10%25&log=-mas/log
II este compus din trei elemente:
II Element: asociat elementului
// name: Your name
1/ action: +10%
II log: lusrlstaff/mas!log
II (C) M.A.Smith UniverSity of Brightonl
II Permission is granted to use this codel
II provided this declaration and copyright notice remains intact.1
II 21 October 1995
#ifndef CLASS PARSE
#define CLASS=PARSE
#include "t_type.h"
class Parse
{
public:
ParseC char [J );
-Parse () ;
void sete char [1 );
char *get item ( char [I, int pos=l, bool=false );
char *get-item n( char [I, int pos=l, bool=false I;
protected: - -
void remove escape(char [J);
int hex ( char );
char *map_uname( char [J );
private:
};
enum { SEP = '&' );
char -the str;
int the_length;
#endif
II Strip escape characters
II Return hex value
1/ process -uname -> home path
II Seperator for fields
II String parsed
1/ Length of the string
sursa parse. cpp (expand area metodelor clasei Parse)
II (C) M.A.Smith University of Brighton
II Permission is granted to use this code
1/ provided this declaration and copyright notice remains intact.
1/ 21 October 1995
#ifndef CLASS_PARSE_IMP
#define CLASS_PARSE_IMP
#include "parse.h"
#include <string.h>
#include <ctype.h>
#ifndef NO MAP
# include
#endif
Parse::Parse( char list[] }
{
the str = NULL;
set( list I;}
')
if \ 1_ _'
l-'''
J..,
:
',: I
i,
'.'1
ii!
j y .
L \ .. ':i:' .. '::
c"!
)
l:
//
:" !
/;' .
) ;
#define DOES_NOT_HAVE_EXCEPTION_CLASSES
#define DOES_NOT_HAVE_MUTABLE
#define DOES_NOT_HAVE_EXPLICIT
#define DOES_NOT_HAVE_NAMESPACE_STD
#endif
#if V4
#define DOES_NOT_HAVE_BOOL
#define DOES_NOT_HAVE_EXCEPTION_CLASSES
#define
#define DOES_NOT_HAVE_EXPLICIT
#endif
#if V5
#define DOES NOT HAVE EXCEPTION CLASSES
II#define HAS_NAMESPACE_STD
#endif
#ifdef GNUC
INCLUDE libiop
II#define DOES-NOT HAVE EXCEPTION -fhandle-execeptions
#define DOES NOT HAVE EXCEPTION CLASSES
I/#include <Std/stdexcep.h> (Broken)
#define DOES NOT HAVE MUTABLE
#define DOES=NOT=HAVE:EXPLICIT
#endif
#ifdef DOES NOT NAMES PACE STD
#define std- - - -
#endif
#ifdef NEED TO INCLUDE libiop
#include <lIbioP.h>
#endif
#Udef DOES NOT HAVE BOOL
# define bool int -
11 define true 1
11 define false 0
#endif
#ifdef DOES NOT HAVE MUTABLE
# define mutable -
#endif
#ifdef DOES NOT HAVE EXPLICIT
# define explicit -
#endif
#ifdef DOES NOT HAVE EXCEPTION
# define throw
# define try
# define catch( parameter) exception err; if ( false)
#endif
#undef DOES_NOT_HAVE_EXCEPTION_CLASSES
#ifdef DOES_NOT_HAVE_EXCEPTION_CLASSES
# ifdef DOES NOT HAVE STRING
# include "t99:str.h"
#
#
#
#
#
#
#
else
ifde GNUC
include <string.h>
else
include <cstring.h>
endif
endif
164
------------------........
cell
\
! '
-3. .1: ':1 )

1-':;:'!:1::Y2 ;:":, i'
) {j,
) {};
) ;
! ,
j;
J ;
f
.':''i:: 1
"CGT"
Fiierui sursa mas_form. cpp:
II (e) M.A.Smith University of Brighton
II provided this declaration and copyright notice remains intact.
II 26 August 1995
#include "t_type.h"
#include <iostream.h>
#include <iomanip.h>
#include <stdlib.h>
#include "mas_cvo.cpp"
void intro () ;
void finish() ;
void form data output();
void stream datal);
void return-button();
char' getenv _n ( char [] );'
/1 Main program
int main ()
{
introO;
form data output();
stream data () ;
return-button();
finish();
return 0;
void intro ()
{
cout "Content-type:
lI\n
ll
i'\n
ll
;
cout II <HTML>
cout II <HEAD>
"

cout "</HEAD>
"

text/html"
tI\nn j
ft\n";
"\nll;
coot "<BODY BGCOLOR=White>
void form_data_output( )
{
cout "<P>" "\n
lt
i
tt\nJl
"\n";
cout "The data sent to the form processing program "
"in the environment variable QUERY_STRING is:" "\n";
cout <;< If<P>" "\n
ll
"\nll;
cout "<TABLE BORDER CELLPADDING=2>" "\n" ;
cout "<TD>" u\n
ll
i
coot getenv n( "QUERY_ STRING" ) u\n";
cout It</TD>" lI\n
ll
;
cout "</TABLE>" "\n";
void stream_datal)
{
char chi
cout I1<P>U I'\n" ;
cout "Contents of stdin" u<p>" tf\nll;
cout "<TABLE BORDER CELLPADDING=2>"
cout II <TD>" "\nlf;
cout tt<PRE>" lI\n
lt
;
cout
1111
It\n";
{
int len = 0;
char *p ch = getenv( "CONTENT_LENGTH" };
it ( p ~ h != NULL) len = atoi( p_ch );
if ( len> 0 )
(
cin resetiosflags( ios::skipws );
168
n\n";
a
it' j, e ) ~ : .
I!
!',
Ii
eh. Ie
6t.T.' [t ; {
n
t" \ {
r) ;
1'; 1ri:rn1 ~ '
'1 \,;! > I;
; :
) :
I
html ("REMOTE IDENT ") ; html( getenv_n( "REMOTE_IDENT" ) ) ;
html
- ( "REMOTE-USER "); html( getenv_n( "REMOTE_USER" ) ) ;
html :::: ( "REQUEST_METHOD ") ; html( getenv_n( "REQUEST_METHOD" ) );
html
-
( "SCRIPT_NAME
II);
htm1(
html
-
( "SERVER NAME "} i html(
html
-
( "SERVER:::: PORT
If) ; html(
html
-
("SERVER_PROTOCOL ") ; html(
html
-
( "SERVER_SOFTWARE
II); html(
html (U<p>lI) ;
html ("Unix command pl-intenv") ;
cout flush;
system ( "printenv I sort" );
html(fI<P>") ;
html ("Unix command set") ;
cout flush;
system ( "set I sort" );
html( "</PRE>" );
html( "</BODY>" );
html ( "</HTML>" );
sursa mas _ rec . cpp:
getenv_n( "SCRIPT_NAME" ) ) ;
getenv_n( "SERVER_NAME" ) );
getenv n( "SERVER_PORT" ) );
getenv n( "SERVER_PROTOCOL"
getenv_n( "SERVER_SOFTWARE"
II Record details about who the viewer of a web page is
II (C) M.A. Smith University of Brighton
)
)
II provided this declaration and copyright notice remains intact.
1/ 26 August 1995
lIinclude "t type.h"
lIinclude <iostream.h>
lIinclude <fstream.h>
lIinclude <iomanip.h>
lIinclude <stdlib.h>
lIinclude <time.h>
#include <string.h>
lIinclude <ctype.h>
#include "parse.hl!
lIinclude "parse.cpp"
#include "mas_cvo.cppll
void write leg entry( char!], chart] );
void cgi var output();
char' getenv-n( char [] );
void git output( char [J );
II param;ters to the CGI pregram
II passed in the QUERY STRING environment variable
II -
II file;mame Names the file to which leg information is written
l;
) ;
II page=name - The name of the page that will be written to the leg
II img;name - Names the image file which is returned
II - If no name or unreadable an image of a . is returned
II - If this parameter is omitted then a web page of CGr
II variables is returned to help in debuging
II Remember all files name must be absolute or relative to the
II director! in which the CGr script is run
int mainO
{
char *query str = getenv("QUERY STRING");
Parse liat(-query_str == O? -
"file=maa&page=Test&" : query atr );
if ( list.get item( "file" ) 1= NULL) -
( -
}
write_leg_entry( list .get_item_n( "file", l, true),
list.get_item_n( "page" ) );
if list.get_item( "img" ) NULL)
{
170
l'j "
g
-;,:.ha-r..' c,
:'Xi;.lt. 1;;':::',
< l ,;"c, I j;
,0'
; ;
ll1
SOOOG

'{,5000
It(n::;{rtr.Hnr,
"
t
- TEH?KH.O{;II WEB ".
-
Hcnon iel
- G.t\UGOL SIMBOUC

Carte Hypermedia - Neagu

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Carte Hypermedia - Neagu

Încărcat de

Drepturi de autor:

Formate disponibile

Ciprian-Danie!

NEAGU, Daniela NEAGU

S-ar putea să vă placă și