Proiectare Site Si Web Design

Ministerul Educaţie al Republicii Moldova
Colegiul cu Microelectronică şi Tehnică de Calcul
Catedra:Calculatoare
La lucrarea de laborator Nr:1
Disciplina: Programare Web
Tema: HTML
A efectuat: Student.Gr.C-072
Gurita Iuri
A verificat : Enache Nadejda
Chişinău 2011
Ce este HTML
1
Origini
Unul din primele elemente, fundamentale de altfel, ale WWW (World Wide Web) este HTML
(HyperText Markup Language), standard ce descrie formatul primar in care documentele sint distribuite
si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea
formatarii si legaturile hipertext, fac din el un foarte bun format pentru documentele Internet si Web.
Primele specificatii de baza ale Web-ului au fost HTML, HTTP si URL.
Menire si semnificatii
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML este un limbaj bazat pe
SGML (Standard Generalized Markup Language), o asa-numita aplicatie a acestuia. SGML este un
standard international (ISO-8879) aprobat оn 1986. HTML a fost initial vazut ca o posibilitate pentru
fizicienii care utilizeaza computere diferite sa schimbe intre ei informatie prin mijlocirea Internetului.
Erau prin urmare necesare cateva conditii esentiale: independenta de platforma, posibilitati hipertext si
structurarea documentelor. Independenta de platforma semnifica faptul ca un document poate fi afisat in
mod asemanator (sau aproape identic) de computere diferite (deci cu font, grafica si culori aidoma),
lucru vital pentru o audienta numeroasa si extrem de variata. Hipertext se traduce prin faptul ca orice
cuvint, fraza, imagine sau element al documentului vazut de un utilizator (client) poate face referinta la
un alt document sau chiar la paragrafe din interiorul aceluiasi document, ceea ce usureaza mult
navigarea intre partile componente ale unui document sau intre multiple documente. Structurarea
riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si interogarea
unor baze de date ingloband aceste documente.
Inceputurile
Nascut оn urma cu aproximativ 30 de ani, intr-o tentativa de a rezolva unele probleme ivite la
transportul documentelor intre diferite computere, limbajul hipertext a evoluat incet. In primii ani de
evolutie HTML a demarat lent in principal pentru ca ii lipseau posibilitatile de a reda publicatii
electronice profesionale; limbajul permitea oarece control asupra fonturilor dar nu permitea inserarea
graficii. In 1993, NCSA a imbogatit limbajul pentru a permite inserarea graficii si a construit primul
navigator grafic: Mosaic. Au urmat apoi contributii ad hoc ale diverselor firme care au adus tot felul de
adaugiri limbajului HTML astfel incat, in 1994, limbajul parea scapat de sub control. Urmarea a fost ca
la prima conferinta WWW de la Geneva (Elvetia) s-a constituit un grup de specialisti (HTML Working
Group) a carui prima misiune a fost formalizarea HTML, lucru care s-a concretizat in HTML 2.0.
Importanta actiunii acestui grup consta in faptul ca, odata standardizat, limbajul a putut fi apoi extins
intr-un mod mai controlat la alte nivele.
Standardizarea
Standardul oficial HTML este dat de World Wide Web Consortium (W3C), care este afiliat la Internet
Engineering Task Force (IETF). W3C a enuntat cateva versiuni ale specificatiei HTML, printre care si
HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de
browsere cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara
procesului standard si le-au incorporat in browserele lor. In unele cazuri (cum ar fi tagul Netscape),
aceste extensii au devenit standarde de facto adoptate de autorii de browsere. Cоnd navigatorul incarca
un document HTML, el "citeste" documentul оn cautarea tag-urilor HTML, formateaza textul si
imaginea si le afiseaza pe ecran. Este motivul pentru care acelasi document HTML apare usor diferit
cоnd este privit utilizand navigatoare diferite. Stadiile prin care trece un standard elaborat de W3C sоnt:
1. Orice standard isi incepe aventura ca W3C Note.
2. De aici este preluat de catre un grup particular de lucru (Working Group) si este discutat pana
cand se ajunge la un consens.
3. In acest moment este publicat ca propunere (Working Draft) si in acest stadiu oricine poate face
comentarii.
4. In momentul оn care se obtine o sustinere si un consens suficient de larg, directorul W3C decide
daca specificatia este gata sa devina propunere oficiala de recomandare (Proposed
Recommendation).
5. Urmeaza o perioada de 6 saptamоni оn care toti membrii W3C au sansa sa voteze aceasta
propunere de recomandare; votul nu este obligatoriu, putandu-se vota оn 4 moduri diferite:
o da;
o da, sub rezerva unor imbunatatiri;
2
o nu, pana cоnd anumite sarcini nu sunt indeplinite;
o nu, specificatia trebuie abandonata.
6. Charta W3C stipuleaza necesitatea obtinerii consensului complet, astfel ca fiecare vot trebuie sa
fie un da fara rezerve.
7. Daca toti pasii anteriori au fost indepliniti, specificatia trebuie aprobata in final de Director si se
publica sub forma unui standard (W3C Recommendation).

De ce HTML
Dar de ce a fost preferat HTML pentru publicaţii pe Web, cоnd pentru realizarea publicaţiilor
electronice există multe alte tehnologii? Primul motiv este simplitatea. Al doilea este ca permite
formatarea textului ASCII cu tag-uri оn format ASCII. Rezultă de aici o compresie buna, suport pentru
legaturi hipertext si usurinta in a scrie navigatoare pentru vizualizarea documentelor.
Varianta 2.0
HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente
- inclusiv cele in mod text. HTML 2.0 reflecta conceptia originala a HTML ca un limbaj de marcare
independent de obiectele existente, focalizandu-se pe asezarea lor in pagina, in loc de a specfica exact
cum ar trebui sa arate acestea. Daca doriti sa fiti siguri ca toti vizitatorii vor vedea paginile asa cum
trebuie, folositi tagurile HTML 2.0.
Varianta 3.0
Specificatia HTML 3.0, enuntata in 1995, a incercat sa dezvolte HTML 2.0 prin adaugarea unor facilitati
precum tabelele si un mai mare control asupra textului din jurul imaginilor. Desi unele din noutatile
HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau inca oficializate. In unele cazuri,
taguri asemanatoare implementate de autorii de browsere au devenit mai raspandite decat tagurile
"oficiale". Specificatia HTML 3.0 a expirat repede, deci nu mai este un standard oficial in prezent.
Varianta 3.2
In Mai 1996, W3C a scos pe piata specificatia HTML 3.2 , care era proiectata sa reflecte si sa
standardizeze practicile acceptate la scara larga. Deci HTML 3.2 include tagurile HTML 3.0 care erau
adoptate de autorii de browsere precum Netscape si Microsoft plus noi extensii HTML.
Revolutia HTML 4.0, HTML 4.01
In acest moment, HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01.
Limbajul HTML da proiectantilor de pagini web posibilitatea:
 sa publice documente cu headere, texte, tabele, liste, fotografii, etc...
 sa regaseasca on-line informatii prin intermediul hiperlink-urilor accesate printr-un simplu click
de mouse
 sa proiecteze formulare pentru realizarea tranzactiilor cu servere aflate la distanta, pentru cautari
de informatie sau pentru activitati specifice comertului
 sa includa foi de calcul tabelar, clipuri video, sunete si alte aplicatii direct оn documente.
Elementul esential diferit adus de versiunea 4.0 si mai ales 4.01 fata de versiunea 3.2 este posibilitatea
separarii structurii unui document de prezentarea lui prin introducerea „stilurilor de documente“ (style
sheet). Utilizоnd limbajul HTML pentru structurarea unui document si style sheet-urile pentru a stiliza
prezentarea acestuia, proiectantii pot obtine mult mai usor independenta de periferic/ computer/
platforma hard-soft, lucru care a facut HTML-ul atоt de popular. Un document cu o structura complexa
poate fi prezentat in diferite moduri pe medii diferite, permitand documentului insusi sa se adapteze mai
usor noilor tehnologii (cum ar fi, de exemplu, browserele capabile sa vorbeasca, cititoarele braille,
etc...).
In plus, separarea continutului de partea de prezentare permite modificarea infatisarii chiar a unui intreg
site doar prin modificarea unui style-sheet (a unui document care descrie stilul). Experienta a demonstrat
ca o astfel de abordare poate reduce dramatic costurile de deservire a unui spectru larg de platforme si
probleme, facilitоnd si o intretinere ulterioara si modificari mult mai usoare.
Ministerul Educaţie al Republicii Moldova

3
Tema:Fundamente HTML
Gurita Iuri
Chişinău 2011
Fundamente HTML
Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Astfel de perechi
de marcaje sau etichete (acolo unde sunt perechi) se numesc in literatura de specialitate TAG-uri. Prin
conventie, toate marcajele HTML incep cu o paranteza unghiulara deschisa "<" si se termina cu o
4
paranteza unghiulara inchisa ">". Marcajele dintre aceste paranteze transmit comenzi catre browser
pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce
pentru alte blocuri acest delimitator este optional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:
- sectiunea de antet: <head>...</head>
- corpul documentului: <body>...</body>
Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in
ferastra browser-ului. Un marcaj poate fi scris atat cu litere mici, cat si cu litere mari. De exemplu
<BODY> = <BodY> = <body>. Caracterele "spatiu" si "CR/LF" ce apar intre taguri sunt ignorate de
catre browser.
Un prim document HTML ar fi ceva de genul acesta:

<html>
<head> </head>
<body> </body>
</html>
Asa arata primul document HTML. Copiati-l folosind Copy/Paste intr-un fisier nou si salvati-l ca
PRIM.HTM sau PRIM.HTML. Apoi porniti Netscape Navigator sau Internet Explorer, dati CTRL-O si
introduceti calea spre fisier. Dati OK si... nimic. Este normal, deoarece fisierul HTML din exemplul
anterior nu incorporeaza text util.
Vom adauga primele elemente de text

In primul rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head> urmatoarea linie:
<title>Aceasta este titlul primei mele pagini de Web</title>
In plus, in sectiunea <body>...</body> putem scrie texte cat dorim. Daca nu intalnim nici un marcaj "<"
sau ">", atunci interpretorul HTML le va lua ca texte simple si le va afisa pe ecran. Sa vedem o noua
versiune a paginii noastre:
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>
Continutul blocului <title>...</title> va aparea in bara de titlu a ferestrei browser-ului. Daca acest bloc
lipseste intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului.
Trecerea pe o linie noua - se face in HTML cu o comanda explicita, care trebuie sa apara in codul sursa
html. Aceasta comanda este marcajul <br> (de la "line break" - intrerupere de linie). Folosind aceleasi
operatii ca mai sus, vizualizati noua pagina. Veti vedea textul ce apare in fereastra browserului. In plus,
pagina dvs. va avea un titlu nou, cel introdus de dvs.. Ex.:
<html>
<head>
<title> titlul paginii</title>
</head>
<body> Bine ati venit in <br> pagina mea de Web!
</body>
</html>
Culoarea de fond
O culoare poate fi precizata in doua moduri:
1. Printr-un nume de culoare. Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray,
green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
2. Prin constructia "#RRGGBB" unde R(red), G(green), sau B(blue) sunt cifre hexazecimale si pot lua
valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
5
Culoarea fundalului unei pagini se precizeaza prin intermediul unui atribut al tagului BODY. mai exact
cu atributul "bgcolor" din cadrul etichetei <body>. De exemplu: <body bgcolor = culoare> .
Culoarea textului
Acest lucru se seteaza prin intermediul atributului "text" al tagului BODY, dupa sintaxa <body
text=culoare>. In urmatorul exemplu textul are culorea rosie:
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
Un text de culoare rosie.
</body>
</html>
O eticheta poate avea mai multe atribute.

De exemplu, o eticheta cu trei atribute arata astfel: <eticheta atribut1 = valoare1 atribut2 =
valoare2 atribut3 = valoare3> . Urmatorul exemplu prezinta o pagina cu fondul de culoare
albastra si textul de culoare galbena:
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>
Textul afisat este caracterizat de urmatoarele atribute: Marime (font size) - aici implicita, Culoare
(font color) - aici implicita, Font (font family) - aici implicit.
Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul
a doua atribute ale etichetei <body>:
1. "Leftmargin" (stabileste distanta dintre marginea stanga a ferestrei browserului si marginea stanga a
continutului paginii);
2. "Topmargin" (stabileste distanta dintre marginea de sus a ferestrei browserului si marginea de sus a
continutului paginii);
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br><basefont style="Arial" color="blue" size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6. </body>
</html>
Stiluri pentru blocurile de text

Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intre tagurile
<b>...</b> (b vine de la "bold" = indraznet ).

Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de tagurile
<i>...</i> (i vine de la "italic").
Pentru a insera secvente de text ca indice (sub-script) sau ca exponent (super-script), aceste fragmente
trebuie delimitate de tagurile <sub>...</sub>, respectiv <sup>...</sup>.
6
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> (u vine de la
"underline"). Ministerul Educaţie al Republicii Moldova
Tema: HTML
Gurita Iuri
Chişinău 2011
Fonturi in HTML
7
Un font este un text caracterizat de urmatoarele atribute:
1. Culoare (stabilita prin atributul "color");
2. Tipul sau stilul (stabilit prin atributul "face");
3. Marimea (definita prin atributul "size");
4. Marimea in puncte tipografice (stabilita prin atributul "point-size");
5. Grosime (definita prin atributul "weight").
Toate aceste atribute apartin etichetei <font>, care permite inserarea de blocuri de texte personalizate.
Culori
O culoare poate fi precizata in doua moduri:
1. printr-un nume de culoare.
2. printr-o constanta conform standardului de culoare RGB (Red, Green, Blue). O astfel de constanta se
formeaza astfel: #rrggbb, unde r, g si b sunt cifre hexazecimale.
Culorea fontului
Pentru a scrie un fragment de text cu caractere de o anumita culoare, se incadreaza acest fragment intre
marcajele de font, avand stabilit atributul color la valoarea necesara.
Familia fontului
Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de caractere). Exista cinci
familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor: "serif",
"sans serif", "cursive", "monospace" si "fantasy". Tipul de font necesar poate fi stabilit prin atributul
"face" al etichetei. Pot fi introduse mai multe fonturi separate prin virgula. In acest caz browserul va
utiliza primul font pe care il cunoaste.
Marimea fontului
Pentru a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile acestui atribut pot fi:
1. 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font si 7 pentru cel mai mare);
2. +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;
3. -1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.
Blocuri de Text
Tagurile care definesc blocuri de text nu se refera la particularitatile caracterelor ce compun textul, ci la
functiile pe care le poate avea un bloc de text in cadrul paginii Web. Etichetele care lucreaza cu blocuri
de text produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar.
Identarea unui bloc

