, se insereaza un bloc de text, acesta va fi indentat ( ntocmai
ca elementele unei liste).
08. Tabele
Tabelele ne permit s cream o reea dreptunghiular de domenii,
fiecare domeniu avnd propriile opiuni pentru culoarea fondului,
culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente
.... Un tabel este format din rnduri. Pentru a insera un rnd ntr-un
tabel se folosesc etichetele ... ( de la " table row "= rnd de
tabel ).Folosirea etichetei de sfrit este opional.
Un rnd este format din mai multe celule ce conin date.O celul de
date se introduce cu eticheta ...
tabelex_1
Un tabel simplu format din 4 linii i 2 coloane
cell 11 cell 11
cell 21 cell 22
cell 31 cell 32
cell 41 cell 42
n mod prestabilit, un tabel nu are chenar. Pentru a aduga un
chenar unui tabel, se utilizeaz un atribut al etichetei numit
border. Acest atribut poate primi ca valoare orice numr ntreg (
inclusiv 0 ) i reprezint grosimea n pixeli a chenarului tabelului.
Dac atributul border nu este urmat de o valoare atunci tabelul va
avea o grosime prestabilit egal cu 1 pixel, o valoare egal cu 0 a
grosimii semnific absena chenarului. Cnd atributul border are o
valoare nenul chenarul unui tabel are un aspect tridimensional.
tabelex_2
Un tabel simplu cu chenar
cell 11 cell 11
cell 21 cell 22
cell 31 cell 32
cell 41 cell 42
Alinierea tabelului
Pentru a alinia un tabel ntr-o pagin Web se utilizeaz atributul
align al etichetei , cu urmtoarele valori posibile: " left " (
valoarea prestabilit ), " center " i "right ".
Alinierea este important pentru textul ce nconjoar tabelul.
Astfel : dac tabelul este aliniat stnga ( ), atunci textul care
urmeaz dup punctul de inserare al tabelului va fi dispus n partea
dreapt a tabelului.
dac tabelul este aliniat dreapta ( ), atunci textul care urmeaz
dup punctul de inserare al tabelului va fi dispus n partea stnga a
tabelului; dac tabelul este aliniat pe centru ( ), atunci textul
care urmeaz dup punctul de inserare al tabelului va fi afiat pe
toat limea paginii, imediat sub tabel.
Distana dintre tabel i celelalte elemente din pagina Web poate
fi stabilit cu ajutorul atributelor hspace i vspace al etichetei .
Valoarea atributului hspace poate fi orice numr pozitiv, inclusiv
0, i reprezint distana pe orizontal dintre tabel i celelalte
elemente ale paginii Web.
Valoarea atributului vspace poate fi orice numr pozitiv,
inclusiv 0, i reprezint distana pe vertical dintre tabel i
celelalte elemente ale paginii Web. Aceste atribute funcioneaz
numai cu Netscape Communicator.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabileste cu ajutorul atributului bgcolor,
care poate fi ataat ntregului tabel prin eticheta , unei linii prin
eticheta sau celule de date prin eticheta .
Valorile pe care le poate primi bgcolor sunt cele cunoscute
pentru o culoare.
Dac n tabel sunt definite mai multe atribute bgcolor, atunci
prioritatea este urmtoarea: , , ( cu prioritate cea mai mic ).
tabelex_4
Un tabel simplu colorat
verde 11 rosu 11
albastru 21 galben 22
cell 31 cell 32
cell 41 cell 42
Culoarea textului din fiecare celul se pote stabili cu ajutorul
expresiei: ....
Dimensionarea celulei unui tabel
Distana dintre dou celule vecine se definete cu ajutorul
atributului cellspacing al etichetei .Valorile acestui atribut pot
fi numere ntregi pozitive, inclusiv 0, i reprezint distana n pixeli
dintre dou celule vecine. Valorea prestabilit a atributului
cellspacing este 2.
tabelex_5
Un tabel far chenar de celule alipite
gri 11 rosu 12
albastru 21 galben 22
Distana dintre marginea unei celule i coninutul ei poate fi
definit cu ajutorul atributului cellpadding al etichetei .Valorile
acestui atribut pot fi numere ntregi pozitive, i reprezint distana
n pixeli dintre celule i continutul ei.
Valorea prestabilit a atributului cellpadding este 1.
tabelex_6
Un tabel de celule mari
gri 11 rosu 12
albastru 21 galben 22
Dimensionarea unui tabel
Dimensiunile unui tabel - limea i nlimea - pot fi stabilite
exact prin intermediul a dou atribute , width i height, ale
etichetei .
Valorile acestor atribute pot fi: numere ntregi pozitive
reprezentnd limea respectiv nlimea n pixeli a tabelului;
numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd
fraciunea din limea i nlimea total a paginii.
tabelex_7
Un tabel de de 200 pixeli X 50 %
cell 11 cell 12
cell 21 cell 22
n exemplul urmtor se utilizeaz un truc care permite afiarea
ntr-o pagin Web a unui text poziionat n centrul paginii.
tabelex_8
Un text centrat ntr-o pagina
Text centrat.
Titlul unui tabel
Unui tabel i se poate ataa un titlu cu ajutorul etichetei ( de
la "table caption" = titlu tabel ).
Aceast etichet trebuie plasat n interiorul etichetelor ..., dar
nu n interiorul etichetelor sau Titlul unui tabel poate fi aliniat
cu ajutorul atributului align al etichetei care poate lua una
dintre valorile:
" bottom " ( sub tabel );
" top " ( deasupra tabelului );
" left " ( la stnga tabelului );
" right " ( la dreapta tabelului ).
Cap de tabel
Un tabel poate avea celule cu semnificaia de cap de tabel.
Aceste celule sunt introduse de eticheta ( de la " tabel header " =
cap de tabel ) n loc de . Toate atribute care pot fi ataate
etichetei pot fi de asemenea ataate etichetei . Coninutul celulelor
definite cu este scris cu caractere aldine i centrat.
Alinierea coninutului unei celule
Alinierea pe orizontal a coninutului unei celule se face cu
ajutorul atributului align care poate lua valorile:
" left " ( la stnga );
" center " ( centrat , valoarea prestabilita );
" right " ( la dreapta );
" char " ( alinierea se face fata de un caracter ).
Alinierea pe vertical a coninutului unei celule se face cu
ajutorul atributului valign care poate lua valorile:
" baseline " ( la baza );
" bottom " ( jos );
" middle " ( la mijloc, valoarea prestabilita );
" top " ( sus ).
Aceste atribute pot fi ataate att etichetei pentru a defini
tuturor elementelor celulelor unui rnd, ct i etichetelor i pentru a
stabili alinierea textului ntr-o singur celula.
tabelex_11
Un tabel avand continutul celulelor aliniate
Aici aliniereaeste centrudreapta
stnga
centrusus jos
aicialinierea este centrustnga (implicita)
Dimensionarea exact a celulelor unui tabel
Dimensiunea unei celule de tip sau de tip pot fi stabilite exact
cu ajutorul a dou atribute ale acestor etichete: width pentru lime
i height pentru nlime.
Valorile posibile ale acestor atribute sunt: numere ntregi
pozitive ( inclusiv 0 ) reprezentnd dimensiunea n pixeli a limii,
respectiv a nlimii unei celule; procente din limea , respectiv
nlimea tabelului.
Tabele de forme oarecare
Un tabel trebuie privit c o reea dreptunghiular de celule.Cu
ajutorul a dou atribute ale etichetelor i , o celula se poate
extinde peste celule vecine.
Astfel: extinderea unei celule peste celulele din dreapta ei se
face cu ajutorul atributului colspan, a crui valoare determin
numrul de celule care se unific. Extinderea unei celule peste
celulele dedesubt se face cu ajutorul atributului rowspan, a crui
valoare determin numrul de celule care se unific. Sunt posibile
extinderi simultane ale unei celule pe orizontal i pe vertical. n
acest caz , n etichetele i vor fi prezente ambele atribute colspan
i rowspan.
Atributul " nowrap "
Atributul nowrap aparine elementelor i ; el interzice
ntreruperea unei linii de text. Astfel, n tabel pot aprea coloane
cu o lime orict de mare.
tabelex_14
Un tabel cu celule de latime mare
cell 11 cell 12
cell 21 cell 22 este foarte lata,aceasta celula este foaret
lata.
Celule vide ale unui tabel
Dac un tabel are celule vide, atunci aceste celule vor aprea n
tabel fr un chenar de delimitare. n scopul de a afia un chenar
pentru celule vide se utilizeaz urmtoarele trucuri:
dup se pune ;
dup se pune
.
Caracterul ( no break space ) este de fapt caracterul spaiu. Un
spaiu introdus prin intermediul acestui caracter nu va fi ignorat
de browser.
tabelex_15
Un tabel cu celule vide
cell 11 cell 12cell 13
Atribute Internet Explorer pentru tabele
Urmtoarele atribute ale etichetei funcioneaz cu Internet
Explorer 4.0 , 5.0, dar nu cu Netscape Communicator 4.5:
background permite stabilirea unei imagini pentru fondul unui
tabel primete ca valoare adresa URL a imaginii folosite pentru
fond; bordercolor permite stabilirea culorii pentru chenarul unui
tabel; bordercolorlight permite stabilirea culorii pentru chenarul
3D al unui tabel; bordercolordark permite stabilirea culorii pentru
chenarul 3D al unui tabel;
Grupuri de coloane
Blocul ... permite definirea unui grup de coloane. Atributele
acceptate de sunt: span determin numrul de coloane dintr-un grup;
width determin o lime unic pentru coloanele din grup; align
determin un tip unic de aliniere pentru coloanele din grup.
Exemplu:
ntr-un bloc , coloanele pot avea configurri diferite dac se
utilizeaz elementul , care admite atributele: span identifica acea
coloan din grup pentru care se face configurarea. Dac lipsete,
atunci coloanele sunt configurate n ordine; width determina o lime
pentru coloana identificat prin span; align determin o aliniere
pentru coloana identificat prin span.
Atributele frame i rules
Atributul frame al etichetei permite specificarea prilor din
chenarul unui tabel care vor fi afiate. Valorile posibile ale
acestui atribut sunt:
void - elimina toate muchiile exterioare ale tabelului;
above - afieaz o muchie n partea superioar a cadrului
tabelului;
below - afieaz o muchie n partea inferioar a cadrului
tabelului;
hsides - afieaz cte o muchie n partea superioar i inferioar
cadrului tabelului;
lhs - afieaz o muchie n partea din stnga a cadrului
tabelului;
rhs - afieaz o muchie n partea din dreapta a cadrului
tabelului;
vsides - afieaz o muchie n partea din stnga i din dreapta a
cadrului tabelului;
box - afieaz o muchie pe toate laturile cadrului tabelului;
border - afieaz o muchie pe toate laturile cadrului
tabelului;
Atributul rules al etichetei permite alegerea unor delimitatori
pentru celulele unui tabel. Valorile posibile sunt: none - elimin
toate muchiile interioare ale tabelului; groups - afieaz muchii
orizontale ntre toate grupurile din tabel.Grupurile sunt
specificate prin elementele , , i ; rows - afieaz muchii orizontale
ntre toate liniile tabelului; cols - afieaz muchii verticale ntre
toate coloanele tabelului; all - afieaz muchii ntre toate liniile i
coloanele;
tabelex_18
Atributele frames i rules
cell 11 cell 12cell 13
cell 21 cell 22cell 23
Subblocurile unui tabel
n specificaiile HTML 4.0, coninutul unui tabel poate fi imprit n
subblocuri prin elementele:
... ( un singur rnd );
... ( un singur rnd );
... ( oricate rnduri );
ntr-un tabel exist un singur subbloc de tipul i un singur
subbloc de tipul , dar pot exista mai multe subblocuri de tip .
09. Ferestre n HTML
Ferestrele sau (cadrele) ne permit s definim n fereastra
browserului subferstre n care s fie ncrcate documente HTML
diferite. Ferestrele sunt definite ntr-un fiier HTML special , n
care blocul ... este inlocuit de blocul .... n interiorul acestui
bloc, fiecare cadru este introdus prin eticheta .
Un atribut obligatoriu al etichetei este src, care primeste c
valoare adresa URL a documentului HTML care va fi ncrcat n acel
frame. Definirea cadrelor se face prin mprirea ferestrelor (i a
subferestrelor) n linii i coloane: mprirea unei ferestre ntr-un
numr de subferestre de tip coloan se face cu ajutorul atributului
cols al etichetei ce descrie acea fereastr; mprirea unei ferestre
ntr-un numr de subferestre de tip linie se face cu ajutorul
atributului rows al etichetei ce descrie acea fereastr; valoare
atributelor cols i rows este o list de elmente separate prin virgul
, care descriu modul n care se face mprirea. Elementele listei pot
fi: un numr ntreg de pixeli; procente din dimensiunea ferestrei
(numr ntre 1 i 99 terminat cu %); n* care inseamna n pri din
spatiul ramas;
Exemplu 1: cols=200,*,50%,* nseamn o mprire n 4 subferestre ,
dintre care prima are 200 pixeli , a treia ocup jumtate din spaiul
total disponibil, iar a doua i a patra ocupa n mod egal restul de
spaiu rmas disponibil.
Exemplu 2: cols=200,1*,50%,2* nseamn o mprire n 4 subferestre ,
dintre care prima are 200 pixeli , a treia ocup jumatate din spaiul
total disponibil iar a doua i a patra ocup n mod egal restul de
spaiu rmas disponibil, care se mparte n trei pri egale , a doua
fereastr ocupnd o parte , iar a patra ocupnd 2 pri.
Observaii:
-dac mai multe elemente din lista sunt configurate cu *, atunci
spaiul disponibil rmas pentru ele se va pri n mod egal.
-o subfereastr poate fi un cadru (folosind )n care se va ncrca
un document HTML sau poate fi imprit la rndul ei la alte subfereste
(folosind ).
n exemplul urmtor este creat o pagina Web cu trei cadre
orizontale.Pentru al doilea cadru valoarea atributului src este
adresa URL a unei imagini.
ferex_2
n exemplul urmtor este creat o matrice de 4 cadre (2 x 2).Pentru
a realiza acest lucru, se folosesc simultan cele dou atribute cols
i rows.
ferex_3
n exemplul urmtor este creat o pagin Web cu trei cadre mixte.
Pentru a o crea se procedeaz din aproape n aproape. Mai nti, pagina
este mprit n dou subferestre de tip coloan, dup care a doua
subfereastr este mprit n dou subferestre de tip linie.
ferex_4
Culori pentru chenarele cadrelor i dimensionarea chenarului unui
cadru. Pentru a stabili culoarea chenarului unui cadru se utilizeaz
atributul bordercolor. Acest atribut primete ca valoare un nume de
culoare sau o culoare definit n conformitate cu modelul de culoare
RGB. Atributul bordercolor poate fi ataat att etichetei pentru a
stabili culoarea tuturor chenarelor cadrelor incluse, ct i
etichetei pentru a stabili culoarea chenarului pentru un cadru
individual.
Atributul border al etichetei permite configurarea limii
chenarelor tuturor cadrelor la un numr dorit de pixeli. Valoarea
prestabilit a atributului border este de 5 pixeli. O valoare de 0
pixeli va defini un cadru far chenar.
Pentru a obine cadre fr chenar se utilizeaz border="0". n mod
prestabilit, chenarul unui cadru este afiat i are aspect
tridimensional. Afiarea chenarului unui cadru se poate dezactivata
dac se utilizeaz atributul frameborder cu valoare "no". Acest
atribut poate fi ataat att etichetei (dezactivarea fiind valabil
pentru toate cadrele incluse) ct i etichetei (dezactivarea fiind
valabil numai pentru un singur cadru).
Valorile posibile ale atributului frameborder sunt:
"yes" -echivalent cu 1;
"no" -echivalent cu 0;
Bare de defilare
Atributul scrolling al etichetei este utilizat pentru a adauga
unui cadru o bara de derulare care permite navigarea n interiorul
documentului afisat n interiorul cadrului.
Valorile posibile sunt:
"yes" - barele de derulare sunt adaugate ntotdeauna;
"no" - barele de derulare nu sunt utilizabile;
"auto" - barele de derulare sunt vizibile atunci cnd este
necesar
Atributul noresize al etichetei (fr nici o valoare suplimentar)
dac este prezent, inhib posibilitatea prestabilit a utilizatorului
de a redimensiona cadrul cu ajutorul mouse-ului. Pozitionarea
documentului ntr-un cadru.
Atributele marginheight i marginwidth ale etichetei permit
stabilirea distanei n pixeli dintre coninutul unui cadru i
marginile verticale, respectiv orizontale ale cadrului.
Valori posibile:
-numr de pixeli;
-procent din latimea, respectiv din naltimea cadrului;
Exist browsere care nu suport cadre pentru aceasta se utilizeaz
n interiorul blocului eticheta . Dac programul de navigare tie s
interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac
nu, materialul cuprins n zona ... va fi singurul care va fi neles i
afiat.
De precizat este faptul c ntre ... se pot introduce orice alte
tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).
Cadre interne
Un cadru intern este specificat prin intermediul blocului ....
Un cadru intern se insereaz ntr-o pagin Web n mod asemntor cu o
imagine sau n modul n care se specific marcajul , aa cum rezult din
urmtorul exemplu:
n acest caz, am specificat c doresc o fereastr de cadru intern
care are 40%din nlimea i 50% din limea paginii curente.
Atributele aceptate de eticheta sunt n parte preluate de la
etichetele i , cum ar fi: src, border, frameborder, bordercolor,
marginheight, marginwidth, scrolling, name, noresize; sau de la
eticheta vspace, hspace, align, width, height;
inte pentru legturi
n mod prestabilit, la efectuarea unui clic pe o legtur nou
pagina (ctre care indic legtura) o nlocuiete pe cea curent n aceeai
fereastr (acelai cadru). Acest comportament se poate schimba n dou
moduri:
prin plasarea n blocul ... a unui element care precizeaz, prin
atributul target numele ferestrei (cadrului) n care se vor ncarc
toate paginile noi referite de legturile din pagina curent conform
sintaxei:
prin plasarea n etichet a atributului target, care precizeaz
numele ferestrei (cadrului) n care se va ncrca pagina nou referit
de legtura, conform sintaxei:
...
Observaie:
-dac este prezent att un atribut target n ct i un atribut target
n , atunci cele precizate de atributul target din sunt prioritare.
Numele unui cadru este stabilit prin atributul name al etichetei
conform sintaxei:
Valori pentru atributul target
Atributul target al etichetei accepta anumite valori predefinite
de o valoare deosebit pentru creatorii de pagini Web, ceste valori
sunt:
"_self" (ncarcarea noii pagini are loc n cadrul curent);
"_blank" (ncarcarea noii pagini are loc ntr-o fereastra noua
anonima);
"_parent" (ncarcarea noii pagini are loc n cadrul parinte al
cadrului curent dac acesta exista, altfel are loc n fereastra
browserului curent);
"_top" (ncarcarea noii pagini are loc n fereastra browserului ce
contine cadrul curent);
10. Formulare
Un formular este un ansamblu de zone active alctuit din butoane,
casete de selecie, cmpuri de editare etc. Formularele v asigur
construirea unori pagini Web care permit utilizatorilor s introduc
efectiv informaii i s le transmit serverului.
Formularele pot varia de la o simpl caset de text, pentru
introducerea unui ir de caractere pe post de cheie de cutare -
element caracteristic tuturor motoarelor de cautare din Web - pn la
o structur complex, cu multiple seciuni, care ofer faciliti
puternice de transmisie a datelor. O sesiune cu o pagin web ce
conine un formular cuprinde urmtoarele etape:
1. Utilizatorul completeaz formularul i l expedieaz unui
server.
2. O aplicaie dedicat de pe server analizeaz formularul
completat i (dac este necesar) stocheaz datele ntr-o baz de
date.
3. Dac este necesar serverul expedieaz un rspuns
utilizatorului.
Un formular este definit ntr-un bloc delimitat de etichetele
corespondente i .
Atribute eseniale ale elementului
Exista dou atribute eseniale ale elementului .
1. Atributul action precizeaz ce se va ntmpla cu datele
formularului odat ce acestea ajung la destinaie. De regul ,valoarea
atributului action este adresa URL a unui script aflat pe un srver
WWW care primete datele formularului, efectueaz o prelucrare a lor
i expedieaz ctre utilizator un rspuns.
.
Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix
shell.
2. Atributul method precizeaz metoda utilizat de browser pentru
expedierea datelor formularului. Sunt posibile urmtoarele valori:
get (valoarea implicita). n acest caz, datele din formular sunt
adugate la adresa URL precizat de atributul action;
- nu sunt permise cantiti mari de date (maxim 1 Kb)
- ntre adresa URL i date este inserat un "?".
Datele sunt adugate conform sintaxei: nume_cmp = valoare_cmp.
Intre diferite seturi de date este introdus un "&".
Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 =
valoare1&nume2 = valoare2";
post n acest caz datele sunt expediate separat. Sunt permise
cantiti mari de date (ordinul MB). Pentru ca un formular s fie
funcional, trebuie precizat ce se va ntmpla cu el dup completarea i
expediere. Cel mai simplu mod de utilizare a unui formular este
expedierea acestuia prin pota electronic (e-mail). Pentru aceasta
se folosete un atribut al etichetei : i anume action care primete
ca valoare " mailto: " concatenat cu o adresa valid de e-mail ctre
care se va expedia formularul completat. Un formular cu un cmp de
editare i un buton de expediere. Majoritatea elementelor unui
formular sunt definite cu ajutorul etichetei . Pentru a preciza
tipul elementului se folosete atributul type al etichetei . Pentru
un cmp de editare, acest atribut primeste valoarea "text". Alte
atribute pentru un element sunt:
atributul name, permite ataarea unui nume fiecrui element al
formularului.
atributul value, care permite atribuirea unei valori iniiale
unui element al formularului.
Un buton de expediere al unui formular se introduce cu ajutorul
etichetei , n care atributul type este configurat la valoarea
"submit". Acest element poate primi un nume prin atributul name. Pe
buton apare scris "Submit Query" sau valoarea atributului value,
dac aceast valoare a fost stabilit.
Pentru elementul de tipul cmp de editare (type = "text") , alte
dou atribute pot fi utile:
atributul size specifica limea cmpului de editare depaete aceast
lime, atunci se execut automat o derulare acestui cmp;
atributul maxlength specific numrul maxim de caractere pe care
le poate primi un cmp de editare; caracterele tastate peste numrul
maxim sunt ignorate.
Observaii:
-dac atributul type lipsete ntr-un element , atunci cmpul
respectiv este considerat n mod prestabilit ca fiind de tip
"text".
-formularele cu un singur cmp (de tip text) nu au nevoie de un
buton de expediere, datele sunt expediate automat dup completarea i
apsarea tastei ENTER.
Butonul Reset
Dac un element de tip are atributul type configurat la valoarea
"reset", atunci n formular se introduce un buton pe care scrie
"Reset". La apsarea acestui buton, toate elementele din formular
primesc valorile prestabilite (definit odat cu formularul ), chiar
dac aceste valori au fost modificate de utilizator.
Un buton Reset poate primi un nume cu ajutorul atributului name
i o valoare printr-un atribut value. Un asemenea buton afieaz
textul "Reset" dac atributul value lipsete, respectiv valoarea
acestui atribut n caz contar.
Cmp de editare de tip "password"
Dac se utilizeaz eticheta avnd atributul type configurat la
valoarea "password" , atunci n formular se introduce un element
asemntor cu un cmp de editare obinuit (introdus prin type="text").
Toate atributele unui cmp de editare rmn valabile. Singura
deosebire const n faptul c acest cmp de editare nu afieaz
caracterele n clar, ci numai caractere *,care ascund de privirile
altui utilizator aflat n apropiere valoarea introdusa ntr-un
asemenea cmp. La expedierea formularului ns, valoarea tastat ntr-un
cmp de tip "password" se transmite n clar.
Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei
singure variante din mai multe posibile. Butoanele radio se
introduc prin eticheta cu atributul type avnd valoarea "radio".
La expedierea formularului se va transmite una dintre perechile
"sex=b" sau "sex=f",n funcie de alegerea fcut de utilizator.
Casete de validare
O caseta de validare (checkbox)permite selectarea sau
deselctarea unei opiuni.
Pentru inserarea unei casete de validare se utilizeaz eticheta
cu atributul type configurat la valoarea "checkbox".
Observaii:
fiecare caset poate avea un nume definit prin atributul
name.
fiecare caset poate avea valoarea prestabilit "selectat" definit
prin atributul checked.
Casete de fiiere
Intr-o pereche "name = value" a unui formular se poate folosi
ntregul continut al unui fiier pe post de valoare.
Pentru aceasta se insereaza un element ntr-un formular , cu
atributul avand valoarea "file" (fiier).
Atributele pentru un element de tip caseta de fiiere:
-atributul name permite ataarea unui nume
-atributul value primete c valoare adresa URL a fiierului care
va fi expediat o data cu formularul. Aceasta valoare poate fi
-atribuit direct atributului value, se poate fi tastat ntr-un cmp
de editare ce apare o data cu formularul sau poate fi selectat prin
intermediul unei casete de tip File Upload sau Choose File care
apare la apsarea butonului Browse... din formular;
-atributul enctype precizeaz metoda utilizat la criptarea
fiierului de expediat.Valoarea acestui atribut este
"multipart/form-data".
Liste de selecie
O list de selecie permite utilizatorului s aleag unul sau mai
multe elemente dntr-o list finit. Lista de selecie este inclus n
formular cu ajutorul etichetelor corespondente i .O list de selecie
poate avea urmtoarele atribute:
atributul name, care ataeaza listei un nume (utilizat n
perechile "name=value" expediat serverului); atributul size, care
precizeaz (printr-un numr ntreg pozitiv , valoarea prestabilit
fiind 1) cte elemente din list sunt vizibile la un moment dat pe
ecran (celelalte devenind vizibile prin acionarea barei de derulare
ataate automat listei). Elementele unei liste de selecie sunt
incluse n lista cu ajutorul etichetei . Dou atribute ale etichetei
option se dovedesc utile: atributul value primete ca valoare un
text care va fi expediat server-ului n perechea "name=value"; dac
acest atribut lipseste ,atunci ctre server va fi expediat textul ce
urmeaza dupa ; atributul selected (far alte valori) permite
selectarea prestabilita a unui element al listei. Lista de selecie
cu selecii multiple. O lista de selecie ce permite selecii multiple
se creeaz ntocmai ca o lista de selecie obinuit. n plus, eticheta
are un atribut multiple (far alte valori). Cnd formularul este
expediat ctre server pentru fiecare element selectat al listei care
este se insereaz cte o pereche "name=value" unde name este numele
listei.
Cmpuri de editare multilinie
ntr-un formular cmpuri de editare multilinie pot fi incluse cu
ajutorul etichetei . Eticheta are urmatoarele atribute:
atributul cols, care specific numrul de caractere afiate ntr-o
linie; atributul rows, care specific numrul de linii afiate
simultan; atributul name, care permite ataarea unui nume cmpului de
editare multilinie; atributul wrap, (de la "word wrap"=trecerea
cuvintelor pe rndul urmtor, care determin comportamentul cmpului de
editare fa de sfritul de linie. Acest atribut poate primi
urmtoarele valori:
a) " off "; n acest caz:
ntreruperea cuvintelor la marginea dreapt a editorului se
produce numai cnd dorete utilizatorul;
caracterul de sfrit de linie este inclus n textul transmis
serverului odat cu formularul;
b) " hard "; n acest caz:
se produce ntreruperea cuvintelor la marginea dreapta a
editorului ; caracterul de sfrit de linie este inclus n textul
transmis serverului o data cu formularul;
c) " soft "; n acest caz:
se produce ntreruperea cuvintelor la marginea dreapta a
editorului ;
nu se include caracterul de sfrit de linie n textul transmis
serverului o data cu formularul;
Un formular complex
n exemplul urmtor este prezentat un formular coninnd elemente
prezentate anterior. Cmpurile formularului sunt incluse n celule
unui tabel pentru a obtine o aliniere dorita.
Butoane
ntr-un formular pot fi afisate butoane.Cnd utilizatorul apasa un
buton, se lanseaza n executie o functie de tratare a acestui
eveniment. Limbajul HTML nu permite scrierea unor astfel de funcii
(acest lucru este posibil dac se utilizeaz limbajele Javascript sau
Java). Pentru a insera un buton ntr-un formular , se utilizeaz
eticheta avand atributul type configurat la valoarea "button". Alte
dou atribute ale elementului "button" sunt: Atributul name, care
permite ataarea unui nume butonului; atributul value, care primete
c valoare textul ce va fi afisat pe buton. Un buton pentru lansarea
n execuie a unei aciuni poate fi introdus ntr-un formular prin
elementul avnd atributul type configurat la valoarea "button", aa
cum s-a vzut mai nainte. Exist o a doua modalitate de a introduce
ntr-o pagin Web un buton de apsat, i anume prin intermediul
blocului .... Un astfel de buton poate fi inserat ntr-un formular,
n acest caz declannd aciuni legate de acel formular, sau poate fi
introdus oriunde n pagin pentru iniierea unor aciuni independente
de formulare.
Atributele posibile ale elementului "button" sunt: name acorda
elementului un nume; value precizeaz textul care va fi afiat pe
buton; type precizeaz aciunea ce se va executa la apsarea butonului
dac acesta este inclus ntr-un formular.Valorile posibile pentru
acest atribut sunt: -"button" , -"submit" ,-"reset". n corpul
blocului ... se poate afla un text sau un marcaj de inserare a unei
imagini.
Observaii finale:
- elementul poate avea un atribut target, care primete c valoare
numele unei ferestre a browserului n care va fi ncrcat rspunsul
trimis serverului WWW la expedierea unui formular.
- toate elementele cuprinse ntr-un formular pot avea un atribut
disabled care permite dezactivarea respectivului element.
- toate elementele de tip text cuprinse ntr-un formular pot avea
un atribut readonly care interzice modificarea coninutului acestor
elemente.
11. Stiluri
Stilurile pun la dispoziia creatorilor de site-uri noi
posibiliti de personalizare a paginilor Web. Un stil reprezint un
mod de a scrie un bloc de text ( adic anumite valori pentru font,
mrime culoare, aliniere, distane fa de margini etc).
Exista dou modaliti de a defini un stil: sintaxa CSS (Cascading
Style Sheets); sintaxa Javascript.
Cascading Style Sheets nseamn "foi n stilul cascad".
Stiluri dedicate
Aceste stiluri se aplic blocurilor de text pentru care sunt
definite. De exemplu:
h1 {text-align:center; color:red;}
Toate titlurile care apar n fiier ca fiind de mrime 1 vor fi de
culoare roie i centrate. Dac dorim ca acelai stil s fie utilizat de
ctre mai multe elemente (de ex. "h1", "h2", i "p") atunci se
utilizeaz o list a acestor elemente, separate prin virgul:
h1, h2, p {text-align:center; color:red;}
Clase de stiluri
Aceste stiluri permit definirea unui stil general i folosirea
lui oriunde este necesar. Exemplu: Definim o clas de stiluri "ac"
(albastru i centrat) n interiorul blocului ..., aflat la rndul lui
n blocul ...:
all.ac {text-align:center; color:blue;}
La utilizarea clasei de stiluri n cadrul unui element se
folosete atributul class avnd c valoare numele clasei de stil.
Acesta este un atribut universal adic este aplicabil tuturor
elementelor.
Observaii:
n interiorul unui bloc ..., comentariile sunt blocuri delimitate
de /* i */ ( c n C, C++, Java i Javascript).
Dac dorim ca o clas de stiluri s fie aplicabil numai pentru
anumite elemente ale documentului (de exemplu "p") atunci n
construcie va aprea acest element ( de exemplu "p.ac").
Stiluri "identificate " Toate elementele unui document admite un
atribut universal numit id. Atributul id poate identifica stilul
utilizat de un element.
Pentru a utiliza un stil "identificat" procedai astfel: n blocul
... introducei definiia stilului conform sintaxei:
#rosu { color: red }
n elementul n care se dorete utilizarea locala a acestui stil ,
folosii atributul id care primete valoare numele stilului definit
anterior. Dac dorim c un stil " identificat " s fie aplicabil numai
pentru anumite elemente ale documentului ( de exemplu "h2") atunci
n construcia selectorului va aprea acest element (de exemplu
"h2#ac").
Stiluri n-line
Stilurile n-line sunt definite chiar n eticheta ce initiaza
blocul n care dorim s se aplice aceste stiluri. Pentru aceasta se
utilizeaz atributul universal style (comun practic tuturor
etichetelor ce par ntr-un document HTML). Valoarea data atributului
style este tocmai descrierea stilului, cuprins nu ntre acolade {..}
ci ntre ghilimele "...".
Dac dorim utilizarea unui anumit style pentru un fragment de
text, atunci includem acest text ntr-un bloc cu ajutorul
delimitatorilor ..., dup care utilizm atributul style pentru
eticheta .
Stiluri definite n fiiere externe
Stilurile definite n interiorul unui bloc ... pot fi transferate
ntr-un fiier extern existnd astfel posibilitatea utilizrii lor n
mai multe fiiere HTML. Pentru a utiliza un stil definit ntr-un
fiier extern se procedeaz astfel: se creaz un fiier care s conin
numai descrierea stilurilor i se salveaz cu extensia .css sau
.html. Coninutul acestui fiier coincide cu coninutul unui bloc ...
, fr ca aceti delimitatori s fie inclui. n fiierul HTML care
utilizeaz stilurile definite n fiierul creat la punctul 1 , se
include n blocul ... o eticheta avnd trei atribute.
atributul rel cu valoarea "stylesheet"; atributul href avand c
valoare adresa URL a fiierului creat la punctul 1 ; atributul type
cu valoarea "text/css". Se utilizeaz titlurile definite n fiierul
extern c i cum ar fi definite n fiierul HTML curent ntr-un bloc
....
Pentru c numai anumite legturi s utilizeze un stil se pot folosi
urmtoarele dou metode:
a: link.CLASA1 {...} combinat cu ...
a: link#ID1 {...} combinat cu ...
n browsere cursorul mouse-ului are n general o forma simpl, lund
pe parcursul vizionrii paginii respective maximum dou nfiri
diferite:
Mna - atunci cnd este poziionat pe o legtura
Bara vertical - atunci cnd este poziionat pe alt obiect dect o
legtura.
Acestea nsa sunt formele implicite. Desigur exista cazuri n care
am dori c browser-ul s aiba o alta forma dect una dintre acestea.
La fel c multe alte probleme care privesc modul n care o pagina
arata i aceasta i gsete rezolvarea n folosirea CSS, c limbaj de
descriere a formei unui document. Proprietatea care gestioneaz
forma cursorului se numeste simplu: cursor i poate fi introdus n
orice element style al unui tag html. De exemplu pentru obinerea
unei imagini a cursorului de tipul unei sgei orientat Est-Vest la
trecerea mouse-ului peste un link iat codul ce va trebui
folosit:
< a href=" fiier.html" style=" cursor :e-resize" "
Legatura< /a>
Iat deci cum va arat (doar pentru IE 4.x sau mai mare):
Legtura
Nu este, ns singurul exemplu, n continuare avei toate codurile
pentru formele de cursor pe care le putei folosi: auto utilizeaz
setrile implicite ale utilizatorului; crosshair creeaz o cruce;
default setrile implicite ale browserului; e-resize sgeat Est-Vest;
hand mn; help semnul ntrebrii; move cruce cu sgei la capete;
n-resize sgeat sud-nord; ne-resize sgeat SudVest NordEst; nw-resize
sgeat SudEst NordVest; pointer mn; s-resize sgeat Nord Sud;
se-resize sgeat NordVest SudEst; sw-resize sgeat NordEst SudVest;
text bara vertical din cmpurile de introducere a datelor
w-resize sgeat Est-Vest; wait clepsidra.
12. Javascript
Javascript este un limbaj de programare simplu , de tip script,
pentru definirea comportamentului elementelor dntr-o pagina Web. Nu
este acelasi lucru cu mult mai complexul limbaj de programare Java.
Javascript poate specifica , n mod obisnuit n doar cateva rnduri ,
raspunsurile la actiuni sau evenimente cum ar fi deschiderea unei
pagini, deplasarea mouse-ului ntr-un anumit punct sau stergerea
unui anumit cmp dintr-un formular. Cea mai simplas aplicatie
Javscript este aceea care determina apariria i derularea unui
mesaj. Scriptul este ncadrat de marcajele ... i totul este inglobat
ntr-un comentariu astfel nct programele de navigare care nu
nterpreteaza Javascript nu sunt derutate de scriptul n sine. Multe
evenimente pot fi gestionate cu Javascript.
Eveniment se desfasoara atunci cnd Handler de eveniment blur
utilizatorul elimina controlul de intare de pe un element al unui
formular onBlur, click utilizatorul executa un click pe un element
al unui formular sau pe o legtur onClick
change utilizatorul modifica valoarea unui text zona de text sau
element de selectie onChange.
Focus utilizatorul atribuie unui element de formular control de
intrare onFocus, load utilizatorul ncarca pagina n progarmul de
navigare onLoad, mouseover utilizatorul deplaseaza indicatorul
mouse-ului deasupra unei legturi sau a unei ancore onMouseover,
select utilizatorul selecteaza cmpul de intare al unui element de
formular onSelect, submit utilizatorul transmite un formular
onSubmit, unload utilizatorul abandoneaza pagina onUnload.n
urmtorul exemplu folosim evenimentul click.
Acest exemplu citeste numele i il saluta.
Un alt exemplu care modific culoarea de fond a paginii. n
exemplul urmtor modificm o imagine atunci cnd cursorul este
pozitionat pe aceasta. Elementul cheie este acela c exista dou
versiuni ale fiecrei imagini: imaginea "on" (corespunztoare
cursorului poziionat deasupra imaginii) i o imagine "off"
(corespunzatoare cursorului poziionat n exteriorul imaginii).
Elementul esenial n acest exemplu este modul n care se pun n
coresponden evenimentele de activare i dezactivare cu evenimentele
specifice: OnMouseOver i OnMouseOut. Primul invoc procedura
Javascript activate atunci cnd mouse-ul este plasat deasupra
imaginii, iar cel de-al al doilea comut imaginea la situaia iniial
atunci cnd mouse-ul este n exteriorul acesteia.
13. Tag-uri
Marcaje de baza Definete un fiier n format Web
Antetul documentului
Tilul documentului
Corpul paginii HTML
BGCOLOR = culoare Culoarea de fond a paginii
TEXT=culoare Culoarea textului pe paginii
LINK=culoare Culoarea legturiilor nevizitate din pagini
VLINK=culoare Culoarea legturiilor vizitate din pagini
ALINK=culoare Culoarea legturiilor pe durata clicului exacutat
de utilizator
BACKGROUND = url Imaginea de fond pentru pagin
Paragraf
Nivel de subtitlu al documentului (n = 1-6)
Specific atribute ale textului ncadrat
SIZE=n Dimensiunea textului este 1-7
FACE="a,b" Specific fontul: a, dac este disponibil, sau b
COLOR=s Culoarea textului: fie un nume de culoare , fie o
valoare RGB
Linie nou
Informaie preformatat
Comenatriu HTML
Centreaz materialul n pagin
Rigl orizontal
SIZE=x nlimea riglei n pixeli
WIDTH=x Limea riglei n pixeli sau n procente
NOSHADE Dezactiveaz afiarea umbrei pentru rigla orizontal
ALIGN=x Alinierea riglei orizontala n pagina (left, center,
right)
COLOR=x Culoarea riglei orizontale (numai pentru IE)
Marcaj de tip ancor
HREF=url Referin hipertext
HREF=#nume Referin ctre o ancor intern
Name=nume Definiia unei ancore interne
Marcaje pentru liste Descriere definiie
List de tip definiie
Termen de definiie
