Curs Web

Welcome to Google Page Creator
http://193.226.6.117/Szilard/Teaching/WebDesign/webdesign_nav.html
Introducere World Wide Web

Ce este World Wide Web?
World Wide Web (n traducere directa, Plasa (retea) globala), WWW, sau simplu Web, este, cum sugereaza si
numele, o retea globala de calculatoare, calculatoare care comunica ntre ele printr-un protocol de retea numit
HTTP (HyperText Transfer Protocol).
Web-ul este un sistem hipertext
Ce text?
Modul de prezentare a unei pagini Web este similar unui fisier Help de Windows, unde, daca dati clic pe un
cuvnt-cheie activ, va apare alta pagina de Help. Si pe Web, puteti sa cititi o pagina care contine cuvinte cheie, iar
daca doriti sa aflati mai multe despre un subiect anume, puteti da clic pe un cuvnt-cheie asociat si vi se afiseaza o
noua pagina, despre subiectul respectiv. Acestea sunt informatii structurate n sistem hipertext.
Web-ul este distribuit
Cui?
Daca aveti, sa zicem, o enciclopedie despre animale, n format Help pentru Windows, aceasta ocupa mult spatiu pe
harddisc. Mai ales daca are si imagini sau sunete incluse. Este costisitor, n special daca trebuie sa si dati bani pe
enciclopedia respectiva.
Imaginati-va ca aceasta enciclopedie ar fi mpartita n capitole, si fiecare capitol s-ar tine pe alt calculator, conectat
la uriasa retea Internet. Cnd dumneavoastra ati da clic pe un cuvnt cheie, de exemplu tigru, calculatorul dvs. ar
sti pe care calculator din Internet se tine capitolul pentru litera T, ar copia prin retea capitolul respectiv si vi l-ar
afisa pe ecran. Iar daca ati avea acces la mii de enciclopedii, despre toate temele imaginabile, deja Internetul ar fi
mai valoros dect propriul dvs. calculator si toate programele instalate pe el. Este vorba de informatie, mai multa
informatie dect puteti citi n mai multe vieti; informatie n care va puteti pierde usor. Informatia este distribuita n
retea, pe mai multe calculatoare, fiecare tinnd o mica parte din ea, si facnd-o disponibila pentru toti ceilalti.
Web-ul este usor de navigat
Navigat?
Cum am mai spus, Web-ul este o mare de informatie, si va puteti pierde usor navignd prin ea. La nceputuri,
World Wide Web era ntr-adevar un sistem hipertext, adica paginile de Web contineau exclusiv text, n care unele
cuvinte sau propozitii erau active (cnd dadeati clic pe ele, navigati la o alta pagina). Cu evoluarea Web-ului, au
aparut si alte tipuri de informatii imagini, sunete, animatii, chiar clipuri video. Paginile au devenit mult mai
atractive, mai colorate, si sunt mult mai usor de navigat. Daca va place o imagine sau un subiect, si daca este activ,
puteti da usor clic pe el, si ati si ajuns pe pagina care e legata de imaginea sau subiectul respectiv. Ati navigat la
pagina respectiva.
Web-ul este inter-platforma
Si ce daca?
Aveti un supercalculator Cray ultimul racnet sau vreti sa va dati pe Internet cu Deep Blue (stiti dvs.,
supercalculatorul IBM care l-a batut pe Gary Kasparov la sah)? Sau va ajung economiile doar pentru un 286? Sau
poate aveti un MacIntosh? Nu conteaza! Orice pagina de Web se poate vizualiza si arata la fel (sau aproximativ,
ma rog) pe oricare dintre acestea. Indiferent daca aveti monitor color cu plasma si cu brizbrizuri, cu diagonala de
doi metri, sau e ecranul alb-negru de 15 centimetri al unui laptop amart, pagina se poate vizualiza, fara sa fie
nevoie sa se schimbe ceva pe calculatorul care tine capitolul cu T (cautam tigrul, va mai amintiti?) Inter-
platforma nseamna ca puteti accesa informatii de pe Web la fel de bine de pe orice tip de calculator cu orice
sistem de operare si cu orice monitor. Daca aveti un browser (cum ar fi Netscape sau Internet Explorer), si sunteti
conectat la Internet, totul se rezolva si viata e mai frumoasa.
Web-ul este dinamic
Adica se schimba des?
Un document pe Web este mult mai usor de schimbat dect daca ar fi pe hrtie. Si e mult mai ieftin! Nu aveti
nevoie de hrtie, cerneala si alte minuni ale tehnologiei tiparului. Sunteti responsabil de pagina Web a unei firme
care produce rulmenti? Are adresa www.rulmenti.ro? Seful v-a rugat (...) sa schimbati pagina despre produsul
MegaRulment, pentru ca n loc de varianta cu zece bile, acum se produce cu unsprezece bile? (poate spera sa va
strice sfrsitul de saptamna). Nici o problema! Trebuie doar sa schimbati o singura cifra ntr-un fisier pe serverul
firmei cinci minute si oricine va viziteaza pagina va citi informatiile corecte despre MegaRulment. Mii de
pagini Web se nasc si mor n fiecare minut, sa nu mai vorbim de cele care numai se modifica. Aceasta
caracteristica dinamica a Web-ului face ca informatiile sa fie proaspete, n consecinta valoroase.
Web-ul este interactiv
Da? Cu cine?
Prin faptul ca dumneavoastra va alegeti legaturile pe care browserul dumneavoastra sa le urmeze adica navigati
prin pagini pe care le alegeti dvs. din multitudinea paginilor existente Web-ul apare n functie de dorintele dvs.,
vedeti paginile pe care le doriti dvs. Aceasta este interactivitate ntre dvs. si Web. Radioul este putin interactiv,
prin faptul ca influentati ce doriti sa auziti la un post doar telefonnd la post si spunndu-va parerea realizatorului
emisiunii. Nu intram n detalii...
Mai mult, puteti trimite informatie napoi la server, prin formulare electronice, puteti sa va jucati prin intermediul
programelor Java, sau puteti sa va plimbati prin lumi virtuale 3D. Puteti chiar interactiona cu alti surferi de Web.
Cum functioneaza Web-ul?

Paginile Web sunt continute n fisiere pe un calculator server. Un astfel de server este, de exemplu,
www.yahoo.com, sau www.ccicj.ro. Calculatoarele care acceseaza paginile Web sunt clienti. De fapt, pe clienti
ruleaza programe dedicate vizualizarii paginilor Web, numite browsere Web (cele mai populare fiind Netscape,
Internet Explorer, si, mai nou, Opera), si acestia acceseaza si afiseaza pagina Web pe calculatorul local.
Cum acceseaza si afiseaza browserul o pagina?

Browserul de pe client se conecteaza la server (de exemplu www.utcluj.ro), si, prin protocolul HTTP, i
transmite o cerere de tip adresa de pagina, de exemplu http://www.utcluj.ro/general/edu_ro.html.
Serverul citeste fisierul (sau fisierele) aferent de pe disc si l trimite clientului prin protocolul HTTP, prin retea.
Clientul browserul de fapt citeste fisierul primit si l interpreteaza, apoi afiseaza pagina Web. Un fisier
HTML (HyperText Markup Language) contine, de fapt, pe lnga textul de afisat, si instructiuni care descriu
browserului cum sa afiseze textul respectiv, dar si cum sa afiseze imaginile care vor aparea pe pagina (imaginile
sunt continute n fisiere separate), sau alte elemente multimedia. Instructiunile sunt n limbajul HTML.
Exista si browsere n mod text?
Exista asa ceva?
Da, de exemplu lynx. De ce exista? Pentru ca imaginile sunt fisiere voluminoase, si pe o conexiune lenta la Internet
(vezi linie telefonica de la lele Marie din sat) ar dura o vesnicie pna browserul le-ar aduce si le-ar afisa; pe de
alta parte, daca lucrati la un terminal Unix, conectat la un server local pe care mai lucreaza zece oameni si toti
navigheaza pe Web, saracul server abia reuseste sa transmita la fiecare terminal textul de pe pagina, daramite si
imaginile sau alte specialitati multimedia (mai ales ca fiecare terminal vrea altceva).
Cui apartine Web-ul? Cine l administreaza? Cine face standardele?

Mai ales, cine ncaseaza banii?
World Wide Web a aparut la CERN (Centrul European de Fizica Nucleara), apoi s-a raspndit rapid pe Internet. n
momentul de fata, sunt attea servere de Web independente, nct ar fi imposibil sa apartina cuiva anume.
La fel, fiecare server are administratorul lui, care are grija (sau ar trebui) ca informatiile de pe paginile de pe server
sa fie proaspete si serverul sa nu moara (adica sa ajunga n starea n care sa nu mai poata onora cererile clientilor).
La firme mari, mai ales n cazul comertului electronic (e-commerce), prin Internet, timpul ct serverul este mort
poate nsemna o groaza de bani.
Standardele, teoretic, le face organizatia non-profit WWW Consortium sau, mai scurt, W3C (www.w3.org). Ei
discuta si perfectioneaza standarde noi, ofera programe pentru servere si clienti, documentatie etc. Teoretic, pentru
ca banii vorbesc. Cei doi producatori de browsere rivale, Netscape si Microsoft (care produce Internet Explorer)
implementeaza n browserele lor standardele W3C, dar inventeaza si ei standarde pe care numai browserele lor le
suporta, si l buimacesc complet pe saracul designer de Web, care nu mai stie cum si pentru care browser sa
construiasca pagina, pentru ca daca o construieste ca sa foloseasca toate facilitatile unui browser, clientii cu celalalt
tip de browser nu pot vedea toate aceste facilitati.
Ct despre bani, e destul de complicat. Oricum, toti care se ocupa de Web ncaseaza.
Copyright Enyedi Szilrd.

Page last updated Wednesday, October 26, 2005.
Elemente HTML
Ce este de fapt un fisier HTML?
Un fisier HTML (HyperText Markup Language) este de fapt un fisier text. Este sursa paginii de Web, asa cum
un program n C are fisier sursa. Acest fisier este scris n limbajul HTML, pe care, la afisare, browserul l
interpreteaza.
Fisierul HTML trebuie sa aiba extensia .htm sau .html. Din moment ce este un fisier text, se poate edita cu orice
editor de text, de exemplu Notepad din Windows.
Exemplu
Exercitiu: porniti Notepad. Scrieti urmatorul text:
<html>
<head>
<title>Pagina mea</title>
</head>
<body>
Aceasta este pagina mea
</body>
</html>
Salvati fisierul cu numele pagina.htm. Porniti browserul de Web. n meniul File, dati Open sau Open
Page. n fereastra de dialog care apare, selectati Browse sau Choose File. Gasiti fisierul dvs.,
pagina.htm, selectati-o si dati Open. Ar trebui sa vedeti o adresa cu fisierul dvs. n fereastra de dialog, de
exemplu C:\Temp\pagina.htm. Dati OK, si browserul ar trebui sa afiseze pagina pe care ati creat-o.
Salvati acelasi fisier, dar cu numele pagina (fara extensie). ncercati sa-l ncarcati si sa-l vizualizati din nou.
Limbajul HTML se bazeaza pe tag-uri. Acestea sunt comenzile, sau instructiunile pe care un browser le
interpreteaza, ca sa poata afisa corect pagina. Exemplu de tag: <body> (fara ghilimele, desigur). Semnul <
(mai mic) si > se numesc paranteze unghiulare.
Majoritatea tagurilor se folosesc in perechi; fiecare pereche are un tag de deschidere, (sau de nceput), si unul de
nchidere (de sfrsit). Tag-urile si textul dintre doua taguri se numeste element HTML, iar textul dintre tag-ul de
nceput si cel de sfrsit formeaza continutul elementului. Exemplul de mai sus (<body>) este tag-ul de deschidere
pentru elementul body; observati tag-ul de nchidere pentru acest element, </body>. Tag-urile de nchidere au
caracterul / n plus fata de cele de deschidere. Scopul celor doua taguri <body> si </body> este sa specifice
browserului ca elementul dintre ele este corpul paginii.
Tag-urile se pot scrie cu litere mici sau mari, adica <head> e la fel de valabil ca <HEAD>. Totusi, ncercati sa
folositi tag-uri cu litere mici, deoarece W3C recomanda folosirea literelor mici pentru tag-uri. Mai mult, generatia
urmatoare de standard HTML, standardul XHTML cere tag-uri cu litere mici.
Exercitiu: gasiti alte elemente HTML n fisierul pagina.htm de mai sus.
Analiza exemplului
Orice fisier HTML ncepe cu tag-ul <html> si se termina cu </html>, adica nsasi pagina este un element
HTML, de tip html.
Un fisier (sau pagina) HTML are doua parti: antetul (elementul head) si corpul (elementul body) paginii.
Antetul paginii
Ceea ce apare n partea de antet (head) nu este afisat de catre browser n pagina, ci da doar informatii despre
pagina respectiva. Observati n pagina-exemplu elementul title. Textul continut ntre cele doua tag-uri <title>
si </title> va apare ca titlul ferestrei browserului, adica titlul paginii respective. Din acest motiv, nu este bine ca
titlul unei pagini sa fie lung, pentru ca browserul afiseaza n antetul ferestrei o singura linie de text; daca linia este
prea lunga, se afiseaza doar ce ncape, de la nceputul titlului. Un alt motiv logic pentru titluri scurte este ca nimeni
nu se oboseste sa citeasca un titlu lung si complicat, mai bine se uita la alta pagina, ceea ce nseamna ca ati pierdut
clientul. Fiecare pagina Web are titlu, chiar daca este o subpagina a sitului respectiv. Folositi titluri scurte si
sugestive.
Exercitiu: schimbati titlul paginii create, n Prima Pagina Web Design. Vizualizati.
Observatie: nu este nevoie sa reporniti browserul de fiecare data cnd schimbati pagina, dar trebuie sa dati
Refresh sau Reload; browserul nu stie ca dvs. ati schimbat pagina de Web, astfel ca nu va actualiza pagina
afisata, doar daca i spuneti explicit sa o faca. Apasnd butonul Refresh sau Reload, l fortati sa interpreteze
din nou fisierul HTML modificat.
Corpul paginii
Corpul (body) paginii este cea afisata de browser. n pagina-exemplu din aceasta lucrare, corpul paginii contine
doar text fara formatare (Aceasta este pagina mea).
Exercitiu: adaugati tag-urile <i> si </i> naintea si dupa textul din corpul paginii. Vizualizati.
n mod normal, se impune sa folositi aceste tag-uri, adica sa separati explicit antetul de corpul paginii. Se impune
si nchiderea tag-urilor (cu tag de nchidere), odata deschise. Totusi, browserele ncerc sa interpreteze si sa afiseze
corect chiar si fisiere HTML corupte sau incorecte sintactic. Unii se folosesc de asta si scriu numai minimul de cod
ct sa fie destul pentru interpretarea corecta.
Exercitiu: editati din nou fisierul pagina.htm.
Stergeti tag-ul de nchidere </html>. Vizualizati.
Stergeti si tag-ul </body>. Vizualizati. Stergeti si <body>. Vizualizati din nou.
Stergeti si <html> si <head>. Vizualizati. Stergeti </head> si vizualizati din nou.
Stergeti si <title>. Vizualizati, apoi refaceti <title>, si stergeti </title>. Vizualizati. Ei, nici chiar
asa...browserul nu mai poate decide care este titlul.
Acest lucru este foarte rau! Totdeauna scrieti civilizat si complet un fisier HTML. Este adevarat ca browserele
fac totul ca sa afiseze ca lumea pagina, dar noile standarde HTML impun folosirea exacta a tag-urilor, chiar pentru
a reduce lucrul browserului si pentru a forta programarea ordonata si fisiere usor mentenabile.
Atributele tag-urilor
Tag-urile pot avea atribute. De exemplu, puteti instrui browserul sa afiseze pagina dvs. pe un fun dal albastru,
specificnd un atribut n tag-ul de nceput al elementului <body>, astfel: <body bgcolor=blue>, atributul
bgcolor fiind prescurtarea de la background color.
Exercitiu: refaceti tag-ul <body>, si modificati-l: <body bgcolor=blue>.
Atributele apar totdeauna n pereche: numeatribut=valoareatribut.
Valoarea unui atribut apare totdeauna ntre ghilimele. De obicei, se folosesc ghilimele duble (), dar se pot folosi si
ghilimele simple (), de exemplu cnd valoarea contine si ghilimele duble, de exemplu: nume=Ion Ticnitu
Orosteaga.