Pentru ca un bloc de text sa fie indentat (marginea din stanga a textului sa fie deplasata la dreapta la o
anumita distanta fata de marginea din stanga a paginii), acesta trebuie inclus intre etichetele
<blockquote>...</blockquote>, astfel:
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaza este indentat:<blockquote>Bloc de text identat</blockquote>
</body>
</html>
Intr-un fisier HTML, caracterele "<" si ">" au o semnificatie speciala pentru browser. Ele incadreaza
comenzile si atributele de afisare a elementelor intr-o pagina. Daca dorim ca un fragment de text sa
contina astfel de caractere, acest fragment trebuie incadrat de una dintre perechile de etichete:
8
1. <xmp>...</xmp> (80 de caractere pe rand);
2. <listing>...</listing> (120 de caractere pe rand).
Aceste marcaje interpreteaza corect (ca text afisabil in browser) caracterele "spatiu", "eticheta" si
"CR/LF". Textul afisat in pagina este monospatiat. Exemplu:
<html>
<head>
<title> xmp si listing</title>
</head>
<body>
Un fisier html standard arata astfel: <xmp> <html>
<head>
<title> </title>
</head>
<body>
O pagina Web ...
</body>
</html> </xmp> </body>
</html>
Blocuri paragraf
Etichetea paragraf <p> face posibila trecerea la o linie noua si permite:
1. inserarea unui spatiu suplimentar inainte de blocul paragraf;
2. inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul </p> (acesta
fiind optional);
3. alinierea textului cu ajutorul atributului "align", avand valorile posibile "left", "center" sau "right".
Exemplu:
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la stanga).
<p align="right"> Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.
</body>
</html>
Blocuri de titlu
Intr-un text, titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <H2>. <H3>, <h3>,
<h4>, <h5>, <h6>. Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de
incheiere similara. Aceste etichete accepta atributul "align" pentru alinierea titlului blocului de text la
stanga (in mod prestabilit), in centru si la dreapta. Tag-ul "H2" permite scrierea unui titlu cu caractere
mai mari si aldine, pe cand <h6> foloseste caracterele cele mai mici. Exemplu:
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<H2 align="center"> Titlu de marime 1 aliniat in centru </H2>
<H3 align="right"> Titlu de marime 2 aliniat la dreapta. </H3>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
9
Linii orizontale
Intr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a
configura o linie orizontala se utilizeaza urmatorele atribute ale etichetei <hr>:
1. "align" ce permite alinierea orizontala a liniei. Valorile posibile sunt "left" ,"center" si "right";
2. "width" permite alegerea lungimii liniei;
3. "size" permite alegerea grosimii liniei;
4. "noshade" cand este prezent defineste o linie fara umbra;
5. "color" permite definirea culorii liniei.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<H2 align="center"> Tipuri de linii orizontale </H2> O linie implicita, aliniere stanga,
latime 100%, grosime 2 cu umbra.
<hr>
Urmeaza o linie aliniata in centru, de latime 50%, grosime 5 pixeli, fara umbra.
<hr align="center" width="50%" size="5" noshade>Urmeaza o linie aliniata la dreapta,
de latime 150 de pixeli, grosime 12 pixeli, de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
Blocuri CENTER
Blocul introdus de etichetele <center>...</center> aliniaza centrat toate elementele pe care le contine.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr
width=70%> <hr width=40%> <hr width=10%> </center>
</body>
</html>
Blocuri DIV
Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc
<div> (diviziune) este "align" (aliniere). Valorile posibile ale acestui parametru sunt:
1. "left" (aliniere la stanga);
2. "center" (aliniere centrala);
3. "right" (aliniere la dreapta).
Un bloc <div>...</div> poate include alte subblocuri. In acest caz, alinierea precizata de atributul align
al blocului are efect asupra tuturor subblocurilor incluse in blocul <div>. Un bloc <div>...</div> admite
atributul "nowrap" care interzice intreruperea randurilor de catre browser la afisare.
Exemplu de utilizare a tagului DIV:
<html>
<head>
<title>Blocul DIV</title>
</head>
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.
<div align="right">
10
O singura linie.O singura linie.O singura linie.O singura linie.<br>
</div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body>
</html>
Lucrul cu Imagini
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru fisierele
imagine sunt:
1. GIF (Graphics Interchange Format) cu extensia .gif;
2. JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
3. XPM (X PixMap) cu extensia .xmp;
4. XBM (X BitMap) cu extensia .xbm;
5. BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
6. TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai raspandite formate sunt GIF (8 biti pentru o culoare, 256 culori posibile) si JPEG (24 biti
pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini

URL ("Uniform Resource Locator" = identificator unic al resursei) este un standard folosit in
identificarea unica a unei resurse in Internet. Toate imaginile cu care vom lucra vor avea adresa URL
exprimata in functie de directorul ce contine documentul HTML care face referire la imagine.
Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la "image"= imagine).
Pentru a putea identifica imaginea care va fi inserata se utilizeaza un atribut al etichetei <img> si
anume "src" (de la "source"= sursa). Daca imaginea se afla in acelasi director cu fisierul HTML care
face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv
extensia. Daca imaginea se afla intr-un subdirector al directorului paginii HTML din care este apelata, sa
spunem "images", atunci aceasta este apelata cu URL-ul: "/images/imagine1.jpg" . In schimb, daca
fisierul imagine este situat intr-un director "images" dintr-un super director al directorului paginii HTML
apelante, referirea se face cu URL-ul: "../images/imagine1.jpg" . Exemplu:
<html>
<head>
<title> O pagina cu imagine</title>
</head>
<body>
O pagina care contine o imagine in subdirectorul images dintr-un super director al
unui superdirector al directorului paginii HTML
<img src="../../images/imagine1.jpg">Text dupa imagine.
</body>
</html>
Chenarul si dimensionarea unei imagini

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul "border" al etichetei <img>.
Valorile acestui atribut sunt numere intregi pozitive.
O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul crearii ei. Daca nu se
cere altfel, aceste dimensiuni sunt respectate in momentul afisarii ei in browser, in cadrul paginii web.
Dimensiuniile prestabilite ale unei imagini pot fi modificate la afisarea in browser prin intermediul
11
atributelor "width" si "height" setate de proiectant in codul HTML al paginii la valorile dorite. Spre
exemplu:
<html>
<head>
<title> Imagine cu chenar si marit</title>
</head>
<body>
O imagine cu chenar si de 200 pixeli X 15 %
<img src="/images/imagine1.jpg" border="5" width="350" height="25%"> Text dupa
imagine.
</body>
</html>
Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului "align" care poate lua urmatorele
valori:
1. "left" - aliniere la stanga; celelalte componente sunt dispuse pe partea dreapta;
2. "right" - aliniere la dreapta; celelalte componente sunt dispuse pe partea stanga;
3. "top" - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede
imaginea;
4. "middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede
imaginea.
5. "bottom" - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.
Exemplu:
<html>
<head>
<title> Alinierea unei imagini</title>
</head>
<body>
Alinieri:
<br> Pe verticala:
<img src="/images/img1.jpg" align="top">
La mijloc: <img src="/images/img1.jpg" align="middle">
Jos: <img src="/images/img1.jpg" align="bottom"> Text dupa imagine.
</body>
</html>
Alinierea textului in jurul imaginii

Atributele "hspace" si "vspace" precizeaza distanta in pixeli pe orizontala, respectiv pe verticala,
dintre imagine si restul elementelor din pagina. Atributul "alt" admite ca valoare un text care va fi
afisat in locul imaginii, in functie de setarile browserului utilizatorului:
<html>
<head>
<title> Alinierea textului</title>
</head>
<body>
<h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.
</h4><p> Text inainte de imagine.Text inainte de imagine.Text inainte de
imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de imagine.Text
inainte de imagine.Text inainte de imagine.
<img src="../images/img1.jpg" align="left" hspace="30" vspace="30"
alt="Universitatea de Nord Baia Mare">
Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa
imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa
imagine.Text dupa imagine.
12
</body>
</html>
Imagini pentru fondul unei pagini

O imagine poate fi utilizata pe post de fundal al unei pagini Web. In acest scop se foloseste atributul
"background" al etichetei <body>, avand ca valoare adresa URL a imaginii. Imaginea se multiplica pe
orizontala si pe verticala pana umple intregul ecran. De exemplu:
<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background="../images/img1.jpg">
1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>
Imagini folosite ca legaturi

O legatura (link) introduce in pagina Web o zona activa. Efectuand click cu butonul mouse-ului pe
aceasta zona, in browser se va incarca o alta pagina. Pentru a utiliza imaginea "legatura.jpg" drept
legatura catre pagina index.html utilizam sintaxa:
<a href ="index.html"><img src= "../../images/img1.jpg "></a>
In mod prestabilit, imaginea utilizata pe post de zona activa este inconjurata de un chenar avand
culoarea unei legaturi. Daca stabilim pentru atributul "border" al etichetei <img> la 0, acest chenar
dispare. Exemplu:
<html>
<head>
<title> Imagini folosite ca legaturi</title>
</head>
<body"><h4>Imagini folosite ca legaturi</h4>
Text inainte de imagine.<a href="index.html"><img src="../../images/img1.jpg "></a>
Text dupa imagine.
</body>
</html>

Legaturi in HTML
Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text
obisnuit in hipertext sau hiperlegatura, care permite trecerea rapida de la o informatie aflata pe un
anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone
active intr-o pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului.
Legaturi intre pagini aflate in acelasi director

O legatura de pe o pagina catre o alta aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de
la "anchor"= ancora). Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a>
numit "href", care ia ca valoare numele fisierului HTML aflat in acelasi director. Zona activa care
devina sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele
<a> si </a>. Prezenta etichtetei de sfarsit </a> este obligatorie. Exemplu:
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 1 </h3>
13
<a href="pagina_2.html">
Link catre pagina 2 </a>
</body>
</html>
Legaturi intre pagini aflate pe acelasi disc local

Daca pagina referita se afla pe acelasi disc local cu pagina care face referirea dar intr-un alt director,
atunci, pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relativa, dupa
cum urmeaza (se mentine analogia cu adresarea relativa a imaginilor):
<html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local</title>
</head>
<body>
<h3>Pagina 3 </h3>
<a href="../../exemple/list/exemplu_11.html">
Link catre o pagina cu liste </a>
</body>
</html>
O legatura catre un site particular

In exemplul urmator se utilizeaza adresa URL www.netscape.com care incarca pagina de start din site-ul
firmei Netscape Corporation:
<html>
<head>
<title> Link catre site-ul firmei Netscape</title>
</head>
<body>
<h3>Link catre site-ul firmei Netscape </h3>
<a href="http://www.netscape.com">
Netscape Corporation </a>
</body>
</html>
Ancore
Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi. O ancora se defineste
de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaza atributul "name" care primeste ca
valoare un nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legatura catre "leg1" definita in
aceeasi pagina, se utilizeaza eticheta <a> avand atributul "href" la valoarea "#leg1". Pentru a introduce o
legatura catre o ancora definita in alta pagina aflata in acelasi director, atributul "href" primeste de data
aceasta o valoare de forma "nume_fisier.html#nume_ancora" . Exemplu:
<html>
<head>
<title> Ancore definite in acelasi document si in alt document</title>
</head>
<body>
<h3>Ancore definite in acelasi document si in alt document </h3>
<a href="#ancora1">
Link catre ancora 1 </h3>
<a href="../../legaturi.html#anc">
Link catre o ancora din alt document </a>
<br> 1<br>2<br>3<br>4<br>5
<a name="ancora1">Ancora 1
</body>
</html>
14
Legaturi catre fisiere oarecare
O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice servere din Internet. Pentru
aceasta se utilizeaza eticheta <a> avand valoarea atributului "href" egala cu adresa URL a fisierului
destinatie. Atunci cand se efectueaza clic pe legatura din exemplul urmator, browserul deschide o caseta
de dialog intitulata "File download" care permite:
1. sa salvati pe discul local fisierul;
2. sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de tipul respectiv.
Exemplu:
<html>
<head>
<title> Legaturi catre fisiere oarecare</title>
</head>
<body>
<h3>Legaturi catre fisiere oarecare</h3><br>
<a href="fisier.zip">
Link catre fisierul fisier.zip
</body>
</html>
Liste in HTML
Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii,
referinte sau indexuri. Glosarele sunt exemple clasice in acest sens; cuvintele sunt listate in ordine
alfabetica, urmate de definitii ale termenilor respectivi. In HTML, intreaga sectiune a unui glosar va fi
gestoinata printr-o lista de definitii care este inclusa intr-o pereche de marcaje de tip lista de definitii:
<dl>...</dl> (de la "definition list" = lista de definitii).
Observatii:
- Un termen al listei este marcat de eticheta <dt> (de la "definition term"= termen definit);
- Definitia unui termen este initiata de eticheta <dd> (de la "definition description"= descrierea
definitiei);
- Definitia unui termen incepe pe o linie noua si este identata;
Exemplu:
<html>
<head><title>listex_1</title></head>
<body><H2 align=center>O lista de definitii</H2><hr>
<dl>
Glosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza
poate face legatura catre un alt punct din document sau catre un alt document
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii
care sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub-setul de date care are efectiv semnificatie si care este util la momentul
curent
</dl>
</body>
</html>
Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> ("ul" vine de la
"unordered list"= lista neordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista
va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou. Exemplu:
15
<html>
<body><H2 align=center>O lista neordonata</H2><hr>
Glosar de termeni World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
</body>
</html>
Tag-urile <ul> si <li> pot avea un atribut " type" care sabileste caracterul asfisat in fata fiecarui
element al listei. Valorile posibile al acestui atribut sunt:
1. "circle" (cerc);
2. "disc" (disc plin) - valoarea implicita;
3. "square" (patrat);
Listele neordonate pot fi imbricate pe mai multe niveluri, ca in exemplul urmator:
<html>
<body><H2 align=center>O lista neordonata de liste neordonate</H2><hr>
Glosar de termeni de World Wide Web
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul>
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul>
</ul>
</body>
</html>
Liste ordonate
O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> ("ol"
vine de la "ordered list"= lista ordonata). Fiecare element al listei este initiat de eticheta <li> (list item).
Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.
Exemplu:
<html>
<body><H2 align=center>O lista ordonata</H2><hr>
<ol>Culori uzuale disponibile prin nume
</ol>
</body>
</html>
Tag-urile <ol> si <li> pot avea un atribut " type" care stabileste tipul de caractere utilizate pentru
ordonarea listei. Valorile posibile sunt:
1. "A" pentru ordonare de tipul A, B, C, D, etc. (litere mari);
2. "a" pentru ordonare de tipul a, b, c, d, etc. (litere mici);
3. "I" pentru ordonare de tipul I, II, III, IV, etc. (cifre romane mari);
4. "i" pentru ordonare de tipul i, ii, iii, iv, etc. (cifre romane mici);
5. "1" pentru ordonare de tipul 1, 2, 3, 4, etc. (cifre arabe - optiune prestabilita);
Urmatorul exemplu este o lista ordonata cu cifre romane:
<html>
<body><H2 align=center>O lista ordonata cu cifre romane</H2><hr>
<ol type="I">Culori uzuale disponibile prin nume
</ol>
</body>
</html>
16
Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a secventei de ordonare. Valoarea
acestui atribut trebuie sa fie un numar intreg pozitiv.
Urmatorul exemplu este o lista ordonata cu litere mari, incepand cu valoarea C.
<html>
<body><H2 align=center>O lista ordonata cu litere mari, incepand de la valoarea
C</H2><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca in exemplul urmator:
<html>
<body><H2 align=center>O lista ordonata de liste ordonate si neordonate</H2><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>

Tabele in HTML
Tabelele ne permit sa cream o retea dreptunghiulara de zone, fiecare zona avand propriile optiuni pentru
culoarea fondului, culoarea textului, alinierea textului, etc.
Pentru a insera un tabel se folosesc etichetele corespondente <TABLE>...</TABLE>. Un tabel este
format din randuri. Pentru a insera un rand intr-un tabel se folosesc etichetele <TR> ...</TR> (de la
"table row" = rand de tabel ). Folosirea etichetei de sfarsit este optionala. Un rand este format din mai
multe celule ce contin date. O celula de date se introduce cu etichetele <TD>...</TD>.
In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tabel, se utilizeaza un atribut
al etichetei numit "border". Acest atribut poate primi ca valoare orice numar intreg (inclusiv 0) si
reprezinta grosimea in pixeli a chenarului tabelului. Daca atributul "border" nu este urmat de o valoare,
atunci tabelul va avea o grosime prestabilita egala cu 1 pixel. O valoare egala cu 0 a grosimii semnifica
17
absenta chenarului. Cand atributul "border" are o valoare nenula, chenarul unui tabel are un aspect
tridimensional.
Alinierea tabelului
Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul "align" al etichetei <TABLE>, cu
urmatoarele valori posibile: "left" (valoarea prestabilita), "center" si "right ". Alinierea este importanta
pentru textul ce inconjoara tabelul. Astfel:
- daca tabelul este aliniat stanga, atunci textul care urmeaza dupa punctul de inserare al tabelului va fi
dispus in partea dreapta a tabelului.
- daca tabelul este aliniat dreapta, atunci textul care urmeaza dupa punctul de inserare al tabelului va fi
dispus in partea stanga a tabelului.
- daca tabelul este aliniat pe centru, atunci textul care urmeaza dupa punctul de inserare al tabelului va fi
afisat pe toata latimea paginii, imediat sub tabel.
Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu ajutorul atributului "bgcolor", care poate fi atasat intregului tabel
prin specificarea in cadrul etichetei <table> sau numai celulor de date prin specificarea sa in etichetele
de celula (<td>). Valorile pe care le poate primi atributul "bgcolor" sunt cele cunoscute pentru o culoare.
Dimensionarea celulei unui tabel

Distanta dintre doua celule vecine se defineste cu ajutorul atributului "cellspacing" al etichetei
<TABLE>. Valorile acestui atribut pot fi numere intregi pozitive, inclusiv 0, si reprezinta distanta in
pixeli dintre doua celule vecine. Valorea prestabilita a atributului "cellspacing" este 2. Distanta dintre
marginea unei celule si continutul ei poate fi definita cu ajutorul atributului "cellpadding" al etichetei
<TABLE>. Valorile acestui atribut pot fi numere intregi pozitive si reprezinta distanta in pixeli dintre
celule si continutul lor. Valorea prestabilita a atributului "cellpadding" este 1.
Dimensionarea unui tabel

Dimensiunile unui tabel - latimea si inaltimea - pot fi stabilite exact prin intermediul a doua atribute -
"width" si "height" - ale etichetei <TABLE>. Valorile acestor atribute pot fi:
1. numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a tabelului;
2. numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea din latimea si inaltimea
totala a paginii.
Alinierea continutului unei celule

Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului "align" care poate lua
valorile:
1. "left" (la stanga);
1. "center" (centrat) - valoarea prestabilita;
3. "right" (la dreapta);
4. "char" (alinierea se face fata de un caracter).
Alinierea pe verticala a continutului unei celule se face cu ajutorul atributului "valign" care poate lua
valorile:
1. "baseline" (la baza);
2. "bottom" (jos);
3. "middle" (la mijloc, valoarea prestabilita);
4. "top" (sus).
Exemplu de tabel reunind toate elementele descrise pana acum:
<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15" width="100%">
<tr>
<td align="middle">data data data</td>
18
</tr>
<tr>
</tr>
<tr align="right">
<td>data data data</td>
</tr>
</table>
</body>
</html>
Tabele cu forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor
<TR> si <TD>, o celula se poate extinde peste celule vecine. Astfel:
1. extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului "colspan", a carui
valoare determina numarul de celule care se unifica.
2. extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului "rowspan", a carui
valoare determina numarul de celule care se unifica.
Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. In acest caz, in etichete vor
fi prezente ambele atribute "colspan" si "rowspan".
Exemplu:
<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15" width="100%">
<tr>
<td align="middle" rowspan="3">data data data</td>
<td align="middle" colspan="2">data data data</td>
</tr>
<tr>
</tr>
<tr align="right">
</tr>
</table>
</body>
</html>
Cadre in HTML
Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului sub-ferestre in care sa putem
incadra documente noi HTML. Sub-ferestrele sunt definite intr-un fisier HTML special, in care blocul
<body>...</body> este inlocuit de blocul <frameset>...</frameset>. In interiorul acestui bloc, fiecare
cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este "src", ce primeste ca valoare adresa URL a
19
documentului HTML care va fi incarcat in acel frame. Definirea cadrelor se face prin impartirea ferestrei
ecran (si a subferestrelor) in linii si coloane:
1. impartirea unei ferestre intr-un numar de subferestre de tip coloana se face cu ajutorul atributului
"cols" al etichetei <frameset> ce descrie acea fereastra;
2. impartirea unei ferestre intr-un numar de subferestre de tip linie se face cu ajutorul atributului
"rows" al etichetei <frameset> ce descrie acea fereastra;
3. valoare atributelor "cols" si "rows" este o lista de elmente separate prin virgula, care descriu modul in
care se face impartirea. Elementele listei pot fi:
3.1. un numar intreg de pixeli;
3.2. procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %);
3.3. n* care inseamna n parti din spatiul ramas;
Exemplu 1: "cols=200,*,50%,*" inseamna o impartire in 4 subferestre, dintre care prima are 200
pixeli latime, a treia ocupa jumatate din spatiul total disponibil iar a doua si a patra ocupa in mod egal
restul de spatiu ramas disponibil.
Exemplu 2: "cols=200,1*,50%,2*" inseamna o impartire in 4 subferestre, dintre care prima are
200 pixeli latime, a treia ocupa jumatate din spatiul total disponibil iar a doua si a patra ocupa in mod
egal restul de spatiu ramas disponibil, care se imparte in trei parti egale, a doua fereastra ocupand o parte
iar a patra ocupand 2 parti.
Observatii:
- daca mai multe elemente din lista sunt configurate cu *, atunci spatiul disponibil ramas pentru ele se va
imparti in mod egal.
- o subfereastra poate fi un singur cadru (folosind <frame>) - in care se va incarca un document HTML
- sau poate fi impartita la randul ei la alte subfereste constituind cadre noi (folosind <frameset>).
Exemplu:
<html>
<head><title>ferex_1</title></head>
<frameset cols="*,*">
<frame src="p1.html">
</frameset>
</html>
In exemplul urmator este creata o pagina Web cu trei cadre orizontale. Pentru al doilea cadru valoarea
atributului "src" este adresa URL a unei imagini, ca in exemplu:
<html>
<frameset rows="100,*,10%">
<frame src="x.jpg">
</frameset>
</html>
In exemplul urmator este creata o matrice de 4 cadre (2 x 2). Pentru a realiza acest lucru, se folosesc
simultan cele doua atribute Cols si Rows, precum in exemplul urmator:
<html>
<frameset rows="*,*" cols="*,*">
</frameset>
</html>
In exemplul urmator este creata o pagina Web cu trei cadre mixte. Pentru a o crea se procedeaza din
aproape in aproape. Mai intai, pagina este impartita in doua subferestre de tip coloana, dupa care a doua
subfereastra este impartita in doua subferestre de tip linie, ca in exemplul de mai jos:
20
<html>
<frameset cols="20%,*">
<frameset rows="*,*">
</frameset>
</frameset>
</html>
Culori pentru chenarele cadrelor si dimensionarea chenarului unui cadru

