Proiectare Site Si Web Design - HTML

Tehnologii Utilizate in Proiectarea si Designul Site-urilor Web
HTML
Ce este un fisier HTML? In primul rand HTML reprezinta prescurtarea de la Hyper Text Markup Language
(denumirea oficiala a standardului). n fisier HTML este un fiser text cu extensia !."tm! sau !."tml!
continand pe langa text pur si instructiuni standard de mac"etare (#e$ design). %fectul mac"etarii este
&izi$il in $ro#serele de Internet (Internet %xlorer' (etscape (a&igator' )pera' etc...). *ractic marca+ele de
tip HTML din cadrul documentului spun $ro#ser,ului cum sa afiseze continutul util al fisierului. -espre
HTML &ei putea afla mai multe lucruri in cadrul prezentarii pe etape din sectiunea HTML a site,ului' sau' la
un ni&el superior' din cartea electronica "HTML, CSS, XML - Profesional"' pe care .faceri,)nline o
pune la dispozitie.
CSS
Ce este un fisier C//? In primul rand C// reprezinta prescurtarea de la Cascading /tyle /"eets
(denumirea oficiala a standardului). n fiser C// este un fisier text cu extensia !.css! definind stiluri
pentru paginile HTML. /tilurile indica intr,un mod mult mai riguros decat atri$utele HTML cum sa afiseze
$ro#serul elementele componente ale unui document HTML (text' grafica' formulare' etc...)' oferind
posi$ilitati mult superioare standardului HTML. 0isierele C// permit stilizarea in $loc a documentelor HTML
cu un efort semnificati& mai mic decat in cazul stilizarii elementelor de pagina in cadrul fiecarui document
HTML in parte' prin intermediul atri$utelor tagurilor. -espre C// &ei putea afla mai multe lucruri in cadrul
prezentarii pe etape din sectiunea C// a site,ului' sau' la un ni&el superior' din cartea electronica
"HTML, CSS, XML - Profesional"' pe care .faceri,)nline o pune la dipozitie.
XML
Ce este un fisier 1ML? In primul rand 1ML reprezinta prescurtarea de la %1tensi$le Markup Language
(denumirea oficiala a standardului). . fost proiectat pentru a manipula date in mod riguros. Ineditul pe
care il aduce lim$a+ul 1ML este faptul ca nu contine taguri standard (predefinite). *ractic' tagurile 1ML
sunt definite (construite) exclusi& de utilizator (proiectant). %ste asadar un lim$a+ extensi$il. Tre$uie
mentionat faptul ca standardul 1ML nu este decat intr,un mod foarte general asemanator cu HTML. In
timp ce standardul HTML urmareste afisarea datelor a&and ca o$iecti& central modul in care acestea arata
in $ro#ser' scopul 1ML este acela de a structura' stoca si transmite date su$ forma de informatii utilizator'
a&and ca o$iecti& central semnificatia profunda a acestora. Intr,un cu&ant' HTML afisaza informatii' in
timp ce 1ML descrie si manipuleaza informatiile in mod riguros. .tentie2 1ML nu este un inlocuitor pentru
HTML. ) e&olutie pre&izi$ila a #e$,ului sugereaza o completare reciproca a celor doua standarde prin
utilizarea impreuna in cadrul acelorasi documente2 1ML &a fi utilizat pentru a descrie date' in timp ce
HTML &a formata si afisa corespunzator aceste date. -espre 1ML &ei putea afla mai multe lucruri din
cartea electronica "HTML, CSS, XML - Profesional"' pe care .faceri,)nline o pune la dipozitie.
XSL
Ce este un fisier 1/L? In primul rand 1/L reprezinta prescurtarea de la %1tensi$le /tyle Language
(denumirea oficiala a standardului). *ractic' 1/L reprezinta pentru documentul 1ML ceea ce reprezinta
C// pentru HTML' adica o foaie de stiluri. -iferenta dintre C// (HTML /tyle /"eets) si 1/L (1ML /tyle
/"eets) este foarte mare. HTML utilizeaza taguri (marca+e) predefinite si semnificatia acestora este de la
$un inceput cunoscuta si inteleasa de $ro#ser. /pre exemplu' tagul 3T.4L%5 defineste un ta$el' iar
$ro#serul stie ce este acesta si cum tre$uie afisat. .daugand stiluri fisierului HTML &om indica $ro#serului
sa afiseze un element de pagina (precum ta$elul exemplificat mai sus) intr,un anumit mod' uzand de data
aceasta de atri$ute C// predefinite , indicand' spre exemplu' margine de dimensiune 6 si culoare
al$astra. In sc"im$ 1ML stim de+a ca nu lucreaza cu taguri predefinite (am &azut ca putem defini cate
taguri personalizate dorim). .sadar' semnificatia tagurilor 1ML utilizate de proiectant nu este cunoscuta
$ro#ser,ului. Tagul 3T.4L%5 in 1ML poate desemna' intr,ade&ar' un ta$el' la fel de $ine ca si un formular
sau un o$iect a$stract iar $ro#serul nu &a sti cum sa,l afiseze. -e aceea tre$uia sa existe o componenta
aditionala documentelor 1ML care sa traduca $ro#serului modul in care un document 1ML &a fi afisat. /i
aceasta este 1/L. Totusi' 1/L este mai mult decat un standard de stiluri pentru documentele 1ML. *ractic'
1/L se constituie din 7 parti componente2 1/LT' care este un lim$a+ menit sa transforme documentele
1ML in documente 1HTML8 1*at" care este un lim$a+ menit sa defineasca si sa izoleze portiuni din
documentele 1ML8 1/L,0)' practic un lim$a+ de formatare (structurare) superioara a documentelor 1ML.
-espre 1/LT &ei putea afla mai multe lucruri din cartea electronica "HTML, CSS, XML - Profesional"'
pe care .faceri,)nline o pune la dipozitie.
XHTML
Ce este un fisier 1HTML? In primul rand 1HTML reprezinta prescurtarea de la %1tensi$le HyperText
Markup Language (denumirea oficiala a standardului). *ractic este un inlocuitor modern al mai &ec"iului
lim$a+ HTML' fiind aproape identic cu standardul HTML 9.:6' o &ersiune im$unatatita' mult mai stricta si
mai curata a standardului HTML 9.:. .$stractizand putin' afirmam ca 1HTML reprezinta o definire de tip
1ML a unui document HTML' pe scurt o com$inatie intre HTML si 1ML. .&anta+ele unei aplicatii 1HTML
sunt multiple2 pot fi citite de toate dispoziti&ele 1ML' in timp ce pastreaza compati$ilitatea cu toate
$ro#serele de Internet mai &ec"i sau mai noi fara a necesita specificatii suplimentare.
JavaScript
;a&a/cript reprezinta un lim$a+ de script utilizat la ora actuala de ma+oritatea paginilor #e$ din Internet
pentru a im$unatati design,ul general' &alida datele utilizator din formulare' aduga interactiune cu
utilizatorul prin efecte speciale aplica$ile elementelor de pagina in funtie de e&enimentele generate de
utilizator. La ora actuala este cel mai important lim$a+ de script de pe Internet. -espre ;a&a/cript &ei
putea afla mai multe lucruri in cadrul prezentarii pe etape din sectiunea ;a&a/cript a site,ului' sau' la un
ni&el superior' din cartea electronica "Java, JavaScript - Profesional", pe care .faceri,)nline o pune
la dipozitie.
DHTML
Ce este -HTML? In primul rand' -HTML nu reprezinta' cum s,ar putea crede' prescurtarea de la -inamic
HyperText Markup Language (o asa zisa denumire oficiala a standardului). *ractic -HTML nu este un
standard (nu exista fisiere cu extensia -HTML)< -HTML este o denumire generica adoptata in unanimitate
de proiectantii de pagini #e$' desemnand arta de a com$ina te"nologiile HTML' C// si ;a&a/cript pentru a
realiza sit,uri #e$ cu ade&arat interacti&e' adaugand o puternica nota de impact cu utilizatorul si efecte
&izuale dintre cele mai spectaculoase. Cele doua carti electronice de proiectare site,uri #e$ oferite de
.faceri )nline , "HTML, CSS, XML - Profesional"' respecti& "Java, JavaScript - Profesional" , pun la
dispozitia proiectantului un suport consistent cu pri&ire la arta -HTML a construirii site,urilor #e$ de efect
utilizand te"nologiile HTML' C//' ;a&a/cript.
Java
;a&a este la ora actuala una dintre cele mai puternice platforme de dez&oltare soft#are , lim$a+ de
programare independent' aducand in spectrul #e$ posi$ilitati exceptionale de interactiune client,ser&er' cu
mult dincolo de $inecunoscutele formulare' animatii' +ocuri sau efecte &izuale interacti&e. *ractic
te"nologiile ;a&a (de multe ori com$inate cu alte standarde sau te"nologii cum ar fi 1ML spre exemplu)'
reprezinta o modalitate foarte apropiata de natural pentru implementarea de aplicatii manipuland cu
succes mai toate tipurile de generatori si consumatori de informatie' de la telefoane mo$ile pana la
sisteme de gestionare a tranzactiilor online. *orta$ilitatea si extensi$ilitatea celor doua te"nologii (;a&a si
1ML) face din acestea alegerea ideala pentru satisfacerea unei impresionante game de cerinte ale
Internetului' de la cele mai simple programe pana la aplicatii ruland pe diferite platforme interconectate si
solicitand ni&ele dintre cele mai performante de securitate' sta$ilitate si porta$ilitate. ) incursiune
fascinanta in programarea ;a&a o puteti gasi in cartea electronica "Java, JavaScript - Profesional"'
oferita de .faceri,)nline.
Proiectare Site si Web Design - Stanarul HTML
Ce este HTML
!rigini
nul din primele elemente' fundamentale de altfel' ale === (=orld =ide =e$) este HTML (HyperText
Markup Language)' standard ce descrie formatul primar in care documentele sint distri$uite si &azute pe
=e$. Multe din trasaturile lui' cum ar fi independenta fata de platforma' structurarea formatarii si
legaturile "ipertext' fac din el un foarte $un format pentru documentele Internet si =e$. *rimele
specificatii de $aza ale =e$,ului au fost HTML' HTT* si >L.
Menire si se"ni#icatii
HTML a fost dez&oltat initial de Tim 4erners,Lee la C%>( in 6?@?. HTML este un lim$a+ $azat pe /AML
(/tandard Aeneralized Markup Language)' o asa,numita aplicatie a acestuia. /AML este un standard
international (I/),@@B?) apro$at Cn 6?@D. HTML a fost initial &azut ca o posi$ilitate pentru fizicienii care
utilizeaza computere diferite sa sc"im$e intre ei informatie prin mi+locirea Internetului. %rau prin urmare
necesare cate&a conditii esentiale2 independenta de platforma' posi$ilitati "ipertext si structurarea
documentelor. Independenta de platforma semnifica faptul ca un document poate fi afisat in mod
asemanator (sau aproape identic) de computere diferite (deci cu font' grafica si culori aidoma)' lucru &ital
pentru o audienta numeroasa si extrem de &ariata. Hipertext se traduce prin faptul ca orice cu&int' fraza'
imagine sau element al documentului &azut de un utilizator (client) poate face referinta la un alt document
sau c"iar la paragrafe din interiorul aceluiasi document' ceea ce usureaza mult na&igarea intre partile
componente ale unui document sau intre multiple documente. /tructurarea riguroasa a documentelor
permite con&ertirea acestora dintr,un format in altul precum si interogarea unor $aze de date inglo$and
aceste documente.
$nceputurile
(ascut Cn urma cu aproximati& 7: de ani' intr,o tentati&a de a rezol&a unele pro$leme i&ite la transportul
documentelor intre diferite computere' lim$a+ul "ipertext a e&oluat incet. In primii ani de e&olutie HTML a
demarat lent in principal pentru ca ii lipseau posi$ilitatile de a reda pu$licatii electronice profesionale8
lim$a+ul permitea oarece control asupra fonturilor dar nu permitea inserarea graficii. In 6??7' (C/. a
im$ogatit lim$a+ul pentru a permite inserarea graficii si a construit primul na&igator grafic2 Mosaic. .u
urmat apoi contri$utii ad "oc ale di&erselor firme care au adus tot felul de adaugiri lim$a+ului HTML astfel
incat' in 6??9' lim$a+ul parea scapat de su$ control. rmarea a fost ca la prima conferinta === de la
Aene&a (%l&etia) s,a constituit un grup de specialisti (HTML =orking Aroup) a carui prima misiune a fost
formalizarea HTML' lucru care s,a concretizat in HTML E.:. Importanta actiunii acestui grup consta in
faptul ca' odata standardizat' lim$a+ul a putut fi apoi extins intr,un mod mai controlat la alte ni&ele.
Stanarizarea
/tandardul oficial HTML este dat de =orld =ide =e$ Consortium (=7C)' care este afiliat la Internet
%ngineering Task 0orce (I%T0). =7C a enuntat cate&a &ersiuni ale specificatiei HTML' printre care si HTML
E.:' HTML 7.:' HTML 7.E' HTML 9.: si' cel mai recent' HTML 9.:6. In acelasi timp' autorii de $ro#sere
cum ar fi (etscape si Microsoft' au dez&oltat adesea propriile !extensii! HTML in afara procesului standard
si le,au incorporat in $ro#serele lor. In unele cazuri (cum ar fi tagul (etscape)' aceste extensii au de&enit
standarde de facto adoptate de autorii de $ro#sere. CCnd na&igatorul incarca un document HTML' el
!citeste! documentul Cn cautarea tag,urilor HTML' formateaza textul si imaginea si le afiseaza pe ecran.
%ste moti&ul pentru care acelasi document HTML apare usor diferit cCnd este pri&it utilizand na&igatoare
diferite. /tadiile prin care trece un standard ela$orat de =7C sCnt2
6. )rice standard isi incepe a&entura ca =7C (ote.
E. -e aici este preluat de catre un grup particular de lucru (=orking Aroup) si este discutat pana
cand se a+unge la un consens.
7. In acest moment este pu$licat ca propunere (=orking -raft) si in acest stadiu oricine poate face
comentarii.
9. In momentul Cn care se o$tine o sustinere si un consens suficient de larg' directorul =7C decide
daca specificatia este gata sa de&ina propunere oficiala de recomandare (*roposed
>ecommendation).
F. rmeaza o perioada de D saptamCni Cn care toti mem$rii =7C au sansa sa &oteze aceasta
propunere de recomandare8 &otul nu este o$ligatoriu' putandu,se &ota Cn 9 moduri diferite2
o da8
o da' su$ rezer&a unor im$unatatiri8
o nu' pana cCnd anumite sarcini nu sunt indeplinite8
o nu' specificatia tre$uie a$andonata.
D. C"arta =7C stipuleaza necesitatea o$tinerii consensului complet' astfel ca fiecare &ot tre$uie sa
fie un da fara rezer&e.
B. -aca toti pasii anteriori au fost indepliniti' specificatia tre$uie apro$ata in final de -irector si se
pu$lica su$ forma unui standard (=7C >ecommendation).

De ce HTML
Dar de ce a fost preferat HTML pentru publicaii pe Web, cnd pentru realizarea
publicaiilor electronice exist multe alte tehnologii !rimul moti" este simplitatea# $l
doilea este ca permite formatarea textului $%&'' cu tag(uri n format $%&''# )ezult de
aici o compresie buna, suport pentru legaturi hipertext si usurinta in a scrie na"igatoare
pentru "izualizarea documentelor#
%arianta &'(
HTML E.:' ela$orat in Iunie 6??9' este standardul pe care ar tre$ui sa,l suporte toate $ro#serele curente ,
inclusi& cele in mod text. HTML E.: reflecta conceptia originala a HTML ca un lim$a+ de marcare
independent de o$iectele existente' focalizandu,se pe asezarea lor in pagina' in loc de a specfica exact
cum ar tre$ui sa arate acestea. -aca doriti sa fiti siguri ca toti &izitatorii &or &edea paginile asa cum
tre$uie' folositi tagurile HTML E.:.
%arianta )'(
/pecificatia HTML 7.:' enuntata in 6??F' a incercat sa dez&olte HTML E.: prin adaugarea unor facilitati
precum ta$elele si un mai mare control asupra textului din +urul imaginilor. -esi unele din noutatile HTML
7.: erau de+a folosite de autorii de $ro#sere' multe nu erau inca oficializate. In unele cazuri' taguri
asemanatoare implementate de autorii de $ro#sere au de&enit mai raspandite decat tagurile !oficiale!.
/pecificatia HTML 7.: a expirat repede' deci nu mai este un standard oficial in prezent.
%arianta )'&
In Mai 6??D' =7C a scos pe piata specificatia HTML 7.E ' care era proiectata sa reflecte si sa
standardizeze practicile acceptate la scara larga. -eci HTML 7.E include tagurile HTML 7.: care erau
adoptate de autorii de $ro#sere precum (etscape si Microsoft plus noi extensii HTML.
*evolutia HTML +'(, HTML +'(-
In acest moment' HTML 9.: este larg utilizat si au fost de+a pu$licate specificatiile HTML 9.:6. Lim$a+ul
HTML da proiectantilor de pagini #e$ posi$ilitatea2
sa pu$lice documente cu "eadere' texte' ta$ele' liste' fotografii' etc...
sa regaseasca on,line informatii prin intermediul "iperlink,urilor accesate printr,un simplu click de
mouse
sa proiecteze formulare pentru realizarea tranzactiilor cu ser&ere aflate la distanta' pentru cautari
de informatie sau pentru acti&itati specifice comertului
sa includa foi de calcul ta$elar' clipuri &ideo' sunete si alte aplicatii direct Cn documente.
%lementul esential diferit adus de &ersiunea 9.: si mai ales 9.:6 fata de &ersiunea 7.E este posi$ilitatea
separarii structurii unui document de prezentarea lui prin introducerea Gstilurilor de documenteH (style
s"eet). tilizCnd lim$a+ul HTML pentru structurarea unui document si style s"eet,urile pentru a stiliza
prezentarea acestuia' proiectantii pot o$tine mult mai usor independenta de perifericI computerI
platforma "ard,soft' lucru care a facut HTML,ul atCt de popular. n document cu o structura complexa
poate fi prezentat in diferite moduri pe medii diferite' permitand documentului insusi sa se adapteze mai
usor noilor te"nologii (cum ar fi' de exemplu' $ro#serele capa$ile sa &or$easca' cititoarele $raille' etc...).
In plus' separarea continutului de partea de prezentare permite modificarea infatisarii c"iar a unui intreg
site doar prin modificarea unui style,s"eet (a unui document care descrie stilul). %xperienta a demonstrat
ca o astfel de a$ordare poate reduce dramatic costurile de deser&ire a unui spectru larg de platforme si
pro$leme' facilitCnd si o intretinere ulterioara si modificari mult mai usoare.
.una"ente HTML
!rice ocu"ent HTML incepe cu notatia /ht"l0 si se termina cu notatia /1ht"l0. .stfel de perec"i
de marca+e sau etic"ete (acolo unde sunt perec"i) se numesc in literatura de specialitate T.A,uri. *rin
con&entie' toate marca+ele HTML incep cu o paranteza ung"iulara desc"isa !3! si se termina cu o
paranteza ung"iulara inc"isa !5!. Marca+ele dintre aceste paranteze transmit comenzi catre $ro#ser
pentru a afisa pagina intr,un anumit mod. nele $locuri prezinta delimitator de sfarsit de $loc' in timp ce
pentru alte $locuri acest delimitator este optional sau c"iar interzis.
Intre cele doua marca+e 3"tml5 si 3I"tml5 &om introduce doua sectiuni2
, sectiunea de antet2 /hea0.../1hea0
, corpul documentului2 /bo20.../1bo20
3locul /bo20'''/1bo20 cuprinde continutul propriu,zis al paginii HTML' adica ceea ce &a fi afisat in
ferastra $ro#ser,ului. n marca+ poate fi scris atat cu litere mici' cat si cu litere mari. -e exemplu
34)-J5 K 34odJ5 K 3$ody5. Caracterele !spatiu! si !C>IL0! ce apar intre taguri sunt ignorate de catre
$ro#ser.
Un pri" ocu"ent HTML ar fi ce&a de genul acesta2
3"t ml 5
3"ead5 3I"ead5
3$ody5 3I$ody5
3I"t ml 5
.sa arata primul document HTML. Copiati,l folosind CopyI*aste intr,un fisier nou si sal&ati,l ca *>IM.HTM
sau *>IM.HTML. .poi porniti (etscape (a&igator sau Internet %xplorer' dati CT>L,) si introduceti calea
spre fisier. -ati )L si... nimic. %ste normal' deoarece fisierul HTML din exemplul anterior nu incorporeaza
text util.
%o" aauga pri"ele ele"ente e te4t
In primul rand' titlul unei pagini se o$tine inserand in sectiunea 3"ead5...3I"ead5 urmatoarea linie2
3t i t l e5.ceast a est e t i t l ul pri mei mel e pagi ni de =e$3It i t l e5
In plus' in sectiunea 3$ody5...3I$ody5 putem scrie texte cat dorim. -aca nu intalnim nici un marca+ !3!
sau !5!' atunci interpretorul HTML le &a lua ca texte simple si le &a afisa pe ecran. /a &edem o noua
versi une a pagi ni i noastre5
3"t ml 5
3"ead5
3t i t l e5.ceast a est e pri ma mea pagi na de =e$3It i t l e5
3I"ead5
3$ody5
4i ne at i &eni t i n pagi na mea de =e$<
3I$ody5
3I"t ml 5
Continutul $locului /title0.../1title0 &a aparea in $ara de titlu a ferestrei $ro#ser,ului. -aca acest $loc
lipseste intr,o pagina HTML' atunci in $ara de titlu a ferstrei $ro#ser,ului &a aparea numele fisierului.
Trecerea pe o linie noua , se face in HTML cu o comanda explicita' care tre$uie sa apara in codul sursa
"tml. .ceasta comanda este marca+ul /br0 (de la !line $reak! , intrerupere de linie). 0olosind aceleasi
operatii ca mai sus' &izualizati noua pagina. Meti &edea textul ce apare in fereastra $ro#serului. In plus'
pagina d&s. &a a&ea un titlu nou' cel introdus de d&s.. 64' 5
3"t ml 5
3"ead5
3t i t l e5 t i t l ul pagi ni i 3It i t l e5
3I"ead5
3$ody5 4i ne at i &eni t i n 3$r5 pagi na mea de =e$<
3I$ody5
3I"t ml 5
Culoarea e #on
) culoare poate fi precizata in doua moduri2
1. *rintr,un nume de culoare. /unt disponi$ile cel putin 6D nume de culori2 aNua' $lack' fuc"sia' gray'
green lime' maroon' na&y' oli&e' purple' red' sil&er' teal' #"ite si yello#.
2. *rin constructia !O>>AA44! unde >(red)' A(green)' sau 4($lue) sunt cifre "exazecimale si pot lua
&alorile2 :' 6' E' 7' 9' F' D' B' @' ?' a' .' $' 4' c' C' d' -' e' %' f' 08 se pot defini astfel DFF7D de culori.
Culoarea fundalului unei pagini se precizeaza prin intermediul unui atri$ut al tagului 4)-J. mai exact cu
atributul "!color" din cadrul etic"etei 3$ody5. De e4e"pl u5 3$ody $gcol or K cul oare5.
Culoarea te4tului
.cest lucru se seteaza prin intermediul atributului "te"t" al tagului 4)-J' dupa sintaxa 3$ody
textKculoare5. $n ur"atorul e4e"pl u textul are culorea rosie2
3"t ml 5
3"ead5
3t i t l e5cul oare t ext ul ui 3It i t l e5
3I"ead5
3$ody text Kred5
n text de cul oare rosi e.
3I$ody5
3I"t ml 5
! eticheta poate avea "ai "ulte atribute'
-e exemplu' o etic"eta cu trei atri$ute arata astfel2 3et i c"et a at ri $ut 6 K &al oare6 at ri $ut E K
&al oareE at ri $ut7 K &al oare75. Ur"atorul e4e"pl u prezinta o pagina cu fondul de culoare
al$astra si textul de culoare gal$ena2
3"t ml 5
3"ead5
3t i t l e5at r i $ut e mul t i pl e 3It i t l e5
3I"ead5
3$ody $gcol orK$l ue text Kyel l o#5
0ond de cul oare al $ast ra si t ext de cul oare gal $ena.
3I$ody5
3I"t ml 5
Textul afisat este caracterizat de ur"atoarele atribute5 Marime (font si#e) , aici implicita' Culoare
(font color) , aici implicita' 0ont (font fa$il%) , aici implicit.
Pozitionarea continutului paginii Web fata de marginile ferestrei $ro#serului se poate face cu a+utorul
a doua atribute ale etic"etei 3$ody52
1. "Left$ar!in" (sta$ileste distanta dintre marginea stanga a ferestrei $ro#serului si marginea stanga a
continutului paginii)8
2. "Top$ar!in" (sta$ileste distanta dintre marginea de sus a ferestrei $ro#serului si marginea de sus a
continutului paginii)8
3"t ml 5
3"ead5
3t i t l e5Conf i gurarea textul ui si st a$i l i rea margi ni i 3It i t l e5
3I"ead5
3$ody l ef t margi nK!6::! topmargi nK!F:!5
Text ul are at ri $ut e i mpl i ci t e. 3$r53$asef ont st yl eK!.ri al ! col orK!$l ue! si zeK!D!5
Text ul este scri s cu f ont ul !.ri al !' cul oare al $ast ru si mari me D. 3I$ody5
3I"t ml 5
Stiluri pentru blocurile e te4t
*entru ca un $loc de text sa apara in pagina e&identiat (cu caractere aldine)' tre$uie inclus intre tagurile
/b0.../1b0 ($ &ine de la !$old! K indraznet ).

*entru ca un text sa fie scris cu carcatere cursi&e acesta tre$uie inclus intr,un $loc delimitat de tagurile
/i0.../1i0 (i &ine de la !italic!).

*entru a insera sec&ente de text ca indice (su$,script) sau ca exponent (super,script)' aceste fragmente
tre$uie delimitate de tagurile /sub0.../1sub0' respecti& /sup0.../1sup0.

*entru a insera un $loc de caractere su$liniate se utilizeaza etic"etele /u0.../1u0 (u &ine de la
!underline!).
.onturi in HTML
Un #ont este un text caracterizat de urmatoarele atribute2
1. Culoare (sta$ilita prin atri$utul !color!)8
2. Tipul sau stilul (sta$ilit prin atri$utul !face!)8
&. Marimea (definita prin atri$utul !size!)8
'. Marimea in puncte tipografice (sta$ilita prin atri$utul !point,size!)8
(. Arosime (definita prin atri$utul !#eig"t!).
Toate aceste atri$ute apartin etic"etei 3font5' care permite inserarea de $locuri de texte personalizate.
Culori
) culoare poate fi precizata in doua moduri2
1. printr,un nume de culoare.
2. printr,o constanta conform standardului de culoare >A4 (>ed' Areen' 4lue). ) astfel de constanta se
formeaza astfel2 Orrgg$$' unde r' g si $ sunt cifre "exazecimale.
Culorea #ontului
*entru a scrie un fragment de text cu caractere de o anumita culoare' se incadreaza acest fragment intre
marca+ele de font' a&and sta$ilit atri$utul color la &aloarea necesara.
.a"ilia #ontului
*entru a scrie un text intr,o pagina pot fi folosite mai multe fonturi (stiluri de caractere). %xista cinci
familii generice de fonturi care sunt de regula disponi$ile pe toate calculatoarele utilizatorilor2 !serif!'
!sans serif!' !cursi&e!' !monospace! si !fantasy!. Tipul de font necesar poate fi sta$ilit prin atri$utul !face!
al etic"etei. *ot fi introduse mai multe fonturi separate prin &irgula. In acest caz $ro#serul &a utiliza
primul font pe care il cunoaste.
Mari"ea #ontului
*entru a sta$ili marimea unui font se utilizeaza atri$utul size al etic"etei. Malorile acestui atri$ut pot fi2
1. 6' E' 7' 9' F' D' B (6 pentru cel mai mic font si B pentru cel mai mare)8
2. P6' PE' etc. pentru a mari dimensiunea fontului cu 6' E' etc. fata de &aloarea curenta8
&. ,6' ,E' etc. pentru a micsora dimensiunea fontului cu 6' E' etc. fata de &aloarea curenta.
3locuri e Te4t
Tagurile care definesc $locuri de text nu se refera la particularitatile caracterelor ce compun textul' ci la
functiile pe care le poate a&ea un $loc de text in cadrul paginii =e$. %tic"etele care lucreaza cu $locuri de
text produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar.
$entarea unui bloc
*entru ca un $loc de text sa fie indentat (marginea din stanga a textului sa fie deplasata la dreapta la o
anumita distanta fata de marginea din stanga a paginii)' acesta tre$uie inclus intre etic"etele
/bloc78uote0.../1bloc78uote0' ast#el 5
3"t ml 5
3"ead5
3t i t l e5 Indent area unui $l oc3It i t l e5
3I"ead5
3$ody5
Text ul ce urmeaza este i ndent at 23$l ockNuot e54l oc de text i dent at 3I$l ockNuot e5
3I$ody5
3I"t ml 5
Intr,un fisier HTML' caracterele !3! si !5! au o semnificatie speciala pentru $ro#ser. %le incadreaza
comenzile si atri$utele de afisare a elementelor intr,o pagina. -aca dorim ca un fragment de text sa
contina astfel de caractere' acest fragment tre$uie incadrat de una dintre perec"ile de etic"ete2
1. /4"p0.../14"p0 (@: de caractere pe rand)8
2. /listing0.../1listing0 (6E: de caractere pe rand).
.ceste marca+e interpreteaza corect (ca text afisa$il in $ro#ser) caracterele !spatiu!' !etic"eta! si
!C>IL0!. Textul afisat in pagina este monospatiat. 64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 xmp si l i st i ng3It i t l e5
3I"ead5
3$ody5
n f i si er "tml standard arat a ast f el 2 3xmp5 3"tml 5
3"ead5
3t i t l e5 3It i t l e5
3I"ead5
3$ody5
) pagi na =e$ . . .
3I$ody5
3I"t ml 5 3Ixmp5 3I$ody5
3I"t ml 5
3locuri paragra#
%tic"etea paragraf /p0 face posi$ila trecerea la o linie noua si permite2
1. inserarea unui spatiu suplimentar inainte de $locul paragraf8
2. inserarea unui spatiu suplimentar dupa $locul paragraf' daca se foloseste delimitatorul 3Ip5 (acesta
fiind optional)8
&. alinierea textului cu a+utorul atributului "ali!n"' a&and &alorile posi$ile !left!' !center! sau !rig"t!.
64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 4l ocuri paragraf 3It i t l e5
3I"ead5
3$ody5
*ri ma l i ni e
3p5 Li ni generat a de un paragraf (i mpl i ci t paragraf ul este al i ni at l a st anga).
3p al i gnK!r i g"t !5 *aragraf al i ni at l a dreapt a.
3p al i gnK!center!5 *aragraf al i ni at i n cent ru.
3I$ody5
3I"t ml 5
3locuri e titlu
Intr,un text' titlurile ("eaders) de capitole pot fi introduse cu a+utorul etic"etelor /H&0. /H)0' /h)0'
/h+0' /h90' /h:0. Toate aceste etic"ete se refera la un $loc de text si tre$uie insotite de o etic"eta de
inc"eiere similara. .ceste etic"ete accepta atri$utul !align! pentru alinierea titlului $locului de text la
stanga (in mod presta$ilit)' in centru si la dreapta. Tag,ul !HE! permite scrierea unui titlu cu caractere mai
mari si aldine' pe cand 3"D5 foloseste caracterele cele mai mici. 64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 4l ocuri de t i t l u3It i t l e5
3I"ead5
3$ody5
3HE al i gnK!cent er!5 Ti t l u de mari me 6 al i ni at i n cent ru 3IHE5
3H7 al i gnK!r i g"t !5 Ti t l u de mari me E al i ni at l a dreapt a. 3IH75
3"95 Ti t l u de mari me 9 al i ni at l a st anga (i mpl i ci t ) 3I"95
3I$ody5
3I"t ml 5
Linii orizontale
Intr,o pagina =e$ pot fi inserate linii orizontale. .cest lucru se face cu a+utorul etic"etei /hr0. *entru a
configura o linie orizontala se utilizeaza urmatorele atribute ale etic"etei 3"r52
1. "ali!n" ce permite alinierea orizontala a liniei. Malorile posi$ile sunt !left! '!center! si !rig"t!8
2. ")idt*" permite alegerea lungimii liniei8
&. "si#e" permite alegerea grosimii liniei8
'. "nos*ade" cand este prezent defineste o linie fara um$ra8
(. "color" permite definirea culorii liniei.
64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 Li ni i ori zont al e3It i t l e5
3I"ead5
3$ody5
3HE al i gnK!cent er!5 Ti puri de l i ni i ori zont al e 3IHE5 ) l i ni e i mpl i ci t a' al i ni ere
st anga' l at i me 6::Q' grosi me E cu um$ra.
3"r5
rmeaza o l i ni e al i ni at a i n cent ru' de l at i me F:Q' grosi me F pi xel i ' f ara um$ra.
3"r al i gnK!center! #i dt "K!F:Q! si zeK!F! nos"ade5rmeaza o l i ni e al i ni at a l a
dreapt a' de l at i me 6F: de pi xel i ' grosi me 6E pi xel i ' de cul oare rosi e.
3"r al i gnK!r i g"t ! #i dt "K6F: si zeK6E col orK!red!5
3I$ody5
3I"t ml 5
3locuri C6;T6*
4locul introdus de etic"etele /center0.../1center0 aliniaza centrat toate elementele pe care le contine.
64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 Li ni i ori zont al e3It i t l e5
3I"ead5
3$ody5
3cent er5 3"r #i dt "K6:Q5 3"r #i dt "K9:Q5 3"r #i dt "KB:Q5 3"r #i dt "K6::Q5 3"r
#i dt "KB:Q5 3"r #i dt "K9:Q5 3"r #i dt "K6:Q5 3Icent er5
3I$ody5
3I"t ml 5
3locuri D$%
Modalitatea cea mai eficienta de delimitare si de formatare a unui $loc de text este folosirea delimitatorilor
/iv0.../1iv0. n parametru foarte foarte util pentru sta$ilirea caracteristicilor unui $loc 3di&5
(di&iziune) este "ali!n" (aliniere). Malorile posi$ile ale acestui parametru sunt2
1. !left! (aliniere la stanga)8
2. !center! (aliniere centrala)8
&. !rig"t! (aliniere la dreapta).
n $loc 3di&5...3Idi&5 poate include alte su$$locuri. In acest caz' alinierea precizata de atri$utul align al
$locului are efect asupra tuturor su$$locurilor incluse in $locul 3di&5. n $loc 3di&5...3Idi&5 admite
atributul "no)rap" care interzice intreruperea randurilor de catre $ro#ser la afisare.
64e"pl u e uti l i zare a tagul ui D$%5
3"t ml 5
3"ead5
3t i t l e54l ocul -IM3It i t l e5
3I"ead5
3$ody5
.ceast a l i ni e este o l i ni e normal a. rmat orul $l oc est e al i ni at l a dreapt a.
3di & al i gnK!r i g"t !5
) si ngura l i ni e. ) si ngura l i ni e. ) si ngura l i ni e. ) si ngura l i ni e. 3$r5
3Idi &5
3di & al i gnK!cent er!5
4l oc al i ni at pe cent ru. 4l oc al i ni at pe cent ru. 3$r5
3Idi &5
3I$ody5
3I"t ml 5
Lucrul cu $"agini
Imaginile sunt stocate in fisiere cu di&erse formate. 0ormatele acceptate de $ro#sere pentru fisierele
imagine sunt2
1. AI0 (Arap"ics Interc"ange 0ormat) cu extensia .gif8
2. ;*%A (;oint *"otograp"ic %xperts Aroup) cu extensia .+peg sau .+pg8
&. 1*M (1 *ixMap) cu extensia .xmp8
'. 14M (1 4itMap) cu extensia .x$m8
(. 4M* (4itMap) cu extensia .$mp (numai cu Internet %xplorer)8
+. TI00 (Tagged Image 0ile 0ormat) cu extensia .tif sau .tiff8
Cele mai raspandite formate sunt AI0 (@ $iti pentru o culoare' EFD culori posi$ile) si ;*%A (E9 $iti pentru o
culoare' 6DBBBE6D de culori posi$ile).
<resa U*L a unei i"agini
>L (!niform >esource Locator! K identificator unic al resursei) este un standard folosit in identificarea
unica a unei resurse in Internet. Toate imaginile cu care &om lucra &or a&ea adresa >L exprimata in
functie de directorul ce contine documentul HTML care face referire la imagine.
*entru a insera o imagine intr,o pagina' se utilizeaza etic"eta /i"g0 (de la !image!K imagine).
*entru a putea identifica imaginea care &a fi inserata se utilizeaza un atribut al etic"etei 3img5 si anume
"src" (de la !source!K sursa). -aca imaginea se afla in acelasi director cu fisierul HTML care face referire
la imagine' atunci adresa >L a imaginii este formata numai din numele imaginii' inclusi& extensia. -aca
imaginea se afla intr,un su$director al directorului paginii HTML din care este apelata' sa spunem
!images!' atunci aceasta este apelata cu >L,ul2 !Ii magesIi magi ne6. + pg! . In sc"im$' daca fisierul
imagine este situat intr,un director !images! dintr,un super director al directorului paginii HTML apelante'
referirea se face cu >L,ul2 !. . Ii magesIi magi ne6. + pg! . 64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 ) pagi na cu i magi ne3It i t l e5
3I"ead5
3$ody5
) pagi na care cont i ne o i magi ne i n su$di rectorul i mages di nt r,un super di rector al
unui superdi rect or al di rectorul ui pagi ni i HTML
3i mg srcK!. . I. . Ii magesIi magi ne6. + pg!5Text dupa i magi ne.
3I$ody5
3I"t ml 5
Chenarul si i"ensionarea unei i"agini
-aca doriti sa adaugati un c"enar in +urul imaginii' folositi atributul "order" al etic"etei 3img5. Malorile
acestui atri$ut sunt numere intregi poziti&e.
) imagine are anumite dimensiuni pe orizontala si &erticala' sta$ilite in momentul crearii ei. -aca nu se
cere altfel' aceste dimensiuni sunt respectate in momentul afisarii ei in $ro#ser' in cadrul paginii #e$.
-imensiuniile presta$ilite ale unei imagini pot fi modificate la afisarea in $ro#ser prin intermediul
atributelor ")idt*" si "*ei!*t" setate de proiectant in codul HTML al paginii la &alorile dorite. Spre
e4e"pl u5
3"t ml 5
3"ead5
3t i t l e5 Imagi ne cu c"enar si mari t 3It i t l e5
3I"ead5
3$ody5
) i magi ne cu c"enar si de E:: pi xel i 1 6F Q
3i mg srcK!Ii magesIi magi ne6. + pg! $orderK!F! #i dt "K!7F:! "ei g"t K!EFQ!5 Text dupa
i magi ne.
3I$ody5
3I"t ml 5
<linierea unei i"agini
.linierea unei imagini se poate face prin intermediul atributului "ali!n" care poate lua urmatorele &alori2
1. !left! , aliniere la stanga8 celelalte componente sunt dispuse pe partea dreapta8
2. !rig"t! , aliniere la dreapta8 celelalte componente sunt dispuse pe partea stanga8
&. !top! , aliniere deasupra8 partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede
imaginea8
'. !middle ! , aliniere la mi+loc8 mi+locul imaginii se aliniaza cu linia de $aza a textului ce precede
imaginea.
(. !$ottom! , aliniere la $aza8 partea de +os a imaginii se aliniaza cu linia de $aza a textului.
64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 .l i ni erea unei i magi ni 3It i t l e5
3I"ead5
3$ody5
.l i ni eri 2
3$r5 *e &ert i cal a2
3i mg srcK!Ii magesIi mg6. + pg! al i gnK!t op!5
La mi + l oc2 3i mg srcK!Ii magesIi mg6. + pg! al i gnK!mi ddl e!5
;os2 3i mg srcK!Ii magesIi mg6. + pg! al i gnK!$ott om!5 Text dupa i magi ne.
3I$ody5
3I"t ml 5
<linierea te4tului in =urul i"aginii
<tributele "*space" si "vspace" precizeaza distanta in pixeli pe orizontala' respecti& pe &erticala' dintre
imagine si restul elementelor din pagina. <tributul "alt" admite ca &aloare un text care &a fi afisat in
locul imaginii' in functie de setarile $ro#serului utilizatorului2
3"t ml 5
3"ead5
3t i t l e5 .l i ni erea t ext ul ui 3It i t l e5
3I"ead5
3$ody5
3"95I magi ne al i ni at l a st anga i ncon+ urat a de text l a di st ant a de 7: de pi xel i .
3I"953p5 Text i nai nt e de i magi ne. Text i nai nt e de i magi ne. Text i nai nt e de
i magi ne. Text i nai nt e de i magi ne. Text i nai nt e de i magi ne. Text i nai nt e de
i magi ne. Text i nai nt e de i magi ne. Text i nai nt e de i magi ne.
3i mg srcK!. . Ii magesIi mg6. + pg! al i gnK!l ef t ! "spaceK!7:! &spaceK!7:!
al t K!ni &ersi t at ea de (ord 4ai a Mare!5
Text dupa i magi ne. Text dupa i magi ne. Text dupa i magi ne. Text dupa i magi ne. Text dupa
i magi ne. Text dupa i magi ne. Text dupa i magi ne. Text dupa i magi ne. Text dupa
i magi ne. Text dupa i magi ne.
3I$ody5
3I"t ml 5
$"agini pentru #onul unei pagini
) imagine poate fi utilizata pe post de fundal al unei pagini =e$. In acest scop se foloseste atributul
"ac,!round" al etic"etei 3$ody5' a&and ca &aloare adresa >L a imaginii. Imaginea se multiplica pe
orizontala si pe &erticala pana umple intregul ecran. De e4e"pl u5
3"t ml 5
3"ead5
3t i t l e5 *agi na cu i magi ne de f ond3It i t l e5
3I"ead5
3$ody $ackgroundK!. . Ii magesIi mg6. + pg!5
63$r5E3$r573$r593$r5 F3$r5D3$r5B3$r 5@3$r 5 ?3$r5 3I$ody5
3I"t ml 5
$"agini #olosite ca legaturi
) legatura (link) introduce in pagina =e$ o zona acti&a. %fectuand click cu $utonul mouse,ului pe aceasta
zona' in $ro#ser se &a incarca o alta pagina. *entru a utiliza imaginea !legatura.+pg! drept legatura catre
pagina index."tml utilizam sintaxa2
3a "ref K!i ndex. "t ml !53i mg srcK !. . I. . Ii magesIi mg6. + pg !53Ia5
In mod presta$ilit' imaginea utilizata pe post de zona acti&a este incon+urata de un c"enar a&and culoarea
unei legaturi. -aca sta$ilim pentru atributul "order" al etic"etei 3img5 la :' acest c"enar dispare.
64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 Imagi ni f ol osi t e ca l egaturi 3It i t l e5
3I"ead5
3$ody!53"95I magi ni f ol osi t e ca l egat uri 3I"95
Text i nai nt e de i magi ne. 3a "ref K!i ndex. "t ml !53i mg srcK!. . I. . Ii magesIi mg6. + pg
!53Ia5
Text dupa i magi ne.
3I$ody5
3I"t ml 5
Legaturi in HTML
Lagaturile (link,urile) reprezinta partea cea mai importanta a unei pagini =e$. %le transforma un text
o$isnuit in "ipertext sau "iperlegatura' care permite trecerea rapida de la o informatie aflata pe un anumit
ser&er la alta informatie memorata pe un alt ser&er aflat oriunde in lume. Legaturile sunt zone acti&e intr,
o pagina =e$' adica zone de pe ecran sensi$ile la apasarea $utonului stang al mouse,ului.
Legaturi intre pagini a#late in acelasi irector
) legatura de pe o pagina catre o alta aflata in acelasi director se formeaza cu a+utorul etic"etei /a0 (de
la !anc"or!K ancora). *entru a preciza pagina indicata de legatura se utilizeaza un atri$ut al etic"etei 3a5
numit !"ref!' care ia ca &aloare numele fisierului HTML aflat in acelasi director. Rona acti&a care de&ina
sensi$ila la apasarea $utonului stang al mouse,ului este formata din textul cuprins intre etic"etele 3a5 si
3Ia5. *rezenta etic"tetei de sfarsit 3Ia5 este o$ligatorie. 64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 Comut area i nt re doua pagi ni 3It i t l e5
3I"ead5
3$ody5
3"75*agi na 6 3I"75
3a "ref K!pagi naSE. "t ml !5
Li nk cat re pagi na E 3Ia5
3I$ody5
3I"t ml 5
Legaturi intre pagini a#late pe acelasi isc local
-aca pagina referita se afla pe acelasi disc local cu pagina care face referirea dar intr,un alt director'
atunci' pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relati&a' upa
cu" ur"eaza (se mentine analogia cu adresarea relati&a a imaginilor)2
3"t ml 5
3"ead5
3t i t l e5 Comut area i nt re doua pagi ni af l at e pe acel asi di sc l ocal 3It i t l e5
3I"ead5
3$ody5
3"75*agi na 7 3I"75
3a "ref K!. . I. . Iexempl eIl i st Iexempl uS66. "t ml !5
Li nk cat re o pagi na cu l i st e 3Ia5
3I$ody5
3I"t ml 5
! legatura catre un site particular
In exemplul urmator se utilizeaza adresa >L ###.netscape.com care incarca pagina de start din site,ul
firmei (etscape Corporation2
3"t ml 5
3"ead5
3t i t l e5 Li nk cat re si te,ul f i rmei (et scape3It i t l e5
3I"ead5
3$ody5
3"75Li nk cat re si te,ul f i rmei (et scape 3I"75
3a "ref K!"t tp2II###. net scape. com!5
(et scape Corporat i on 3Ia5
3I$ody5
3I"t ml 5
<ncore
Intr,o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi. ) ancora se defineste
de asemenea prin etic"eta 3a5. *entru a defini ancora se utilizeaza atributul "na$e" care primeste ca
&aloare un nume atri$uit ancorei (de exemplu !leg6!). *entru a insera o legatura catre !leg6! definita in
aceeasi pagina' se utilizeaza etic"eta 3a5 a&and atri$utul !"ref! la &aloarea !Oleg6!. *entru a introduce o
legatura catre o ancora definita in alta pagina aflata in acelasi director' atri$utul !"ref! primeste de data
aceasta o &aloare de forma !numeSf i si er. "t ml OnumeSancora! . 64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 .ncore def i ni t e i n acel asi document si i n al t document 3It i t l e5
3I"ead5
3$ody5
3"75.ncore def i ni t e i n acel asi document si i n al t document 3I"75
3a "ref K!Oancora6!5
Li nk cat re ancora 6 3I"75
3a "ref K!. . I. . Il egat uri . "t ml Oanc!5
Li nk cat re o ancora di n al t document 3Ia5
3$r5 63$r5E3$r 573$r593$r5F
3a nameK!ancora6!5.ncora 6
3I$ody5
3I"t ml 5
Legaturi catre #isiere oarecare
) pagina =e$ poate contine legaturi catre orice tip de fisiere aflate pe orice ser&ere din Internet. *entru
aceasta se utilizeaza etic"eta 3a5 a&and &aloarea atributului "*ref" egala cu adresa >L a fisierului
destinatie. .tunci cand se efectueaza clic pe legatura din exemplul urmator' $ro#serul desc"ide o caseta
de dialog intitulata !0ile do#nload! care permite2
1. sa sal&ati pe discul local fisierul8
2. sa lansati in executie aplicatia capa$ila sa interpreteze corect fisierele de tipul respecti&.
64e"pl u5
3"t ml 5
3"ead5
3t i t l e5 Legat uri cat re f i si ere oarecare3It i t l e5
3I"ead5
3$ody5
3"75Legat uri cat re f i si ere oarecare3I"753$r5
3a "ref K!f i si er. zi p!5
Li nk cat re f i si erul f i si er. zi p
3I$ody5
3I"t ml 5

Liste in HTML
nul din cele mai o$isnuite elemente din documentele cu mai multe pagini este un set de definitii'
referinte sau indexuri. Alosarele sunt exemple clasice in acest sens8 cu&intele sunt listate in ordine
alfa$etica' urmate de definitii ale termenilor respecti&i. In HTML' intreaga sectiune a unui glosar &a fi
gestoinata printr,o lista de definitii care este inclusa intr,o perec"e de marca+e de tip lista de definitii2
/l0.../1l0 (de la !definition list! K lista de definitii).
!bservatii5
, n termen al listei este marcat de etic"eta /t0 (de la !definition term!K termen definit)8
, -efinitia unui termen este initiata de etic"eta /0 (de la !definition description!K descrierea
definitiei)8
, -efinitia unui termen incepe pe o linie noua si este identata8
64e"pl u5
3"t ml 5
3"ead53t i t l e5l i st exS63It i t l e53I"ead5
3$ody53HE al i gnKcenter5) l i st a de def i ni t i i 3IHE53"r 5
3dl 5
Al osar de t ermeni de =orl d =i de =e$
3dt 53$5"ypert ext 3I$5
3dd5, o i nt erconect are =e$ de i nf ormat i i de t i p text ' i n care ori ce cu&ant sau f raza
poat e f ace l egatura cat re un al t punct di n document sau cat re un al t document
3dt 53$5dat e3I$5
3dd5, f l uxul nesf arsi t de materi al e care apar pe Int ernet ' spre deose$i re de
i nf ormat i i care sunt date cu un anumi t i nt el es sau &al oare
3dt 53$5i nf ormat i e3I$5
3dd5, su$,setul de date care are ef ect i & semni f i cat i e si care est e ut i l l a moment ul
curent
3Idl 5
3I$ody5
3I"t ml 5
Liste neoronate
) lista neordonata este un $loc de text delimitat de etic"etele corespondente /ul0.../1ul0 (!ul! &ine de
la !unordered list!K lista neordonata). 0iecare element al listei este initiat de etic"eta /li0 (list item).
Lista &a fi indentata fata de restul paginii =e$ si fiecare element al listei incepe pe un rand nou.
64e"pl u5
3"t ml 5
3"ead53t i t l e5l i st exSE3It i t l e53I"ead5
3$ody53HE al i gnKcenter5) l i st a neordonat a3IHE53"r 5
Al osar de t ermeni =orl d =i de =e$
3ul 5Cul ori uzual e di sponi $i l e pri n nume
3l i 54l ack 3l i 5="i t e 3l i 5>ed 3l i 5Areen 3l i 54l ue 3l i 5Jel l o# 3l i 5*urpl e 3l i 5.Nua
3Iul 5
3I$ody5
3I"t ml 5
Tag,urile 3ul5 si 3li5 pot a&ea un atribut " t%pe" care sa$ileste caracterul asfisat in fata fiecarui
element al listei. Malorile posi$ile al acestui atri$ut sunt2
1. !circle! (cerc)8
2. !disc! (disc plin) , &aloarea implicita8
&. !sNuare! (patrat)8
Listele neordonate pot fi im$ricate pe mai multe ni&eluri' ca in e4e"pl ul ur"ator5
3"t ml 5
3$ody53HE al i gnKcenter5) l i st a neordonat a de l i st e neordonat e3IHE53"r 5
Al osar de t ermeni de =orl d =i de =e$
3ul 5%l emente si at ri $ute a unei pagi ni HTML
3l i 50rameset 3ul 5.t ri $ut e2 3l i 5col s 3l i 5ro#s 3l i 5$order 3Iul 5
3l i 50rame 3ul 5.t ri $ut e2 3l i 5src 3l i 5name 3l i 5scrol l i ng 3Iul 5
3Iul 5
3I$ody5
3I"t ml 5
Liste oronate
) lista ordonata de elemente este un $loc de text delimitat de etic"etele corespondente /ol0.../1ol0
(!ol! &ine de la !ordered list!K lista ordonata). 0iecare element al listei este initiat de etic"eta 3li5 (list
item). Lista &a fi indentata fata de restul paginii =e$ si fiecare element al listei incepe pe un rand nou.
64e"pl u5
3"t ml 5
3$ody53HE al i gnKcenter5) l i st a ordonat a3IHE53"r5
3ol 5Cul ori uzual e di sponi $i l e pri n nume
3Iol 5
3I$ody5
3I"t ml 5
Tag,urile 3ol5 si 3li5 pot a&ea un atribut " t%pe" care sta$ileste tipul de caractere utilizate pentru
ordonarea listei. Malorile posi$ile sunt2
1. !.! pentru ordonare de tipul .' 4' C' -' etc. (litere mari)8
2. !a! pentru ordonare de tipul a' $' c' d' etc. (litere mici)8
&. !I! pentru ordonare de tipul I' II' III' IM' etc. (cifre romane mari)8
'. !i! pentru ordonare de tipul i' ii' iii' i&' etc. (cifre romane mici)8
(. !6! pentru ordonare de tipul 6' E' 7' 9' etc. (cifre ara$e , optiune presta$ilita)8
Ur"atorul e4e"pl u este o lista ordonata cu cifre romane2
3"t ml 5
3"ead53t i t l e5l i st exSF3It i t l e53I"ead5
3$ody53HE al i gnKcenter5) l i st a ordonat a cu ci f re romane3IHE53"r 5
3ol t ypeK!I!5Cul ori uzual e di sponi $i l e pri n nume
3Iol 5
3I$ody5
3I"t ml 5
Tag,ul 3ol 5 poat e a&ea un at ri $ut st art care st a$i l est e &al oarea i ni t i al a a sec&ent ei
de ordonare. Mal oarea acest ui at ri $ut t re$ui e sa f i e un numar i nt reg pozi t i &.
rmat orul exempl u este o l i st a ordonat a cu l i t ere mari ' i ncepand cu &al oarea C.
3"t ml 5
3"ead53t i t l e5l i st exSD3It i t l e53I"ead5
3$ody53HE al i gnKcenter5) l i st a ordonat a cu l i t ere mari ' i ncepand de l a &al oarea
C3IHE53"r 5
3ol t ypeK!.! st art K!7!5Cul ori uzual e di sponi $i l e pri n nume
3l i 5>ed 3l i 5Areen 3l i 54l ue 3l i 5Jel l o# 3l i 5*urpl e 3l i 5.Nua
3Iol 5
3I$ody5
3I"t ml 5
Listele ordonate pot fi im$ricate intre ele sau cu liste neordonate' ca in e4e"pl ul ur"ator5
3"t ml 5
3"ead53t i t l e5l i st exS@3It i t l e53I"ead5
3$ody53HE al i gnKcenter5) l i st a ordonat a de l i st e ordonate si neordonat e3IHE53"r5
3ol 5n si stem i nf ormat i c i ncl ude2
3l i 5Hard#are2
3ol 5
3l i 5pl aca de $aza
3l i 5procesor
3l i 5memori e
3l i 5"arddi sk
3Iol 5
3l i 5/of t #are2
3ul 5
3l i 5Li nux
3l i 5=i ndo#s
3l i 5)/IE
3l i 5ni x
3Iul 5
3l i 5/of t #are de apl i cat i e2
3ul t ypeK!di sc!5
3l i 5Mi sual CPP
3l i 5;a&a
3l i 5/TL
3l i 5Corel -ra#
3Iul 5
3Iol 5
3I$ody5
3I"t ml 5
Tabele in HTML
Ta$elele ne permit sa cream o retea dreptung"iulara de zone' fiecare zona a&and propriile optiuni pentru
culoarea fondului' culoarea textului' alinierea textului' etc.
*entru a insera un ta$el se folosesc etic"etele corespondente /T<3L60.../1T<3L60. n ta$el este
format din randuri. *entru a insera un rand intr,un ta$el se folosesc etic"etele /T*0 .../1T*0 (de la
!ta$le ro#! K rand de ta$el ). 0olosirea etic"etei de sfarsit este optionala. n rand este format din mai
multe celule ce contin date. ) celula de date se introduce cu etic"etele /TD0.../1TD0.
In mod presta$ilit' un ta$el nu are c"enar. *entru a adauga un c"enar unui ta$el' se utilizeaza un atribut
al etichetei nu"it "order". .cest atri$ut poate primi ca &aloare orice numar intreg (inclusi& :) si
reprezinta grosimea in pixeli a c"enarului ta$elului. -aca atri$utul !$order! nu este urmat de o &aloare'
atunci ta$elul &a a&ea o grosime presta$ilita egala cu 6 pixel. ) &aloare egala cu : a grosimii semnifica
a$senta c"enarului. Cand atri$utul !$order! are o &aloare nenula' c"enarul unui ta$el are un aspect
tridimensional.
<linierea tabelului
*entru a alinia un ta$el intr,o pagina =e$ se utilizeaza atributul "ali!n" al etic"etei 3T.4L%5' cu
urmatoarele &alori posi$ile2 !left! (&aloarea presta$ilita)' !center! si !rig"t !. .linierea este importanta
pentru textul ce incon+oara ta$elul. .stfel2
, daca ta$elul este aliniat stanga' atunci textul care urmeaza dupa punctul de inserare al ta$elului &a fi
dispus in partea dreapta a ta$elului.
, daca ta$elul este aliniat dreapta' atunci textul care urmeaza dupa punctul de inserare al ta$elului &a fi
dispus in partea stanga a ta$elului.
, daca ta$elul este aliniat pe centru' atunci textul care urmeaza dupa punctul de inserare al ta$elului &a fi
afisat pe toata latimea paginii' imediat su$ ta$el.
De#inirea culorilor e #on pentru un tabel
Culoarea de fond se sta$ileste cu a+utorul atributului "!color"' care poate fi atasat intregului ta$el prin
specificarea in cadrul etic"etei 3ta$le5 sau numai celulor de date prin specificarea sa in etic"etele de
celula (3td5). Malorile pe care le poate primi atri$utul !$gcolor! sunt cele cunoscute pentru o culoare.
Di"ensionarea celulei unui tabel
-istanta dintre doua celule &ecine se defineste cu a+utorul atributului "cellspacin!" al etic"etei
3T.4L%5. Malorile acestui atri$ut pot fi numere intregi poziti&e' inclusi& :' si reprezinta distanta in pixeli
dintre doua celule &ecine. Malorea presta$ilita a atri$utului !cellspacing! este E. -istanta dintre marginea
unei celule si continutul ei poate fi definita cu a+utorul atributului "cellpaddin!" al etic"etei 3T.4L%5.
Malorile acestui atri$ut pot fi numere intregi poziti&e si reprezinta distanta in pixeli dintre celule si
continutul lor. Malorea presta$ilita a atri$utului !cellpadding! este 6.
Di"ensionarea unui tabel
-imensiunile unui ta$el , latimea si inaltimea , pot fi sta$ilite exact prin intermediul a oua atribute -
")idt*" si "*ei!*t" , ale etic"etei 3T.4L%5. Malorile acestor atri$ute pot fi2
1. numere intregi poziti&e reprezentand latimea respecti& inaltimea in pixeli a ta$elului8
2. numere intregi intre 6 si 6::' urmate de semnul Q' reprezentand fractiunea din latimea si inaltimea
totala a paginii.
<linierea continutului unei celule
.linierea pe orizontala a continutului unei celule se face cu a+utorul atributului "ali!n" care poate lua
&alorile2
1. !left! (la stanga)8
1. !center! (centrat) , &aloarea presta$ilita8
&. !rig"t! (la dreapta)8
'. !c"ar! (alinierea se face fata de un caracter).
.linierea pe &erticala a continutului unei celule se face cu a+utorul atributului "vali!n" care poate lua
&alorile2
1. !$aseline! (la $aza)8
&' !$ottom! (+os)8
&. !middle! (la mi+loc' &aloarea presta$ilita)8
'. !top! (sus).
64e"pl u de ta$el reunind toate elementele descrise pana acum2
3"t ml 5
3"ead53t i t l e5Ta$el 3It i t l e53I"ead5
3$ody5
3t a$l e $orderK!6! cel l paddi ngK!6:! cel l spaci ngK!6F! #i dt "K!6::Q!5
3t r5
3t d al i gnK!mi ddl e!5dat a dat a dat a3It d5
3It r5
3t r5
3It r5
3t r al i gnK!ri g"t !5
3t d5dat a dat a dat a3It d5
3It r5
3It a$l e5
3I$ody5
3I"t ml 5
Tabele cu #or"e oarecare
n ta$el tre$uie pri&it ca o retea dreptung"iulara de celule. Cu a+utorul a doua atri$ute ale etic"etelor
3T>5 si 3T-5' o celula se poate extinde peste celule &ecine. .stfel2
1. extinderea unei celule peste celulele din dreapta ei se face cu a+utorul atributului "colspan"' a carui
&aloare determina numarul de celule care se unifica.
2. extinderea unei celule peste celulele de su$ ea se face cu a+utorul atributului "ro)span"' a carui
&aloare determina numarul de celule care se unifica.
/unt posi$ile extinderi simultane ale unei celule pe orizontala si pe &erticala. In acest caz' in etic"ete &or fi
prezente am$ele atri$ute !colspan! si !ro#span!.
64e"pl u5
3"t ml 5
3"ead53t i t l e5Ta$el 3It i t l e53I"ead5
3$ody5
3t a$l e $orderK!6! cel l paddi ngK!6:! cel l spaci ngK!6F! #i dt "K!6::Q!5
3t r5
3t d al i gnK!mi ddl e! ro#spanK!7!5dat a dat a dat a3It d5
3t d al i gnK!mi ddl e! col spanK!E!5dat a dat a dat a3It d5
3It r5
3t r5
3It r5
3t r al i gnK!ri g"t !5
3It r5
3It a$l e5
3I$ody5
3I"t ml 5
Care in HTML
.erestrele sau >carele? ne permit sa definim in fereastra $ro#serului su$,ferestre in care sa putem
incadra documente noi HTML. /u$,ferestrele sunt definite intr,un fisier HTML special' in care $locul
/bo20.../1bo20 este inlocuit de $locul /#ra"eset0.../1#ra"eset0. In interiorul acestui $loc'
fiecare cadru este introdus prin etic"eta /#ra"e0.
n atribut o$ligatoriu al etic"etei 3frame5 este "src"' ce primeste ca &aloare adresa >L a documentului
HTML care &a fi incarcat in acel frame. -efinirea cadrelor se face prin impartirea ferestrei ecran (si a
su$ferestrelor) in linii si coloane2
1. impartirea unei ferestre intr,un numar de su$ferestre de tip coloana se face cu a+utorul atributului
"cols" al etic"etei 3frameset5 ce descrie acea fereastra8
2. impartirea unei ferestre intr,un numar de su$ferestre de tip linie se face cu a+utorul atriutului
"ro)s" al etic"etei 3frameset5 ce descrie acea fereastra8
&. &aloare atri$utelor !cols! si !ro#s! este o lista de elmente separate prin &irgula' care descriu modul in
care se face impartirea. %lementele listei pot fi2
&.1. un numar intreg de pixeli8
&.2. procente din dimensiunea ferestrei (numar intre 6 si ?? terminat cu Q)8
&.&. nU care inseamna n parti din spatiul ramas8
64e"pl u -5 !col sKE::' U' F:Q' U! inseamna o impartire in 9 su$ferestre' dintre care prima are E::
pixeli latime' a treia ocupa +umatate din spatiul total disponi$il iar a doua si a patra ocupa in mod egal
restul de spatiu ramas disponi$il.
64e"pl u &5 !col sKE::' 6U' F:Q' EU! inseamna o impartire in 9 su$ferestre' dintre care prima are
E:: pixeli latime' a treia ocupa +umatate din spatiul total disponi$il iar a doua si a patra ocupa in mod egal
restul de spatiu ramas disponi$il' care se imparte in trei parti egale' a doua fereastra ocupand o parte iar
a patra ocupand E parti.
!bservatii5
, daca mai multe elemente din lista sunt configurate cu U' atunci spatiul disponi$il ramas pentru ele se &a
imparti in mod egal.
, o su$fereastra poate fi un singur cadru (folosind 3frame5) , in care se &a incarca un document HTML ,
sau poate fi impartita la randul ei la alte su$fereste constituind cadre noi (folosind 3frameset5).
64e"pl u5
3"t ml 5
3"ead53t i t l e5f erexS63It i t l e53I"ead5
3f rameset col sK!U' U!5
3f rame srcK!p6. "tml !5
3f rame srcK!pE. "tml !5
3If rameset 5
3I"t ml 5
In exemplul urmator este creata o pagina =e$ cu trei cadre orizontale. *entru al doilea cadru &aloarea
atri$utului !src! este adresa >L a unei imagini' ca i n e4e"pl u5
3"t ml 5
3"ead53t i t l e5f erexSE3It i t l e53I"ead5
3f rameset ro#sK!6::' U' 6:Q!5
3f rame srcK!x. + pg!5
3If rameset 5
3I"t ml 5
In exemplul urmator este creata o matrice de 9 cadre (E x E). *entru a realiza acest lucru' se folosesc
simultan cele doua atri$ute Cols si >o#s' precum in e4e"pl ul ur"ator5
3"t ml 5
3f rameset ro#sK!U' U! col sK!U' U!5
3If rameset 5
3I"t ml 5
In exemplul urmator este creata o pagina =e$ cu trei cadre mixte. *entru a o crea se procedeaza din
aproape in aproape. Mai intai' pagina este impartita in doua su$ferestre de tip coloana' dupa care a doua
su$fereastra este impartita in doua su$ferestre de tip linie' ca in e4e"pl ul e "ai = os5
3"t ml 5
3f rameset col sK!E:Q' U!5
3f rameset ro#sK!U' U!5
3If rameset 5
3If rameset 5
3I"t ml 5
Culori pentru chenarele carelor si i"ensionarea chenarului unui caru
*entru a sta$ili culoarea c"enarului unui cadru se utilizeaza atributul "ordercolor". .cest atri$ut
primeste ca &aloare un nume de culoare sau o culoare definita in conformitate cu modelul de culoare >A4.
.tri$utul $ordercolor poate fi atasat atat etic"etei 3frameset5 pentru a sta$ili culoarea tuturor c"enarelor
cadrelor incluse' cat si etic"etei 3frame5 pentru a sta$ili culoarea c"enarului pentru un cadru indi&idual.
<tributul "order" al etic"etei 3frameset5 permite configurarea latimii c"enarelor tuturor cadrelor la un
numar dorit de pixeli. Maloarea presta$ilita a atri$utului !$order! este de F pixeli. ) &aloare de : pixeli &a
defini un cadru fara c"enar.
64e"pl u5
3"t ml 5
3"ead53t i t l e5f erexSF3It i t l e53I"ead5
3f rameset col sK!E:Q' U! $ordercol orK!green! $orderK!6F!5
3f rame srcK!pE. "tml ! $ordercol orK!$l ue!5 3f rame srcK!p7. "t ml !5
3If rameset 5
3I"t ml 5
In mod presta$ilit' c"enarul afisat al unui cadru are aspect tridimensional. .fisarea c"enarului unui cadru
poate fi dezacti&ata daca se utilizeaza atributul "fra$eorder" cu &aloare !no!. .cest atri$ut poate fi
atasat atat etic"etei 3frameset5 (dezacti&area fiind &ala$ila pentru toate cadrele incluse) cat si etic"etei
3frame5 (dezacti&area fiind &ala$ila numai pentru un singur cadru).
64e"pl u5
3"t ml 5
3"ead53t i t l e5f erexSFS63It i t l e53I"ead5
3f rameset col sK!E:Q' U! $orderK!:!5
3If rameset 5
3I"t ml 5
3"t ml 5
3"ead53t i t l e5f erexSFSE3It i t l e53I"ead5
3f rameset col sK!E:Q' U! f rame$orderK!no!5
3If rameset 5
3I"t ml 5
3are e e#ilare
<tributul "scrollin!" al etic"etei 3frame5 este utilizat pentru a adauga unui cadru o $ara de derulare
care permite na&igarea in interiorul documentului afisat in interiorul cadrului. Malorile posi$ile sunt2
1. !yes! , $arele de derulare sunt adaugate intotdeauna8
2. !no! , $arele de derulare nu sunt utiliza$ile8
&. !auto! , $arele de derulare sunt &izi$ile atunci cand este necesar
64e"pl u5
3"t ml 5
3"ead53t i t l e5f erexSD3It i t l e53I"ead5
3f rameset col sK!U' U' U!5
3f rame srcK!p. "t ml ! scrol l i ngK!yes! noresi ze5
3f rame srcK!p. "t ml ! scrol l i ngK!no! noresi ze5
3f rame srcK!p. "t ml ! scrol l i ngK!aut o! noresi ze5
3If rameset 5
3I"t ml 5
<tributul "noresi#e" al etic"etei 3frame5 (fara nici o &aloare suplimentara) daca este prezent' in"i$a
utilizatorului posi$ilitatea de a redimensiona cadrul cu a+utorul mouse,ului.
Pozitionarea ocu"entului intr-un caru
<tributele "$ar!in*ei!*t" si "$ar!in)idt*" ale etic"etei 3frame5 permit sta$ilirea distantei in pixeli
dintre continutul unui cadru si marginile &erticale' respecti& orizontale ale cadrului.
Malori posi$ile2
, numar de pixeli8
, procent din latimea' respecti& din inaltimea cadrului8
64e"pl u5
3"t ml 5
3"ead53t i t l e5f erexSB3It i t l e53I"ead5
3f rameset col sK!U' U' U!5
3f rame srcK!p. "t ml !5
3f rame srcK!p. "t ml ! margi n"ei g"t KE:5
3f rame srcK!p. "t ml ! margi n#i dt "KE:5
3If rameset 5
3I"t ml 5
%xista $ro#sere care nu suporta cadre. *entru aceasta se utilizeaza in interiorul $locului 3frameset5
etic"eta /no#ra"es0. -aca programul de na&igare stie sa interpreteze cadre' &a ignora ce se gaseste in
aceasta portiune' iar daca nu' materialul cuprins in zona 3noframes5...3Inoframes5 &a fi singurul care &a
fi inteles si afisat. -e precizat este faptul ca intre 3noframes5 ... 3Inoframes5 se pot introduce orice alte
tag,uri HTML (inclusi& imagini' "iperlink,uri' ta$ele).
.or"ulare in HTML
Un #or"ular este un ansam$lu de zone acti&e alcatuit din $utoane' casete de selectie' campuri de
editare' etc. 0ormularele asigura construirea unor pagini =e$ care sa permita utilizatorilor sa introduca
efecti& informatii si sa le transmita ser&erului. 0ormularele pot &aria de la o simpla caseta de text' pentru
introducerea unui sir de caractere pe post de c"eie de cautare , element caracteristic tuturor motoarelor
de cautaredin =e$' pana la o structura complexa' cu multiple sectiuni' care ofera facilitati puternice de
transmisie a datelor. ) sesiune cu o pagina #e$ ce contine un formular cuprinde urmatoarele etape2
1. tilizatorul completeaza formularul si il expedieaza unui ser&er.
2. ) aplicatie dedicata de pe ser&er analizeaza formularul completat si (daca este necesar) stoc"eaza
datele intr,o $aza de date.
&. -aca este necesar ser&erul expedieaza un raspuns utilizatorului.
n formular este definit intr,un $loc delimitat de etic"etele corespondente /#or"0 si /1#or"0.
<tribute esentiale ale ele"entului /#or"0
%xista doua atri$ute esentiale ale elementului 3form52
1. <tributul "-ction" precizeaza ce se &a intampla cu datele formularului odata ce acestea a+ung la
destinatie. -e regula' &aloarea atri$utului !.ction! este adresa >L a unui script aflat pe un sr&er ===
care primeste datele formularului' efectueaza o prelucrare a lor si expedieaza catre utilizator un raspuns.
64e"pl u5
3f orm act i onK!"t t p2II###. ya"oo. comIcgi ,$i nInumeSf i s. cgi !5.
/cript,urile pot fi scrise in lim$a+ele *erl' C' *H*' nix s"ell' ;a&a.
2. <tributul @Met*od" precizeaza metoda utilizata de $ro#ser pentru expedierea datelor formularului.
/unt posi$ile urmatoarele &alori2
2.1. ".et" (&aloarea implicita). In acest caz' datele din formular sunt adaugate la adresa >L precizata
de atri$utul !.ction!. .tentie insa2
, nu sunt permise cantitati mari de date (maxim 6 L$)
, intre adresa >L si date este inserat un !?!.
-atele sunt adaugate conform sintaxei2 !numeScamp K &aloareScamp!. Intre diferite seturi de date este
introdus un !V!. 64e"pl u5
"tt p2II###. ya"oo. comIcgi ,$i nInumeSf i s. cgi ?nume6 K &al oare6VnumeE K &al oareE
2.2. "Post". In acest caz datele sunt expediate separat. /unt permise cantitati mari de date (de ordinul
M4).
*entru ca un formular sa fie functional tre$uie precizat ce se &a intampla cu el dupa completarea si
expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica
(e,mail). *entru aceasta se foloseste un atri$ut al etic"etei 3form5 si anume !.ction! care primeste ca
&aloare !mailto2! concatenat cu o adresa &alida de e,mail catre care se &a expedia formularul completat.
.or"ulare cu un ca"p e eitare si un buton e e4peiere
Ma+oritatea elementelor unui formular sunt definite cu a+utorul etic"etei /input0. *entru a preciza tipul
elementului se foloseste atributul " t%pe" al etic"etei 3input5. *entru un camp de editare' acest atri$ut
primeste &aloarea !text!. .lte atri$ute pentru un element 3input5 sunt2
1. <tributul "na$e" permite atasarea unui nume fiecarui element al formularului.
2. <tributul "value" permite atri$uirea unei &alori initiale unui element al formularului.
n $uton de expediere al unui formular se introduce cu a+utorul etic"etei 3input5' in care atributul "
t%pe" este configurat la &aloarea !su$mit!. .cest element poate primi un nume prin atri$utul !name!. *e
$uton apare scris implicit !/u$mit Tuery! sau explicit &aloarea atri$utului !&alue!' daca aceasta &aloare a
fost sta$ilita. 64e"pl u5
3"t ml 5
3"ead53t i t l e5f orm%xS6 3It i t l e53I"ead5
3$ody53HE5 n f ormul ar cu un camp de edi t are si un $ut on de expedi ere3IHE5
3"r5
3f orm act i onK!mai l t o2xxxxxWxxx. com! met "odK!post !5
(umel e23i nput t ypeK!t ext ! nameK!numel e! &al ueK!(umel e si prenumel e!53$r5
3i nput t ypeK!su$mi t ! &al ueK!expedi aza!5 3If orm53I$ody5
3I"t ml 5
*entru elementul 3input5 de tipul camp de editare (typeK !text!)' alte doua atri$ute pot fi utile2
1. <tributul "si#e" ce specifica latimea campului de editare. -aca textul introdus in camp de utilizator
depaseste aceasta latime' atunci se executa automat o derulare a continutului acestui camp8
2. <tributul "$a"len!t*" ce specifica numarul maxim de caractere pe care le poate primi un camp de
editare8 caracterele tastate peste numarul maxim sunt ignorate.
3utoane raio
4utoanele radio permit alegerea' la un moment dat' a unei singure &ariante de raspuns din mai multe
posi$ile. 4utoanele radio se introduc prin etic"eta 3input5 cu atributul " t%pe" a&and &aloarea !radio!.
64e"pl u5
3"t ml 5
3"ead53t i t l e5f ormexS93It i t l e53I"ead5
3$ody53HE5n f ormul ar cu $ut oane radi o3IHE5
3"r5
.l eget i sexul 23i nput t ypeK!radi o! nameK!sex! &al ueK!$!53$r 5
0emei esc23i nput t ypeK!radi o! nameK!sex! &al ueK!f !53$r 5
3i nput t ypeK!reset!5 3i nput t ypeK!su$mi t !5 3If orm53I$ody5
3I"t ml 5
La expedierea formularului se &a transmite una dintre perec"ile !sexK$! sau !sexKf!' in functie de
alegerea facuta de utilizator.
Casete e valiare
) caseta de &alidare (c"eck$ox) permite selectarea sau deselectarea unei optiuni. *entru inserarea unei
casete de &alidare se utilizeaza etic"eta 3input5 cu atributul " t%pe" configurat la &aloarea !c"eck$ox!.
)$ser&atii2
, fiecare caseta poate a&ea un nume definit prin atributul "na$e".
, fiecare caseta poate a&ea &aloarea presta$ilita !selectat! definita prin atributul "c*ec,ed".
64e"pl u5
3"t ml 5
3"ead53t i t l e5f ormexSF3It i t l e53I"ead5
3$ody53HE5n f ormul ar cu caset e c"eck$ox3IHE5
3"r5
.l eget i meni ul 23$r 5
*i zza 3i nput t ypeK!c"eck$ox! nameK!pi zza! &al ueK!o port i e!5
(ect ar 3i nput typeK!c"eck$ox! nameK!nect ar! &al ueK!un pa"ar!5
4ere 3i nput t ypeK!c"eck$ox! nameK!$ere! &al ueK!o st i cl a!5
Caf ea 3i nput t ypeK!c"eck$ox! nameK!caf ea! &al ueK!o ceasca!53$r5
3i nput t ypeK!reset!5 3i nput t ypeK!su$mi t !5 3If orm53I$ody5
3I"t ml 5
.or"ulare e selectie
n formular de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr,o lista finita.
Lista de selectie este inclusa in formular cu a+utorul etic"etelor corespondente /select0 si /1select0. )
lista de selectie poate a&ea urmatoarele atri$ute2
1. <tributul "na$e"' care ataseaza listei un nume (utilizat in perec"ile !nameK&alue! expediate
ser&erului)8
2. <tributul "si#e"' care precizeaza (printr,un numar intreg poziti&' &aloarea presta$ilita fiind 6) cate
elemente din lista sunt &izi$ile la un moment dat pe ecran (celelalte de&enind &izi$ile prin actionarea $arei
de derulare atasate automat listei).
%lementele unei liste de selectie sunt incluse in lista cu a+utorul etic"etei /option0. -oua atri$ute ale
etic"etei option se do&edesc utile2
1. <tributul "value" ce primeste ca &alore un text care &a fi expediat ser&er,ului in perec"ea
!nameK&alue!8 daca acest atri$ut lipseste' atunci catre ser&er &a fi expediat textul ce urmeaza dupa
3option58
2. <tributul "selected" (fara alte &alori) ce permite selectarea presta$ilita a unui element al listei.
64e"pl u5
3"t ml 5
3"ead53t i t l e5f ormexSB3It i t l e53I"ead5
3$ody53HE5n f ormul ar cu o l i st a de sel ect i e3IHE5
3"r5
ni &ersi t at ea a$sol &i t a23$r 53$r 5
3sel ect nameK!uni &ersi t at e! si zeK!7!5 3opt i on &al ueK!4!5 ni &ersi t at ea di n Cl u+
3opt i on &al ueK!(4M! sel ect ed5 ni &ersi t at ea de (ord 4ai a Mare
3opt i on &al ueK!TT!5 ni &ersi t at ea Tec"ni ca di n Ti mi soara
3opt i on &al ueK!T4!5 ni &ersi t at ea Tec"ni ca di n 4raso&
3Isel ect 53$r53$r5
3i nput t ypeK!reset!5 3i nput t ypeK!su$mi t !5
3If orm53I$ody5
3I"t ml 5
Ca"puri e eitare "ultilinie
Intr,un formular' campurile de editare multilinie pot fi incluse cu a+utorul etic"etei /te4tarea0. %tic"eta
are urmatoarele atri$ute2
1. <tributul "cols"' care specifica numarul de caractere afisate intr,o linie8
2. <tributul "ro)s"' care specifica numarul de linii afisate simultan8
&. <tributul "na$e"' care permite atasarea unui nume campului de editare multilinie8
'. <tributul ")rap"' (de la !#ord #rap!K trecerea cu&intelor pe randul urmator)' care determina
comportamentul campului de editare fata de sfarsitul de linie.
.cest atri$ut (!#rap!) poate primi urmatoarele &alori2
a/ "off"8 in acest caz2
, intreruperea cu&intelor la marginea dreapta a editorului se produce numai cand doreste utilizatorul8
, caracterul de sfarsit de linie este inclus in textul transmis ser&erului o data cu formularul8
/ "*ard"8 in acest caz2
, se produce intreruperea cu&intelor la marginea dreapta a editorului8
, caracterul de sfarsit de linie este inclus in textul transmis ser&erului o data cu formularul8
c/ "soft"8 in acest caz2
, se produce intreruperea cu&intelor la marginea dreapta a editorului8
, nu se include caracterul de sfarsit de linie in textul transmis ser&erului o data cu formularul8
64e"pl u5
3"t ml 5
3"ead53t i t l e5f ormexS?3It i t l e53I"ead5
3$ody53HE5n f ormul ar cu un camp de edi t are mul t i l i ni e3IHE5 3"r5
3t ext area nameK!t ext mul t i l i ni e! col sK!7:! ro#sK!F! #rapK!of f !5
*ri ma l i ni e di n t ext ul i ni t i al .
. doua l i ni e di n text ul i ni t i al . 3It ext area5
3i nput t ypeK!reset!5 3i nput t ypeK!su$mi t !5
3If orm53I$ody5
3I"t ml 5

Marca=e e 3aza

<HTML> </HTML> Defineste un fisier in format Web#
<HEAD> </HEAD> $ntetul documentului#
<TITLE> </TITLE> Titlul documentului#
<BODY> </BODY> &orpul paginii HTML#
*+&,L,) - culoare &uloarea de fond a paginii#
T./T-culoare &uloarea textului pe pagini#
L'01-culoare
&uloarea legaturiilor ne"izitate din
pagini#
2L'01-culoare &uloarea legaturilor "izitate din pagini#
$L'01-culoare
&uloarea legaturilor pe durata clic3(ului
exacutat de utilizator#
*$&1+),40D - url 'maginea de fond pentru pagina#
<P> !aragraf#
<Hn> <Hn>
0i"el de subtitlu al documentului 5n -
6(78#
<FONT> </FONT> %pecifica atribute ale textului incadrat#
%'9.-n Dimensiunea textului este 6(:#
;$&.-"a,b"
%pecifica fontul< a, daca este disponibil,
sau b.
&,L,)-s
&uloarea textului< fie un nume de
culoare, fie o "aloare )+*#
<BR> Linie noua#
<PRE> </PRE> 'nformatie preformatata#
 &omentariu HTML#
<CENTER>
</CENTER>
&entreaza materialul in pagina#
<HR> )igla orizontala#
%'9.-x 'naltimea riglei in pixeli#
W'DTH-x Latimea riglei in pixeli sau in procente#
0,%H$D.
Dezacti"eaza afisarea umbrei pentru
rigla orizontala#
$L'+0-x
$linierea riglei orizontale in pagina
5left, center, right8#
&,L,)-x
&uloarea riglei orizontale 5numai pentru
'.8
<A> </A> Marca= de tip ancora#
H).;-url )eferinta hipertext#
H).;-#nume )eferinta catre o ancora interna#
0ame-nume Definitia unei ancore interne#
Marca=e .or"atare Caractere

<B> </B> $fiseaza text cu caractere aldine#
<I> </I> $fiseaza text cu caractere cursi"e#
<U> </U> $fiseaza text subliniat#
<TT> </TT> Text cu font monospatiu#
<CITE> </CITE> &itare bibliografica#
<CODE> </CODE> Listing de program#
<EM> </EM> %til logic de e"identiere#
<KBD> </KBD> Text de la tastatura#
<STRONG>
</STRONG>
."identiere logica puternica#
<VAR> </VAR> !rogram sau "ariabila#
<BASEFONT %'9. -
n>
%pecifica explicit dimensiunea fontului
din pagina#
Marca=e pentru $"agini

<IMG> Marca=ul de introducere a imaginilor#
%)&-url %ursa fisierului grafic#
$LT-text Textul alternati" de afisat, daca este necesar#
$L'+0-aliniere
$linierea imaginii in pagina, cu urmatoarele
"alori posibile< top 5sus8, middle5la mi=loc8,
bottom 5=os8, left 5in stanga8, right 5in
dreapta8#
H.'+HT-x 'naltimea imaginii 5in pixeli8#
W'DTH-x Latimea imaginii#
*,)D.)-x
&henarul din =urul imaginii, atunci cand
aceasta este utilizata ca hiperlegatura#
H%!$&.-x
%patiul suplimentar pe orizontala din =urul
imaginii 5in pixeli8#
2%!$&.-x
%patiul suplimentar pe "erticala din =urul
imaginii 5in pixeli8#
Marca=e pentru Liste

<DD> Descriere definitie#
<DL> </DL> Lista de tip definitie#
<DT> Termen de definitie#
<LI> .lement de lista#
<OL> Lista ordonata 5numerotata8#
T?!.-tip Tipul numerotarii# 2alori posibile< $, a, ', i, 6#
%T$)T-x 0umarul de inceput al listei ordonate#
<UL> Lista neordonata 5marcata8#
T?!.-forma
;orma marca=ului# 2alori posibile< circle, s@uare,
disc#
Marca=e pentru Tabele

<TABLE> </TABLE> Tabel HTML#
*,)D.)-x &henarul tabelului#
&.LL!$DD'0+-x
%patiul suplimentar in cadrul
celulelor tabelului#
&.LL%!$&'0+-x
%patiul suplimentar intre celulele
tabelului#
W'DTH-x Latimea impusa tabelului#
;)$M.-valoare $=ustarea tabelului#
)4L.%-valoare $=ustarea riglelor tabelului#
*,)D.)&,L,) - culoare &uloarea chenarului tabelului#
*,)D.)&,L,)L'+HT -
culoare
&ea mai deschisa culoare din cele
doua culori specificate#
*,)D.)&,L,)D$)1 -
culoare
&ea mai inchisa culoare din cele
doua culori specificate#
$L'+0-left
$liniaza tabelul la marginea din
stanga a paginii, iar textul curge in
partea dreapta#
$L'+0-right
$liniaza tabelul la marginea din
dreapta a paginii, iar textul curge
in partea stanga#
H%!$&.-x
%patiu suplimetar pe orizontala in
=urul tabelului#
2%!$&.-x
%patiu suplimetar pe "erticala in
=urul tabelului#
&,L%-x
%pecifica numarul de coloane ale
unui tabel#
<COLGROUP>
</COLGROUP>
Defineste un set de coloane cu
a=utorul marca=ului Acol>#
<COL W'DTH-x>
Defineste latimea unei coloane
exprimata in pixeli#
<THEAD> </THEAD> Defineste titlul tabelului#
<TBODY> </TBODY> Defineste corpul tabelului#
<TR> </TR> Linie de tabel#
*+&,L,)-culoare
%pecifica culoarea de fond pentru
intreaga linie#
$L'+0-aliniere
$linierea celulelor de pe linia
curenta 5left, center, right8#
<TD> </TD> &elula de date a tabelului#
*+&,L,)-culoare
%pecifica culoarea de fond pentru
celula de date#
&,L%!$0-x
0umarul de coloane pe care se
intinde celula curenta de date#
),W%!$0-x
0umarul de linii pe care se intinde
celula curenta de date#
$L'+0-aliniere
$linierea materialului din cadrul
celulei de date# 2alori posibile<
left, right, center#
2$L'+0-aliniere
$linierea pe "erticala a
materialului din cadrul celulei de
date# 2alori posibile< top, bottom,
middle#
*$&1+),40D-url
%pecifica imaginea de fond pentru
celula tabelului#
0,W)$!
0u permite despartirea textului pe
linii in cadrul unei celule#
$L'+0-baseline
$liniaza celule de date cu linia de
baza a textului adiacent#
$L'+0-caracter $liniaza o coloana fata de un
anumit caracter 5caracterul
prestabilit este B#B8#
$L'+0-justify
$liniaza atat marginea din stanga
cat si marginea din dreapta a unui
text#
Marca=e pentru Care

<FRAMESET>
</FRAMESET>
Definirea redactarii paginii#
&,L%-x
0umarul si marimea relati"a a
coloanelor#
),W%-x 0umarul si marimea relati"a a liniilor#
*,)D.)-x
%pecifica starea BonB 5acti"a8 sau BoffB
5inacti"a8 pentru chenarul cadrului
;)$M.%.T#
;)$M.*,)D.) - x %pecifica marimea chenarului#
;)$M.%!$&'0+ - x
Marimea spatiului dintre doua cadre
adiacente#
<FRAME> Definitia unui anumit cadru#
%)&-url 4)L(ul sursa pentru cadru#
0$M.-nume
0umele cadrului 5utilizat impreuna cu
BT$)+.T-numeB ca parte
componenta a marca=ului de tip
ancora, Aa>#
%&),LL'0+-scrl
Defineste optiunea barei de derulare#
2alori posibile< on 5acti"a8, off
5inacti"a8, auto 5automat8#
;)$M.*,)D.)-x Marimea chenarului din =urul cadrului#
M$)+'0H.'+HT-x
%patiul suplimentar de deasupra si
dedesubtul unui anumit cadru#
M$)+'0W'DTH-x
%patiu suplimentar la stanga si la
dreapta unui anumit cadru#
<NOFRAMES> %ectiunea de pagina afisata pentru
</NOFRAMES> utilizatorii care nu pot "edea un cadru#
<IFRAME> &adru intern 5numai pentru 5'.8#
%)&-url %ursa cadrului#
0$M.-s
0umele ferestrei 5util pentru
T$)+.T8#
H.'+HT-x 'naltimea cadrului inglobat#
W'DTH-x Latimea cadrului inglobat#
Marca=e pentru .or"ulare
<FORM> </FORM> ;ormular HTML acti"#
$&T',0-url
!rogramul &+' de pe ser"erul care
receptioneaza datele#
M.TH,D-metoda
Modul in care datele sunt transmise
ser"erului5+.T sau !,%T8#
<INPUT> &amp de text sau alte date de intrare#
T?!.-optiune
Tipul campului de intrare A'0!4T>#
2alori posibile< text, passCord,
chec3box, hidden, file, radio, submit,
reset, image#
0$M.-nume 0umele simbolic al "alorii campului#
2$L4.-valoare
&ontinutul prestabilit al campului de
text#
&H.&1.D- optiune *utonDcaseta marcata in mod prestabilit#
%'9.-x
0umarul de caractere al unui camp de
text #
%'9.-x 0umarul maxim de caractere acceptate#
<SELECT>
</SELECT>
+rup de casete de "alidare#
%'9.-x
0umarul de articole de meniu care se
afiseaza odata 5prestabilit-68#
M4LT'!L.-x !ermite selectia unor articole de meniu
multiple#
<OPTION>
$legerea particulara intr(un domeniu
A%.L.&T>#
2$L4.-valoare 2aloarea rezultata a selectiei din meniu#
<TEXTAREA>
</TEXTAREA>
&amp de intare de tip text pe linii
multiple#
),W%-x 0umarul de linii al casetei de text#
&,L%-x
0umarul de coloane 5caractere8 pe linie
al casetei de text#
<FIELDSET>
</FIELDSET>
'mparte formularul in parti logice#
<LEGEND>
</LEGEND>
0umele asociat setului de campuri
5fieldset8#
$L'+0-s
%pecifica alinierea legendei 5explicatiei8
afisate 5top, bottom, left, light8#
T$*'0D./-x
%pecifica ordinea elementelor atunci
cand utilizatorul apasa tasta Tab#
$&&.%1.?-c
%pecifica tasta care asigura comanda
rapida de la tastatura asociata unui
anumit element#
D'%$*L.D
.lementul este inacti", dar este afisat pe
ecran#
).$D,0L?
.lementul este afisat pe ecran dar nu
poate fi editat#
Marca=e pentru Caractere Speciale

& BEampFB ( ampersand#
BEG:HIFB ( tilda#
< BEltFB ( mai mic 5less than8#
> BEgtFB ( mai mare 5greater than8#
! simbolul special de copJright#
" simbolul special pentru marca inregistrata#
# BE@uotFB ( ghilimele#
$ simbolul special a mic cu accent ascutit#
% simbolul special a mic cu accent circiumflex#
& simbolul special n mic cu tilda#
' simbolul special o mic barat 5slash8#
A simbolul special X (dolar).
( BEGKH7LFB ( euro
Proiectare Site si Web Design - Stanarul CSS
Ce sunt stilurile
/tilurile pun la dispozitia creatorilor de site,uri #e$ noi posi$ilitati de personalizare a paginilor HTML. n
stil reprezinta un mod de formatare exacta a unui $loc de text (spre exemplu anumite caracteristici pentru
font' marime' culoare' aran+are in pagina' distantare fata de margini etc).
64ista oua "oalitati e a e#ini un stil
1. sintaxa C// (Cascading /tyle /"eets)8
2. sintaxa ;a&ascript.
Ter"inologia CSS , Cascading /tyle /"eets , desemneaza !foi in stilul cascada!. -e ce !foi in stilul
cascada!' &om &edea mai exact in continuare.
$n pri"ul ran aceasta enu"ire are la origine posibilitatile o#erite e tehnica CSS
*ractic' te"nologia C// faciliteaza oricarui proiectant de pagini #e$ posi$ilitatea de a creea un stil pentru
fiecare tag HTML intre$uintat la un moment dat' putand ulterior sa aplice implicit acest stil in toate
paginile site,ului pentru elementul de pagina respecti& (adica pentru tagul HTML stilizat).
Stanarul CSS per"ite in#or"atiilor cu privire la stil sa #ie speci#icate si re#erite in "ai "ulte
#eluri
/tilurile pot fi specificate in interiorul fiecarui tag HTML in parte' in cadrul sectiunii H%.- a documentelor
HTML sau intr,un fiser extern cu extensia !.C//!. In interiorul aceluiasi document HTML pot fi referite mai
multe fisiere C// externe.
Totusi apare intrebarea #ireasca'''
Ce stil &a folosi $ro#ser,ul la afisarea paginii #e$ in cazul acelor taguri HTML pentru care a&em definite
mai multe stiluri? La modul general putem afirma ca toate stilurile utilizate pentru elementele HTML ale
unei pagini #e$ &or !cascada! intr,un fiser de stil &irtual atot cuprinzator' in care precedenta diferitelor
tipuri de stiluri aplicate tagurilor din pagina &a fi urmatoarea (de la precedenta cea mai mica la precedenta
cea mai mare)2
Pri$a precedenta0
/tilul specificat in setarile 4ro#serului (exemplu in I%2 Mie# ,5 Text /ize ,5 Largest)8
- doua precedenta0
/tilul specificat in cadrul setarilor din fisierul de stil extern8
- treia precedenta0
/tilul intern specificat in sectiunea H%.- a documentului HTML8
- patra precedenta0
/tilul intern specificat in cadrul tagului curent.
Stiluri eicate
.ceste stiluri se aplica $locurilor de text pentru care sunt definite si apelate pe loc. De e4e"pl u5
3H7 st yl eK !t ext ,al i gn2ri g"t 8 col or2O9E?%0B8!5
In acest exemplu' stilul &a determina toate titlurile H7 din paginile HTML care fac apel la acest stil sa
apara in $ro#ser in culoarea specificata si aliniate la dreapta.
-aca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente,tag (de ex. !HE!' !H7!' !*! si !-IM!)'
atunci #ie se utilizeaza o lista cu aceste elemente (separate prin &irgula) in sectiunea /st2le0.../1st2le0
din "eader,ul documentului (delimitat de marca+ele 3H%.-5...3IH%.-5)' asociindu,i,se elementele de
stil comune' #ie se &a utiliza stilul in mod explicit in cadrul fiecarui tag' ca mai sus.
64e"pl u cu lista de stiluri in H%.-,er2
3st yl e5
HE' H7' * Ytext ,al i gn2r i g"t 8 col or2O9E?%0B8Z
3Ist yl e5
64e"pl u cu fiecare element de stil definit si apelat in cadrul tagurilor luate separat2
3"t ml 5
3"ead5
3met a "tt p,eNui &K!Cont ent ,Type! content K!t ext I"t ml 8 c"arset K#i ndo#s,6EFE!5
3t i t l e5/t i l dedi cat i nl i ne3It i t l e5
3I"ead5
3$ody5
3HE st yl eK !t ext ,al i gn2ri g"t 8 col or2O9E?%0B8!5t ext 3IHE5
3p st yl eK !text ,al i gn2ri g"t 8 col or2O9E?%0B8!5t ext 3I*5
3H7 st yl eK !t ext ,al i gn2ri g"t 8 col or2O9E?%0B8!5t ext 3IH75
3I$ody5
3I"t ml 5
%xplicitarea a fost facuta' asadar' in momentul utilizarii acestora.
Clase e Stiluri
Clasele e stiluri permit definirea unui stil general (aplica$il in mai multe locuri in cadrul aceleiasi pagini
sau in pagini diferite) in &ederea inserarii lui oriunde este necesar printr intermediul unei simple referiri.
/a presupunem ca dorim sa definim o clasa de stiluri !clasa,mea! (pe care dorim sa o aplicam anumitor
portiuni de text pentru a le face de apara de culoare &erde si a aliniate la stanga). Mom utiliza in acest
sens $locul 3style5...3Istyle5' aflat la randul sau in interiorul $locului 3"ead5...3I"ead5 (reprezentand
"ead,erul documentului HTML). Mom realiza ceea ce ne,am propus in felul urmator2
3st yl e5
al l . cl asa, mea Yt ext ,al i gn2l ef t 8 col or2green8Z
3Ist yl e5
Cu&antul standard "all" aflat in fata clasei de stiluri !clasa,mea! indica faptul ca aceasta clasa este
aplica$ila tuturor $locurilor de text' atunci cand este necesar. *ractic clasa de stiluri !clasa,mea! poate fi
asociata tuturor tagurilor HTML care opereaza cu text (ca de exemplu2 HE' HD' *' -IM' etc...) utilizand in
interiorul fiecarui tag &izat o referire explicita la aceasta clasa2 3TAG cl assKcl asa,mea5.
.sadar' daca dorim sa aplicam aceasta clasa de stiluri unui titlu de ordinul 7 (specificat in codul HTML prin
tagul H7)' atunci scriem2
3H7 cl assKcl asa,mea5 .cest a este un "eader de mari me 7' al i ni at l a st anga si de
cul oare &erde 3IH75
-upa cum s,a &azut' pentru apelarea unei clase de stiluri in &ederea aplicarii sale elementului tag curent
se foloseste atributul "class" a&and ca &aloare numele clasei de stil. Impreuna cu specificatia !all! din
definirea clasei de stiluri' atri$utul !class! de&ine un atri$ut uni&ersal' adica &a putea fi asociat tuturor
tagurilor HTML carora li se poate aplica (in acest caz celor care opereaza cu text).
!bservatii5
, In interiorul unui $loc 3style5...3Istyle5' comentariile sunt $locuri delimitate de IU si UI (ca si in C' CP
P' ;a&a si ;a&ascript).
, -aca dorim ca o clasa de stiluri sa fie aplica$ila numai pentru anumite elemente ale documentului (spre
exemplu pentru paragrafele de text desemnate prin marca+ul de paragraf !p!)' atunci in constructia clasei
&a aparea acest element (de exemplu !p.clasa,mea,E!).
64e"pl u5
3"t ml 5
3"ead53t i t l e5Cl ase de st i l ur i dedi cat e3It i t l e5
3st yl e5 p. cl asa,mea,E Yt ext ,al i gn2l ef t 8 col or2green8Z 3Ist yl e5
3I"ead5
3$ody5 3p5.cest a est e un paragraf normal
3$r5 3p cl assKcl asa,mea,E5.cest a este un paragraf al i ni at l a st anga si de cul oare
&erde
3I$ody5
3I"t ml 5
Stiluri $enti#icate
.$solut toate elementele tag ale unui document HTML admit un atribut universal nu"it "id". .cest
atri$ut !id! poate identifica prin &alorile sale stilul utilizat de un tag HTML.
*entru a utiliza un stil !identificat! procedam astfel2
-' In $locul 3style5...3Istyle5 introducem definitia stilului conform sintaxei2
3st yl e5
Orosu Ycol or2 redZ
3Ist yl e5
&' In elementul (tagul) in care dorim utilizarea locala a acestui stil' folosim atri$utul !id! care primeste ca
&aloare numele identificator al stilului definit anterior. %xemplu2
3p i dK!rosu!5.cest a est e un paragraf de text de cul oare rosi e3Ip5
-aca dorim ca un stil !identificat! sa fie aplica$il numai pentru anumite elemente ale documentului (de
exemplu !H7!)' atunci in constructia (definitia) identificatorului de stil &a aparea acest element (aici !H7!)'
ca in exemplul urmator2
3"t ml 5
3"ead5
3t i t l e5*agi na cu st i l i dent i f i cat 3It i t l e5
3st yl e5
H7Orosu Ycol or2red8 t ext ,al i gn2cent er8Z
3Ist yl e5
3I"ead5
3$ody5
3H7 i dKrosu5.cest a est e un "eader de mari me 7' cent rat si de cul oare rosi e3IH75
3I$ody5
3I"t ml 5
Stiluri $nline
Stilurile in-line sunt acele stiluri definite c"iar in etic"eta HTML (marca+ul) ce initiaza $locul in care dorim
sa se aplice aceste stiluri. .dica sunt ceea ce' la precedentele sectiuni dedicate standardului C//' am
definit ca stil in interiorul tagurilor HE' *' etc...
-upa cum am &azut de+a' pentru a defini stiluri inline se utilizeaza atri$utul uni&ersal !style! (comun
practic tuturor etic"etelor ce apar intr,un document HTML). in continuarea caruia apare semnul egal' dupa
care' intre g"ilimele' urmeaza definirea stilului' practic &aloarea atri$utului !style!.
%aloarea ata atributului @st2le@ este tocmai descrierea stilului' cuprinsa nu intre acolade Y..Z (ca la
definirea in H%.- sau in fiserul C// extern , dupa cum &om &edeaZ' ci intre g"ilimele !...! (dupa cum am
aratat si din exemplele anterioare).
Concret5
3H7 st yl eK !col or2red8 text ,al i gn2 cent er8!5.cest "eader are mari mea E' est e de
cul oare rosi e si se pozi t i oneaza i n pagi na cent rat . 3IH75
-aca dorim utilizarea unui anumit stil pentru un fragment de text' atunci includem acest text intr,un $loc
cu a+utorul delimitatorilor /span0.../1span0' dupa care putem utiliza atri$utul !style!' in cadrul
etic"etei 3span5' inline2
3"t ml 5
3"ead5
3t i t l e5*agi na HTML cu st i l i nl i ne3It i t l e5
3I"ead5
3$ody53H75Ti t l u de mari me 73IH75
3span st yl eK!si ze26Fpt 8 al i gnKcenter8 col or2green8!5
.cest a este un text cu corpul de l i t era de di mensi ne 6F punct e' al i ni at pe cent ru si de
cul oare &erde.
3Ispan5
3I$ody5
3I"t ml 5
Stiluri in .isiere 64terne
/tilurile definite in interiorul unui $loc 3style5...3Istyle5 pot fi transferate intr,un fisier extern existand
astfel posi$ilitatea asocierii lor mai multor fisiere HTML.
Pentru a utiliza un stil e#init intr-un #isier e4tern se procedeaza astfel2
-' /e creaza un fisier care sa contina numai descrierea stilurilor si se sal&eaza cu extensia !.css!.
Continutul acestui fisier coincide cu continutul unui $loc 3style5...3Istyle5' fara ca acesti delimitatori sa
fie inclusi.
&' In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 6' se include in $locul
3"ead5...3I"ead5 o etic"eta /lin70' a&and trei atri$ute2
, atributul "rel " cu &aloarea !styles"eet!8
, atributul "t%pe" cu &aloarea !textIcss!.
, atributul "*ref" a&and ca &aloare adresa >L a fisierului creat la punctul 68
/tilurile definite din fisierul C// extern se acti&eaza ca si cum ar fi stiluri definite in fisierul HTML curent
intr,un $loc 3style5...3Istyle5.
$ata un #i si er HTML cu un CSS e4tern5
3"t ml 5
3"ead5
3met a "tt p,eNui &K!Cont ent ,Language! cont ent K!en,us!5
3met a "tt p,eNui &K!Cont ent ,Type! content K!t ext I"t ml 8 c"arset K#i ndo#s,6EFE!5
3LI (L >%LK !st yl es"eet ! TJ*%K !t ext Icss! H>%0K !st i l . css!5
3t i t l e5*agi na de t ext st i l i zat 3It i t l e5
3I"ead5
3$ody5
3HE5.cest a este t ext f ormat at ca Header 63IHE5
3p5.cest a este un paragraf 3Ip5
3H75.cest a este t ext f ormat at ca Header E' urmat de un ta$el 3IH75
3t a$l e #i dt "K!6::Q! $orderK!6!5
3t r5
3t " al i gnK! l ef t !5(ume3It "5
3t " al i gnK! l ef t !5*renume3It "5
3t " al i gnK! l ef t !5Tel ef on3It "5
3t " al i gnK! l ef t !5%,mai l 3It "5
3It r5
3t r5
3t d #i dt "K!EFQ!5*opescu3It d5
3t d #i dt "K!EFQ!5Mal ent i n3It d5
3t d #i dt "K!EFQ!59977?B@3It d5
3t d #i dt "K!EFQ!5popescuWya"oo. com3It d5
3It r5
3t r5
3t d #i dt "K!EFQ!5I onescu3It d5
3t d #i dt "K!EFQ!5Mi "ai 3It d5
3t d #i dt "K!EFQ!5FF??B@D3It d5
3t d #i dt "K!EFQ!5i onescuWya"oo. comVn$sp83It d5
3It r5
3It a$l e5
3$r5
Vn$sp83"75.cest a este un text f ormat at ca Header 7' urmat de E l i st e23I"75
3ol 5
3l i 5-at e personal e student 83Il i 5
3l i 5Cal i f i cari student 83Il i 5
3l i 5*rogram zi l ni c23Il i 5
3Iol 5
3ul 5
3l i 5*rogram di mi neat a3Il i 5
3l i 5*auza de masa3Il i 5
3l i 5*rogram dupami aza3Il i 5
3Iul 5
3I$ody5
3I"t ml 5
.i serul CSS asoci at (plasat in acelasi director) cu fisierul HTML de mai sus' este2
HE' H7' "7
Y
col or2O9@7d@$8
f ont ,f ami l y2 !l uci da cal l i grap"y!' !ari al !8
Z
p' t a$l e' l i
Y
f ont ,f ami l y2 !l uci da cal l i grap"y!' !ari al !8
margi n,l ef t 2 6:pt 8
Z
$ody
Y
$ackground,col or2Of f f af :8
Z
l i ' p' t "' t d
Y
f ont ,si ze2 @:Q8
Z
t a$l e Y$order,st yl e2outsetZ
l i Yl i st ,st yl e2 sNuare8)
Mentiune supli"entara
In cazul in care' dintr,un fisier HTML se face o referire la un fisier C// care insa lipseste' atunci fisierul
HTML &a fi afisat in $ro#ser fara elementele de stilizare' exact asa cum ar arata daca stilizarile nu ar fi
existat.
Pseuo Clase e Stiluri
Pseuoclasele se utilizeaza pentru personalizarea legaturilor #e$' atat de tip text' cat de tip imagine. %le
se definesc in interiorul unui $loc 3style5...3Istyle5 sau intr,un fisier extern' %xemplul de mai +os este
edificator in acest sens2
a2 l i nk Ycol or2 $l ue8 f ont ,si ze2 6Fpt 8Z
a2 "o&er Ycol or2 red8 f ont ,st yl e2 i t al i c8 text ,decorat i on2 noneZ
a2 &i si t ed Ycol or2 magent a8 f ont ,si ze2 6Fpt 8 t ext ,decorat i on2 noneZ
a2 act i &e Ycol or2 cyan8 f ont ,si ze2 6Fpt 8 text ,decorat i on2 noneZ
64plicatii5
a5 lin7 se refera la modul Cn care arata un link Cn mod normal8
a5 hover se refera la modul Cn care arata un link atunci c[nd se trece cu mouse,ul peste el (Cn
(etscape functioneaza doar de la &arianta D)8
a5 active se refera la modul Cn care arata un link atunci c[nd se efectueaza click pe el8
a5 visite se refera la modul Cn care arata un link de+a &izitat8
speci#icatia @te4t-ecoration5 none@ elimina su$linierea implicita cu o linie al$astra a link,ului.
Pentru ca nu"ai anu"ite legaturi sa utilizeze un stil, se pot folosi urmatoarele trei metode2
-' a2 l i nk. CL./.6 Y. . . Z co"binat cu 3a cl ass K CL./.6 "ref K! !5 . . . 3Ia5
&' a2 l i nkOI -6 Y. . . Z co"binat cu 3a id K I-6 "refK! !5 ...3Ia5
)' a. CL./.62 l i nk Y. . . Z co"binat cu 3a class K CL./.6 "refK! !5 ...3Ia5
Chestiune <u4iliara
In $ro#sere cursorul mouse,ului are in general o forma simpla si $inecunoscuta' luind pe parcursul
&izionarii paginii respecti&e maximum doua infatisari diferite2
Mana , atunci cand este pozitinat pe o legatura
/ageata o$lica din directia dreapta +os spre stanga sus , atunci cand este pozitionat pe alt o$iect
decat o legatura.
.cestea sunt insa formele implicite. %xista insa si cazuri in care am dori ca acel cursor sa ia o alta forma
decat cele doua predefinite. La fel ca multe alte pro$leme care pri&esc modul in care arata o pagina' si
aceasta pro$lema isi gaseste rezol&area in folosirea C// ca lim$a+ de descriere a modului de stilizare a
unui document.
Proprietatea care "anipuleaza #or"a cursorului se numeste simplu2 @cursor@ si poate fi introdusa in
orice element !style! al unui tag "tml.
-e exemplu' pentru o$tinerea unei imagini a cursorului de tipul unei sageti insotite de un semn de
intre$are la trecerea mouse,ului peste un link' iata codul care &a tre$ui folosit2
3a "ref K!f i si er. "t ml ! st yl eK!cursor2 "el p!5Legatura3Ia5
6#ectul este ur"atorul (doar pentru I% minim 9.:)2
Legatura cu CSS pentru stilizare cursor
(u este insa unicul mod de stilizare a cursorului mouse,ului. In continuare prezentam codurile pentru
toate formele de cursor care se pot folosi2

auto utilizeaza setarile implicite ale utilizatorului
cross"ai r creeaza o cruce
def aul t setarile implicite ale $ro#serului
e,resi ze sageata %st,Mest
"and mana
"el p semnul intre$arii
mo&e cruce cu sageti la capete
n,resi ze sageata sud,nord
ne,resi ze sageata /udMest , (ord%st
n#,resi ze sageata /ud%st , (ordMest
poi nter mana
s,resi ze sageata (ord , /ud
se,resi ze sageata (ordMest , /ud%st
s#,resi ze sageata (ord%st , /udMest
t ext $ara &erticala campuri de introducere a datelor
#,resi ze sageata %st,Mest
#ai t cl epsi dra

Proiectare Site Si Web Design - HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proiectare Site Si Web Design - HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Tehnologii Utilizate in Proiectarea si Designul Site-urilor Web

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