Tag-uri de baza
Subtitluri
Subtitlurile (headings) ofera posibilitatea structurarii textului pe pagina Web, facnd-o mai usor de parcurs. Un
text lung, care tot curge, fara a fi structurat pe bucati, poate fi obositor din punctul de vedere al cititorului. Este
important sa rupeti monotonia textului din cnd n cnd, mpartindu-l pe capitole, sau subcapitole. n acest fel, va fi
mai usor si pentru dvs. sa gasiti si sa schimbati ceva n pagina va trebui sa schimbati doar un subcapitol anume.
De asemenea, si cititorul gaseste mai rapid informatia care l intereseaza.
n HTML, puteti lucra cu sase nivele de capitole/subcapitole, de la 1 la 6, folosind tag-urile <h1> ... <h6>, fiecare
avnd cte un tag de nchidere, desigur.
Exemplu: <h1>Capitolul I Epoca de piatra</h1>
Subtitlurile de regula nu sunt numerotate la afisare, ci apar cu litere mai mari, ngrosate, centrate sau subliniate,
deci ntr-o forma care sa le deosebeasca de restul textului. Asta depinde de posibilitatile browserului. Subtitlul
acestui subcapitol (Subtitluri) este un bun exemplu.
Nu exista limita de lungime pentru subtitluri, dar ca si titlul paginii, este indicat sa fie scurte si sugestive. Un
subtitlu de forma Primul nostru produs pentru export, MegaRulment, care este
apreciat att de cumparatorii din Vest, ct si de cei din tara s-ar putea sa-i sperie si sa-i
enerveze pe cititorii interesati de produs. Restrngeti subtitlul la MegaRulment, pentru ca cei interesati vor citi
oricum subcapitolul, iar cei neinteresati vor vedea macar ca este o pagina Web eleganta a unei firme serioase.
Ca regula generala, orice text evidentiat trebuie sa fie scurt, frazele sa fie scurte (daca nu este vorba de beletristica,
desigur); nu scrieti propozitii care sa contina doar litere mari, pentru ca sunt obositoare de citit; folositi ct mai
putine varietati de fonturi, culori si floricele acestea pot face un document colorat si viu, dar si greu de parcurs si
de nteles. Daca doriti sa comunicati informatie cititorului, si nu sa-l impresionati cu talentele dvs. de utilizare a
editorului de text, construiti un document folosind putine elemente de stil, dar cu pricepere. Din pacate, una dintre
scopurile oricarui produs (fie si pagina de Web) este ca cel care l foloseste sa nu observe munca depusa pentru
realizarea acestui produs.
Exercitiu: porniti AceHTML sau alt editor de HTML, si creati structura de baza pentru un fisier HTML (tag-urile
pt. html, antetul si corpul paginii). Apoi scrieti urmatorul text n corpul paginii, si vizualizati n browser:
<h1>Subtitlu de nivel 1</h1><h2>Subtitlu de nivel 2</h2>

<h3>Subtitlu de nivel 3</h3>
<h5> Subtitlu de nivel 5 </h5>
Observati efectele spatiilor multiple din sursa HTML, precum si efectele liniilor vide.
Exercitiu: adaugati n textul de mai sus, dupa tag-ul de nchidere a subtitlului de nivel 3,
textul test. Vizualizati.
Observati ca n HTML, apare automat o linie vida nainte si dupa un subtitlu. Acest lucru se
poate vedea, de fapt, si din prima linie din exemplul de mai sus.
Exercitiu: n exemplul de mai sus, schimbati <h3>Subtitlu de nivel 3</h3> n <h3><h1>Subtitlu de nivel
3</h1></h3>. Observati efectul.
Daca unele tag-uri ale unui element sunt n contradictie cu alte taguri ale aceluiasi element, ultimele (adica
perechea cea mai interna) vor fi luate n considerare. Oricum, ultimul exemplu de mai sus este eronat.
Nu folositi tag-uri de subtitlu pentru a evidentia cuvinte sau expresii n document, altele dect subtitluri, pentru ca
nu acesta le este scopul. Exista alte tag-uri pentru asa ceva. S-ar putea ca n browserul dvs., pagina sa arate bine,
dar alte browsere sa afiseze subtitlurile ntr-un alt mod, sau chiar sa le numeroteze. Pe de alta parte, unele programe
de cautare pe Internet extrag subtitlurile de pe paginile Web, n scopul generarii unor rapoarte despre continutul
paginii. Daca folositi tag-urile de subtitluri n alte scopuri, aceste rapoarte vor fi eronate.
Tag-urile de subtitluri pot avea atribute, de exemplu <h1 align=left>Textul</h1>.
Exercitiu: modificati exemplul de la nceputul acestei lucrari astfel nct subtitlul de nivel 4 sa apara n dreapta
paginii. Vizualizati.
Lasati subtitlul sa apara n dreapta, si configurati-i si atributul title, cu valoarea Un exemplu de subtitlu de
nivel 4. Vizualizati. Duceti mouse-ul deasupra subtitlului de nivel 4, si lasati-l acolo. Observati efectul acestui
atribut.
Paragrafe
O metoda eleganta si conforma standardului pentru scrierea paragrafelor n HTML este folosirea tag-urilor
dedicate. Aceste tag-uri sunt de forma <p>Un paragraf</p>.
Exercitiu: scrieti doua paragrafe (Primul paragraf si Al doilea paragraf) folosind aceste tag-uri. Vizualizati.
Observati: ca si n cazul subtitlurilor, se adauga automat o linie vida naintea si dupa paragraf.
Exercitiu: stergeti tag-urile de nchidere a paragrafelor din exemplul de mai sus. Vizualizati.
Desi este valabila, folosirea tag-ului de deschidere de paragraf fara cel de nchidere este contraindicata, pentru ca
standardele noi de HTML nu vor permite acest lucru. De asemenea, prin folosirea tag-ului de nchidere a
paragrafului, se vede clar unde se termina acesta.
Si paragrafele pot avea atribute, aceleasi ca si subtitlurile.
Exercitiu: formatati paragrafele dvs. sa fie aliniate n centrul paginii.

Nu folositi tag-urile de paragraf pentru inserarea unor linii noi n document, pentru ca unele browsere le-ar putea
interpreta diferit. Folositi pentru acest scop tag-ul de linie noua, descrisa mai jos.
Linie noua
Ati observat ca degeaba introduceti linii vide n sursa HTML, ele vor apare ca un singur spatiu. Pentru a intra pe
linie noua n HTML, aveti nevoie de un tag special, <br>.
Exercitiu: puneti tag-ul <br> ntre Primul si paragraf din exemplul de mai sus. Vizualizati.
Comentarii n HTML
Un program bun are 40% comentarii n sursa. Din moment ce si HTML este un limbaj de programare, este bine sa
punem comentarii n codul sursa. Daca sursa HTML este complexa, comentariile vor fi de nepretuit daca vrem sa
schimbam ceva. Acest lucru este adevarat mai ales n cazul scripturilor.
Comentariile nu sunt afisate de catre browser. Un comentariu arata astfel:

Observati ca avem de-a face cu un tag mai special, fara pereche de nchidere; observati si semnul exclamarii de la
nceputul comentariului, si lipsa lui la sfrsit. Perechile de liniute de la nceput si de la sfrsit fac parte din tag, nu
din textul comentariului.
Exercitiu: inserati un comentariu naintea paragrafului centrat, explicnd acesta este un paragraf centrat.
Vizualizati. Inserati acum un comentariu n mijlocul textului din paragraf, apoi vizualizati. Inserati comentariu n
interiorul unui tag, de exemplu n <p>. Vizualizati.
Stergeti liniuta de dupa semnul exclamarii. Vizualizati.
Comentariile se pot extinde pe mai multe linii, dar este indicat sa nu scrieti comentarii mai lungi de o linie, pentru
claritate.
Nu includeti tag-uri HTML n comentarii (de exemplu, <p>); n mod normal, nimic din ce este n comentariu nu
se afiseaza, dar un browser mai sensibil ar putea sa se ncurce n timpul parcurgerii comentariului cu tag-uri.
Bara orizontala
O foarte simpla metoda de a separa vizual partile dintr-un document HTML este folosirea unei bare orizontale.
Folositi tag-ul <hr> (de la horizontal rule). Poate avea si atribute, ca width (latimea pe orizontala), n puncte
sau procente, alinierea (align centrat implicit), size pentru grosime (n puncte implicit este 2) sau
noshade.
Exercitiu: inserati dupa primul paragraf din exemplul de sus o bara orizontala de latime de
50% din pagina, de zece puncte grosime, aliniat la dreapta pe pagina. Vizualizati.
Schimbati marimea ferestrei browserului. Observati latimea orizontala a liniei.
Adaugati si atributul noshade (fara valoare). Vizualizati. Adaugati atributul title
cu valoarea Linie orizontala.
Observatie: atributul title se poate folosi la multe tag-uri.

Tabelul 1 tag-uri de baza
NN IE W3C SCOP
TAG DE NCEPUT
<html> 3.0 3.0 3.2 Document HTML
<body> 3.0 3.0 3.2 Corpul documentului
<h1> la <h6> 3.0 3.0 3.2 Subtitluri de la 1 la 6
<p> 3.0 3.0 3.2 Paragraf
<br> 3.0 3.0 3.2 Linie noua
<hr> 3.0 3.0 3.2 Bara orizontala
 Comentariu. 3.0 3.0 3.2
<!doctype> Tipul documentului. 3.2
<a> Ancora. 3.0 3.0 3.2
<abbr> Prescurtare. 4.0
<acronym> Acronim. 4.0 4.0
<address> Adresa. 4.0 4.0 4.0
<applet> Depasit. Folositi <object>.
<area> Defineste o regiune ntr-o harta de imagine. 3.0 3.0 3.2
<b> Text ngrosat. 3.0 3.0 3.2
<base> Referinta implicita spre o resursa externa. 3.0 3.0 3.2
<basefont> Depasit. Folositi styles.
<bdo> Directia afisarii textului. 5.0 4.0
<big> Text mare. 3.0 3.0 3.2
<blockquote> Citat lung. 3.0 3.0 3.2
<body> Corpul paginii. 3.0 3.0 3.2
<br> Linie noua. 3.0 3.0 3.2
<button> Buton de tip push-button. 4.0 4.0
<caption> Titlu de tabel. 3.0 3.0 3.2
<center> Depasit. Folositi styles.
<cite> Citat. 3.0 3.0 3.2
<code> Text de calculator. 3.0 3.0 3.2
<col> Atribute pentru coloana de tabel . 3.0 4.0
<colgroup> Grupe de coloane de tabel. 3.0 4.0
<dd> Descriere de definitie. 3.0 3.0 3.2
<del> Text sters. 4.0 4.0
<dfn> Termen de definitie (definition term). 3.0 3.2
<dir> Depasit. Folositi <ul>.
<div> Sectiune n document. 3.0 3.0 3.2
<dl> Lista de definitie. 3.0 3.0 3.2
<dt> Termen de definitie. 3.0 3.0 3.2
<em> Text evidentiat. 3.0 3.0 3.2
<fieldset> Fieldset. 4.0 4.0
<font> Depasit. Folositi styles.
<form> Formular. 3.0 3.0 3.2
<frame> Subfereastra (frame). 3.0 3.0 4.0
<frameset> Set de frame-uri. 3.0 3.0 4.0
<h1> la <h6> Subtitlu (de nivel 1 la 6). 3.0 3.0 3.2
<head> Antetul. 3.0 3.0 3.2
<hr> Linie orizontala. 3.0 3.0 3.2
<html> Document html. 3.0 3.0 3.2
<i> Text italic. 3.0 3.0 3.2
<iframe> Subfereastra inline (frame). 3.0 4.0
<img> Imagine. 3.0 3.0 3.2
<input> Zona de introducere. 3.0 3.0 3.2
<ins> Text inserat. 4.0 4.0
<isindex> Depasit. Folositi <input>.
<kbd> Text de tastatura. 3.0 3.0 3.2
<label> Eticheta . 4.0 4.0
<legend> Titlu n fieldset. 4.0 4.0
<li> Element de lista. 3.0 3.0 3.2
<link> Referinta la o resursa . 4.0 3.0 3.2
<listing> Depasit. Folositi <pre>.
<map> Harta de imagine (image map) . 3.0 3.0 3.2
<menu> Depasit. Folositi <ul>.
<meta> Informatie meta. 3.0 3.0 3.2
<noframes> Sectiune fara suport frame-uri. 3.0 3.0 4.0
<noscript> Sectiune fara suport script-uri. 3.0 3.0 4.0
<object> Obiect nglobat. 3.0 4.0
<ol> Lista ordonata. 3.0 3.0 3.2
<optgroup> Grup de optiuni. 6.0 4.0
<option> Element n lista de optiuni. 3.0 3.0 3.2
<p> Paragraf. 3.0 3.0 3.2
<param> Parametru pentru un obiect. 3.0 3.0 3.2
<plaintext> Depasit. Folositi <pre>.
<pre> Text preformatat. 3.0 3.0 3.0
<q> Citat scurt. 4.0 4.0
<s> Depasit. Folositi <del>.
<samp> Cod sursa. 3.0 3.0 3.2
<script> Script. 3.0 3.0 3.2
<select> Lista selectabila. 3.0 3.0 3.2
<small> Text mic. 3.0 3.0 3.2
<span> Sectiune din document. 4.0 3.0 4.0
<strike> Depasit. Folositi <del>.
<strong> Text ngrosat. 3.0 3.0 3.2
<style> Definitie de stil. 4.0 3.0 3.2
<sub> Indice. 3.0 3.0 3.2
<sup> Indice superior. 3.0 3.0 3.2
<table> Tabel. 3.0 3.0 3.2
<tbody> Corp de tabel. 4.0 4.0
<td> Celula de tabel. 3.0 3.0 3.0
<textarea> Zona de text. 3.0 3.0 3.2
<tfoot> Anexa fixa de tabel. 4.0 4.0
<th> Antet de tabel. 3.0 3.0 3.2
<thead> Antet fix de tabel. 4.0 4.0
<title> Titlul documentului. 3.0 3.0 3.2
<tr> Linie de tabel. 3.0 3.0 3.2
<tt> Text telex. 3.0 3.0 3.2
<u> Depasit. Folositi styles.
<ul> Lista neordonata. 3.0 3.0 3.2
<var> Variabila. 3.0 3.0 3.2
<xmp> Depasit. Folositi <pre>.
NN Netscape Navigator
IE Internet Explorer
W3C Consortiul WWW

Formatare text
Formatarea logica si fizica
n HTML, definim doua categorii de formatari ale textului: formatare logica si formatare fizica.
Tag-urile de formatare logica definesc scopul textului la care se refera, similar cum tag-urile pentru subtitluri
definesc scopul textului, si nu neaparat cum trebuie sa arate pe ecran. De exemplu, tag-uri de formatare logica ar fi
<em>, <strong>, <code>, <samp>, <kbd>, <var>, <dfn>, <cite>. Totusi, browserele nu dispun de attea formate
nct sa afiseze fiecare formatare grafica diferit, astfel ca acestea sunt afisate de obicei cu text ngrosat sau cu
caractere italice.
Tag-urile de formatare fizica specifica exact cum trebuie sa arate textul pe ecran (cum sa fie afisat). Toate aceste
tag-uri vin n perechi, de deschidere si de nchidere. Teoretic, textul formatat fizic apare la fel n toate browserele si
pe toate calculatoarele, dar nici acest lucru nu este absolut sigur.
Tabelul 1 Tag-uri obisnuite de formatare text
TAG SCOP
<b> Text ngrosat.
<big> Text cu caractere mari.
<em> Text evidentiat.
<i> Text italic.
<small> Text cu caractere mici.
<strong> Text mai evidentiat dect <em>.
<sub> Indice inferior (subscript).
<sup> Indice superior (superscript).
<ins> Text inserat.
<del> Text sters.
<s> Text taiat. Depasit. Folositi <del>.
<strike> Text taiat. Depasit. Folositi <del>.
<u> Text subliniat. Depasit. Folositi styles.
Exercitii: ncercati toate tag-urile de mai sus.
Tabelul 2 Tag-uri pentru formatare text de calculator

TAG SCOP
<code> Cod sursa de program.
<kbd> Text de introdus (ex. Tastati <kbd>dir</kbd>).
<samp> Cod sursa sau exemplu de text afisat pe ecran.
<tt> Text telex.
<var> Variabila de introdus (ex. Dati comanda <kbd>dir <var>subdirector</var></kbd>).
<pre> Text preformatat.
<listing> Listing de cod sursa. Depasit. Folositi <pre>.
<plaintext> Text simplu. Depasit. Folositi <pre>.
<xmp> Text exemplu. Depasit. Folositi <pre>.
Exercitii: ncercati toate tag-urile de mai sus.
Tabelul 3 Tag-uri pentru formatare citate, definitii
TAG
SCOP
<abbr> Prescurtare.
<acronym> Acronim.
<address> Adresa.
<bdo> Directia textului.
<blockquote> Citat lung (long quotation).
<q> Citat scurt (short quotation).
<cite> Citat (citation).
<dfn> Termen de definitie (care a fost definit sau urmeaza a fi definit).
Exercitii: ncercati toate tag-urile de mai sus. ncercati <bdo> cu atributul dir cu valoarea RTL.
Tag-urile de formatare pot fi imbricate.
Exercitiu: scrieti un text care sa fie si ngrosat, si italic.
Tag-ul pentru textul preformatat (<pre>) este mai special. El permite copierea unui text din alta sursa
(scrisoare, document Word etc.) direct n sursa HTML; se pastreaza sfrsitul de linie si liniile vide.
Exercitiu: introduceti textul de mai jos:
<pre>
Acesta este un text preformatat.
Observati ca se pastreaza sfarsitul de linie, si
chiar si spatiile aditionale.