Pentru a stabili culoarea chenarului unui cadru se utilizeaza atributul "bordercolor". Acest atribut
primeste ca valoare un nume de culoare sau o culoare definita in conformitate cu modelul de culoare
RGB. Atributul bordercolor poate fi atasat atat etichetei <frameset> pentru a stabili culoarea tuturor
chenarelor cadrelor incluse, cat si etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru
individual.
Atributul "border" al etichetei <frameset> permite configurarea latimii chenarelor tuturor cadrelor la
un numar dorit de pixeli. Valoarea prestabilita a atributului "border" este de 5 pixeli. O valoare de 0
pixeli va defini un cadru fara chenar.
Exemplu:
<html>
<frameset cols="20%,*" bordercolor="green" border="15">
<frame src="p2.html" bordercolor="blue"> <frame src="p3.html">
</frameset>
</html>
In mod prestabilit, chenarul afisat al unui cadru are aspect tridimensional. Afisarea chenarului unui
cadru poate fi dezactivata daca se utilizeaza atributul "frameborder" cu valoare "no". Acest atribut
poate fi atasat atat etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele incluse) cat si
etichetei <frame> (dezactivarea fiind valabila numai pentru un singur cadru).
Exemplu:
<html>
<head><title>ferex_5_1</title></head>
<frameset cols="20%,*" border="0">
</frameset>
</html>
<html>
<head><title>ferex_5_2</title></head>
<frameset cols="20%,*" frameborder="no">
</frameset>
</html>
21
Bare de defilare
Atributul "scrolling" al etichetei <frame> este utilizat pentru a adauga unui cadru o bara de derulare
care permite navigarea in interiorul documentului afisat in interiorul cadrului. Valorile posibile sunt:
1. "yes" - barele de derulare sunt adaugate intotdeauna;
2. "no" - barele de derulare nu sunt utilizabile;
3. "auto" - barele de derulare sunt vizibile atunci cand este necesar
Exemplu:
<html>
<frameset cols="*,*,*">
<frame src="p.html" scrolling="yes" noresize>
<frame src="p.html" scrolling="no" noresize>
<frame src="p.html" scrolling="auto" noresize>
</frameset>
</html>
Atributul "noresize" al etichetei <frame> (fara nici o valoare suplimentara) daca este prezent, inhiba
utilizatorului posibilitatea de a redimensiona cadrul cu ajutorul mouse-ului.
Pozitionarea documentului intr-un cadru

Atributele "marginheight" si "marginwidth" ale etichetei <frame> permit stabilirea distantei in pixeli
dintre continutul unui cadru si marginile verticale, respectiv orizontale ale cadrului.
Valori posibile:
- numar de pixeli;
- procent din latimea, respectiv din inaltimea cadrului;
Exemplu:
<html>
<frameset cols="*,*,*">
<frame src="p.html">
<frame src="p.html" marginheight=20>
<frame src="p.html" marginwidth=20>
</frameset>
</html>
Exista browsere care nu suporta cadre. Pentru aceasta se utilizeaza in interiorul blocului <frameset>
eticheta <noframes>. Daca programul de navigare stie sa interpreteze cadre, va ignora ce se gaseste in
aceasta portiune, iar daca nu, materialul cuprins in zona <noframes>...</noframes> va fi singurul care va
fi inteles si afisat. De precizat este faptul ca intre <noframes> ... </noframes> se pot introduce orice alte
tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).
Formulare in HTML
Un formular este un ansamblu de zone active alcatuit din butoane, casete de selectie, campuri de
editare, etc. Formularele asigura construirea unor pagini Web care sa permita utilizatorilor sa introduca
efectiv informatii si sa le transmita serverului. Formularele pot varia de la o simpla caseta de text, pentru
introducerea unui sir de caractere pe post de cheie de cautare - element caracteristic tuturor motoarelor
de cautaredin Web, pana la o structura complexa, cu multiple sectiuni, care ofera facilitati puternice de
transmisie a datelor. O sesiune cu o pagina web ce contine un formular cuprinde urmatoarele etape:
1. Utilizatorul completeaza formularul si il expedieaza unui server.
2. O aplicatie dedicata de pe server analizeaza formularul completat si (daca este necesar) stocheaza
datele intr-o baza de date.
3. Daca este necesar serverul expedieaza un raspuns utilizatorului.
Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> si </form>.
Atribute esentiale ale elementului <form>

Exista doua atribute esentiale ale elementului <form>:
22
1. Atributul "Action" precizeaza ce se va intampla cu datele formularului odata ce acestea ajung la
destinatie. De regula, valoarea atributului "Action" este adresa URL a unui script aflat pe un srver
WWW care primeste datele formularului, efectueaza o prelucrare a lor si expedieaza catre utilizator un
raspuns. Exemplu:
<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.
Script-urile pot fi scrise in limbajele Perl, C, PHP, Unix shell, Java.
2. Atributul "Method" precizeaza metoda utilizata de browser pentru expedierea datelor formularului.
Sunt posibile urmatoarele valori:
2.1. "Get" (valoarea implicita). In acest caz, datele din formular sunt adaugate la adresa URL precizata
de atributul "Action". Atentie insa:
- nu sunt permise cantitati mari de date (maxim 1 Kb)
- intre adresa URL si date este inserat un "?".
Datele sunt adaugate conform sintaxei: "nume_camp = valoare_camp". Intre diferite seturi de date este
introdus un "&". Exemplu:
http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2
2.2. "Post". In acest caz datele sunt expediate separat. Sunt permise cantitati mari de date (de ordinul
MB).
Pentru ca un formular sa fie functional trebuie precizat ce se va intampla cu el dupa completarea si
expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta
electronica (e-mail). Pentru aceasta se foloseste un atribut al etichetei <form> si anume "Action" care
primeste ca valoare "mailto:" concatenat cu o adresa valida de e-mail catre care se va expedia formularul
completat.
Formulare cu un camp de editare si un buton de expediere

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul
elementului se foloseste atributul " type" al etichetei <input>. Pentru un camp de editare, acest atribut
primeste valoarea "text". Alte atribute pentru un element <input> sunt:
1. Atributul "name" permite atasarea unui nume fiecarui element al formularului.
2. Atributul "value" permite atribuirea unei valori initiale unui element al formularului.
Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, in care atributul "
type" este configurat la valoarea "submit". Acest element poate primi un nume prin atributul "name". Pe
buton apare scris implicit "Submit Query" sau explicit valoarea atributului "value", daca aceasta valoare
a fost stabilita. Exemplu:
<html>
<head><title>formEx_1 </title></head>
<body><H2> Un formular cu un camp de editare si un buton de expediere</H2>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele si prenumele"><br>
<input type="submit" value="expediaza"> </form></body>
</html>
Pentru elementul <input> de tipul camp de editare (type= "text"), alte doua atribute pot fi utile:
1. Atributul "size" ce specifica latimea campului de editare. Daca textul introdus in camp de utilizator
depaseste aceasta latime, atunci se executa automat o derulare a continutului acestui camp;
2. Atributul "maxlength" ce specifica numarul maxim de caractere pe care le poate primi un camp de
editare; caracterele tastate peste numarul maxim sunt ignorate.
Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante de raspuns din mai multe
posibile. Butoanele radio se introduc prin eticheta <input> cu atributul " type" avand valoarea "radio".
Exemplu:
<html>
<head><title>formex_4</title></head>
<body><H2>Un formular cu butoane radio</H2>
<hr>
23
Alegeti sexul:<input type="radio" name="sex" value="b"><br>
Femeiesc:<input type="radio" name="sex" value="f"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>
La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", in functie de
alegerea facuta de utilizator.
Casete de validare
O caseta de validare (checkbox) permite selectarea sau deselectarea unei optiuni. Pentru inserarea unei
casete de validare se utilizeaza eticheta <input> cu atributul " type" configurat la valoarea "checkbox".
Observatii:
- fiecare caseta poate avea un nume definit prin atributul "name".
- fiecare caseta poate avea valoarea prestabilita "selectat" definita prin atributul "checked".
Exemplu:
<html>
<body><H2>Un formular cu casete checkbox</H2>
<hr>
Alegeti meniul:<br>
Pizza <input type="checkbox" name="pizza" value="o portie">
Nectar <input type="checkbox" name="nectar" value="un pahar">
Bere <input type="checkbox" name="bere" value="o sticla">
Cafea <input type="checkbox" name="cafea" value="o ceasca"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>
Formulare de selectie
Un formular de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o lista finita.
Lista de selectie este inclusa in formular cu ajutorul etichetelor corespondente <select> si </select>. O
lista de selectie poate avea urmatoarele atribute:
1. Atributul "name", care ataseaza listei un nume (utilizat in perechile "name=value" expediate
serverului);
2. Atributul "size", care precizeaza (printr-un numar intreg pozitiv, valoarea prestabilita fiind 1) cate
elemente din lista sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin actionarea
barei de derulare atasate automat listei).
Elementele unei liste de selectie sunt incluse in lista cu ajutorul etichetei <option>. Doua atribute ale
etichetei option se dovedesc utile:
1. Atributul "value" ce primeste ca valore un text care va fi expediat server-ului in perechea
"name=value"; daca acest atribut lipseste, atunci catre server va fi expediat textul ce urmeaza dupa
<option>;
2. Atributul "selected" (fara alte valori) ce permite selectarea prestabilita a unui element al listei.
Exemplu:
<html>
<body><H2>Un formular cu o lista de selectie</H2>
<hr>
Universitatea absolvita:<br><br>
<select name="universitate" size="3"> <option value="B"> Universitatea din Cluj
<option value="UNBM" selected> Universitatea de Nord Baia Mare
<option value="UTT"> Universitatea Technica din Timisoara
<option value="UTB"> Universitatea Technica din Brasov
</select><br><br>
24
<input type="reset"> <input type="submit">
</form></body>
</html>
Campuri de editare multilinie

Intr-un formular, campurile de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta
are urmatoarele atribute:
1. Atributul "cols", care specifica numarul de caractere afisate intr-o linie;
2. Atributul "rows", care specifica numarul de linii afisate simultan;
3. Atributul "name", care permite atasarea unui nume campului de editare multilinie;
4. Atributul "wrap", (de la "word wrap"= trecerea cuvintelor pe randul urmator), care determina
comportamentul campului de editare fata de sfarsitul de linie.
Acest atribut ("wrap") poate primi urmatoarele valori:
a) "off"; in acest caz:
- intreruperea cuvintelor la marginea dreapta a editorului se produce numai cand doreste utilizatorul;
- caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul;
b) "hard"; in acest caz:
- se produce intreruperea cuvintelor la marginea dreapta a editorului;
- caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul;
c) "soft"; in acest caz:
- se produce intreruperea cuvintelor la marginea dreapta a editorului;
- nu se include caracterul de sfarsit de linie in textul transmis serverului o data cu formularul;
Exemplu:
<html>
<body><H2>Un formular cu un camp de editare multilinie</H2> <hr>
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea>
<input type="reset"> <input type="submit">
</form></body>
</html>
Sinteza Taguri HTML
Iata in cele ce urmeaza o sinteza cuprinzatoare a marcajelor HTML intrebuintate la ora actuala pe scara
larga in documentele Web:

 Marcaje de baza
 Marcaje de formatare a caracterelor
 Marcaje pentru imagini
 Marcaje pentru liste
 Marcaje pentru tabele
 Marcaje pentru cadre
 Marcaje pentru formulare
 Marcaje pentru carcatere speciale
Marcaje de Baza

