http://www.ecursuri.

ro/
HTML pe intelesul tuturor
Exista multe programe cu ajutorul carora scrierea codului HTML nu mai este necesara, aceste
programe scriindu-l in locul tau. Insa aceste programe nu fac subiectul acestui curs, iar pentru a
putea construi o pagina web este nevoie cel putin de niste cunostinte elementare de HTML pe care
am incercat sa le explicam in cadrul cursului. ursul de fata se adresea!a, in primul rand, celor
care vor sa invete limbajul HTML, si astfel, prin scrierea codului, sa detina controlul absolut
asupra viitoarei pagini web.
"copul cursului #HTML pe intelesul tuturor# este de a explica, intr-un mod cat mai util si in acelasi
timp placut, notiunile de ba!a ale limbajului HTML si odata cu acestea sa initie!e viitorii
cursanti in te$nica reali!arii unei pagini web. %e parcursul acestui curs, vei gasi foarte multe
exemple, iar in ultima lectie, folosind notiunile invatate, vom reali!a impreuna site-ul unei
gradinite particulare.
Lectiile cursului sunt&
Lectia '& Introducere
Lectia (& "tructura unui document HTML
Lectia )& *espre atribute
Lectia +& *espre culori
Lectia ,& -ormatarea textului
Lectia .& Imagini
Lectia /& Legaturi
Lectia 0& Liste
Lectia 1& Tabele
Lectia '2& adre
Lectia ''& -ormulare
Lectia '(& 3eali!area unui site
'
Lectia nr. 1:
Ce este limbajul HTML?
HTML este prescurtarea de la H4pertext Mar5up Language, ceea ce repre!inta de fapt limbajul pe care
browserele de internet il inteleg si cu ajutorul lui pot fi afisate paginile web. Limbajul HTML nu este
greu de invatat, asa cum te vei putea convinge din acest curs. Este de ajuns sa cunosti tag-urile de ba!a
ale acestui limbaj 6vom vedea mai incolo ce inseamna aceste tag-uri7 pentru a putea crea o pagina web.
%entru aceasta trebuie sa exerse!i cat mai mult, incepand cu exemplele din cadrul cursului 8HTML pe
intelesul tuturor9, sa scrii tu codul pentru fiecare exemplu. In felul acesta vei dobandi foarte
repede cunostintele de ba!a, care te vor ajuta sa cree!i pagini web din ce in ce mai performante.
De ce trebuie sa invat HTML?
:sa cum spuneam, desi exista mai multe programe care au grija de codul HTML atunci cand faci o
pagina web, pentru a usura folosirea lor este nevoie de cel putin cateva notiuni elementare de
HTML.
:ceste programe se numesc editoare HTML si pot fi de doua tipuri& editoare clasice si editoare
de tipul ;<"I;<= 6;$at <ou "ee Is ;$at <ou =et, care se traduce prin ceea ce ve!i este
ceea ce obtii7. In ca!ul celei de-a doua categorii de editoare HTML, utili!atorii nu trebuie decat
sa se ocupe de partea grafica, de ase!area in pagina etc., scrierea codului HTML ramanand in
seama acestor programe. > observatie demna de luat in seama este si aceea ca cele mai bune
editoare HTML nu sunt gratuite.
Invatarea limbajului HTML are trei mari avantaje&
? este foarte simpla si nu necesita mult timp
? ofera controlul absolut asupra reali!arii paginii web
? poti folosi in cadrul paginilor pe care le vei reali!a secvente de cod HTML #imprumutate# de la alte
pagini web 6pentru a vedea codul sursa al unei pagini web, in Internet Explorer intra in meniul
@iew si apoi selectea!a "ource7
Ce trebuie sa stiu pentru a ma apuca sa invat HTML?
Invatarea limbajului HTML este foarte usoara, nu ai nevoie decat de urmatoarele&
? sa stii sa utili!e!i un editor de text 6ex& Aotepad etc.7
? sa ai cel putin un browser de internet 6ex& Microsoft Internet Explorer, Aetscape omunicator etc.7
? sa-ti faci un pic de timp liber 6de exemplu o jumatate de ora pe !i7, pentru a urma cursul de fata si
pentru a scrie tu fiecare exemplu pe care-l vei intalni aici
(
Lectia nr. 2:
Structura unui document HTML
In cadrul acestei lectii vei reali!a primul document HTML, adica prima pagina web.
espre ta!"uri
Tag-urile nu sunt altceva decat niste marcaje sau etic$ete pe care limbajul HTML le foloseste alaturi de
texte pentru a ajuta browser-ul de internet sa afise!e corect continutul paginii web. :ceste tag-
uri 6etic$ete7 pot fi de doua feluri&
- tag-uri perec$e 6un tag de inceput si unul de inc$eiere7. Exemple& #HTML$ si #/HTML$B
#T%TL&$ si #/T%TL&$B #H&'$ si #/H&'$B
- tag-uri singulare 6nu au un tag de inc$eiere7 Exemple& #H($, #)($.
"a vedem tag-urile de ba!a pe care trebuie sa le contina un document HTML&
#HTML$ - cu acest tag incepe orice document HTML. %rin folosirea acestui tag ii spunem browser-
ului ca este vorba de un fisier HTML pentru a il putea afisa.
#H&'$ - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare pentru
browser-ul de internet, informatii pe care le vom descoperi pe parcursul acestui curs.
#/H&'$ - acesta este tag-ul de inc$eiere al tag-ului #H&'$
#T%TL&$ - cu ajutorul acestei perec$i de tag-uri vei putea da un titlu documentului tau. :stfel, textul
pe care il vei scrie intre aceste tag-uri va fi afisat in bara de titlu a documentului.
#/T%TL&$ - este tag-ul de Cnc$eiere al tag-ului #T%TL&$. :rata sfarsitul titlului documentului.
#)*+$ - odata cu acest tag incepe continutul paginii web. Tot ce vei scrie intre tag-urile #)*+$
si #/)*+$ va fi afisat, de catre browser, pe ecranul monitorului.
#/)*+$ - ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea ce vei scrie dupa
acest tag nu va mai fi afisat.
#/HTML$ - este tag-ul de Cnc$eiere al tag-ului #HTML$. odul oricarui document se termina cu
acest tag.
Tag-urile 6etic$etele7 pot fi scrise atat cu litere mari cat si cu litere mici.
'tentie, Au uita atunci cand scrii codul unei pagini web sa inc$i!i toate tag-urile pe care le-ai desc$is.
%entru a fi sigur ca nu uiti incearca sa te obisnuiesti sa scrii dupa fiecare tag si tag-ul de
inc$eiere 6la tag-urile perec$e7, scriind apoi continutul intre ele. > alta solutie pentru a nu uita
sa inc$i!i vreun tag, este sa folosesti la scrierea codului, un editor HTML 6atunci cand vrei sa
folosesti un tag, editorul va scrie automat si tag-ul de inc$eiere7.
Crearea primului document HTML
:cum va trebui sa pui in practica notiunile invatate si sa reali!e!i prima ta pagina web. "a vedem deci,
cum va trebui sa arate aceasta prima pagina. Mai intai trebuie sa desc$i!i editorul de texte
6Aotepad este suficient7.
@om incepe cu tag-ul #HTML$. %entru a nu uita de tag-ul de inc$idere este bine sa-l pui si pe acesta
tot la inceput. In continuare vin tag-urile #H&'$ si #/H&'$. :poi intre cele doua tag-uri
)
vom pune perec$ea de tag-uri #T%TL&$ si #/T%TL&$. Intre aceste tag-uri punem titlul paginii&
%rima mea pagina web. Drmea!a tag-urile #)*+$ si #/)*+$. e vom scrie intre ele va fi
afisat in browserul de internet.
Iata cum ar trebui sa arate codul HTML&
#HTML$
#H&'$
#T%TL&$%rima mea pagina web#/T%TL&$
#/H&'$
#)*+$
Eine ai venitF#)($
@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF#)($
#/)*+$
#/HTML$
:m folosit tag-ul #)($ pentru a trece pe urmatorul rand. :stfel ii spunem browser-ului ca ce va fi
scris dupa tag-ul #)($ va trebui afisat pe urmatorul rand. Tag-ul #)($ nu are un tag de
inc$idere.
*upa ce am scris codul, va trebui sa salvam documentul cu extensia .$tml sau .$tm. *in meniul -ile
alege optiunea "ave :s, iar apoi denumeste documentul asa cum vrei, dar cu una din extensiile
de mai sus. :pasa butonul "ave. :i acum un document $tml, care repre!inta prima ta pagina
web. Intra in fisierul unde ai salvat documentul si desc$ide-l
Inainte de a trece la lectia ), sa recapitulam cu ajutorul exercitiului de mai jos, notiunile invatate in
aceasta lectie.
+
Lectia nr. -:
espre atribute HTML
Ce sunt atributele?
:tributele pot fi definite ca niste proprietati ale tag-urilor. :tributele se pun numai in tag-ul de inceput.
*aca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale
tag-ului respectiv. %entru a intelege mai bine notiunea de atribut sa vedem cateva exemple.
:tributul ).C*L*( care se foloseste cu tag-ul #)*+$ indica ce culoare va avea fondul viitoarei
pagini web. -ondul unei pagini web are in mod implicit culoarea alba, dar sa spunem ca vrem
ca fondul paginii noastre sa fie portocaliu.
In acest ca! vom folosi pentru atributul ).C*L*( codul culorii orange& G--1122 6vei invata in lectia
urmatoare mai multe despre culori7&
HE>*< E=>L>3I#G--1122#J
"a luam codul paginii web din lectia trecuta si sa-i aplicam tag-ului )*+ atributul ).C*L*(.
:cum sa ne ocupam de textul paginii noastre. Mesajul #Eine ai venitF# sa spunem, de exemplu,
ca am vrea sa fie scris cu albastru in loc de negru, care este valoarea implicita si sa fie scris cu
litere mai mari decat restul textului. %entru a scrie astfel textul, vom folosi tag-ul #/*0T$
insotit de unele atribute astfel&
#/*0T C*L*(1234444//2 S%5&1262$
Eine ai venitF
#//*0T$#)($
Textul urmator #@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF#, daca
dorim doar sa aiba culoarea rosie, vom folosi numai atributul C*L*( pentru tag-ul #/*0T$,
restul proprietatilor fiind cele implicite&
#/*0T C*L*(123//44442$
@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF
#//*0T$
:tunci cand vrem sa trasam o linie, folosim tag-ul #H($ care vine de la Hori!ontal 3ule care
inseamna linie ori!ontala. *aca nu ii asociem acestui tag nici un atribut atunci vom obtine o line
ori!ontala cat latimea paginii web.
*aca vrem sa folosim propriile noastre proprietati pentru trasarea unei linii ori!ontale vom apela la
atributele tag-ului #H($. :ceste atribute sunt urmatoarele& 'L%.0 - pentru alinierea liniei,
C*L*( - pentru culoarea liniei, S%5& - pentru grosimea liniei si 7%TH - pentru lungimea
liniei.
%entru a trasa o linie rosie 6C*L*(I#G--2222#7, cu o lungime de jumatate din valoarea implicita
67%THI#,2K#7 si putin mai groasa decat cea implicita 6S%5&I#,K#7 ce va fi aliniata in
centrul paginii 6'L%.0I#center#7, vom folosi urmatoarea linie de cod&
#H( C*L*(123//44442 7%TH128492 S%5&12892 'L%.012center2$
,
cum sa folosim cele doua linii de mai sus in cadrul paginii noastre. %rima linie o vom folosi la sfarsit,
in timp ce a doua linie o vom folosi dupa mesajul #Eine ai venitF#. Aoul cod HTML al paginii
noastre va fi urmatorul&
.
#HTML$
#H&'$
#T%TL&$%rima mea pagina web#/T%TL&$
#/H&'$
#)*+ ).C*L*(123//::442$
#/*0T C*L*(1234444//2 S%5&1262$
Eine ai venitF
#//*0T$#)($
#H( C*L*(123//44442 7%TH122892 S%5&12892 'L%.012le;t2$
#)($
#/*0T C*L*(123//44442$
@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF
#//*0T$
#H($
#/)*+$
#/HTML$
"alvea!a pagina cu ce nume vrei tu. Au uita de extensia .$tml sau .$tm.
/
Lista celor mai utilizate tag-uri impreuna cu atributele lor
In tabelul urmator vor fi pre!entate cele mai utili!ate tag-uri impreuna cu cele mai importante atribute
ale lor&
0
1
'2
''
'(
')
Lectia nr. <:
espre culori HTML
In aceasta lectie vom vorbi despre culori, mai precis despre codurile si numele culorilor. @ei gasi in
sectiunea a treia a lectiei si un tabel cu numele si codurile culorilor cele mai folosite.
Culoarea fondului unei pagini web
:sa cum am va!ut si in lectia precedenta nu trebuie ca fondul paginii tale sa fie alb. %oti opta pentru ce
culoare vrei cu ajutorul atributului ).C*L*( al tag-ului #)*+$.
Tot ce trebuie sa faci este sa cauti in tabelul cu nume si coduri de culori din cadrul acestei lectii, sa
alegi una care-ti place si sa-i scrii numele sau codul in cadrul atributului ).C*L*(. "a
vedem un exemplu&
@reau ca pagina mea sa aiba fondul de culoare desc$isa. %entru a ma decide ma uit la culorile din
tabelul cu nume si coduri de culori. Mi-a atras atentia culoarea aLua care are codul G22----.
:cest cod il scriu in locul celui de la lectia )& in loc de linia&
#)*+ ).C*L*(123//::442$
vom avea urmatoarea linie&
#)*+ ).C*L*(12344////2$
Culoarea textului
uloarea textului in cadrul unei pagini $tml se poate sc$imba folosind atributul C*L*( 6culoare7 al
tag-ului #/*0T$. *e altfel un prim exemplu despre cum putem sc$imba culoarea textului unei
pagini web am va!ut in lectia precedenta.
In lectia ), am ales culorile albastru si rosu pentru text. "a spunem ca vrem ca tot textul sa fie scris cu
albastru inc$is si verde. :tunci in loc de codul culorii albastru 6G2222--7 si respectiv rosu
6G--22227 vom folosi codul G22220E 6albastru inc$is7 si codul G220222 6verde7 in atributul
C*L*( al tag-ului #/*0T$. :stfel codul HTML al paginii noastre va fi urmatorul&
'+
#HTML$
#H&'$
#T%TL&$%rima mea pagina web#/T%TL&$
#/H&'$
#)*+ ).C*L*(12344////2$
#/*0T C*L*(1234444=)2 S%5&1262$
Eine ai venitF
#//*0T$#)($
#H( C*L*(123//44442 7%TH122892 S%5&12892 'L%.012le;t2$
#)($
#/*0T C*L*(12344=4442$
@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF
#//*0T$
#H($
#/)*+$
#/HTML$
"alvea!a pagina cu numele de culori.html. Au uita sa scrii si tu si sa verifici codul HTML al fiecarui
exemplu al acestui curs.
Nume si coduri de culori sigure
In continuare vom vedea ce inseamna culori sigure. "unt acele culori care vor fi afisate de majoritatea
browserele. *aca, de exemplu, pentru fondul paginii tale web ai folosit o anumita culoare, dar
nu ai verificat sa ve!i daca aceasta face parte din culorile sigure, atunci exista posibilitatea ca
unii dintre utili!atorii paginii tale sa vada o cu totul alta culoare.
"a vedem cele mai importante culori care sunt recunoscute de majoritatea browserelor&
',
'.
'/
'0
'1
Lectia nr. 8:
/ormatarea te>tului in HTML
Titluri
:tunci cand avem nevoie sa folosim un titlu in cadrul paginii noastre web putem apela la tag-urile
#H1$, #H2$, #H-$, #H<$, #H8$, #H6$. u ajutorul acestor tag-uri, care au si tag-uri de
inc$eiere, vom scrie titlurile din cadrul paginilor noastre web. :stfel in cadrul codului HTML
vom folosi tag-ul #H1$, de exemplu, urmat de textul titlului, iar la sfarsit vom folosi tag-ul de
inc$eiere #/H1$. Tag-urile #H1$ si #/H1$ permit scrierea unui titlu cu caracterele cele mai
mari in timp ce textul incadrat de tag-urile #H6$ si #/H6$ va fi afisat cu caracterele cele mai
mici, dupa cum urmea!a&
Acesta este un titlu cu <H1>
Acesta este un titlu cu <H2>
Acesta este un titlu cu <H3>
Acesta este un titlu cu <H4>
Acesta este un titlu cu <H5>
Acesta este un titlu cu <H6>
Tag-urile acestea accepta atributul 'L%.0 cu ajutorul caruia titlul va putea fi aliniat la stanga, la
centru sau la dreapta.
Etichete pentru formatarea textului
:m va!ut in sectiunea precedenta cum arata titlurile. In continuare vor fi pre!entate diverse moduri de
formatare a unui text.
%entru alegerea caracteristicilor unui text, putem folosi tag-ul #/*0T$. :cest tag accepta mai
multe atribute 6color, face, si!e7 care ne vor ajuta in formatarea textelor. :tributul C*L*( se
refera la culoarea textului ce va fi incadrat de tag-urile #/*0T$ si #//*0T$, atributul /'C&
arata tipul fontului, iar atributul S%5& arata marimea fontului.
%entru a alege culoarea textului, trebuie sa consulti mai intai tabelul de culori, iar apoi, atunci
cand te-ai $otarat ce culoare vei folosi, sa scrii codul sau numele acelei culori ca valoare a
atributului C*L*(.
*e exemplu, liniile de cod&
#/*0T C*L*(1?Corn;lower)lue?$ecursuri.ro M cursuri online gratuite#//*0T$
(2
sau
#/*0T C*L*(1?36<:8&?$ecursuri.ro M cursuri online gratuite#//*0T$
vor avea urmatorul re!ultat&
ecursuri.ro M cursuri online gratuite
#/*0T C*L*(1?3//4444?$Totul la ecursuri.ro este gratuit#//*0T$
va afisa in cadrul browserului de internet&
Totul la ecursuri.ro este gratuit
La tipul fontului, la fel ca si la culori, este bine sa folosesti un font care se afla pe majoritatea
calculatoarelor, pentru ca daca folosesti un font mai putin utli!at, multi utili!atori nu vor putea
vedea textele din cadrul paginilor tale cu acelasi font. ele mai folosite fonturi pentru paginile
web sunt urmatoarele&
Acest text a fost scris cu fontul "arial"
:cest text a fost scris cu fontul #times new roman#
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
Acest text a fost scris cu fontul "helvetica"
#/*0T C*L*(1?3444444? /'C&1?'rial?$:cest text ...#//*0T$
%entru a sc$imba dimensiunea implicita a fontului, vom folosi una din valorile atributului si!e. :cesta
poate lua una din valorile ',(,),+,,,.,/ 6' pentru cea mai mica dimensiune si / pentru cea mai
mare7&
#/*0T C*L*(1?3//'844? /'C&1?'rial? S%5&1?@?$www.ecursuri.ro#//*0T$
www.ecursuri.ro
Iata si celelalte dimensiuni 6de la . la '7&
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
*aca vrem ca textul nostru sa fie scris cu caractere ingrosate, folosim perec$ea de etic$ete #)$ si
#/)$.
('
#)$Text bold#/)$
Text bold
%entru ca textul sa fie scris cu caractere italice, folosim perec$ea de etic$ete #%$ si #/%$.
Text italic
%entru ca textul sa fie subliniat, folosim perec$ea de etic$ete #A$ si #/A$.
Text subliniat
*aca vrem ca textul sa fie afisat in centrul paginii putem folosi perec$ea de etic$ete #C&0T&($ si
#/C&0T&($.
#C&0T&($Text centrat#/C&0T&($
Text centrat
:tunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat pe mai multe randuri vom folosi
unul din tag-urile #)($ sau #B$. Tag-ul #)($ nu are tag de inc$eiere, in timp ce tag-ul #B$
are tag de inc$eiere, insa nu este obligatoriu.
Tag-ul #)($ vine de la line brea5 6intrerupere de linie7 si l-am mai folosit in cadrul acestui
curs. :sa cum am va!ut si pana acum este folosit pentru a face trecerea de la o linie la alta.
:stfel sa presupunem ca avem urmatorul cod HTML&
#HTML$
#H&'$
#T%TL&$Etic$eta HE3J#/T%TL&$
#/H&'$
#)*+$
Invat limbajul HTML. Exerse! limbajul HTML. "tiu limbajul HTML.
#/)*+$
#/HTML$
:cest cod va avea ca re!ultat&
Invat limbajul HTML. Exerse! limbajul HTML. "tiu limbajul HTML.
:cum sa folosim etic$eta #)($ in cadrul codului&
#HTML$
#H&'$
#T%TL&$Etic$eta HE3J#/T%TL&$
#/H&'$
#)*+$
Invat limbajul HTML.#)($Exerse! limbajul HTML.#)($"tiu limbajul HTML.
#/)*+$
#/HTML$
Iata diferenta&
Invat limbajul HTML.
Exerse! limbajul HTML.
((
"tiu limbajul HTML.
()
Tag-ul #B$ vine de la cuvantul paragraf si se deosebeste de tag-ul #)($ prin faptul ca prin utili!area
lui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre texte. "a revenim la
exemplul de mai sus. "e vor folosi ambele tag-uri, #)($ si #B$, pentru a se vedea diferenta
dinre ele.
#HTML$
#H&'$
#T%TL&$Etic$eta HE3J#/T%TL&$
#/H&'$
#)*+$
Invat limbajul HTML.#)($Exerse! limbajul HTML.#B$"tiu limbajul HTML.
#/)*+$
#/HTML$
3e!ultatul va fi&
Invat limbajul HTML.
Exerse! limbajul HTML.
"tiu limbajul HTML.
*aca scriem un text intre tag-urile #B$ si #/B$, atunci textul va fi incadrat de cate un rand liber,
la fel ca in exemplul de mai jos&
#HTML$
#H&'$
#T%TL&$Etic$eta HE3J#/T%TL&$
#/H&'$
#)*+$
Invat limbajul HTML.#B$Exerse! limbajul HTML.#/B$"tiu limbajul HTML.
#/)*+$
#/HTML$
@om obtine urmatorul re!ultat&
Invat limbajul HTML.
Exerse! limbajul HTML.
"tiu limbajul HTML.
Utilizarea caracterelor speciale
Iti mai aduci aminte de prima ta pagina web pe care ai facut-o in cadrul acestui cursN
*upa cum ve!i, textul nu este scris cu diacriticele specifice limbii romane. 6O, C, P, Q etc.7. %entru
a folosi si aceste litere trebuie sa scriem o anumita combinatie de diverse caractere pentru ca
browserul sa citeasca diacriticele.
(+
Iata in continuare codurile HTML pentru cele mai folosite caractere si simboluri, care nu se
gasesc pe tastatura calculatorului&
(,
:cum dupa ce am va!ut codurile pentru diverse caractere pe care le vom folosi in cadrul paginilor
noastre web, sa vedem cum arata codul paginii noastre de la inceput, daca textul va fi scris cu
diacritice&
#HTML$
#H&'$
#T%TL&$%rima mea pagina web#/T%TL&$
#/H&'$
#)*+$
Eine ai venitF#)($
@om RG()0nvRG(,1RG),,Ba RG()0mpreunRG(,1 limbajul HTML.
:ceasta este prima mea paginRG(,1 webF
#/)*+$
#/HTML$
Exercitiu&
"crie codul unei pagini web care sa contina urmatorul text 6scris cu diacritice7&
Eine ai venit pe site-ul www.ecursuri.ro, un site care CQi oferO aproape tot ce ai nevoie pentru
a CnvOQa online. Toate cursurile, referatele Pi jocurile sunt gratuite. Sn speranQa cO, prin
intermediul cOrQii de oaspeQi, ne vei aprecia, ne vei lOuda sau ne vei critica, vom Cncerca sO ne
perfecQionOm pe !i ce trece.
%entru a alinia un text folosim codul RnbspB 6spatiu7 de cateva ori.
%entru a te verifica, alege din fereastra browser-ului din meniul @iew optiunea "ource
(.
Lectia nr. .&
HTML " ima!ini
%ana acum ai invatat cum sa folosesti decat texte si culori in cadrul paginilor web. In aceasta lectie vei
invata despre imagini, care alese cu grija, vor da un plus design-ului paginilor tale.
Formatele imaginilor
Erowserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. ele mai raspandite
sunt cele cu extensia .gif si cele care au una din terminatiile .jpg sau .jpeg. Iata in continuare
cateva caracteristici ale acestor formate de imagini&
=I- 6=rap$ics Interc$ange -ormat7
-ormatul =I- poate reda un numar de (,. de culori, de aceea este folosit pentru imaginile de
dimensiuni mici& butoane, icon-uri, animatii.
Eutoane&

buton'.gif
marime& 0//
b4tes
buton(.gif
marime& 1(,
b4tes
buton).gif
marime& 1('
b4tes
Icon-uri&

icon'.gif
marime& )).
b4tes
icon(.gif
marime& (+,
b4tes
icon).gif
marime& +2'
b4tes
:nimatii&

animatie.gif
marime& 1,(/
Tb

(/
U%E= 6Uoint %$otograp$ic Expert =roup7
-ormatul U%E= nu mai este limitat la (,. de culori si de aceea este folosit pentru fotografii. Imaginile
care apartin acestui format au extensia .jpg sau .jpeg.
po!a.jpg
marime& .,+, Tb
po!a.gif
marime& '(,1 Tb
"e observa ca in ca!ul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si ocupa un spatiu
mult mai mic decat daca am fi salvat aceeasi imagine in formatul gif.
Adaugarea imaginilor in paginile web
:sa cum ai va!ut, la majoritatea site-urilor, imaginile dau o nota aparte paginilor web. %entru a folosi
imagini si in cadrul paginilor tale web trebuie sa folosesti tag-ul #%M.$ insotit de atributul
S(C 6source7 care indica adresa sau calea catre imaginea pe care vrei sa o folosesti.
-orma generala a acestui tag va fi&
#%M. S(C12numeleimaginii.extensie2$
F :tentie la extensie. Au uita sa scrii si extensia imaginii pentru ca altfel imaginea nu va fi
afisata de browser.
Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele 6pagini HTML, imagini etc.7 in
cadrul aceluiasi folder. *aca vei folosi in codul HTML al paginilor site-ului tau linia de cod de
mai sus, imaginea va fi afisata doar daca pagina respectiva va fi in acelasi folder cu imaginea pe
care vrei sa o folosesti. In ca! contrar imaginea nu va fi afisata.
"a scriem codul unei pagini web care sa contina o imagine. "alvea!a imaginea de mai jos 6clic5
dreapta, "ave %icture :s7 sub numele de bebe.jpg in acelasi folder cu pagina web pe care o vom
face in continuare.
(0
:cum sa vedem codul HTML&
#HTML$
#H&'$
#T%TL&$Imagini#/T%TL&$
#/H&'$
#)*+$
#C&0T&($#)$:dRG(,1ugarea imaginilor RG()0n paginile web#/)$
#)($
#%M. S(C1bebe.jpg$
#/C&0T&($
#/)*+$
#/HTML$
"alvea!a pagina cu numele imagini.$tml.
*aca site-ul tau va avea multe fisiere, nu mai este o solutie sa le tii pe toate in acelasi folder. In
acest ca!, este bine sa grupam fisierele de acelasi tip in subfoldere. :stfel in folderul "ite, de
exemplu, vom avea un subfolder %o!e, in care vor fi salvate toate imaginile site-ului, un
subfolder %agini in care vor fi salvate toate paginile HTML si asa mai departe.
Iata cum ar arata structura site-ului&
%entru o functionare corecta vom utili!a una din urmatoarele linii de cod prin care ii vom spune
browser-ului ca imaginea se afla in folder-ul %o!e&
#%M. S(C1?..V%o!eVbebe.jpg?$
- daca pagina va fi salvata in subfolderul %agini si imaginea va fi in subfolderul %o!e.
(1
#%M. S(C1?%o!eVbebe.jpg?$
- daca pagina va fi salvata in folderul "ite si imaginea va fi in subfolderul %o!e.
Incearca si tu&
'. -a un folder pe care denumeste-l "ite.
(. In cadrul acestuia mai fa doua subfoldere& %agini, respectiv %o!e.
). opia!a imaginea bebe.jpg in folderul %o!e.
+. Modifica in codul HTML de mai sus linia&
#%M. S(C1?bebe.jpg?$
cu linia&
#%M. S(C1?..V%o!eVbebe.jpg?$
,. "alvea!a pagina in folderul %agini cu numele imagini.html.
.. *ublu clic5 pe imagini.html din folder-ul %agini.
*aca totul a functionat bine ar trebui sa obtii aceeasi pagina web.
*aca vrei ca imaginea sa fie incadrata de un c$enar, foloseste atributul )*(&( al tag-ului
#%M.$. :cest atribut are ca valoare numere intregi po!itive.
#%M. S(C1?..V%o!eVbebe.jpg? )*(&(18$
*aca imaginea va fi de dimensiuni mai mari, atunci pana cand se va incarca si va fi afisata de
browser, utili!atorul poate vedea un text inlocuitor al imaginii. :cest lucru se poate reali!a
folosind atributul 'LT impreuna cu tag-ul #%M.$.
*aca trecem cursorul mouse-ului deasupra imaginii, o sa apara textul pe care l-am scris la
atributul 'LT.
*e exemplu, la pagina de mai sus, imagini.$tml, vom inlocui linia&
#%M. S(C1?..V%o!eVbebe.jpg? )*(&(18$
cu linia&
#%M. S(C1?..V%o!eVbebe.jpg? )*(&(18 'LT1?Imagine bebe?$
Folosirea imaginilor alaturi de texte
%entru a alinia o imagine vom folosi atributul 'L%.0 al tag-ului #%M.$. :tributul 'L%.0 poate
avea una dintre valorile& left sau right, aliniere la stanga sau la dreapta paginii.
"alvea!a imaginea de mai jos 6clic5 dreapta, "ave %icture :s7 cu numele de euro.jpg in folder-
ul %o!e.
)2
:cum sa scriem codul HTML al unei pagini web care va contine si text in jurul imaginii&
#HTML$
#H&'$
#T%TL&$ED3> (22+#/T%TL&$
#/H&'$
#)*+$
#/*0T C*L*(1?34444//? /'C&1?Times 0ew (oman?$
#C&0T&($#)$Istoria campionatului european de fotbal#/)$#/C&0T&($
#//*0T$#)($
#%M. S(C12../BoCe/euro.jp!2 )*(&(18 'L%.01le;t$
#/*0T C*L*(123//44442 /'C&1?'rial?$
%rima ediRG),,Bie a campionatului european de fotbal a avut loc RG()0n -ranRG),,Ba
RG()0n anul '1.2, iar cRG((.RG),'BtigRG(,1toare a fost 3usia. DrmRG(,1torul turneu
european a avut loc RG()0n anul '1.+ RG()0n "pania, acolo unde s-a impus RG),,Bara
ga!dRG(,1. %atru ani mai tRG((.r!iu, RG()0n '1.0, RG()0n Italia, a fost rRG((.ndul
acesteia sRG(,1 cRG((.RG),'Btige trofeul. RG(2.n '1/( organi!atoare a fost Eelgia,
3epublica -ederalRG(,1 =ermanRG(,1 impunRG((.ndu-se. RG(2.n '1/. a venit
rRG((.ndul e$oslovaciei sRG(,1 cRG((.RG),'Btige campionatul european de fotbal,
disputat RG()0n Iugoslavia. RG(2.n '102, =ermania a fost cRG((.RG),'BtigRG(,1toare,
RG()0n Italia, iar RG()0n '10+, ediRG),,Bie gRG(,1!duitRG(,1 de -ranRG),,Ba, din nou s-a
impus RG),,Bara organi!atoare. EdiRG),,Bia din anul '100 a avut loc RG()0n =ermania
RG),'Bi a fost cRG((.RG),'BtigatRG(,1 de >landa. *upRG(,1 patru ani, *anemarca se
impunea RG()0n "uedia, pentru ca dupRG(,1 alRG),,Bi patru ani, RG()0n '11., sRG(,1 fie
rRG((.ndul =ermaniei sRG(,1 RG()0RG),'Bi adjudece trofeul, RG()0n :nglia. RG(2.n anul
(222 Eelgia RG),'Bi >landa au organi!at turneul final, iar cRG((.RG),'BtigRG(,1toare a fost
-ranRG),,Ba. Dltimul turneu final, care s-a disputat RG()0n %ortugalia, RG()0n (22+, a
fRG(,1cut ca =recia sRG(,1 cRG((.RG),'Btige trofeul.#//*0T$ #)($
#/)*+$
#/HTML$
"alvea!a pagina cu numele de euro.$tml in folderul %agini.
:sa cum ai observat, textul este afisat in jurul imaginii. *aca vrei ca textul sa fie afisat la o
anumita distanta de imagine, foloseste atributele HSB'C& 6spatiu pe ori!ontala7 si DSB'C&
6spatiu pe verticala7. @alorile acestor atribute trebuie sa fie numere intregi, care repre!inta de
fapt distanta in pixeli dintre imagine si text. *e exemplu inlocuieste, in codul de mai sus, linia&
#%M. S(C1?..V%o!eVeuro.jpg? )*(&(18 'L%.01?le;t?$
cu urmatoarea&
)'
#%M. S(C1?..V%o!eVeuro.jpg? )*(&(18 'L%.01?le;t? HSB'C&184 DSB'C&124$
"alvea!a pagina cu numele euro(.$tml in folder-ul %agini.
-oloseste diferite valori pentru atributele HSB'C& si DSB'C& pana cand vei obtine re!ultatele dorite.
magini ca fond al unei pagini web
u ajutorul atributului )'CE.(*A0 al tag-ului #)*+$ poti folosi o imagine ca fond al unei
pagini web. %entru a intelege mai bine, copia!a imaginile urmatoare 6clic5 dreapta, iar apoi
"ave %icture :s7 in folder-ul %o!e cu numele scrise sub fiecare.
bac5ground'.jpg bac5ground(.jpg bac5ground).jpg bac5ground+.jpg bac5ground,.jpg
:cum in codul paginii imagini.$tml din folder-ul %agini adauga tag-ului #)*+$ atributul
)'CE.(*A0 dupa cum urmea!a&
#)*+ )'CE.(*A01?..V%o!eVbac5ground'.jpg?$
"alvea!a pagina cu numele bac5ground'.$tml.
3epeta operatiunea de mai sus, numai ca in loc de bac5ground'.jpg foloseste pe rand unul din
numele celorlalte imagini.
)(
Lectia nr. @:
Crearea le!aturilor in HTML
Aavigarea in cadrul site-urilor este posibila cu ajutorul lin5-urilor 6legaturilor7. In aceasta lectie vei
invata cum sa folosesti diferite tipuri de legaturi in cadrul site-ului tau.
Legatura catre o alta pagina
%entru a folosi legaturi, trebuie sa folosesti perec$ea de tag-uri #'$ si #/'$. Aumele acestor tag-uri
vine de la cuvantul anc$or care se traduce ancora. Tag-ul #'$ va trebui folosit impreuna cu
atributul H(&/. Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web va avea
urmatoarea forma&
#' H(&/1numelepa!inii.html$Textul legaturii#/'$
*aca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu sunt
necesare g$ilimelele. "a vedem impreuna, cum poti adauga o legatura intr-o pagina web din
folderul %agini catre pagina imagini.$tml din acelasi folder. *esc$ide editorul de texte 6de
exemplu& Aotepad7 si scrie urmatorul cod HTML&
#HTML$
#H&'$
#T%TL&$Legaturi#/T%TL&$
#/H&'$
#)*+$
#C&0T&($#)$LegRG(,1turRG(,1 cRG(,1tre o altRG(,1 paginRG(,1 #/)$
#)($#)($
#' H(&/1ima!ini.html$Imagine bebe#/'$
#/C&0T&($
#/)*+$
#/HTML$
"alvea!a pagina 6-ileV"ave :s7 cu numele de lin5.$tml in folderul %agini.
*aca pagina catre care vrem sa facem o legatura, nu se afla in acelasi folder cu pagina noastra atunci nu
mai putem folosi decat numele paginii HTML ca valoare a atributului H(&/. "a vedem cateva
exemple de legaturi catre pagini din alte directoare sau subdirectoare. -ie urmatoarea structura&
))
%entru a intelege cat mai bine cum functionea!a legaturile catre diverse pagini web, este bine sa faci si
tu, pe calculatorul tau, o structura asemanatoare cu cea de mai sus, iar apoi sa faci cateva pagini
HTML in diverse directoare sau subdirectoare si sa incerci sa cree!i legaturi din fiecare pagina
HTML catre celelate. Iata cateva exemple&
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul ontabilitate catre o
pagina HTML din directorul -irma ', vom folosi urmatoarea valoare a atributului H(&/&
#' H(&/12/irma 1/numelepa!inii.html2$Text lin5#/'$
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul "ite catre o pagina
HTML din directorul arti, vom folosi urmatoarea valoare a atributului H(&/&
#' H(&/12ocumente/Carti/numelepa!inii.html2$Text lin5#/'$
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o
pagina HTML din directorul "coala, vom folosi urmatoarea valoare a atributului H(&/&
#' H(&/12../numelepa!inii.html2$Text lin5#/'$
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Eilanturi catre o pagina
HTML din directorul "ite, vom folosi urmatoarea valoare a atributului H(&/&
#' H(&/12../../numelepa!inii.html2$Text lin5#/'$
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul "ervici catre o pagina
HTML din directorul Matematica, vom folosi urmatoarea valoare a atributului H(&/&
#' H(&/12../../Scoala/Matematica/numelepa!inii.html2$Text lin5#/'$
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul -irma ( catre o pagina
HTML din directorul -irma ), vom folosi urmatoarea valoare a atributului H(&/&
#' H(&/12..//irma -/numelepa!inii.html2$Text lin5#/'$
Legatura catre un site
*upa ce ai va!ut cum se folosesc legaturile catre alte pagini $tml locale acum vom vedea impreuna
cum putem adauga o legatura catre un site particular. Trebuie sa folosesti urmatoarea linie de
cod&
)+
#' H(&/12adresa site"ului2$Textul legaturii#/'$
"a facem o pagina web care sa contina legaturi catre site-uri ale unor !iare din 3omania. "crie
urmatorul cod HTML&
#HTML$
#H&'$
#T%TL&$Legaturi catre site-uri particulare#/T%TL&$
#/H&'$
#)*+$
#C&0T&($
#)$LegRG(,1turi cRG(,1tre site-urile unor !iare din 3omRG((.nia #/)$
#/C&0T&($
#)($#' H(&/12http://www.eFC.ro2$Evenimentul Wilei#/'$
#)($#' H(&/12http://www.jurnalul.ro2$Uurnalul AaRG),,Bional#/'$
#)($#' H(&/12http://www.capital.ro2$apital#/'$
#)($#' H(&/12http://www.prosport.ro2$%rosport#/'$
#)($#' H(&/12http://www.!sp.ro2$=a!eta sporturilor#/'$
#)($#' H(&/12http://www.libertatea.ro2$Libertatea#/'$
#)($
#/)*+$
#/HTML$
"alvea!a pagina cu numele de !iare.$tml in directorul %agini.
:sa cum ai observat pana acum, atunci cand dai clic5 pe una dintre legaturile din paginile
pre!entate ca exemple, se desc$ide o pagina HTML in aceeasi fereastra a browser-ului, peste
pagina ce contine legatura. %entru a desc$ide o noua fereastra a browser-ului atunci cand se da
clic5 pe o legatura trebuie folosit atributul T'(.&T caruia i se atribuie valoarea 2GblanH2.
"a vedem un exemplu& sa sc$imbam codul paginii !iare.$tml astfel incat site-ul fiecarui !iar sa
se desc$ida intr-o noua fereastra, atunci cand se va efectua un clic5 pe legatura catre acesta.
*aca in plus vrei ca, atunci cand utili!atorii paginii tale web vor trece cursorul mouse-ului
deasupra legaturilor, sa apara o mica nota explicativa, trebuie sa folosesti atributul T%TL&. a
valoare a acestui atribut trebuie sa scrii textul care vrei sa apara atunci cand se va trece cursorul
mouse-ului deasupra legaturii respective. %entru a intelege mai bine iata cum va arata codul
paginii !iare.$tml dupa adaugarea atributelor T'(.&T si T%TL& pentru fiecare legatura&
#HTML$
#H&'$
#T%TL&$Legaturi catre site-uri particulare#/T%TL&$
#/H&'$
#)*+$
#C&0T&($
#b$LegRG(,1turi cRG(,1tre site-urile unor !iare din 3omRG((.nia #/b$
#/C&0T&($
),
#)($#' H(&/12http://www.eFC.ro2 T'(.&T12GblanH2 T%TL&125iarul &Fenimentul
5ilei2$Evenimentul Wilei#/'$
#)($#' H(&/12http://www.jurnalul.ro2 T'(.&T12GblanH2 T%TL&125iarul Iurnalul
0aJ3-88Kional2$Uurnalul AaRG),,Bional#/'$
#)($#' H(&/12http://www.capital.ro2 T'(.&T12GblanH2 T%TL&125iarul
Capital2$apital#/'$
#)($#' H(&/12http://www.prosport.ro2 T'(.&T12GblanH2 T%TL&125iarul
Brosport2$%rosport#/'$
#)($#' H(&/12http://www.!sp.ro2 T'(.&T12GblanH2 T%TL&125iarul .aCeta
Sporturilor2$=a!eta sporturilor#/'$
#)($#' H(&/12http://www.libertatea.ro2 T'(.&T12GblanH2 T%TL&125iarul
Libertatea2$Libertatea#/'$
#)($
#/)*+$
#/HTML$
"alvea!a pagina cu numele !iare.$tml peste pagina existenta.
Legatura catre o sectiune de pagina
:tunci cand avem de-a face cu pagini mai lungi, putem imparti aceste pagini in mai multe sectiuni
catre care sa adaugam cate o legatura la inceputul paginii pentru ca utili!atorii sa ajunga mai
repede la sectiunea care ii interesea!a. Dn bun exemplu pentru o astfel de pagina il repre!inta
paginile care contin intrebarile frecvente 6-recventl4 :s5ed Xuestions7. -iecare titlu al sectiunii
trebuie definit ca ancora&
#' 0'M&123ancora12$Titlul primei sectiuni#/'$
#' 0'M&123ancora22$Titlul sectiunii a doua#/'$
#' 0'M&123ancora-2$Titlul sectiunii a treia#/'$
Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma&
#' 0'M&123ancora12$Legatura catre prima sectiune#/'$
#' 0'M&123ancora22$Legatura catre a doua sectiune#/'$
#' 0'M&123ancora-2$Legatura catre a treia sectiune#/'$
Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma&
#' 0'M&12numelepa!inii.html3ancora12$Legatura catre prima sectiune#/'$
#' 0'M&12numelepa!inii.html3ancora22$Legatura catre a doua sectiune#/'$
#' 0'M&12numelepa!inii.html3ancora-2$Legatura catre a treia sectiune#/'$
:tentieF %entru crearea corecta a legaturilor catre alte pagini HTML, ve!i sectiunea Legatura
).
catre o alta pagina, din cadrul acestei lectii.
%entru a intelege mai bine cum functionea!a legaturile catre sectiunile paginilor, sa scriem
impreuna codul unei pagini cu mai multe sectiuni&
#HTML$
#H&'$
#T%TL&$Legatura catre o sectiune de pagina#/T%TL&$
#/H&'$
#)*+$
#)($#)($#)($#)($#)($#)($
#C&0T&($#)$RG(2.ntrebRG(,1ri frecvente#/)$#/C&0T&($
#)($#)($#)($#)($#)($#)($
#' H(&/123intrebarea12$'. e pot gRG(,1si pe site-ul ecursuri.roN
#/'$#)($#)($#)($
#' H(&/123intrebarea22$(. e este un curs onlineN#/'$#)($#)($#)($
#' H(&/123intrebarea-2$). *e ce sRG(,1 RG()0nvRG(,1RG),,B onlineN
#/'$#)($#)($#)($#)($
#H($#)($#)($#)($#)($#)($
#/*0T C*L*(123//::442 S%5&12-2 /*0T12'rialL Times 0ew (oman2$
#' 0'M&123intrebarea12$'. e pot gRG(,1si pe site-ul ecursuri.roN#/'$#//*0T$#)($
#)($
RnbspB RnbspB RnbspB"ite-ul ecursuri.ro RG()0RG),'Bi propune sRG(,1 ofere vi!itatorilor
sRG(,1i cRG((.t mai multe resurse pentru a RG()0nvRG(,1RG),,Ba online. RG(2.n aces
moment, pe site, sunt disponibile peste (2 de cursuri online, din diverse domenii, dar cu ajutorul
vostru sperRG(,1m ca numRG(,1rul acestora sRG(,1 creascRG(,1.#)($
RnbspB RnbspB RnbspB %e lRG((.ngRG(,1 cursurile online vei gRG(,1si, RG()0n cadrul
site-ului nostru, mai mult de '222 de referate RG),'Bi peste '22 de jocuri online.
#)($#)($#)($#)($#)($#)($#)($#)($ #)($#)($ #)($#)($ #)($#)($
#/*0T C*L*(123//::442 S%5&12-2 /*0T12'rialL Times 0ew (oman2$
#' 0'M&123intrebarea22$(. e este un curs onlineN#/'$#//*0T$#)($#)($
RnbspB RnbspB RnbspBDn curs online presupune ca toate materialele necesare,
sRG(,1 fie disponibile pe internet. :RG),'Badar, viitorii cursanRG),,Bi vor avea la
dispo!iRG),,Bie toate resursele necesare pentru RG()0nvRG(,1RG),,Bat, la fel ca RG),'Bi
RG()0n ca!ul unui curs tradiRG),,Bional, singura deosebire fiind cRG(,1 totul se petrece
online.
#)($#)($#)($#)($#)($ #)($#)($#)($ #)($#)($#)($#)($#)($ #)($
#/*0T C*L*(123//::442 S%5&12-2 /*0T12'rialL Times 0ew (oman2$
#' 0'M&123intrebarea-2$). *e ce sRG(,1 RG()0nvRG(,1RG),,B onlineN#/'$
#//*0T$#)($ #)($
RnbspB RnbspB RnbspBursurile online pre!intRG(,1, indiscutabil, foarte multe avantaje
faRG),,BRG(,1 de alte tipuri de cursuri. RG(2.n primul rRG((.nd cursurile online pot fi
consultate oricRG((.nd, ele fiind disponibile non stop pe internet. Dn lucru extrem de
important RG()0n alegerea unui curs online este RG),'Bi preRG),,Bul scRG(,1!ut al
unui astfel de curs comparativ cu preRG),,Burile cursurilor tradiRG),,Bionale. RG(2.n ca!ul
cursurilor pre!ente pe site-ul ecursuri.ro, acestea sunt '22K =3:TDITE.
#)($#)($#)($#)($#)($#)($ #)($#)($#)($ #)($
#)($#)($#)($#)($#)($#)($ #)($#)($#)($ #)($
#/)*+$
#/HTML$
)/
"alvea!a pagina cu numele intrebari.$tml in directorul %agini.
Legatura catre o adresa de e-mail
*aca vrei ca utili!atorii paginii tale web sa iti poata scrie parerile lor despre site, de exemplu, atunci
trebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail. um faci astaN -oarte
simplu. -orma generala a unei legaturi catre o adresa de e-mail este urmatoarea&
#' H(&/12mailto:adresa de e"mail2$Trimite-mi un e-mail#/'$
In codul HTML al paginii intrebari.$tml adauga inainte de linia de cod ce contine etic$eta de
inc$eiere #/)*+$, urmatoarea secventa de cod&
#)($#)($#)($#/*0T /'C&12'rial2 C*L*(123//::442$
%entru a afla rRG(,1spunsul la alte RG()0ntrebRG(,1ri, trimite un mail la&
#//*0T$
#' H(&/12mailto:contactMecursuri.ro2 T%TL&12acJ328: Frei sJ328: pui o
J32-=ntrebare nu eCita sJ328: o ;aci2$%RG(,1rerea ta#/'$#)($
"alvea!a pagina intrebari.$tml peste cea existenta.
Utilizarea unei imagini ca legatura
%entru a folosi o imagine ca legatura intre tag-urile #'$ si #/'$, va trebui scrisa adresa imaginii&
H: H3E-Inumepagina.$tmlJHIM= "3I#adresaimaginii#HV:J
"a vedem un exemplu. opia!a imaginea de mai jos 6clic5 dreapta, "ave %icture :s7 in directorul %o!e
cu numele de intreb.jpg.
:cum sa scriem codul unei pagini web care sa foloseasca aceasta imagine ca legatura catre pagina
intrebari.$tml. *esc$ide editorul de texte si scrie codul urmator&
)0
#HTML$
#H&'$
#T%TL&$-olosirea unei imagini ca legatura#/T%TL&$
#/H&'$
#)*+$
#C&0T&($#H1$Imagini ca legRG(,1turi#/H1$
#)($#)($
#' H(&/1intrebari.html$#%M. S(C12../BoCe/intreb.jp!2$#/'$
#/C&0T&($
#/)*+$
#/HTML$
"alvea!a pagina cu numele lin5img.$tml in directorul %agini.
Cum pot schimba culorile legaturilor?
-iecare legatura din cadrul unei pagini web are trei culori&
? o culoare pentru legaturile nevi!itate 6nu a fost efectuat nici un clic5 pe ele7
? o culoare pentru legaturile vi!itate 6s-a efectuat cel putin un clic5 pe ele7
? o culoare pentru legaturile active 6atunci cand cursorul mouse-ului se afla deasupra lor7
%entru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului #/)*+$ cu
ajutorul caruia putem sc$imba culoarea implicita&
? L%0E pentru legaturile nevi!itate
? DL%0E pentru legaturile vi!itate
? 'L%0E pentru legaturile active
-iecarui atribut i se va atribui un nume de culoare sau codul unei culori. "pre exemplu daca vrei
ca in cadrul paginii tale web, legaturile sa fie de culoare rosie atunci cand nu au fost vi!itate, de
culoare neagra cele vi!itate si de culoare portocalie atunci cand se trece cu mouse-ul pe
deasupra lor, trebuie sa folosesti urmatoarea linie de cod&
HE>*< LIATI9G--22229 @LIATI9G2222229 :LIATI9--1.229J
%entru a folosi culorile preferate pentru legaturile paginilor tale nu trebuie decat sa inlocuiesti in
linia de mai sus, codurile, cu cele ale culorilor dorite.
)1
Lectia nr. =:
Crearea listelor in HTML
In aceasta lectie vei invata cum poti folosi listele in pagina ta web. Listele pe care le poti crea cu
ajutorul limbajului HTML sunt de urmatoarele tipuri& liste neordonate, liste ordonate si liste de
definitii. "a le luam pe rand.
Liste neordonate (UL)
Inainte de vorbi despre listele neordonate sa vedem, mai intai, cum arata una&
-irma noastra va ofera urmatoarele servicii&
printare
printare
indosariere
xerox
te$noredactare
%entru a putea face o lista neordonata trebuie sa folosim tag-urile #AL$ si #/AL$. 6denumirea acestor
tag-uri vine de la #unordered list# care inseamna in limba engle!a lista neordonata7. -iecare
element al listei trebuie introdus de tag-ul #L%$. a sa intelegi mai bine sa vedem impreuna
cum arata codul HTML pentru lista de mai sus.
#HTML$
#H&'$
#T%TL&$Liste neordonate#/T%TL&$
#/H&'$
#)*+$
#AL$-irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
#L%$printare
#L%$laminare
#L%$RG()0ndosariere
#L%$xerox
#L%$te$noredactare
#/AL$
#/)*+$
#/HTML$
"alvea!a pagina cu numele de liste'.$tml in directorul %agini
u ajutorul atributului T+B&, putem sc$imba cercul plin din fata fiecarui element. :cesta este
folosit in mod implicit atunci cand folosim o lista neordonata. :stfel, prin atribuirea unei valori
+2
atributului T+B&, vom putea face ca elementele listei sa fie precedate de un patrat sau de un
cerc gol.
%entru a vedea re!ultatele, inlocuieste linia a .-a din codul HTML de mai sus cu una din
urmatoarele linii de cod&
pentru cercuri goale&
#AL T+B&1circle$ -irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
"alvea!a pagina cu numele de liste(.$tml in directorul %agini.
pentru patrate pline&
#AL T+B&1sNuare$-irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
"alvea!a pagina cu numele de liste).$tml in directorul %agini.
Au uita& %entru a invata limbajul HTML trebuie sa scrii codul de la fiecare exemplu si sa ve!i daca
obtii aceleasi re!ultate ca cele din cadrul cursului.
Liste ordonate (OL)
:m va!ut cum putem folosi listele neordonate in cadrul paginilor web. Lista urmatoare pastrea!a
continutul celei de mai sus insa este o lista ordonata 6ordered list7. "a vedem diferenta&
-irma noastra va ofera urmatoarele servicii&
'. printare
(. printare
). indosariere
+. xerox
,. te$noredactare
Listele ordonate se formea!a cu ajutorul tag-urilor #*L$ si #/*L$, denumirea acestora venind din
limba engle!a 8ordered list9 care inseamna lista ordonata. La fel ca si la listele neordonate,
fiecare element trebuie introdus de tag-ul #L%$. Iata codul pentru lista ordonata de mai sus&
#HTML$
#H&'$
#T%TL&$Liste ordonate#/T%TL&$
#/H&'$
#)*+$
#*L$-irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
#L%$printare
+'
#L%$laminare
#L%$RG()0ndosariere
#L%$xerox
#L%$te$noredactare
#/*L$
#/)*+$
#/HTML$
"alvea!a pagina cu numele de liste+.$tml in directorul %agini.
a si in ca!ul listelor neordonate, si la listele ordonate, atributul T+B& are o valoare implicita, asa cum
am va!ut in exemplul de mai sus& numerele. in loc de numere putem folosi si alte caractere.
%entru a folosi aceste caractere este de ajuns sa utili!am atributul T+B& cu valoarea potrivita.
%entru a vedea re!ultatele, inlocuieste linia a .-a din codul HTML de mai sus cu una din
urmatoarele linii de cod&
pentru litere mari&
#*L T+B&1'$-irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
"alvea!a pagina cu numele de liste,.$tml in directorul %agini.
pentru litere mici&
#*L T+B&1a$-irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
"alvea!a pagina cu numele de liste..$tml in directorul %agini.
pentru cifre romane mici&
#*L T+B&1i$-irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
"alvea!a pagina cu numele de liste/.$tml in directorul %agini.
pentru cifre romane mari&
#*L T+B&1%$-irma noastrRG(,1 vRG(,1 oferRG(,1 urmRG(,1toarele servicii&
"alvea!a pagina cu numele de liste0.$tml in directorul %agini.
%e langa atributul T+B&, pentru tag-ul #*L$ mai putem folosi si atributul ST'(T. :cest atribut este
folosit atunci cand vrem sa sc$imbam valoarea initiala, de exemplu daca vrem sa incepem de la
+, in ca!ul numerelor, sau de la *, in ca!ul literelor mari, etc. -orma generala a acestui atribut
este ST'(T1n, unde n este un numar natural. "a vedem un exemplu&
+(
#HTML$
#H&'$
#T%TL&$Liste ordonate#/T%TL&$
#/H&'$
#)*+$
#*L T+B&1' ST'(T1<$RG(2.n vacanRG),,Ba de varRG(,1 am vi!itat urmRG(,1toarele
oraRG),'Be&
#L%$3oma
#L%$@iena
#L%$Londra
#L%$%aris
#L%$%raga
#/*L$
#/)*+$
#/HTML$
Liste de definitii (L)
%entru a forma liste de definitii trebuie sa folosesti tag-urile #L$ si #/L$ 6denumirea lor vine de la
8definition list9 I lista de definitii7. Iata cum arata o lista de definitii&
Teorema lui %itagora
Sn orice triung$i dreptung$ic suma pOtratelor catetelor este egalO cu pOtratul ipotenu!ei.
Teorema catetei
Sn orice triung$i dreptung$ic pOtratul catetei este egal cu produsul dintre ipotenu!O Pi proiecQia
catetei pe ipotenu!O.
Teorema CnOlQimii
Sn orice triung$i dreptung$ic pOtratul CnOlQimii este egal cu produsul proiecQiilor celor douO
catete pe ipotenu!O.
-iecare element al unei liste de definitii va trebui introdus de tag-ul #T$ 6*efinition Term7, iar apoi
fiecare definitie va fi precedata de tag-ul #$ 6*efinition *efinition7.
odul listei de mai sus este urmatorul&
#HTML$
#H&'$
#T%TL&$Liste definitii#/T%TL&$
#/H&'$
#)*+$
#L$
#T$#)$Teorema lui %itagora#/)$
#$RG(2.n orice triung$i dreptung$ic suma pRG(,1tratelor catetelor este egalRG(,1 cu
pRG(,1tratul ipotenu!ei.
#T$#)$Teorema catetei#/)$
#$RG(2.n orice triung$i dreptung$ic pRG(,1tratul catetei este egal cu produsul dintre
ipotenu!RG(,1 RG),'Bi proiecRG),,Bia catetei pe ipotenu!RG(,1.
#T$#)$Teorema RG()0nRG(,1lRG),,Bimii#/)$
#$RG(2.n orice triung$i dreptung$ic pRG(,1tratul RG()0nRG(,1lRG),,Bimii este egal cu
produsul proiecRG),,Biilor celor douRG(,1 catete pe ipotenu!RG(,1.
+)
#/L$
#/)*+$
#/HTML$
!ersonalizarea listelor
aca Frei ca in loc de simbolurile ;olosite in mod prestabilit pentru elementele listelor
sa fie afisate propriile imagini, in loc de tag-ul #L%$ cu care introducem fiecare element al listei
vom adauga imaginea dorita cu ajutorul tag-ului #%M.$.
%entru a intelege mai bine sa luam un exemplu. "alvea!a mai intai imaginea de mai jos in
directorul %o!e cu numele de sageata.gif.
:cum sa scriem codul unei pagini web ce va contine o lista cu persoanele din cadrul departamentului
ontabilitate al unei firme&
#HTML$
#H&'$
#T%TL&$Lista personal#/T%TL&$
#/H&'$
#)*+$
#AL$Lista persoanelor care sunt angajate RG()0n cadrul departamentului >AT:EILIT:TE&
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$=$eorg$e Maria
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$%rodan Eugenia
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$Matac Marian
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$AeacRG),'Bu Elena
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$Ionescu @ioleta
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$Manea ristina
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$IoniRG),,BRG(,1 Laura
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$RG),2BerbRG(,1nescu Mi$aela
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$rRG(,1ciun *orina
#)($#)($#%M. S(C12../BoCe/sa!eata.!i;2$Aeagu Emil
#/AL$
#/)*+$
#/HTML$
"alvea!a pagina in directorul %agini cu numele de listapersonal.$tml.
Exercitiu& "crie codul HTML al unei pagini web care sa contina urmatoarea lista&
Mic$ael "c$umac$er
3ubens Earic$ello
Uenson Eutton
UacLues @illeneuve
++
*avid oult$ard
3alf "c$umac$er
In loc de semnul din fata fiecarui pilot foloseste urmatoarea imagine&
"alvea!a imaginea cu numele f'.jpg, in directorul %o!e 6clic5 dreapta, "ave :s7.
"alvea!a pagina HTML in directorul %agini, cu numele formula'.$tml.
+,
Lectia nr. ::
Tabele in HTML
Tabelele sunt foarte importante pentru reali!area unei pagini web. u ajutorul lor, pe langa crearea
propriu-!isa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web.
Crearea unui table
%entru a crea un tabel, trebuie sa folosim tag-urile HT:ELEJ si HVT:ELEJ. Tot ce va fi scris intre
aceste tag-uri va forma un tabel. *upa tag-ul HT:ELEJ urmea!a tag-ul HT3J care vine de la #Table
3ow# 6randul tabelului7 si repre!inta introducerea unui rand in cadrul tabelului. Tot ce va fi scris intre
tag-urile HT3J si HVT3J va forma un rand al tabelului. *upa crearea unui rand, trebuie sa adaugam in
cadrul acestuia, cateva celule, cu ajutorul tag-urilor HT*J si HVT*J.
"a vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. "crie
urmatorul cod HTML&
#HTML$
#H&'$
#T%TL&$%rimul tabel#/T%TL&$
#/H&'$
#)*+$
#T')L&$
#T($
#T$#)$Aume#/)$#/T$
#T$#)$%renume#/)$#/T$
#T$#)$Aota#/)$#/T$
#/T($
#T($
#T$Ionescu#/T$
#T$Eogdan#/T$
#T$/#/T$
#/T($
#T($
#T$"tancu#/T$
#T$=eorge#/T$
#T$1#/T$
#/T($
#T($
#T$*umitrescu#/T$
#T$:lexandra#/T$
#T$'2#/T$
#/T($
#T($
#T$Marin#/T$
#T$%aul#/T$
#T$0#/T$
+.
#/T($
#T($
#T$Ivanov#/T$
#T$Mi$aela#/T$
#T$1#/T$
#/T($
#/T')L&$
#/)*+$
#/HTML$
"alvea!a pagina cu numele de tabel.$tml.
!roprietatile tabelelor
:sa cum ai observat, in exemplul de mai sus am reali!at un tabel, dar fara nici o linie. %entru ca liniile
unui tabel sa fie vi!ibile tag-ul #T')L&$ trebuie sa fie insosit de atributul )*(&( avand
valoarea egala cu cel putin '. In plus, poti sc$imba culoarea liniilor unui tabel folosind atributul
)*(&(C*L*( insotit de codul culorii dorite. :stfel, daca vrem ca liniile tabelului nostru
sa aiba culoarea rosie vom folosi urmatoarea linie de cod&
HT:ELE E>3*E3I#'# E>3*E3>L>3I#G--2222#J
Inlocuieste in exemplul de mai sus si salvea!a pagina cu numele tabel(.$tml.
*upa cum ai putut observa, liniile tabelului sunt practic niste linii duble. %entru a avea decat o singura
linie vom folosi atributul C&LLSB'C%0. cu valoarea #2#. :cest atribut specifica distanta
dintre celulele unui tabel. :laturi de acest atribut putem folosi si atributul C&LLB'%0. care
indica distanta dintre marginile celulelor si textul din cadrul acestora.
%entru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele 7%TH
pentru latime siVsau H&%.HT pentru inaltime. %entru alinierea datelor din cadrul tabelului
folosim atributul 'L%.0 cu una dintre valorile #left#, #center# sau #rig$t#. %entru a alinia
datele tabelului pe verticala folosim atributul D'L%.0 insotit de una dintre valorile #top#,
#middle# sau #bottom#.
%entru a sc$imba culoarea unei celule, unui rand sau c$iar a intregului tabel folosim atributul
).C*L*( impreuna cu codul culorii alese. "a facem impreuna o pagina web cu un tabel care
sa cuprinda toate notiunile pe care le-am invatat pana acum in aceasta lectie. "crie codul
urmator in cadrul unui editor text si salvea!a apoi pagina cu numele de tabel).$tml.
#HTML$
#H&'$
#T%TL&$%roprietatile tabelelor#/T%TL&$
#/H&'$
#)*+$
#C&0T&($#H2$3e!ultatele obRG),,Binute la matematicRG(,1#/H2$#/C&0T&($
#H( 7%TH128492 'L%.012center2 C*L*(123//44442$
#T')L& 7%TH128442 'L%.012C&0T&(2 )*(&(1212
+/
)*(&(C*L*(1234444442 C&LLSB'C%0.1?4? C&LLB'%0.1242$
#T( ).C*L*(1234444442 'L%.012center2 D'L%.012middle2$
#T 7%TH122442 H&%.TH12842$#)$#/*0T
C*L*(123//////2$Aume#//*0T$#/)$#/T$
#T 7%TH122442H&%.TH12842$#)$#/*0T
C*L*(123//////2$%renume#//*0T$#/)$#/T$
#T 7%TH121442 H&%.TH12842$#)$#/*0T
C*L*(123//////2$Aota#//*0T$#/)$#/T$
#/T($
#T( D'L%.012middle2$
#T 7%TH122442 H&%.TH12242$Ionescu#/T$
#T 7%TH122442 H&%.TH12242$Eogdan#/T$
#T 7%TH121442 H&%.TH12242 'L%.012center2$/#/T$
#/T($
#T( ).C*L*(123////CC2 D'L%.012middle2$
#T 7%TH122442 H&%.TH12242$"tancu#/T$
#T 7%TH122442 H&%.TH12242$=eorge#/T$
#T 7%TH121442 H&%.TH12242 'L%.012center2$1#/T$
#/T($
#T( D'L%.012middle2$
#T 7%TH122442 H&%.TH12242$*umitrescu#/T$
#T 7%TH122442 H&%.TH12242$:lexandra#/T$
#T 7%TH121442 H&%.TH12242 'L%.012center2$'2#/T$
#/T($
#T( ).C*L*(123////CC2 D'L%.012middle2$
#T 7%TH122442 H&%.TH12242$Marin#/T$
#T 7%TH122442 H&%.TH12242$%aul#/T$
#T 7%TH121442 H&%.TH12242 'L%.012center2$0#/T$
#/T($
#T( D'L%.012middle2$
#T 7%TH122442 H&%.TH12242$Ivanov#/T$
#T 7%TH122442 H&%.TH12242$Mi$aela#/T$
#T 7%TH121442 H&%.TH12242 'L%.012center2$1#/T$
#/T($
#/T')L&$
#/)*+$
#/HTML$
+0
Folosirea tabelelor ca plan al unei pagini web
:sa cum spuneam, cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini
web. %ractic, folosind tabelele, putem adauga o imagine sau un text oriunde in pagina web.
In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie sa retinem inca doua atribute
foarte importante ale tag-ului #T$& C*LSB'0 6numarul de coloane pe care se intinde celula7
si (*7SB'0 6numarul de linii pe care se intinde celula7. *e exemplu pentru crearea tabelului
urmator&




am folosit pentru celula rosie atributul C*LSB'01222, deoarece se intinde pe doua coloane, iar
pentru celula albastra am folosit atributul (*7SB'012-2 deoarece se intinde pe trei randuri.
%entru a intelege mai bine utili!area tag-urilor si a atributelor lor, nu uita sa exerse!i cat mai
mult. Incearca sa reali!e!i diferite pagini web pe ba!a notiunilor invatate in acest curs.
+1
Lectia nr. '2&
/olosirea cadrelor intr"o pa!ina web
u ajutorul cadrelor putem imparti o pagina web in mai multe !one, iar apoi putem stabili ce pagina va
fi afisata in fiecare !ona.
Folosirea cadrelor intr-o pagina web
%entru a imparti o pagina web in mai multe cadre, trebuie sa folosim, inainte de tag-ul HE>*<J, tag-ul
H-3:ME"ETJ insotit de unul dintre atributele H>L"J sau H3>;"J, pentru a defini exact cum va fi
impartita pagina respectiva. :stfel pentru a imparti pagina in doua cadre ori!ontale vom folosi
urmatoarea linie de cod&
H-3:ME"ET 3>;"I#/2K,Y#J
"e folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor forma cadrele. In
exemplul de mai sus, primul cadrul va avea /2K din inaltimea paginii, iar al doilea cadru restul,
adica #Y# sau )2K.
:laturi de tag-ul #/('M&S&T$ se mai folosesc si atributele #/('M&SB'C%0.$, pentru
marimea spatiilor dintre cadre si #/('M&)*(&($, care se refera la cadrele definite, daca
au sau nu c$enar, valorile sale fiind #4es# sau #no#. :stfel, linia completa pentru definirea a
doua cadre ori!ontale va fi urmatoarea&
H-3:ME"ET 3>;"I#/2K,Y# -3:MEE>3*E3I#no# -3:ME"%:IA=I#2#J
%entru a imparti pagina web in mai multe cadre ori!ontale, se vor asocia mai multe procente atributului
(*7S, dar avand grija ca suma lor sa nu depaseasca '22K. La fel se procedea!a si pentru
impartirea unei pagini web in cadre verticale singura deoasebire fiind aceea ca in locul
atributului (*7S se foloseste atributul C*LS. Au uita de tag-ul de inc$eiere #//('M&S&T$
*upa ce am stabilit impartirea paginii in cadre, se trece la definirea cadrelor. :stfel intre tag-
urile #/('M&S&T$ si #//('M&S&T$ vom folosi tag-ul #/('M&$. %rincipalul atribut al
tag-ului #/('M&$ este S(C cu ajutorul caruia indicam sursa cadrului. :stfel o linie de cod
care defineste un cadru ar putea fi urmatoarea&
H-3:ME "3I#numelepaginii.$tml#J
%entru a intelege mai bine utili!area cadrelor in paginile web, vom face impreuna o pagina web
cu mai multe cadre, care va arata ca in imaginea urmatoare&
,2
Trebuie sa facem patru pagini web fiecare avand culoarea de bac5ground la fel cu una dintre cele patru
culori din imaginea de mai sus. :poi vom face a cincea pagina web in care vom defini cadrele
si care le va contine practic pe celelalte patru pagini. Aumele celor patru pagini web vor fi
rosu.$tml, albastru.$tml, galben.$tml si verde.$tml.
%entru a vedea codul sursa al fiecarei pagini alege din meniul @iew optiunea "ource.
:cum sa vedem codul sursa al paginii care va contine cele patru pagini web create&
HHTMLJ
HHE:*J
HTITLEJadreHVTITLEJ
HVHE:*J
H-3:ME"ET >L"I#(,K,Y# -3:MEE>3*E3I#no# -3:ME"%:IA=I#2#J
H-3:ME "3I#rosu.$tml#J
H-3:ME"ET 3>;"I#+,K,),K,Y# -3:MEE>3*E3I#no# -3:ME"%:IA=I#2#J
H-3:ME "3I#albastru.$tml#J
H-3:ME "3I#galben.$tml#J
H-3:ME "3I#verde.$tml#J
HV-3:ME"ETJ
HV-3:ME"ETJ
HE>*<J
HVE>*<J
HVHTMLJ
"alvea!a pagina, in acelasi fisier cu celelalte patru, cu numele cadre.$tml.
,'
Lectia nr. ''&
Crearea ;ormularelor ;olosind HTML
"otiuni generale despre formulare
-ormularele repre!inta o metoda de interactivitate cu utili!atorii paginii tale web. %rin intermediul unui
formular poti obtine date importante de la vi!itatorii paginii tale. *upa ce formularul a fost completat,
utili!atorul apasa un buton de trimitere, iar tu primesti datele introduse in formular sub forma unui e-
mail sau datele vor fi procesate cu ajutorul unui limbaj de programare si adaugate intr-o ba!a de date.
In aceasta lectie vom invata cum se pot adauga in cadrul unei pagini web diferite tipuri de formulare,
dar si cum putem trimite datele introduse intr-un formular, prin email
%entru a folosi un formular in pagina ta web, va trebui sa folosesti tag-urile #/*(M$ si #//*(M$.
Intre aceste tag-uri vor fi introduse toate elementele formularului.
Tag-ul #/*(M$ are doua atribute foarte importante& 'CT%*0 si M&TH*.
u ajutorul atributului 'CT%*0 ii spunem browser-ului ce se va intampla cu datele introduse
in formular. :stfel, valoarea atributului 'CT%*0 poate fi o adresa D3L a unui script, scris
intr-un limbaj de programare, care va interpreta datele si le va introduce intr-o ba!a de date,
daca este ca!ul, sau poate fi o adresa de email, ca! in care datele introduse in formular vor fi
trimise prin email la adresa respectiva.
:tributul M&TH*, asa cum ii spune si numele, preci!ea!a metoda de trimitere a datelor si
poate avea doua valori. @aloarea implicita a acestui atribut este .&T, cu ajutorul acestei
metode putand fi trimise cantitati mici de date, cea mai folosita metoda fiind B*ST.
Au trebuie sa intelegi acum totul, vei vedea cat de simplu este sa reali!e!i formulare pentru
paginile tale web. La sfarsitul acestei lectii vom face impreuna un formular mai complex, dar
mai intai sa ne familiari!am cu elementele formularelor.
Elementele unui formular
Elementele unui formular trebuie introduse, in majoritatea ca!urilor, cu ajutorul tag-ului #%0BAT$.
:tributele cele mai importante ale acestui tag sunt urmatoarele&
- T+B& - tipul elementului
- 0'M& - numele elementului
- D'LA& - valoarea elementului
Elementele ale unui formular pot fi&
- campurile de editare
- butoanele radio
- casetele de validare
- casetele de fisiere
- listele de selectie
,(
- butoanele submit si reset
Campurile de editare
%entru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru atributul
T+B&, al tagului #%0BAT$, valoarea text.
Exemplu&
Camp de editare
:tributele cele mai folosite pentru tagul #%0BAT$ de tipul camp de editare sunt&
? S%5&, care repre!inta latimea campului de editare
? M'OL&0.TH, specifica numarul maxim de caractere care pot fi introduse in campul de
editare
? D'LA&, valoarea initiala a campului de editare
*e exemplu, pentru campul de editare de mai sus s-a folosit urmatoarea linie de cod&
HIA%DT A:MEI#exemplu# T<%EI#text# @:LDEI#amp de editare# "IWEI#(2#
M:ZLEA=THI#)2#J
*aca vrei sa introduci un camp de editare de tip #parola#, atributul T+B& va avea valoarea
#password#. In acest ca!, caracterele introduse in campul de editare, nu vor fi vi!ibile . "a
vedem un exemplu&
"crie cateva caractere in campul de editare de mai sus, pentru a vedea diferenta fata de un camp de
editare de tip #text#.
:tunci cand vrem sa adaugam in cadrul formularului nostru un camp de editare in care sa poata
fi introduse mai multe randuri, folosim campurile de editare de tip multilinie. %entru a folosi un
astfel de camp de editare, avem nevoie de tag-urile #T&OT'(&'$ si #/T&OT'(&'$. "a
vedem cum arata linia de cod HTML care introduce un camp de editare multilinie&
HTEZT:3E: >L"I#,2# 3>;" I#,# A:MEI#exemplu#JHVTEZT:3E:J
:m folosit atributul C*LS pentru a stabili numarul de caractere al fiecarui rand, atributul
(*7S pentru numarul de randuri al campului de editare, iar atributul 0'M& pentru numele
campului de editare. Iata re!ultatul&
,)
#utoanele radio
*aca avem o intrebare cu mai multe variante de raspuns, vom folosi butoanele radio. %entru a introduce
un buton radio, folosim tag-ul #%0BAT$, iar la atributul T+B&, valoarea #radio#. "a luam un
exemplu&
Sn ce categorie de v[rstO vO CncadraQiN
sub ', ani
',-(2 ani
(2-(, ani
(,-), ani
),-+, ani
peste +, ani
odul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de raspuns, este
urmatorul&
RG(2.n ce categorie de vRG((.rstRG(,1 vRG(,1 RG()0ncadraRG),,BiN #)($
#%0BAT T+B&12radio2 0'M&12raspuns2 D'LA&12a2 CH&CE& $sub ', ani#)($
#%0BAT T+B&12radio2 0'M&12raspuns2 D'LA&12b2$',-(2 ani#)($
#%0BAT T+B&12radio2 0'M&12raspuns2 D'LA&12c2$(2-(, ani#)($
#%0BAT T+B&12radio2 0'M&12raspuns2 D'LA&12d2$(,-), ani#)($
#%0BAT T+B&12radio2 0'M&12raspuns2 D'LA&12e2$),-+, ani#)($
#%0BAT T+B&12radio2 0'M&12raspuns2 D'LA&12;2$peste +, ani
u ajutorul atributului CH&CE&, fara alte valori, putem selecta un buton radio in mod
prestabilit. Au pot fi selectate mai multe butoane radio dintr-un grup, in acelasi timp.
,+
Casetele de $alidare
%entru a introduce o caseta de validare 6c$ec5box7 se utili!ea!a etic$eta #%0BAT$ cu atributul T+B&
avand valoarea #c$ec5box#. asetele de validare permit selectarea sau deselectarea uneia sau
mai multor optiuni. Exemplu&
Dnde vO petreceQi concediul de obiceiN
La mare
La munte
Sn strOinOtate
La QarO
:casO
:sa cum se poate observa, in ca!ul casetelor de validare, spre deosebire de butoanele radio, pot fi
selectate mai multe optiuni. odul casetelor de validare de mai sus este urmatorul&
Dnde vRG(,1 petreceQi concediul de obiceiN#)($
#%0BAT T+B&12checHbo>2 0'M&12optiunea12$La mare#)($
#%0BAT T+B&12checHbo>2 0'M&12optiunea22$La munte#)($
#%0BAT T+B&12checHbo>2 0'M&12optiunea-2$RG(2.n strRG(,1inRG(,1tate#)($
#%0BAT T+B&12checHbo>2 0'M&12optiunea<2$La RG),,BarRG(,1#)($
#%0BAT T+B&12checHbo>2 0'M&12optiunea82$:casRG(,1
Casetele de fisiere
%entru a trimite un fisier prin intermediul unui formular, folosim pentru atributul T+B& al tag-ului
#%0BAT$, valoarea #file#. "a vedem un exemplu&
odul HTML este urmatorul&
#%0BAT T+B&12;ile2 0'M&12;ile2$
Listele de selectie
> lista de selectie, asa cum ii spune si numele, permite utili!atorului sa aleaga una sau mai multe
optiuni dintr-o lista. Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-
urilor #S&L&CT$ si #/S&L&CT$.
:tributele cele mai folosite pentru tag-ul #S&L&CT$ sunt&
? 0'M&, atribuie listei de selectie un nume
? S%5&, specifica numarul de elemente din cadrul listei de selectie
? D'LA&, atribuie o valoare de tip text care va fi expediata serverului, sub forma de perec$i
#name I value#
,,
? S&L&CT& 6fara alte valori7, selectea!a in mod prestabilit un element al listei
"a vedem cum arata o lista de selectie&
:lege un judet din 3omania&
%entru a selecta in mod implicit valoarea Eucuresti, am folosit in dreptul acesteia atributul
selected. odul listei de selectie de mai sus este urmatorul&
#S&L&CT$
#*BT%*0 Falue1'lba$:lba#/*BT%*0$
#*BT%*0 Falue1'rad$:rad#/*BT%*0$
#*BT%*0 Falue1'r!es$:rges#/*BT%*0$
#*BT%*0 Falue1)acau$Eacau#/*BT%*0$
#*BT%*0 Falue1)ihor$Ei$or#/*BT%*0$
#*BT%*0 Falue1)istrita"0asaud$Eistrita-Aasaud#/*BT%*0$
#*BT%*0 Falue1)otosani$Eotosani#/*BT%*0$
#*BT%*0 Falue1)rasoF$Erasov#/*BT%*0$
#*BT%*0 Falue1)raila$Eraila#/*BT%*0$
#*BT%*0 Falue1)ucuresti selected$Eucuresti#/*BT%*0$
#*BT%*0 Falue1)uCau$Eu!au#/*BT%*0$
#*BT%*0 Falue1Caras"SeFerin$aras-"everin#/*BT%*0$
#*BT%*0 Falue1Calarasi$alarasi#/*BT%*0$
#*BT%*0 Falue1Cluj$luj#/*BT%*0$ #*BT%*0
Falue1Constanta$onstanta#/*BT%*0$
#*BT%*0 Falue1CoFasna$ovasna#/*BT%*0$
#*BT%*0 Falue1amboFita$*ambovita#/*BT%*0$
#*BT%*0 Falue1olj$*olj#/*BT%*0$
#*BT%*0 Falue1.alati$=alati#/*BT%*0$
#*BT%*0 Falue1.iur!iu$=iurgiu#/*BT%*0$
#*BT%*0 Falue1.orj$=orj#/*BT%*0$
#*BT%*0 Falue1Har!hita$Harg$ita#/*BT%*0$
#*BT%*0 Falue1Hunedoara$Hunedoara#/*BT%*0$
#*BT%*0 Falue1%alomita$Ialomita#/*BT%*0$
#*BT%*0 Falue1%asi$Iasi#/*BT%*0$
#*BT%*0 Falue1%l;oF$Ilfov#/*BT%*0$
#*BT%*0 Falue1Maramures$Maramures#/*BT%*0$
#*BT%*0 Falue1Mehedinti$Me$edinti#/*BT%*0$
#*BT%*0 Falue1Mures$Mures#/*BT%*0$
#*BT%*0 Falue10eamt$Aeamt#/*BT%*0$
#*BT%*0 Falue1*lt$>lt#/*BT%*0$
#*BT%*0 Falue1BrahoFa$%ra$ova#/*BT%*0$
#*BT%*0 Falue1Satu"Mare$"atu-Mare#/*BT%*0$
#*BT%*0 Falue1Salaj$"alaj#/*BT%*0$
#*BT%*0 Falue1Sibiu$"ibiu#/*BT%*0$
#*BT%*0 Falue1SuceaFa$"uceava#/*BT%*0$
#*BT%*0 Falue1Teleorman$Teleorman#/*BT%*0$
#*BT%*0 Falue1Timis$Timis#/*BT%*0$
,.
#*BT%*0 Falue1Tulcea$Tulcea#/*BT%*0$
#*BT%*0 Falue1Daslui$@aslui#/*BT%*0$
#*BT%*0 Falue1Dalcea$@alceaH#/*BT%*0$
#*BT%*0 Falue1Drancea$@rancea#/*BT%*0$
#/S&L&CT$
%entru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa folosim pentru tag-ul
#S&L&CT$ atributul MALT%BL&, fara alte valori.
#utoanele de tip %ubmit si &eset
%entru a putea expedia datele introduse in cadrul unui formular, fie prin e-mail, fie catre un script scris
intr-un limbaj de programare care va interpreta aceste date, trebuie sa folosim un buton de
trimitere. %entru a introduce un asemenea buton folosim tag-ul #%0BAT$, cu atributul T+B&
avand valoarea #submit#. %utem modifica si valoarea butonului, care in mod implicit este
"ubmit, cu ajutorul atributului D'LA&. :stfel, linia de cod pentru un buton de tip submit va fi
urmatoarea&
HIA%DT T<%EI#submit# @:LDEI#Trimite#J
:laturi de butonul de tip "ubmit, putem folosi si un buton de tip 3eset. %rin apasarea acestui
buton toate elementele formularului vor reveni la valoarea lor prestabilita, indiferent de valorile
introduse de utili!ator. %entru a introduce un buton de tip 3eset, se procedea!a la fel ca si la
butonul de tip "ubmit, singura deosebire fiind ca atributul T+B& va avea valoarea #reset#. "a
vedem cum arata linia de cod care introduce in cadrul unui formular un buton de tip 3eset&
HIA%DT T<%EI#reset# @:LDEI#"terge#J
'rimiterea datelor dintr-un formular prin e-mail
%entru ca datele introduse intr-un formular sa fie trimise prin e-mail trebuie sa folosim pentru atributul
'CT%*0 al tag-ului #/*(M$, valoarea 2mailto:emailMdomeniu.ro2. in felul acesta, datele
introduse in formular vor fi trimise la adresa de e-mail specificata.
*e exemplu, pentru a trimite datele dintr-un formular la adresa cursuri\ecursuri.ro vom folosi
urmatoarea linie de cod&
H->3M :TI>AI#mailto&cursuri\ecursuri.ro# METH>*I#%>"T#J
,/