</pre>
La textul preformatat:
se pastreaza spatiile albe (adica spatiile inserate n sursa cu tasta spatiu, si liniile vide);
se folosesc caractere cu latime egala;
nu se continua pe o linie noua liniile prea lungi;
se respecta instructiunile de bidirectionalitate;
Exercitiu: scrieti n textul preformatat de mai sus o linie foarte lunga, peste latimea
ecranului. Vizualizati.
Entitati caracter n HTML

Generalitati
Cnd un client (un browser) cere o pagina Web de la un server, serverul i trimite prin reteaua Internet fisierul
HTML corespunzator. De fapt, fisierul trece prin mai multe servere de tip diferit, fiecare retransmitndu-l spre
urmatorul, pna cnd ajunge la client.
Daca un fisier HTML ar contine caractere speciale (de exemplu caracterele romnesti cu diacritice), s-ar putea ca
aceste caractere sa fie modificate n fisier, n timp ce fisierul este retransmis de serverele intermediare. Acest lucru
ar rezulta n faptul ca la client, browserul ar afisa eronat pagina, bazat pe fisierul HTML modificat.
Fisierele HTML contin text pur, fara coduri speciale de formatare, cum este cazul documentelor Word, de
exemplu. Acest lucru nseamna ca fisierul HTML contine doar caractere care apar pe o tastatura standard (engleza).
Aceste caractere sunt singurele care pot trece nemodificat prin orice retea de calculatoare. De fapt, aceste caractere
formeaza setul de caractere standard ASCII (American Standard Code for Information Interchange) pe sapte biti.
Exista si set extins de caractere, pe opt biti, dar fiecare sistem de operare aloca diferit codurile caracterelor din
acest set, astfel ca un fisier cu caractere din setul extins poate arata complet diferit pe un alt sistem de operare.
Atunci care ar fi solutia? Cum putem totusi introduce caractere din setul extins ntr-un fisier HTML?
Alta problema: cum procedam, cnd dorim sa afisam caracterul < pe o pagina web? Daca l scriem direct n text,
s-ar putea ca browserul sa l interpreteze ca paranteza unghiulara, adica nceput de tag, si sa genereze eroare.
Entitati
Solutia este sa folosim un cod special pentru acest caracter. n loc de caracterul <, scriem n sursa HTML <,
sau &#60. Aceasta metoda se foloseste si pentru caractere ce se pot introduce greu de pe o tastatura obisnuita
(cum ar fi, de exemplu, caracterul ).
Exercitiu: creati un fisier HTML; scrieti n corpul paginii textul < (fara ghilimele).
Vizualizati. nlocuiti cu < (fara ghilimele). Vizualizati din nou. nlocuiti cu
<. Vizualizati.
n primul caz, sirul < este o entitate caracter HTML. Ea are trei parti: caracterul ampersand (&) care spune ca
urmeaza un cod de entitate, numele entitatii (lt, care vine de la less than mai putin), si punct-virgula (;)
care spune ca s-a terminat entitatea. Pentru alte entitati, se schimba doar numele entitatii, caracterele ampersand si
punct-virgula ramn.
n cazul al doilea, se foloseste codul numeric zecimal al entitatii. Astfel, entitatea are patru parti: caracterul
ampersand (&), caracterul diez (#) care spune ca urmeaza un cod numeric de entitate, codul numeric al entitatii
(60) si punct-virgula de nchidere. Codul numeric corespunde cu codul caracterului din setul extins ISO-Latin-1
(ISO 8859-1).
n al treilea caz, codul numeric al entitatii se specifica hexazecimal, nu zecimal. Entitatea are astfel cinci parti:
ampersand (&), diez (#), caracterul x care spune ca codul numeric ce urmeaza este n hexazecimal, codul
numeric n hexazecimal (3C) si punct-virgula de ncheiere. Codul hexazecimal este exact codul numeric zecimal,
transcris n hexazecimal.
Din pacate, nu toate browserele suporta toate numele de entitati. n schimb, codurile numerice sunt bine
suportate, n schimb sunt mai greu de retinut dect numele entitatii.
Atentie: n cazul entitatilor caracter, se face deosebire ntre literele mari si mici.
Exercitiu: introduceti n sursa HTML textul: Ââ, fara ghilimele. Vizualizati.
O entitate caracter mai speciala este spatiul nedivizibil (nonbreaking space), care arata astfel: .
Spatiile suplimentare din sursa HTML nu se afiseaza n pagina, dar daca folositi spatiul nedivizibil, acesta va fi
afisat ca si spatiu, chiar daca apar mai multe spatii consecutive de acest gen. O alta caracteristica a acestui spatiu
este ca, fiind nedivizibil, cuvntul dinaintea si dupa el se afiseaza obligatoriu pe aceeasi linie, adica nu se despart pe
doua linii consecutive. Exemplul clasic pentru utilitatea acestei entitati este Coca Cola, unde cele doua cuvinte
care formeaza numele produsului trebuie sa fie pe aceeasi linie, deci se pune ntre ele un spatiu nedivizibil.
Exercitiu: scrieti n HTML: Iarna este crncena., cu spatiu nedivizibil ntre cuvinte, si folosind numele, si
codul zecimal pentru , respectiv a.
Tabelul 1 Entitatile caracter cele mai folosite

COD ZECIMAL
DESCRIERE
CARACTER NUME
Spatiu nedivizibil
Mai mic dect < < <
Mai mare dect > > >
Ampersand & & &
Ghilimele " "
Apostrof '
Sectiune § §
Copyright © ©
Marca nregistrata ® ®
Multiplicare × ×
mpartire ÷ ÷
Euro € €
Lista entitatilor HTML

Entitati ASCII cu nume noi
REZULTAT DESCRIERE NUME ENTITATE NUMAR ENTITATE

" Ghilimele " "
& Ampersand & &
< Mai mic dect < <
> Mai mare dect > >
Entitati simbol ISO 8859-1
REZULTAT DESCRIERE NUME ENTITATE NUMAR ENTITATE

Spatiu nedivizibil
Semnul exclamarii inversat ¡ ¡
Valuta ¤ ¤
Cent ¢ ¢
Lira sterlina £ £
Yen ¥ ¥
Bara verticala rupta ¦ ¦
Sectiune § §
Spatiu special ¨ ¨
Copyright © ©
Indicator ordinal feminin ª ª
nceput citat intern « «
Negare ¬ ¬
Legatura invizibila (soft hyphen)
Marca nregistrata ® ®
Linie spatiu ¯ ¯
Unghi ° °
Plus-minus ± ±
Indice superior 2 ² ²
Indice superior 3 ³ ³
Apostrof inversat ´ ´
Micro µ µ
Paragraf ¶ ¶
Punct central · ·
Virgula speciala ¸ ¸
Indice superior 1 ¹ ¹
Indicator ordinal masculin º º
Sfrsit citat intern » »
Fractie 1/4 ¼ ¼
Fractie 1/2 ½ ½
Fractie 3/4 ¾ ¾
Semnul ntrebarii inversat ¿ ¿
Multiplicare × ×
mpartire ÷ ÷
Entitati caracter ISO 8859-1
REZULTAT NUME ENTITATE NUMAR ENTITATE

À À
Á Á
Â Â
Ã Ã
Ä Ä
Å Å
Æ Æ
Ç Ç
È È
É É
Ê Ê
Ë Ë
Ì Ì
Í Í
Î Î
Ï Ï
Ð Ð
Ñ Ñ
Ò Ò
Ó Ó
Ô Ô
Õ Õ
Ö Ö
Ø Ø
Ù Ù
Ú Ú
Û Û
Ü Ü
Ý Ý
Þ Þ
ß ß
à à
á á
â â
ã ã
ä ä
å å
æ æ
ç ç
è è
é é
ê ê
ë ë
ì ì
í í
î î
ï ï
ð ð
ñ ñ
ò ò
ó ó
ô ô
õ õ
ö ö
ø ø
ù ù
ú ú
û û
ü ü
ý ý
þ þ
ÿ ÿ
Alte entitati n HTML
REZULTAT NUME ENTITATE NUMAR ENTITATE

&OElig; Œ
&oelig; œ
? &Scaron; Š
? &scaron; š
&Yuml; Ÿ
&circ; ˆ
&tilde; ˜
&ensp;
&emsp;

&zwnj; ‌
&zwj; ‍
&lrm; ‎
&rlm; ‏
– –
— —
‘ ‘
’ ’
&sbquo; ‚
“ “
” ”
&bdquo; „
&dagger; †
&Dagger; ‡
&permil; ‰
&lsa&lsaquo; ‹
&rsaquo; ›
€ €
™

Legaturi (links)
Generalitati
Pna acum, am construit doar cte un fisier HTML, fara a face referire dintr-unul la altul. Cum am mentionat la
nceput, HTML este un sistem hipertext, adica selectarea unui cuvnt-cheie de pe o pagina va poate afisa o alta
pagina despre subiectul respectiv, sau poate sari la un loc anume ntr-o pagina.
O legatura HTML are doua parti:
1. adresa paginii sau, n general, a resursei care va fi ncarcata n momentul selectarii legaturii;
2. textul activ, care va fi afisat pe ecran, si care, selectat, va determina ncarcarea paginii de la adresa pe care o
specifica legatura.
Tag-ul ancora
Pentru a realiza legaturi, folosim tag-ul ancora.
Exemplu: <a href=http://www.ccicj.ro>Camera de comert, industrie si agricultura Cluj</a>
n exemplul de mai sus, am creat o legatura spre site-ul www.ccicj.ro. n pagina, nu apare adresa site-ului, ci
textul dintre tagul ancora de deschidere si de nchidere, Camera de comert, industrie si agricultura Cluj. Daca n
pagina afisata dam clic pe acest text, se va ncarca si se va afisa pagina de pe www.ccicj.ro.
De obicei, browserul afiseaza evidentiat textul activ: l subliniaza, l afiseaza cu caractere ngrosate etc.
Legaturi la adrese Internet
Observati ca adresa paginii (http://www.ccicj.ro) se specifica prin atributul href (Hypertext REFerence) al
tag-ului ancora. Aceasta adresa este o adresa Internet spre o resursa. Adresele se mai numesc si url (Universal
Resource Locator). Exista mai multe tipuri de url, cea mai utilizata fiind cel http (folosit la pagini de web).
Exista si alte tipuri, pentru fisiere locale, transfer dedicat de fisiere, Telnet, mail etc. Deci, url-ul complet este
format din tipul url-ului (http, n cazul nostru), si adresa propriu-zisa (www.ccicj.ro). Acest format ar fi
necesar si cnd navigati pe Web (cu browserul), dar browserul accepta si simplul www.ccicj.ro, lund http ca
tipul implicit al url-ului.
Exercitiu: creati o legatura spre pagina de Web a Pro TV (www.protv.ro); textul activ (pe care se da clic n
pagina afisata) sa fie Televiziunea Pro TV.
Legaturi la fisiere locale
Putem sa interconectam fisierele locale; n acest caz, avem de-a face cu un site, nu doar cu o singura pagina Web,
pentru ca avem mai multe fisiere, ntre care se poate naviga.
Cum se poate realiza: n loc de http://, puneti file:// si calea spre fisier.
Exercitiu: creati urmatoarele doua fisiere HTML, cu numele 1.html si 2.html:
1.html:
<html>
<head>
<title>1</title>
</head>
<body>
<a href="file://c:\temp\2.html">2</a>
</body>
</html>
2.html:
<html>
<head>
<title>2</title>
</head>
<body>
<a href="file://c:\temp\1.html">1</a>
</body>
</html>
Mutati cele doua fisiere n subdirectorul c:\temp\. Vizualizati 1.html cu browser-ul; dati clic pe 2 din pagina. Observati titlul
paginii. Dati clic pe 1. Ce se ntmpla?
Din ambele fisiere, stergeti textul file://. Vizualizati. Acum stergeti si calea completa din ambele fisiere, lasnd numai 1.html si,
respectiv, 2.html. Vizualizati.
Observatie: daca o cale spre un fisier ncepe cu c:, d: etc. sau / sau \, calea se numeste absoluta. Daca nu ncepe cu una din
acestea, ci cu numele unui subdirector sau numele unui fisier, calea se numeste relativa. De obicei, se folosesc cai relative n legaturi,
pentru portabilitate: daca va mutati toata structura de fisiere HTML n alt subdirector, legaturile s-ar putea sa se rupa (sa devina
invalide) n cazul cailor absolute. Dar daca aveti legaturi cu cai relative, subdirectoarele locale cor fi tot acolo, deoarece ati mutat toata
structura.
Legaturi la un loc anume n pagina

Puteti crea legaturi n interiorul unei pagini, de exemplu daca aveti multe subcapitole pe aceeasi pagina de Web, puteti scrie un cuprins
cu titlurile capitolelor la nceputul paginii, facnd fiecare subtitlu o legatura spre subcapitolul respectiv din aceeasi pagina. Cnd
utilizatorul da clic pe un subtitlu din cuprins, browserul afiseaza subcapitolul respectiv, fara a fi nevoie ca utilizatorul sa-l caute pe pagina.
Pentru a realiza acest lucru, trebuie sa faceti doua lucruri:
1. mai nti, trebuie sa dati un nume, un fel de eticheta, subcapitolului respectiv (puteti sa dati nume si altor elemente, nu numai
subtitluri); aceasta eticheta se specifica n fisier acolo, unde ncepe textul subcapitolului respectiv;
2. n cuprins, creati o legatura la aceasta eticheta.
Cum procedati: folositi atributul name al tag-ului ancora.
Exemplu: <a name=cap1>Incepe Capitolul I</a>.
Acest element este la nceputul capitolului, undeva n pagina. Textul etichetat (Incepe Capitolul I) nu este evidentiat n nici un fel n
pagina.
Acum, puteti sa creati o legatura la acest element.
Exemplu: <a href=#cap1>Sare la Capitolul I</a>
Observati forma adresei pentru salt: #cap1. Se foloseste un caracter diez (#), si numele etichetei (cap1). Cnd utilizatorul da clic
pe Sare la Capitolul I, browserul afiseaza pagina ncepnd cu Incepe Capitolul I.
Exercitiu: modificati fisierul 2.html: adaugati tag-uri <br>, mai multe linii vide dect ncap pe pagina, sau copiati un text lung n
fisierul HTML, ntre tag-uri <pre> (ca sa aven o pagina ce se poate derula n sus si n jos). Creati pe la sfrsitul paginii o eticheta, cu
numele test, si textul afisat Eticheta de test . Salvati. Vizualizati.
Modificati acum fisierul 1.html: adaugati legatura:
<a href=2.html#test>Sare la eticheta din pagina 2</a>
Vizualizati fisierul. Dati clic pe textul activ Sare la eticheta din pagina 2.
Puteti crea legaturi la locuri dintr-o pagina (etichetate) chiar din alte pagini. n exemplul de mai sus, din pagina 1 ati accesat eticheta
test din pagina 2. Observati forma adresei: 2.html#test; se specifica numele fisierului, diez, si numele etichetei. Puteti accesa
etichete din pagini de pe alte site-uri, de exemplu accesnd www.ccicj.ro/index.html#afaceri (desigur, trebuie ca eticheta respectiva sa
existe n pagina index.html de pe www.ccicj.ro).
Atributul target
Cu atributul target al tag-ului ancora, puteti specifica unde sa se deschida noua pagina. De exemplu, daca doriti sa deschideti pagina
ntr-o fereastra noua de browser, folositi target=_blank.
Exercitiu: modificati legatura la Pro TV a.. pagina Pro TV sa se deschida ntr-o fereastra noua de browser.
Tabelul 1 valori predefinite ale atributului target
VALOARE
UNDE SE DESCHIDE PAGINA
_blank ntr-o fereastra noua.
_self n aceeasi fereastra (implicit).
_parent n frame-ul parinte.
_top n toata fereastra (daca erau mai multe frame-uri; daca nu, e la fel ca _self).
Frame-uri
Generalitati
Ati construit o pagina Web. Frumoasa, aratoasa. Contine si niste legaturi spre alte pagini.
Ce ar fi sa afisam mai multe pagini Web deodata, pe acelasi ecran, n acelasi browser? Frame-urile ne permit acest
lucru.
Cnd lucram cu frame-uri, fiecare document se numeste un frame. Un frame este independent de celalalt, poate fi
oriunde pe Internet, trebuie sa stim doar adresa paginii.
Atributul target
Atributul target se foloseste n cazul legaturilor (link-urilor), cum am mai vazut. Puteti specifica de exemplu,
pentru o legatura, ca pagina sa se deschida ntr-o fereastra noua. Mai mult, puteti specifica numele ferestrei n care
sa se afiseze noua pagina, de exemplu target=fereastra_tv. Daca fereastra cu numele respectiv nu exista, se va
deschide o noua fereastra n care se va afisa pagina ceruta, si se va atribui noii ferestre numele cu care s-a deschis
(fereastra_tv, n cazul nostru). Daca fereastra cu acel nume exista deja, i se va nlocui continutul cu noua pagina.
Exercitiu: vizualizati urmatoarea pagina:
<html>
<head>
<title>
Pagina de comanda
</title>
</head>
<body>
<h3>
Universitate:
</h3>

<a href="http://www.utcluj.ro" target="Universitate">Universitatea Tehnica Cluj-Napoca</a><br>

<a href="http://www.ubbcluj.ro" target="Universitate">Universitatea Babes-Bolyai</a>
</body>
</html>
Exercitiu: creati un fisier HTML, care sa contina doua legaturi, una la www.protv.ro,
cealalta la www.antena1.ro. Faceti n asa fel, nct daca se da clic pe o legatura din
cele doua, pagina de la ProTV sau de la Antena 1 (n functie de legatura selectata de
utilizator) sa se ncarce n aceeasi fereastra secundara (fereastra cu pagina care
contine cele doua legaturi sa ramna intacta). Asta nseamna ca veti avea pe ecran
maximum doua ferestre de browser: una cu pagina dvs. cu cele doua legaturi, si una
cu pagina unui post de televiziune.
Tag-ul base
Se poate ntmpla sa doriti ca toate paginile spre care aveti legaturi din pagina dvs. sa se deschida n aceeasi
fereastra secundara. Asta ar nsemna sa includeti atributul target n fiecare tag ancora, ceea ce ia mult timp.
Cu tag-ul base, puteti specifica fereastra scop (target) pentru noile pagini ce se vor deschide din aceasta
pagina. Tag-ul base se pune n antetul paginii de Web (n partea head), si nu are pereche de nchidere.
Exemplu: vizualizati urmatoarea pagina:
<html>
<head>
<title>
Fereastra parinte
</title>

<base target="prima_fereastra">
</head>
<body>
<h3>
Fereastra parinte
</h3>
<p>

<a href="http://www.protv.ro">Deschide "Prima_Fereastra".</a><br>
<a href="http://www.antena1.ro" target="a_doua_fereastra">Deschide
"A_Doua_Fereastra".</a>
</p>
<p>

<a href="http://www.tvr.ro">Incarca ceva in "Prima_Fereastra".</a>
</p>
</body>
</html>
Explicati. Faceti ca pagina Antena 1 sa se deschida n prima fereastra si pagina TVR n a doua.
Tag-ul frameset
Tag-ul <frameset> (si perechea lui de nchidere) nlocuieste corpul unei pagini de Web, adica partea body.
Aceste doua parti se exclud mutual, deoarece o pagina care contine frameset specifica ce alte pagini se vor afisa
simultan n browser, aceste pagini avnd fiecare corp separat. Nu se pun nici un fel de date (text, legaturi, imagini
etc.) n afara tag-ului <frameset>. Puteti imbrica mai multe seturi de frame-uri.
Atributele cols si rows
Cnd folositi <frameset>, trebuie sa specificati unul din atributele cols sau rows. Aceste atribute al tag-ului
<frameset> specifica organizarea coloanelor (rndurilor) ntr-un grup de frame-uri. Au forma: <frameset
cols=latime_coloana1, latime_coloana2, ...>, si <frameset rows=naltime_rndul1, naltime_rndul2, ...>
Latimea unei coloane se poate specifica n pixeli, n procente sau folosind asterisc (*). Cnd latimea unei coloane
este asterisc, coloana va fi latita pe tot locul disponibil pe lnga celelalte coloane, de exemplu cols=30%,* va
crea o coloana care ocupa 30% din latimea totala a ferestrei, si una care ocupa restul (adica 70%). Daca folositi de
exemplu cols=*,*,*, fereastra va fi mpartita n trei coloane egale. Puteti folosi si *,3*, de exemplu; caz n
care fereastra se va mparti n doua, primul frame fiind de trei ori mai mic dect al doilea (marime relativa).
Aceasta mpartire, n cazul nostru, este echivalenta cu 25%, 75%.
La fel functioneaza si atributul rows, doar ca se refera la linii de frame-uri.
Tag-ul frame
Tag-ul <frame> arata documentul (pagina) care formeaza partea respectiva a paginii noastre multi-frame. Sursa
se specifica prin atributul src. Observati ca tag-ul <frame> nu are pereche de nchidere (deoarece nu s-ar pune
nimic ntre cele doua).
<html>
<head>
<title>
Pagina TV
</title>
</head>
<frameset cols="60%,*">
<frame src="http://www.protv.ro">
<frame src="http://www.antena1.ro">
</frameset>
</html>
Schimbati sa se afiseze cele doua frame-uri nu pe doua coloane, ci pe doua linii, cel de sus de
30% din naltimea paginii, iar cel de jos, ct ramne.
Atributul noresize
Acest atribut mpiedica utilizatorul sa modifice dimensiunea frame-ului.
Exercitiu: ncercati acest atribut la frame-urile din exemplul de mai sus.
Tabelul 1 alte atribute ale tag-ului frame

ATRIBUT DESCRIERE
name Numele frame-ului.
src Adresa paginii care va fi afisata n frame.
frameborder 1 deseneaza un chenar frame-ului, 0 nu deseneaza (dar poate apare chenarul unui frame nvecinat).
marginwidth Marginea din stnga si din dreapta ale frame-ului, n pixeli.
marginheight Marginea de sus si de jos ale frame-ului, n pixeli.
noresize Fara valoare, mpiedica utilizatorul sa modifice marimea frame-ului.
auto, implicit, afiseaza bare de scroll orizontale si verticale, daca e nevoie. yes si no forteaza afisarea,
scrolling
respectiv mpiedica afisarea barelor de scroll, chiar daca nu este nevoie sau, dimpotriva, este nevoie de ele.
Tag-ul noframes
Nu toate browserele suporta frame-uri, de aceea se include si tag-ul <noframes> (cu pereche de nchidere), n
interiorul <frameset> principal. Daca pagina este ncarcata ntr-un browser care nu suporta frame-uri, se afiseaza
continutul blocului <noframes>.
<html>
<head>
<title>
Pagina TV
</title>
</head>
<frameset cols="*,*">
<frame src="http://www.protv.ro">
<frame src="http://www.antena1.ro">
<noframes>
<body>
<a href="http://www.protv.ro">Pro TV</a> <br>
<a href="http://www.antena1.ro">Antena 1</a>
</body>
</noframes>
</frameset>
</html>
Ce se afiseaza cnd pagina este ncarcata ntr-un browser care nu cunoaste frame-uri?
Imbricarea frame-urilor
Seturile de frame-uri se pot si imbrica, adica n locul unui <frame>, puteti avea o pereche <frameset> </frameset>,
cu unul sau mai multe frame-uri sau seturi de frame-uri.
Exercitiu: n locul frame-ului de jos din exemplul anterior, puneti un nou set de 40%/60% pe doua coloane, cu
Antena 1 si TVR (www.tvr.ro), adica acum veti avea pe ecran ProTV sus ntr-o linie, iar jos Antena 1 si TVR, pe
doua coloane.
Observati ca mpartirea 40%-60% se aplica doar n partea de jos, adica numai pentru <frameset> interior
primului <frameset>. Primul frame (ProTV) are aceeasi prioritate ca si setul de frame-uri de lnga el.
Exercitiu: schimbati atributul <frameset>-ului Antena1/TVR, sa fie pe doua linii, nu doua coloane.
Din moment ce un <frameset> poate fi mpartit sau pe coloane (cu cols), sau pe linii (cu rows), dar nu
simultan pe coloane si linii, daca doriti o mpartire mixa, trebuie sa folositi mai multe seturi de frame-uri.
Sugestie: prima data schitati pe hrtie structura paginii. Daca aveti un frame care se ntinde pe o linie pe toata
latimea paginii, primul <frameset> (cel extern) trebuie sa fie cu rows. Daca aveti un frame care se ntinde pe o
coloana, pe roata naltimea paginii, ncepeti cu cols.
Puteti da nume frame-urilor prin atributul name, si sa folositi aceste nume la atributul target.
Exercitiu: creati urmatoarele doua documente n acelasi subdirector, principal.html si navigare.html, si

vizualizati principal.html.
principal.html:
<html>
<head>
<title>
Pagina TV
</title>
</head>
<frameset cols="*,3*">

<frame src="navigare.html">


<frame src="http://www.protv.ro" name="_corp">
<noframes>
<body>
<a href="http://www.protv.ro">Pro TV</a> <br>
<a href="http://www.antena1.ro">Antena 1</a>
</body>
</noframes>
</frameset>
</html>
navigare.html:
<html>
<head>
<title>
Navigare
</title>
<base target="_corp">
</head>
<body>
<a href="http://www.protv.ro">Pro TV</a><br>
<a href="http://www.antena1.ro">Antena 1</a><br>
</body>
</html>
Exercitiu: creati alte doua fisiere HTML; modificati exemplul de mai sus, sa puteti naviga pe aceste doua pagini
noi, n loc de Pro TV si Antena 1.
Puteti iesi din <frameset> specificnd la o legatura target=_top. _top este un nume predefinit, ncarca
pagina referita de legatura n toata fereastra, adica veti avea o singura pagina n fereastra, fara frame-uri.
Exercitiu: adaugati linia urmatoare n navigare.html, dupa primele doua legaturi, apoi vizualizati:
<a href="http://www.utcluj.ro" target="_top">Iesire</a>
Probleme cu frame-uri
n cazul unui document cu frame-uri, daca dati clic pe o legatura dintr-un frame, noua pagina se va ncarca tot n
acelasi frame (daca frame-urile sunt independente). Asta nu ar fi o problema, dar daca dati acum Back n
browser, probabil ca browserul va merge napoi pe pagina dinaintea documentului cu frame-uri, si nu la
documentul la frame-ul anterior.
Frame-urile pot crea probleme si la cautarea unui text n pagina, deoarece browserul nu stie n care frame sa caute;
similar, pot fi problemele cu comenzile care se bazeaza pe combinatii de taste.
Programele de cautare pe Internet nu salveaza datele despre continutul unui frame, deoarece de obicei, un frame
are sens n cadrul grupului cu mai multe frame-uri din care face parte. De obicei, aceste motoare de cautare
salveaza date despre continutul elementului <noframes> dintr-o pagina cu frame-uri.

Tabele
Tabelele sunt foarte utile n HTML, mai ales pentru ca se pot folosi la structurarea paginii n mai multe zone, lucru
care nu prea are legatura cu tabele. Pe de alta parte, datele tehnice, rezultatele unei cercetari, o lista de preturi, toate
arata bine sub forma de tabel; tabelul ofera informatia concentrat si bine organizat.
Un tabel n HTML ncepe cu tag-ul <table> si se ncheie cu </table>. Tabelul este mpartit n linii (table row),
fiecare linie fiind ntre tag-urile <tr> si </tr>; la rndul lor, liniile se mpart n celule, fiecare celula de date (table
data) ntre tag-urile <td> si </td>. O celula de tabel poate contine text, imagini, liste, paragrafe, alte tabele etc.
Exercitiu: scrieti urmatorul text n corpul unei pagini de Web:
<table>
<tr>
<td>celula 1/1</td>
<td>celula 1/2</td>
</tr>
<tr>
<td>celula 2/1</td>
<td>celula 2/2</td>
</tr>
</table>
Vizualizati.
Tag-ul <table> poate avea o multime de atribute, de exemplu atributul border specifica grosimea chenarului, n
pixeli. Daca dati doar border fara valoare, tabelul se va afisa cu chenar implicit de 1.
Exercitiu: schimbati grosimea chenarului n 5. Vizualizati.

Exercitiu: experimentati si celelalte atribute ale tag-ului table.
Tabelul poate avea un titlu, care se afiseaza deasupra lui. Titlul se specifica ntre tag-urile <caption> si
</caption>. Tag-ul <caption> poate avea si el atribute, cel mai folosit fiind align, cu valoarea bottom. Align
poate lua patru valori, left, right, top, bottom. Internet Explorer mai specifica atributul valign cu valorile
top sau bottom, ca sa puteti combina alinierea orizontala cu cea verticala.
Exercitiu: dati titlul Primul tabel tabelului dvs. de mai sus; faceti ca titlul sa se afiseze sub tabel, n partea
stnga (sugestie: folositi si tag-ul <div> pentru a doua aliniere a titlului).
n afara de celulele de date (<td>), o linie de tabel poate contine si celule de antet (table heading). Celula de
antet ncepe cu <th> si se ncheie cu </th>. Celulele de tip antet sunt de fapt tot celule de tabel ca si cele de date, cu
diferenta ca textul continut n ele se afiseaza evidentiat (de obicei ngrosat).
Exercitiu: modificati exemplul de mai sus, sa arate astfel:
<table border=1>
<tr>
<th>Linia 1</th>
<td>celula 1/1</td>
<td>celula 1/2</td>
</tr>
<tr>
<th>Linia 2</th>
<td>celula 2/1</td>
<td>celula 2/2</td>
</tr>
</table>
Observati antetul liniilor.
Atentie: totdeauna verificati ca numarul celulelor dintr-o linie de tabel sa coincida, altfel coloanele tabelului vor
apare eronat.
Daca doriti anteturi de coloane, si nu de linii, faceti ca prima linie de tabel sa contina numai celule antet (<th>),
celulele continnd antetele coloanelor ce vor urma n urmatoarele linii ale tabelului.
Daca aveti o celula goala ntr-un colt al tabelului, este mai bine sa scrieti n el un spatiu nedivizibil.
Exercitii: experimentati si cu alte tag-uri si atribute ale lor.
Tabelul 1 Tag-uri tip tabel
TAG DE START NN IE W3C SCOP

<table> 3.0 3.0 3.2 Tabel.
<th> 3.0 3.0 3.2 Antet.
<tr> 3.0 3.0 3.2 Linie de tabel.
<td> 3.0 3.0 3.0 Celula de date.
<caption> 3.0 3.0 3.2 Titlu de tabel.
<colgroup> 3.0 4.0 Grup de coloane de tabel.
<col> 3.0 4.0 Atribute pentru unul sau mai multe coloande de tabel.
<thead> 4.0 4.0 Antet de tabel fix.
Corp de tabel care se deruleaza ntre antetul si partea de
<tbody> 4.0 4.0
jos a tabelului.
<tfoot> 4.0 4.0 Parte de jos fixa.

Liste
n HTML, puteti crea diferite tipuri de liste, n functie de necesitati. Elementele listei au, de obicei, un tab n fata, si
o bulina sau un numar, sau alt caracter n functie de browserul care le afiseaza.
O lista poate contine text, paragrafe, linii vide, imagini, legaturi, alte liste etc.
Liste neordonate
De obicei , elementele unei liste neordonate apar cu o bulina n fata. Fiind neordonate, elementele nu sunt
numerotate.
Lista neordonata ncepe cu tag-ul <ul> (de la unordered list) si se termina cu tag-ul pereche, </ul>.
Elementele listei sunt nconjurate de tag-urile <li> si </li>, de la list item.
Exercitiu: creati un fisier HTML, si introduceti urmatorul text n corpul paginii:
<ul>
<li>Paine</li>
<li>Lapte</li>
<li>Mamaliga</li>
<li>Icre negre</li>
</ul>
Vizualizati pagina. Inserati o lista neordonata n locul elementului Paine; aceasta lista imbricata sa aiba
elementele: o legatura spre site-ul Pro TV, un paragraf si un cuvnt scris cu text ngrosat (bold).
O lista neordonata poate avea atribute, cea mai des folosita fiind cea care specifica tipul bulinei dinaintea
elementului. Acesta este atributul type. Acelasi atribut se poate folosi si n cazul elementului.
Exercitiu: la tag-ul <ul> din lista de mai sus, dati atributul type cu valoarea square. Vizualizati. Observati
organizarea elementelor listei n pagina afisata.
Liste ordonate
Listele ordonate sunt similare celor neordonate, cu deosebirea ca la afisare, elementele sunt numerotate. Tag-ul
de nceput este <ol>, iar cel de sfrsit, </ol>. Elementele de lista se specifica tot cu <li>.
Exercitiu: modificati lista de mai sus, sa fie ordonata. Observati cum se afiseaza.
Si n cazul listelor ordonate, putem alege cum sa se faca numerotarea elementelor, cu atributul type, doar ca
aici, atributul poate lua alte valori, de exemplu a (pentru numerotare cu litere mici). Avem si atributul start,
care specifica de unde se ncepe numaratoarea. Start se specifica cu numar arab, chiar daca numerotarea este cu
litere.
Exercitiu: fortati numerotarea n lista de mai sus cu litere mari, ncepnd cu C; afisati.
Liste de definitie
Lista de definitie este un caz particular de lista. Elementele unei astfel de liste sunt perechi termen+definitie. O
lista de definitie ncepe cu tag-ul <dl> si se termina cu perechea acestui tag, </dl>.
Termenul ncepe cu tag-ul <dt> si se termina cu </dt>. Dupa fiecare termen, urmeaza definitia lui, care ncepe cu
tag-ul <dd> si se ncheie cu </dd>. Puteti pune text, paragrafe, linii vide, imagini, legaturi, alte liste etc. ntre tag-
urile de definitie (<dd> si </dd>).
Exercitiu: introduceti urmatorul text ntr-un fisiere HTML, n corpul paginii:
<dl>
<dt>Paine</dt>
<dd>Produs din faina de grau</dd>
<dt>Mamaliga</dt>
<dd>Produs din faina de malai</dd>
</dl>
Vizualizati. Puneti o legatura spre o pagina Web n locul termenului Paine. Vizualizati.
Exercitiu: ncercati sa creati o lista de definitie cu mai multe definitii pentru acelasi termen, apoi cu o singura
definitie pentru mai multi termeni.
Exercitiu: creati o lista imbricata: cel principal sa fie de tip ordonat, cel intern neordonat.
Exercitiu: ncercati atributul compact la toate cele trei tipuri de lista (se include n tag-ul de nceput de lista).
Exercitiu: ncercati si celelalte tipuri de liste (din tabel).
Tabelul 1 Lista tag-urilor de tip lista
TAG DE START NN IE W3C SCOP

<ol> 3.0 3.0 3.2 Lista ordonata.
<ul> 3.0 3.0 3.2 Lista neordonata.
<li> 3.0 3.0 3.2 Element de lista.
<dl> 3.0 3.0 3.2 Lista de definitie.
<dt> 3.0 3.0 3.2 Termen de definitie.
<dd> 3.0 3.0 3.2 Descrierea unui termen de definitie.
<dir> Depasit. Folositi <ul>.
<menu> Depasit. Folositi <ul>.

Formulare
Generalitati
Pna acum, am vazut cum puteti crea pagini Web pe care utilizatorii sa le vizualizeze. nsa aceasta metoda este
unidirectionala, utilizatorii nu va pot trimite comentarii, propuneri sau date despre ei nsisi, eventual printr-un e-
mail. Ideal ar fi sa va poata trimite opiniile lor, date personale (pentru statistici), preferintele lor direct din pagina,
sa nu mai fie nevoie de pornirea programului pentru e-mail.
Formularele Web va permit acest lucru: utilizatorii pot introduce text sau pot face selectii dintr-o lista direct pe
pagina, si pot trimite aceste date napoi serverului, care apoi le proceseaza.
Aceasta tehnica se bazeaza pe doua lucruri: pagina Web care afiseaza formularul virtual n browserul clientului, si
programul (scriptul) de pe server, care proceseaza datele din formularul completat si trimis de client, prin
intermediul browserului sau. n aceasta lucrare vom vorbi de partea de formular, mai exact, cum putem crea un
astfel de formular ntr-un fisier HTML. Despre scripturile (programele) de pe server vom vorbi mai trziu.
La trimiterea datelor formularului napoi la server, toate datele sunt trimise n perechi nume=valoare.
Tag-ul form
Acest tag <form>, mpreuna cu perechea sa de nchidere, specifica browserului ca blocul respectiv este un formular
virtual. Puteti avea mai multe astfel de formulare pe o pagina, dar nu puteti sa le imbricati.
Tag-ul de deschidere contine, de obicei, doua atribute: method si action.
Atributul method poate lua valoarea post sau get, acest lucru influentnd cum sunt trimise napoi serverului
datele din formular. Vom vedea acest atribut mai trziu.
Atributul action specifica scriptul, programul de pe server care va procesa datele din formular dupa ce sunt
trimise serverului. Acest script este de fapt un program ntr-un subdirector pe un server, de exemplu
http://www.serverulmeu.ro/cgi-bin/scriptulmeu.
Exemplu: un formular HTML ar arata astfel:
<form method=post action=http://www.serverulmeu/cgi-bin/scriptulmeu>
</form>
Desi exemplul de mai sus este corect, el nu contine nici un element care sa fie afisat pe pagina de Web.
Formularele Web pot contine zone de introducere text, butoane radio, butoane de selectie si butoane pentru a
trimite datele din formular serverului sau de a sterge din formular datele introduse anterior.
Trebuie ca dumneavoastra sa organizati elementele formularului pe pagina, cu tag-uri obisnuite, deoarece

browserul le afiseaza una dupa alta pe pagina, fara sa le formateze n vreun fel.
Tag-ul input
n interiorul blocului <form>, trebuie sa inseram cteva elemente care sa fie afisate pe pagina. Aceste elemente se
specifica cu tag-ul <input>, fara pereche de nchidere.
Exercitiu: creati si vizualizati urmatorul fisier:
<html>
<head>
<title>
Pagina test formulare
</title>
</head>
<body>
<form method="post" action="http://www.serverulmeu.ro/cgi-bin/scriptulmeu">
<input type="text" name="textuldetrimis" value=test>
</form>
</body>
</html>
Observatie: exemplul de mai sus nu va reusi sa trimita formularul, deoarece serverul www.serverulmeu.ro nu
exista.
Pentru fiecare element <input>, trebuie sa specificam atributele type si name. Atributul type specifica daca
elementul grafic respectiv este zona de introducere text, buton, buton radio sau altceva. Atributul name specifica
numele elementului respectiv, deoarece datele formularului, trimise napoi la server, sunt compuse din perechi
nume=valoare, cum am amintit la nceput. n cazul exemplului de mai sus, se afiseaza o casuta de introducere
text (type=text); datele se memoreaza si vor fi trimise sub forma textuldetrimis=test, textuldetrimis fiind
numele casutei de introducere text, iar test fiind textul concret din acea casuta. Daca utilizatorul tasteaza alt text
n respectiva casuta, textuldetrimis va lua alta valoare, respectiv noul text introdus de utilizator.
Butonul Submit
Ca sa trimitem serverului datele dintr-un formular, avem nevoie de un element <input> de tip submit. Cnd se
apasa acest buton, browserul aduna datele din formularul curent (din care face parte si butonul) si le trimite
serverului.
Daca formularul contine doar o zona de introducere text, tastnd Enter transmite datele serevrului, si nu mai este
nevoie de butonul Submit. Totusi, utilizatorii vor cauta acest buton pe pagina, astfel ca este indicat sa puneti un
buton Submit n fiecare formular.
Exercitiu: adaugati urmatoarea linie n fisierul-exemplu de mai sus, dupa elementul <input> de tip text:
<input type=submit value=Trimite>
Atributul value, n acest caz, specifica textul de pe buton.
Puteti avea mai multe butoane Submit n acelasi formular, specificndu-le numele. n acest caz, numele si
valoarea se trimit serverului mpreuna cu celelalte date ale formularului.
Exercitiu: dati numele trimite1 si inscriptia Trimite 1 butonului din exercitiul de mai sus. Apoi mai
adaugati un buton cu numele trimite2 si inscriptia Trimite 2.
Casute de introducere text

Aceste casute sunt elemente <input> de tip text. Daca omitem tipul, elementul <input> va fi automat de tip
text.
Pot fi si de tip password, n loc de text, caz n care textul tastat n ele este afisat ca asteriscuri. Desi nu este
afisat, parola este transmisa plan (vizibil) serverului, adica cineva care monitorizeaza reteaua o poate citi.
Puteti specifica lungimea maxima a textului cu atributul maxlength, n caractere, si marimea casutei, tot n
caractere, cu atributul size.
Exercitiu: adaugati formularului anterior doua casute de text, ambele de marimea 20

caractere si lungimea maxima a textului 15 caractere, una de text normal, iar
cealalta, de introducere parola.
Butoane radio
Butoanele radio se folosesc de obicei n grup, ceea ce nseamna ca avem mai multe butoane radio, cu valori diferite
si nume identice; utilizatorul poate selecta doar unul dintre ele (celelalte se deselecteaza automat).
Exercitiu: introduceti urmatoarele elemente n formularul de mai sus:

<ol>
<li><input type=radio name=marca value=Ericsson>Ericsson</li>
<li><input type=radio name=marca value=Nokia>Nokia</li>
<li><input type=radio name=marca value=Alcatel>Alcatel</li>
</ol>
Observati ca toate butoanele radio de mai sus au acelasi nume. La trimitere, se ia numele butonului si valoarea
celui care este selectat. Mai observati ca sunt puse n lista, ceea ce nu este obligatoriu, dar creeaza un efect estetic.
Este bine ca unul din butoanele din grup sa fie selectat implicit. Puteti specifica asta folosind atributul checked,
fara valoare, la unul din butoane.
Exercitiu: faceti ca marca Nokia sa fie selectata implicit n exemplul de mai sus.
Puteti crea mai multe grupuri de butoane radio n acelasi formular, dar numele grupurilor sa fie diferit.
Exercitiu: creati nca un grup de butoane radio n exemplu.
Butoane de selectie
Aceste butoane sunt de tip checkbox. Numai acele butoane+valori vor fi trimise, care sunt selectate. Puteti
forta si aici ca un buton sa fie selectat implicit, cu atributul checked.
Exercitiu: schimbati butoanele radio din exemplul anterior n butoane de selectie de tip checkbox.
Imagini
Se pot folosi si imagini n formulare. Cnd dati clic pe o imagine, se transmit serverului coordonatele de pe
imagine unde ati dat clic, mpreuna cu celelalte date din formular. De obicei, coordonatele nu se proceseaza,
imaginile dintr-un formular folosindu-se la trimiterea datelor, n loc de buton Submit.
Sintaxa este:
<input type=image src=buton.gif name=butonul>
La trimiterea datelor din formular, se trimit coordonatele butonul.x si butonul.y, cu valorile aferente.
Atributul src specifica numele fisierului afisat n pagina, n cazul nostru, buton.gif.
Liste de selectie
Puteti avea si liste de selectie ntr-un formular. Acestea se specifica prin tag-ul <select> si perechea sa de nchidere,
iar n interiorul blocului de selectie, specificati optiunile cu <option> si perechea.
Exercitiu: introduceti n exemplul anterior:
<select name="marca">
<option>Alcatel</option>
<option>Nokia</option>
<option>Ericsson</option>
</select>
Valoarea trimisa este textul afisat, sau specificat cu value. Puteti forta ca nu prima, ci alta optiune sa fie selectata
implicit, cu atributul selected la o optiune. Puteti forta si posibilitatea selectarii mai multor optiuni, specificnd
atributul multiple n <select>. Puteti avea, de asemenea, atributul size (pe verticala).
Exercitiu: ncercati atributul size, de exemplu 4.
Zone de text
Zonele de text sunt zone multi-linie unde puteti introduce text. Se specifica prin tag-ul <textarea> si perechea, cu
atributele name, rows si cols (adica numele, numarul liniilor s numarul coloanelor)
Exercitiu: n exemplul anterior, creati o zona de introducere text, de latime 20 si naltime 10.
Zone ascunse
n formulare, putem avea si zone ascunse, care nu se afiseaza pe pagina.
Ele au urmatoarea sintaxa:
<input type=hidden name=numecaine value=Rex>
Care este folosul, daca tot nu se afiseaza si utilizatorul nu poate introduce date n aceste zone ascunse?
Sa presupunem, de exemplu, ca avem un formular afisat. Introducem datele, apoi apasam pe Submit.
Browserul trimite serverului datele introduse n formular (perechile nume=valoare); scriptul de pe server le
proceseaza, si genereaza o alta pagina Web cu un alt formular. Acest nou formular este trimis napoi utilizatorului,
care l completeaza si l trimite napoi serverului. Al doilea script de pe server proceseaza datele din al doilea
formular, dar se bazeaza att pe datele din acest al doilea formular, ct si pe rezultatele primului script. Asta
nseamna ca primul script trebuie sa transmita cumva rezultatele sale celui de-al doilea script. Poate face acest
lucru scriind un fisier temporar pe harddiscul serverului, iar al doilea script sa-l citeasca de pe harddisc la primirea
celui de-al doilea formular. Totusi, acest lucru ncarca mult serverul, mai ales daca apar mai multe formulare
simultan.
Solutia este simpla: primul script genereaza al doilea formular si pune rezultatul procesarii primului ntr-un
element ascuns din formular. Al doilea script, cnd primeste al doilea formular, ia datele din acest formular,
inclusiv rezultatul primei procesari, din elementul ascuns.
Upload de fisiere
Acest element de formular este relativ nou, putine browsere stiu sa-l foloseasca. Cu ajutorul acestui element,
puteti trimite fisiere ntregi pe server, direct din pagina Web.
Exercitiu: introduceti urmatorul formular ntr-o pagina si vizualizati.
<form method=post enctype=multipart/form-data
action=http://www.serverulmeu/cgi-bin/scriptulmeu>
Trimite fisierul: <input name=fisierul type=file>
<input type=submit value=Trimite fisierul>
</form>
Observati atributul enctype si elementul de tip file. Atributul enctype specifica n ce consta datele care se
trimit napoi la server, n cazul nostru multipart/form-data. Acest atribut are valoarea implicita application/x-
www-form-urlencoded, pentru formulare obisnuite, si nu se specifica explicit n cazul acestora.

Multimedia pe Web
Generalitati
Am vazut cum puteti construi o pagina de Web cu text bine structurat, cu subtitluri, paragrafe, liste si tabele. Ba
stiti chiar sa introduceti mai multe frame-uri n pagina.
Totusi, explozia de popularitate a Web-ului nu ar fi fost posibila cu pagini bazate exclusiv pe text. Este adevarat ca
forma clasica a informatiei este textul, dar o pagina este mult mai atractiva cu imagini si culori, animatie sau chiar
clipuri audio sau video. Nu mai este vorba doar sa transmitem informatie cititorului, ci sa-i captam atentia, ca sa fie
curios si sa nceapa sa citeasca informatiile de pe pagina. Si, oricum, o imagine spune o mie de cuvinte.
Elementele multimedia de pe paginile Web sunt fisiere separate de fisierul HTML ce contine textul si marcajele
(tag-urile) pentru pagina. Se face referire la aceste elemente multimedia n cadrul fisierului HTML. Asta nseamna
ca n momentul cnd browserul ncarca fisierul HTML, un tag special din acesta i spune care fisier multimedia sa-l
aduca de pe server si unde sa-l afiseze pe pagina (daca fisierul respectiv contine informatie vizuala).
Imagini
Imaginile sunt pe departe cele mai raspndite elemente multimedia
La fel cum un fisier HTML are extensia .html sau .htm, si fisierele imagine au extensiile lor, n functie de
format (cum sunt codificate punctele si atributele lor n interiorul fisierului). Cele mai raspndite formate de
imagine sunt GIF (cu extensia .gif) si JPEG (cu extensia .jpeg sau .jpg), dar si formatul PNG se raspndeste
rapid, mai ales pentru ca ofera aceeasi calitate ca GIF, dar la marime mai redusa a fisierului imagine.
Observatie: fisierele GIF codifica imaginea cu maxim 256 culori, JPEG pe 16 milioane culori
sau 256 nuante de gri. Fisierele GIF sunt adecvate desenelor si reclamelor desenate pe
calculator, iar JPEG-urile sunt cea mai buna solutie pentru fotografii.
Putem vorbi de imagini inline si imagini externe. Imaginile inline sunt n linie, adica apar pe pagina Web
mpreuna cu textul; daca le includeti n mijlocul unei propozitii din fisierul HTML, ele vor aparea n mijlocul
propozitiei n pagina. Imaginile pot fi inserate n mijlocul oricarui text de afisat (text clar, paragrafe, subtitluri etc.).
n continuare vom vorbi despre imagini inline, cele externe vor fi discutate mai trziu.
Atributul src
Includerea unei imagini n pagina este simpla, trebuie doar sa folositi tag-ul <img>.
Exemplu: <img src=imagine.gif>
Observati atributul src, care specifica sursa fisierului imagine. Ca si n cazul legaturilor spre alte fisiere HTML
locale, si aici puteti folosi calea absoluta sau relativa spre fisierul imagine, de exemplu src=imagini/im1.gif, sau
puteti folosi o imagine chiar de pe alt server, specificnd, de exemplu,
src=http://enyedi.home.ro/images/Mirri3_small.JPG.
Exercitiu: creati urmatorul fisier HTML:
<html>
<head>
<title>
Pagina cu imagine
</title>
</head>
<body>
<img src="http://enyedi.home.ro/images/Mirri3_small.JPG">
</body>
</html>
Exercitiu: vizualizati pagina cu un browser si salvati fisierul imagine. Modificati fisierul HTML astfel nct
sursa imaginii sa fie locala, de pe harddiscul propriu.
Atributul alt
Acest atribut este foarte util n cazul browserelor care nu afiseaza imagini (nu pot sau afisarea imaginilor a fost
dezactivata). n acest caz, textul specificat de valoarea lui alt va fi afisat n locul imaginii (alt vine de la
alternate, adica o alternativa la imagine). De obicei, textul alternativ se pune ntre paranteze drepte (n interiorul
ghilimelelor), dar acesta este doar un obicei; astfel, ntr-un browser n mod text, utilizatorul vede imediat care sunt
imaginile (apar texte ntre paranteze drepte n locul lor). Este bine ca textul alternativ sa contina functia imaginii, si
nu descrierea ei.
Exercitiu: adaugati un text alternativ pentru imaginea din exemplul anterior.
Eventual, puteti introduce un text ASCII Art ca si text alternativ, punnd tot tag-ul <img> ntre <pre> si
</pre>, ca sa se pastreze formatarea.
Atributele width si height
Cum se ncarca o pagina care contine si imagini? Se ncarca fisierul HTML, browserul l scaneaza si determina
unde anume n pagina trebuie sa afiseze elemente multimedia. Acest lucru nu constituie o problema, daca imaginile
sunt mici. Dar daca imaginile sunt de marime mai mare (ca suprafata pe pagina), cnd a nceput sa le aduca de pe
server, trebuie sa le aloce loc n pagina, asta nsemnnd redesenarea ntregii pagini. Motivul este ca browserul afla
marimea imaginii numai cnd a nceput sa aduca fisierul aferent.
O solutie ar fi ca deja fisierul HTML sa-i specifice browserului locul ocupat de imagine n pagina, inclusiv
suprafata necesara. Astfel, browserul poate sa afiseze toata pagina, cu locuri goale n locul imaginilor, si, pe
masura ce reuseste sa aduca fisierele aferente imaginilor, sa le afiseze n locul prealocat. Aceasta tehnica produce
senzatia ca pagina se ncarca mai rapid. Este indicat sa folositi aceste atribute la toate imaginile din paginile dvs.
Cele doua atribute, width si height, specifica latimea si naltimea imaginii, n pixeli (sau procente). Daca se
specifica marimi diferite de marimile reale ale imaginii, browserul va face o scalare, ca sa umple spatiul prealocat.
Daca se specifica procente, acestea se refera la suprafata din pagina afisata (NU la marimea originala a imaginii!).
Puteti crea, astfel, imagini mai mici (si, implicit, fisiere de marime mai mica, deci care trec mai rapid prin retea si
sunt afisate mai repede), sa le specificati marimi mai mari, apoi browserul sa le scaleze la marimea potrivita.
Totusi, acest lucru nu este indicat, deoarece prin scalare, calitatea imaginilor scade foarte mult.
Observatie: puteti afla simplu marimea unei imagini: n browser, dati dreapta-clic pe imagine, si selectati
Properties. Se afiseaza detalii despre imagine, printre care si marimea (orizontal vertical), n pixeli.
Exercitiu: aflati si specificati marimea imaginii n exemplul anterior. Vizualizati. ncercati cu marimi mai mari si
mai mici dect cele reale.
Atributul align
Daca inserati imaginea n mijlocul propozitiei, va fi o singura linie de text pe pagina, n dreapta si stnga imaginii.
Daca aveti mai multe linii de text, nfatisarea paginii nu va fi prea estetica.
Exercitiu: modificati exemplul de mai sus, sa arate astfel:
<html>
<head>
<title>
Pagina cu imagine
</title>
</head>
<body>
Acum vom vedea cum arata imaginea in mijlocul propozitiei noastre.
Aceasta este o imagine inline: <img width=300 height=315 alt=[Pisicuta Mirri meditand]
src=http://enyedi.home.ro/images/Mirri3_small.JPG>, de marime mijlocie. Nu
e prea estetic, adevarat?
</body>
</html>
Atributul align specifica pozitia orizontala a imaginii pe pagina, sau n functie de textul n care este inserat.
Valorile standard sunt top, middle, bottom, left sau right. Primele trei (top, middle si bottom) se
raporteaza la textul n care este inserata imaginea, iar left si right pozitioneaza imaginea n pagina, pe
orizontala, textul din dreapta (stnga) imaginii ocopnd spatiul disponibil de lnga imagine.
Daca doriti sa centrati imaginea pe orizontala n pagina, puneti tot tag-ul <img> ntr-un alt bloc, de exemplu <p
align=center><img src=imaginea.gif></p>.
Exercitiu: ncercati atributul align cu valorile de mai sus. Observati fiecare atribut cum
aliniaza imaginea.
Atributul clear al tag-ului <br>
Dar daca vrem sa pornim o noua linie, sub imagine, desi mai este spatiu lnga imagine? Cum putem forta
browserul sa afiseze noul text sub imagine? Folosind atributul clear al tag-ului <br>. Valorile acestui atribut pot
fi left, right sau all. Tag-ul <br> cu atributul clear sare n prima linie vida sub imagine; atributul specifica
daca sa se caute prima linie fara imagini pe stnga, pe dreapta, sau pe toata latimea paginii.
Exercitiu: mai scrieti cteva propozitii dupa imagine, n exemplul anterior. nainte de ultima propozitie, inserati
<br clear=left>. Observati efectul. ncercati toate cele trei valori ale atributului.
Atributul border
Acest atribut deseneaza un chenar de grosime specificata (n pixeli) n jurul imaginii. Puteti chiar forta disparitia
chenarului (cu border=0), de exemplu n cazul imaginilor care sunt si legaturi.
Atentie: aveti grija cnd fortati chenarul la zero, deoarece este singura indicatie ca imaginea este o legatura
activa!
Exercitiu: setati chenarul la 5 pixeli pentru imaginea din exemplul de mai sus.
Atributele vspace si hspace
Am vazut cum putem forta textul sa ocupe spatiul liber de lnga imagine (cu atributul align). Putem specifica si
distanta dintre text si imagine (n pixeli), pe orizontala si pe verticala, folosind atributele hspace si vspace,
respectiv.
Exercitiu: inserati aceste doua atribute n tag-ul <img> din exemplul de mai sus, folosind valorea 30 pentru
ambele.
Imagini ca legaturi
Putem folosi o imagine pe post de legatura la o alta pagina? Sigur! Este simplu: trebuie doar sa punem toata
entitatea imagine ntr-un bloc ancora.
Exemplu:
<a href=http://www.serverulmeu.com><img src=serverulmeu.gif></a>

Exercitiu: faceti imaginea din primul exemplu (de la nceputul lucrarii) legatura la adresa
http://enyedi.home.ro/images/mirri3.jpg. Vizualizati. Fortati disparitia chenarului. Schimbati acum adresa
legaturii n http://www.protv.ro. Vizualizati. Dati clic pe imagine, sa verificati legatura.
Puteti adauga si text mpreuna cu imaginea, n interiorul ancorei, ca text explicativ si legatura spre aceeasi
pagina.
Exercitiu: scrieti Dati clic pentru imaginea mare. n interiorul ancorei, dupa imagine. Vizualizati.
Imagini externe
Versiunea mare a imaginii din exemplul anterior este o imagine externa
(http://enyedi.home.ro/images/mirri3.jpg). De ce? Pentru ca nu este afisata mpreuna cu celelalte elemente de pe
pagina, ci numai la cererea explicita a utilizatorului (cnd acesta da clic pe imaginea mica afisata n pagina).
Observati ca n momentul cnd este activat (cititorul da clic pe versiunea mai mica), browserul ncarca si afiseaza
versiunea mare a imaginii, fara ca aceasta sa fie continuta explicit ntr-o pagina Web (browserul afiseaza imaginea,
fara sa fie nevoie de un fisier HTML).
De obicei, n pagina se afiseaza o versiune mai mica a imaginii, pentru ca ncarcarea si afisarea paginii sa nu
dureze prea mult. Daca utilizatorul doreste vizualizarea imaginii mai detaliate, poate sa ncarce versiunea mai mare
a imaginii.
Culori
Pe lnga imagini, puteti colora si alte elemente dintr-o pagina Web, de exemplu text sau fundalul paginii.
Orice culoare se compune din diferite procentaje ale culorilor de baza rosu, verde si albastru (RGB Red,
Green, Blue).
n trei feluri puteti specifica culori:
folosind numele culorii (red, de exemplu, adica rosu);
cu combinatia valorii zecimale a celor trei culori de baza, fiecare lund o valoare ntreaga de la zero la 255, de
exemplu rgb(255,0,0), care este tot rosu (verdele si albastrul sunt zero); observati sintaxa
(rgb(codrosu,codverde,codalbastru));
cu combinatia valorii hexazecimale a celor trei culori de baza, fiecare lund o valoare de la zero la FFhexa, de
exemplu #FF0000 este tot rosu, deoarece FF (pentru rosu) hexazecimal este 255 zecimal, iar 00 este zero si
n zecimal; observati sintaxa (#codhexarosucodhexaverdecodhexaalbastru). Culorile specificate n hexazecimal
sunt recunoscute de toate browserele.
Tabelul 1 culorile cu nume

NUME CULOARE VALOARE RGB N HEXA
Black #000000
Silver #C0C0C0
Gray #808080
White #FFFFFF
Maroon #800000
Red #FF0000
Purple #800080
Fuchsia #FF00FF
Green #008000
Lime #00FF00
Olive #808000
Yellow #FFFF00
Navy #000080
Blue #0000FF
Teal #008080
Aqua #00FFFF
Culori n tag-ul <body>

n tag-ul <body>, puteti specifica culoarea fundalului, sau a textului, a legaturilor nevizitate, a celor vizitate sau a
celor activate.
Tabelul 2 atributele de culoare pentru <body>

ATRIBUT ELEMENTUL CARE SE COLOREAZA
bgcolor Fundal.
text Text.
link Legaturi.
vlink Legaturi vizitate.
alink Legatura deasupra careia s-a apasat butonul de mouse, dar nu s-a lasat nca.
Exercitiu: ncercati <body bgcolor=black text=rgb(255,255,255) link=#FFFF00>. Experimentati si cu

celelalte atribute.
Imagine fundal
Puteti specifica un fisier imagine ca fundal pentru pagina dvs. Trebuie doar sa folositi atributul background n
tag-ul <body>. Valoarea acestui atribut trebuie sa fie calea spre un fisier local sau o adresa url, similar ca pentru
atributul src din tag-ul <img>. Daca imaginea este mai mica dect pagina, ea va fi repetata (ca si tiled
wallpaper n Windows).
Exercitiu: specificati pentru exemplul anterior o imagine de fundal.
Caracteristic lui Internet Explorer este atributul bgproperties n tag-ul <body>. Acest atribut creeaza efectul
fundalului static, deasupra caruia se misca pagina (cnd este derulat).
Tag-ul <embed>
Acest tag este caracteristic browserului Internet Explorer; cu ajutorul acestui tag, puteti ngloba un element
multimedia (audio sau video) n pagina.
Exemplu:
<embed src="c:/Temp/c04.mid" autostart="true" hidden="true" loop="0">

Exemplul de mai sus nglobeaza fisierul c04.mid (fisier audio de tip MIDI) n pagina, fara ca acesta sa afecteze
vizual pagina (atributul hidden); muzica va porni automat la ncarcarea paginii (atributul autostart). Piesa se va
repeta de 0 ori (atributul loop).
Exercitiu: schimbati valoarea atributului hidden, ca sa apara si butoane de control pentru audio.
Tag-ul <bgsound>
Cu acest tag (propriu lui Internet Explorer), puteti specifica un fundal sonor pentru pagina dvs. Folositi o piesa de
fundal scurta, si fara sa repetati, ca sa nu distrageti atentia cititorului.
Exemplu: <bgsound src="c:/Temp/Download/c04.mid">
Video nglobat
Tot n Internet Explorer, puteti include elemente video n pagina.
Exemplu: <img dynsrc="filmul.avi" src="filmul.gif" alt=[filmul]>
Acest exemplu afiseaza imaginea filmul.gif n alte browsere, dar n Internet Explorer, se porneste fisierul video
filmul.avi.
Tag-ul <marquee>
Si acest tag este propriu lui Internet Explorer. El afiseaza un text care se plimba pe orizontala n pagina.
Exercitiu: vizualizati tag-ul de mai jos:
<marquee>Test</marquee>
ncercati atributele acestui tag.
Tag-ul <blink>
Acest tag este propriu lui Netscape Navigator.
Exercitiu: ncercati tag-ul urmator n Netscape:
<blink>Test</blink>
Elemente multimedia externe

Aceste elemente multimedia sunt similare imaginilor externe. Ele nu fac parte din pagina, aceasta continnd doar o
legatura spre ele. Cnd se activeaza legatura, browserul ncarca si ncearca sa interpreteze fisierul respectiv. De
obicei, browserele mai noi stiu sa interpreteze formatele cele mai folosite pentru audio si video, dar daca nu au
suport nglobat pentru aceste formate, cer sistemului de operare sa interpreteze el fisierul respectiv (adica sa
porneasca un program care cunoaste formatul fisierului).
Acest lucru nseamna ca, practic, putem crea o legatura spre orice fisier; daca browserul nu-i recunoaste formatul,
pur si simplu va ncerca sa-l aduca pe harddiscul local.
Exercitiu: creati o legatura spre un fisier oarecare de pe harddisc, de exemplu c:/Winnt/explorer.exe.
Vizualizati. Dati clic pe legatura respectiva. Ce se ntmpla? Creati o legatura externa spre fisierul audio din
exemplul anterior. Vizualizati. Dati clic pe legatura respectiva.
Remprospatarea automata a paginii

Aceasta tehnica se poate folosi si la redirectionare automata, si functioneaza n aproape toate browserele.
Exercitiu: includeti urmatorul tag n partea de antet a fisierului dvs. HTML:
<meta http-equiv="refresh" content="5;url=http://www.protv.ro">
Acest tag i spune browserului sa remprospateze pagina n cinci secunde, nlocuind-o cu pagina ProTV (adica
browserul este redirectat la pagina ProTV). Daca omitem adresa de redirectare (lasam doar numarul de secunde n
ghilimele), se va rencarca pagina curenta (remprospatare).
Sfaturi practice
Pastrati echilibrul dintre elementele multimedia mari, colorate, pline de viata, atractive si marimea paginii.
Degeaba aveti o pagina colorata (de pus n vitrina), daca se ncarca lent. Utilizatorii vor naviga pe alta pagina
nainte ca browserul lor sa ncarce complet pagina dvs.
Folositi imagini inline de marime mica, sub 20K. Puteti reduce marimea unui fisier imagine reducnd marimea
imaginii, reducnd numarul culorilor (pna la alb-negru, eventual).

Fonturi
Puteti schimba nfatisarea unei bucati de text, folosind tag-ul <font> (si perechea ei de nchidere). Cu acest tag, se
pot specifica unele atribute ale textului, de exemplu culoarea, tipul caracterelor, marimea etc. Acest tag nu poate
contine alte tag-uri de nivel bloc (ca paragraf sau tabel).
Exercitiu: scrieti urmatoarea bucata de cod n fisierul dvs. HTML, apoi vizualizati:
Text normal.<font face="arial,times" color="#0099ff" size="10">Text de test.</font>Text normal.
Pentru atributul face, am specificat doua tipuri de caractere, separate prin virgula. Daca pe sistemul unde se
vizualizeaza pagina nu exista primul tip de caractere, textul se va afisa folosind urmatorul din lista (times, n
cazul nostru).
Marimea caracterelor se poate specifica absolut (n cazul nostru, 10), sau relativ, de exemplu, size=+4
mareste caracterele cu 4.
Culorile se pot specifica cum s-a descris n lucrarea Multimedia pe Web.
Stiluri
Pna acum, daca aveati mai multe fisiere HTML pe un site (interconectate prin legaturi, evident), trebuia sa
specificati n fiecare fisier detaliile privind culoarea textului, a fundalului etc.
Consortiul WWW a introdus si recomanda folosirea stilurilor. Acestea nu sunt altceva dect gruparea la un loc a
caracteristicilor cum ar fi culoarea textului, fundalul etc., adica proprietati ale paginii, altele dect informatia n
sine (adica textul, legaturile, elementele multimedia etc.).
Puteti folosi stilurile n trei variante:
1. n fisiere externe de tip CSS (Cascading Style Sheets); n acest caz, n fiecare fisier HTML pentru care doriti sa
aplicati aceste elemente de stil, trebuie sa includeti o legatura spre fisierul CSS cu stiluri;
2. n antetul unui fisier HTML (stiluri interne); n acest caz, elementele de stil se vor aplica doar acelei pagini de
Web, pe care o codifica fisierul HTML respectiv;
3. Inline, adica n interiorul corpului unui fisier HTML; n acest caz, puteti schimba elementele de stil ale unui
bloc de text, sau chiar a mai multe blocuri, n acelasi fisier (la fel cum puteti schimba si fontul de mai multe ori, n
acelasi document).
Stiluri externe
Un fisier extern cu stiluri este alegerea optima n cazul n care avem mai multe fisiere HTML care trebuie sa adopte
acelasi stil, adica aceeasi imagine de fundal, aceleasi culori pentru text etc. Daca dorim sa schimbam ceva n aceste
caracteristici, trebuie sa schimbam doar n fisierul cu stiluri.
Exercitiu: creati urmatoarele doua fisiere (test.html si test.css) n acelasi subdirector, apoi vizualizati
test.html:
test.html:
<html>
<head>
<title>
Pagina cu definitii externe de stil.
</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
Acest text este pentru test. Va rugam nu cititi.
</body>
</html>
test.css:
body
{
background-color: maroon;
color: aqua;
font-family: 'comic sans ms', arial;
font-size: larger;
font-style: oblique;
text-decoration: overline
}
Observati ca n antetul fisierului HTML, exista un tag <link>. Acest tag specifica o legatura spre un alt fisier, de tip
text/css; acest fisier contine detalii privind elementele de stil cu care sa se afiseze pagina respectiva. Daca avem
mai multe fisiere HTML pe acelasi site, putem impune un stil, o tema (theme) comuna tuturor paginilor de pe
site, adaugnd o legatura ca mai sus n antetul fiecarui fisier HTML. Daca vrem sa schimbam ceva detalii de stil,
este destul sa modificam n fisierul extern care contine definitiile de stil, n cazul nostru test.css.
Mai observati ca numele fontului comic sans ms este ntre apostrofuri, deoarece are spatii n nume. Functioneaza
la fel de bine si cu ghilimele n loc de apostrofuri.
Stiluri interne
Stilurile interne au aceeasi sintaxa ca si cele externe, cu diferenta ca nu se pun n fisier separat, ci n antetul
fisierului HTML la care se refera. Se considera prioritare definitiile de stil specificate cel mai recent.
Definitiile interne se pun n antetul fisierului HTML, toate ntr-un bloc ntre doua acolade si tag-uri <style> si
</style>.
Exercitiu: modificati fisierul test.html de mai sus, adaugnd blocul urmator dupa tag-ul
<link>:
<style>
body {background-color: red; font-size: 30;}
</style>
Observati suprapunerea stilurilor.
Pentru browsere care nu stiu elemente de stil, si care pur si simplu ar afisa textul dintre tag-urile <style>, puteti
pune aceste definitii n comentariu; browserele care stiu le vor recunoaste oricum:
<style>

</style>
Stiluri inline
Puteti aplica o definitie de stil unui singur element, de exemplu unui paragraf. n acest caz, se introduc codurile
de stil direct n tag-ul elementului respectiv.
Exercitiu: creati un paragraf nou n exemplul anterior, astfel:
<p style="color: yellow; font-size: 10">Acesta este un paragraf diferit.</p>
Concluzii pentru stiluri
Consortiul WWW recomanda folosirea stilurilor n locul tag-urilor si atributelor de stil, cum ar fi <font> sau
bgcolor, de exemplu. Daca aveti mai multe pagini, si doriti ca acestea sa arate la fel (culori, fundal, forma
literelor etc.), un fisier cu stiluri externe este alegerea optima.
Antetul si meta
Antetul unui fisier HTML nu trebuie sa contina nici un text de afisat. Toata informatia de afisat trebuie pusa n
corpul fisierului. Totusi, browserele sunt destepte si ncearca sa interpreteze informatiile din antet.
Exercitiu: scrieti un text oarecare n antet (ntre tag-urile <head> si </head>). Vizualizati. Aceasta este o
tehnica gresita de a scrie HTML!
Puteti avea elemente meta n antetul fisierului HTML. Aceste elemente meta sunt informatii aditionale despre
pagina, metainformatii; nu sunt afisate pe pagina.
De exemplu, puteti avea un element care contine o scurta descriere a paginii, pentru eventuale aparitii n listele
unor servere de cautare. Tot n acelasi scop, puteti introduce cuvinte-cheie ca element meta.
Exemplu: puteti avea un element descriptiv si cuvinte-cheie n antetul paginii:
<meta name="description" content="Details about MegaRulment and other similar products">
<meta name="keywords" content="MegaRulment, rulment, bile, otel, frecare redusa, economic">
De regula, exista si alte metainformatii n antet; acestea sunt procesate de programele specifice serverului sau
serverelor prin care trece fisierul, sau a diferitelor programe de pe client. Din moment ce browserele trec peste
metainformatiile pe care nu le cunosc, acestea nu fac nici o paguba.
URL
URL, sau Universal Resource Locator este adresa unui document pe World Wide Web. Formatul general al unui
url este:
protocol://loginulmeu:parolamea@site.subdomeniu.domeniu:port/cale/numefisier
Protocol este numele protocolului prin care se poate ajunge la document.
Tabelul 1 Protocoale WWW
NUME PROTOCOL LA CE SE REFERA

file Un fisier pe calculatorul local.
ftp Un fisier pe un server FTP (File Transfer Protocol).
http Un fisier hipertext pe un server de Web (HyperText Transfer Protocol)
gopher Un fisier pe un server gopher.
news Un grup de stiri Usenet.
telnet Conexiune Telnet.
wais Un fisier pe un server WAIS.
mailto Deschide un document e-mail nou spre adresa specificata.
Exercitiu: creati o legatura spre serverul FTP ftp.utcluj.ro, apoi o legatura care sa deschida un nou e-mail spre
enyedi@home.ro.
Loginulmeu:parolamea@ sunt necesare n cazul n care pentru a intra pe site, este nevoie de login si parola
aferenta. De obicei nu este cazul.
Site.subdomeniu.domeniu este ceva de genul tucows.dnttm.ro. Este numele propriu serverului.
:portul este ca si un conector pe server, un numar care specifica serviciul cerut. De exemplu, protocolul HTTP
(pentru HTML) poate fi accesat pe portul 80 al unui server. De obicei, numarul portului nu se specifica n adresa,
doar daca serviciul respectiv este pe alt port dect cel standard (de exemplu, daca serviciul HTTP nu este pe portul
80 al serverului respectiv, ci pe portul 3000) . Serviciul FTP ruleaza (de obicei) pe portul 21 al unui server (daca
acest serviciu este instalat si pornit pe server).
Cale/numefisier arata calea exacta spre fisierul cerut. Pentru protocolul HTTP, daca nu se specifica un fisier
HTML, se considera implicit fisierul index.html de pe server (unele servere considera default.html ca implicit).

Scripturi
Generalitati
Scripturile sunt mici programe nglobate n fisierul HTML. Un script este de fapt un text mai special, o parte din
textul din fisierul HTML. Cnd browserul ncarca fisierul HTML si afiseaza pagina, n acelasi timp interpreteaza
scriptul (sau scripturile) din pagina, si le executa.
Scripturile dintr-o pagina de Web pot modifica dinamic pagina (de exemplu, sa schimbe marimea fontului) la
aparitia unor evenimente (de exemplu, un clic al mouse-ului), pot verifica daca datele dintr-un formular sunt
corecte etc.
Ca sa puneti un script n pagina HTML, puneti textul care constituie scriptul ntre tag-uri <script> si </script>.
Puteti folosi tag-urile aditionale <noscript> si </noscript> pentru browsere care nu stiu sa lucreze cu scripturi.
JavaScript
JavaScript este un limbaj de script, adica un limbaj de programare simplificat. Se numeste JavaScript pentru ca
sintaxa acestui limbaj seamana foarte mult cu cea a limbajului de programare Java. JavaScript este gratuit, si
browserele majore (IE, Netscape) stiu sa proceseze scripturile de acest tip dintr-o pagina care le contine.
JavaScript n corpul fisierului HTML
Exercitiu: creati urmatorul fisier HTML, apoi vizualizati:
<html>
<head>
<title>
Pagina cu JavaScript
</title>
</head>
<body>
<script type="text/javascript">
document.write("Avem text pe pagina!")
</script>
</body>
</html>
Observati ca tag-ul <script> are atributul type, care specifica tipul scriptului (exista si alte tipuri, n afara de
JavaScript). Acest script are o singura comanda, care scrie Avem text pe pagina! pe pagina Web. Daca scrieti
mai multe comenzi pe aceeasi linie, trebuie sa puneti ; (punct-virgula) ntre comenzi.
Exercitiu: modificati scriptul, ca mai jos; explicati.
document.write("<i>"+"Avem text pe pagina!"+"<\/i>")

Observati caracterul \; acesta este necesar pentru ca n JavaScript, caracterul / are semnificatie speciala.
Combinatia \/ i spune browserului sa trateze / normal, fara semnificatia speciala din JavaScript.
n cazul de mai sus, operatorul + concateneaza doua siruri de caractere (sau mai multe).
Exercitiu: modificati scriptul, astfel:

Punnd scriptul n tag-ul de comentariu, browserele care nu stiu JavaScript nu vor afisa pe pagina textul scriptului
(sursa scriptului). Browserele care stiu JavaScript vor procesa scriptul, chiar daca e n comentariu. Sirul //,
comentariu n JavaScript, spune browserului sa nu proceseze linia -->. Nu putem pune la nceput //
</script>
</body>
</html>
Schimbati valoarea variabilei textul. Vizualizati.
Functii
Exemplu: creati si vizualizati urmatoarea pagina:
<html>
<head>
<title>
</title>
</head>
<body>

</script>
</body>
</html>
Schimbati valoarea variabilei textul. Vizualizati.
Ati apelat functia alert, cu parametrul textul, ceea ce va determina afisarea unei casute de alerta, cu continutul
variabilei textul. Aceasta functie, alert, este o functie standard a limbajului JavaScript.
Exercitiu: apelati functia alert(textul). Nu uitati sa includeti ghilimelele!
Puteti defini functiile dvs. proprii, pe care apoi sa le apelati. Este indicat sa definiti functiile n sectiunea de antet
(head) a fisierului, ca sa fie deja ncarcate, cnd le apelati. Asta din cauza ca browserul ncepe sa proceseze si sa
afiseze pagina nainte de a fi adus complet fisierul HTML de pe server.
Exercitiu: creati si vizualizati fisierul cu continutul de mai jos; explicati.
<html>
<head>
<title>
</title>

</script>
</head>
<body>

</script>
</body>
</html>
Executie conditionata
Exercitiu: introduceti urmatoarea bucata de script n scriptul dvs., apoi vizualizati:
if (navigator.appName.indexOf("Internet Explorer")!=-1)
{
alert("Este Internet Explorer!")
}
else
{
alert("Nu este Internet Explorer!")
}
Aceasta bucata de cod afiseaza o casuta de alerta, cu textul n functie de tipul browserului n care este afisata
pagina. Conditia pentru IF: se cauta textul Internet Explorer n numele aplicatiei browser (navigator). Daca acest
text nu apare n numele browserului, functia indexOf returneaza -1. Conditia pentru IF este adevarata doar
daca aceasta functie NU returneaza -1 (operatorul != nseamna diferit). n acest caz, se executa comenzile
din blocul IF. Cnd conditia este falsa, se executa comenzile din blocul else.
Aveti si alte comenzi pentru conditionare n JavaScript, cum ar fi switch sau operatorul conditional ?.
Bucle
Exercitiu: creati si vizualizati pagina cu urmatorul continut:
<html>
<head>
<title>
Pagina cu bucle
</title>
</script>
</head>
<body>

</script>
</body>
</html>
Exemplul de mai sus scrie n document valorile lui i, repetnd acest lucru pna cnd i ajunge la 19.
Puteti folosi si bucle while sau do...while n JavaScript.

Exemplu avansat n JavaScript
Exercitiu: creati si vizualizati pagina cu continutul de mai jos:
<html>
<head>
<title>
Legatura prin buton
</title>
</head>
<body>
<form>
<input type="button" value="Apasa-ma!"
onclick='window.open("http://www.protv.ro", "fereastra_noua")'>
</form>
</body>
</html>
Exemplul de mai sus prezinta o bucata de cod JavaScript inline, adica fara tag-urile <script> si </script>. La
evenimentul onclick, adica n momentul cnd se da clic pe buton, se apeleaza functia open (din grupul de
functii window), cu parametrii aferenti. Aceasta functie face ca la apasarea pe buton, sa se ncarce pagina ProTV
n fereastra cu numele intern fereastra_noua.
Mai multe informatii si exemple puteti gasi la adresa http://www.w3schools.com/js/default.asp, precum si multe
alte exemple la http://javascript.internet.com.
VBScript
Cum JavaScript seamana cu limbajul Java, asa si VBScript seamana cu limbajul Visual Basic, inventie Microsoft.
Din acest motiv, VBScript functioneaza numai cu browserul Internet Explorer, care este tot un produs Microsoft.
VBScript seamana oarecum cu JavaScript.
<html>
<head>
<title>
Pagina cu bucle
</title>
</head>
<body>
<script type="text/vbscript">

</script>
</body>
</html>
Scripturile VBScript se pot pune n antet, n corp sau n fisier extern, ca si cele JavaScript. n VBScript, avem
subrutine si functii. Subrutinele nu returneaza nimic, functiile, da. Numele unor functii difera fata de perechea lor
din JavaScript, altele sunt similare; apar si functii noi.
<html>
<head>
<title>
Pagina cu bucle
</title>
</head>
<body>
<script type="text/vbscript">

</script>
</body>
</html>
Pagina http://www.w3schools.com/vbscript/default.asp va ofera documentatie extinsa pentru VBScript.
DHTML
DHTML vine de la Dynamic HTML, si se refera la pagini dinamice, adica pagini de Web a caror continut se
schimba dinamic.
Nu exista un limbaj DHTML; el este un concept, un mix ntre HTML, JavaScript si stiluri CSS. El se bazeaza pe
DOM (Document Object Model), o teorie care descrie structura obiectuala a paginii de Web si evenimentele care
pot apare.
<html>
<head>
<title>
Pagina dinamica
</title>
</head>
<body>

<p id="paragraf_de_test">
Acesta este un paragraf de test.
</p>

<script language="JavaScript" type="text/javascript">
paragraf_de_test.style.color="red"
</script>
<form>


<input type="button" value="Aliniaza stanga"
onclick="paragraf_de_test.style.textAlign='left'">
<input type="button" value="Aliniaza dreapta"
onclick="paragraf_de_test.style.textAlign='right'"><br>


<input type="button" value="Culoare albastra"
onclick="paragraf_de_test.style.color='blue'">
<input type="button" value="Culoare rosie"
onclick="paragraf_de_test.style.color='red'">
<input type="button" value="Culoare alba"
onclick="paragraf_de_test.style.color='white'">
</form>
</body>
</html>
Puteti gasi mai multe informatii si exemple despre DHTML la adresa

http://www.w3schools.com/dhtml/default.asp.
Doua exemple interesante de la javascript.internet.com (uitati-va la sursa Javascript):

De la http://javascript.internet.com/time-date/mouse-trail-clock.html
Clic aici sa incarcati pagina locala cu scriptul.
De la http://javascript.internet.com/math-related/basic.html

Page last updated Wednesday, November 1, 2006.
Appleturi
Scripturile ofera o interfata usor de programat, mai ales ca pur si simplu se scriu n fisierul HTML, fara a fi nevoie
de compilare sau preprocesare a scriptului.
Totusi, scripturile au unele limitari; din aceasta cauza, pentru lucruri mai complexe, se creeaza programe, bazate pe
Java, un limbaj de programare puternic. Sintaxa este asemanatoare cu cea a lui JavaScript; de fapt, JavaScript a
mprumutat sintaxa de la limbajul Java.
Programele Java se scriu n format text, salvndu-se cu extensia .java. Apoi, se proceseaza cu ajutorul unui
program special, numit compilator. Din acest procedeu, rezulta programele Java compilate, care sunt de fapt fisiere
cu extensia .class.
Programele Java care apar pe pagini de Web se numesc applet.
Pentru ca browserul sa ncarce appletul n pagina, se scrie n fisierul HTML un tag care specifica ce applet si cu ce
parametri sa se ncarce.
Exemplu: bucata de cod de mai jos instruieste browserul sa includa pe pagina appletul:
<applet code="appletulmeu.class" codebase="http://www.serverulmeu.com/appleturi" alt="Animatie Java"

width=480 height=84>
<param name="viteza" value="100">
<img src="animatie.gif" alt="Animatie" width=100 height=100>

</applet>
Observatie: numele fisierului applet este appletulmeu.class, si se ncarca de la adresa

http://www.serverulmeu.com/appleturi; daca n browser s-a dezactivat ncarcarea appleturilor, se va afisa textul
alternativ Animatie Java; zona de ecran ocupata de applet va fi de 480 pe 84 puncte; appletul primeste un
parametru cu numele viteza cu valoarea 100; daca pagina este afisata de un browser care nu stie sa ruleze
appleturi Java, va fi afisata imaginea animatie.gif, cu atributele specificate.
Pasii pentru realizarea si includerea unui applet n pagina de Web:
1. Scrierea programului (cod sursa) n limbaj Java, si salvarea fisierului cu extensia .java. Puteti gasi
documentatie pentru programare Java la multe adrese, cum ar fi http://java.sun.com, http://www.w3schools.com,
http://www.w3.org, http://www.wdvl.com si altele.
2. Compilarea sursei cu un compilator Java, cel mai folosit fiind javac.exe din pachetul jdk, dar se poate folosi si
Visual Java sau alt compilator.
3. Editarea fisierului HTML pentru includerea perechii de tag-uri <applet> si </applet>, si a tag-urilor si
atributelor aferente.
Flash
Macromedia Flash este un limbaj de programare specific Web-ului. Ca si applet-urile, fisierele .swf pot fi afisate
pe pagini Web, facndu-se referire la ele din fisiere HTML. Acest limbaj este foarte puternic, putndu-se face,
printre altele, animatii atractive, cu fisiere Flash mai mici ca un applet. Statistic, firma Macromedia sustine ca 95%
din browserele instalate stiu sa interpreteze Flash.
Din fericire, programul Macromedia Flash ne permite sa cream aceste module Flash cu ajutorul unor dialoguri. De
fapt, n asta consta puterea si popularitatea lui Flash posibilitatea de creare a unor animatii, fara cunostinte de
programare.
Macromedia Flash contine lectii extinse despre ce si cum se poate crea n Flash. Puteti chiar genera o pagina de test
pentru modulul Flash pe care l-ati creat.
Cnd ati creat o animatie, de exemplu, puteti sa o exportati din Flash, sa zicem sub numele test.swf. Dupa aceea,
puteti crea un fisier HTML care include:
<object width="400" height="300">
<param name="movie" value="test.swf">
<embed src="test.swf" width="400" height="300">
</embed>
</object>
n exemplul de mai sus, tag-ul <object> este recunoscut de Internet Explorer, dar nu este recunoscut de Netscape.
De aceea folosim si tag-ul <embed> (pentru Netscape).
Puteti publica un fisier HTML continnd modulul Flash, direct din Flash. Macromedia Flash va genera un
fisier HTML care include si tag-urile necesare includerii modulului Flash n pagina. Mai mult, include si legaturi
alternative spre interpretorul Flash de pe situl Macromedia, daca browserul care afiseaza pagina nu stie Flash.

CGI
CGI (Common Gateway Interface) este un mecanism prin care clientii (browserele) pot trimite informatii napoi la
server, si serverul poate trimite e-mail clientului cu datele cerute. De obicei, CGI se foloseste pentru procesarea
datelor dintr-un formular trimis de browser, si se specifica n atributul action al unui formular.
Datele din formular sunt trimise la server la apasarea butonului Submit, sub forma unui sir de caractere:
numescript?numevar1=valoarevar1&numevar2=valoarevar2.
n exemplul de mai sus, se trimite serverului numele scriptului CGI care trebuie executat (specificat n atributul
action al formularului), mpreuna cu numele variabilelor si valorile lor din formular. Scriptul de pe server le
primeste si le proceseaza, apoi trimite un mail utilizatorului cu rezultatele. n esenta, scriptul CGI trebuie sa faca
trei lucruri:
sa interpreteze sirul primit ca parametru, si sa scoata din el variabilele si valorile lor (daca este vorba de datele
dintr-un formular);
sa proceseze aceste date;
sa trimita e-mail la o adresa anume, cu datele rezultate din urma procesarii, eventual sa genereze o pagina de
Web.
Scripturile CGI de pe un server se tin, de obicei, n subdirectorul cgi-bin. Majoritatea scripturilor CGI la ora
actuala de pe Internet sunt scrise n limbajul Perl, dar exista scripturi CGI si n C, Java (servlets) si alte limbaje.
Desigur, serverul de Web trebuie sa ofere suport pentru CGI.
Puteti gasi multe scripturi CGI si documentatie la adresele http://www.cgiextremes.com,

http://www.cgiscriptcenter.com, http://www.cgi-resources.com si altele.
SSI
Serverul poate genera dinamic, din zbor, fisiere HTML pe care sa le trimita clientului spre afisare, n functie de
datele trimise/cerute de client. Acest lucru se poate realiza cu SSI (Server-Side Includes). SSI este un limbaj prin
care se poate crea dinamic continutul paginii de Web trimis la client. Nu toate serverele de Web ofera suport pentru
SSI.
De exemplu, pentru a include un antet la fiecare pagina afisata de browser, puteti scrie n fisierul HTML, n corp, la
nceput:
Exemplu:
<pre>

</pre>
Observati sintaxa comenzii SSI: . Cnd un client cere aceasta pagina, serverul
proceseaza comanda si trimite clientului fisierul HTML, dar n locul acestui comentariu (inclusiv < si >),
fisierul HTML va contine textul din antet.txt. Comenzile SSI sunt invizibile la client, deoarece clientul
(browserul) primeste doar rezultatul procesarii acestor comenzi.
Exemplu:

Exemplul de mai sus va include n pagina data ultimei modificari ale fisierului index.html. Serverul, nainte de
trimiterea fisierului HTML spre client, se uita la data ultimei modificari ale fisierului pe harddisc, si include
aceasta data n locul comentariilor. O varianta la exemplul de mai sus, pentru includerea datei ultimei modificari a
fisierului n care este comanda SSI (fisierul curent):


Exista si alte comenzi SSI, puteti sa Fisierele HTML care contin si comenzi SSI au de obicei extensia .shtml; n
acest fel, serverul nu trebuie sa proceseze toate fisierele HTML pe care le trimite, doar cele cu aceasta extensie
speciala.
Gasiti o introducere scurta de SSI la
ASP
ASP Active Server Pages seamana cu SSI, ca idee, dar este mult mai complex. Este caracteristic serverelor de
Web produse de Microsoft. Ca si JavaScript si VBScript, si ASP nseamna scripturi. Diferenta este ca n timp ce
scripturile pe partea de client sunt trimise clientului (de obicei nglobate n HTML), si acesta le proceseaza local,
ASP este procesat de catre server, si numai rezultatele sunt incluse si trimise clientului n fisierul HTML. Fisierele
de pe server care contin cod ASP au de obicei extensia .asp, tocmai pentru a usura munca serverului, ca acesta sa
nu proceseze degeaba toate fisierele care trebuie sa le trimita. Putem folosi mai multe limbaje de script pentru ASP.
Nu toate serverele suporta ASP.
Exemplu:
<html>
<body>
<%
response.write("Text de test.")
%>
</body>
</html>
Exemplul de mai sus este n VBScript (limbajul implicit pentru ASP). La cererea acestei pagini de catre un client,
serverul nlocuieste tag-ul <% %> si ce contine el cu textul Text de test. Observati felul cum sunt introduse
comenzile ASP n sursa HTML ntre <% si %>. Clientul va primi:
<html>
<body>
Text de test.
</body>
</html>
Observati ca clientul primeste doar rezultatul procesarii.
Exemplu:
<%@ language="javascript" %>
<html>
<body>
<%
Response.Write("Hello World!")
%>
</body>
</html>
Exemplul de mai sus face acelasi lucru ca si cel anterior, dar este scris n JavaScript. La nceputul fisierului, se
specifica javascript ca limbajul implicit pentru acest fisier. Daca lucram cu JavaScript, acesta face diferenta ntre
literele mari si mici, nu ca VBScript. Se pot folosi si alte limbaje de script, dar trebuie instalate interpretoarele
aferente pe server (pe client nu este nevoie, deoarece acesta primeste doar rezultatul).
Puteti gasi alte informatii despre ASP la http://www.w3schools.com/asp/default.asp.
PHP
PHP original Personal HomePage, apoi i s-a lipit si eticheta de preprocesor de hipertext. Este un limbaj
asemanator C-ului, si se utilizeaza similar ASP-ului. Este dezvoltare Apache si complet gratuit. Exista interpretoare
de PHP pentru multe servere de Web, chiar si pentru servere produse de Microsoft.
De regula, fisierele HTML care contin cod PHP au extensia .php, sau variante (.php3, .php4, dupa versiunea
de PHP), ca serverul sa le poata deosebi de fisierele HTML inactive (fara cod de program care trebuie procesat de
server).
Exemplu:
<html>
<body>
<?php
echo "Text de test.<br>";
?>
</body>
</html>
Exemplul de mai sus scrie n fisierul HTML Text de test, apoi <br>. Observati modul introducerii comenzii PHP
n sursa HTML, ntre <?php si ?>. Se poate omite php.
Exemplul urmator va prezinta un formular dintr-o pagina de web, si pagina PHP care este accesata la apasarea
butonului Submit:
Formularul din pagina HTML:
<form action="raspuns.php" method="post">
Valoarea de trimis <input type="text" name="val">

<input type="submit">
</form>
Pagina raspuns.php:
<html>
<head>
<title>Pagina de raspuns</title>
</head>
<body>
Valoarea primita este <?php echo $val; ?>.
</body>
</html>
La apasarea butonului Submit n formularul din pagina HTML, browserul trimite raspuns.php?val=textul
serverului, unde textul este textul scris de utilizator n casuta de text. Serverul proceseaza pagina raspuns.php,
folosind datele returnate, adica val=textul; pagina trimisa napoi clientului va contine Valoarea primita este
textul, unde textul este valoarea lui val, adica textul pe care l-a introdus utilizatorul n casuta de text din
formular.
Gasiti documentatie despre PHP la http://www.daholygoat.com, sau

http://www.php.net/tut.php.http://www.phpbuilder.com/getit/,
http://www.hotwired.com/webmonkey/99/21/index2a.html,
http://www.devshed.com/Server_Side/PHP/Introduction/, http://www.htmlwizard.net/resources/tutorials/ sau
http://www.phpbuilder.com/getit/.
Servere de Web
Serverele de Web sunt programe care ruleaza pe un calculator, asculta pentru si servesc cererile clientilor.
Cererile clientilor nseamna ca un browser de pe un calculator din Internet se conecteaza la calculatorul pe care
ruleaza serverul de Web, si i cere un fisier HTML. Serverul ia fisierul de pe harddisc, eventual l proceseaza, si l
trimite clientului, care apoi l proceseaza si l afiseaza. Fisierul HTML implicit este de obicei index.html; de
obicei, cnd va conectati la un site, de exemplu http://www.ccicj.ro, serverul de acolo trimite implicit fisierul
index.html.
Astfel de programe exista n mai multe variante, chiar si gratuite, pe Internet. Unele sunt mai simple, altele mai
complexe; unele suporta SSI, ASP si/sau PHP, altele nu. Unele sunt mai configurabile, altele mai putin.
Un server de Web gratuit pentru Windows 95/98 si Windows NT 4 este PWS, Personal Web Server. Acesta este
inclus n pachetul de instalare Windows 98, n subdirectorul PWS din pachet. Pentru Windows 95 si Windows NT
4, puteti sa aduceti pachetul Windows NT 4 Option Pack de pe situl Microsoft
(http://www.microsoft.com/msdownload/ntoptionpack/askwiz.asp), si sa instalati PWS din el. PWS stie sa lucreze
cu pagini ASP si SSI.
IIS Internet Information Server este serverul de Web standard pentru Windows 2000, sau se poate instala
separat pentru Windows NT Server 4.0. Este foarte puternic si configurabil, cu suport ASP si SSI nglobat.
Un alt server performant, gratuit si standard nescris pentru serverele Linux este Apache. Puteti sa-l aduceti (chiar
si codul sursa al serverului) de la http://www.apache.org. Apache are si versiune Win32 pentru Windows 9x, NT
sau 2K. Este rapid, si suporta SSI, precum si PHP.
Problema cu un server de Web propriu este ca serverul si calculatorul pe care ruleaza, precum si legatura la
Internet trebuie sa fie activa 24/7, adica tot timpul, zi si noapte. O solutie mai ieftina ar fi sa va plasati fisierele
HTML care compun situl, pe un server dedicat, comercial sau gratuit.
Sunt cteva IPP-uri (Internet Presence Provider) comerciale, cum ar fi Dynamic Network Technologies
(http://www.dnt.ro sau http://www.dntcj.ro), Romanian Data Soft (http://www.rds.ro), Astral Telecom (fost Codec,
http://www.astral.ro), Logicnet (http://www.logicnet.ro), XNet (http://www.xnet.ro) si altele. Puteti afla serviciile
oferite, conditiile si preturile acestor firme de pe siturile lor. Vizitati si pagina Asociatiei Nationala a Furnizorilor
de Servicii Internet din Romnia (http://www.anisp.ro).
Gratuite sunt si mai multe, unele dintre cele mai cunoscute internationale fiind Geocities
(http://www.geocities.com) si Homestead (http://www.homestead.com).
Situri romnesti care gazduiesc gratuit paginile dvs. de HTML ar fi Home.ro (http://www.home.ro),
Problema cu siturile gratuite este ca ele pun publicitate nedorita pe pagina dvs. trebuie sa traiasca si ele din
ceva.

Dreamweaver
Crearea unui fisier html / Creating an html file (animatie Flash / Flash animation)
Crearea unui site / Creating a site (animatie Flash / Flash animation)
Creating files in a site (animatie Flash / Flash animation)
Sicronizarea unui site / Syncing a site (animatie Flash / Flash animation); Core FTP mini-sftp-server
(772KB exe)
Lucrul cu Dreamweaver / Working with Dreamweaver (document in format Flash / document in Flash
format)
Crearea unui site PHP/MySQL / Creating a PHP/MySQL site (animatie Flash / Flash animation)
Selectarea datelor / Selecting data (animatie Flash / Flash animation)
Inserarea datelor / Inserting data (animatie Flash / Flash animation)

Page last updated Tuesday, November 21, 2006.
Xampp lite
Pachet xampplite 1.5.4a / xampplite install kit 1.5.4a (arhiva autoextractiva 16 MB / 16 MB self-extracting
archive)
Instalare si configurare xampplite / Installing and configuring xampplite (animatie Flash / Flash animation)
Pornire xampplite / Starting xampplite (animatie Flash / Flash animation)
Utilizare xampplite / Using xampplite (animatie Flash / Flash animation)
Oprirea xampplite / Stopping xampplite (animatie Flash / Flash animation)
Dezinstalare xampplite / Uninstalling xampplite (animatie Flash / Flash animation)
Page last updated Monday, November 13, 2006.
Linie de comanda MySQL / MySQL command line

Utilizare client MySQL la linie de comanda / Using the MySQL client with the command line (animatie
Flash / Flash animation)

phpMyAdmin
Inserarea unor date / Inserting data (animatie Flash / Flash animation)
Exportarea datelor / Exporting data (animatie Flash / Flash animation)
Importarea datelor / Importing data (animatie Flash / Flash animation)

Curs Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curs Web

Uploaded by

Copyright:

Available Formats

Welcome to Google Page Creator

Introducere World Wide Web

Web-ul este un sistem hipertext

Web-ul este distribuit

Web-ul este usor de navigat

Web-ul este inter-platforma

Web-ul este dinamic

Adica se schimba des?

Web-ul este interactiv

Cum functioneaza Web-ul?

Cum acceseaza si afiseaza browserul o pagina?

Exista si browsere n mod text?

Exista asa ceva?

Cui apartine Web-ul? Cine l administreaza? Cine face standardele?

Copyright Enyedi Szilrd.

Exercitiu: gasiti alte elemente HTML n fisierul pagina.htm de mai sus.

Exercitiu: editati din nou fisierul pagina.htm.

Stergeti tag-ul de nchidere </html>. Vizualizati.

Stergeti si tag-ul </body>. Vizualizati. Stergeti si <body>. Vizualizati din nou.

Stergeti si <html> si <head>. Vizualizati. Stergeti </head> si vizualizati din nou.

Atributele apar totdeauna n pereche: numeatribut=valoareatribut.

Copyright Enyedi Szilrd.

Exemplu: <h1>Capitolul I Epoca de piatra</h1>

<h1>Subtitlu de nivel 1</h1><h2>Subtitlu de nivel 2</h2>

Tag-urile de subtitluri pot avea atribute, de exemplu <h1 align=left>Textul</h1>.

Si paragrafele pot avea atribute, aceleasi ca si subtitlurile.

Exercitiu: formatati paragrafele dvs. sa fie aliniate n centrul paginii.

Comentariile nu sunt afisate de catre browser. Un comentariu arata astfel:

Stergeti liniuta de dupa semnul exclamarii. Vizualizati.

Observatie: atributul title se poate folosi la multe tag-uri.

W3C Consortiul WWW

Copyright Enyedi Szilrd.

W3C Consortiul WWW

Copyright Enyedi Szilrd.

Tabelul 1 Tag-uri obisnuite de formatare text

Exercitii: ncercati toate tag-urile de mai sus.

Tabelul 2 Tag-uri pentru formatare text de calculator

Exercitii: ncercati toate tag-urile de mai sus.

Tabelul 3 Tag-uri pentru formatare citate, definitii

Tag-urile de formatare pot fi imbricate.

Exercitiu: scrieti un text care sa fie si ngrosat, si italic.

Exercitiu: introduceti textul de mai jos:

Observati ca se pastreaza sfarsitul de linie, si

chiar si spatiile aditionale.

se folosesc caractere cu latime egala;

nu se continua pe o linie noua liniile prea lungi;

se respecta instructiunile de bidirectionalitate;

Entitati caracter n HTML

Exercitiu: introduceti n sursa HTML textul: &Acirc;&acirc;, fara ghilimele. Vizualizati.

Tabelul 1 Entitatile caracter cele mai folosite

Lista entitatilor HTML

REZULTAT DESCRIERE NUME ENTITATE NUMAR ENTITATE

Entitati simbol ISO 8859-1

REZULTAT DESCRIERE NUME ENTITATE NUMAR ENTITATE

Entitati caracter ISO 8859-1

REZULTAT NUME ENTITATE NUMAR ENTITATE

Alte entitati n HTML

REZULTAT NUME ENTITATE NUMAR ENTITATE

Copyright Enyedi Szilrd.

O legatura HTML are doua parti:

Exemplu: <a href=http://www.ccicj.ro>Camera de comert, industrie si agricultura Cluj</a>

Legaturi la fisiere locale

Exercitiu: introduceti n sursa HTML textul: Ââ, fara ghilimele. Vizualizati.