<HTML> </HTML> Defineste un fisier in format Web.
<HEAD> </HEAD> Antetul documentului.
25
<TITLE> </TITLE> Titlul documentului.
<BODY> </BODY> Corpul paginii HTML.
BGCOLOR = culoare Culoarea de fond a paginii.
TEXT=culoare Culoarea textului pe pagini.
LINK=culoare Culoarea legaturiilor nevizitate din pagini.
VLINK=culoare Culoarea legaturilor vizitate din pagini.
ALINK=culoare Culoarea legaturilor pe durata click-ului exacutat de utilizator.
BACKGROUND = url Imaginea de fond pentru pagina.
<P> Paragraf.
<Hn> <Hn> Nivel de subtitlu al documentului (n = 1-6).
<FONT> </FONT> Specifica atribute ale textului incadrat.
SIZE=n Dimensiunea textului este 1-7.
FACE="a,b" Specifica fontul: a, daca este disponibil, sau b.
COLOR=s Culoarea textului: fie un nume de culoare, fie o valoare RGB.
<BR> Linie noua.
<PRE> </PRE> Informatie preformatata.
 Comentariu HTML.
<CENTER> </CENTER> Centreaza materialul in pagina.
<HR> Rigla orizontala.
SIZE=x Inaltimea riglei in pixeli.
WIDTH=x Latimea riglei in pixeli sau in procente.
NOSHADE Dezactiveaza afisarea umbrei pentru rigla orizontala.
ALIGN=x Alinierea riglei orizontale in pagina (left, center, right).
COLOR=x Culoarea riglei orizontale (numai pentru IE)
<A> </A> Marcaj de tip ancora.
HREF=url Referinta hipertext.
HREF=#nume Referinta catre o ancora interna.
Name=nume Definitia unei ancore interne.
Marcaje Formatare Caractere

<B> </B> Afiseaza text cu caractere aldine.
<I> </I> Afiseaza text cu caractere cursive.
26
<U> </U> Afiseaza text subliniat.
<TT> </TT> Text cu font monospatiu.
<CITE> </CITE> Citare bibliografica.
<CODE> </CODE> Listing de program.
<EM> </EM> Stil logic de evidentiere.
<KBD> </KBD> Text de la tastatura.
<STRONG> </STRONG> Evidentiere logica puternica.
<VAR> </VAR> Program sau variabila.
<BASEFONT SIZE = n> Specifica explicit dimensiunea fontului din pagina
Marcaje pentru Imagini

<IMG> Marcajul de introducere a imaginilor.
SRC=url Sursa fisierului grafic.
ALT=text Textul alternativ de afisat, daca este necesar.
Alinierea imaginii in pagina, cu urmatoarele valori posibile: top (sus),
ALIGN=aliniere
middle(la mijloc), bottom (jos), left (in stanga), right (in dreapta).
HEIGHT=x Inaltimea imaginii (in pixeli).
WIDTH=x Latimea imaginii.
Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca
BORDER=x
hiperlegatura.
HSPACE=x Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli).
VSPACE=x Spatiul suplimentar pe verticala din jurul imaginii (in pixeli).
Marcaje pentru Liste

<DD> Descriere definitie.
<DL> </DL> Lista de tip definitie.
<DT> Termen de definitie.
<LI> Element de lista.
<OL> Lista ordonata (numerotata).
TYPE=tip Tipul numerotarii. Valori posibile: A, a, I, i, 1.
START=x Numarul de inceput al listei ordonate.
<UL> Lista neordonata (marcata).
TYPE=forma Forma marcajului. Valori posibile: circle, square, disc.
27
Marcaje pentru Tabele

<TABLE> </TABLE> Tabel HTML.
BORDER=x Chenarul tabelului.
CELLPADDING=x Spatiul suplimentar in cadrul celulelor tabelului.
CELLSPACING=x Spatiul suplimentar intre celulele tabelului.
WIDTH=x Latimea impusa tabelului.
FRAME=valoare Ajustarea tabelului.
RULES=valoare Ajustarea riglelor tabelului.
BORDERCOLOR = culoare Culoarea chenarului tabelului.
BORDERCOLORLIGHT =
Cea mai deschisa culoare din cele doua culori specificate.
culoare
BORDERCOLORDARK =
Cea mai inchisa culoare din cele doua culori specificate.
culoare
Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in
ALIGN=left
partea dreapta.
Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge
ALIGN=right
in partea stanga.
HSPACE=x Spatiu suplimetar pe orizontala in jurul tabelului.
VSPACE=x Spatiu suplimetar pe verticala in jurul tabelului.
COLS=x Specifica numarul de coloane ale unui tabel.
<COLGROUP>
Defineste un set de coloane cu ajutorul marcajului <col>.
</COLGROUP>
<COL WIDTH=x> Defineste latimea unei coloane exprimata in pixeli.
<THEAD> </THEAD> Defineste titlul tabelului.
<TBODY> </TBODY> Defineste corpul tabelului.
<TR> </TR> Linie de tabel.
BGCOLOR=culoare Specifica culoarea de fond pentru intreaga linie.
ALIGN=aliniere Alinierea celulelor de pe linia curenta (left, center, right).
<TD> </TD> Celula de date a tabelului.
BGCOLOR=culoare Specifica culoarea de fond pentru celula de date.
COLSPAN=x Numarul de coloane pe care se intinde celula curenta de date.
ROWSPAN=x Numarul de linii pe care se intinde celula curenta de date.
Alinierea materialului din cadrul celulei de date. Valori posibile:
ALIGN=aliniere
left, right, center.
28
Alinierea pe verticala a materialului din cadrul celulei de date.
VALIGN=aliniere
Valori posibile: top, bottom, middle.
BACKGROUND=url Specifica imaginea de fond pentru celula tabelului.
NOWRAP Nu permite despartirea textului pe linii in cadrul unei celule.
ALIGN=baseline Aliniaza celule de date cu linia de baza a textului adiacent.
Aliniaza o coloana fata de un anumit caracter (caracterul prestabilit
ALIGN=caracter
este ".").
Aliniaza atat marginea din stanga cat si marginea din dreapta a
ALIGN=justify
unui text
Marcaje pentru Cadre

<FRAMESET> </FRAMESET> Definirea redactarii paginii.
COLS=x Numarul si marimea relativa a coloanelor.
ROWS=x Numarul si marimea relativa a liniilor.
Specifica starea "on" (activa) sau "off" (inactiva) pentru
BORDER=x
chenarul cadrului FRAMESET.
FRAMEBORDER = x Specifica marimea chenarului.
FRAMESPACING = x Marimea spatiului dintre doua cadre adiacente.
<FRAME> Definitia unui anumit cadru.
SRC=url URL-ul sursa pentru cadru.
Numele cadrului (utilizat impreuna cu "TARGET=nume" ca
NAME=nume
parte componenta a marcajului de tip ancora, <a>.
Defineste optiunea barei de derulare. Valori posibile: on
SCROLLING=scrl
(activa), off (inactiva), auto (automat).
FRAMEBORDER=x Marimea chenarului din jurul cadrului.
Spatiul suplimentar de deasupra si dedesubtul unui anumit
MARGINHEIGHT=x
cadru.
MARGINWIDTH=x Spatiu suplimentar la stanga si la dreapta unui anumit cadru.
Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea
<NOFRAMES> </NOFRAMES>
un cadru.
<IFRAME> Cadru intern (numai pentru (IE).
SRC=url Sursa cadrului.
NAME=s Numele ferestrei (util pentru TARGET).
HEIGHT=x Inaltimea cadrului inglobat.
WIDTH=x Latimea cadrului inglobat.
Marcaje pentru Formulare

29
<FORM> </FORM> Formular HTML activ.
ACTION=url Programul CGI de pe serverul care receptioneaza datele.
METHOD=metoda Modul in care datele sunt transmise serverului(GET sau POST).
<INPUT> Camp de text sau alte date de intrare.
Tipul campului de intrare <INPUT>. Valori posibile: text,
TYPE=optiune
password, checkbox, hidden, file, radio, submit, reset, image.
NAME=nume Numele simbolic al valorii campului.
VALUE=valoare Continutul prestabilit al campului de text.
CHECKED= optiune Buton/caseta marcata in mod prestabilit.
SIZE=x Numarul de caractere al unui camp de text .
SIZE=x Numarul maxim de caractere acceptate.
<SELECT> </SELECT> Grup de casete de validare.
SIZE=x Numarul de articole de meniu care se afiseaza odata (prestabilit=1).
MULTIPLE=x Permite selectia unor articole de meniu multiple.
<OPTION> Alegerea particulara intr-un domeniu <SELECT>.
VALUE=valoare Valoarea rezultata a selectiei din meniu.
<TEXTAREA>
Camp de intare de tip text pe linii multiple.
</TEXTAREA>
ROWS=x Numarul de linii al casetei de text.
COLS=x Numarul de coloane (caractere) pe linie al casetei de text.
<FIELDSET> </FIELDSET> Imparte formularul in parti logice.
<LEGEND> </LEGEND> Numele asociat setului de campuri (fieldset).
Specifica alinierea legendei (explicatiei) afisate (top, bottom, left,
ALIGN=s
light).
Specifica ordinea elementelor atunci cand utilizatorul apasa tasta
TABINDEX=x
Tab.
Specifica tasta care asigura comanda rapida de la tastatura asociata
ACCESKEY=c
unui anumit element.
DISABLED Elementul este inactiv, dar este afisat pe ecran.
READONLY Elementul este afisat pe ecran dar nu poate fi editat.
Marcaje pentru Caractere Speciale

& "&" - ampersand.
˜ "˜" - tilda.
30
< "<" - mai mic (less than).
> ">" - mai mare (greater than).
© simbolul special de copyright.
® simbolul special pentru marca inregistrata.
" """ - ghilimele.
б simbolul special a mic cu accent ascutit.
в simbolul special a mic cu accent circiumflex.
с simbolul special n mic cu tilda.
ш simbolul special o mic barat (slash).
$ simbolul special $ (dolar).
€ "€" - euro.
Proiectare Site si Web Design - Standardul CSS

Ce sunt stilurile
Stilurile pun la dispozitia creatorilor de site-uri web noi posibilitati de personalizare a paginilor HTML.
Un stil reprezinta un mod de formatare exacta a unui bloc de text (spre exemplu anumite caracteristici
pentru font, marime, culoare, aranjare in pagina, distantare fata de margini etc).
Exista doua modalitati de a defini un stil
1. sintaxa CSS (Cascading Style Sheets);
2. sintaxa Javascript.
Terminologia CSS - Cascading Style Sheets - desemneaza "foi in stilul cascada". De ce "foi in stilul
cascada", vom vedea mai exact in continuare.
In primul rand aceasta denumire are la origine posibilitatile oferite de tehnica CSS
Practic, tehnologia CSS faciliteaza oricarui proiectant de pagini web posibilitatea de a creea un stil
pentru fiecare tag HTML intrebuintat la un moment dat, putand ulterior sa aplice implicit acest stil in
toate paginile site-ului pentru elementul de pagina respectiv (adica pentru tagul HTML stilizat).
Standardul CSS permite informatiilor cu privire la stil sa fie specificate si referite in mai multe
feluri
Stilurile pot fi specificate in interiorul fiecarui tag HTML in parte, in cadrul sectiunii HEAD a
documentelor HTML sau intr-un fiser extern cu extensia ".CSS". In interiorul aceluiasi document
HTML pot fi referite mai multe fisiere CSS externe.
Totusi apare intrebarea fireasca...
Ce stil va folosi browser-ul la afisarea paginii web in cazul acelor taguri HTML pentru care avem
definite mai multe stiluri? La modul general putem afirma ca toate stilurile utilizate pentru elementele
HTML ale unei pagini web vor "cascada" intr-un fiser de stil virtual atot cuprinzator, in care precedenta
diferitelor tipuri de stiluri aplicate tagurilor din pagina va fi urmatoarea (de la precedenta cea mai mica
la precedenta cea mai mare):
Prima precedenta:
Stilul specificat in setarile Browserului (exemplu in IE: View -> Text Size -> Largest);
A doua precedenta:
Stilul specificat in cadrul setarilor din fisierul de stil extern;
A treia precedenta:
Stilul intern specificat in sectiunea HEAD a documentului HTML;
A patra precedenta:
Stilul intern specificat in cadrul tagului curent.
31
Stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite si apelate pe loc. De exemplu:
<H3 style= "text-align:right; color:#429EF7;">
In acest exemplu, stilul va determina toate titlurile H3 din paginile HTML care fac apel la acest stil sa
apara in browser in culoarea specificata si aliniate la dreapta.
Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente-tag (de ex. "H2", "H3", "P" si
"DIV"), atunci fie se utilizeaza o lista cu aceste elemente (separate prin virgula) in sectiunea
<style>...</style> din header-ul documentului (delimitat de marcajele <HEAD>...</HEAD>),
asociindu-i-se elementele de stil comune, fie se va utiliza stilul in mod explicit in cadrul fiecarui tag, ca
mai sus.
Exemplu cu lista de stiluri in HEAD-er:
<style>
H2, H3, P {text-align:right; color:#429EF7;}
</style>
Exemplu cu fiecare element de stil definit si apelat in cadrul tagurilor luate separat:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Stil dedicat inline</title>
</head>
<body>
<H2 style= "text-align:right; color:#429EF7;">text</H2>
<p style= "text-align:right; color:#429EF7;">text</P>
<H3 style= "text-align:right; color:#429EF7;">text</H3>
</body>
</html>
Explicitarea a fost facuta, asadar, in momentul utilizarii acestora.
Clase de Stiluri
Clasele de stiluri permit definirea unui stil general (aplicabil in mai multe locuri in cadrul aceleiasi
pagini sau in pagini diferite) in vederea inserarii lui oriunde este necesar printr intermediul unei simple
referiri. Sa presupunem ca dorim sa definim o clasa de stiluri "clasa-mea" (pe care dorim sa o aplicam
anumitor portiuni de text pentru a le face de apara de culoare verde si a aliniate la stanga). Vom utiliza
in acest sens blocul <style>...</style>, aflat la randul sau in interiorul blocului <head>...</head>
(reprezentand head-erul documentului HTML). Vom realiza ceea ce ne-am propus in felul urmator:
<style>
all.clasa-mea {text-align:left; color:green;}
</style>
Cuvantul standard "all" aflat in fata clasei de stiluri "clasa-mea" indica faptul ca aceasta clasa este
aplicabila tuturor blocurilor de text, atunci cand este necesar. Practic clasa de stiluri "clasa-mea" poate fi
asociata tuturor tagurilor HTML care opereaza cu text (ca de exemplu: H2, H6, P, DIV, etc...) utilizand
in interiorul fiecarui tag vizat o referire explicita la aceasta clasa: <TAG class=clasa-mea> .
Asadar, daca dorim sa aplicam aceasta clasa de stiluri unui titlu de ordinul 3 (specificat in codul HTML
prin tagul H3), atunci scriem:
<H3 class=clasa-mea> Acesta este un header de marime 3, aliniat la stanga si de
culoare verde </H3>
Dupa cum s-a vazut, pentru apelarea unei clase de stiluri in vederea aplicarii sale elementului tag curent
se foloseste atributul "class" avand ca valoare numele clasei de stil. Impreuna cu specificatia "all" din
definirea clasei de stiluri, atributul "class" devine un atribut universal, adica va putea fi asociat tuturor
tagurilor HTML carora li se poate aplica (in acest caz celor care opereaza cu text).
Observatii:
- In interiorul unui bloc <style>...</style>, comentariile sunt blocuri delimitate de /* si */ (ca si in C, C+
32
+, Java si Javascript).
- Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului
(spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p"), atunci in constructia
clasei va aparea acest element (de exemplu "p.clasa-mea-2").
Exemplu:
<html>
<head><title>Clase de stiluri dedicate</title>
<style> p.clasa-mea-2 {text-align:left; color:green;} </style>
</head>
<body> <p>Acesta este un paragraf normal
<br> <p class=clasa-mea-2>Acesta este un paragraf aliniat la stanga si de culoare
verde
</body>
</html>
Stiluri Identificate
Absolut toate elementele tag ale unui document HTML admit un atribut universal numit "id". Acest
atribut "id" poate identifica prin valorile sale stilul utilizat de un tag HTML.
Pentru a utiliza un stil "identificat" procedam astfel:
1. In blocul <style>...</style> introducem definitia stilului conform sintaxei:
<style>
#rosu {color: red}
</style>
2. In elementul (tagul) in care dorim utilizarea locala a acestui stil, folosim atributul "id" care primeste
ca valoare numele identificator al stilului definit anterior. Exemplu:
<p id="rosu">Acesta este un paragraf de text de culoare rosie</p>
Daca dorim ca un stil "identificat" sa fie aplicabil numai pentru anumite elemente ale documentului (de
exemplu "H3"), atunci in constructia (definitia) identificatorului de stil va aparea acest element (aici
"H3"), ca in exemplul urmator:
<html>
<head>
<title>Pagina cu stil identificat</title>
<style>
H3#rosu {color:red; text-align:center;}
</style>
</head>
<body>
<H3 id=rosu>Acesta este un header de marime 3, centrat si de culoare rosie</H3>
</body>
</html>
Stiluri Inline
Stilurile in-line sunt acele stiluri definite chiar in eticheta HTML (marcajul) ce initiaza blocul in care
dorim sa se aplice aceste stiluri. Adica sunt ceea ce, la precedentele sectiuni dedicate standardului CSS,
am definit ca stil in interiorul tagurilor H2, P, etc...
Dupa cum am vazut deja, pentru a defini stiluri inline se utilizeaza atributul universal "style" (comun
practic tuturor etichetelor ce apar intr-un document HTML). in continuarea caruia apare semnul egal,
dupa care, intre ghilimele, urmeaza definirea stilului, practic valoarea atributului "style".
Valoarea data atributului "style" este tocmai descrierea stilului, cuprinsa nu intre acolade {..} (ca la
definirea in HEAD sau in fiserul CSS extern - dupa cum vom vedea}, ci intre ghilimele "..." (dupa cum
am aratat si din exemplele anterioare).
Concret:
33
<H3 style= "color:red; text-align: center;">Acest header are marimea 2, este de
culoare rosie si se pozitioneaza in pagina centrat.</H3>
Daca dorim utilizarea unui anumit stil pentru un fragment de text, atunci includem acest text intr-un bloc
cu ajutorul delimitatorilor <span>...</span>, dupa care putem utiliza atributul "style", in cadrul
etichetei <span>, inline:
<html>
<head>
<title>Pagina HTML cu stil inline</title>
</head>
<body><H3>Titlu de marime 3</H3>
<span style="size:15pt; align=center; color:green;">
Acesta este un text cu corpul de litera de dimensine 15 puncte, aliniat pe centru si de
culoare verde.
</span>
</body>
</html>
Stiluri in Fisiere Externe
Stilurile definite in interiorul unui bloc <style>...</style> pot fi transferate intr-un fisier extern existand
astfel posibilitatea asocierii lor mai multor fisiere HTML.
Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:
1. Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia ".css".
Continutul acestui fisier coincide cu continutul unui bloc <style>...</style>, fara ca acesti delimitatori sa
fie inclusi.
2. In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1, se include in blocul
<head>...</head> o eticheta <link>, avand trei atribute:
- atributul "rel" cu valoarea "stylesheet";
- atributul "type" cu valoarea "text/css".
- atributul "href" avand ca valoare adresa URL a fisierului creat la punctul 1;
Stilurile definite din fisierul CSS extern se activeaza ca si cum ar fi stiluri definite in fisierul HTML
curent intr-un bloc <style>...</style>.
Iata un fisier HTML cu un CSS extern:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<LINK REL= "stylesheet" TYPE= "text/css" HREF= "stil.css">
<title>Pagina de text stilizat</title>
</head>
<body>
<H2>Acesta este text formatat ca Header 1</H2>

<p>Acesta este un paragraf</p>
<H3>Acesta este text formatat ca Header 2, urmat de un tabel</H3>
<table width="100%" border="1">
<tr>
<th align="left">Nume</th>
<th align="left">Prenume</th>
<th align="left">Telefon</th>
<th align="left">E-mail</th>
</tr>
<tr>
<td width="25%">Popescu</td>
34
<td width="25%">Valentin</td>
<td width="25%">4433978</td>
<td width="25%">popescu@yahoo.com</td>
</tr>
<tr>
<td width="25%">Ionescu</td>
<td width="25%">Mihai</td>
<td width="25%">5599786</td>
<td width="25%">ionescu@yahoo.com </td>
</tr>
</table>
<br>
<h3>Acesta este un text formatat ca Header 3, urmat de 2 liste:</h3>
<ol>
<li>Date personale student;</li>
<li>Calificari student;</li>
<li>Program zilnic:</li>
</ol>
<ul>
<li>Program dimineata</li>
<li>Pauza de masa</li>
<li>Program dupamiaza</li>
</ul>
</body>
</html>
Fiserul CSS asociat (plasat in acelasi director) cu fisierul HTML de mai sus, este:
H2,H3,h3
{
color:#483d8b;
font-family: "lucida calligraphy", "arial";
}
p, table, li
{
font-family: "lucida calligraphy", "arial";
margin-left: 10pt;
}
body
{
background-color:#fffaf0;
}
li,p,th,td
{
font-size: 80%;
}
table {border-style:outset}
li {list-style: square;)
Mentiune suplimentara
In cazul in care, dintr-un fisier HTML se face o referire la un fisier CSS care insa lipseste, atunci fisierul
HTML va fi afisat in browser fara elementele de stilizare, exact asa cum ar arata daca stilizarile nu ar fi
existat.
Pseudo Clase de Stiluri
35
Pseudoclasele se utilizeaza pentru personalizarea legaturilor web, atat de tip text, cat de tip imagine. Ele
se definesc in interiorul unui bloc <style>...</style> sau intr-un fisier extern, Exemplul de mai jos este
edificator in acest sens:
a: link {color: blue; font-size: 15pt;}
a: hover {color: red; font-style: italic; text-decoration: none}
a: visited {color: magenta; font-size: 15pt; text-decoration: none}
a: active {color: cyan; font-size: 15pt; text-decoration: none}
Explicatii:
 a: link se refera la modul оn care arata un link оn mod normal;
 a: hover se refera la modul оn care arata un link atunci cвnd se trece cu mouse-ul peste el (оn
Netscape functioneaza doar de la varianta 6);
 a: active se refera la modul оn care arata un link atunci cвnd se efectueaza click pe el;
 a: visited se refera la modul оn care arata un link deja vizitat;
 specificatia "text-decoration: none" elimina sublinierea implicita cu o linie albastra a link-ului.
Pentru ca numai anumite legaturi sa utilizeze un stil, se pot folosi urmatoarele trei metode:
1. a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>
2. a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>
3. a.CLASA1: link {...} combinat cu <a class = CLASA1 href=" "> ...</a>
Chestiune Auxiliara
In browsere cursorul mouse-ului are in general o forma simpla si binecunoscuta, luind pe parcursul
vizionarii paginii respective maximum doua infatisari diferite:
 Mana - atunci cand este pozitinat pe o legatura
 Sageata oblica din directia dreapta jos spre stanga sus - atunci cand este pozitionat pe alt obiect
decat o legatura.
Acestea sunt insa formele implicite. Exista insa si cazuri in care am dori ca acel cursor sa ia o alta forma
decat cele doua predefinite. La fel ca multe alte probleme care privesc modul in care arata o pagina, si
aceasta problema isi gaseste rezolvarea in folosirea CSS ca limbaj de descriere a modului de stilizare a
unui document.
Proprietatea care manipuleaza forma cursorului se numeste simplu: "cursor" si poate fi introdusa in
orice element "style" al unui tag html.
De exemplu, pentru obtinerea unei imagini a cursorului de tipul unei sageti insotite de un semn de
intrebare la trecerea mouse-ului peste un link, iata codul care va trebui folosit:
<a href="fisier.html" style="cursor: help">Legatura</a>
Efectul este urmatorul (doar pentru IE minim 4.0):
Legatura cu CSS pentru stilizare cursor
Nu este insa unicul mod de stilizare a cursorului mouse-ului. In continuare prezentam codurile pentru
toate formele de cursor care se pot folosi:

auto utilizeaza setarile implicite ale utilizatorului
crosshair creeaza o cruce
default setarile implicite ale browserului
e-resize sageata Est-Vest
hand mana
help semnul intrebarii
move cruce cu sageti la capete
n-resize sageata sud-nord
ne-resize sageata SudVest - NordEst
36
nw-resize sageata SudEst - NordVest
pointer mana
s-resize sageata Nord - Sud
se-resize sageata NordVest - SudEst
sw-resize sageata NordEst - SudVest
text bara verticala campuri de introducere a datelor
w-resize sageata Est-Vest
wait clepsidra
Proiectare Site si Web Design - JavaScript - Generalitati
JavaScript este un limbaj de scripting dezvoltat la origine de Netscape, permitand scrierea de secvente
de program care se executa la aparitia unui eveniment utilizator. Vom prezenta in continuare
fundamentele JavaScript si, mult mai important, modalitati de valorificare si integrare in propriile
pagini web a tehnologiei JavaScript.
JavaScript nu este Java!
Trebuie sa facem distinctie intre limbajul de programare Java si limbajul de scripting JavaScript. Spre
deosebire de JavaScript, Java este un limbaj de progrmare considerat "de nivel inalt" (foarte aproapiat de
gandirea utilizatorului si nu de arhitectura calculatorului) care permite scrierea de aplicatii de aproape
orice tip si grad de complexitate. Consideram ca pentru moment nu trebuie sa enumeram diferentele,
trebuie doar sa retinem faptul ca JavaScript nu este Java. Pentru mai multe informatii privind limbajele
Java si JavaScript va recomandam lucrarea "Java, JavaScript - Profesional" oferita de site-ul nostru in
cadrul pachetului de carti electronice generic intitulat "Internetul pentru Afaceri".
Rularea programelor JavaScript
De ce avem nevoie pentru a rula scripturi concepute in limbajul JavaScript? Avem in primul rand nevoie
de un browser care suporta JavaScript - de exemplu Netscape Navigator (incepand cu versiunea 2.0) sau
Microsoft Internet Explorer (Ms. I.E. - incepand cu versiunea 3.0). De vreme ce aceste browsere sunt
extrem de raspandite, multi utilizatori (peste 90%) au posibilitatea de a rula fara probleme programele
JavaScript. Pentru a utiliza in paginile proprii evenimente tratabile prin JavaScript avem bineinteles
nevoie si de cunosterea - cel putin la nivel mediu - atat a limbajului HTML, cat si a limbajului de
scripting JavaScript.
Inserarea JavaScript in documentele HTML
Codul JavaScript poate fi introdus direct in pagina HTML. Pentru a vedea cum functioneaza JavaScript,
haideti sa ne aruncam privirile peste un exemplu simplu:
<html><head><title>Pagina HTML cu JavaScript</title></head>
<body>
<br><p>
Acesta este un document HTML continand JavaScript.
</p>
<script language="JavaScript">
document.write("Acesta este JavaScript!")
</script>
<br><p>
Din nou text si cod HTML.
<p></body>
</html>
La prima vedere acesta bucata de cod arata ca un fisier HTML normal. Singura noutate o constituie
blocul <script>...</script>:
37
document.write("Acesta este JavaScript!")
</script>
Acesta este JavaScript-ul nostru! Pentru a observa modul de functionare a scriptului vom salva codul
HTML de mai sus ca si fisier normal HTML lansand pagina HTML astfel salvata in browserul nostru cu
suport JavaScript. Daca browserul suporta JavaScript vom vedea 3 linii:
Acesta este un document HTML continand JavaScript.
Acesta este JavaScript!
Din nou text si cod HTML.
Este adevarat ca acest script extrem de simplist nu este unul folositor - acelasi rezultat il puteam obtine
uzand de cod HTML mult mai simplu. Am dorit numai sa exemplificam utilizarea tagului <script>. Tot
ce este intre eticheta <script> si eticheta </script> este interpretat drept cod JavaScript. Putem observa
folosirea document.write() - una dintre cele mai importante comenzi in programarea JavaScript.
"Document.write() " este o rutina JavaScript folosita pentru a scrie text, imagini, etc... intr-un
document (in acest caz in documentul HTML curent). Asadar, micul nostru program JavaScript scrie
textul "Acesta este JavaScript!" in documentul HTML in care a fost inserat.
Proiectare Site si Web Design - JavaScript - Exemple

Evenimente
Evenimentele sunt foarte importante in programarea JavaScript. Evenimentele sunt de cele mai multe ori
declansate de actiuni ale utilizatorului. Daca utilizatorul apasa un buton, un eveniment de tip "Click" are
loc. Daca mouse-ul este deasupra unei legaturi, atunci un eveniment de tip "MouseOver" are loc.
Dorim ca programul JavaScript sa reactioneze la unele evenimente. Aceasta se poate realiza cu ajutorul
managerilor de evenimente sau gestionarilor de evenimente - "event-handlers". Un buton poate creea o
fereastra atunci cand este apasat. Aceasta inseamna ca fereastra apare ca o reactie la evenimentul
"Click". Managerul de evenimente (event-handler-ul) pe care trebuie sa-l utilizam este numit "onClick".
Acesta spune brwoser-ului computerului utilizator ce sa faca atunci cand evenimentul are loc. Urmatorul
cod este un exemplu simplu de "event-handler onClick":
<form>
<input type="button" value="Click me" onClick="alert('Yo')">
</form>
Exista cateva lucruri care trebuie analizate in codul JavaScript de mai sus
In primul rand putem observa ca am creeat un buton cu ajutorul unui formular (aceasta este o problema
de HTML asa ca nu va fi analizata aici). Noua bucata de cod JavaScript este onClick="alert('Yo')" in
interiorul tagului <input>. Asa cum am spus deja, codul in cauza defineste ce se intampla cand butonul
este apasat. Atunci cand un eveniment "Click" are loc, computerul executa alert('Yo'). Acesta este codul
JavaScript (se observa ca nu utilizam tagul <script> in acest caz). "Alert()" ne permite sa cream ferestre
de avertizare (de tip popup windows). In interiorul parantezelor trebuie sa specificam un sir. In cazul
nostru sirul este 'Yo'. Acesta este un text ce va fi afisat in fereastra de avertizare. Deci scriptul dat ca
exemplu creeaza o fereastra cu continutul 'Yo' atunci cand utilizatorul apasa butonul.
Un lucru poate ne poate induce in eroare. In comanda document.write() am folosit ghilimele duble " "
dar in combinatie cu alert() am folosit ghilimele simple ' '. De ce? In principiu pot fi ambele utilizate.
Dar in ultimul exemplu am scris onClick="alert('Yo')" puteti vedea ca am folosit si ghilimele simple si
duble. Daca am fi scris onClick="alert("Yo")" interpretorul ar fi fost indus in confuzie pentru ca nu
este clar care parte apartine de "onClick event-handler" si care nu. Asa ca trebuie sa alternam
ghilimelele. Nu conteaza ordinea in care folosim ghilimelele - mai intai cele duble si apoi cele simple
sau viceversa. Putem scrie fara nici o problema onClick='alert("Yo")'.
Functii
Vom utiliza functii in cea mai mare parte a programelor noastre JavaScript. De aceea vom explora
subiectul inca din aceasta sectiune. Functiile sunt o metoda profesionala de a lega mai multe comenzi
impreuna. Sa scriem un script care furnizeaza un anumit text de trei ori consecutiv:

</script>
Acest script, introdus intr-un document HTML, va scrie de trei ori:
Bine ai venit pe pagina mea!
Analizand codul sursa observam ca scriind de trei ori comanda ajungem la rezultatul scontat. Dar este
eficient? Nu, deci haideti sa rezolvam problema mai simplu. Ce spuneti de codul urmator care face
acelasi lucru:
<html><head></head>
<body></body>

</script>
<body></body>
</html>
In scriptul din sectiunea BODY a documentului HTML de mai sus am definit si apelat o functie.
Definirea s-a realizazt cu urmatoarele linii de cod:
function myFunction() {
document.write("Acesta este javascript!<br>");
}
Comenzile din interiorul {} tin de implementarea functiei myFunction(). Aceasta inseamna ca ambele
comenzi "document.write()" vor fi executate prin apelarea functiei. In exemplul nostru avem trei apelari
ale functiei. Putem observa ca am scris "myFunction()" de trei ori imediat sub definitia functiei. Acestea
sunt trei apelari ale functiei si au rolul de a face ca functia sa fie executata de trei ori. Rezultatul
executiei este:
Proiectare Site si Web Design - JavaScript - Ierarhii
JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie de obiecte. Practic toate
elementele sunt vazute ca obiecte. Fiecare obiect are anumite proprietati si metode prin care poate fi
manipulat. Cu ajutorul JavaScript putem lucra cu usurinta cu obiectele componente ale unei pagini web.
Pentru a putea face acest lucru este foarte importanta intelegerea ierarhiei obiectelor HTML. Vom
intelege mai bine mecanismul de functionare printr-un exemplu. Codul urmator este o pagina HTML
simpla:
39
<html>
<head>
<title>Pagina mea</title>
</head>
<body bgcolor=#ffffff>
<center>
<img border="0" src="../../images/search_logo.gif" width="225" height="85">
</center>
<p>
<center>
<form name="Formular">
Nume:
<input type="text" name="nume" value=""><br>
E-mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Trimite" name="Trimitere" onClick="alert('activare
trimitere')">
</form>
</center>
</p>
<p>
<center>
<img border="0" src="../../images/linie.gif" width="207" height="11"><br>
</center>
</p>
<center>
<a href="http://www.afaceri-online.net">Pagina demo</a>
</center>
</body>
</html>
Iata o imagine a paginii (am adaugat cateva adnotatii cu culoarea rosie):
Avem doua imagini (sigla si bara de jos), o legatura ("Pagina de inceput") si un formular cu doua
campuri text (Nume / E-mail), respectiv un buton (Trimite). Din punctul de vedere al mecanismelor
JavaScript, fereastra browserului este un obiect "window". Acest obiect (fereastra browser asimilata si
ca fereastra principala) contine unele elemente ca, de exemplu, bara de stare (status bar) din partea cea
mai de jos a ferestrei browserului. In interiorul ferestrei principale putem incarca un document (pagina)
HTML (sau un fisier de alt tip - ne vom limita pentru moment la fisiere de tip HTML). Aceasta pagina
odata incarcata este asadar un obiect document. Aceasta inseamna ca obiectul document este chiar
pagina HTML incarcata la un anumit moment in browser. Obiectul document este un obiect foarte
40
important in JavaScript - se foloseste extrem de frecvent. O proprietate a obiectului document este, de
exemplu, culoarea de fundal a paginii. Mai important este faptul ca toate obiectele HTML sunt
proprietati ale obiectului document. Un obiect HTML este, spre exemplu, o legatura sau un formular, ca
in cazul ilustratiei noastre.
Urmatoarea imagine arta ierarhia creata de pagina noastra:

Dorim acum sa obtinem informatii despre obiecte si sa manipulam aceste obiecte.

Pentru a putea face acest lucru trebuie sa putem accesa diferite obiecte in cadrul ierarhiei. Putem vedea
numele obiectelor in imaginea de mai sus a ierarhiei. Daca dorim sa adresam prima imagine din pagina
HTML trebuie sa ne uitam in ierarhie. Vom incepe intotdeauna cu nivelul cel mai de sus. Primul obiect
(nivelul 0) este denumit document. Prima imagine este reprezentata prin images[0], fiind situata pe
nivelul 1 (imediat inferior). Aceasta inseamna ca putem accesa acest obiect particular prin intermediul
unui apel JavaScript cu ajutorul sintaxei: document.images[0].
Daca, de exemplu, dorim sa stim ce introduce utilizatorul in al doilea camp din formular, trebuie sa
accesam acest obiect. Din nou pornim din varful ierarhiei. Urmarim calea pana la obiectul numit
elements[1] specificand toate obiectele intermediare pe masura ce le depasim. Aceasta inseamna ca
putem accesa primul element (elements[1]) prin apelul:
document.forms[0].elements[1]
Putem afla si ce text a fost introdus? Desigur, insa pentru a sti ce metode si proprietati ofera obiectul, va
trebui sa cercetam cu atentie documentatia JavaScript (ne referim atat la documentatia de la Netscape cat
si la alte documentii bune aparute pe piata - 3 astfel de documentatii fiind oferite de site-ul Afaceri-
Online ca anexa la cartea electronica "Java, JavaScript Profesional"). Mentionam in cazul
exemplului nostru faptul ca in referinte vom putea constata ca un element text are proprietatea value.
"Value" este practic textul introdus in elementul text. Putem citi aceasta valoare cu ajutorul urmatoarei
linii de cod:
name= document.forms[0].elements[1].value;
Sirul este inmagazinat in variabila name. Putem de acum incolo sa lucram cu aceasta variabila.
Proiectare Site si Web Design - JavaScript - Ferestre Cadru
O intrebare frecventa este cum interactioneaza frame-urile (cadrele) si JavaScript. Mai intai trebuie sa
explicam ce sunt frame-urile si la ce pot fi folosite. Fereastra browserului poate fi impartita in mai multe
frame-uri (cadre, ferestre). Aceasta inseamna ca un frame reprezinta o parte din suprafata ferestrei
browserului. Fiecare cadru (frame) incarca in el un document (de cele mai multe ori de tip HTML). De
exemplu putem creea doua cadre astfel: in primul frame putem incarca pagina de deschidere a site-ului
Netscape iar in cel de-al doilea pagina principala a site-ului Microsoft.
Desi crearea de frame-uri este o problema HTML, dorim sa descriem in cele ce urmeaza cateva
lucruri de baza. Pentru crearea de cadre se folosesc doua taguri: <frameset> si <frame>. O pagina
HTML care creaza doua frame-uri poate arata astfel:
<html>
<frameset rows="50%,50%">
<frame src="page1.htm" name="frame1">
41
<frame src="page2.htm" name="frame2">
</frameset>
</html>
Aceasta secventa de cod produce doua frame-uri. Remarcam utilizarea proprietatilor "rows" in tagul
FRAMESET. Aceasta inseamna ca cele doua cadre create cu tagul FRAME se afla unul deasupra
celuilalt. Frame-ul de sus incarca pagina HTML "page1.htm" iar frame-ul de jos prezinta documentul
"page2.htm".
Daca dorim sa avem coloane in loc de randuri trebuie sa scriem "cols" in loc de "rows" inauntrul tagului
FRAMESET. Partea "50%,50%" specifica in procente ecran cat de mari sunt cele doua ferestre.
Putem de asemenea sa scriem "50%,*" daca nu dorim sa calculam cat de larga trebuie sa fie cea de-a
doua fereastra pentru a ajunge la 100% din spatiul ramas. Putem de asemenea specifica dimensiunea in
pixeli omitand simbolul %.
Fiecare frame are un nume unic specificat cu ajutorul atributului "name" din eticheta <frame>.
Acest atribut ne va ajuta sa accesam frame-urile cu ajutorul JavaScript.
Iata un exemplu:
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="cell.htm">
</frameset>
<frameset rows="33%,33%,33%">
</frameset>
</frameset>
Putem fixa dimensiunile marginii prin intermediul proprietatii (atributului) "border" din eticheta
<frameset>. "Border=0" inseamna ca nu vom avea margine la cadru (atributul nu functioneaza cu
Netscape 2.x).
Frame-urile si JavaScript
Acum putem sa ne dam seama cum vede JavaScript frame-urile intr-o fereastra a browserului. Pentru
aceasta vom utiliza cele 2 cadre create in primul exemplu.
Am vazut ca JavaScript organizeaza toate elementele de pe o pagina intr-o ierarhie. Aceasta se pastreaza
si pentru frame-uri. Urmatoarea imagine arata ierarhia aferenta primului exemplu:

In varful iererhiei este fereastra browser. Aceasta fereastra este impartita in doua frame-uri. Fereastra
mare (implicita) a browserului este "parinte" in aceasta ierarhie iar cele doua frame-uri sunt "copiii".
Putem sa dam celor doua fram-euri numele "frame1" si "frame2". Cu ajutorul acestor nume putem
schimba informatii intre cele doua frame-uri.
Trebuie sa analizam trei cazuri:
1. "parent window/frame" acceseaza "child frame"
2. "child frame" acceseaza "parent window/frame"
3. "child frame" acceseaza un alt "child frame"
Din punct de vedere al ferestrei parinte cele doua frame-uri copil se numesc "frame1" si "frame2".
Putem vedea in imaginea de mai sus ca exista o conexiune directa intre fereastra parinte si fiecare frame
copil in parte. Deci daca avem un script in fereastra parinte - in pagina care creaza frame-urile - si dorim
42
sa accesam prin intermediul acestuia frame-urile (continutul unuia dintre ele) pentru a scrie date, trebuie
doar sa folosim numele frame-ului. De exemplu putem scrie:
frame2.document.write("A message from the parent window.");
Iata si o ilustrare a exemplului:

Cateodata putem dori sa accesam fereastra parinte dintr-un frame pentru a rescrie (spre exemplu)
continutul acesteia, indepartand structura de frame-uri la reaccesarea paginii parinte pornind dintr-un
frame copil. Asadar acest procedeu poate fi util atunci cand dorim sa eliminam pe cat posibil frame-urile
la accesari repetate. Eliminarea structurii de cadre inseamna doar incarcarea unei pagini noi in locul
paginii (ferestrei) parinte care a creeat frame-urile. Putem accesa fereastra parinte ("parent frame") din
interiorul ferestrelor copil cu ajutorul cuvantului predefinit "parent". Pentru a incarca un nou document
trebuie sa furnizam un nou URL parametrului "location.href". Deoarece dorim sa eliminam frame-urile
trebuie sa utilizam obiectul locatie al ferestrei parinte. Vom avea o locatie obiect pentru fiecare frame,
inclusiv pentru frame-ul parinte apelat din frame-urile copil. Putem incerca o noua pagina in fereastra
parinte cu comanda:
parent.location.href= "http://...";
Iata si o ilustrare a exemplului:

Foarte des ne vom pune problema accesarii unui frame copil din alt frame copil. Cum putem
influenta din interiorul primei ferestre continutul celei de-a doua? Ce comanda sa folosim intr-o pagina
numita "page1.htm" reprezentand un frame copil? In imaginea aferenta exemplului folosit de noi pana
acum putem vedea ca nu exista legatura directa intre cele doua frame-uri. Aceasta inseamna ca nu putem
apela "frame2" din "frame1" deoarece frame-urile nu se cunosc intre ele (nu stie unul de existenta
celuilalt). Ele sunt conectate indirect, prin intermediul ferestrei parinte. Din punct de vedere al ferestrei
parinte (parent), cea de-a doua fereastra (frame2) este vazuta copil, in timp ce fereastra browserului este
vazuta ca parinte de catre primul frame (frame1). Deci in primul frame trebuie sa scriem urmatoarea
referire pentru a avea acces la obiectul document al celui de-al doilea frame (frame2):
parent.frame2.document.write("Hi, this is frame1 calling.");
Iata si ilustrarea acestui exemplu:
43
Proiectare Site si Web Design - JavaScript - Crearea Ferestrelor
Deschiderea automata a unei noi ferestre de browser este una dintre proprietatile deosebite ale
JavaScript. Putem sa incarcam in noua fereastra fie un document deja creat (de exemplu un document
HTML de pe server), fie putem crea si incarca un document nou. In cele ce urmeaza vom vedea cum
putem deschide o noua fereastra si incarca o pagina HTLM existenta in aceasta fereastra.
Urmatorul script deschide o noua fereastra browser si incarca o pagina oarecare:

<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" value=Deschide fereastra noua" onClick="openWin()">
</form>
</body>
</html>
Pagina "fereastra.htm" este incarcata in noua fereastra prin intermediul metodei "open()".
Putem controla modul in care apare noua ferestra. De exemplu fereastra poate avea o bara de stare, o
bara de instrumente sau o bara de meniuri. Urmatorul script deschide o noua fereastra care are
dimensiunile 200x300. Fereastra nu va avea o bara de stare sau o bara de instrumente dar va avea o bara
de meniuri.
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" value="Open new window" onClick="openWin2()">
</form>
44
</body>
</html>
Se poate cu usurinta constata faptul ca specificam proprietatile in sirul:
width=200,height=300,status=no,toolbar=no,menubar=yes
Observam de asemenea ca nu trebuie folosite spatii in acest sir!
Iata o lista a proprietatilor (impreuna cu domeniul de valori) pe care o fereastra le poate avea:

directories yes / no
height number of pixels
location yes / no
menubar yes / no
resizable yes / no
scrollbars yes / no
status yes / no
toolbar yes / no
width number of pixels
alwaysLowered yes / no
alwaysRaised yes / no
dependent yes / no
hotkeys yes / no
innerWidth number of pixels
innerHeight number of pixels
outerWidth number of pixels
outerHeight number of pixels
screenX position in pixels
screenY position in pixels
titlebar yes / no
z-lock yes / no
Proiectare Site si Web Design - JavaScript - Bara de Stare
Programele dumneavoastra JavaScript pot scrie in bara de stare a browserului - acea bara din
partea de jos a ferestrei dumneavoastra de browser. Tot ce aveti de facut este sa dati o valoare-sir lui
"window.status". Urmatorul exemplu creaza doua butoane care pot fi folosite pentru a scrie un text
oarecare pe bara de stare iar apoi pentru stergerea acestui text.
Scriptul arata astfel:

<html>
<head>
45

</script>
</head>
<body>
<form>
<input type="button" name="look" value="Write!"
onClick="statbar('Salut! Aceasta este bara de stare!');">
<input type="button" name="erase" value="Erase!"
onClick="statbar('');">
</form>
</body>
</html>
Creem un formular cu doua butoane. Ambele butoane apeleaza functia "statbar()". Putem vedea ca
apelarea functiei - initiata de apasarea butonului "Scrie!" - arata astfel:
statbar('Salut! Aceasta este bara de stare!');
In interiorul parantezelor specificam sirul "Salut! Aceasta este bara de stare!", ceea ce inseamna ca sirul
este trimis functiei statbar(). Am definit functia "statbar()" astfel:
function statbar(txt) {
window.status=txt;
}
Ceea ce aduce nou exemplul de fata este folosirea "txt" in interiorul parantezelor din declararea functiei.
Aceasta inseamna ca sirul pe care il transmitem este inmagazinat intr-o variabila "txt".
Transmiterea valorilor catre functii este deseori folosita pentru a face functiile mai flexibile. Putem
transmite mai multe valori functiilor - trebuie doar sa le separam prin virgule.
Sirul "txt" este afisat pe bara de stare prin intermediul "window.status=txt". Stergerea textului de pe bara
de stare se face prin definirea unui sir gol pentru "window.status".
Afisarea textului pe bara de stare poate fi usor utilizata in combinatie cu legaturile hipertext. In loc ca
bara de stare sa afiseze locatia web a paginii din link, este posibil ca pe bara de stare sa avem o descriere
a paginii. Acest link demonstreaza chiar asta - este de ajuns sa pozitionam cursorul deasupra legaturii
pentru ca mesajul din bara de stare sa devina "Don't click here!". Codul pentru acest exemplu arata
astfel:
<A onmouseover= "window.status='Don\'t click here!'; return true;"
onmouseout= "window.status='';"
href="http://www.afaceri-online.net">Acest link</A>
Aici utilizam onMouseOver si onMouseOut pentru a detecta cand pointerul mouse-ului trece pe
deasupra legaturii (linkului).
Probabil va intrebati de ce trebuie sa scriem "return true" in interiorul proprietatii "onMouseOver".
Aceasta inseamna ca browserul nu va executa codul sau propriu ca reactie la evenimentul
"onMouseOver". In mod obisnuit browserul afiseaza pe bara de stare URL-ul (adresa de Internet) spre
care trimite legatura. Daca nu utilizam "return true", browserul va scrie pe bara de stare textul sau
implicit (adresa de web) imediat ce codul nostru a fost executat - deci va sterge textul nostru instantaneu
si utilizatorul nu il va putea citi. In general putem suprima actiunile browserului folosind "return true" in
managerul de evenimente.
"OnMouseOut" nu exista in JavaScript 1.0. Daca folosim Netscape Navigator 2.x putem obtine rezultate
diferite pe platforme diferite. Pe platformele Unix textul dispare chiar daca browserul nu cunoaste
"onMouseOut". Pe platformele Windows textul nu dispare. Daca dorim ca scriptul nostru sa fie
compatibil cu Netscape 2.x pentru Windows, putem scrie de exemplu o functie care afisaza textul pe
bara de stare si il sterge periodic dupa o anumita bucata de timp. Efectul este realizat cu ajutorul unei
intreruperi - pauza (timeout). Acest aspect este analizat in cartea electronica "Java, JavaScript -
Profesional" oferita de site-ul nostru in cadrul pachetului de carti electronice "Internetul Pentru Afaceri"
46
si al carei cuprins va invitam sa il examinati indeaproape.
In scriptul exemplificat mai sus putem vedea inca un lucru - cateodata vom dori sa afisam in textul
de iesire (output) ghilimele simple. Daca dorim sa afisam textul "Don't click me", conform sintaxei
JavaScript folosim gilimele simple (apostroafe) deorece specificam sirul in interiorul unui manager de
evenimente "onMouseOver". Dar cuvantul "Don't" foloseste inca o ghilimea simpla! Browserul este
practic ametit daca scriem direct "Don't ...". Pentru a rezolva problema, putem sa utilizam "\"
(backslash) inaintea ghilimelelor - ceea ce inseamna ca urmarea apartine iesirii de la terminal (textului
pur afisat ca mesaj pe monitor). Evident, putem folosi acelasi procedeu si cu ghilimele duble.
Proiectare Site si Web Design - JavaScript - Obiecte Predefinite
Java Script ne permite sa folosim cateva obiecte predefinite. Acestea sunt, de exemplu, obiectele Data
(Date), Matrice (Array) sau Matematic (Math). Exista si alte obiecte - putem apela documentatia
oferita de Netscape pentru informatii complete.
Vom examina obiectul "Date"
Dupa cum sugereaza si numele, acest obiect ne permite sa lucram cu data si ora din calculator putand cu
usurinta, spre exemplu, sa calculam cate zile au mai ramas pana la Craciunul urmator. Sau putem adauga
ora exacta documentului nostru HTML.
Sa incepem cu un exemplu care afiseaza ora exacta. Trebuie creeat mai intai un nou obiect de tip "Date".
Petru aceasta folosim un nou operator. Sa fim putin atenti la urmatoarea linie de cod:
today=new Date()
Aceasta creeaza un nou obiect de tip "Date" - "today". Daca nu specificam o anumita data si ora cand
cream un nou obiect "Date", atunci data si ora existente vor fi cele folosite. Acasta inseamna ca dupa
executarea "today=new Date()", noul obiect Date - "today" va reprezenta data si ora din momentul
prezent.
Tipul Date ofera cateva metode care pot fi folosite cu obiectul "today"
Se pot folosi getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() si asa mai
departe. Puteti gasi documentatia completa asupra obiectului "Date" si asupra metodelor sale in anexa
lucrarii "Java, JavaScript - Profesional" (oferita de site-ul nostru in cadrul pachetului de carti
electronice "Internetul Pentru Afaceri"), al carei cuprins va invitam sa il examinati indeaproape.
Sa observam ca obiectul de tip "Date" reprezinta numai o data sau o ora "statica". Nu este vorba de un
ceas care arata trecerea fiecarei secunde sau milisecunde automat. Pentru a obtine o noua data si o noua
ora trebuie folosita o alta constructie (este vorba de tipul "Date" apelat printr-un nou operator in
momentul constructiei obiectului):
today= new Date(1997, 0, 1, 17, 35, 23)
Aceasta secventa de cod va creea un obiect Date cu proprietatile "Ianuarie 1997, ora 17:35 si 23
secunde". Deci trebuie specificata data si ora dupa tiparul:
Date(year, month, day, hours, minutes, seconds)
Observam ca trebuie sa folosim "0" pentru Ianuarie - si nu "1", asa cum am fi putut presupune. "1" este
folosit pentru Februarie, 2 pentru Martie s.a.m.d.
Acum putem realiza un script care sa furnizeze data si ora actuala. Rezultatul ar arata astfel:
Time: 21:55
Date: 12/8/3903
Codul arata astfel:

</script>
47
Aici trebuie sa folosim metode ca getHours() pentru a afisa data si ora specificate in obiectul de tip
"Date". Putem observa ca am adaugat 1900 anului. Metoda get Year() returneaza numarul anului
incepand cu 1900. Asadar, daca anul prezent ar fi 1997 metoda va returna 97; daca anul prezent ar fi
2010 va returna 110 - nu 10! Daca adaugam 1900 scapam de problema anului 2000. Acest script nu
verifica daca numarul minutelor este mai mic dacat 10 pentru a-l afisa corespunzator, in formatul ":0x".
Aceasta inseamna ca s-ar putea obtine ceva sub forma 14:3 care de fapt inseamna 14:03. Vom vedea in
urmatorul exemplu cum se poate rezolva aceasta problema.
Sa aruncam asadar o privire asupra unui script care afiseaza un ceas functional:
<html>
<head>
<script Language="JavaScript">

</script>
</head>
<body onLoad="clock()">
<form name="clock">
Time:
<input type="text" name="time" size="8" value=""><br>
Date:
<input type="text" name="date" size="8" value="">
</form>
</body>
</html>
Folosim metoda setTimeout() pentru a stabili ora si data in fiecare secunda. Deci creem in fiecare
secunda un nou obiect de tip "Data" cu ora exacta.
Putem vedea ca functia Clock() este apelata de un "onLoad event-handler" in tagul <body>. In partea
de continut a paginii HTML avem doua elemente de text. Functia "clock()" scrie data si ora in aceste
doua elemente in formatul corespunzator. Putem vedea ca folosim doua siruri in acest scop: "timeStr" si
"dateStr". Am afirmat mai devreme ca exista o problema cu minutele mai mici de 10 - acest script o
rezolva cu ajutorul urmatoarei linii de cod:
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
48
Aici numarul de minute este adaugat sirului "timeStr". Daca numarul minutelor este mai mic de 10
trebuie sa adaugam 0. Desi codul acesta poate parea straniu, il putem scrie si in modul de mai jos care l-
ar putea face sa para mai familiar:
if (minutes < 10) timeStr+= ":0" + minutes
else timeStr+= ":" + minutes;
Validarea Datelor din Formularele HTML
Formularele (Forms) sunt foarte des intalnite pe Internet. Datele introduse in formular (input) sunt de
regula trimise catre server sau prin posta electronica spre un cont de e-mail. Dar putem fi siguri ca datele
intoduse de catre utilizator in formular pentru a fi trimise sunt si corecte? Cu ajutorul JavaScript datele
introduse intr-un formular pot fi cu usurinta verificate inainte de a fi transmise prin Internet. Dorim sa
demonstram in aceasta sectiune cum pot fi formularele verificate (validate).
Mai intai sa creem un script simplu. Formularul din pagina HTML va contine 2 campuri text.
Utilizatorul trebuie sa introduca numele in primul camp si adresa de email in cel de-al doilea. Putem
introduce orice in formular si apoi avem grija sa apasam butonul de trimitere. De asemenea putem
incerca sa nu introducem nimic si sa apasam butonul.
Codul este urmatorul:
<FORM name=first>Introduceti numele dumneavoastra:<BR><INPUT name=text1>
<INPUT onclick=test1(this.form) type=button value="Test Input" name=button1>
<P>Introduceti adresa dumneavostra de email:<BR><INPUT name=text2>
<INPUT onclick=test2(this.form) type=button value="Test Input" name=button2>
</P></FORM>
Rezultatul este urmatorul:
Introduceti numele dumneavoastra:
Introduceti adresa dumneavostra de email:
In cazul primului element de formular se va returna un mesaj de eroare daca nu este nimic introdus.
Desigur, acest tip de verificare insa nu impiedica utilizatorul sa introduca un nume fictiv! Browserul
accepta si numere. Asa ca daca veti introduce "17" va fi returnat mesajul "Hi 17!". Se pare ca nu este cel
mai bun mod de verificare.
Cel de-al doilea element de formular este mai sofisticat. Incercati sa introduceti un sir simplu - numele
dumneavostra de exemplu - in casuta pentru e-mail. Nu o sa treaca testul (decat daca ati avea caracterul
"@" in numele dumneavostra). Criteriul de baza pentru a accepta datele introduse ca si adresa de e-mail
este ca aceste date trebuie sa contina caracterul "@". Un sigur "@" ajunge dar, desigur, nu este o
conditie suficienta ci numai necesara. Toate adresele de e-mail contin "@" asa ca este normal sa cautam
"@" in adresa (printre altele).
Cum arata scriptul pentru aceste doua elemente? Iata-l:
<html>
<head>

</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>
</html>
Mai intai sa ne uitam putin la codul HTML din corpul documentului. Este vorba doar de creerea a doua
elemente text si doua butoane. Butoanele apeleaza functiile test1(...) sau test2(...) in functie de ce buton
este apasat. Transmitem this.form catre functii pentru a adresa elementele din functii.
Functia test1(form) verifica daca sirul este gol. Aceasta se realizeaza prin intermediul secventei "if
(form.text1.value == "")... ", "form" fiind variabila care primeste valoarea "this.form". Putem
obtine valoarea elementului introdus prin folosirea "value" in combinatie cu "form.text1". Pentru a
vedea daca sirul este gol il comparam cu "". Daca datele introduse sunt egale cu "" atunci nu a fost
introdus nimic. Utilizatorul va primi un mesaj de eroare. Daca ceva este introdus, utilizatorul va primi
un mesaj OK.
Problema care poate aparea aici este ca utilizatorul poate introduce numai spatii. Acestea sunt
consemnate ca un input valid! Daca doriti, puteti verifica aceste posibilitati si sa le excludeti. Credem ca
este destul de simplu tinand cont de restrictiile prevazute in cazul nostru.
Sa aruncam o privire si peste functia test2(form). Aceasta functie compara sirul de intrare cu un sir
gol "" pentru a fi siguri ca a fost introdus ceva. Dar mai trebuie ceva adaugat comenzii "if". Anume
operatorul "||" numit si operatorul OR. In acest fel comanda "if" verifica daca prima sau cea de-a doua
comparare este adevarata. Daca cel putin una dintre ele este adevarata, atunci comanda "if" primeste
valoarea "adevarat" si urmatoarea comanda este executata. Asadar vom obtine un mesaj de eroare numai
daca sirul este gol sau daca nu exista caracterul @ in sirul nostru.
Proiectare Site si Web Design - JavaScript - Obiectul Image
Vom examina in continuare obiectul Image ce a aparut odata cu JavaScript 1.1 (deci cu Netscape
Navigator 3.0). Cu ajutorul obiectului "Image" putem schimba imaginile din pagina web in functie de
evenimentele utilizator. Astfel avem posibilitatea sa creem animatii interactive in paginile web.
Mentionam ca browserele mai vechi (Netscape Navigator 2.0 si Microsoft Internet Explorer 3.0)
folosesc JavaScript 1.0 si nu pot sa ruleze scripturile implicand lucrul cu obiecte de tip "Image".
Haideti sa vedem cum pot fi adresate imaginile cu ajutorul JavaScript
Toate imaginile dintr-o pagina web sunt reprezentate si evidentiate in JavaScript printr-o matrice.
Aceasta matrice este numita "images". Practic, matricea "images" este o proprietate a obiectului
"document". Fiecare imagine de pe o pagina web are atribuit un anumit numar de ordine. Prima
imagine are numarul 0, cea de-a doua imagine are numarul 1 si asa mai departe. Adresam deci prima
imagine cu document.images[0].
Fiecare imagine dintr-un document HTML este considarata un obiect Image. Un obiect "Image" are o
serie de proprietati care pot fi accesate prin JavaScript. De exemplu putem vedea ce dimensiuni are o
imagine folosind proprietatile "width" si "height". Concret:
50
document.images[0].width
furnizeaza latimea (in pixeli) a primei imagini din pagina web.
Daca avem prea multe imagini pe o singura pagina devine din ce in ce mai greu sa le tinem pe toate
sub observatie. Atribuirea de nume fiecarei imagini rezolva aceasta problema. Daca declaram o imagine
prin tagul:
<img src="img.gif" name="myImage" width=100 height=100>
o putem adresa apoi din JavaScript utilizand fie sintaxa: "document.myImage ", fie:
"document.images["myImage"] ".
Incarcarea imaginii noi

Desi este de dorit cate o data sa stim care sunt dimensiunile unei imagini pe o pagina web, nu prea avem
neaparat nevoie de acest lucru. Dorim sa putem schimba imaginile pe pagina in functie de evenimentele
utilizator (de exemplu trecerea mouse-ului peste imagine). Pentru aceasta folosim proprietatea "src". La
fel ca in tagul <img>, proprietatea "src" reprezinta si in JavaScript adresa imaginii afisate. Cu JavaScript
1.1 putem da o noua adresa unei imagini deja incarcate (suprascriind practic aceasta imagine). Rezultatul
este ca imaginea de la noua adresa va fi si ea incarcata. Aceasta noua imagine inlocuieste vechea
imagine de pe pagina web la declansarea evenimentului utilizator. Iata si un exemplu:
<img src="imagine-javascript.gif" name="myImage" width=100 height=100>
Imaginea img1.gif este incarcata si ia numele "myImage". Urmatoarea linie de cod inlocuieste fosta
imagine "imagine-javascript.gif" cu o noua imagine "imagine-2-javascript.gif":
document.myImage.src= "imagine-2-javascript.gif";
Noua imagine are intotdeauna aceleasi dimensiuni ca si vechea imagine. Nu putem schimba suprafata de
afisare a imaginii. Puteti si testa acest exemplu apasand butonul de mai jos (codul functioneaza numai o
singura data):
Preincarcarea imaginilor
Unul dintre neajunsuri este ca noua imagine este incarcata dupa ce a fost atribuita o noua valoare
(adresa) proprietatii "src". Daca imaginea ce urmeaza sa se suprapuna peste vechea imagine la
declansarea evenimentului utilizator nu a fost deja incarcata pe calculatorul utilizatorului la incarcarea
paginii in browser, este necesara o perioada suplimentara de timp pentru incarcarea imaginii din Internet
atunci cand aceasta este solicitata. In unele cazuri acest fenomen nu creeaza probleme - dar exista si
situatii in care astfel de intarzieri sunt inacceptabile. Deci ce putem face? Solutia este preincarcarea
imaginilor. Pentru aceasta creem un nou obiect "Image". Haideti sa vedem si codul:
hiddenImg= new Image();
hiddenImg.src= "img3.gif";
Prima linie creeaza un nou obiect "Image". A doua linie defineste adresa imaginii care va fi reprezentata
de obiectul "hiddenImg". Am vazut deja ca atribuirea unei noi valori-adresa atributului "src" forteaza
browserul sa incarce imaginea de la adresa indicata. Deci imaginea "imagine-2-javascript.gif" este deja
incarcata cand cea de-a doua linie de cod este executata. Asa cum sugereaza cuvantul standard
"hiddenImg", browserul va presupune ca imaginea nu este afisata dupa ce s-a terminat incarcarea
paginii impreuna cu toate elementele sale (text, grafica, javascript, etc...). Imaginea este pastrata in
memoria temporara a browserului in vederea unei utilizari ulterioare, cel maiprobabil la declansarea
unui eveniment utilizator. Pentru a afisa noua imagine putem sa folosim urmatoarea linie de cod:
document.myImage.src= hiddenImg.src;
Acum imaginea este preluata din memoria cache si afisata imediat. Deja noi avem incarcata imaginea.
Bineinteles ca browserul trebuie sa fi terminat incarcarea fisierului (fara ca utilizatorul sa supravegheze
procesul) pentru a putea afisa imaginea fara intarzieri. Daca avem un numar mare de imagini pe care le
preincarcam este posibil sa avem intarzieri in afisare. Trebuie sa avem intotdeauna in vedere viteza
conexiunii, preincarcarea imaginilor nu face ca imaginile sa fie incarcate mai repede, ci doar sa fie
incarcate inainte de a fi afisate la declansarea evenimentului utilizator.
Schimbarea imaginii ca urmare a unor actiuni initiate de utilizator
51
Putem creea efecte deosebite prin schimbarea imaginilor ca urmare a unor evenimente. Spre exemplu,
putem schimba imaginile la trecerea mouseului deasupra unei zone a paginii. Sa testam acest exemplu
prin mutarea mouselui deasupra imaginii (mentionam ca se va genera un mesaj de eroare intr-un
browser care utilizeaza JavaScript 1.0 - vom vedea si cum sa evitam aceasta eroare):
Codul sursa al acestui exemplu arata astfel:

<A href="http://www.afaceri-online.net"
onmouseover="document.myImage2.src='../../images/imagine-2-javascript.gif'"
onmouseout="document.myImage2.src='../../images/imagine-javascript.gif'">
<img src="../../images/imagine-javascript.gif"
name="myImage2" width=120 height=38 border=0></A>
Aceasta secventa de cod cauzeaza unele probleme atunci cand:
1. Utilizatorul nu foloseste un browser compatibil JavaScript 1.1.
2. Cea de-a doua imagine nu a fost inca preincarcata.
3. Trebuie rescris codul pentru fiecare imagine in parte.
4. Dorim sa avem un script cu un grad mare de generalitate, asadar care sa poata fi folosit in multe
pagini fara modificari substantiale.
Este de dorit sa avem un script care sa poata fi folosit in mai multe pagini, in situatii diverse implicand
imagini mai mari sau mai mici, mai multe sau mai putine, plasate ca meniuri in tabele sau constituindu-
se ca butoane interactive izolate. Practic sunt trei puncte care trebuie avute in vedere pentru a avea un
script flexibil:
Numarul de imagini - nu conteaza daca sunt 10 sau 100 imagini.
Positionarea imaginilor - nu conteaza ca sunt butoane singulare sau meniuri.
Ordinea imaginilor - trebuie sa fie posibila schimbarea ordinii imaginilor fara a fi necesara modificarea
codului.
In cartea electronica "Java, JavaScript - Profesional" se prezinta un script complet ce rezolva elegant
aceste probleme. Scriptul este mai lung dar universal (cu grad mare de generalitate), aplicabil asadar fara
adaptari ulterioare unei game largi de situatii concrete.
Site si Web Design - JavaScript - Exemple
Afisare data
Afiseaza data computerului sub forma "Luni, 10-iulie-2001" in pagina HTML.
Afisare Data
Acest exemplu JavaScript afiseaza data computerului sub forma "Luni, 10-iulie-2001" in pagina HTML.
Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si
vizualizat.
<html>
<head>
<title>Exemplu JavaScript-HTML - Afisare data</title>
</head>
<BODY>
<SPAN id=data></SPAN>
<script language="javascript">

</script>
</BODY>
</html>
Afisare fereastra pop-up

Va fi afisata o noua fereastra a browserului care va contine - sub forma unei pagini web -
reclame, notificari utilizator, informatii diverse, etc...
Afisare Fereastra Popup
Acest exemplu JavaScript va afisa intr-o noua fereastra a browserului o pagina de tip popup putand
contine reclame, informatii diverse, notificari utilizator, etc.... Exemplul este integrat in codul HTML al
unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Exemplu de pop-up JavaScript</title>
<script>
function openPopup(url, windowName, width, height, popupX, popupY)
{
var optiuni =
"screenX=" + popupX +
",left=" + popupX +
",screenY=" + popupY +
",top=" + popupY +
",width=" + width +
",height=" + height +
",toolbar=false,scrollbars=false,resizable=false,status=false"+
",menubar=false,location=false,directories=false";
// modificati caracteristicile ferestrei
window.open(url, windowName, optiuni, true);
}
openPopup("../../bogdan_world","Bogdan",300,300,100,100);
</script>
</head>
<body>
<H3 align="right">Pagina aceasta lanseaza un pop-up.</H3>
</body>
</html>
Afisare pop-up fara margine

Apare o fereastra pop-up fara margini (doar in IE4+). Aceasta fereastra nu poate fi inchisa decat daca
este apasat "Alt-F4" (nu are buton de inchidere). In celelalte browsere va aparea o fereastra pop-up
obisnuita.
Afisare Fereastra Popup Fara Margine
53
Acest exemplu JavaScript va afisa intr-o noua fereastra a browserului o pagina de tip popup care nu are
marginile specifice unei ferestre Internet generate de browser, asadar nu are nici butoane sau meniuri,
neputand fii inchisa in IE4+ decat prin actionarea simultana a combinatiei de taste "Alt+F4". In celelalte
browsere va aparea o fereastra popup obisnuita. Exemplul este integrat in codul HTML al unei pagini
web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Exemplu de pop-up fara margini in JavaScript</title>
<script>
// schimba variabilele acestea
var url = "popup.html"
var titlu = "Cool! fereastra fara margine!!"
var windowW=200 // latime
var windowH=300 // inaltime
var winx = 100
var winy = 100;
// de aici in jos nu e nevoie de vreo modificare
function openpopup(){
if (document.all) // doar pentru IE
{
win = window.open("","popup","fullscreen,width="+windowW+
",height="+windowH);
win.blur();
window.focus();
win.resizeTo(windowW,windowH);
win.moveTo(winx,winy);
win.document.write( "<html>"+
"<head>"+
"<title>"+titlu+"</title>"+
"</head>"+
"<Frameset><frame src='"+url+"' name='fr' scrolling=auto>"+
"</frameset></html>");
}
else
{
win=window.open(urlPop,"popFrameless","scrollbars,width="+windowW+
",height="+windowH+",left="+left+",top="+top);
}
win.focus()
}
</script>
</head>
<body>
<H3 align="center">Pagina aceasta lanseaza un pop-up fara margini la click-ul
utilizatorului pe link</H3>
<p align="center">
<a href="javascript:openpopup()">Click Aici pentru Pop-up</a> </p>
</body>
</html>
54
Afisare referer
Pagina in care a fost utilizatorul inainte sa intre in pagina curenta.
Identificare si Afisare Referer
Acest exemplu JavaScript afiseaza pagina in care a fost utilizatorul inainte sa intre in pagina curenta.
Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si
vizualizat.
<html>
<head>
<title>Afisare Referer Vizitator</title>
</head>
<BODY>
<Script>
document.write("Ati sosit de pe pagina: " + document.referrer + "!!")
</script>
</BODY>
</html>
Afisare aleatoare de linkuri
De fiecare data cand va fi incarcata, pagina va afisa un alt link dintr-o lista predefinita de mai multe
linkuri.
Afisare Aleatoare a unui Link dintr-o Lista de Linkuri
Acest exemplu JavaScript face ca de fiecare data cand este incarcata pagina sa se afiseze un alt link
dintr-o lista predefinita de linkuri. Exemplul este integrat in codul HTML al unei pagini web oarecare
pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Link aleator dintr-o lista de linkuri</title>
<script>

</script>
</head>
<BODY BGCOLOR="#E9E9E9">
</BODY>
</html>
Afiseaza rezolutia monitorului
Afiseaza in pagina rezolutia monitorului, de forma "800 x 600".
Aflare si Afisare Rezolutie Monitor
Acest exemplu JavaScript afiseaza in pagina rezolutia monitorului de forma "800 x 600". Exemplul este
integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Rezolutii monitoare</title>
</head>
<body>
<script>
55

</script>
</body>
</html>
Afiseaza sursa HTML a paginii
Un link la activarea caruia se va afisa sursa documentului HTML.
Captarea si Afisarea Codului Sursa al unei Pagini Web
Acest exemplu JavaScript afiseaza in pagina un link care odata activat (printr-un click de mouse)
genereaza un fiser text cu codul sursa al paginii. Exemplul este integrat in codul HTML al unei pagini
web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Afisare Cod Sursa Pagina Web</title>
<script language="Javascript">

</script>
</head>
<body>
<a href="#" onclick="viewsource();">Vezi codul sursa al paginii curente</a>
</body>
</html>
Aflare nume utilizator si salvare in cookie
Utilizatorul este rugat sa-si tasteze numele, dupa care acest nume este salvat intr-un cookie si utilizat in
pagina.
Aflare Nume Utilizator si Salvare in Cookie
Acest exemplu JavaScript intreaba utilizatorul care este numele sau si salveaza apoi acest nume intr-un
cookie pentru utilizarea ulterioara in diferite contexte a numelui captat. In acest caz, dupa salvarea in
cookie in pagina se va afisa un salut catre utilizator, utilizand numele stocat in cookie. Exemplul este
integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Captare nume utilizator in cookie</title>
</head>
<body>
<SCRIPT language="JavaScript">

</SCRIPT>
</body>
</html>
Animatie in status-bar
O mica animatie in status-bar (==>=).
Animatie in StatusBar
Acest exemplu JavaScript afiseaza o mica animatie in bara de jos a browserului (statusbar). Exemplul
este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Animatie JavaScript in StatusBar</title>

</script>
</head>
<body onLoad="welcometext()">
<H3> Uite-te in bara de jos a browser-ului (statusbar) </H3>
</body>
</html>
Bannere afisate prin rotatie
Afiseaza pe rand o serie de bannere, dupa un anumit interval de timp banner-ul curent fiind inlocuit cu
urmatorul.
Bannere Afisate prin Rotatie
Acest exemplu JavaScript afiseaza in pagina prin alternanta dupa un anumit timp mai multe bannere
(poze cu linkuri) dintr-un director local. Exemplul este integrat in codul HTML al unei pagini oarecare
pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Exemplu JavaScript cu Bannere Afisate prin Rotatie</title>
<SCRIPT>

</SCRIPT>
</head>
<BODY onLoad="rotate()">
<CENTER>
<IMG SRC="../images/imagine-javascript.gif" WIDTH=120 HEIGHT=38
NAME="adBanner">
</CENTER>
</BODY>
</html>
Bara de afisare a orei exacte
Ora exacta este afisata intr-un textbox.
Afisarea Orei Exacte intr-un Textbox din Pagina Web
Acest exemplu JavaScript va afisa in pagina in interiorul unui textbox ora exacta pana la secunda
inclusiv. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de
urmarit si vizualizat.
<html>
<head>
<title>Ora Exacta in TextBox</title>

</SCRIPT>
</head>
<body onload=startclock() >
<FORM name="clock" onSubmit="0">
Ora exacta este :
<INPUT type="text" name="face" size="%speed" value="">
</FORM>
</BODY>
</html>
Bouncing text in status-bar
Un text care se misca de stanga la dreapta si inapoi (in status-bar).
Afisare Text Animat in Statusbar
Acest exemplu JavaScript va afisa un text care se misca de la stanga la dreapta si inapoi in status-bar.
Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si
vizualizat.
<html>
<head>
<title>Text in Statusbar</title>

</script>
</head>
<body>
<H3>Urmareste textul din statusbar</H3>
</BODY>
</html>
Butoane in stil "flat"
Linkurile apar ca butoane de tip flat.
Creare Butoane Interactive in Stil "Flat"
Acest exemplu JavaScript va afisa patru butoane interactive de tip link realizate in stil "flat". Exemplul
este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Butoane Interactive de tip "Flat"</title>
<style>
.fbuton
{
padding: 2px 12px 3px 12px;
text-decoration:none;
color:black;
text-align: center;
font-family:arial;
font-size:12;
font-weight:normal;
border-color: #B2B2B2;
border-style: solid;
border-width: 1px;
background-color: #DDDCCC;
}
.fbuton:hover
{
border-color:white black black white;
text-decoration:none;
background-color: #C7C7BA;
border-style: solid;
border-width: 1px;
}
</style>
<script>
function dw(fbuton)
{
fbuton.style.borderColor= "black white white black";
}
function up(fbuton)
{
fbuton.style.borderColor= "white black black white";
}
61
</script>
</head>
<a href="url1" class="fbuton" onmousedown="dw(this);"
onmouseout="up(this);">Buton1</a>
</BODY>
</html>
Buton cu o imagine de fundal
Un buton obisnuit poate lua o infatisare deosebita cu CSS folosind o imagine sau o culoare ca fundal.
Creare Butoane Interactive cu Imagine de Fundal
Acest exemplu JavaScript va afisa doua butoane interactive realizate cu o culoare, respectiv cu o
imagine de fundal. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi
usor de urmarit si vizualizat.
<html>
<head>
<title>Butoane cu Imagini si Culori de Fundal</title>
</head>
<INPUT value="go,go,go !!!" TYPE="submit"
style="background-image:url('plasma.jpg');font-weight:bold">
<INPUT value="go,go,go !!!" TYPE="submit"
style="background:'skyblue'">
</BODY>
</html>
Captare efect buton dreapta mouse
Capteaza apasarea butonului din dreapta al mouse-ului si in loc sa fie afisat meniul popup al browserului
specific Windows, se va afisa o caseta de dialog personalizata.
Manipulare Evenimente Buton Stanga si Buton Dreapta Mouse
Acest exemplu JavaScript capteaza evenimentele utilizator de tip "mouse" - apasarea butonului din
dreapta sau din stanga al mouse-ului - si, in loc sa fie afisat meniul popup al browserului specific
Windows sau sa se realizeze o alta actiune implicita, se va afisa o caseta de dialog. Exemplul este
integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Detectare click utilizator si preluare functii mouse</title>
var message="Ati efectuat click pe butonul din dreapta";
function click(e)
{ // Internet explorer
if (document.all)
{
if (event.button == 2)
{
alert(message);
return false;
}
}
62
// Netscape Navigator
if (document.layers)
{
if (e.which == 3)
{
alert(message);
return false;
}
}
}
if (document.layers)
{ // capturez evenimentul la NS
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
</script>
</head>
<form name="form2">
<p align="center">
<input type="submit" name="banner" VALUE="Buton pentru detectat clickurile de
mouse" onClick="alert('Ati efectuat click pe butonul din stanga')">
</p>
</form>
</BODY>
</html>
Celsius <-> Fahrenheit
Conversie intre temperatura exprimata in grade Celsius si cea exprimata in grade Fahrenheit.
Conversie Temperatura Celsius - Fahrenheit
Acest exemplu JavaScript converteste temperatura din grade Celsius in grade Fahrenheit si invers.
vizualizat.
<html>
<head>
<title>Conversie Grade</title>
<SCRIPT LANGUAGE="JavaScript">
function celtofar (form)
{
form.fahrenheit.value = form.celsius.value*1.8+32
}
function fartocel (form)
{
form.celsius.value = round((form.fahrenheit.value-32)/1.8)
}
</SCRIPT>
</head>
<body>
<FORM>
Celsius
<INPUT TYPE ="text" NAME="celsius" SIZE=15
onkeypress ="celtofar(this.form)">
Fahrenheit
<INPUT TYPE="text" NAME="fahrenheit" SIZE=15
63
onkeypress ="fartocel(this.form)">
</form>
</body>
</html>
Data si ora in titlebar
Afiseaza data si ora (actualizate la fiecare secunda) in titlebar si statusbar.
Afisare Data si Ora in TitleBar
Acest exemplu JavaScript afiseaza data si ora (actualizate la fiecare secunda) in titlebar si statusbar.
vizualizat.
<html>
<head>
<title>Data si Ora Afisate in TitleBar</title>
<script>

</script>
</head>
<body>
</body>
</html>
Favorites icon
Atunci cand este setat un bookmark la site-ul dvs. (salvare adresa pagina in Favorites), acesta poate avea
in IE5+ un icon personalizat.
Bookmark la Site cu Icon Vizibil in Favorites
Acest exemplu JavaScript face ca atunci cand este setat un bookmark la site-ul dvs. acesta sa poata avea
atasat in IE5+ un icon personalizat vizibil in Favorites. Exemplul este integrat in codul HTML al unei
pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.
<html>
<head>
<title>Pagina cu icon personalizat un Favorites</title>
<LINK REL="SHORTCUT ICON" HREF="../../images/iconul-meu.ico">

</head>
<body>
<p>Pagina cu icon personalizat un Favorites</p>
</body>
</html>
64

Proiectare Site Si Web Design

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Proiectare Site Si Web Design

Enviado por

Direitos autorais:

Formatos disponíveis

Ministerul Educaţie al Republicii Moldova

Colegiul cu Microelectronică şi Tehnică de Calcul

La lucrarea de laborator Nr:1

Disciplina: Programare Web

Ministerul Educaţie al Republicii Moldova

La lucrarea de laborator Nr:2

Disciplina: Programare Web

Un prim document HTML ar fi ceva de genul acesta:

Vom adauga primele elemente de text

O eticheta poate avea mai multe atribute.

Stiluri pentru blocurile de text

Colegiul cu Microelectronică şi Tehnică de Calcul

La lucrarea de laborator Nr:1

Disciplina: Programare Web

Identarea unui bloc

Adresa URL a unei imagini

Chenarul si dimensionarea unei imagini

Alinierea unei imagini

Alinierea textului in jurul imaginii

Imagini pentru fondul unei pagini

Imagini folosite ca legaturi

<a href ="index.html"><img src= "../../images/img1.jpg "></a>

Legaturi intre pagini aflate in acelasi director

Legaturi intre pagini aflate pe acelasi disc local

O legatura catre un site particular

Definirea culorilor de fond pentru un tabel

Dimensionarea celulei unui tabel

Dimensionarea unui tabel

Alinierea continutului unei celule

Tabele cu forme oarecare

Culori pentru chenarele cadrelor si dimensionarea chenarului unui cadru

Pozitionarea documentului intr-un cadru

Atribute esentiale ale elementului <form>

Formulare cu un camp de editare si un buton de expediere

Campuri de editare multilinie

Sinteza Taguri HTML

Marcaje Formatare Caractere

Marcaje pentru Imagini

Marcaje pentru Liste

Marcaje pentru Cadre

Marcaje pentru Formulare

Marcaje pentru Caractere Speciale

Proiectare Site si Web Design - Standardul CSS

Stiluri in Fisiere Externe

<H2>Acesta este text formatat ca Header 1</H2>

Pseudo Clase de Stiluri

Proiectare Site si Web Design - JavaScript - Generalitati

Proiectare Site si Web Design - JavaScript - Exemple

Urmatoarea imagine arta ierarhia creata de pagina noastra:

Dorim acum sa obtinem informatii despre obiecte si sa manipulam aceste obiecte.

Proiectare Site si Web Design - JavaScript - Ferestre Cadru

Urmatorul script deschide o noua fereastra browser si incarca o pagina oarecare:

Proiectare Site si Web Design - JavaScript - Bara de Stare

Scriptul arata astfel:

Proiectare Site si Web Design - JavaScript - Obiecte Predefinite

Validarea Datelor din Formularele HTML

Introduceti adresa dumneavostra de email:

Proiectare Site si Web Design - JavaScript - Obiectul Image

Incarcarea imaginii noi

Codul sursa al acestui exemplu arata astfel:

Site si Web Design - JavaScript - Exemple

Afisare fereastra pop-up

Afisare pop-up fara margine