HTML Bun

Capitolul 1 ..........................................................................................................................................
4
1. Ce este HTML?............................................................................................................................4
2. Coninut i aspect ntr-un document HTML................................................................................4
3. Editorul.........................................................................................................................................
1. !"CT#$E..................................................................................................................................12
2. . Etic%ete de structur& ................................................................................................................13
Capitolul 2........................................................................................................................................16
1. Culoarea 'undalului....................................................................................................................1(
2. Culoarea te)tului........................................................................................................................1*
3. Culoarea le+&turilor....................................................................................................................1*
4. ,le+erea culorilor.......................................................................................................................1-
Capitolul 3.........................................................................................................................................19
1. .ormatarea caracterelor..............................................................................................................1/
2. ,ccentuarea te)tului...................................................................................................................22
Capitolul 4.........................................................................................................................................25
1. Trecerea la un r0nd nou..............................................................................................................2
2. Titlurile 1Headin+s2....................................................................................................................2(
3. $ara+ra'ele..................................................................................................................................2*
4. $re'ormatarea te)tului................................................................................................................2/
. Centrarea te)tului.......................................................................................................................33
(. ,'iarea te)tului pe o sin+ur& linie.............................................................................................33
*. 4locul 5!678.............................................................................................................................31
-. Linii ori9ontale...........................................................................................................................32
/. 6nserarea unei adrese potale......................................................................................................33
13. 6nserarea unui citat...................................................................................................................33
11. 6nserarea caracterelor speciale..................................................................................................34
12. :u+estii pri;ind aspectul te)tului.............................................................................................3(
Capitolul 5.........................................................................................................................................37
1. ,dresa <=L................................................................................................................................3*
2. ,drese a>solute i adrese relati;e...............................................................................................3-
3. :ta>ilirea le+&turilor...................................................................................................................3-
4. ,ncore - le+&turi n cadrul aceleiai pa+ini................................................................................3/
. Le+&tura c&tre o pa+in& a'lat& n acelai director 1'older2..........................................................43
(. Le+&tura c&tre o pa+in& locali9at& n alt director 1'older2..........................................................41
*. Le+&tura c&tre pa+ini e)terne.....................................................................................................43
-. ,le+erea culorilor pentru le+&turi..............................................................................................44
/. <tili9area potei electronice 1e-mail2.........................................................................................44
13. Le+&turi c&tre 'iiere oarecare..................................................................................................4
11. !esc%iderea pa+inilor re'erite printr-o le+&tur&.......................................................................4
12. Crearea unei >are secundare de na;i+are.................................................................................4(
Capitolul 6.........................................................................................................................................48
1. .ormatele 'iierelor +ra'ice........................................................................................................4-
2. 6nserarea unei ima+ini................................................................................................................4/
3. !imensionarea ima+inii..............................................................................................................3
4. ,linierea ima+inii i a te)tului...................................................................................................3
. 6ma+ini 'olosite ca 'ond 1>ac?+round2 al pa+inii.......................................................................2
(. 6ma+ini 'olosite ca le+&turi.........................................................................................................3
*. 6ma+inile miniaturale 1t%um>nails2............................................................................................3
-. 6ma+inile ;ideo...........................................................................................................................
/. :unetele......................................................................................................................................(
13. :u+estii pri;ind 'olosirea ima+inilor i elementelor multimedia.............................................*
11. 6ma+inile i timpul de nc&rcare al pa+inii...............................................................................-
Capitolul 7.........................................................................................................................................59
1. Liste neordonate........................................................................................................................./
1
2. Liste ordonate.............................................................................................................................(1
3. 6m>ricarea listelor.......................................................................................................................(3
4. Liste de de'iniii..........................................................................................................................(4
Capitolul 8 ......................................................................................................................................66
1. Crearea unui ta>el.......................................................................................................................((
2. ,linierea ta>elului n pa+in&......................................................................................................(-
3. !imensionarea unui ta>el...........................................................................................................*3
4. :paierea celulelor unui ta>el.....................................................................................................*1
. !imensionarea celulelor unui ta>el............................................................................................*2
(. ,linierea coninutului unei celule..............................................................................................*3
*. !e'inirea culorilor pentru un ta>el.............................................................................................*4
-. Titlul unui ta>el..........................................................................................................................*(
/. Capul de ta>el.............................................................................................................................**
13. Ta>ele de 'orme oarecare ........................................................................................................*-
11. Celule '&r& coninut..................................................................................................................*/
12. @rupuri de coloane...................................................................................................................-3
13. ,tri>ute pentru aspectul c%enarului unui ta>el.........................................................................-1
14. Ta>ele im>ricate.......................................................................................................................-2
1. Ta>ele comple)e.......................................................................................................................-3
1(. =ecomand&ri pri;ind 'olosirea ta>elelor..................................................................................-(
Capitolul 9.........................................................................................................................................87
1. !ocumentul de de'inire a cadrelor ............................................................................................-*
2. Cadre im>ricate........................................................................................................................../3
3. Controlul aspectului unui cadru................................................................................................../3
4. 4are de derulare........................................................................................................................../2
. $o9iionarea documentului ntr-un cadru.................................................................................../2
(. Cadre interne 1in-line 'rames2..................................................................................................../3
*. !esc%iderea documentelor n alte cadre...................................................................................../
-. :u+estii pri;ind 'olosirea cadrelor............................................................................................../*
Capitolul 10.......................................................................................................................................97
1. Ce este un 'ormular?.................................................................................................................../*
2. Crearea unui 'ormular................................................................................................................./-
3. Etic%eta 56A$<T8......................................................................................................................//
4. Etic%etele 5:ELECT8 i 5"$T6"A8......................................................................................133
. Etic%eta 5TEBT,=E,8..........................................................................................................134
(. 7alidarea datelor......................................................................................................................13(
Capitolul 11.....................................................................................................................................107
1. Ce este un stil?..........................................................................................................................13*
2.Tipuri de 'oi de stiluri................................................................................................................13-
3. E'ecte o>inute cu aCutorul stilurilor.........................................................................................111
Capitolul 12.....................................................................................................................................115
1. Ce este Da;a:cript?...................................................................................................................11
2. Cum poate 'i inclus un script n pa+in&?..................................................................................11(
3. Modul de e)ecuie al scriptului................................................................................................123
4. Ce se poate 'ace cu Da;a:cript?................................................................................................123
Capitolul 13.....................................................................................................................................127
1. Ce este un motor de c&utare?....................................................................................................12*
2. Metata+-uri...............................................................................................................................12-
Capitolul 14.....................................................................................................................................133
1. .actori care nu pot 'i plani'icai...............................................................................................133
2. Etapele plani'ic&rii site-ului.....................................................................................................13
Capitolul 15.....................................................................................................................................138
1. $rincipiile desi+nului Ee>........................................................................................................13-
2. "r+ani9area unui site................................................................................................................13/
2
3. Metodolo+ia de construire a site-ului.......................................................................................141
4. Te%nici de desi+n Ee>..............................................................................................................141
. @reeli de desi+n......................................................................................................................14(
Capitolul 16.....................................................................................................................................149
1. Corectarea pa+inilor.................................................................................................................14/
2. Testarea pa+inilor.....................................................................................................................13
Capitolul 17.....................................................................................................................................153
1. Aumele de domeniu..................................................................................................................13
2. :er;iciul de +&9duire Fe> 1Fe> %ostin+2................................................................................1
3. "r+ani9area i denumirea 'iierelor..........................................................................................1(
4. Trans'erul 'iierelor..................................................................................................................1*
3
Capitolul 1
1. Ce este HTML?
HTML este o a>re;iere de la Hypertext Markup Language i repre9int& structura oric&rei
pa+ini de Fe>. HTML nu este un lim>aC de pro+ramare. Au ;ei lucra aici cu ;aria>ileG e)presiiG
tipuri de dateG structuri de control. HTML este un lim>aC descripti;G prin care sunt descrise
elementele structurale ale pa+inii de Fe>H titlurileG listeleG ta>eleleG para+ra'eleG le+&turile cu alte
pa+iniG precum i aspectul pe care l are pa+ina din punct de ;edere +ra'ic. In 'ondG HTML este
modul n care i comunicam >roEserului ce elemente dorim s& introducem n pa+ina Fe> i care
este aspectul acestora.
HTML nu este un lim>aC case-sensitiveG adic& nu 'ace distincia ntre literele mici i cele
mari1maCuscule2. ,ceasta nseamn& c& indi'erent cum scriem etic%eteleG cu litere mari sau cu litere
miciG ele ;or 'i corect interpretate de >roEser. !in acest moti; pe parcursul acestei lucr&ri ;om
utili9a o con;enie de notaie n care etic%etele 1tag-urile2 HTML sunt scrise cu maCuscule iar
atri>utele asociate acestora sunt scrise cu litere mici pentru o mai >un& di'ereniere i e;ideniere a
acestora.
!esi+ur c& n documentele pe care le scriei putei respecta aceast& con;enie sau putei scrie
cu un sin+ur tip de litereG dup& cum ;& este mai uor.
$este tot n cadrul te)tuluiG unde apar etic%eteG atri>ute sau ;alori ale acestora am 'olosit
caractere Courier AeE pentru a di'erenia elementele de lim>aC de restul te)tului.
!e asemeneaG ;ei o>ser;a c&G n e)emplele pre9entateG codul HTML este scris indentatG adic&
aliniat la di;erse ni;ele. Ca i n ca9ul etic%etelorG acest lucru nu are importan& pentru >roEser.
6ndentarea ;& este util& doar dumnea;oastr&G pentru a di'erenia i urm&ri mai uor di;ersele
elemente pe care le includei n document. TotuiG dac& n ca9ul etic%etelor putei opta pentru orice
;ariant& dorii n pri;ina scrierii lorG indentarea este recomandat& c%iar i pro+ramatorilor cu
e)perien&. <n cod neindentat este 'oarte +reu de citit i de depanatG n ca9ul apariiei unor erori.
2. Coninut i aspect ntr-un document HTML
$entru a reali9a documente Fe> e'icienteG cu impact asupra cititoruluiG i pentru a ;alori'ica
pe deplin puterea lim>aCului HTMLG tre>uie s& inei seama de o idee 'undamental&H HTML este
destinat structur&rii documentele i nu doar 'ormat&rii n ;ederea a'i&rii lor.
HTML 'urni9ea9& modalit&i ;ariate pentru a de'ini aspectul documentuluiH speci'icaii le+ate
de 'onturi 1tipurile de caractere2G de 'ormatare a te)tuluiG de culoriG etc. !esi+urG aspectul 'ormal
este importantG c&ci el poate ;eni n >ene'iciul sau n detrimentul accesi>ilit&ii in'ormaiilor
pre9entate.
TotuiG nu aspectul 'ormalG ci coninutul documentului primea9&. HTML conine numeroase
c&i de structurare a coninutului documentului '&r& a pune pro>lema 'elului cum ;or 'i a'iate
elementeleH titluriG listeG para+ra'eG ima+iniG etc. Toate acestea sunt de'inite n lim>aCul HTML '&r& a
impune >roEserului s& le a'ie9e ntr-un anumit mod. 4roEserului i se las& ast'el posi>ilitatea de a
a'ia respecti;ele elemente n con'ormitate cu rolul pe care l au ele n structura documentului i nu
respect0nd re+ulile impuse de creatorul documentului HTML.
Marele a;antaC al a>ord&rii >a9ate pe coninut 'a& de cea >a9at& pe aspect re9id& n 'aptul c&
pa+inile dumnea;oastr& ;or 'i ;i9uali9ate cu tipuri di'erite de >roEsereG 'iecare a;0nd ;ersiuni
di'erite.
4
In a>ordarea >a9at& pe aspectG dac& >roEserul nu recunoate indicaiile de 'ormatare
speci'icateG 'ie nu le e)ecut&G 'ie le e)ecut& eronatG ast'el c& structurarea pa+inii ;a a;ea de su'erit.
In a>ordarea >a9at& pe coninutG indi'erent cum ;a ale+e >roEserul s& e)ecute indicaiile de
'ormatareG semni'icaia elementelor din pa+in& ;a r&m0ne nesc%im>at&.
!e e)empluG dac& ;ei a'ia titlurile i su>titlurile din pa+in& 'olosind tipuri di'erite de 'onturiG
caractere cu stiluri ;ariateH aldine 1>oldG sau n+roate2G cursi;e 1italiceG sau nclinate2G su>liniateG
etc.G un >roEser care nu recunoate aceste elemente ar putea a'ia titlurile n acelai mod n care
a'iea9& restul te)tuluiG ast'el c& semni'icaia lor n pa+in& i-ar pierde rele;ana.
$e de alt& parteG dac& ;ei 'olosi etic%etele speciale pentru titluriG c%iar daca >roEserul nu le
recunoateG are posi>ilitatea de a e;idenia totui titlurile n cea mai >un& manier& pe care o are la
dispo9iieG ast'el nc0t semni'icaia lor pentru restul documentului se ;a p&stra.
3. Editorul
.olosirea unui simplu editor de tet.
Cel mai cunoscut i accesi>il este Aotepad-ul din FindoEs.
!"portant#
Au este recomandat s& 'olosii un procesor de te)t comple) cum este Microso't FordG c%iar
dac& acesta poate sal;a documentele n 'ormat HTML 1cu e)tensia .htm2G deoarece la sal;area
documentelor Ford-ul adau+& automat la te)tul documentului dumnea;oastr& o mare cantitate de
cod conin0nd in'ormaii lipsite de rele;an& care ncarc& inutil documentul i m&rete dimensiunile
'iierului.
.olosirea unui editor HTML.
,cest tip de editoare dedicate o'er& 'acilit&i n scrierea coduluiG reali9ea9& corectarea
documentului din punct de ;edere sintactic i c%iar scriu sec;ene de cod pentru anumite elemente
pe care dorii s& le inserai n document.
.olosirea unui editor $%&!$%' 1What You See Is What You GetG n traducere li>er& Jceea ce
;e9i la editare este ceea ce o>ii la ;i9uali9areJ2.
<n editor de tip F#:6F#@ permite ale+erea i 'ormatareaG cu aCutorul mouse-uluiG a
elementelor pe care dorii s& le includei n pa+in&H ta>eleG lin?-uriG 'ormulareG putei sta>ili tipul
'onturilorG culorileG aranCarea te)tului n pa+ina. $e m&sur& ce un anumit element este inseratG
editorul scrie n mod automat codul HTML corespun9&torG '&r& ca utili9atorul s& 'ie ne;oit s&
inter;in& asupra lui. TotuiG dac& a;ei cunotine de HTML putei inter;eni la ni;elul codului n
orice manier& doriiG orice sc%im>are pe care o 'acei n codG re'lect0ndu-se automat n aspectul
pa+inii.
$rintre pro'esioniti persist& o contro;ers& n pri;ina tipurilor de editoare care ar tre>ui
'olosite pentru a edita documentele HTML. In esen&G pro>lema este aceastaH este mai >ine s&-i
construieti pa+inile 'olosind HTML JpurJG adic& scriind totul tu nsuiG sau este de pre'erat s&
'oloseti un editor de tipul F#:6F#@? Editoare deose>it de puternice de acest tipH Macromedia
!reamEea;erG Microso't .ront $a+eG Co''e Cup ca s& d&m numai c0te;a e)empleG par a nclina
de'initi; >alana n 'a;oarea acestui tip de editare. Ele o'er& 'acilitai a;ansate de editare a pa+iniiG
inclusi; posi>ilitatea de a crea pa+ini dinamice i de a include script-uri Da;a:cript sau applet-uri
Da;a. Cu aCutorul lor se pot construi site-uri e)trem de comple)e.
(le"ente de )a*a +ta,uri-.

.HTML/ .0HTML/ !e'ineste un 'isier in 'ormat Fe>
.H(12/ .0H(12/ ,ntetul documentului
.T!TL(/ .0T!TL(/ Tilul documentului
.342%/ .0342%/ Corpul pa+inii HTML
4@C"L"= K culoare Culoarea de 'ond a pa+inii
TEBTKculoare Culoarea te)tului pe pa+inii
L6ALKculoare Culoarea le+aturiilor ne;i9itate din pa+inii
7L6ALKculoare Culoarea le+aturiilor ;i9itate din pa+inii
,L6ALKculoare Culoarea le+aturiilor pe durata clicului e)acutat de utili9ator
4,CL@="<A! K url 6ma+inea de 'ond pentru pa+ina
.5/ $ara+ra'
.Hn/ .Hn/ Ai;el de su>titlu al documentului 1n K 1-(2
.647T/ .0647T/ :peci'ica atri>ute ale te)tului incadrat
:6MEKn !imensiunea te)tului este 1-*
.,CEK"a!" :peci'ica 'ontulH aG daca este disponi>ilG sau !
C"L"=Ks
Culoarea te)tuluiH 'ie un nume de culoare G 'ie o ;aloare
=@4
.38/ Linie noua
.58(/ .058(/ 6n'ormatie pre'ormatata
.#99 99/ Comenatriu HTML
.C(7T(8/ .0C(7T(8/ Centrea9a materialul in pa+ina
.H8/ =i+la ori9ontala
:6MEKx 6naltimea ri+lei in pi)eli
F6!THKx Latimea ri+lei in pi)eli sau in procente
A":H,!E !e9acti;ea9a a'isarea um>rei pentru ri+la ori9ontala
,L6@AKx ,linierea ri+lei ori9ontala in pa+ina 1le'tG centerG ri+%t2
C"L"=Kx Culoarea ri+lei ori9ontale1numai pentru 6E2
.1/ .01/ MarcaC de tip ancora
H=E.Kurl =e'erinta %iperte)t
H=E.K"nume =e'erinta catre o ancora interna
AameKnume !e'initia unei ancore interne
(
(le"ente pentru liste .
.22/ !escriere de'initie
.2L/ .02L/ Lista de tip de'initie
.2T/ Termen de de'initie
.L!/ Element de lista
.4L Lista ordonata 1numerotata2
T#$EKtip Tipul numerotarii. 7alori posi>ileH ,G aG 6G iG 1
:T,=TKx Aumarul de inceput al listei ordonate
.:L Lista neordonata 1marcata2
T#$EK#orma .orma marcaCului. 7alori posi>ileH circleG sNuareG disc.
(le"ente pentru ;or"atarea caracterelor .
.3/ .03/ ,'isea9a te)t cu caractere aldine
.!/ .0!/ ,'isea9a te)t cu caractere cursi;e
.:/ .0:/ ,'isea9a te)t su>liniat
.TT/ .0TT/ Te)t cu 'ont monospatiu
.C!T(/ .0C!T(/ Citare >i>lio+ar'ica
.C42(/ .0C42(/ Listin+ de pro+ram
.(M/ .0(M/ :til lo+ic de e;identiere
.<32/ .0<32/ Te)t de la tastatura
.&T847'/ .0&T847'/ E;identiere lo+ica puternica
.=18/ .0=18/ $ro+ram sau ;aria>ila
.31&(647T :6ME K n8 :peci'ica dimensiunea implicita a 'ontului din pa+ina
(le"ente pentru cadre .
.681M(&(T/
.0681M(&(T/
!e'inirea redactarii pa+inii
C"L:Kx Aumarul si marimea relati;a a coloanelor
="F:Kx Aumarul si marimea relati;a a liniilor
4"=!E=Kx
:peci'ica starea JonJ 1acti;a2 sau Jo''J 1inacti;a2 pentru
c%enarul cadrului .=,ME:ET 11 sau 32
.=,ME4"=!E= K x :peci'ica marimea c%enarului
*
.=,ME:$,C6A@ K x Marimea spatiului dintre doua cadre adiacente
.681M(/ !e'initia unui anumit cadru
:=CKurl <=L-ul sursa pentru cadru
A,MEKnume
Aumele cadrului 1utili9at impreuna cu T,=@ETKnume ca
parte componenta a marcaCului de tip ancora 5a8
:C="LL6A@Kscrl
!e'ineste optiunea >arei de derulare.7alori posi>ileH
on1acti;a2G o''1inacti;a2G auto 1automat2
.=,ME4"=!E=Kx Marimea c%enarului din Curul cadrului
M,=@6AHE6@HTKx
:patiul suplimentar de deasupra si dedesu>tul unui anumit
cadru
M,=@6AF6!THKx :patiu suplimetar la stan+a si la dreapta unui anumit cadru
.74681M(&/
.074681M(&/
:ectiunea de pa+ina a'isata pentru utili9atorii care nu pot
;edea un cadru
.!681M(/ Cadru intern 1numai pentru 16E2
:=CKurl :ursa cadrului
A,MEKs Aumele 'erestrei 1util pentru T,=@ET2
HE6@HTKx 6naltimea cadrului in+lo>at
F6!THKx Latimea cadrului in+lo>at
(le"ente pentru ta)ele.
.T13L(/ .0T13L(/ Ta>el HTML
4"=!E=Kx C%enarul ta>elului
CELL$,!!6A@Kx :patiul suplimentar in cadrul celulelor ta>elului
CELL:$,C6A@Kx :patiul suplimentar intre celulele ta>elului
F6!THKx Latimea impusa ta>elului
.=,MEKvaloare ,Custarea 'ina a ta>elului
=<LE:Kvaloare ,Custarea 'ina a ri+lelor ta>elului
4"=!E=C"L"= K culoare :peci'ica culoarea c%enarului ta>elului
4"=!E=C"L"=L6@HT K
culoare
Cea mai desc%isa culoare din cele doua culori speci'icate
4"=!E=C"L"=!,=L K
culoare
Cea mai inc%isa culoare din cele doua culori speci'icate
,L6@AKle#t
,linia9a ta>elul la mar+inea din stan+a a pa+iniiG iar
te)tul cur+e in partea dreapta
,L6@AKright ,linia9a ta>elul la mar+inea din dreapta a pa+iniiG iar
-
te)tul cur+e in partea stan+a
H:$,CEKx :patiu suplimetar pe ori9ontala in Curul ta>elului
7:$,CEKx :patiu suplimetar pe ;erticala in Curul ta>elului
C"L:Kx :peci'ica numarul de coloane ale unui ta>el
.C4L'84:5/
.0C4L'84:5/
!e'ineste un set de de'initii de coloane cu aCutorul
marcaCului 5col8
.C4L F6!THKx8 !e'ineste latimea unei coloane e)primata in pi)eli
.TH(12/ .0TH(12/ !e'ineste titlul ta>elului
.342%/ .0T342%/ !e'ineste corpul ta>elului
.T8 .0T8/ Linie de ta>el
4@C"L"=Kculoare :peci'ica culoarea de 'ond pentru intrea+a linie
,L6@AKaliniere ,linierea celulelor de pe linia curenta 1le'tG centerG ri+%t2
.T2 .0T2/ Celula de date a ta>elului
4@C"L"=Kculoare :peci'ica culoarea de 'ond pentru celula de date
C"L:$,AKx
Aumarul de coloane pe care se intinde celula curenta de
date
="F:$,AKx Aumarul de linii pe care se intinde celula curenta de date
,L6@AKaliniere
,linierea materialului din cadrul celulei de date.7alori
posi>ileH 1le'tG ri+%tG center2
7,L6@AKaliniere
,linierea pe ;erticala a materialului din cadrul celulei de
date.7alori posi>ileH 1topG >ottomG middle2
4,CL@="<A!Kurl :peci'ica ima+inea de 'ond pentru celula ta>elului
A"F=,$
Au permite despartirea te)tului pe linii in cadrul unei
celule
,L6@AK!aseline
,linia9a celule de date cu linia de >a9a a te)tului
adiacent
,L6@AKcaracter
,linia9a o coloana 'ata de un anumit carcater 1caracterul
presta>ilit este J.J2
,L6@AK$usti#y
,linia9a atat mar+inea din stan+a cat si mar+inea din
dreapta a unui te)t
(le"ente pentru adau,area i"a,inilor.
.!M' MarcaCul de introducere a ima+inilor
:=CKurl :ursa 'isierului +ra'ic
,LTKtext Te)tul alternati; de a'isatG daca este necesar
/
,L6@AKaliniere
,linierea ima+inii in pa+ina. 7alori posi>ileH top 1sus2G middle1in
miCloc2G >ottom 1Cos2G le't 1in stan+a2G ri+%t 1la dreapta2
HE6@HTKx 6naltimea ima+inii 1in pi)eli2
F6!THKx Latimea ima+inii
4"=!E=Kx
C%enarul din Curul ima+iniiG atunci cand aceasta este utili9ata ca
%iperle+atura
H:$,CEKx :patiul suplimentar pe ori9ontala din Curul ima+inii 1in pi)eli2
7:$,CEKx :patiul suplimentar pe ;erticala din Curul ima+inii 1in pi)eli2
(le"ente pentru ;or"ulare.
.648M/ .0648M/ .ormular HTML acti;
,CT6"AKurl $ro+ramul C@6 de pe ser;erul care receptionea9a datele
METH"!Kmeto%a Modul in care datele sunt transmise ser;erului1@ET sau $":T2
.!75:T Camp de te)t sau alte date de intrare
T#$EKoptiune
Tipul campului de intrare 56A$<T8. 7alori posi>ileH
te)tGpassEordGc%ec?>o)G%iddenG'ileG radioGsu>mitGresetGima+e.
A,MEKnume Aumele sim>olic al ;alorii campului
7,L<EKvaloare Continutul presta>ilit al campului de te)t
CHECLE!K optiune 4utonOcaseta marcata in mod presta>ilit
:6MEKx Aumarul de caractere al unui camp de te)t
:6MEKx Aumarul ma)im de caractere acceptate
.&(L(CT/
.0&(L(CT/
@rup de casete de ;alidare
:6MEKx
Aumarul de articole de meniu care se a'isea9a odata
1presta>ilitK12
M<LT6$LEKx $ermite selectia unor articole de meniu multiple
.45T!47 ,le+erea particulara intr-un domeniu 5:ELECT8
7,L<EKvaloare 7aloarea re9ultanta a acestei selectii din meniu
.T(>T18(1/
.0T(>T18(1/
Camp de intare de tip te)t pe linii multiple
="F:Kx Aumarul de linii al casetei de te)t
C"L:Kx Aumarul de coloane 1caractere2 pe linie al casetei de te)t
13
.6!(L2&(T/
.06!(L2&(T/
6mparte 'ormularul in parti lo+ice
.L('(72/
.0L('(72/
Aumele asociat setului de campuri 1'ieldset2
,L6@AKs
:peci'ica alinierea le+endei 1e)plicatiei2 a'isate
1topG>ottomGle'tGri+%t2
T,46A!EBKx
:peci'ica ordinea elementelor atunci cand utili9atorul apasa
tasta Ta>
,CCE:LE#Kc
:peci'ica tasta care asi+ura comanda rapida de la tastatura
asociata unui anumit element
!6:,4LE! Elementul este inacti;G dar este a'isat pe ecran
=E,!"AL# Elementul este a'isat pe ecran dar nu poate 'i editat
(le"ente a?ansate.
.&T%L(/ .0&T%L(/ :peci'ica in'ormatii re'eritoare modelul de stiluri
T#$EKval Tipul modelului de stiluri. !e re+ula Jte)tOcssJ
.&C8!5T/ .0&C8!5T/ 6nclude un script de re+ula Da;ascriptG in pa+ina Fe>
L,A@<,@EKlim!a$ Lim>aCul utili9at
E7EATKeveniment E;eniment care declansea9a e)ecutia unor scripturi speci'ice
."=Knumeo!iect Aumele o>iectului din pa+ina asupra caruia actionea9a scriptul
Caractere speciale rom0neti
& PQ2/
PQ31R
PQ3
PQ23-
0 PQ22(R
S PQ2-
T PQ33
U PQ34
I PQ23(
V PQ1/4
11
&tructura unui docu"ent HTML
1. !"CT#$E
<n !"CT#$E descrie un !T! 1 document tWpe de'inition2. $entru ca >roEserele sa nu ai>a
pro>leme la a'isarea pa+inilor s-a introdus declaratia tipului de document care speci'ica >roEserului
si ;alidatoarelor ce +rupe de etic%ete si atri>ute 'oloseste acea pa+ina si cum tre>uie ele interpretate.
Tipul de document se declara la inceputul pa+inii inainte de ta+-ul X%eadY. !eoarece 'oarte multa
lume nu da atentie acestei declaratii 1din di'erite moti;eH unii sunt in;atati cu un 'el de e)primareG
altii nu pot inte+ra un cod care il 'olosesc incontinuuG etcZ2 pot aparea 1si si+ur apar2 pro>leme
siOsau di'erente de a'isare a pa+inii intre di'erite >roEsere.
7ersiune !T! declaratia !"CT#$E
HTML 2.3 !T! !DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2 !T! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 F!"l//EN">
HTML 4.31
:trictG TransitionalG
.rameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML #.0$//EN"
"htt%&//'''.'3.()*/T+/html#/,t)-t..t.">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML #.0$
T)"!,t(!"l//EN"
"htt%&//'''.'3.()*/T+/html#/l((,/..t.">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML #.0$
F)"m/,/t//EN"
"htt%&//'''.'3.()*/T+/html#/0)"m/,/t..t.">
12
BHTML 1.3
:trictG TransitionalG
.rameset
<!DOCTYPE html PUBLIC "-//W3C//DTD 1HTML $.0 2t)-t//EN"
"htt%&//'''.'3.()*/T+/3html$/DTD/3html$-,t)-t..t.">
<!DOCTYPE html PUBLIC "-//W3C//DTD 1HTML $.0
T)"!,t(!"l//EN"
"htt%&//'''.'3.()*/T+/3html$/DTD/3html$-t)"!,t(!"l..t.">
<!DOCTYPE html PUBLIC "-//W3C//DTD 1HTML $.0
F)"m/,/t//EN"
"htt%&//'''.'3.()*/T+/3html$/DTD/3html$-0)"m/,/t..t.">
BHTML 1.1 !T!
<!DOCTYPE html PUBLIC "-//W3C//DTD 1HTML $.$//EN"
"htt%&//'''.'3.()*/T+/3html$$/DTD/3html$$..t.">
$entru a ;eri'ica corectitudinea site-ului ;ostru puteti accesa %ttpHOO;alidator.E3.or+O. 6n ca9ul in
care apar erori in raport ori a;eti erori de sinta)a ori a-ti 'olosit ta+-uri care nu sunt compati>ile cu
declaratia de document.
!"portant #
!ntroduceti @n ;iecare pa,ina instructiunea standard care este recunoscuta de )roAsereB
.#24CT%5( Ct"l 5:3L!C D900$3C002T2 >HTML 1.0 &trict00(7D
DCttpB00AAA.A3.or,0T80Ct"l102T20Ct"l19strict.dtdD/
.Ct"l "lnsEDCttpB00AAA.A3.or,019990Ct"lD/
2. . Etic%ete de structur&
:tructura +eneral& a unui document HTML este urm&toareaH
.HTML/
.H(12/
.T!TL(/ .0T!TL(/
.0H(12/
.342%/
.0342%/
.0HTML/
!ocumentul este delimitat de etic%etele 5HTML8 5OHTML8 i este 'ormat din H
antet 1hea%2 - este delimitat de etic%etele 5HE,!8 5OHE,!8 i conine titlul documentului
precum i alte in'ormaii pri;ind documentul. In antetul documentului se mai inserea9& i anumite
sec;ene de pro+ram 1script-uri2G care se e)ecut& la nc&rcarea documentului n >roEser.
corp 1)odF2 - care delimitea9& coninutul propriu-9is al documentului i este inclus ntre
etic%etele 54"!#8 5O4"!#8
:emni'icaia etic%etelor care 'ac parte din structura oric&rui document HTMLH
.HTML/ .0HTML/
13
Intre aceste etic%ete este inclus ntre+ul document HTML. Ele comunic& >roEserului unde
ncepe i unde se termin& documentul.
.H(12/ .0H(12/
Intre aceste etic%ete sunt incluse titlulG precum i alte in'ormaii despre documentul HTML.
,ceste elementeG numite metatag-uri sunt deose>it de importante pentru ca pa+ina s& 'ie c0t mai
>ine cotat& de c&tre motoarele de c&utare. Metata+-urile i antetul n ansam>lul s&u nu sunt ;i9i>ile
pentru ;i9itator n pa+ina Fe>. TotuiG la 'el ca ntre+ codul HTML al pa+iniiG antetul poate 'i
;i9uali9at select0nd din meniul >roEserului opiunea &ie' ( Source.
.T!TL(/ .0T!TL(/
:ta>ilete titlul documentului HTML.
Titlul documentului este deose>it de important deoarece este unul din criteriile 'olosite de
motoarele de c&utare pentru inde)area pa+inii. $rin urmareG str&duii-;& s& +&sii un titlu care s&
descrie c0t mai corect i complet coninutul pa+inii dumnea;oastr&.
(e"plul 1.1
5HTML8
5HE,!8
5T6TLE8$a+ina mea Fe>5OT6TLE8
5OHE,!8
54"!#8
:alut Cnea9ule[ ,ici ;oi pune mai tar9iu continutul[ 5O4"!#8
5OHTML8
!ac& dorii s& scriei un te)t pe mai multe linii n pa+in&G ;a tre>ui s& 'olosii etic%eta 54=8
1de la line !reak2G care 'ace trecerea pe o linie noua. Etic%eta 54=8 este de tip emptyG deci nu are
etic%et& de nc%idere. Incercai e)emplul de mai CosG n care a'iarea te)tului documentului se ;a
'ace pe dou& r0nduri.
(e"plul 1.2
5HTML8
5HE,!8
5T6TLE8$a+ina mea Fe>5OT6TLE8
5OHE,!8
54"!#8
:alut Cnea9ule[ ,ici ;oi pune mai tar9iu continutul[.54=8<rmatoarea ;a 'i cu mult mai cool.
5O4"!#8
5OHTML8
!"portant #
:tructura documentelor HTML este n realitate mult mai comple)&G este recomandat caG pe
m&sur& ce procesul de editare a;ansea9&G s& introducei comentarii n te)t pentru a 'ace aceast&
structur& c0t mai e)plicit&. Comentariile nu sunt ;i9i>ile pentru >roEser ele ser;esc creatorului
pa+inii pentru a da un +rad crescut de li9i>ilitate documentului HTML.
Comentariile constau n scurte in'ormaiiG e)plicaii la elementele de cod utili9ateG etc.G 'iind
deose>it de utile ulteriorG mai ales n situaia n care se impune depanarea codului.
14
Comentariile se introduc prin includerea te)tului ntre etic%etele de mai Cos.
.#99 99/
!atG douG ee"pleB
.#9 9 1cesta este un co"entariu introdus in pa,ina $e) 9 9/
.#H1cesta este un co"entariu
pe "ai "ulte randuri
care ia s;arsit aici 99/
3. 6olosirea corectG a eticCetelor
Etic%etele container se compunG aa cum am ;&9ut mai de;remeG din perec%i de etic%eteH
etic%et& de desc%idere 5T,@8 i de nc%idere 5OT,@8.
La construirea unei pa+ini Fe> comple)e ;ei 'i pus adesea n situaia de a 'olosi mai multe
etic%ete pentru aceeai sec;en& de te)t.
!e pild&G ;ei dori s& atri>uii unui te)t dou& propriet&iH litere aldine sau n+roate 1!ol%2 i
te)t centrat n pa+in&. $entru aceasta ;a tre>ui s& utili9ai dou& perec%i de etic%eteG care descriu cele
dou& propriet&iG n mod simultanG metod& numit& i")ricarea etic%etelor 1neste% tags2G ca n
e)emplul de mai CosH
5CEATE=8548Te)t cu aldine si centrat5O485OCEATE=8
Este 'oarte important caG n ca9ul 'olosirii mai multor etic%ete container mpreun&G ele s& 'ie
plasate n mod corect.
In aceast& situaieG principiul de utili9are esteH JLast !n 9 6irst 4utJ 1L6."2. ,cest lucru
nseamn& c& ultima etic%et& desc%is& tre>uie s& 'ie prima care se nc%ide.
!"portant #
Tre>uie s& 'ii 'oarte atent la nc%iderea etic%etelorG pentru a nu nc&lca principiul L6.". In ca9
contrarG sec;ena de cod din pa+in& nu ;a 'unciona corect.
6at& un e)emplu +eneric de 'olosire corect& a dou& etic%eteH
5T,@185T,@28Etic%ete utili9ate corect5OT,@285OT,@18
i un altul de 'olosire incorect&H
5T,@185T,@28Etic%ete utili9ate incorect5OT,@185OT,@28
1
Capitolul 2
Culori
Culoarea repre9int& un caracteristic& e)trem de important& a unei pa+ini Fe>. <tili9at& cu
+riC& i m&sur&G ea poate m>un&t&i su>stanial aspectul pa+iniiG '&c0nd-o mai li9i>il& i mai
atracti;&G iar te)tul mai uor de parcurs. $e de alt& parteG utili9area e)cesi;& sau inadec;at& a
culorilor poate trans'orma un te)t de calitate ntr-un 'el de caleidoscop o>ositorG +reu de urm&ritG i
care i ;a determina pe muli ;i9itatori s& renune la a-l mai parcur+e.
1tri)utele eticCetei .342%/
Cu aCutorul lor se pot seta culorile 'undaluluiG te)tului i lin?urilorH
),color - culoarea 'undalului
tet - culoarea te)tului
linI - culoarea lin?urilor
?linI - culoarea lin?urilor ;i9itate
alinI - culoarea lin?ului acti;
1. Culoarea 'undalului
$entru a sta>ili culoarea 'undalului unei pa+ini 'olosim atri>utul ),color 1!ackgroun% color2
al etic%etei 54"!#8G c&ruia i atri>uim o ;aloare ast'elH
54"!# >+colorKJQ=@4 sau nume\culoareJ8
:e poate 'olosi drept ;aloare pentru atri>utul >+color 'ie codul %e)a9ecimal al culorii 'ie
numele ei.
(e"plul 2.1
5HTML8
1(
5HE,!8
5T6TLE8Culoare 'undalului5OT6TLE8
5OHE,!8
54"!# >+colorKJQ33..33J8
5H1 ali+nKJcenterJ8$a+ina cu 'undal ;erde5OH185H=8
5O4"!#8
5OHTML8
2. Culoarea te)tului
(e"plul 2.2
5HTML8
5HE,!8
5T6TLE8Culoare te)tului5OT6TLE8
5OHE,!8
54"!# >+colorKJQ......J te)tKJQ3333..J8
5H1 ali+nKJcenterJ8Te)t al>astru si rosu5OH18
5H=8
Te)tul din aceasta pa+ina este al>astru cu mici
5."AT colorKJQ..3333J8 e)ceptii5O."AT8
5O4"!#8
5OHTML8
3. Culoarea le+&turilor
$entru a sc%im>a culorea se 'olosesc urm&toarele atri>ute ale etic%etei 54"!#8H
linI pentru le+&turi
alinI pentru le+&turile acti;e
?linI pentru le+&turile ;i9itate
con'orm sinta)eiH
sinta)eiH
54"!# lin?KJQ=@4 sau nume\culoareJ
alin?KJQ=@4 sau nume\culoareJ ;lin?KJQ=@4 sau nume\culoareJ8
!ocumentul din E)emplul 2.3 creea9& o pa+in& n care te)tul este ne+ru iar le+&turile au
culoarea ;erdeG le+&turile acti;e culoarea al>astru i cele ;i9itateG culoarea rou. In e)emplu este
'olosit& etic%eta 5,8 i atri>utul sau Cre;G care ;or 'i pre9entate pe lar+ n capitolul despre le+&turi.
(e"plul 2. 3
5HTML8
5HE,!8
5T6TLE8Culoarea le+aturilor5OT6TLE8
5OHE,!8
54"!# >+colorKJQ......J te)tKJQ333333J lin?KJQ33..33J alin?KJQ3333..J
;lin?KJQ..3333J8
5H1 ali+nKJcenterJ8Le+aturi colorate5OH18
1*
5H=8
5, %re'KJculori1.%tmlJ8Le+atura catre primul e)emplu5O,8
5O4"!#8
5OHTML8
4. ,le+erea culorilor
:unt multe elemente care tre>uie luate n considerare la ale+erea culorilor pentru o pa+in&
Fe>. $rimul i cel mai important este acela de a 'ace coninutul uor de citit. 1Litere ne+re pe 'ond
al>2
!ei n ;estimentaie com>inaia de rou cu >leumarin este ra'inat&G ntr-o pa+in& Fe> literele
roii pe 'ond al>astru nu arat& >ine i sunt +reu de citit. " alt& com>inaie ne'ericit& este cea cu
'ondul ne+ru sau de culoare 'oarte nc%is& i te)tul de culoare al>&.
In ale+erea culorilor pentru un site este >ine s& inei seama de c0te;a elemente de psi%olo+ia
culorilorG pentru a su>linia ast'el mesaCul pe care ;rei s& l transmitei.
6at& c0te;a dintre sentimentele pe care le su+erea9& culorileH
8oJu - a+resi;itateG pasiuneG putereG ;italitate
8o* - 'eminitateG inocen&G moliciune
5ortocaliu - amu9amentG ;eselieG c&ldur&G e)u>eran&
'al)en - sentimente po9iti;e i cordialitate
=erde - liniteG s&n&tateG prospeime
1l)astru - autoritateG demnitateG securitateG ncredere
=iolet - so'isticareG spiritualitateG mister
Maro - utilitateG le+&tura cu p&m0ntulG >o+&ie
1l) - puritateG ncredereG modernitateG ra'inament
'ri - so>rietateG autoritateG sim practic
7e,ru - serio9itateG distincieG %ot&r0re
,le+erea culorilor pentru site tre>uie s& 'ie n concordan& cu tema site-ului i s& su>linie9e
mesaCul s&u. ,st'elG dac& dorii s& construii un site destinat copiilor ;ei 'olosi culori ;esele i
luminoaseG n ;reme ce pentru un site destinat pre9ent&rii unei 'irme de consultan& 'inanciar& sunt
potri;ite culori so>re i care su+erea9& serio9itate i ncredere.
1-
Capitolul 3
6onturi
<n 'ont este caracteri9at de urm&toarele atri>uteH
culoare 1sta>ilit& prin atri>utul color2R
tipul sau stilul 1sta>ilit prin atri>utul face2R
"Gri"ea 1de'init& prin atri>utul size2R
"Gri"ea @n puncte tipo,ra;ice 1sta>ilit& prin atri>utul point-size2R
,rosi"e 1de'init& prin atri>utul weight2.
Toate aceste atri>ute ap&rin etic%eteiG care permite inserarea de >locuri de te)te personali9ate.
1. .ormatarea caracterelor
Etic%eta care se 'olosete pentru a da unui caracter sau unui ir de caractere 1unui te)t2
aspectul dorit este etic%eta container .647T/ .0647T/.
Intre etic%eta de nceput i cea de s'0rit se inserea9& te)tul sau caracterul ale c&rui caracteristici
dorim s& le sta>ilim.
Ta,9uri pentru ;or"ate de tet B
<b>text</b>
Te)t in+rosat
<i>text</i>
Te)t inclinat
<u>text</u>
Te)t su>liniat
<sub>text</sub>
,'isa9a te)tul in po9itia su>script
<sup>
text
</sup>
,'isea9a te)tul in po9itia superscript
<blink>text</blink>
>lin?
1/
<strike>text</strike>
Te)t taiat
<tt>text<tt
Te)t classic 1>roEser-ul pre9inta te)tul intr-un sin+ur tip de 'ontG
indi'erent de 'ontul ales cu atri>utul .,CEG in interiorul elementului
."AT
.pre/tet.0pre/ ,'isea9a te)tul e)act aa cum esteG inclusi; spaii
<em>text</em>
,'isea9a de o>icei te)t italic
<strong>text<strong>
Te)t accentuat 14roEser-ul de o>icei arata acest element ca >old2
.cite/ Citatie .0cite/ =epre9inta o citatie din document
.K/ ... .0K/ .olosit pentru citate scurte
.)locIKuote/ ...
.0)locIKuote/
.olosit pentru incadrarea de citate mai lun+iG crea9a spatiu pentru te)t
(e"plul 3.1
5."AT si9eKJ2J colorKJredJ 'aceKJarialJ8 Aiciodat& nu spune niciodat& 5O."AT8
:& anali9&m cele trei atri>ute ale etic%etei 5."AT8H
si*e - dimensiunea te)tului - poate 'i un num&r ntre 1 i * 1dimensiuni a>solute2G ntre -1 i -3
sau ntre ]1 i ]4 1dimensiuni relati;eG adic& raportate la dimensiunea deCa e)istent& a 'ontului2.
!imensiunea presta>ilit& 1%e#ault2 a 'onturilor este 3.
!ac& dimensiunile menionate dep&esc inter;alul 1-*G >roEserul rotunCete automat ;alorile
pentru a le ncadra n acest inter;al.
color - culoarea te)tului - este culoarea cu care ;a 'i a'iat te)tul pre9ent ntre etic%ete 1n
e)emplul nostruG J Lumea nu este a celor modetiG ci a celor ener+iciJ 2.
;ace - tipul de 'ont - determin& tipul de 'ont care ;a 'i utili9at la a'iarea te)tului.
Tipurile cele mai u9uale suntH
,rial
Ta%oma
Hel;etica
Times AeE =oman
Courier
7erdana
,tri>utul etic%etei permite preci9area 'ie a unui sin+ur tip de 'ont 'ie a mai multoraG separate
prin ;ir+ul&. $reci9area mai multor 'onturi aCut& n e;entualitatea c0nd primul tip indicat nu este
instalat pe calculatorul celui care ;i9itea9& pa+inaG i se 'ace ca n e)emplul de mai Cos.
5."AT 'aceKJarialG ;erdanaG times neE romanJ8
In aceast& situaie >roEserul ;a ale+e sin+ur din list& primul tip de 'ont pe care l recunoateG
i+nor0ndu-le pe urm&toarele.
!"portant#

La sta>ilirea tipului de caracter utili9at n pa+in& inei seama de 'aptul c& nu toi utili9atorii au
instalate pe computerele lor acelai set de caractere ca i dumnea;oastr&. !in acest moti;G 'olosirea
unor caractere e)oticeG de e'ectG poate conduce la un eec n ca9ul c0nd utili9atorul nu are instalat
acel 'ont. !in acest moti; este de pre'erat 'olosirea unor 'onturi cu utili9are lar+&G cum sunt cele
menionate mai sus.
In E)emplul 3.2 ;om aplica pe r0nd 'iecare dintre cele trei atri>ute menionate asupra unui
te)t.
23
(e"plul 3. 2
5HTML8
5HE,!8
5T6TLE8'onturi15OT6TLE8
5OHE,!8
54"!# >+colorKJWelloEJ8
5."AT si9eKJJ 'aceKJta%omaJ colorKJ+reenJ8Manual HTML 5O."AT854=8
5."AT si9eKJ]3J 'aceKJarialJ colorKJredJ8Manual HTML 5O."AT854=8
5."AT si9eKJ-1J 'aceKJcourier neEJ colorKJ>lueJ8Manual HTML 5O."AT8
5O4"!#8
5OHTML8
(e"plul 3. 3
5HTML8
5HE,!8
5OHE,!8
54"!# >+colorKJE%iteJ8
54,:E."AT 'aceKJarialJ colorKJ>lueJ si9eKJ2J8
,m aCuns la lectia despre 'onturi a 5."AT 'aceKJarial >lac?J colorKJredJ
si9eKJ4J8Manualului HTML5O."AT8
5O4"!#8
5OHTML8
Caracteristicile te)tului din pa+in& au 'ost setate cu aCutorul etic%etei 54,:E."AT8. $entru a
a'ia simultan o parte din te)t ntr-un mod di'erit am 'olosit etic%eta 5."AT8.
!ei etic%eta 54,:E."AT8 'ace parte din standardul HTML 3.2G atri>utele sale nu sunt
recunoscute de >roEserele Aetscape. Ca urmareG acesta ;a a'ia te)tul utili90nd propriile set&ri
presta>ilite 1%e#ault2G i+nor0nd atri>utele menionate n etic%eta 54,:E."AT8.
<rm&torul e)emplu 1E)emplul 3.42 a'iea9& un cu;0nt a;0nd literele de m&rimi di'erite
(e"plul 3.4
5HTML8
5HE,!8
5OHE,!8
54"!# >+colorKJE%iteJ8
54,:E."AT 'aceKJarial >lac?J colorKJredJ8
5."AT si9eKJ4J8@5O."AT8
5."AT si9eKJJ8=5O."AT8
5."AT si9eKJ(J8,5O."AT8
5."AT si9eKJ*J8T5O."AT8
5."AT si9eKJ(J8<5O."AT8
5."AT si9eKJJ865O."AT8
5."AT si9eKJ4J8T5O."AT8
5O4"!#8
5OHTML8
21
2. ,ccentuarea te)tului
a2 Etic%eta .3!'/ .03!'/ 'ace 'onturile mai mari dec0t dimensiunea curent&.
546@8Te)t cu caractere mari5O46@8
Te)t cu caractere mari
>2 Etic%eta .&M1LL/ .0&M1LL/ 'ace 'onturile mai mici dec0t dimensiunea curent&.
5:M,LL8Te)t cu caractere mici5O:M,LL8
Te)t cu caractere mici
c2 Etic%etele .3/ .03/ 1!ol%2 i .&T847'/ .0&T847'/ reali9ea9& scrierea cu caractere
aldineG sau n+roate 1!ol%2.
548Te)t in+rosat 15O48
Tet in,rosat 1
5:T="A@8Te)t in+rosat 25O:T="A@8
Tet in,rosat 2
d2 Etic%etele .!/ .0!/ 1italic2 i .(M/ .0(M/ 1emphasi)e%2 reali9ea9& scrierea cu caractere
italice.
568Te)t inclinat 15O68
*ext inclinat +
5EM8 Te)t inclinat 25OEM8
*ext inclinat ,
e2 Etic%etele .&/ .0&/ i .&T8!<(/ .0&T8!<(/ reali9ea9& scrierea te)tului t&iat de o linie
ori9ontal&.
5:8Te)t taiat 15O:8
Te)t taiat 1
5:T=6LE8Te)t taiat 25O:T=6LE8
Te)t taiat 2
'2 Etic%eta .:/ .0:/ 1un%erline%2 reali9ea9& su>linierea te)tului.
5<8Te)t su>liniat5O<8
Te)t su>liniat
!"portant #
<tili9area te)tului su>liniat tre>uie '&cut& cu +riC&G ntruc0t acesta poate 'i con'undat cu un
lin?.
22
+2 Etic%eta .&:5/ .0&:5/ 1superscript2. $rin intermediul ei se pot insera n document
caractereOte)te plasate deasupra ni;elului liniei de scriere.
,pa in+%eata la 3 5:<$835O:<$8C
,pa in+%eata la 3
3
C
%2 Etic%eta .&:3/ .0&:3/ 1su!script2. $rin intermediul ei se inserea9& te)te plasate su>
ni;elul liniei de scriere.
Coordonatele B5:<4815O:<48G #5:<4825O:<48
Coordonatele B
1
G #
2
Este de remarcat 'aptul c& etic%etele 546@8 i 5:M,LL8 sunt e)ecutate di'erit n di;erse
>roEsere.
,st'elG n Aetscape 546@8 'ace te)tul mai mare cu un punct iar 5:M,LL8 mai mic cu un
punct dec0t dimensiunea curenta.
In 6nternet E)plorerG 546@8 a'iea9& te)tul cu 'onturi de dimensiune 4 iar 5:M,LL8 cu
'onturi de dimensiune 2. Etic%etele 546@8 i 5:M,LL8 pot 'i repetate pentru a o>ine un e'ect mai
accentuat.
E)emplele urm&toare ilustrea9& modul cum pot 'i utili9ate aceste etic%ete.
(e"plul 3. 5
5HTML8
5HE,!8
5OHE,!8
54"!#8
54,:E."AT 'aceKJarialJ colorKJ>lueJ8
546@8Etic%ete5O46@8 care 5EM8sc%im>a5OEM8 aspectul 5:M,LL8te)tului5O:M,LL8
5O4"!#8
5OHTML8
(e"plul 3. 6
5HTML8
5HE,!8
5T6TLE8'onturi 5OT6TLE8
5OHE,!8
54"!#8
5."AT 'aceKJarialJ si9eKJJ8,cesta este 'ont ,rial 5O."AT854=8
5."AT 'aceKJal+erianJ si9eKJ4J colorKJ+reenJ8,cesta este 'ont ,l+erian 5O."AT854=8
5."AT 'aceKJcourierJ colorKJ>lueJ85:T="A@8,cesta este 'ont Courier
5O:T="A@85O."AT854=8
5."AT .,CEKJ;i;aldiJ si9eKJJ colorKJ+raWJ85<8,cesta este 'ont 7i;aldi
5O<85O."AT854=8
5."AT .,CEKJ+aramondJ85EM8,cesta este 'ont @aramond 5OEM85O."AT854=8
5."AT .,CEKJmodernJ si9eKJ*J colorKJ>roEnJ85:T=6LE8,cesta este 'ont Modern
5O:T=6LE85O."AT854=8
5O4"!#8
5OHTML8
23
(e"plul 3. 7
5HTML8
5HE,!8
5T6TLE8Titlu documentului5Otitle8
5OHE,!8
54"!#8
5$8
5 :T=6LE 8 Te)t taiat 5O :T=6LE 854=8
546@8 $re9inta te)tul intr-un 'ont mare 5O>i+85>r8
5:M,LL8 $re9inta te)tul intr-un 'ont mic 5O:M,LLl854=8
5:<48 ,'isea9a te)tul in po9itia su>script 5O:<$8 normal
5:<$8 ,'isea9a te)tul in po9itia superscript 5Osup85>r8
5O$8
5O4"!#8
5OHTML8
(e"plul 3. 8
5HTML8
5HE,!8
5T6TLE8Titlu documentului5Otitle8
5OHE,!8
54"!#8
5$85."AT :6MEKJ]1J8" sin+ura marire5O."AT8- normal -
5."=AT :6MEKJ-1J8" sin+ura micsorare5O."AT854=8
5484old5O48- 5i8 6talic 5Oi8 - 5u8 :u>liniat 5Ou8 -
5."AT C"L"=rKJQ''3333J8 Colorat 5O."AT85>r8
5EM8,ccentut5Oem8 - 5:T="A@8 :tron+ 5O:T="A@8 -
5TT8Tele tWpe5OTT85>r8
-C6TE(PQ1(/R 1//(G Mi%nea @E"=@E:C<-./I*0(
5O4"!#8
5OHTML8
(e"plul 3. 9
5HTML8
5HE,!8
5T6TLE8$rietenie5OT6TLE8
5OHE,!8
54"!#8
5$8
5^8$rietenia e un cu;ant pe care multi il rostescGdar putini il intele+..5O^8
54L"CL^<"TE8
$rietenie inseamna sa 'ii alaturi de prieteni nu cand au dreptateG ci cand +resesc.
54=8
$rietenia nu o poti le+a in lanturiGinsa ea te lea+a.
24
54=8
7aloarea unui prieten nu o cunosti decat atunci cand il pier9i[[
5O4L"CL^<"TE8
5CEATE=8
5,!!=E::8CAE,M< 54=8 =omania 54=8 Tele'on ZZ5O,!!=E::8
5OCEATE=8
5O$8
5O4"!#8
5OHTML8
Capitolul 4
6or"atarea tetului
Etic%etele despre care ;om ;or>i n continuare nu se mai re'er& la particularit&ile 'onturilor ci
la 'elul n care poate 'i amplasat un te)t n cadrul pa+inii. Inainte de a discuta n am&nunt despre
etic%etele care permit 'ormatarea te)tuluiG s& 'acem c0te;a preci9&ri pri;ind 'elul cum sunt a'iate
te)tele.
!up& cum tiiG 'iierele HTML sunt 'iiere te)t. ,ceasta nseamn& c& atunci c0nd sal;ai
'iierul respecti;G el este sal;at numai ca te)tG deci >roEserul nu poate recunoate i e)ecuta dec0t
strict acele comen9i pre;&9ute de etic%etele HTML. !in acest moti;G trecerea la un r0nd nouG care n
editorul de te)t se reali9ea9& prin ap&sarea tastei EATE=G nu este recunoscut& de >roEser.
<n alt aspect este plasarea n te)t a spaiilor. C%iar dac& ;ei introduce spaii suplimentare
ntre cu;inte atunci c0nd scriei documentul HTML n editorul de te)tG >roEserul ;a a'ia in;aria>il
un sin+ur spaiu ntre dou& cu;inte.
,cesta este moti;ul pentru care 'iecare dintre aceste elemente de 'ormatare a te)tului are o
etic%et& proprie care indic& >roEserului cum anume s& 'ac& a'iarea.
1. Trecerea la un r0nd nou
Trecerea la un r0nd nou se reali9ea9& cu aCutorul etic%etei .38/ 1de la line !reak2. Etic%eta
54=8 nu este o etic%et& container. Ea are rolul de a comunica >roEserului c& te)ul care urmea9&
dup& etic%et& ;a 'i a'iat pe un r0nd nou aa cum re9ult& din E)emplul 4.1.
2
(e"plul 4. 1
5HTML8
5HE,!8
5T6TLE8.ormatarea te)tului5OT6TLE8
5OHE,!8
54"!#8
:alut54=8Ma numesc Mi%nea54=86n;at sa construiesc o pa+ina Fe>54=8
5O4"!#8
5OHTML8
Etic%eta 54=8 admite atri>utul clear care poate lua ;alorile le'tG ri+%t sau all.
In mod normalG la nt0lnirea etic%etei 54=8 linia curent& de te)t este ntrerupt& i se 'ace
trecerea la o linie nou&G ca i la acionarea tastei 0nter ntr-un editor de te)t. E)ist& ns& situaii c0nd
dorim ca linia s& 'ie a'iat& l0n+& un anumit element 1o ima+ineG sau un ta>elG de e)emplu2 care
>loc%ea9& partea din st0n+a sau din dreapta a liniei.
In aceste ca9uri putem 'olosi atri>utul clear al etic%etei 54=8 ca n E)emplul 4.2
(e"plul 4. 2
5HTML8
5HE,!8
5T6TLE8te)t25OT6TLE8
5OHE,!8
54"!#8
56M@ srcKJ..O6ma+iniOima+ine.Cp+J ali+nKJle'tJ8
,cest te)t ;a 'i a'isat intre ima+ine si mar+inea dreapta a documentului.
54= clearKJle'tJ8,cest te)t ;a 'i a'isat su> ima+ineG aliniat stan+a. 6ntre acest te)t si dreapta
ima+inii ;a e)ista un spatiu +ol.
5O4"!#8
5OHTML8
2. Titlurile 1Headin+s2
Titlurile dintr-un document HTML sunt marcate cu aCutorul etic%etelor .H1/G .H2/G .H3/G
.H4/G .H5/G .H6/. Ele sunt etic%ete containerG deci necesit& etic%eta corespun9&toare de
nc%idere.
Etic%eta 5H18 de'inete titlul de dimensiunea ma)im&G iar 5H(8 pe cel de dimensiune minim&.
!"portant #

!ei standardul HTML nu inter9ice utili9area n orice ordine a titlurilorG este de pre'erat ca
acestea s& 'ie 'olosite n ordinea Jnormal&JG pro+resi;G '&r& a s&ri peste ;reun ni;el 1de pild& de la
H1 direct la H2G pentru a e;ita e;entualele pro>leme la con;ertirea te)tului n alte tipuri de 'iiere.
2(
In E)emplul 4.3 ;om 'olosi toate cele ase etic%ete pentru titluri pentru a 'ace o comparaie cu
dimensiunea standard a te)tului.
(e"plul 4. 3
5HTML8
5HE,!8
5T6TLE8Titluri5OT6TLE8
5OHE,!8
54"!#8
5H18Titlu H15OH18Te)t normal
5H(8Titlu H(5OH(8Te)t normal
5O4"!#8
5OHTML8
(e"plul 4. 4
5HTML8
5HE,!8
5T6TLE8Titluri5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Titluri5OH185H=8
5H1 ali+nKJcenterJ8
Titlu de marime 1 aliniat in centru
5OH18
5H2 ali+nKJri+%tJ8
Titlu de marime 2 aliniat la dreapta
5OH28
5H48
Titlu de marime 4 aliniat la stan+a
5OH48
5O4"!#8
5OHTML8
3. $ara+ra'ele
Trecerea la un nou para+ra' n cadrul te)tului se reali9ea9& cu aCutorul etic%etei .5/ .05/.
,ceast& etic%et& comunic& >roEserului s& insere9e o linie li>er& n te)t i s& nceap& o nou& linie.
Etic%eta 5$8 este o etic%et& container dar pre9ena etic%etei de nc%idere 5O$8 este opional& n
anumite situaii. !ac& ea este pre9ent&G indic& >roEserului s& insere9e o linie li>er& i dup& >locul
de te)t cuprins ntre cele dou& etic%ete.
2*
Etic%eta 5$8 admite atri>utul ali,n cu cele trei ;alori ale acestuiaH le'tG center i ri+%tG care
permit alinierea te)tului la st0n+aG centrat respecti; la dreapta.
E)emplul 4. ilustrea9& cele trei modalit&i de aliniere a te)tului.
(e"plul 4. 5
5HTML8
5HE,!8
5T6TLE8$ara+ra'ele5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8$ara+ra'e5OH185H=8
5$8 ,cesta este un para+ra' aliniat la stan+a.
5$ ali+nKJri+%tJ8 ,cesta este un para+ra' aliniat la dreapta.
5$ ali+nKJcenterJ8 ,cesta este un para+ra' aliniat la centru.
5O4"!#8
5OHTML8
!in E)emplul 4. care red& aspectul pa+inii descrise n e)emplu se poate o>ser;a c&
alinierea la st0n+a este implicit& 1nu mai tre>uie speci'icat ali+nKJle'tJ2. :e mai poate o>ser;a c& nu
a 'ost 'olosit& etic%eta de nc%idere a para+ra'elorG deoarece la nt0lnirea unei noi etic%ete 5$8
;ec%iul para+ra' se consider& nc%is. TotuiG pre9ena sau a>sena etic%etei de nc%idere a
para+ra'ului atunci c0nd este pre9ent atri>utul ali+n tre>uie sta>ilit& cu +riC&G pentru a nu o>ine
re9ultate necon'orme cu dorinele dumnea;oastr&.
In E)emplul 4.( dorim s& aliniem un nou para+ra' n dreapta pa+iniiG iar te)tul de pe r0ndul
urm&tor para+ra'uluiG care este introdus prin etic%eta 54=8G s& 'ie scris normalG de la cap&tul din
st0n+a al pa+inii
(e"plul 4. 6
5HTML8
5HE,!8
5T6TLE8$ara+ra'ele5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8$ara+ra'e5OH185H=8
,cest te)t este scris normalG incepand e la mar+inea din stan+a.
5$ ali+nKJri+%tJ8,cest te)t este aliniat la dreapta
54=8<nde este a'isat acest te)t?
5O4"!#8
5HTML8
!in E)emplul 4.( se poate o>ser;a c& a'iarea nu s-a '&cut con'orm inteniilor noastre.
Moti;ul este 'aptul c& etic%eta
5$ ali+nKYri+%tY8 nu are etic%eta de nc%idere 5O$8G i prin urmare e'ectul s&u se prelun+ete
p0n& la nt0lnirea unei alte etic%ete 5$8.
!ac& ;ei nc%ide para+ra'ul n mod e)plicit cu aCutorul etic%etei de nc%idereG nainte de
trecerea la o linie nou&G e'ectul asupra te)tului ;a 'i cel dorit.
2-
!ei aparent etic%etele 54=8 i 5$8 au un e'ect asem&n&torG i anume trecerea la o linie nou&G
ele nu sunt e)ecutate la 'el. 54=8 comunic& >roEserului unde se nc%eie o linieG n ;reme ce 5$8 i
impune s& lase o linie li>er& i s& treac& la un nou para+ra'. !ac& 'olosim atri>utul ali+n al etic%etei
5$8 n situaiile c0nd dup& para+ra' este introdus un alt element n pa+in& este recomandat&
nc%iderea n mod e)plicit a etic%etei respecti;e.
4. $re'ormatarea te)tului
,a cum am preci9at la nceputul capitoluluiG atunci c0nd editai documentul HTML cu
aCutorul unui editor de te)tG indi'erent c0te spaii ;ei l&sa ntre cu;inte sau ntre liniile de te)tG
>roEserul ;a a'ia te)tul in;aria>il cu un sin+ur spaiu ntre cu;inte i ;a aCusta lun+imea liniilor n
'uncie de m&rimea 'erestrei. Cu alte cu;inteG orice spaii sau linii li>ere suplimentare ;or 'i i+norate
de c&tre >roEser. ,a cum am ;&9ut mai susG trecerea la o linie nou& se reali9ea9& cu aCutorul
etic%etei 54=8 iar inserarea unei linii li>ere se 'ace cu aCutorul etic%etei 5$8.
E)ist&G ns&G i o etic%et& care impune >roEserului s& a'ie9e te)tul ntocmai cum a 'ost el
'ormatat n documentul HTML. Este ;or>a despre etic%eta .58(/ .058(/.
Etic%eta 5$=E8 permite pre'ormatarea te)tului i menine spaierea i alinierea te)tului aa cum a
'ost '&cut& n documentul surs& HTML. Etic%eta de nc%idere 5O$=E8 este o>li+atorie.
E)emplul 4.* ilustrea9& modul cum poate 'i 'olosit& etic%eta 5$=E8
Testai e)emplul 'olosind etic%eta 5$=E8 iar apoi eliminai-oG pentru a o>ser;a mai >ine e'ectul
s&u.
(e"plul 4. 7
5HTML8
5HE,!8
5T6TLE8$re'ormatarea te)tului5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Te)tul pre'ormatat5OH185H=8
,cesta este un te)t normal 5$8
"rarH
Luni
-H33 =omana
/.33 Matematica
13H33 @eo+ra'ie
11.33 6storie
12.33 .i9ica5$8
,cesta este te)tul de mai sus pre'ormatat
5$=E8
"rarH
Luni
-H33 =omana
2/
/.33 Matematica
13H33 @eo+ra'ie
11.33 6storie
12.33 .i9ica
5O$=E8
5O4"!#8
5OHTML8
. Centrarea te)tului
,a cum am ;&9ut mai susG a'iarea te)tului centrat n pa+in& se poate 'ace cu aCutorul
etic%etei 5$8 a;0nd atri>utul ali+n setat la ;aloarea JcenterJ.
" alt& posi>ilitate de a reali9a acest lucru este de a utili9a o etic%et& dedicat&G inclu90nd te)tul
ntre etic%etele
.C(7T(8/ .0C(7T(8/. Etic%eta 5CEATE=8 este o etic%et& containerG pre9ena etic%etei
de nc%idere 'iind o>li+atorie.
E)emplul 4.- reali9ea9& centrarea unui te)t.
(e"plul 4. 8
5HTML8
5HE,!8
5T6TLE8te)t-5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Centrarea te)tului 5OH185H=8
5CEATE=8
,cesta este un te)t centrat. ,cesta este un te)t centrat. ,cesta este un te)t centrat. ,cesta este
un te)t centrat. ,cesta este un te)t centrat. ,cesta este un te)t centrat. ,cesta este un te)t centrat.
,cesta este un te)t centrat.
5OCEATE=8
5O4"!#8
5OHTML8
(. ,'iarea te)tului pe o sin+ur& linie
In ca9ul c0nd se dorete a'iarea unui te)t pe o sin+ur& linieG c%iar dac& acest lucru nseamn&
dep&irea mar+inii 'erestrei i derularea acestuia pe ori9ontal&G se include >locul de te)t ntre
etic%etele .7438/ .07438/.
,ceast& etic%et& mpiedic& >roEserul s& limite9e lun+imea liniei la dimensiunea 'erestrei.
E)emplul 4./ ilustrea9& 'olosirea etic%etei 5A"4=8
(e"plul 4. 9
33
5HTML8
5HE,!8
5T6TLE8te)t/5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Te)tul pe o sin+ura linie 5OH185H=8
5A"4=8
,cesta este un te)t care ;a 'i a'isat pe o sin+ura linieG c%iar daca depaseste dimensiunile unei
'erestre o>isnuite. $uteti ;eri'ica acest 'apt prin reducerea dimensiunilor 'erestrei >roEserului.
5OA"4=8
5O4"!#8
5OHTML8
*. 4locul 5!678
" alt& modalitate de delimitare i de 'ormatare a unui >loc de te)t este 'olosirea etic%etei
container .2!=/ .02!=/. $re9ena etic%etei de nc%idere este o>li+atorie.
Etic%eta 5!678 reali9ea9& di;i9area unui document HTML n seciuni distincteG di;i9iune n
care pot 'i incluseG pe l0n+& te)tG i alte elementeH le+&turiG ima+iniG 'ormulare. Ca i n ca9ul
etic%etei pentru introducerea para+ra'elorG etic%eta 5!678 admite atri>utul ali,nG pentru alinierea
te)tului. 7alorile posi>ile ale acestui atri>utG deCa cunoscuteG suntH
le't - aliniere la st0n+a
center - aliniere la centru
ri+%t - aliniere la dreapta
,linierea preci9at& de atri>utul ali+n al >locului are e'ect asupra tuturor elementelor incluse n
>locul 5!678. 4locul 5!678 admite i atri>utul noArapG care inter9ice ntreruperea r0ndurilor de
c&tre >roEser.
In documentul descris n E)emplul 4.13 este ilustrat& utili9area acestei etic%ete.
(e"plul 4. 10
5HTML8
5HE,!8
5T6TLE84locul !675OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ84locul di;5OH185H=8
,ceasta linie este o linie de te)t normala.
5!67 ali+nKJri+%tJ8
,ceasta este prima sectiune a te)tuluiG aliniata dreapta.54=8
5O!678
5!67 ali+nKJcenterJ8
,ceasta este a doua sectiune a te)tuluiG aliniata central.54=8
5O!678
31
5!67 ali+nKJle'tJ8
,ceasta este a treia sectiune a te)tuluiG aliniata stan+a.54=8
5O!678
5O4"!#8
5OHTML8
-. Linii ori9ontale
Intr-o pa+ina Fe> pot 'i inserate linii ori9ontale care au rolul de a delimita di'eritele 9one ale
pa+inii sau de a m>un&t&i aspectul ei estetic. ,cest lucru se 'ace cu aCutorul etic%etei .H8/.
Etic%eta 5H=8 nu este o etic%et& container deci nu e)ist& o etic%et& de nc%idere.
$entru a con'i+ura o linie ori9ontal& se utili9ea9& urm&toarele atri>ute ale etic%etei 5H=8H
ali,n - permite alinierea liniei ori9ontale. 7alorile posi>ile sunt le'tG center i ri+%t
AidtC - speci'ic& lun+imea liniei - lun+imea poate 'i sta>ilit& n pi)eli sau n procente din
l&imea ecranului.
si*e - speci'ic& +rosimea linieiG e)primat& n pi)eli
color - permite de'inirea culorii liniei
,tri>utele etic%etei 5H=8 sunt ilustrate n E)emplul 4.11.
(e"plul 4. 11
5HTML8
5HE,!8
5T6TLE8Linii ori9ontale5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8 Linii ori9ontale 5OH18
Linie aliniata la stan+aG lun+ime 133_G +rosime 2 5H=8
Linie aliniata in centru G lun+ime 3_G +rosime pi)eli.
5H= ali+nKJcenterJ Eidt%KJ3_J si9eKJJ colorKJ>lac?J8
Linie aliniata la dreapta G lun+ime 13 de pi)eliG +rosime 12 pi)eli G de culoare rosie.
5H= ali+nKJri+%tJ Eidt%K13 si9eK12 colorKJredJ8
5O4"!#8
5OHTML8
In e)emplul anterior se poate o>ser;a c& simpla pre9en& a etic%etei 5H=8 '&r& nici un 'el de
atri>ute duce la a'iarea unei linii prede'initeG de lun+ime e+al& cu 133_ din pa+in& i +rosimea
e+al& cu 2 pi)eli.
In e)emplul 4.12 ;om ilustra modul n care etic%eta 5!678 alinia9& elementele coninute n
interiorul s&uG n ca9ul nostru te)t i linii ori9ontale.
(e"plul 4. 12
5HTML8
5HE,!8
32
5T6TLE8Lini ori9ontale5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Linii ori9ontale5OH185H=8
Linia de mai Cos este aliniata la stan+a
5H= si9eKJ3J colorKJ>lueJ Eidt%KJ43_J ali+nKJle'tJ8
Liniile de mai Cos sunt aliniate la centru cu aCutorul >locului !67
Linii aliniate la centru
5H= si9eKJ13J colorKJcWanJ Eidt%KJ3_J8
5H= si9eKJJ colorKJna;WJ Eidt%KJ433J8
5O!678
5O4"!#8
5HTML8
/. 6nserarea unei adrese potale
!ac& ntr-o pa+in& Fe> tre>uie inclus& o adres& potal&G atunci putem 'olosi etic%eta
urm&toareH .1228(&&/ .01228(&&/.
Etic%eta 5,!!=E::8 este o etic%et& lo+ic& i are drept e'ectG n cele mai multe >roEsere a'iarea
te)tului cu caractere italice.
In E)emplul 4.13 este inserat& n pa+in& o adres&.
(e"plul 4. 13
5HTML8
5HE,!8
5T6TLE8,dresa postala5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8 ,dresa 5OH185H=8
,dresa 'irmei noastre este
5,!!=E::8
@oldenFe> Consult 54=8
:tr. $aradisuluiG Ar. 154=8
4ucuresti
5O,!!=E::8
5O4"!#8
5OHTML8
13. 6nserarea unui citat
$entru a insera un citat ntr-un te)t se pot 'olosi dou& etic%eteG n 'uncie de dimensiunea
citatului.
,st'elG dac& citatul dep&ete c0te;a liniiG se 'olosete etic%eta .3L4C<L:4T(/
.03L4C<L:4T(/.
E'ectul acestei etic%ete este a'iarea indentat& a te)tului cuprins ntre etic%eta de nceput i cea
de s'0rit 1n maCoritatea >roEserelor2 sau a'iarea acestuia cu caractere italice 1rareori2.
!ac& dorim ca ntr-un te)t s& citam un termenG titlul unei lucr&ri sau s& d&m o re'erin&G putem
include te)tul respecti; ntre etic%etele .C!T(/ .0C!T(/.
33
In cele mai multe dintre >roEsere te)tul inclus ntre etic%etele 5C6TE8 ;a 'i a'iat cu
caractere italice.
E)emplul 4.14 ilustrea9& modul de 'olosire al celor dou& etic%ete.
(e"plul 4. 14
5HTML8
5HE,!8
5T6TLE86nserarea unui citat5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ86nserarea unui citat5OH185H=8
Te)tul de mai Cos este un citat
54L"CL^<"TE8
$ro>a>ilitatea ca o 'elie de paine unsa cu unt sa cada pe co;or cu 'ata unsa in Cos este direct
proportionala cu ;aloarea co;orului
5O4L"CL^<"TE8
Citatul de mai sus 'ace parte din 5C6TE8Le+ile lui Murp%W5OC6TE8
5O4"!#8
5OHTML8
11. 6nserarea caracterelor speciale
!ei este impropriu s& numim caracterul J>lan?J sau space un caracter specialG a;0nd n
;edere 'rec;ena cu care este 'olositG totui acestaG ca i alte caractereG este inserat n pa+in& cu
aCutorul unei comen9i specialeH comanda M 1comanda ampersand2.
,a cum tii deCaG indi'erent c0te spaii ;om introduce atunci c0nd edit&m documentul
HTMLG >roEserul le ;a i+nora i ;a a'ia cu;intele cu un sin+ur spaiu ntre ele. $entru a 'ora
introducerea spaiilor suplimentare se 'olosete comanda Pn>spR 1no !reak space2.
!"portant #

Comanda ncepe cu sim>olul M 1ampersand2 i se termin& cu N 1punct i ;ir+ul&2.
In E)emplul 4.1 este ilustrat modul cum pot 'i spaiate cu;intele 'olosind comanda Pn>spR
(e"plul 4. 15
5HTML8
5HE,!8
5T6TLE8te)t15OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ86nserarea caracterelor speciale5OH185H=8
5."AT si9eKJ2J 'aceKJarialJ8
34
Cu;intelePn>spR Pn>spR Pn>spR dinPn>spR Pn>spR Pn>spR acestPn>spR Pn>spR Pn>spR
te)tPn>spR Pn>spR Pn>spR suntPn>spR Pn>spR Pn>spR despartitePn>spR Pn>spR Pn>spR dePn>spR
Pn>spR Pn>spR +rupuriPn>spR Pn>spR Pn>spR dePn>spR Pn>spR Pn>spR treiPn>spR Pn>spR Pn>spR
spatii.
5O."AT8
5O4"!#8
5OHTML8
!up& cum o>ser;ai din E)emplul 4.1 cu;intele sunt desp&rite prin trei spaii n loc de
unul sin+ur. $utei ad&u+a oric0te spaii dorii n acest mod. !e asemeneaG pentru a indenta un te)tG
putei insera la nceputul 'iec&rei linii num&rul de comen9i Pn>spR e+al cu num&rul de spaii cu care
;rei s& indentai te)tul.
Ta>el cu comen9ile necesare pentru a insera n te)t cele mai cunoscute caractereH
2enu"ire
caracter
8epre*entare
a ,ra;icG
Co"anda
HTML
:paiu
li>er
Pn>spR
CopWri+%t ` PcopWR
Trademar? a PQ13R
=e+istered b
Pre+R sau
PQ1*4R
Mai mic
dec0t
5 PltR
Mai mare
dec0t
8 P+tR
,mpersand P PampR
@%ilimele J PNuotR
Cent c PQ1(2
<n s'ert d PQ1--
" Cum&tate e PQ1-/
Trei f PQ1/3
3
s'erturi
@rade g PQ1*(
12. :u+estii pri;ind aspectul te)tului
,spectul te)tului ntr-o pa+in& Fe> este esenial pentru calitatea acesteia. <n te)t li9i>ilG scris
cu caractere de dimensiune potri;it&G >ine or+ani9at i ae9at n pa+in& ;a 'ace din pa+ina
dumnea;oastr& un mediu accesi>il i prietenos care l ;a stimula pe ;i9itatorul acesteia s& parcur+&
cu pl&cere in'ormaiile o'erite.
6at& c0te;a s'aturi re'eritoare la aspectul pa+inilor Fe>G menite s& ;& aCute la crearea unor
te)te li9i>ileG c0t mai uor de parcurs de c&tre cititori.
Au 'olosii 'onturi de dimensiuni prea mici sau 'onturi cu seri'eG cum este Times AeE =oman.
!ei este tipul cel mai utili9at pentru pu>licaiile tip&riteG te)tele scrise cu Times AeE =oman
sunt mai +reu de citit de pe monitor. $re'erai tipurile ,rialG 7erdanaG Hel;etica.
Au 'olosii numai litere mari 1maCuscule2. Te)tele scrise cu maCuscule sunt mai +reu de citit.
Au 'acei e)ces de caractere aldine 1n+roateG !ol%2. Limitai-;& la a accentua cu;inte sau
poriuni reduse din te)t. !e asemeneaG nu 'olosii caractere cursi;e 1nclinateG sau italice2 n
e)ces.
Au 'olosii prea multe tipuri de 'onturi i nici tipuri de 'onturi rare. .olosirea unui mare num&r
de 'onturi de dimensiuni i culori di'erite ;a 'ace ca pa+inile s& arate nc&rcate i s& 'ie +reu de
citit. .olosirea tipurilor de 'onturi rare aduce dup& sine riscul ca ;i9itatorul s& nu le ai>&
instalate pe computerul propriuG ast'el c& te)tul ;a 'i a'iat de >roEser cu 'onturile presta>ilite.
Au aranCai te)tul n pa+in& pe dou& coloane. ,ceasta este o practic& o>inuit& n 9iare i re;iste
dar nu este potri;it& ntr-o pa+in& Fe> deoarece 'orea9& ;i9itatorul ca odat& aCuns la >a9a
pa+inii s& o derule9e din nou pentru a citi ce-a de-a dou& coloan&.
Este >ine s& 'olosii 'iecare etic%et& n scopul pentru care a 'ost ea de'init&. Au 'olosii etic%etele
de titlu pentru a accentua anumite p&ri ale te)tului care nu sunt titluri. Au 'olosii etic%eta
5,!!=E::8 pentru a insera alte te)te dec0t adrese sau etic%eta 5C6TE8 pentru a reali9a
scrierea cu caractere italice a te)tului.
Motoarele de c&utare inde)ea9& pa+inile Fe> i n 'uncie de elementele 1etic%etele2 care sunt
incluse n ele iar 'olosirea lor neadec;at& conduce la o inde)are eronat& a pa+inii dumnea;oastr&.
Multe motoare de c&utare scanea9& pa+ina n c&utarea titlurilor i pe >a9a lor construiesc o
sc%i& a pa+inii.
!ac& ;ei 'olosi etic%etele de titlu pentru a accentua anumite p&ri ale te)tului 1operaie pe care
o putei reali9a n mod corect 'olosind etic%eta 5."AT82 ;ei o'eri in'ormaii eronate motoarelor de
c&utare. In acest 'elG scad ansele ca pa+inile dumnea;oastr& s& 'ie identi'icate i citite de cei
interesai.
!"portant#
Au uitai c& pa+inile ;or 'i pu>licate pe Fe>G undeG pentru a-i atin+e scopulG adic& pentru a 'i
cititeG tre>uie mai nt0i descoperite de cititoriG cel mai 'rec;ent prin intermediul motoarelor de
c&utare.
3(
Capitolul 5
Le,Gturi +linI9uri-
Le,Gturile 1link-urile2 repre9int&G poateG partea cea mai important& a unei pa+ini Fe>. Ele
trans'orm& un te)t o>inuit n %Wperte)t - un nou tip de te)tG di'erit de cel din clasicele pa+ini de
carteG care permite trecerea rapid& de la o in'ormaie a'lat& pe un anumit computer la alt& in'ormaie
memorat& pe un alt computer locali9at oriunde n lume.
1. ,dresa <=L
$entru a sta>ili o le+&tur& cu o alt& pa+in& 1un alt 'iier2 tre>uie s& speci'ic&m adresa :8L a
acestuia. <=L este un acronimG de la 1ni#orm 2esource LocatorG i repre9int& adresa de identi'icare
a unei resurse 1a unui 'iier2 a'lat& pe calculatorul propriu sau pe orice alt calculator din lume
conectat la 6nternet. " adres& <=L const& dintr-un ir de caractere care identi'ic& n mod unic o
anumit& resurs&G o'erind in'ormaii despre numele ser;erului pe care este stocat& acea resurs&
precum i despre locali9area ei.
E)ist& mai multe etic%ete HTML care 'olosesc adresa <=L drept ;aloare pentru anumite
atri>uteH etic%etele care introduc le+&turiG ima+ini sau 'ormulare. Toate acestea 'olosesc aceeai
sinta)& a adresei <=L pentru a speci'ica locaia unei anumite resurseG indi'erent de tipul acesteia.
:inta)a +eneral& a unei adrese <=L esteH
scCe"aB00ser?erO,a*daBport0caleaOcatreO;isier
undeH
3*
scCe"a - repre9int& unul dintre protocoalele de trans'er al in'ormaiilorG cum ar 'i HTT$G
.T$G @op%erG TelnetG etc.
ser?erO,a*da - repre9int& identi'icatorul ser;erului pe care este +&9duit 'iierul respecti;.
,cest identi'icator poate 'i adresa 6$ a ser;erului sau numele s&u.
port - repre9int& num&rul portului de comunicaie prin intermediul c&ruia >roEserul se
conectea9& la ser;er. :er;erele dein mai multe ast'el de porturiG 'iecare ser;ind unui alt tip de
comunicaieH HTT$G .T$G pot& electronic&G etc. $ortul presta>ilit n ca9ul trans'erului prin HTT$
are num&rul -3. Aum&rul portului tre>uie preci9at numai n ca9ul c0nd acesta este di'erit de -3.
caleaOcatreO;isier - repre9int& locali9area ierar%ic& a 'iierului n sistemul de directoare de pe
ser;er. ,ceasta const& ntr-unul sau mai multe nume desp&rite prin caracterul JOJ 1slash2
2. ,drese a>solute i adrese relati;e
$entru a putea locali9a un 'iier n structura ierar%ic& de directoareG n scopul de a sta>ili o
le+&tur& c&tre elG se poate 'olosi adresarea a)solutG sau adresarea relati?G.
1dresa a)solutG a unui 'iier conine calea precis& i complet& c&tre 'iierul respecti; pornind
de la ;0r'ul ierar%iei de directoareH
CHOFE4=""TOC<L"=6Oculori.%tml
.iierul culori.html se a'l& plasat pe discul C:P n directorul $(3844TG su>directorul
C:L48!.
1dresa relati?G a unui 'iier preci9ea9& po9iia acestuia n raport cu documentul HTML din care
este apelat. 7om re;eni ce;a mai Cos asupra acestui su>iect.
3. :ta>ilirea le+&turilor
$entru a insera le+&turi ntr-un document HTML 'olosim etic%eta .1/ .01/.
Etic%eta 5,8 este o etic%et& containerG pre9ena etic%etei de nc%idere 'iind o>li+atorie.
,tri>utul o>li+atoriu al etic%etei 5,8 este Cre; 1Hypertext 2e#erence2 care primete ca ;aloare
adresa <=L a 'iierului cu care dorim s& sta>ilim le+&tura. ,cest 'iier poate 'i un document
HTMLG o ima+ine sau un 'iier de alt tip. !ocumentul HTML n care este pre9ent& le+&tura se
numete sursG iar 'iierul c&tre care este '&cut& le+&tura se numete intG. :inta)a etic%etei 5,8
este urm&toareaH
5, %re'KJadresa\<=LJ8te)t sau ima+ine5O,8
Intre etic%etele 5,8 i 5O,8 poate 'i plasat un te)t o>inuit sau o ima+ine. In mod presta>ilit
te)tul inclus ntre etic%etele 5,8 este a'iat su>liniat i de culoare al>astr& iar ima+inile au un
c%enar de culoare al>astr&. .olosirea etic%etei 5,8 im>ricat& cu etic%ete de 'ormatare a te)tuluiG
'onturiG liste sau ta>ele se 'ace plas0nd etic%eta 5,8 3n interiorul acestora.
In acest sensG standardul HTML consider& incorect4 o construcie ca aceastaH
In 'uncie de locali9area intei 1a resursei re'erite de le+&tur&2 putem clasi'ica le+&turile ast'elH
le+&turi n cadrul aceleiai pa+ini 1ancore2
le+&turi c&tre o pa+in& a'lat& n acelai 'older
le+&turi c&tre o pa+in& a'lat& n alt 'older
le+&turi c&tre pa+ini e)terne
3-
4. ,ncore - le+&turi n cadrul aceleiai pa+ini
$entru a plasa o ancor& sunt necesare dou& elementeH
1. 5unctul spre care dorim s& 'acem le+&tura.
,cesta se de'inete inser0nd n punctul din pa+in& dorit 1de o>icei n dreptul unui anumit
element din pa+in&H un titluG o ima+ineG o alt& le+&tur&G un ta>elG etc.2 etic%eta 5,8G nsoit& de
atri>utul na"e care primete ca ;aloare un nume de identi'icare atri>uit ancorei 1de e)emplu
Jnume\ancoraJ 2. $rin urmareG identi'icarea punctului spre care se 'ace le+&tura se reali9ea9& ast'elH
5, nameKJnume\ancoraJ8 5O,8
2. Le,Gtura propriu9*isGP care se de'inete 'olosind atri>utul Cre; al etic%etei 5,8. In e)emplul
de mai susG acesta primete ca ;aloare JQnume\ancoraJ. :ta>ilirea le+&turii se reali9ea9& dup&
urm&toarea sinta)&H
5, %re'KJQnume\ancoraJ8te)t e)plicati;5O,8
Te)tul e)plicati; ;a 'i a'iat n mod di'eritG n 'ormat %Wperlin?G su>liniat i de culoare presta>ilit&
al>astr&.
1tenie#
$re9ena semnului QG plasat naintea numelui ancoreiG este o>li+atorie. ,cesta indic&
>roEserului 'aptul c& este ;or>a despre o le+&tur& intern&G n cadrul pa+inii. In ca9ul n care semnul
este omisG >roEserul ;a c&uta acest nume n a'ara pa+iniiG undeG e;identG nu l ;a +&si.
$entru a introduce o le+&tur& c&tre o ancor& de'init& n alt document 1alt& pa+in&2 a'lat n
acelai directorG atri>utul %re' primete o ;aloare de 'ormaH
%re'KJnume\'isier.%tmlQnume\ancoraJ.
E)emplul .1 ilustrea9& cele dou& situaii. $entru a e)empli'ica modul n care poate 'i inserat&
o ancor& ntr-un alt document i cum poate 'i ea re'erit&G am inserat n documentul text+5.html
ancora 5, nameKJcitatJ8.

(e"plul 5. 1
5HTML8
5HE,!8
5T6TLE8le+atura15OT6TLE8
5OHE,!8
54"!#8
5, nameKJancora1J85O,8
5H1 ali+nKJcenterJ8,ncore de'inite in acelasi document5OH185H=8
54=8,54=8454=8C54=8!54=8E
54=8.54=8@54=8H54=8654=8D
54=8L54=8L54=8M54=8A54=8"
54=8$54=8=54=8:54=8T54=8<
54=8754=8F54=8M54=8B54=8
5, %re'KJQancora1J8:us5O,8
54=854=8
5H1 ali+nKJcenterJ 8,ncore de'inite in alt document5OH185H=85$8
3/
Clic?
5, %re'KJte)t1.%tmlQcitatJ8,6C6 5O,8
pentru a desc%ide un document situat in alta pa+ina
5O4"!#8
5OHTML8
4)ser?aie
Construciile de mai Cos au acelai rolG i anume inserarea unei ancore denumit& Jancora1J n
punctul din pa+in& care conine elementul JELEMEATJ.
5, nameKJancora1J8ELEMEAT5O,8
5, nameKJancora1J85O,8ELEMEAT
In mod normalG etic%eta 5,8 'iind o etic%et& containerG ntre etic%etele de desc%idere i de
nc%idere tre>uie s& 'i+ure9e un te)t. TotuiG n e)emplul de mai susG dorind s& inser&m o ancor& n
dreptul titluluiG am 'olosit cea de-a doua construcieH
5, nameKJancora1J85O,8
5H1 ali+nKJcenterJ8,ncore de'inite in acelasi document5OH18
Moti;ul este acela c& este considerat& o practic& incorect& includerea etic%etelor de titlu ntre
etic%etele 5,8 i 5O,8.
:e poate utili9a i construcia urm&toareH
5H1 ali+nKJcenterJ85, nameKJancora1J8,ncore de'inite in acelasi document5O,85OH18
. Le+&tura c&tre o pa+in& a'lat& n acelai director 1'older2
$entru a reali9a o le+&tur& c&tre o pa+in& a'lat& n acelai director se procedea9& ast'elH
5, %re'KJnume\'isier.%tmlJ8te)t e)plicati;5O,8
undeH
%re' repre9int& atri>utul care sta>ilete calea c&tre inta cu care se 'ace le+&tura. !ac& 'iierul
int& este n acelai directorG atri>utul primete ca ;aloare c%iar numele 'iierului.
te)t e)plicati; - repre9int& te)tul pe care se 'ace clic? cu mouse-ul pentru a acti;a le+&tura.
1!e e)emplu
JClic? aiciJ 2. ,cest te)t este a'iat di'erit 'a& de restul te)tului - n +eneralG su>liniat i de
culoare al>astr&.
In E)emplul (.2 este reali9at& o le+&tur& reciproc& ntre dou& pa+ini a'late n 'olderul de lucru
1Ee>root2.
(e"plul 5. 2
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H18$a+ina 1 5OH185H=8
5, %re'KJle+atura3.%tmlJ8Lin? catre pa+ina 2 5O,8
5O4"!#8
43
5OHTML8
:al;ai acest e)emplu cu numele le,atura2.Ct"l iar e)emplul urm&tor 1E)emplul (.32 cu
numele le,atura3.Ct"l.
(e"plul 6. 3
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H18$a+ina 2 5OH185H=8
5O4"!#8
5OHTML8
La 'el cum ai procedat i p0n& acumG desc%idei una dintre cele dou& pa+ini cu >roEserul i
testai 'uncionarea le+&turii dintre ele.
,m>ele documente HTML tre>uie sal;ate n acelai 'older. 7ei o>ser;a c& atunci c0nd ;&
a'lai n $a+ina 1 i 'acei clic? cu mouse-ul pe te)tul Lin? catre $a+ina 2 se ;a desc%ide cel de-al
doilea document HTML i in;ersG le+&tura dintre cele dou& pa+ini 'iind ast'el reciproc&.
1tenie#
Aumele 'iierelor care repre9int& ;alori ale atri>utului %re' sunt case sensitive. ,celai lucru
se nt0mpl& i cu te)tul care desemnea9& ;alorile atri>utului name.
,ceasta nseamn& c& 'iierul le+atura.%tml este di'erit de 'iierul le+atura.%tmlG iar ancora
5, nameKJancora1J8 este di'erit& de 5, nameKJ,ncora1J8
$entru a e;ita +reelileG este recomandat s& ;& denumii toate 'iierele sau numele pentru
ancore cu litere mici.
(. Le+&tura c&tre o pa+in& locali9at& n alt director 1'older2
!ac& pa+ina cu care ;rem s& 'acem le+&tura se a'l& pe acelai calculatorG dar ntr-un alt 'olderG
atunci pentru a preci9a po9iia ei n structura de directoare se poate 'olosi adresarea relati;& sau
adresarea a>solut&.
,dresarea a)solutG se reali9ea9& preci90nd calea 1path2 complet&G pornind de la directorul
r&d&cin&G prin care se poate aCun+e la 'iierul de care ;rem s& le+&m pa+ina.
!e e)empluG dac& 'iierul culori+.html se a'l& pe discul /6n 'olderul $(3844T n
'olderul Le,aturi o le+&tur& c&tre el se ;a 'ace n modul urm&torH
5, %re'KJCHOFE4=""TOLe,aturiOculori1.%tml8Lin?5O,8
,dresarea relati?G preci9ea9& calea c&tre documentul cu care 'acem le+&tura pornind de la
documentul n care ne a'l&m. $entru a urca un ni;el n structura de directoare se 'olosete irul de
caractere J..O J
&cCe"a 5.1
41
!orim s& reali9&m o le+&tur& cu un 'iier numit !",1.,i; din 'olderul Imagini.
In acest ca9G etic%eta 5,8G plasat& n documentul legaturi,.%tmlG ;a a;ea urm&toarea 'orm&H
5, %re'KJ..O6ma+iniO6m+1.+i'J8!esc%ide ima+inea5O,8
$rin 'olosirea irului de caractere J..OJ 1punct punct slas%2 se urc& un ni;el n ierar%ia de
directoareG n raport cu directorul curent. $rin urmareG ntruc0t 'olderul curentG n care se a'l& pa+ina
de pornire.
C:/WEBROOT /Legaturi, %)! 4tl5")/" 6)4l4 ./ -")"-t/)/ "../" ,/ "74!*/ 8! 0(l./)4l
%9)!t/: -")/ /,t/ C:/WEBROOT. D/ "- ,/ -(!t!49 -"l/" 8! 0(l./)4l magini, .4%9 -")/
,/ ,%/-0-9 !4m/l/ 06/)4l4 .! "-/,t 0(l./) -4 -")/ ;)/m ,9 ,t"<lm l/*9t4)".
&cCe"a 5.2
!orim s& sta>ilim o le+&tur& cu un 'iier numit text,.html care se a'l& n directorul
(>(M5L( 1directorul p&rinte al 'olderului nostruG L1'1T:8!2. ,tunci re'erirea se ;a 'ace
ast'elH
5, %re'KJ..Ote)t2.%tmlJ8Lin? la te)t5O,8
42
Le+atura2.%tml
6m+1.+i'
FE4=""T
Le+aturi
CB
6ma+ini
CB
FE4=""T
HTML
EBEM$LE
LE@,T<=6
Te)t2.%tml
,m urcat un ni;el n ierar%ie aCun+0nd n directorul (>(M5L( i am speci'icat numele
'iierului cu care dorim s& 'acem le+&tura.
!ac& 'iierul text,.html se a'l& cu dou& ni;ele mai sus 'a& de 'olderul n care lucr&mG adic&
dac& se a'l& n 'olderol HTMLG atunci adresarea se 'ace ast'elH
5, %re'KJ..O..Ote)t2.%tmlJ8Lin? la te)t5O,8
In +eneralG de c0te ori este posi>ilG este de pre'erat s& 'olosii adresarea relati;&G pentru ca
documentele HTML s& 'ie porta>ile 1mutarea lor s& nu in;alide9e le+&turile sta>ilite ntre di;erse
documente2.
*. Le+&tura c&tre pa+ini e)terne
" le+&tur& c&tre o pa+ina e)tern& se reali9ea9& simpluG prin utili9area etic%etei 5,8 5O,8G
speci'ic0nd adresa <=L a pa+inii ca ;aloare a atri>utului %re' ast'elH
%re'KJ%ttpHOO<=L\pa+inaJ
=eamintim c& speci'icarea adresei <=L se poate 'ace 'ie 'olosind numele ser;erului pe care
este stocat& pa+ina 'ie adresa 6$ a acestuia. E;identG pentru ca lin?-ul s& 'uncione9eG tre>uie ca
utili9atorul s& 'ie conectat la 6nternet 1lucru ;ala>il pentru toate le+&turile e)terne2.
In E)emplul (.4 este sta>ilit& o le+&tur& c&tre pa+ina de start #a%oo.
(e"plul 5. 4
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Lin? catre #a%oo.com5OH185H=8
5, %re'KJ%ttpHOOEEE.Wa%oo.comJ8 #a%oo[5O,8
5O4"!#8
5OHTML8
<n atri>ut util al etic%etei 5,8 este title. ,cesta determin& apariia unei mici 'erestre 1tool
tip2 n pa+ina Fe> c0nd mouse-ul se a'la pe o le+&tur&G 'ereastr& n care este a'iat& ;aloarea dat&
acestui atri>utG care are ast'el menirea de a 'urni9a in'ormaii suplimentare despre semni'icaia unei
le+&turi
(e"plul 5. 5
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,tri>utul title5OH185H=8
5, %re'KJ%ttpHOOEEE.+oo+le.comJ titleKJLe+atura catre @oo+le.comJ8@oo+le5O,8
5O4"!#8
5OHTML8
43
-. ,le+erea culorilor pentru le+&turi
,m mai discutat despre acest su>iect i la capitolul despre culori. In mod presta>ilit 1%e#ault2
se utili9ea9& trei culori pentru le+&turiH
culoare pentru le+&turile ne?i*itate 1nu s-a e'ectuat nici un clic? pe ele2 - al>astru
culoare pentru le+&turile ?i*itate 1s-a e'ectuat cel puin un clic? pe ele2 - ;iolet
culoare pentru le+&turile acti?e 1deasupra c&rora se a'l& mouse-ul la un moment datG dar nc&
nu s-a e'ectuat clic?2 - rou
$entru a modi'ica dup& pre'erine aceste culori se 'olosesc cele trei atri>ute ale etic%etei
54"!#8H
linI pentru le+&turile ne;i9itateR
?linI pentru le+&turile ;i9itateR
alinI pentru le+&turile acti;e.
7alorile pe care le pot lua aceste atri>ute sunt culori de'inite prin nume sau con'orm codului
%e)a9ecimal.
E)emplul .( ilustrea9& modul cum pot 'i modi'icate culorile le+&turilor
(e"plul 5. 6
5HTML8
5HE,!8
5T6TLE8le+atura(5OT6TLE8
5OHE,!8
54"!# lin?KJWelloEJ ;lin?KJ+reenJ alin?KJma+entaJ8
5H1 ali+nKJcenterJ8:etarea culorilor pentru lin?-uri5OH185H=8
54=8+al>en pentru le+aturiG ;erde pentru le+aturi ;i9itate si ma+enta pentru le+aturi
acti;e54=8
5, %re'KJle+atura2.%tmlJ8Lin? catre pa+ina 1 5O,854=8
5O4"!#8
5OHTML8
/. <tili9area potei electronice 1e-mail2
Intr-o pa+in& Fe> se pot a'la le+&turi care permit lansarea n e)ecuie a aplicaiei de e)pediere
a mesaCelor electronice a celui care ;i9itea9& pa+ina. .&c0nd clic? pe te)tul care nsoete le+&turaG
pro+ramul de pota electronic& al ;i9itatorului pa+inii se ;a desc%ide automatG a;0nd c0mpul adresei
destinataruluiG JToHJ deCa completat cu adresa de mail speci'icat& n pa+in&. $entru a reali9a acest
lucru se 'olosete comanda "ailtoB atri>utul %re' primind o ;aloare ca mai CosH
5, %re'KJmailtoHadresa\e-mailJ8
!ac& pa+ina este ;i9uali9at& cu >roEserul 6nternet E)plorer iar ;i9itatorul are instalat un e-
mail mana+erG cum sunt de pild& aplicaiile Microso't "utloo? sau "utloo? E)presG acti;area
le+&turii ;a determina desc%iderea unuia dintre aceste pro+rame. In ca9ul n care mana+erul de e-
mail %e#ault este de alt tip dec0t aplicaia Microso'tG 1EudoraG de e)emplu2 aceasta ;a porni de
asemenea automatG cu o nou& pa+in& Sen% i cu adresa destinatarului pre-completat&.
!ac& pa+ina este ;i9uali9at& n AetscapeG se ;a desc%ide pro+ramul de pot& electronic&
ncorporat n >roEser.
44
In e)emplul urm&tor 1E)emplul .*2G n momentul c0nd ;i9itatorul pa+inii 'ace clic? pe te)tul
JTrimitei un mesaCJG aplicaia de pot& electronic& este lansat& automatG prin intermediul ser;iciului
mailtoHG iar c0mpul care tre>uie completat cu adresa de mail a destinatarului mesaCului este de
asemenea completat automat cu adresa autorhdomeniu.com .
(e"plul 5. 7
5HTML8
5HE,!8
5T6TLE8le+atura*5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8E)pediere de mesaCe electronice
5OH185H=8
5, %re'KJmailtoHautorhdomeniu.comJ titleKJadresa mea de mailJ8
Trimiteti un mesaC 5O,8
5O4"!#8
5OHTML8
13. Le+&turi c&tre 'iiere oarecare
" pa+in& Fe> poate conine le+&turi nu doar c&tre alte 'iiere HTMLG dar i c&tre 'iiere de
orice alt tipG a'late pe calculatorul propriu sau oriunde pe Fe>. Ca i n ca9ul le+&turilor cu alte
pa+ini 1documente HTML2 ;om 'olosi etic%eta 5,8 5O,8G ast'elH
5, %re'KJ<=L\'isier\destinatieJ8te)t e)plicati;5,8
Ae'iind ;or>a despre un 'iier HTMLG >roEserul nu ;a putea s& l procese9eG ast'el c& ;a
acti;a procesul de trans'er sau de desc&rcare 1%o'nloa%2G urm0nd caG dup& trans'erul inte+ral al
'iieruluiG utili9atorul s& l desc%id& cu un pro+ram adec;at.
In E)emplul .-G atunci c0nd se e'ectuea9& clic? pe le+&tur& se desc%ide caseta de dialo+ 7ile
%o'nloa% care permiteH
sal;area 'iierului pe disc sau
desc%iderea 'iierului n locaia curent&
(e"plul 5. 8
5HTML8
5HE,!8
5T6TLE8le+atura-5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Le+aturi catre 'isiere oarecare5OH185H=8
5, %re'KJ%tml.9ipJ8
Lin? catre 'isierul doEnload.9ip
5O,8
5O4"!#8
5OHTML8
11. !esc%iderea pa+inilor re'erite printr-o le+&tur&
4
$a+ina nou&G apelat& prin acti;area unei le+&turi se poate desc%ide n dou& moduriG n raport
cu pa+ina surs&H
n aceeai 'ereastr&
ntr-o 'ereastr& nou&
In mod presta>ilitG le+&turile desc%id pa+ina pe care o re'er& n 'ereastra curent&. ,ceasta
nseamn& c& dac& ;ei 'ace clic? pe un lin?G noua pa+in& se ;a nc&rca n locul pa+inii deCa desc%ise
1n aceeai instan& a >roEserului2. $entru a re;eni la pa+ina anterioar& tre>uie s& ap&sai >utonul
8ack al >roEserului.
,cest comportament se poate sc%im>a cu aCutorul ;alorilor atri>utului tar,etG asupra c&ruia
;om re;eni la capitolul Cadre.
7om meniona aici doar dou& dintre aceste ;aloriG corespun9&toare celor dou& situaii
amintite.
$entru ca pa+ina apelat& s& se desc%id& ntr-o 'ereastr& nou&G se utili9ea9& sinta)a +eneric& de
mai CosG n care atri>utul tar+et are ;aloarea J\>lan?JH
5, %re'KJadresa\<=LJ tar+etKJ\ >lan?J8te)t e)plicati;5O,8
$entru ca pa+ina re'erit& s& se desc%id& n aceeai 'ereastr& cu pa+ina surs&G atri>utului i se
asocia9& ;aloarea J\sel'JH
5, %re'KJadresa\<=LJ tar+etKJ\sel'J8te)t e)plicati;5O,8
(e"plul 5. 9
5HTML8
5HE,!8
5T6TLE8le+atura/5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8!esc%iderea pa+inii in alta 'ereastra5OH18 5H=8
$a+ina de mai Cos se ;a desc%ide intr-o 'ereastra noua
5$8
5, %re'KJta>el culori.%tmlJ tar+etKJ\>lan?J8Ta>elul culorilor5O,8
5O4"!#8
5OHTML8
12. Crearea unei >are secundare de na;i+are
In 'oarte multe site-uri ai o>ser;atG pro>a>ilG e)istenaG n partea de Cos a pa+iniiG a unui >loc
de te)t care conine le+&turi c&tre pa+inile care compun site-ulG le+&turile 'iind delimitate de mici
linii ;erticaleG ca n e)emplul de mai CosH
RCuloriR R6onturiR R3locuri de tetR
<tilitatea acestei >are este e;ident le+at& de 'acilitarea na;i+&rii n siteG mai ales n ca9urile
c0nd dimensiunea pa+inii dep&ete un ecran. In acest ca9G utili9atorul tre>uie s& derule9e la citire
pa+inile pe ;ertical&G ast'el c& lin?-urile de pe >ara de na;i+are superioar& nu mai sunt accesi>ile.
4(
" ast'el de >ar& secundar& de na;i+are se poate reali9a proced0nd ca n E)emplul .13. E;identG
le+&turile ;or 'ace re'erire la 'iierele HTML dorite de dumnea;oastr&.
(e"plul 5. 10
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ84ara de na;i+are5OH185H=8
5H4 ali+nKJcenterJ8
5, %re'KJculori1.%tmlJ8iCulorii5O,8
5, %re'KJ'onturi1.%tmlJ8i.onturii5O,8
5, %re'KJte)t1.%tmlJ8i.ormatarea te)tuluii5O,8
5OH48
5O4"!#8
5OHTML8
4ara ;ertical& inserat& ntre te)tele care trimit la pa+inile respecti;e este de o>icei plasat& pe
tastatur& pe aceeai tast& cu caracterul JjJ 1!ackslash2. !ac& dorii ca >ara s& 'ac& parte din te)tul
acti;G o ;ei insera ntre etic%etele 5,8 i 5O,8G altminteri ea tre>uie plasat& n a'ara acestoraG
ast'elH
i5, %re'KJculori1.%tmlJ8Culori5O,8i
4*
Capitolul 6
!"a,ini Ji ele"ente "ulti"edia
!"a,inile Ji ele"entele "ulti"edia constituieG '&r& ndoial&G o latur& interesant& i
spectaculoas& a oric&rei pa+ini de Fe>. $utei include n pa+inile dumnea;oastr& 'oto+ra'iiG ima+ini
animateG sunete sau ima+ini ;ideo. ,tunci c0nd sunt 'olosite n mod CudiciosG aceste elemente pot
m>o+&i coninutul pa+inilor Fe>G o'erindu-le un aspect atracti; i pro'esional. $e de alt& parteG
'olosirea lor n e)ces poate da pa+inilor un aspect nc&rcat i con'u9 i poate conduce la m&rirea
considera>il& a timpului de nc&rcare al pa+inii.
1. .ormatele 'iierelor +ra'ice
6ma+inile sunt stocate n 'iiere cu di;erse 'ormateG cele mai 'olosite pe Fe> 'iindG aa cum
era 'irescG cele care con'er& un raport optim ntre calitatea ima+inii i dimensiunile 'iierului.
!ou& dintre cele mai utili9ate tipuri de 'iiere +ra'ice sunt S5(' 19oint :hotographic
0xperts Group2 i '!6 1Graphics Interchange 7ormat2.
6or"atul '!6
.ormatul @6. 1.gi#2 este ideal pentru icon-uriG ilustraii i animaie. ,cest 'ormat utili9ea9& o
te%nolo+ie special& de comprimare care reduce semni'icati; dimensiunile 'iierelor +ra'ice pentru
un trans'er mai rapid prin reea
6ma+inile @6. suport& e'ecte de transparen&G ntreesere i animaieG asupra c&rora ;om re;eni
pe lar+ n capitolul (le"ente a?ansate de ,ra;icG. !eoarece maCoritatea >roEserelor recunosc
'ormatul @6.G acesta a de;enit cel mai 'rec;ent utili9at n pa+inile Fe>. $oate 'i 'olosit pentru a
include ima+ini direct n pa+ini 1ima+ini in-line2 precum i pentru a re'eri ima+inile prin
intermediul unor le+&turi e)terne.TotuiG datorit& num&rului redus de culoriG 'ormatul @6. nu este
potri;it pentru 'oto+ra'ii sau ima+ini de calitate nalt&. $entru acest tip de ima+iniG cel mai adec;at
este 'ormatul D$E@.
6or"atul S5('
4-
.ormatul D$E@ este potri;it pentru ima+inile 'oto+ra'iceG dar el nu este adec;at pentru
ilustraiiG desene sau ima+ini de dimensiuni reduse. ,l+oritmii 'olosii pentru comprimarea i
decomprimarea ima+inii alterea9& n mod nota>il 9onele de mari dimensiuni colorate cu o sin+ur&
nuan&. !in acest moti;G atunci c0nd dorii s& includei n pa+in& un desen sau o ilustraie care
'olosete un num&r redus de culoriG 'ormatul @6. este cel mai potri;it.
2. 6nserarea unei ima+ini
$entru a insera o ima+ine n cadrul unei pa+ini 1o ima+ine in-line2G se utili9ea9& etic%eta
.!M'/ 1de la image2. Etic%eta 56M@8 nu este o etic%et& containerG prin urmare nu necesit& o
etic%et& corespun9&toare de nc%idere.
$entru a putea identi'ica ima+inea care ;a 'i inserat&G se utili9ea9& atri>utul src 1source2 al
etic%etei 56M@8. ,tri>utul src i comunica >roEserului numele i locaia ima+inii care urmea9& s&
'ie inserat&. 7aloarea acestui atri>ut este adresa <=L a ima+inii respecti;e.
!ac& ima+inea se a'l& n acelai director cu 'iierul HTML care 'ace re'erire la ima+ineG
atunci adresa <=L a ima+inii este 'ormata numai din numele 'iieruluiG inclusi; e)tensia.
56M@ srcKJima+ine.e)tensieJ8
!ac& ima+inea se a'la ntr-un alt directorG <=L-ul ima+inii tre>uie speci'icat 'ie prin
adresarea a>solut& 'ieG pre'era>ilG prin cea relati;&.
E)emplul (.1 ilustrea9& modul n care se pot insera ntr-o pa+in& dou& ima+iniG una dintre ele
a'l0ndu-se n acelai 'older ca i pa+ina surs&G iar cealalt& n 'olderul !"a,ini.
(e"plul 6. 1
5HTML8
5HE,!8
5T6TLE8ima+ini15OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ86ma+ini in pa+ina5OH185H=8
6ma+ine a'lata in acelasi 'older5$8
56M@ srcKJima+ine1.+i'J >orderKJJ85$8
6ma+ine a'lata in 'olderul 6ma+ini5$8
56M@ srcKJ..O6ma+iniOoma+ine2.Cp+J >orderKJ1J 8
5O4"!#8
5OHTML8
In e)emplul de mai sus este pre9ent i atri>utul )order al etic%etei 56M@8. ,cesta este 'olosit
pentru a plasa un c%enar n Curul ima+inii. 7aloarea atri>utului >order este num&rul de pi)eli care
repre9int& +rosimea c%enarului din Curul ima+inii. ,>sena atri>utului sau setarea la ;aloarea J3J
'ace ca acest c%enar s& nu 'ie pre9ent.
<n alt atri>ut util asociat etic%etei 56M@8 este alt. ,cest atri>ut permite a'iarea unui te)t
e)plicati; n spaiul n care ;a 'i a'iat& ima+inea n pa+in&.
(e"plul 6. 2
5HTML8
5HE,!8
5OHE,!8
4/
54"!#8
5H1 ali+nKJcenterJ8 ,tri>utul alt 5OH185H=8
,cesta este un...54=8
56M@ srcKJ..O6ma+iniOima+ine J altKJD$@J8
5O4"!#8
5OHTML8
!up& cum putei o>ser;a din (e"plul 6. 2 ima+inea pe care am inclus-o n document nu
este a'iat&. Moti;ul este c& am omis intenionat e)tensia .gi# a 'iierului pentru a e)empli'ica
utilitatea atri>utului alt. $rin urmareG dac& dintr-un moti; oarecareG ima+inea nu se ncarc& n
pa+in&G se ncarc& mai +reuG sau este ;i9uali9at& cu un >roEser care nu suport& +ra'icaG n 9ona
re9er;at& ima+inii ;a 'i a'iat te)tul speci'icat ca ;aloare a atri>utului alt. !e asemeneaG te)tul
speci'icat ca ;aloare pentru atri>utul alt ;a 'i a'iat i n cadrul unei mici 'erestre care se desc%ide n
momentul c0nd cursorul mouse-ului este meninut deasupra ima+inii. <n alt moti; pentru care este
indicat& 'olosirea atri>utului alt este acela c& ;i9itatorul pa+inii are posi>ilitatea de a ;edea nc&
nainte de nc&rcarea complet& a ima+inii ce anume se ;a a'ia n 9ona respecti;&. ,st'elG el are
posi>ilitatea de a atepta nc&rcarea complet& a ima+inii sau de a trece la alt& pa+in&.
3. !imensionarea ima+inii
!imensionarea ima+inii se reali9ea9& cu aCutorul atri>utelor AidtC - prin care se sta>ilete
l&imea ima+inii i Cei,Ct - prin care se sta>ilete n&limea ima+inii.
In E)emplul (.3 sunt preci9ate i dimensiunile ima+inii incluse n document. :e o>ser;& c&
dimensionarea ima+inilor se 'ace n pi)eli. EsteG desi+urG posi>ilG ca dimensionarea s& se 'ac& n
procenteG ca i la liniile ori9ontaleG de e)emplu. TotuiG n a'ara unor ca9uri specialeG aceasta este
considerat& o practic& +reit&G deoarece >roEserul ;a redimensiona ima+inea iar re9ultatele ;or 'i de
calitate sla>&.
In E)emplul (.3 se o>ser;& c& dimensionarea ima+inilor se 'ace n pi)eli. EsteG desi+urG
posi>ilG ca dimensionarea s& se 'ac& n procenteG ca i la liniile ori9ontaleG de e)emplu. TotuiG n
a'ara unor ca9uri specialeG aceasta este considerat& o practic& +reit&G deoarece >roEserul ;a
redimensiona ima+inea iar re9ultatele ;or 'i de calitate sla>&.
(e"plul 6. 3
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8!imensionarea ima+inilor5OH185H=8
56M@ srcKJima+ine.+i'J Eidt%KJ???J %ei+%tKJ???J85$8
5O4"!#8
5OHTML8
4. ,linierea ima+inii i a te)tului
,linierea unei ima+ini n raport cu te)tul din pa+in& se reali9ea9& prin intermediul atri>utului
ali,nG care poate lua urm&toarele ;aloriH
3
le;t - aliniere la st0n+aR te)tul este dispus n partea dreapt& a ima+inii ncadr0nd ima+inea
ri,Ct - aliniere la dreaptaR te)tul este dispus n partea st0n+a a ima+inii ncadr0nd ima+inea
top - aliniere deasupraR partea de sus a ima+inii se alinia9& cu prima linie a te)tului ce precede
ima+inea
"iddle - aliniere la miClocR miClocul ima+inii se alinia9& cu prima linie a te)tului ce precede
ima+inea.
)otto" - aliniere dedesu>tG la >a9&R partea de Cos a ima+inii se alinia9& cu prima linie a te)tului.
7alorile le'tG ri+%tG i >ottom ale atri>utului ali+n permit ca te)tul s& 'ie dispus n Curul ima+iniiG n
;reme ce top i middle nu permit acest lucru.
(e"plul 6. 4
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,linierea ima+inii si te)tului 1>ottom25OH185H=8
56M@ srcKJ..O6ma+iniOima+ine.+i'J ali+nKJ>ottomJ Eidt%KJ133J %ei+%tKJ((J altKJ???J8
6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine
te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine te)t.6ma+ine
te)t.6ma+ine te)t.6ma+ine te)t.
te)t.6ma+ine te)t.
5O4"!#8
5OHTML8
TTTT U nu"ele i"a,inii
,lte dou& atri>ute utileG care ser;esc la alinierea ima+inii 'a& de restul elementelor din
pa+in&G sunt atri>utele Cspace i ?space. Ele preci9ea9& distanaG n pi)eliG pe ori9ontal&G respecti;
pe ;ertical&G dintre ima+ine i restul elementelor din pa+in&.
In E)emplul (. 4 ;om sc%im>a modul de aliniere n cadrul etic%etei 56M@8 i ;om ad&u+a
atri>utele %spaceG respecti; ;spaceG ast'elH
56M@ srcKJ..O6ma+iniOima+ine.+i'J ali+nKJle'tJ Eidt%KJ133J %ei+%tKJ((J altKJ???J ;spaceKJ13J
%spaceKJ13J8
,i o>ser;atG pro>a>ilG c& dintre ;alorile pe care le poate lua atri>utul ali+n lipsete ;aloarea
center. Intr-ade;&rG alinierea unei ima+ini la centrul pa+inii nu se poate 'ace prin intermediul
atri>utului ali+n. Centrarea unei ima+ini se poate reali9a numai dac& este i9olat& de te)tul care o
1
nconCoar&. $entru aceasta se poate 'olosi etic%eta 5CEATE=8 sau se poate include ima+inea ntr-
un >loc para+ra' sau ntr-un >loc 5!678 a;0nd atri>utul ali+n setat la ;aloarea center.
(e"plul 6. 5
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Centrarea unui ima+ini5OH185H=8
te)t.6ma+ine te)t.
56M@ srcKJ..O6ma+iniOima+ine.+i'J Eidt%KJ(4J %ei+%tKJ(4J altKJ???J8
5O!678
te)t.6ma+ine te)t.
5O4"!#8
5OHTML8
E)emplul (.( ilustrea9& modul n care pot 'i aliniate dou& ima+ini 'a& de te)tul din pa+in&.
$utei o>ser;a c&G dac& alinierea la st0n+a a ima+inii mpreun& cu 'olosirea atri>utelor %space i
;space conduce la un aspect ordonat al elementelorG aspectul te)tului n raport cu ima+inea aliniat&
la dreapta depinde de dimensiunea 'erestrei >roEserului.
(e"plul 6. 6
5HTML8
5HE,!8
5T6TLE8ima+ini(5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,linierea a doua ima+ini5OH185H=8
56M@ srcKJ..O6ma+iniOima+ine.Cp+J ali+nKJle'tJ Eidt%KJ233J %ei+%tKJ144J ali+nKJle'tJ
%spaceKJ13J ;spaceKJ13J8
6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t.6ma+ine te)t. 6ma+ine te)t. 6ma+ine
te)t. 6ma+ine te)t.
56M@ srcKJ..O6ma+iniOima+ine.Cp+J ali+nKJri+%tJ Eidt%KJ232J %ei+%tKJ132J %spaceKJ13J
;spaceKJ13J8
6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t.6ma+ine te)t. 6ma+ine te)t. 6ma+ine
te)t. 6ma+ine te)t.6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t.6ma+ine te)t. 6ma+ine te)t.
6ma+ine te)t. 6ma+ine te)t.6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t.6ma+ine te)t.
6ma+ine te)t. 6ma+ine te)t. 6ma+ine te)t.
5O4"!#8
5OHTML8
. 6ma+ini 'olosite ca 'ond 1>ac?+round2 al pa+inii
" ima+ine poate 'i utili9at& i pentru a sta>ili 'ondul unei pa+ini Fe>. In acest scop se
'olosete atri>utul )acI,round al etic%etei 54"!#8G a;0nd ca ;aloare adresa <=L a ima+inii.
6ma+inea se multiplic& aliniat 1tiling2 pe ori9ontal& i pe ;ertical& p0n& umple ntre+ul ecran.
(e"plul 6. 7
2
5HTML8
5HE,!8
5T6TLE8ima+ini*5OT6TLE8
5OHE,!8
54"!# >ac?+roundKJ..O6ma+iniO sil?.Cp+J8
5H1 ali+nKJcenterJ86ma+inea ca 'ond al pa+inii5OH185H=8
.ond de ZZ.
5O4"!#8
5OHTML8
(. 6ma+ini 'olosite ca le+&turi
$entru a 'olosi o ima+ine drept le+&tura se procedea9& ca n urm&torul e)empluH
5, %re'KJ ta>el\culori.%tml.%tmlJ8
56M@ srcKJprism.+i'J Eidt%KJ133J %ei+%tKJ-3J altKJculoriJ8
5O,8
:-a 'olosit etic%eta 5,8 prin intermediul c&reia am creat le+&tura cu 'iierul ta>el\culori.%tml.
Intre etic%etele 5,8 i 5O,8 am inclus o ima+ine care nlocuiete te)tul e)plicati; pe care
;i9itatorul urmea9& s& 'ac& clic? cu mouse-ul. 6ma+inea ser;eteG deciG ca le+&tur& c&tre o anumit&
pa+in&. 6ma+inea 'olosit& ca le+&tura este prism.gi# iar pa+ina spre care este '&cut& le+&tura este
ta!el;culori.html. In mod presta>ilit ima+inea utili9at& pe post de 9on& acti;& este nconCurat& de un
c%enar a;0nd culoarea unei le+&turi 1al>astru2. !ac& sta>ilim pentru atri>utul >order al etic%etei
;aloarea J3J acest c%enar dispare.
(e"plul 6. 8
5HTML8
5HE,!8
5T6TLE8ima+ini-5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8 6ma+ini cu le+aturi 5OH185H=8
54=8,m pus o ima+ine cu le+atura pe pa+ina5$8
5, %re'KJta>el culori.%tmlJ8
56M@ srcKJ..O6ma+iniOima+ine.+i'J Eidt%KJ133J %ei+%tKJ-3J altKJculoriJ8
5O,8
5O4"!#8
5OHTML8
*. 6ma+inile miniaturale 1t%um>nails2
!ac& ntr-o pa+in& Fe> este necesar& a'iarea unui num&r mare de ima+iniG nc&rcarea pa+inii
se ;a 'ace destul de +reu. !e multe oriG ;i9itatorii pa+inii nu ;or a;ea r&>darea necesar& pentru a
atepta nc&rcarea inte+ral& a pa+inii. " ima+ine thum!nail este o ;ersiune de dimensiuni reduse a
unei ima+ini mai mariG care se ncarc& mult mai rapid i careG dei este de dimensiuni mici i de
calitate sc&9ut&G permite ;i9itatorului s& a'le ce anume repre9int& i s& decid& dac& este interesat sau
nu s& desc%id& ;ersiunea inte+ral&..
3
6ma+inea miniatural& repre9int& o le+&tur& spre 'iierul cu ima+inea ori+inal& din care
pro;ine. In ca9ul n care ;i9itatorul pa+inii dorete s& ;ad& ima+inea ori+inal&G o poate desc%ide
e'ectu0nd clic? ima+inea thum!nail.
=eali9area ima+inilor miniaturale se poate 'ace 'ie prin micorarea proporional& a ima+inilorG
'ie prin reducerea lor la o dimensiune presta>ilit& 1strech2 c%iar dac& ima+inea se distorsionea9&G n
ca9ul n care se doreteG de pild&G ca toate thum!nail-urile dintr-o pa+in& s& ai>& aceleai
dimensiuni.
E)ist& dou& metode pentru a plasa o ima+ine thum!nail n pa+in&H
'olosind dou& ima+iniG una 'iind ima+inea thum!nail iar cealalt&G ima+inea ori+inal&
'olosind o sin+ur& ima+ineG redimensionat& 1micorat&2 direct n pa+in&
In E)emplul (./ este plasat& o ima+ine thum!nail n pa+in&G 'olosind prima metod&
(e"plul 6. 9
5HTML8
5HE,!8
5T6TLE8ima+ini/5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8T%um>nails - doua ima+ini5OH185H=8
5$8
5, %re'KJ..O6ma+iniO9do+.+i'J8
56M@ srcKJ..O6ma+iniO9do+\t%.+i'J85O,8
5O4"!#8
5HTML8
.iierul )%og;th.gi# conine ima+inea thum!nail care este 'olosit& ca le+&tur&G pentru a re'eri
ima+inea ori+inal&G )%og.gi#. !eoarece ima+inea thum!nail este 'olosit& ca o le+&tura c&tre
ima+inea ori+inal&G n Curul ei este a'iat un c%enar presta>ilit al>astru. !ac& dorii ca acest c%enar
s& nu mai 'ie a'iatG putei 'olosi atri>utul >order al etic%etei 56M@8 setat la ;aloarea J3J. 6ma+inea
ori+inal& se ;a desc%ide n aceeai 'ereastr& cu pa+ina n care este plasat& ima+inea thum!nail.
$entru a re;eni n pa+in&G tre>uie s& ap&sai >utonul 8ack al >roEserului.
6olosirea unei sin,ure i"a,ini
,ceast& metod& este adesea pre'erat&G deoarece 'olosete un sin+ur 'iierG cel care conine
ima+inea ori+inal&G miniaturi9area ei '&c0ndu-se c%iar n pa+in&G cu aCutorul atri>utelor Eidt% i
%ei+%t. Este o metoda mai e'icient& i mai rapid&G deoarece ima+inea de dimensiuni mari care
urmea9& a 'i a'iat& este deCa nc&rcat& n memoria cache a >roEserului i este imediat disponi>il&
pentru a'iare.
In e)emplul urm&tor E)emplul (.13 am 'olosit o sin+ur& ima+ine pentru a nc&rca at0t
ima+inea thum!nail c0t i pe cea cu dimensiunile ori+inale.
(e"plul 6. 10
5HTML8
5HE,!8
5OHE,!8
54"!#8
4
5H1 ali+nKJcenterJ8T%um>nails - o sin+ura ima+ine5OH185H=8
5$8
5, %re'KJ..O6ma+iniO9do+.+i'J8
56M@ srcKJ..O6ma+iniO9do+.+i'J Eidt%KJ*3J %ei+%tKJ*(J85O,8
5O4"!#8
5HTML8
!up& cum se poate o>ser;aG am creat un lin? 1cu aCutorul etic%etei 5,82 la 'iierul )%og.gi#
care conine ima+inea ori+inal&. ,m 'olosit drept le+&tur& aceeai ima+ineG dar redimensionat&G
'olosind atri>utele Eidt% i %ei+%t.
-. 6ma+inile ;ideo
$entru a insera o ima+ine ;ideo ntr-un document HTML se 'olosesc atri>utele dFnsrcG
controlsG loop i start ale etic%etei 56M@8.
,tri>utul dFnsrc nlocuiete atri>utul src i permite inserarea n documentul HTML a unei
ima+ini ;ideo n acelai mod n care este inserat& o ima+ine static&.
7aloarea atri>utului dWnsrc este adresa <=L a 'iierului ;ideo care ;a 'i inclus n pa+in&
con'orm sinta)eiH
56M@ dWnsrcKJ<=L\'isier\;ideoJ8
,cest atri>ut este o e)tensie 6nternet E)plorer i nu este recunoscut de >roEserele Aetscape.
$entru a ;i9uali9a o ima+ine ;ideo in-line ntr-un >roEser AetscapeG ;i9itatorul pa+inii tre>uie s&
instale9e un pro+ram au)iliar de tip plug-in. !ac& pro+ramul plug-in nu este disponi>il pe
computerul ;i9itatoruluiG ima+inea ;ideo nu ;a putea 'i a'iat&.
:in+urul 'ormat de 'iiere ;ideo care este suportat de e)tensiile 6nternet E)plorer este 1=! 1<u%io
&i%eo Interleave2G deoarece acesta este 'ormatul de redare care este inclus n >roEser. Construcia
de mai Cos include ntr-un document HTML 'iierul ;ideo nasa.avi care se a'l& n 'olderul &i%eoH
56M@ dWnsrcKJ..O7ideoOnasa.a;iJ8
E'ectul acestei etic%ete este desc%iderea de c&tre >roEser a unei 'erestre de ;i9uali9are n
interiorul pa+inii Fe>G 'ereastr& n care ;a rula clipul ;ideo nasa.aviG inclusi; sunetulG dac& acesta
'ace parte din clip i computerul ;i9itatorului este setat s& redea sunetele. Ca i ima+inile o>inuiteG
ima+inea ;ideo este a'iat& pe m&sur& ce este nc&rcat&.
!eoarece nici un alt >roEser n a'ar& de 6nternet E)plorer nu recunoate aceast& e)tensieG este
recomandat s& includei n cadrul etic%etei 56M@8 i atri>utul src prin care s& 'urni9ai o ima+ine
static& ce ;a 'i a'iat& n acelai cadru. 4roEserele care nu recunosc e)tensia dWnsrc ;or a'ia
ima+inea static& pe c0nd 6nternet E)plorer ;a a'ia ima+inea ;ideo. "rdinea n care apar cele dou&
atri>ute nu are importan&. !e e)empluH
56M@ dWnsrcKJ..O7ideoOnasa.a;iJ srcKJ..O6ma+iniOa;i.Cp+J8
In mod normalG 6nternet E)plorer red& clipul ;ideo ntr-o 'ereastr& n care nu sunt a'iate nici
un 'el de >utoane de control. <tili9atorul poate reluaG opri sau continua redarea clipului e'ectu0nd
clic? dreapta cu mouse-ul n interiorul 'erestrei.
$entru a ad&u+a >utoane de control acestei 'erestre se utili9ea9& atri>utul controls al etic%etei
56M@8. ,tri>utul controls nu are alocat& nici o ;aloareG pre9ena sa a;0nd doar scopul de a ad&u+a
>utoanele de control asem&n&toare celor de la aparatele ;ideo. !e e)empluH
56M@ dWnsrcKJ..O7ideoOnasa.a;iJ srcKJ..O6ma+iniOa;i.Cp+J controls8
Clipul ;ideo inclus n pa+in& este redat de >roEser o sin+ur& dat&G de la nceput p0n& la s'0rit.
$entru a repeta redarea clipului de un anumit num&r de ori este 'olosit atri>utul loop. 7alorile
posi>ile ale atri>utului suntH
un num&r ntre+ care repre9int& num&rul de relu&ri ale clipului
in'initeG ca9 n care clipul este redat p0n& c0nd utili9atorul stopea9& derularea sa ap&s0nd
>utonul stop al 'erestrei de ;i9uali9are 1n ca9ul c0nd 'ereastra conine >utoanele de control2 sau
e'ectuea9& clic? dreapta cu mouse-ul n 'ereastra de ;i9uali9are.
E)emplul de mai Cos ilustrea9& modul n care poate 'i setat atri>utul loopH
56M@ dWnsrcKJ..O7ideoOnasa.a;iJ srcKJ..O6ma+iniOa;i.Cp+'J controls loopKJin'initeJ8
,a cum am preci9atG redarea ima+inii ;ideo ncepe imediat ce aceasta a 'ost complet
nc&rcat& n pa+in&. $entru a sc%im>a acest comportament se 'olosete atri>utul start care poate
a;ea ;alorileH
mouseo;erG situaie n care derularea ima+inii ;ideo ncepe n momentul c0nd mouse-ul este
plasat deasupra ima+inii
'ileopenG ;aloarea prede'init&G situaie n care derularea ima+inii ncepe imediat dup& nc&rcarea
n pa+in&
Cele dou& ;alori pot 'i com>inate pentru a se reali9a redarea ima+inii mai nt0i imediat dup&
nc&rcarea n pa+in& i apoi de 'iecare dat& c0nd mouse-ul este plasat deasupra eiG ca n e)emplul
urm&torH
56M@ dWnsrcKJ..O7ideoOnasa.a;iJ srcKJ..O6ma+iniOa;i.Cp+'J controls loopKJin'initeJ
startKJ'ileopenG mouseo;erJ8
6ma+inile ;ideo in-line pot 'i tratate ca i ima+inile statice. " ast'el de ima+ine poate 'i aliniat&
'olosind atri>utul ali,nG sau poate 'i spaiat& 'a& de te)tul care o nconCoar&.
(e"plul 6. 11
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ86ma+ini ;ideo5OH185H=8
5."AT si9eKJ4J colorKJ>lueJ8Clipul ;ideo de mai Cos 'ace parte din colectia A,:,
35O."AT85$8
5CEATE=8
56M@ dWnsrcKJ..O7ideoOnasa.a;iJ srcKJ..O6ma+iniOa;i.Cp+J controls startKJ'ileopenG
mouseo;erJ loopKJin'initeJ8
5OCEATE=8
5O4"!#8
5OHTML8
/. :unetele
!ac& etic%eta 56M@8 permite a'iarea unei ima+ini de 'undalG e)ist& i o etic%et& care
reali9ea9& includerea n pa+ina Fe> a unei mu9ici de 'undal i anume etic%eta .3'&4:72/.
,ceast& etic%et& esteG de asemeneaG o e)tensie 6nternet E)plorer deci nu este recunoscut& i
e)ecutat& n alte >roEsere.
(
4roEserul 6nternet E)plorer conine un decodor de sunet ncorporat i permite inte+rarea prin
etic%eta 54@:"<A!8 a sunetului de 'undal pentru o pa+in&. :inta)a etic%etei 54@:"<A!8 este
urm&toareaH
54@:"<A! srcKJ<=L\'isier\sunetJ loopKJ;aloareJ8
,tri>utul src are drept ;aloare adresa <=L a 'iierului de sunet care este 'olosit ca 'undal
sonor al pa+inii.
In mod curentG 6nternet E)plorer recunoate trei tipuri de 'iiere de sunetH
'iiere cu e)tensia .wav care este 'ormatul nati; pentru $C
'iiere cu e)tensia .auG 'ormatul nati; pentru sistemele <A6B
'iiere cu e)tensia .midiG un 'ormat uni;ersal acceptat pentru codi'icarea sunetelor
$entru a include ntr-o pa+in& un 'iier de sunet se procedea9& ca n e)emplul urm&torH
54@:"<A! srcKJ..O:unetOEellcome.Ea;8
Ca i n ca9ul ima+inilor ;ideo in-lineG 'iierul de sunet este redat o sin+ur& dat&G la nc&rcarea
pa+inii. $entru redarea sa repetat& se 'olosete atri>utul loop al etic%etei 54@:"<A!8 care poate
a;ea ca ;aloriH
un num&r ntre+G care repre9int& num&rul de relu&ri ale piesei
in'initeG ca9 n care piesa mu9ical& este reluat& p0n& c0nd utili9atorul p&r&sete pa+ina sau nc%ide
'ereastra >roEserului.
E)ecutai E)emplul (.12 cu un >roEser 6nternet E)plorer pentru a o>ser;a e'ectul etic%etei
54@:"<A!8. !esi+urG este necesar s& sc%im>ai adresa <=L a 'iierului de sunet speci'ic0nd un
'iier e)istent pe %ard-dis?-ul dumnea;oastr&.
(e"plul 6. 12
5HTML8
5HE,!8
5T6TLE8:unete5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Mu9ica de 'undal5OH185H=8
5$8
5."AT si9eKJ4J colorKJredJ8Mu9ica se ;a au9i pana cand ;eti inc%ide pa+ina5O."AT8
54@:"<A! srcKJ..O:unetO FindoEsB$ :tart.Ea;J loopKJin'initeJ8
5O4"!#8
5OHTML8
13. :u+estii pri;ind 'olosirea ima+inilor i elementelor multimedia
C0nd 'olosii ima+ini ntr-o pa+in& Fe>G tre>uie s& ;& punei ntre>areaH JEste necesar&
aceast& ima+ine sau ar 'i su'icient s& 'olosesc te)t?J. C%iar dac& se spune c& o ima+ine 'ace c0t o
mie de cu;inteG acest lucru nu este ntotdeauna ade;&rat pe Fe>. Inlocuirea te)tului care conine
in'ormaiile eseniale dintr-o pa+in& Fe> cu ima+ini este adesea o +reeal&.
<n prim moti; este c& nc& mai e)ist& >roEsere non-+ra'ice cum este LWn)G care nu a'iea9&
dec0t te)tul.
,poiG c%iar i n >roEserele +ra'iceG anumii utili9atori ar putea optaG din ;arii moti;eG pentru
de9acti;area a'i&rii ima+inilor.
*
<n alt moti; ar 'i acela c&G din cau9a duratei mari de nc&rcare a 'iierelor cu ima+ini de mari
dimensiuniG unii utili9atori ar putea renuna pur i simplu la desc%iderea pa+inii.
Ti nu n ultimul r0ndG deoareceG spre deose>ire de te)tG ima+inile pot nt0mpina di;erse di'icult&i
te%nice la a'iare.
Mu9ica de 'undal este de cele mai multe ori nerecomandat&. .oarte muli ;i9itatori pot
;i9uali9a pa+inile dumnea;oastr& a;0nd sunetul de9acti;at. .olosirea unei mu9ici de 'undal
ncetinete nc&rcarea pa+inii iG n plusG este 'oarte posi>il ca mu9ica pe care ai ales-o s& nu 'ie pe
+ustul celor care ;& ;i9itea9& pa+inaG >a c%iar s& i determine s& o p&r&seasc& nainte de a citi
coninutul acesteia.
!ac& este necesarG totuiG s& introducei mu9ic& sau sunet n pa+inile dumnea;oastr&G este o
pre;edere neleapt& s& plasai 'iierele de sunet separat i s& asi+urai le+&turi c&tre acestea ast'el
nc0t ;i9itatorul s& le poat& audiaG dac& dorete.
11. 6ma+inile i timpul de nc&rcare al pa+inii
<nul dintre cele mai importante aspecte care tre>uie luate n considerare la includerea
ima+inilor ntr-un document este ti"pul de @ncGrcare a documentului.
!urata de nc&rcare a pa+inilor depinde de muli 'actori. !epinde de modemul i cone)iunea
;i9itatoruluiG de per'ormanele ser;erului +a9d&G de tra'icG de l&imea de >and&G etc. Cum nu putei
a;ea control asupra acestoraG sin+urul lucru care ;& r&m0ne de '&cut este s& ;& construii pa+inile
ast'el nc0t s& ai>& o >un& ;ite9& de nc&rcare c%iar i n ca9ul unui ;i9itator care deine o cone)iune
modest& ca per'ormane.
$e l0n+& ale+erea cu 'oarte mult& +riC& a ima+inilor care ;or 'i incluse n documentG mai e)ist&
c0te;a modalit&i prin care poate 'i ameliorat& durata de nc&rcare a pa+iniiH
"ptimi9area ima+inilor. .olosii-;& n mod Cudicios de instrumentele de control al ima+inilor
puse la dispo9iie de editorul +ra'ic 'olositG optimi9ai dimensiunile ima+inii i num&rul de
culori la c0t mai puine posi>il. Incercai s& +&sii un raport optim ntre dimensiunea 'iierului i
calitatea ima+inii. E;itai 'oto+ra'iile sau ima+inile de 'undal de dimensiuni 'oarte mari.
=eutili9area ima+inilor. ,ceast& metod& este e'icient& mai ales n ca9ul icon-urilor sau
elementelor +ra'ice de na;i+aie care sunt pre9ente n mai multe pa+ini pe parcursul unui site.
Cele mai multe >roEsere rein n memoria cache elementele documentelor care urmea9& a 'i
a'iate. ,st'elG dac& o ima+ine este utili9at& n mai multe pa+ini aceasta nu tre>uie nc&rcat& de
'iecare dat& n memorie ci este disponi>il& pentru a 'i a'iat& oric0nd se 'ace re'erirea la ea.
!i;i9area documentelor de dimensiuni mari n mai multe documente de dimensiuni reduse.
,ceast& re+ul& +eneral& include i pa+inile care conin ima+ini in-line. Mai multe documente de
dimensiuni mai mici le+ate ntre ele prin le+&turi sunt mai >ine acceptate de ;i9itatori dec0t un
sin+ur document 'oarte mare care necesit& un timp de nc&rcare ndelun+at. =e+ula +eneral
acceptat& este meninerea dimensiunilor unui document Fe> n Curul ;alorii de 3L>G inclu90nd
aici i ima+inileG desi+ur.
.olosirea ima+inilor thum!nail. !ac& pa+ina conine un mare num&r de ima+iniG 'olosii ima+ini
miniaturale care s& re'ere ima+inile ori+inale. In plusG ntruc0t ima+inea ori+inal& re'erit& prin
ima+inea thum!nail se poate desc%ide ntr-o nou& 'ereastr&G ne'iind asociat& cu restul
elementelor din pa+in&G este mai comod pentru ;i9itator s& o sal;e9e pe computerul propriu
pentru o ;i9uali9are ulterioar&.
-
:peci'icarea dimensiunile ima+inilor. In acest mod este e;itat& etapa calcul&rii de c&tre >roEser
a spaiului necesar pentru a'iarea ima+iniiG m>un&t&indu-se ;ite9a de nc&rcare a pa+inii.
Capitolul 7
Listele repre9int& unele dintre cele mai o>inuite elemente dintr-o pa+in& Fe>. ,cestea sunt
deseori 'olosite pentru a pre9enta in'ormaiile n mod or+ani9atG ntr-o manier& accesi>il& i uor de
parcurs.
Ele pot 'i de trei tipuriH
a2 liste ordonate 1marcate prin numere sau litere2G
>2 liste neordonate 1marcate prin cratimeG >uline sau alte sim>oluri2
c2 liste de de;iniiiG a'iate '&r& nici un 'el de marcaC.
In interiorul etic%etelor care delimitea9& o list& pot 'i 'olosite orice alte etic%ete HTMLG cum ar
'i etic%ete de 'ormatare a te)tuluiG le+&turiG ima+iniG etc.
1. Liste neordonate
(e"plul 7. 1
5HTML8
5HE,!8
5T6TLE8Lista *.15OT6TLE8
5OHE,!8
54"!#8
5<L8.irma noastr& ;& o'er& urm&toarele ser;iciiH
5L68printare
5L68laminare
5L68ndosariere
5L68)ero)
/
5L68te%noredactare
5O<L8
5O4"!#8
5OHTML8
Etic%etele 5<L8 i 5L68 pot a;ea de'init atri>utul tFpe care sta>ilete caracterul a'iat n 'aa
'iec&rui element al listei. 7alorile posi>ile al acestui atri>ut suntH
a2 circle 1cerc2
>2 disc 1disc plin2 - ;aloarea presta>ilit&
c2 sNuare 1patrat2
Lista din E)emplul *.2 are atri>utul tWpe setat la ;aloarea JsNuareJ.
(e"plul 7. 2
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,tri>utul tWpe la liste neordonate5OH185H=8
5<L tWpeKJsNuareJ8Lim>aCe de pro+ramare
5L68C
5L68C]]
5L68$ascal
5L68 4asic
5L68$erl
5O<L8
5O4"!#8
5OHTML8
:etarea atri>utului tWpe pentru un item al listei nlocuiete tipul de marcaC cu tipul speci'icat
pentru acel item.
In .i+ura *.3 se poate o>ser;a e'ectul set&rii atri>utului tWpe pentru un item indi;idual la listei.
(e"plul 7. 3
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,tri>utul tWpe la itemul unei liste 5OH185H=8
5<L tWpeKJsNuareJ8Lim>aCe de pro+ramare
5L68C
5L68C]]
5L68$ascal
5L6 tWpeKJcircleJ84asic
5L68$erl
5O<L8
5O4"!#8
(3
5OHTML8
6or"e particulare de liste neordonate
d2 Lista de directoare 9 este o list& introdus& prin etic%eta .2!8/ .02!8/. Etic%eta a 'ost
iniial utili9at& pentru alc&tuirea listelor de 'iiere. Multe >roEsere nu 'ac nici o di'eren&
ntre etic%etele 5!6=8 i 5<L8G e'ectul lor 'iind acelai.
e2 Lista de "eniuri - utili9ea9& etic%eta .M(7:/. <nele >roEsere a'iea9& lista doar n
'ormat uor di'erit 'a& de listele neordonateG altele ns& 'olosesc c%iar un 'el de meniu +ra'ic
de tip pull-%o'n pentru a'iarea acestor liste.
2. Liste ordonate
" list& ordonatG este un >loc de te)t delimitat de etic%etele .4L/ .04L/ 1or%ere% list - list&
ordonat&2G etic%eta de nc%idere 'iind o>li+atorie.
.iecare element al listei este iniiat de etic%eta .L!/ 1list item2. Ca i n ca9ul listelor
neordonateG lista ;a 'i indentat& 'a& de restul pa+inii Fe> i 'iecare element al listei ;a ncepe pe o
linie nou&.
!i'erena 'a& de listele neordonate este aceea c& n acest ca9 marcarea elementelor se 'ace prin
ci'reG nu prin sim>oluri.
(e"plul 7. 4
5HTML8
5HE,!8
5T6TLE8Lista *.4.0T6TLE8
5OHE,!8
54"!#8
5"L8.irma noastr& ;& o'er& urm&toarele ser;iciiH
5L68printare
5L68laminare
5L68ndosariere
5L68)ero)
5L68te%noredactare
5O"L8
5O4"!#8
5OHTML8
$entru a 'olosi aceste caractere este de aCuns sa utili9am atri>utul T#$E cu ;aloarea potri;ita.
pentru litere "ariB 5"L T#$EK,8.irma noastr& ;& o'er& urm&toarele ser;iciiH
(e"plul 7. 5
(1
5HTML8
5HE,!8
5T6TLE8Lista *..0T6TLE/
5OHE,!8
54"!#8
5"L T#$EK, /.irma noastr& ;& o'er& urm&toarele ser;iciiH
5L68printare
5L68laminare
5L68ndosariere
5L68)ero)
5L68te%noredactare
5O"L8
5O4"!#8
5OHTML8
pentru litere "ici B 5"L T#$EKa8.irma noastr& ;& o'er& urm&toarele ser;iciiH
(e"plul 7. 6
5HTML8
5HE,!8
5T6TLE8Lista *.(.0T6TLE/
5OHE,!8
54"!#8
5"L T#$EKa /.irma noastr& ;& o'er& urm&toarele ser;iciiH
5L68printare
5L68laminare
5L68ndosariere
5L68)ero)
5L68te%noredactare
5O"L8
5O4"!#8
5OHTML8
pentru ci;re ro"ane "iciB .4L T%5(Ei/.irma noastr& ;& o'er& urm&toarele ser;iciiH
(e"plul 7. 7
5HTML8
5HE,!8
5T6TLE8Lista *.*.0T6TLE/
5OHE,!8
54"!#8
5"L T#$EKi /.irma noastr& ;& o'er& urm&toarele ser;iciiH
5L68printare
5L68laminare
5L68ndosariere
5L68)ero)
5L68te%noredactare
5O"L8
5O4"!#8
5OHTML8
pentru ci;re ro"ane "ariB .4L T%5(E!/.irma noastr& ;& o'er& urm&toarele ser;iciiH
(2
(e"plul 7. 8
5HTML8
5HE,!8
5T6TLE8Lista *.-.0T6TLE8
5OHE,!8
54"!#8
5"L T#$EK6 8.irma noastr& ;& o'er& urm&toarele ser;iciiH
5L68printare
5L68laminare
5L68ndosariere
5L68)ero)
5L68te%noredactare
5O"L8
5O4"!#8
5OHTML8
$e l0n+& atri>utul T%5(G pentru ta+-ul .4L/ mai putem 'olosi si atri>utul &T18T. ,cest
atri>ut este 'olosit atunci cand ;rem sa sc%im>am ;aloarea initialaG de e)emplu daca ;rem sa
incepem de la 4G in ca9ul numerelorG sau de la !G in ca9ul literelor mariG etc. .orma +enerala a
acestui atri>ut este &T18TEnG unde n este un numar natural.
(e"plul 7. 9
5HTML8
5HE,!8
5T6TLE8Lista *./5OT6TLE8
5OHE,!8
54"!#8
5"L T#$EK, :T,=TK48In ;acana de ;ar& am ;i9itat urm&toarele oraeH
5L68=oma
5L687iena
5L68Londra
5L68$aris
5L68$ra+a
5O"L8
5O4"!#8
5OHTML8
3. 6m>ricarea listelor
In cadrul unei listeG 'ie ea ordonat& sau neordonat&G se pot include alte listeG procedeu numit
i")ricare.
(e"plul 7. 10
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Liste im>ricate5OH185H=8
(3
5<L8
5L684ulina 1
5"L8
5L68Aumarul 1
5L68Aumarul 2
5O"L8
5L684ulina 2
5L684ulina 3
5<L tWpeKJsNuareJ8
5L68$atrat 1
5L68$atrat 2
5L68$atrat 3
5O<L8
5L684ulina 4
5O<L8
5O4"!#8
5OHTML8
4. Liste de de'iniii
Listele de de;iniii repre9int& un tip special de liste n care elementele listei nu sunt nici
numerotate 1ca n listele ordonate2G nici marcate prin >uline 1ca n listele neordonate2 i care
pre9int& dou& ni;ele de indentare.
Listele de de'iniii sunt >locuri de te)t incluse ntre etic%etele .2L/ .02L/ 1%e#inition list2G
etic%eta de nc%idere 'iind o>li+atorie. .iecare element al listei este introdus prin etic%eta .2T/
1%e#inition term2. .iecare element introdus prin etic%eta 5!T8 conine la r0ndul s&u un num&r de
elemente care l de'inescG introduse prin etic%eta .22/ 1%e#inition %escription2.
Ca i n ca9ul etic%etei 5L68G etic%etele de nc%idere 5O!T8 i 5O!!8 sunt opionale.
(e"plul 7. 11
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Liste de de'iniii5OH185H=8
5!L8
5!T86arna
5!!8Ain+e
5!!8E 'ri+
5!!8Miua e mai scurt& dec0t noaptea
5!T8$rim&;ara
5!!8Aatura se tre9ete la ;ia&
5!!86n'loresc pomii
5!!8:e intorc p&s&rile c&l&toare
5!T87ara
5!!8Totul e ;erde
5!!8E 'oarte cald
5!!8Miua e mai lun+& dec0t noaptea
5!T8Toamna
(4
5!!8:e coc 'ructele
5!!8:e str0n+e recolta
5!!8Cad 'run9ele
5O!L8
5O4"!#8
5OHTML8
Etic%etele 5!L8 i 5O!L8 marc%ea9& nceputul i s'0ritul listeiG termenii care 'ac parte din
list& 16arnaG $rim&;araG 7araG Toamna 2 sunt introdui prin etic%eta 5!T8 iar de'iniiile termenilorG
prin etic%etele 5!!8.
:e pot reali9a liste ale c&ror elemente s& 'ie lin?-uriG ima+ini sau >locuri de te)t
(e"plul 7.12
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Liste de ima+ini5OH185H=8
5!L8
5!T8.lori
5!!8
56M@ srcKJ..O6ma+iniOrose1.Cp+J Eidt%KJ123J %ei+%tKJ123J8
5!!8
56M@ srcKJ..O6ma+iniOoran+erose.+i'J Eidt%KJ123J %ei+%tKJ123J8
5!T8Te)turi
5!!8
56M@ srcKJ..O6ma+iniOsil?.Cp+J Eidt%KJ123J %ei+%tKJ123J8
5!!8
56M@ srcKJ..O6ma+iniOlace.+i'J Eidt%KJ123J %ei+%tKJ123J8
5O!L8
5O4"!#8
5OHTML8
E)emplul *.13 creea9& dou& liste im>ricate de le+&turi
(e"plul 7.13
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Liste de le+aturi5OH185H=8
5"L tWpeKJ6J8
5L68Culori
5"L8
5L685, %re'KJculori1.%tmlJ8Culoarea 'undalului5O,8
5L685, %re'KJculori2.%tmlJ8Culoarea te)tului5O,8
(
5L685, %re'KJculori3.%tmlJ8Culoarea le+aturilor5O,8
5O"L8
5L68.onturi
5"L8
5L685, %re'KJ'onturi1.%tmlJ8Etic%eta ."AT5O,8
5L685, %re'KJ'onturi2.%tmlJ8Etic%eta 4,:E."AT5O,8
5L685, %re'KJ'onturi4.%tmlJ8Etic%ete de accentuare a te)tului5O,8
5O"L8
5O"L8
5O4"!#8
5OHTML8
Capitolul 8
Ta)elul este un element structural de >a9& n alc&tuirea unei pa+ini Fe>. <n ta>el este o +ril&
dreptun+%iular& 'ormat& din linii i coloane. Caseta 'ormat& la intersecia unei linii cu o coloan& se
numete celulG.
<n ta>el este o +ril& dreptun+%iular& 'ormat& din linii i coloane. Caseta 'ormat& la intersecia
unei linii cu o coloan& se numete celulG.
" linie a ta>elului este 'ormat& dintr-un ir de celule aliniate pe ori9ontal&G iar o coloanG este
'ormat& dintr-un ir de celule aliniate pe ;ertical&.
Celulele ta>elului conin date 1te)tG ima+iniG lin?-uri2G 'iecare celul& a;0nd propriile opiuni
pentru culoarea 'onduluiG culoarea te)tuluiG alinierea te)tului etc.
1. Crearea unui ta>el
$entru a insera un ta>el ntr-un document HTML se 'olosesc etic%etele corespondente
<TABLE> </TABLE>. Etic%eta <TABLE> este o etic%et& containerG deci etic%eta de 'inal este
o>li+atorie. ,>sena ei 'ace ca ta>elul s& nu 'ie a'iat corect.
$entru a insera o linie ntr-un ta>el se 'olosesc etic%etele <TR> </TR> 1ta!le ro'2. .olosirea
etic%etei de nc%idere </TR> este opional&.
,a cum spuneamG 'iecare linie de ta>el este 'ormat& din mai multe celule ce conin date. " celul&
de date se introduce cu etic%eta <TD> </TD> 1ta!le %ata2. Etic%eta de nc%idere </TD> este de
asemenea opional&.
(e"plul 8.1
5HTML8
((
5HE,!8
5T6TLE8Ta>el -.15OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Crearea unui ta>el5OH185H=8
5T,4LE8
5T=8
5T!8celula 11
5T!8celula 11
5T=8
5T!8celula 21
5T!8celula 22
5T=8
5T!8celula 31
5T!8celula 32
5T=8
5T!8celula 41
5T!8celula 42
5OT,4LE8
5O4"!#8
5OHTML8
In mod presta>ilitG un ta>el nu are c%enar ;i9i>il. $entru a ad&u+a un c%enar unui ta>elG se
utili9ea9& atri>utul border al etic%etei <TABLE>. ,cest atri>ut poate primi ca ;aloare orice num&r
ntre+ 1inclusi; 32 i repre9int& +rosimea n pi)eli a c%enarului ta>elului.
!aca atri>utul or!er nu este urmat de o ;aloare atunci c%enarul ta>elului ;a a;ea o +rosime
presta>ilit& e+al& cu 1 pi)elG iar o ;aloare e+al& cu 3 a atri>utului or!er semni'ic& a>sena
c%enarului. C0nd atri>utul or!er are o ;aloare nenul& c%enarul ta>elului are un aspect
tridimensional.
In E)emplul -.2 este construit un ta>el cu c%enar. $entru a testa 'uncionarea atri>utului
or!erG nlocuii n e)emplul de mai Cos ;aloarea J4J i cu alte ;alori. Au uitai ca dup& 'iecare
modi'icare s& sal;ai 'iierul i s& ap&sai >utonul 2e#resh.2eloa% al >roEserului..
(e"plul 8.2
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8C%enarul unui ta>el5OH185H=8
5T,4LE >orderKJ4J>
5T=8
5T!8celula 11
5T!8celula 12
5T=8
5T!8celula 21
5T!8celula 22
5T=8
5T!8celula 31
5T!8celula 32
5T=8
5T!8celula 41
(*
5T!8celula 42
5OT,4LE8
5O4"!#8
</"T#L>
Celulele unui ta>el pot conine i alte elemente n a'ar& de te)tH ima+iniG le+&turiG 'ormulareG
etc.
E)emplul -.3 construiete un ta>el cu dou& linii i dou& coloaneG celulele ta>elului a;0nd drept
coninut ima+ini.
(e"plul 8.3
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Ta>el care contine ima+ini5OH185H=>
5T,4LE >orderKJ4J8
5T=8
5T!856M@ srcKJ..O6ma+iniOdonut.+i'J8
5T!856M@ srcKJ..O6ma+iniO+i't.+i'J8
5T=8
5T!856M@ srcKJ..O6ma+iniOin;est.+i'J8
5T!856M@ srcKJ..O6ma+iniO+lo>e.+i'J8
5OT,4LE8
5O4"!#8
5OHTML8
2. ,linierea ta>elului n pa+in&
$entru a alinia un ta>el ntr-o pa+ina Fe> se utili9ea9& atri>utul align al etic%etei <TABLE>G
cu urm&toarele ;alori posi>ileH
left 1;aloarea presta>ilit&2 - te)tul care urmea9& dup& punctul de inserare al ta>elului ;a 'i dispus
n partea dreapt& a ta>elului.
center - te)tul care urmea9& dup& punctul de inserare al ta>elului ;a 'i a'iat pe toat& l&imea
pa+iniiG imediat su> ta>el.
right - te)tul care urmea9& dup& punctul de inserare al ta>elului ;a 'i dispus n partea st0n+& a
ta>elului.
(e"plul 8.4
5HTML8
5HE,!8
5T6TLE8Ta>el /.45OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,linierea ta>elului in pa+ina5OH185H=8
5T,4LE >orderKJ3J ali+nKJri+%tJ8
5T=8
(-
5T!8celula 11
5T!8celula 12
5T=8
5T!8celula 21
5T!8celula 22
5OT,4LE8
,cest te)t este plasat in stan+a ta>elului
5O4"!#8
5OHTML8
!istana dintre ta>el i celelalte elemente din pa+ina Fe> poate 'i sta>ilit& cu aCutorul
atri>utelor hspace i vspace al etic%etei <TABLE>.
7aloarea atri>utului hspace poate 'i orice num&r po9iti;G inclusi; 3G i repre9int& distana pe
ori9ontal& dintre ta>el i celelalte elemente ale pa+inii Fe>.
,nalo+G ;aloarea atri>utului $space repre9int& distana pe ;ertical& dintre ta>el i celelalte
elemente ale pa+inii. ,tri>utele hspace i $space sunt recunoscute numai de >roEserele
Aetscape.
E)emplul -. ilustrea9& utilitatea celor dou& atri>ute.
(e"plul 8.5
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8:patierea ta>elului 'ata de restul te)tului 5OH185H=8
Ta>elul de mai Cos este spatiat pe ;erticala 'ata de acest te)t cu 1 pi%eli& Taelul
!e 'ai (os este spatiat pe $erticala fata !e acest te%t cu 1)
pi%eli& Taelul !e 'ai (os este spatiat pe $erticala fata !e acest
te%t cu 1) pi%eli<BR>
5T,4LE >order ali+nKJle'tJ ;spaceKJ1J %spaceKJ13J8
5T=8
5T!8celula 11
5T!8celula 12
5T=8
5T!8celula 21
5T!8celula 22
5OT,4LE8
<cest text este plasat in %reapta ta!elului la %istanta %e += pixeli pe ori)ontala #ara %e
ta!el. <cest text este plasat in %reapta ta!elului la %istanta %e += pixeli pe ori)ontala #ara %e
ta!el. <cest text este plasat in dreapta tabelului la distanta de 10 pixeli
pe orizontala fara de tabel.
5O4"D*>
</"T#L>
(/
3. !imensionarea unui ta>el
!imensiunile unui ta>el - l&imea i n&limea - pot 'i sta>ilite e)act prin intermediul
atri>utelor width i height ale etic%etei <TABLE>.
7alorile acestor atri>ute pot 'iH
numere ntre+i po9iti;e repre9ent0nd l&imea respecti; n&limea n pi)eli a ta>elului
numere ntre+i ntre 1 i 133G urmate de semnul _G repre9ent0nd procente din l&imea i
n&limea total& a pa+inii.
6at& un e)emplu de ta>el cu n&limea de 233 de pi)eli i l&imea e+al& cu 3_ din l&imea pa+inii
E)emplul -.(
(e"plul 8.6
5HTML8
5HE,!8
5T6TLE8Ta>el -.(5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8!imensionarea unui ta>el5OH185H=8
Ta>el cu lungi'ea !e )+, !in pagina si inalti'ea !e -++ !e
pi%eli<.>
5T,4LE >order Eidt%KJ3_J %ei+%tKJ233J8
5T=8
5T!8celula 11
5T!8celula 12
5T=8
5T!8celula 21
5T!8celula 22
5OT,4LE8
5O4"!#8
5OHTML8
!imensiunile unui ta>el includ i ;aloarea dat& atri>utului or!er. !e e)empluG un ta>el cu o
sin+ur& linie i o sin+ur& coloan&G cu dimensiunile wi!th/01++01 height/0)+0 i a;0nd
atri>utul or!er setat la ;aloarea 13G ;a a;ea drept spaiu util -3 de pi)eli pe l&ime i 33 de pi)eli
pe n&lime.
*3
<na dintre cele mai 'rec;ente utili9&ri a ta>elelor este po9iionarea unui te)t ntr-o anumit& 9on& a
pa+iniiG prin reali9area unui ta>el '&r& c%enar 1or!er/0+02 cu o sin+ur& linie i o sin+ur& coloan&G
ca n E)emplul -.*.
(e"plul 8.7
5HTML8
5HE,!8
5T6TLE8Ta>el 2&3</T4TLE>
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8$o9itionarea unui te)t5OH18
5T,4LE >orderKJ3J Eidt%KJ(3_J %ei+%tKJ133_J ali+nKJcenterJ8
5T=8
5T!8
,cest te)t este po9itionat in centrul pa+inii. ,cest te)t este po9itionat in centrul
pa+inii. ,cest te)t este po9itionat in centrul pa+inii. ,cest te)t este po9itionat in
centrul pa+inii. ,cest te)t este po9itionat in centrul pa+inii.
5OT,4LE8
5O4"!#8
5OHTML8
4. :paierea celulelor unui ta>el
!istana dintre dou& celule ;ecine se de'inete cu aCutorul atri>utului cellspacing al
etic%etei <TABLE>.
7alorile acestui atri>ut pot 'i numere ntre+i po9iti;eG inclusi; 3G i repre9int& distana n pi)eli
dintre dou& celule ;ecine. 7aloarea presta>ilit& a atri>utului cellspacing este de 2 pi)eli.
E)emplul -.- ilustrea9& 'uncionarea atri>utului cellspacing&
:ute>i mo%i#ica valoarea atri!utului cellspacing pentru a o!serva cum se spa>ia)4
celulele 3n #unc>ie %e valorile pe care le %a>i.
(e"plul 8.8
5HTML8
5HE,!8
5T6TLE8Ta>el -.-5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8:patierea celulelor5OH185H=8
5T,4LE >orderKJ3J cellspacin+KJ13J8
5T=8
5T!8Maria
5T!84o+dan
5T=8
5T!8,le)andru
5T!86rina
5OT,4LE8
5O4"!#8
5OHTML8
*1
!istana dintre mar+inea unei celule i coninutul ei poate 'i de'init& cu aCutorul atri>utului
cellpadding al etic%etei <TABLE>. 7alorile acestui atri>ut pot 'i numere ntre+i po9iti;eG i
repre9int& distana n pi)eli dintre mar+inile celulei i coninutul ei. 7aloarea presta>ilit& a
atri>utului cellpa!!ing este 1 pi)el.
E)emplul -./ construiete un ta>el n care distana dintre mar+inea celulelor i coninutul lor este de
23 de pi)eli.
(e"plul 8.9
5HTML8
5HE,!8
5T6TLE8Ta>el -./5OT6TLE8
5OHE,!8
54"!#8
5"1 align/0center0> 5patierea te%tului in celule</"1><"R>
5T,4LE >order cellpaddin+KJ23J8
5T=8
5T!8Mi%nea
5T!8=andu
5T=8
5T!8,le)andru
5T!8,n+elo
5OT,4LE8
5O4"!#8
5OHTML8
. !imensionarea celulelor unui ta>el.
!imensiunile unei celule de tip <TD> sau de tip <T"> 1;e9i mai Cos etic%eta <T">2 pot 'i
sta>ilite e)act cu aCutorul a dou& atri>ute ale acestor etic%eteH width pentru l&ime i height
pentru n&lime. 7alorile posi>ile ale acestor atri>ute suntH
numere ntre+i po9iti;e 1inclusi; 32 repre9ent0nd dimensiunea n pi)eli a l&imiiG respecti; a
n&limii unei celule
procente din l&imea G respecti; n&limea ta>elului.
In E)emplul -.13 am dimensionat celula 11 la l&imea de 23_ din l&imea ta>elului i n&limea
e+al& cu *_ din n&limea lui. !imensionarea indi;idual& a unei celule ;a a'ecta dimensionarea
tuturor celulelor din linia i coloana din care 'ace parte celula respecti;&. :e o>ser;& c& celula 12
are l&imea e+al& cu restul de -3_ din l&imea ta>elului. Celula 21 a'lat& pe aceeai coloana cu
celula dimensionat& are aceleai dimensiuni.
(e"plul 8.10
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8!imensionarea celulelor5OH185H=8
Ta>el cu celule dimensionate indi;idual5$8
5T,4LE >order8
5T=8
5T! Eidt%KJ23_J %ei+%tKJ*_J8celula 11
*2
5T!8celula 12
5T=8
5T!8celula 21
5T!8celula 22
5OT,4LE8
5O4"!#8
5OHTML8
(. ,linierea coninutului unei celule
,linierea pe ori9ontal& a coninutului unei celule se 'ace cu aCutorul atri>utului align care
poate lua ;alorileH
left - la st0n+a
center - centrat G ;aloarea presta>ilit&
right - la dreapta
,linierea pe ;ertical& a coninutului unei celule se 'ace cu aCutorul atri>utului valign care
poate lua ;alorileH
aseline - la >a9&
otto' - Cos
'i!!le - la miClocG ;aloarea presta>ilit&
top - sus
,ceste atri>ute pot 'i ataate at0t etic%etei <TR> pentru a de'ini alinierea tuturor celulelor
unei liniiG c0t i etic%etelor <TD> i <T"> 1;e9i mai Cos etic%eta <T">6 pentru a sta>ili alinierea
te)tului ntr-o sin+ur& celul&. In E)emplul -.11 este ilustrat& 'uncionarea atri>utelor align i
$align.
Te)tul din celulele primeiG celei de-a doua i celei de-a patra linii a 'ost aliniat prin atri>utul align
asociat linieiG iar te)tul din celulele liniei a treia a 'ost aliniat prin atri>utul align asociat 'iec&rei
celule n parte.
(e"plul 8.11
5HTML8
5HE,!8
5T6TLE8Ta>el -.115OT6TLE>
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8 ,linierea continutului celulelor5OH185H=8
5T,4LE >order Eidt%KJ3_J %ei+%tKJ-3_J8
5T= ali+nKJri+%tJ8
5T!8dreapta
5T!8dreapta
5T= ali+nKJcenterJ8
5T!8centru
5T!8centru
5T=8
5T! ;ali+nKJtopJ8sus
5T! ;ali+nKJ>ottomJ8Cos
5T= ali+nKJle'tJ8
5T!8stan+a
*3
5T!8stan+a
5OT,4LE8
5O4"!#8
5OHTML8
!ac& este pre9ent un atri>ut de aliniere ataat etic%etei <TR> i pe linia respecti;& o anumit&
celul& are propriul s&u atri>ut de aliniereG atri>utul de aliniere asociat etic%etei <TD> are prioritate
'a& de cel asociat etic%etei <TR>.
*. !e'inirea culorilor pentru un ta>el
Culoarea de 'ond a unui ta>el se sta>ilete cu aCutorul atri>utului bgcolorG care poate 'i ataat
dup& cum urmea9&H
ntre+ului ta>el prin etic%eta <TABLE>G
unei linii prin etic%eta <TR>
unei celule de date prin etic%eta <TD>
7alorile pe care le poate primi atri>utul gcolor sunt cele cunoscute pentru culori.
!ac& ntr-un ta>el sunt de'inite mai multe atri>ute gcolorG atunci prioritatea esteG n ordine
descresc&toareG urm&toareaH
1. <TD>
2. <TR>
3. <TABLE> 7prioritatea cea 'ai 'ica6
In E)emplul -.12 este ilustrat& 'olosirea atri>utului gcolor.
(e"plul 8.12
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Culori in ta>el5OH185H=8
5T,4LE >orderKJJ >+colorKJlimeJ8
5T=8
5T!8celula 11 ;erde
5T! >+colorKJredJ8celula 1- rosu
5T= >+colorKJ>lueJ8
5T!8celula 21 al>astru
5T! >+colorKJWelloEJ8celula 22 +al>en
5T= >+colorKJcWanJ8
5T!8celula 31 cWan
5T!8celula 32 cWan
5T=8
5T!8celula 41 ;erde
5T! >+colorKJE%iteJ8celula 42 al>
5OT,4LE8
5O4"!#8
5OHTML8
*4
<n ta>el poate a;ea drept 'undal nu numai o culoareG ci i o ima+ine. ,cest e'ect se o>ine
'olosind atri>utul background al etic%etei <TABLE>G atri>utul primind ca ;aloare adresa <=L a
ima+inii. ,tri>utul ac8groun! poate 'i ataat i unei liniiG sta>ilind 'undalul tuturor celulelor din
linia respecti;& precum i unei celule indi;idualeG n acest ca9 sta>ilind 'undalul acelei celule.
(e"plul 8.13
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8.undalul unui ta>el5OH185H=8
5T,4LE >orderKJ)0 wi!th/0-++0 height/01-+0
ac8groun!/0&&/4'agini/lace&gif>
5T=8
5T!8celula 11
5T!8celula 12
5T=8
5T!8celula 21
5T!8celula 22
5OT,4LE8
5O4"!#8
5OHTML8
Culorile c%enarului unui ta>el se pot sta>ili 'olosind atri>uteleH
bordercolor - permite sta>ilirea culorii pentru c%enarul unui ta>el
bordercolorlight - permite sta>ilirea culorii mar+inilor din st0n+a i de sus ale ta>elului
bordercolordark - permite sta>ilirea culorii mar+inilor din dreapta i de Cos ale ta>elului
Culoarea te)tului din 'iecare celul& se poate sta>ili cu aCutorul e)presieiH
<9:;T color/0<R=B sau nu'e>culoare0>te%t</9:;T>&
(e"plul 8.14
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Culorile c%enarului unui ta>el5OH185H=8
5T,4LE >orderKJ13J >ordercolordar?KJ>lueJ >ordercolorli+%tKJcWanJ8
5T=8
5T!85."AT colorKJ+reenJ8celula 115O."AT8
5T!85."AT colorKJ>lueJ8celula 125O."AT8
5T!85."AT colorKJredJ8celula 135O."AT8
5T=8
5T!85."AT colorKJtealJ8celula 215O."AT8
*
5T!85."AT colorKJma+entaJ8celula 225O."AT8
5T!85."AT colorKJlimeJ8celula 235O."AT8
5OT,4LE8
5O4"!*>
5OHTML8
,m setat +rosimea c%enarului ta>elului la ;aloarea de 13 pi)eliG pentru a a;ea un aspect
tridimensional mai pronunat.
Cu aCutorul atri>utului or!ercolor!ar8 am sta>ilit culoarea p&rii Jum>riteJ a c%enarului
1mar+inile de Cos i din dreapta2 iar cu aCutorul atri>utului or!ercolorlightG culoarea p&rii
JluminateJ a acestuia 1mar+inile de sus i din st0n+a2 iar te)tul din celule l-am scris cu culori
di'eriteG 'olosind etic%eta <9:;T>.
Culorile sta>ilite pentru c%enarul e)terior al ta>elului sunt 'olosite i pentru a colora liniile
desp&ritoare dintre celulele ta>elului. $entru acestea partea Jum>rit&J este 'ormat& din muc%iile de
sus i din st0n+a iar partea Jluminat&J este 'ormat& din muc%iile de Cos i din dreapta.
!ac& dorim s& color&m separat muc%iile care despart liniile sau celulele ta>elului putem
asocia atri>utele or!ercolorG or!ercolor!ar8 i or!ercolorlight etic%etelor <TR> i
<TD>.
1tenie#
Atributele bordercolor, bordercolordark i bordercolorlight nu sunt
recunoscute de browserul Nescape
-. Titlul unui ta>el.
<nui ta>el i se poate ataa un titlu cu aCutorul etic%etei <A!T"#$> 1ta!le captionKtitlu ta>el2.
,ceast& etic%et& tre>uie plasat& n interiorul etic%etelor <TABLE> </TABLE>G dar nu n
interiorul etic%etelor <TR> sau <TD>.
Titlul unui ta>el poate 'i aliniat cu aCutorul atri>utului align al etic%etei <?A.T4:;> care
poate lua una dintre ;alorileH
botto% - su> ta>el
top - deasupra ta>elului
left - deasupraG la st0n+a ta>elului
right - deasupraG la dreapta ta>elului
(e"plul 8.15
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Titlul unui ta>el5OH185H=8
5T,4LE >order85C,$T6"A ali+nKJtopJ8Masini
5T=8
5T!8Mercedes
*(
5T!8Citroen
5T!8Da+uar
5T=8
5T!84MF
5T!87ol;o
5T!8=enault
5OT,4LE8
5O4"!*>
5OHTML8
/. Capul de ta>el.
<n ta>el poate a;ea celule cu semni'icaia de cap de ta>el. ,ceste celule sunt introduse de
etic%eta <T&> 1ta!el hea%erKcap de ta>el2 n loc de <TD>.
Toate atri>utele care pot 'i ataate etic%etei <TD> pot 'i de asemenea ataate i etic%etei <T">.
Coninutul celulelor de'inite cu <T"> este scris cu caractere aldine i centrat.
E)emplul -.1( ilustrea9& modul n care se pot insera celule cu rol de cap de ta>el. $utei
o>ser;a din e)emplu c& elementele cu rol de cap de ta>el pot 'i plasate at0t pe ori9ontal& c0t i pe
;ertical&.
(e"plul 8.16
5HTML8
5HE,!8
5T6TLE8Ta>el /.1(5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Capul de ta>el5OH185H=85$8
5T,4LE >order85C,$T6"A ali+nKJ>ottomJ8$returi masini
5T=8
5TH8$ret
5TH8Citroen
5TH8Da+uar
5TH84MF
5TH87ol;o
5T=8
5TH8@n !olari
5T!8333
5T!8133333
5T!83333
5T!8-3333
5T=8
5TH8In lei
5T!8
5T!8133
5T!83
5T!8-3
**
5OT,4LE8
5O4"!#8
5OHTML8
13. Ta>ele de 'orme oarecare
E)ist& situaii c0nd dorim ca o celul& s& se e)tind& peste celulele ;ecineG pe ori9ontal& sau pe
;ertical&. In acest mod se o>ine o sin+ur& celul& cu supra'aa e+al& cu suma supra'eelor celulelor
iniiale.
,cest lucru se poate reali9a cu aCutorul atri>utelor colspan i rowspan ale etic%etelor <TD>
i <T">.
,st'elH
colspan - reali9ea9& e)tinderea unei celule peste celulele din dreapta ei. 7aloarea atri>utului
determin& num&rul de celule care se uni'ic&.
rowspan - reali9ea9& e)tinderea unei celule peste celulele de su> ea. 7aloarea atri>utului
determin& num&rul de celule care se uni'ic&.
:unt posi>ile e)tinderi simultane ale unei celule pe ori9ontal& i pe ;ertical&. In acest ca9G n
etic%etele <TD> sau <T"> ;or 'i pre9ente am>ele atri>ute colspan i rowspan. E)emplul -.1*
ilustrea9& modul cum se reali9ea9& un ta>el cu celule uni'icate.
(e"plul 8.17
5HTML8
5HE,!8
5T6TLE8Ta>el /.1*5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Ta>ele cu 'orma oarecare5OH185H=8
5T,4LE >order8
5T=8
5T! roEspanKJ3J8celula 1154=8celula 2154=8celula 31
5T!8celula 12
5T! colspanKJ2J roEspanKJ3J8celula 13 G celula 1454=8celula 23G celula
2454=8celula 33G celula 34
5T=8
5T!8celula 22
5T=8
5T!8celula 32
5T=8
5T!8celula 41
5T! colspanKJ3J8celula 42G celula 43G celula 44
5OT,4LE8
5O4"!#8
5OHTML8
Ta>elul construit n acest e)emplu are 4 linii i 4 coloane. ,a cum se ;ede n E)emplul -.1*G
prin 'olosirea atri>utelor colspan i rowspan con'i+uraia ta>elului s-a modi'icat ast'elH celula 11
*-
s-a e)tins n Cos peste celulele 21 i 31 1<TD rowspan/0A0>2G celula 12 a r&mas nemodi'icat&G
celula 13 s-a e)tins at0t spre dreapta peste celula 14 c0t i n CosG peste celulele 23 i 24 1<TD
colspan/0-0 rowspan/0A0>2.
Celulele 22G 32 i 41 au r&mas nemodi'icate iar celula 42 s-a e)tins spre dreapta peste celulele
43 i 44 1<TD colspan/0A0>&
Etic%etelor <TD> i <T"> li se poate ataa atri>utul nowrap. El inter9ice aCustarea automat& a
lun+imii unei linii de te)tG ast'el nc0t n ta>el pot ap&rea coloane cu o l&ime oric0t de mare. <n
ta>el n care este 'olosit atri>utul nowrap este cel construit n E)emplul -.1-
(e"plul 8.18
5HTML8
5HE,!8
5T6TLE8Ta>el /.1-5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8 ,tri>utul noErap5OH185H=8
5T,4LE >order8
5T=8
5T!8celula 11
5T!8celula 12
5T=8
5T!8celula 21
5T! noErap8celula 22 Te)tul din aceasta celula este 'oarte lun+
5OT,4LE8
5O4"!#8
5OHTML8
11. Celule '&r& coninut
!ac& un ta>el are celule '&r& coninut 1celule ;ide2G atunci aceste celule ;or ap&rea n ta>el
'&r& un c%enar de delimitare. In scopul de a a'ia un c%enar pentru celulele ;ide se poate proceda
ast'elH
dup& etic%eta <TD> se adau+& 'nbsp(
dup& etic%eta <TD> se adau+& <BR>
Caracterul BnspC 1no !reak space2 esteG aa cum am ;&9ut la capitolul 6or"atarea
tetuluiG caracterul spaiu. <n spaiu introdus prin intermediul acestui caracter nu ;a 'i i+norat de
>roEser.
In E)emplul -.1/ este ilustrat modul n care pot 'i create celule '&r& coninut care s& ai>& totui
c%enar de delimitare. !up& cum o>ser;ai din e)empluG celula 23 nu are c%enar de delimitare.
Celulele de pe a doua linie a ta>elului sunt ;ide dar au c%enar deoarece am 'olosit Bnsp i <BR>.
(e"plul 8.19
5HTML8
5HE,!8
5T6TLE8Ta>el /.1/5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Celule 'ara continut5OH185H=8
5T,4LE >order8
*/
5T=8
5T!8celula 11
5T!8celula 12
5T!8celula 13
5T=8
5T!8Pn>spR
5T!854=8
5T!8
5OT,4LE8
5O4"!#8
5OHTML8
12. @rupuri de coloane
Etic%etele <#L)R#*!> </#L)R#*!> permit de'inirea unui +rup de coloane n cadrul unui
ta>el. ,tri>utele acceptate de <?:L=R:D.> suntH
span - determin& num&rul de coloane dintr-un +rup
width - determin& o l&ime unic& pentru coloanele din +rup
align - determin& un tip unic de aliniere pentru coloanele din +rup
!e e)empluH
<?:L=R:D. span/0A0 wi!th/01++0></?:L=R:D.>
,m de'init ast'el un +rup de trei coloaneG 'iecare a;0nd l&imea de 133 de pi)eli.
Intr-un >loc <?:L=R:D.>G coloanele pot a;ea con'i+ur&ri di'erite dac& se utili9ea9& etic%eta
<#L>G care admite atri>uteleH
span - identi'ic& acea coloan& din +rup pentru care se 'ace con'i+urarea. !ac& lipseteG atunci
coloanele sunt con'i+urate n ordine.
width - determin& l&imea coloanei identi'icate prin span&
align - determin& alinierea coninutului coloanei identi'icate prin span&
Cel mai >ine putei nele+e 'uncionarea acestei etic%ete din E)emplul -.23. Ta>elul din acest
e)emplu are dimensiunile de 423 de pi)eli l&ime i 233 de pi)eli n&lime i este 'ormat din dou&
linii i patru coloane.
In ta>el a 'ost delimitat un +rup de trei coloane 1primele trei coloane2 prin etic%eta
<?:L=R:D.> iar n cadrul acestui +rup au 'ost de'inite l&imea i alinierea te)tului din 'iecare
coloane n parte. Cea de-a patra coloan& a ta>elului nu 'ace parte din +rupul de coloane. !up&
nc%iderea etic%etei <?:L=R:D.>G celulele de date au 'ost introduse n mod normalG cu aCutorul
etic%etei <TD>.
(e"plul 8.20
5HTML8
5HE,!8
5T6TLE8Ta>el E&-+</T4TLE>
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8@rupuri de coloane5OH185H=8
5T,4LE >order Eidt%KJ423J %ei+%tKJ233J8
-3
5C"L@="<$8
5C"L Eidt%KJ(3J ali+nKJle'tJ8
5C"L Eidt%KJ123J ali+nKJcenterJ8
5C"L Eidt%KJ1-3J ali+nKJri+%tJ8
5OC"L@="<$8
5T=8
5T! ;ali+nKJtopJ8celula 11
5T!8celula 12
5T! ;ali+nKJ>ottomJ8celula 13
5T!8celula 14
5T=8
5T!8celula 21
5T!8celula 22
5T!8celula 33
5T!8celula 34
5OT,4LE8
5O4"!#8
5OHTML8
!in e)emplu de mai sus se poate o>ser;a c& n cadrul celulei 11 este respectat& alinierea la
st0n+a a te)tuluiG deoarece ea a 'ost setata ca atare prin construcia <?:L wi!th/0F+0
align/0left0>&

In plusG n cadrul etic%etei 5T!8 a 'ost sta>ilita i alinierea pe ;erticala a te)tului din celul&G
atri>utul ;ali+n primind ;aloarea JtopJ.
In celula 12 nu este setat atri>utul ;ali+n ast'el nc0t te)tul respect& alinierea sta>ilit& prin
construcia 5C"L Eidt%KJ123J ali+nKJcenterJ8. In celula 13 alinierea pe ori9ontal& a te)tului este
sta>ilit& prin construcia 5C"L Eidt%KJ1-3J ali+nKJri+%tJ8 iar alinierea pe ;ertical& este setat& n
cadrul etic%etei 5T!8 la ;aloarea J>ottomJ.
!in 'i+ur& se mai o>ser;& c& toate celulele care 'ac parte din coloanele incluse n >locul
5C"L@="<$8 respect& set&rile '&cute n cadrul acestui >loc 1celulele 21G 22 i 232. Celulele 14 i
24 care 'ormea9& coloana a patra a ta>elului neinclus& n +rupul de coloaneG respect& atri>utele de
aliniere speci'icate n cadrul etic%etei 5T!8G dac& e)ist&.
Etic%eta <?:L=R:D.> nu este recunoscut& de >roEserele Aetscape i prin urmare nici
atri>utele le+ate de dimensionarea coloanelor i alinierea te)tului n interiorul lor.
13. ,tri>ute pentru aspectul c%enarului unui ta>el
Atributul frame
,tri>utul fra%e al etic%etei <TABLE> permite speci'icarea laturilor din c%enarul unui ta>el
care ;or 'i ;i9i>ile.
7alorile posi>ile ale acestui atri>ut suntH
?oid - elimin& toate muc%iile e)terioare ale ta>elului
a)o?e - a'iea9& o muc%ie n partea superioar& a cadrului ta>elului
)eloA - a'iea9& o muc%ie n partea in'erioar& a cadrului ta>elului
Csides - a'iea9& c0te o muc%ie n partea superioar& i in'erioar& cadrului ta>elului
?sides - a'iea9& o muc%ie n partea din st0n+a i din dreapta a cadrului ta>elului
lCs - a'iea9& o muc%ie n partea din st0n+a a cadrului ta>elului
-1
rCs - a'iea9& o muc%ie n partea din dreapta a cadrului ta>elului
)o - a'iea9& o muc%ie pe toate laturile cadrului ta>elului
Atributul rules
,tri>utul rules al etic%etei <TABLE> permite ale+erea unor delimitatori pentru celulele unui
ta>el. 7alorile posi>ile suntH
none - elimin& toate muc%iile interioare ale ta>elului
rows - a'iea9& muc%ii ori9ontale ntre toate liniile ta>elului
cols - a'iea9& muc%ii ;erticale ntre toate coloanele ta>elului
all - a'iea9& muc%ii ntre toate liniile i coloanele
E)emplul -.21 ilustrea9& aceste atri>ute. ,tri>utele fra'e i rules pot 'i com>inate i cu
atri>utele de colorare a c%enarului i se pot 'olosi pentru a crea e'ecte interesante de aliniere n
pa+in&
(e"plul 8.21
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,tri>utele 'rame si rules5OH185H=8
5T,4LE >ordercolorKJredJ Eidt%KJ433J 'rameKJl%sJ rulesKJcolsJ8
5T=8
5T!8celula 11
5T!8celula 12
5T!8celula 13
5T=8
5T!8celula 21
5T!8celula 22
5T!8celula 23
5T=8
5T!8celula 21
5T!8celula 22
5T!8celula 23
5OT,4LE8
5O4"!#8
5OHTML8
14. Ta>ele im>ricate
<n ta>el poate conine n celulele sale i alte elemente n a'ar& de te)tG inclusi; un alt ta>elG
'orm0nd ast'el un ansam>lu de ta>ele im>ricate.
In E)emplul -.22 ;om ilustra modul n care se pot im>rica dou& ta>ele.
(e"plul 8.22
-2
5HTML8
5HE,!8
5T6TLE8Tael E&--</T4TLE>
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ86m>ricarea ta>elelor5OH185H=8
5T,4LE >orderKJJ8
5T=8
5T!8celula 11 ta>elul 1
5T!8
5T,4LE >order8
5T=8
5T=8
5T=8
5OT,4LE8
5T=8
5OT,4LE8
5O4"!#8
5OHTML8
,a cum se ;ede din e)emplul de mai susta>elul este 'ormat din dou& linii i dou& coloane. In
celula 21 a ta>elului am inclus un alt ta>elG 'ormat din trei linii i dou& coloane.
1. Ta>ele comple)e
In acest ca9 tre>uie s& 'olosim atri>utele colspan i roAspan ale elementelor .td/.
Celula , a ta>elului 1 din ima+inea de mai sus este pe prima linie i ocup& dou& coloane. Celulele 4
i C se a'l& pe a doua linie i ocup& 'iecare c0te o coloan& 1sunt celule de dimensiune normal&2. In
ta>elul 2 celula , ocup& dou& linii i o coloan& i se consider& c& se a'l& pe prima linie mpreun& cu
celula 4. Celula CG de dimensiune normal&G se a'l& pe a doua linie a ta>elului. $entru a decide c0te
-3
linii i c0te coloane are de 'apt un ta>el i c0te dintre ele sunt ocupate de 'iecare celul& ;om prelun+i
toate liniile ori9ontale i ;erticale din ta>el aa cum se ;ede n ima+inea de mai CosH
(e"plul 8.23
5HTML8
5HE,!8
5OHE,!8

5ta>le >orderKJ1J8
5tr8 5[-- linia 1 --8
5td roEspanKJJ8 roEspan 5Otd8
5td roEspanKJ2J colspanKJ2J8 roEspan 2 colspan 25Otd8
5td8 Pn>spR 5Otd8
5td roEspanKJ2J colspanKJ3J8 roEspan 2 colspan 35Otd8
5Otr8
5tr8 5[-- linia 2 --8
5td8 Pn>spR 5Otd8
-4
5Otr8
5tr8 5[-- linia 3 --8
5td8 Pn>spR 5Otd8
5td8 Pn>spR 5Otd8
5td8 Pn>spR 5Otd8
5td8 Pn>spR 5Otd8
5td colspanKJ2J8 colspan 2 5Otd8
5Otr8
5tr8 5[-- linia 4 --8
5td8 Pn>spR 5Otd8
5td8 Pn>spR 5Otd8
5td8 Pn>spRPn>spRPn>spR 5Otd8
5td8 Pn>spR 5Otd8
5td8 Pn>spR 5Otd8
5td8 Pn>spR 5Otd8
5Otr8
5tr8 5[-- linia --8
5td8 Pn>spR 5Otd8
5Otr8
5tr8 5[-- linia ( --8
5td colspanKJ*J8 colspan * 5Otd8
5Otr8
5Ota>le8
5O4"!#8
5OHTML8
(e"plul 8.24
5HTML8
5HE,!8
5OHE,!8
5ta>le >orderKJ1J rulesKJ+roupsJ summarWKJCentrali9ator al ;0n9&rilor pe semestrele 1 i
2J8
5caption8Centrali9ator ;0n9&ri5Ocaption8
5col+roup spanKJ2J85Ocol+roup8
5t%ead8 5[-- antetul ta>elului --8
-
5tr8 5t% colspanKJ2J8Trimestre5Ot%8 5t% colspanKJ3J8Trimestrul 15Ot%8
5t% colspanKJ3J8Trimestrul 25Ot%8 5Otr8
5tr8
5t% colspanKJ2J8Luni5Ot%8 5t%8 6an 5Ot%8 5t%8 .e> 5Ot%8 5t%8 Mar 5Ot%8 5t%8 ,pr 5Ot%8
5t%8 Mai 5Ot%8 5t%8 6un 5Ot%8
5Otr8
5Ot%ead8
5t'oot8 5[-- su>solul ta>elului --8
5tr8
5t% colspanKJ2J8 Total 5Ot%8 5t%8 223 5Ot%8 5t%8 3( 5Ot%8 5t%8 1341 5Ot%8 5t%8
31 5Ot%8 5t%8 4 5Ot%8 5t%8 4 5Ot%8
5Otr8
5Ot'oot8
5t>odW8 5[-- primul +rup de linii --8
5tr8
5td roEspanKJ3J8Cat. 15Otd8
5td8$rodus 15Otd8 5td8 13 5Otd8 5td8 23 5Otd8 5td8 33 5Otd8 5td8 13 5Otd8
5td8 23 5Otd8 5td8 33 5Otd8
5Otr8
5tr8
5td8$rodus 25Otd8 5td8 5Otd8 5td8 * 5Otd8 5td8 2 5Otd8 5td8 4 5Otd8 5td8 / 5Otd8
5td8 - 5Otd8
5Otr8
5tr8
5td8$rodus 35Otd8 5td8 233 5Otd8 5td8 2 5Otd8 5td8 1333 5Otd8 5td8 4 5Otd8 5td8 13
5Otd8 5td8 433 5Otd8
5Otr8
5Ot>odW8
5t>odW8 5[-- al doilea +rup de linii --8
5tr8
5td roEspanKJ2J8Cat. 25Otd8
5td8$rodus 45Otd8 5td8 1 5Otd8 5td8 2 5Otd8 5td8 3 5Otd8 5td8 5Otd8 5td8 (
5Otd8 5td8 * 5Otd8
5Otr8
5tr8
5td8$rodus 5Otd8 5td8 4 5Otd8 5td8 5Otd8 5td8 ( 5Otd8 5td8 - 5Otd8 5td8 /
5Otd8 5td8 13 5Otd8
5Otr8
5Ot>odW8
5Ota>le8
5O4"!#8
5OHTML8
1(. =ecomand&ri pri;ind 'olosirea ta>elelor
-(
Ta>elele se num&r& printre cele mai 'olosite elemente ntr-o pa+in& Fe>. Ele repre9int& un
instrument practic indispensa>il pentru de'inirea aspectului pa+iniiG ntruc0t permit alinierea corect&
a elementelor din pa+in&H te)tG ima+iniG le+&turiG etc. In interiorul unui ta>el se pot include i alte
ta>eleG n 'uncie de necesit&iG 'orm0nd o reea de ta>ele im>ricate.
:in+ura precauie pe care tre>uie s& o a;ei n ;edere c0nd 'olosii ta>ele n pa+inile dumnea;oastr&
este cea le+at& de etic%etele i atri>utele speci'ice unui anumit tip de >roEser. ,a dup& cum ai
o>ser;at din e)emplele pre9entateG aspectul pa+inilor poate s& di'ere simitor de la un tip de >roEser
la altulG atunci c0nd un anumit element nu este recunoscut. !ac& ;ei considera c& aspectul ta>elelor
este esenial pentru pa+inile site-uluiG este recomandat s& ;& limitai la etic%etele standardG
recunoscute de toate >roEserele.
Capitolul 9
Cadre +;ra"es-
" modalitate de structurare a;ansat& a unui document HTML este mp&rirea 'erestrei
>roEserului n mai multe 'erestre distincteG denumite cadre 1'rames2.
,ceast& 'acilitate permite a'iarea simultan&G n aceeai 'ereastr& a >roEseruluiG a dou& sau
mai multe documente HTML di'eriteG c0te unul n 'iecare cadru.
$entru a reali9a acest lucru sunt necesare urm&toareleH
un document de de'inire a cadrelor care conine etic%etele care sta>ilesc num&rulG
dimensiunile i ae9area cadrelor n pa+in&
c0te un 'iier HTML pentru 'iecare cadru n parteG prin care se sta>ilete coninutul cadrului
respecti;.
!e e)empluG o pa+in& Fe> care conine dou& cadre ;a 'i de'init& prin trei documente HTMLH
documentul de de'inire a cadrelorG care speci'ic& dimensiunile i ae9area cadrelor n pa+in&R
cele dou& documente care descriu coninutul 'iec&rui cadru n parte.
In esen&G cadrele 'ac posi>il& a'iarea n 'ereastra >roEserului a mai multe pa+iniG simultan.
1. !ocumentul de de'inire a cadrelor
-*
In cadrul documentului de de'inire a cadrelorG >locul 54"!#8 5O4"!#8 este nlocuit de
>locul .681M(&(T/ .0681M(&(T/. In acest tip de document >locul 54"!#8 nu mai este
'olosit.
In interiorul >locului 5.=,ME:ET8G 'iecare cadru este introdus prin etic%eta .681M(/.
!e'inirea documentului ce ;a 'i a'iat ntr-un cadru se 'ace prin atri>utul src 1source2. ,cesta este
un atri>ut o>li+atoriu al etic%etei 5.=,ME8G i primete ca ;aloare adresa <=L a documentului
HTML care ;a 'i nc&rcat n acel cadru.
!e'inirea cadrelor se 'ace prin mp&rirea 'erestrelor n linii i coloaneH
mp&rirea unei 'erestre ntr-un num&r de cadre de tip coloan& se 'ace cu aCutorul atri>utului
cols al etic%etei 5.=,ME:ET8 ce descrie acea 'ereastr&R
mp&rirea unei 'erestre n cadre de tip linie se 'ace cu aCutorul atri>utului roAs al etic%etei
5.=,ME:ET8 care descrie 'ereastra.
7alorile atri>utelor cols si roEs sunt liste de elemente separate prin ;ir+ul& care descriu modul
n care se 'ace mp&rirea 'erestrei.
7alorile acestor atri>ute pot 'i e)primate n mai multe moduriH
n pi)eli k n care ca9 ;aloarea este un num&r ntre+
n procente din dimensiunea 'erestrei 1un num&r cuprins ntre 1 i //G urmat de sim>olul _2
n dimensiuni relati;eG nl. :im>olul nl semni'ic& 'aptul c& linia sau coloana ast'el de'init& ocup& a
n-a parte din spaiul r&mas dup& dispunerea n 'ereastr& a liniilorG respecti; coloanelor precedente
1;e9i e)emplele de mai Cos2.
(e"plul 1B
colsKJ233 G l G 3_ G l
,ceast& construcie descrie o mp&rire n patru cadre de tip coloan&G dintre care prima are 233
pi)eliG a treia ocup& Cum&tate din spaiul total disponi>ilG iar a doua i a patra ocup& n mod e+al
restul de spaiu r&mas disponi>il.
(e"plul 2B
roEsKJ233 G 3_ G 1l G 2l J
In acest e)empluG pa+ina este mp&rit& n patru cadre de tip linieG dintre care prima are 233
pi)eliG a doua ocup& Cum&tate din spaiul total disponi>il iar a treia i a patra ocup& restul de spaiu
r&mas disponi>ilG care se mparte n trei p&ri e+aleG al treilea cadru ocup0nd o parteG iar al patrulea
ocup0nd dou& p&ri.
4)ser?aii
--
dac& mai multe elemente din list& sunt con'i+urate cu l G atunci spaiul disponi>il r&mas pentru
ele se ;a mp&ri n mod e+al.
n cadrul unui >loc 5.=,ME:ET8 poate 'i inclus un cadru prin etic%eta 5.=,ME8 sau un alt
>loc 5.=,ME:ET8 o>in0ndu-se ast'el cadre im>ricate.
In maCoritatea e)emplelor care ;or urma am 'olosit ca <=L-uri pentru documentele pe care le
conin cadreleG pa+ini deCa construite n capitolele anterioare. !ac& ai sal;at documentele HTML
cu numele speci'icate n etic%eta 5T6TLE8 putei ;eri'ica direct e)emplele care ;or urma. !ac&
pre'erai s& nc&rcai n cadrele descrise n e)emplele urm&toare alte documenteG ;a tre>ui s& 'acei
modi'ic&rile necesare speci'ic0nd numele acestor 'iiere.
E)emplul /.1 mparte pa+ina n dou& cadre ;erticaleG 'iecare ocup0nd Cum&tate din pa+in&.
(e"plul 9. 1
5HTML8
5HE,!8
5T6TLE8Cadre /.15OT6TLE8
5OHE,!8
5.=,ME:ET colsKJlG lJ8
5.=,ME srcKJliste1.%tmlJ8
5O.=,ME:ET8
5OHTML8
In E)emplul /.2 este creat& o pa+ina Fe> cu trei cadre ori9ontale. $rimul cadru are 133 de
pi)eliG al treilea ocup& 33_ din 'ereastra >roEseruluiG iar al doilea ocup& restul spaiului.
(e"plul 9. 2
5HTML8
5HE,!8
5OHE,!8
5.=,ME:ET roEsKJ133 G l G 33_J8
5O.=,ME:ET8
5OHTML8
E)emplul /.3 crea9& o matrice p&trat& de 4 cadre 12 ) 22. $entru a reali9a acest lucruG se
'olosesc simultan cele dou& atri>ute cols i roEs.
(e"plul 9. 3
5HTML8
5HE,!8
5T6TLE8Cadre 13.35OT6TLE8
-/
5OHE,!8
5.=,ME:ET roEsKJlG lJ colsKJlG lJ8
5.=,ME srcKJta>ele1.%tmlJ8
5.=,ME srcKJta>ele(.%tmlJ8
5O.=,ME:ET8
5OHTML8
2. Cadre im>ricate
CadreleG ca i alte elemente ale pa+inii Fe> 1listeG ta>ele2G se pot im>ricaG adic& pot 'i incluse
cadre n interiorul altor cadre. In E)emplul /.4 este creat& o pa+in& cu trei cadre mi)te. $entru a
construi pa+ina se procedea9& din aproape n aproape. Mai nt0iG pa+ina este mp&rit& n dou& cadre
de tip coloan&G dup& care al doilea cadru este mp&rit n dou& cadre de tip linie.
(e"plul 9. 4
5HTML8
5HE,!8
5OHE,!8
5.=,ME:ET colsKJ33_G lJ8
5.=,ME:ET roEsKJlG lJ8
5O.=,ME:ET8
5O.=,ME:ET8
5OHTML8
3. Controlul aspectului unui cadru
Culoarea marginii cadrului
$entru a sta>ili culoarea c%enarului unui cadru se utili9ea9& atri>utul )ordercolor. ,cest
atri>ut primete ca ;aloare un nume de culoare sau o culoare de'init& n con'ormitate cu modelul
=@4.
,tri>utul >ordercolor poate 'i ataat at0t etic%etei 5.=,ME:ET8 pentru a sta>ili culoarea
tuturor c%enarelor cadrelor incluseG c0t i etic%etei 5.=,ME8G pentru a sta>ili culoarea c%enarului
pentru un cadru indi;idual.
E)emplul /. ilustrea9& atri>utul >ordercolor.
(e"plul 9. 5
5HTML8
5HE,!8
5OHE,!8
5.=,ME:ET colsKJ23_G lJ >ordercolorKJ+reenJ >orderKJ1J8
/3
5.=,ME srcKJte)t3.%tmlJ8
5.=,ME:ET roEsKJlG lJ8
5.=,ME srcKJte)t4.%tmlJ >ordercolorKJ>lueJ8
5.=,ME srcKJte)t.%tmlJ8
5O.=,ME:ET8
5O.=,ME:ET8
5OHTML8
Limea marginii cadrului
,tri>utul )order al etic%etei 5.=,ME:ET8 permite con'i+urarea l&imii c%enarelor tuturor
cadrelor la un num&r dorit de pi)eli. 7aloarea atri>utului >order este un num&r ntre+G ce repre9int&
num&rul de pi)eliG ;aloarea presta>ilit& 'iind de pi)eli. In mod presta>ilitG c%enarul unui cadru este
a'iat i are aspect tridimensional.
$entru a o>ine cadre '&r& c%enar se utili9ea9& setarea >orderKJ3J.
,'iarea c%enarului unui cadru se mai poate de9acti;a i dac& se utili9ea9& atri>utul
;ra"e)order cu ;aloarea JnoJ. ,cest atri>ut poate 'i ataat at0t etic%etei 5.=,ME:ET8
1de9acti;area 'iind ;ala>il& pentru toate cadrele incluse2 c0t i etic%etei 5.=,ME8 1de9acti;area
'iind ;ala>ila numai pentru un sin+ur cadru2.
7alorile posi>ile ale atri>utului 'rame>order suntH
Wes - ec%i;alent cu 1
no - ec%i;alent cu 3
Cadrele din E)emplul /.( nu au c%enar. !up& cum putei o>ser;a din 'i+ura crearea unor
cadre '&r& c%enar poate duce la apariia unor am>i+uit&i n pa+in& aa nc0t acest e'ect tre>uie
'olosit cu atenie.
(e"plul 9. 6
5HTML8
5HE,!8
5T6TLE8Cadre /.(5OT6TLE8
5OHE,!8
5.=,ME:ET roEsKJlG lJ >orderKJ3J8
5O.=,ME:ET8
5OHTML8
Dimensiunea cadrului
C%iar dac& dimensiunile unui cadru au 'ost sta>ilite n mod e)plicit prin ;alorile atri>utelor
etic%etei 5.=,ME:ET8G utili9atorul are posi>ilitatea de a altera aceste dimensiuni cu aCutorul
mouse-ului.
In scopul pre;enirii acestei situaii se poate utili9a atri>utul noresi*eG ataat etic%etei
5.=,ME8G al c&rui e'ect este cel de >locare a posi>ilit&ii de redimensionare a cadrului.
/1
4. 4are de derulare
,tri>utul scrollin, al etic%etei 5.=,ME8 este utili9at pentru a ad&u+a unui cadru o >ar& de
derulare sau de de'ilare 1scrolling !ar2G care permite na;i+area n interiorul documentului a'iat n
cadru. 7alorile posi>ile ale atri>utului scrollin+ suntH
Wes - >ara de derulare este pre9ent& ntotdeaunaR
no - >ara de derulare nu este disponi>il&R
auto - >ara de derulare este ;i9i>il& atunci c0nd este necesar.
,ceasta opiune las& >roEserului posi>ilitatea de a ad&u+a sau nu >araG n 'uncie de
dimensiunea te)tului din cadru.
E)emplul /.* ilustrea9& 'uncionarea atri>utului scrollin+ n cele trei situaii.
(e"plul 9. 7
5HTML8
5HE,!8
5T6TLE8Cadre /.*5OT6TLE8
5OHE,!8
5.=,ME:ET roEsKJlG lG lJ8
5.=,ME srcKJte)t1.%tmlJ scrollin+KJWesJ noresi9e8
5.=,ME srcKJte)t*.%tmlJ scrollin+KJnoJ noresi9e8
5.=,ME srcKJte)t-.%tmlJ scrollin+KJautoJ noresi9e8
5O.=,ME:ET8
5OHTML8
!in .i+ura /.* se o>ser;& c&G deoarece la primul cadru te)tul nu dep&ete dimensiunea
'erestreiG >ara de derulare nu este a'iat& dei atri>utul scrollin+ are ;aloarea JWesJ.
In cel de-al doilea cadru >ara de derulare nu este a'iat&G indi'erent de dimensiunea te)tului
din cadru.
La cel de-al treilea cadruG pre9ena sau a>sena >arei de derulare este condiionat& de
dimensiunea te)tului. ,iciG deoarece te)tul dep&ete dimensiunea 'erestreiG >ara este a'iata.
. $o9iionarea documentului ntr-un cadru
,tri>utele "ar,inCei,Ct i "ar,inAidtC ale etic%etei 5.=,ME8 permit sta>ilirea distanei
n pi)eli dintre coninutul unui cadru i mar+inile ;erticaleG respecti; ori9ontale ale cadrului.
7alorile posi>ile ale acestor atri>ute suntH
un num&r de pi)eli
procente din n&limeaG respecti; din l&imea cadrului
In E)emplul /.- 'ereastra >roEserului este mp&rit& n trei cadre de tip coloan& de dimensiuni
e+ale. In toate cele trei cadre este a'iat acelai documentG ceea ce di'er& este po9iionarea
documentului n 'iecare cadru.
,st'elG n cadrul din st0n+aG nu este speci'icat& nici o ;aloare pentru atri>utele mar+in%ei+%t i
mar+inEidt%.
In cadrul din miClocG se sta>ilete distana de 3 de pi)eli ntre mar+inea superioar& i cea
in'erioar& a cadrului i te)t.
In cadrul din dreapta se sta>ilete o distan& de 33 de pi)eli ntre mar+inea din st0n+a i cea din
dreapta a cadrului i te)t.
/2
(e"plul 9. 8
5HTML8
5HE,!8
5T6TLE8Cadre /.-5OT6TLE8
5OHE,!8
5.=,ME:ET colsKJl G l G lJ8
5.=,ME srcKJte)t1.%tmlJ8
5.=,ME srcKJte)t1.%tmlJ mar+in%ei+%tKJ(3J8
5.=,ME srcKJte)t1.%tmlJ mar+inEidt%KJ43J8
5O.=,ME:ET8
5OHTML8
1tenie#
E)ist& >roEsere care nu suport& cadre. $entru acestea se utili9ea9& n interiorul >locului
5.=,ME:ET8 etic%eta .74681M(&/ .074681M(&/. !ac& >roEserul poate s&
interprete9e cadreG ;a i+nora ce se +&sete n aceast& poriuneG iar dac& nuG materialul cuprins n
9ona 5A".=,ME:8 5OA".=,ME:8 ;a 'i sin+urul care ;a 'i recunoscut i a'iat.
Este de preci9at i 'aptul c& ntre 5A".=,ME:8 5OA".=,ME:8 se pot introduce orice alte
etic%ete HTML 1inclusi; ima+iniG %Wperlin?-uriG ta>ele2.
(. Cadre interne 1in-line 'rames2
<n cadru intern este speci'icat prin intermediul etic%etei .!681M(/ .0!681M(/. Ea
de'inete o arie rectan+ular& n interiorul documentuluiG arie n care >roEserul ;a a'ia un alt
document HTMLG completG inclusi; mar+inile i >arele de derulare.
<n cadru intern se inserea9& ntr-o pa+ina Fe> n mod asem&n&tor cu o ima+ineG n interiorul
>locului 54"!#8G aa cum re9ult& din urm&torul e)empluH
56.=,ME srcKJta>ele13.%tmlJ %ei+%tK43_ Eidt%K3_8 5O6.=,ME8
In acest ca9G am speci'icat c& dorim un cadru intern care are 43_ din n&limea i 3_ din
l&imea pa+inii curente.
,tri>utele acceptate de etic%eta 56.=,ME8 sunt n parte preluate de la etic%etele 5.=,ME8
i 5.=,ME:ET8G cum ar 'iH
srcG )orderG ;ra"e)orderG )ordercolorG "ar,inCei,CtG "ar,inAidtCG scrollin,G na"e.
" parte din atri>utele 5.=,ME8 sunt comune cu cele ale etic%etei 56M@8H
?spaceG CspaceG ali,nG AidtCG Cei,Ct.
In E)emplul /./ am construit un cadru intern n care se desc%ide unul dintre documentele
HTML create la capitolul Ta)ele.
(e"plul 9. 9
5HTML8
5HE,!8
5T6TLE8Cadre /./5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Cadre interne5OH185H=8
5CEATE=8
/3
56.=,ME Eidt%KJ(3_J %ei+%tKJ3_J nameKJicadJ srcKJta>ele4.%tmlJ8
!aca ;edeti acest te)t inseamna ca >roEserul dumne;oastra nu suporta cadre interne.
5$85, %re'KJcadre13.%tmlJ8$a+ina 'ara cadre interne5O,8
5O6.=,ME8
5OCEATE=8
5O4"!#8
5OHTML8
!in .i+ura /./ putei o>ser;a c& aspectul unui cadru intern este ntruc0t;a similar cu cel al
unei ima+ini in-line.
Etic%eta 56.=,ME8 se introduce n cadrul >locului 54"!#8 i n ca9ul 'olosirii ei nu mai
este necesar un document de de'inire a cadrelor. $entru situaia c0nd >roEserul nu accept& cadre
interneG am asi+urat o ;ersiune a pa+inii care nu conine ast'el de cadre 1ca%re+=.html2 introdus&
prin etic%eta 5,8. Coninutul acestei pa+ini este 'oarte simpluG ser;ind doar la ilustrarea modului n
care poate 'i construit& o alternati;& la pa+ina cu cadre interne E)emplul /.132
(e"plul 9. 10
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8$a+ina 'ara cadre interne5OH185H=8
5O4"!#8
5OHTML8
6at& un alt e)emplu 1E)emplul /.112 n care am creat o pa+in& care conine trei lin?-uri iar
acestea desc%id pa+inile re'erite de ele n cadrul intern din centrul pa+inii.
(e"plul 9. 11
5HTML8
5HE,!8
5OHE,!8
54"!#8
5, %re'KJta>ele4.%tmlJ tar+etKJicadJ8.isierul15O,854=8
5, %re'KJta>ele.%tmlJ tar+etKJicadJ8.isierul25O,854=8
5, %re'KJta>ele(.%tmlJ tar+etKJicadJ8.isierul35O,854=8
5CEATE=8
56.=,ME Eidt%KJ(3_J %ei+%tKJ3_J nameKJicadJ srcKJcadre11.%tmlJ8
!aca ;edeti acest te)t inseamna ca >roEserul dumne;oastra nu suporta cadre interne.
5$85, %re'KJcadre13.%tmlJ8$a+ina 'ara cadre interne5O,8
5O6.=,ME8
5OCEATE=8
5O4"!#8
5OHTML8
In e)emplu am 'olosit atri>utul na"e al etic%etei 56.=,ME8 cu aCutorul c&ruia am atri>uit un
nume acestui cadru i anume JicadJ. ,cest lucru a 'ost necesar pentru a speci'icaG prin intermediul
atri>utului tar,et al etic%etei 5,8G 'aptul c& lin?-urile se ;or desc%ide n cadrul intern.
/4
*. !esc%iderea documentelor n alte cadre
!ac& ntr-unul dintre documentele desc%ise n cadru e)ist& lin?-uriG acestea ;or desc%ide pa+inile
re'erite de ele n cadrul curent.
,cest comportament se poate sc%im>a prin plasarea n etic%eta 5,8 a atri>utului tar,etG care
preci9ea9& numele 'erestrei 1cadrului2 n care se ;a nc&rca pa+ina nou& re'erit& de le+&tur&G
con'orm sinta)eiH
5, %re'KJ<=LJ tar+etKJnume\'rameJ8 5O,8
Aumele unui cadru este sta>ilit prin atri>utul na"e al etic%etei 5.=,ME8 con'orm sinta)eiH
5.=,ME nameKJnume\'rameJ8
In E)emplul /.12 este pre9entat& o pa+ina Fe> cu dou& cadre.
(e"plul 9. 12
5HTML8
5HE,!8
5OHE,!8
5.=,ME:ET colsKJ23_G lJ8
5.=,ME srcKJcadre13.%tmlJ8
5.=,ME srcKJcadre14.%tmlJ nameKJcadru\dreaptaJ8
5O.=,ME:ET8
5OHTML8
In E)emplul /.13 este creat un document ce conineG dup& cum o>ser;aiG patru lin?-uri. $rin
intermediul atri>utului tar+et am speci'icat cadrul n care se ;or desc%ide acestea. Toate aceste
le+&turi desc%id pa+inile re'erite de ele n cadrul drept.
(e"plul 9. 13
5HTML8
5HE,!8
5T6TLE8Cadre ;13.135OT6TLE8
5OHE,!8
54"!#8
5, %re'KJta>ele(.%tmlJ tar+etKJcadru\dreaptaJ8
Le+atura 1
5O,854=8
5, %re'KJta>ele*.%tmlJ tar+etKJcadru\dreaptaJ8
Le+atura 2
5O,854=8
5, %re'KJta>ele-.%tmlJ tar+etKJcadru\dreaptaJ8
Le+atura 3
5O,854=8
5, %re'KJcadre14.%tmlJ tar+etKJcadru\dreaptaJ8
Home
5O,854=8
5O4"!#8
5OHTML8
/
(e"plul 9. 14
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H38,ici se ;or desc%ide pa+inile re'erite de le+aturile din cadrul stan+5OH385H=8
5O4"!#8
5OHTML8
(e"plul 9. 15
5HTML8
5HE,!8
5OHE,!8
5.=,ME:ET roEsKJ33_G lJ8
5.=,ME srcKJcadre1*.%tmlJ8
5.=,ME srcKJcadre1(.%tmlJ8
5O.=,ME:ET8
5OHTML8
E)emplul /.1( construiete documentul care conine trei le+&turi c&tre 'iiere HTML create la
capitolul 6or"atarea tetului. .iecare dintre aceste le+aturi are speci'icat atri>utul tar+et pentru a
ilustra modul n care 'uncionea9& acesta.
(e"plul 9. 16
5HTML8
5HE,!8
5T6TLE8cadre /.1(5OT6TLE8
5OHE,!8
54"!#8
5, %re'KJte)t4.%tmlJ tar+etKJ\>lan?J8
,ceasta le+atura se desc%ide in alta 'ereastra
5O,854=8
5, %re'KJte)t.%tmlJ tar+etKJ\sel'J8
,ceasta le+atura se desc%ide in 'ereastra curenta
5O,854=8
5, %re'KJte)t(.%tmlJ tar+etKJ\parentJ8
,ceasta le+atura se desc%ide in 'ereastra parinte
5O,854=8
5O4"!#8
5OHTML8
E)emplul /.1* este o pa+in& Fe> 'oarte simpl& care se ;a desc%ide n cadrul de sus.
(e"plul 9. 17
5HTML8
5HE,!8
5T6TLE8cadre /.1*5OT6TLE8
/(
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,tri>utul tar+et5OH18
5O4"!#8
5OHTML8
-. :u+estii pri;ind 'olosirea cadrelor
!ei cadrele repre9int& o maniera destul de spectaculoas& de a structura o pa+in& Fe>G ele
pre9int& o mulime de de9a;antaCe.
Inc&rcarea unei pa+ini care conine cadre se 'ace mai +reuG inde)area pa+inii de c&tre
motoarele de c&utare este mai di'icil&. !e asemeneaG deoarece documentul din 'iecare cadru are
propriul <=L G este mai +reu pentru ;i9itator s& rein& adresa pa+inii n 7avorites. TiG nu n ultimul
r0ndG deoarece e)ist& >roEsere care nu suport& cadreleG este indicat s& asi+urai pentru 'iecare
pa+in& ast'el structurat& i o ;ersiune '&r& cadreG ceea ce implic& un e'ort suplimentar.
,;0nd n ;edere toate aceste aspecteG este >ine s& limitai 'olosirea cadrelor n pa+inile
dumnea;oastr& doar la situaiile n care nu putei proceda alt'el.
Capitolul 10
6or"ulare
Cu si+uran& ai ;&9ut cum arat& un 'ormular ntr-o pa+in& Fe>. !e e)empluG atunci c0nd
completai o carte de oaspei 1guest!ook2 a;ei de-a 'ace cu un 'ormular. ,tunci c0nd selectai mai
multe opiuni dintr-o list& sau introducei un cu;0nt ntr-un motor de c&utareG 'olosiiG de asemeneaG
un 'ormular.
.ormularul repre9int& unul dintre cele puternice elemente ale unei pa+ini Fe>. $rin
intermediul 'ormularelor se reali9ea9& interacti;itatea cu ;i9itatorul pa+iniiG acestea permi0ndu-;&
s& o>inei in'ormaii despre cei care ;i9itea9& pa+inile dumnea;oastr&.
1. Ce este un 'ormular?
<n 'ormular este un ansam>lu de 9one acti;e alc&tuit din mai multe tipuri de elementeH
>utoaneG casete de selecieG c0mpuri de editareG etc.G ce permit utili9atorilor s& introduc& e'ecti;
in'ormaii. ,ceste in'ormaii sunt ulterior transmise ser;erului pe care este +&9duit& pa+ina
dumnea;oastr&G unde ;or putea 'i prelucrate.
" sesiune cu o pa+ina Fe> ce conine un 'ormular cuprinde dou& etapeH
<tili9atorul completea9& 'ormularul iG prin ap&sarea >utonului de e)pediereG trimite
ser;erului datele nscrise n 'ormular.
/*
" aplicaie dedicat& de pe ser;er 1un script2 anali9ea9& in'ormaiile transmise iG n 'uncie de
con'i+uraia scriptuluiG 'ie stoc%ea9& datele ntr-o >a9& de dateG 'ie le transmite la o adres& de mail
indicat& de dumnea;oastr&. !ac& este necesarG ser;erul poate e)pedia i un mesaC de r&spuns
utili9atorului.
Cel mai important lucru pe care tre>uie s&-l nele+ei n le+&tur& cu 'ormularele este c& aici
apar dou& pro>leme distincte i care necesit& instrumente di'erite pentru a le +estiona.
$rima dintre ele este plasarea 'ormularului n pa+in& i asi+urarea >unei lui 'uncion&ri. ,cest
lucru se reali9ea9& prin HTML i de el ne ocup&m n acest capitol.
Cea de-a doua este +estionarea i prelucrarea in'ormaiilor pe care ;i9itatorul le introduce prin
intermediul 'ormularului. ,ceast& pro>lem& este re9ol;at& cu aCutorul scripturilor C@6 stocate pe
ser;erG su>iect despre care ;om ;or>i n capitolul urm&tor.
:tructura 'ormularele poate ;ariaG de la o simpl& caset& de te)t pentru introducerea unui ir de
caractereG p0n& la un ansam>lu comple)G cu multiple seciuni i care o'er& 'acilit&i puternice de
transmitereOprelucrare a datelor.
2. Crearea unui 'ormular
<n 'ormular este de'init ntr-un >loc delimitat de etic%etele
.648M/ .0648M/. Etic%eta 5O."=M8G de nc%idereG este o>li+atorie.
In interiorul >locului sunt incluseH
elementele 'ormularuluiG n care ;i9itatorul urmea9& s& introduc& in'ormaii
un >uton de e)pediere 1su!mit2G la ap&sarea c&ruiaG datele sunt transmise c&tre ser;er
opionalG un >uton de anulare 1reset cancel2G prin care utili9atorul poate anula datele nscrise
n 'ormular
Tot ceea ce este inclus ntre etic%eta de desc%idere i cea de nc%idere 'ace parte din 'ormular.
Etic%eta 5."=M8 are dou& atri>ute esenialeH
action k comunic& >roEserului unde s& trimit& datele introduse n 'ormular. In +eneral
;aloarea atri>utului action este adresa <=L a scriptului a'lat pe ser;erul care primete datele
'ormularului. !e e)empluH
5."=M actionKJ%ttpHOOEEE.Wa%oo.comOc+i->inOnume\'is.c+iJ8.
"etCod - preci9ea9& metoda utili9at& de >roEser pentru e)pedierea datelor 'ormularului.
,tri>utul met%od poate a;ea dou& ;aloriH
post - 'olosit& n cele mai multe ca9uri. 6ndic& ser;erului s& 'urni9e9e datele direct scriptului
ca date de intrare standard.
+et 1;aloarea implicit&2 - datele din 'ormular sunt ad&u+ate la adresa <=L preci9at& de
atri>utul actionG ntre adresa <=L i date 'iind inserat un J?J. !atele sunt ad&u+ate con'orm
sinta)eiH
nume\campK;aloare\camp.
Intre di'erite seturi de date este introdus un JPJ. !e e)empluH
J%ttpHOOEEE.Wa%oo.comOc+i->inOnume\'is.c+i?
nume1K;aloare1Pnume2K;aloare2J
/-
Cea mai 'acil& cale prin care in'ormaiile introduse ntr-un 'ormular pot par;eni creatorului
pa+inii este 'olosirea comen9ii "ailtoB ,m mai nt0lnit aceast& comand& la capitolul Le,Gturi n
conte)tul urm&torH
5, %re'KJmailtoHautorhdomeniu.comJ8
!e data aceasta nu mai este ;or>a de crearea unei le+&turi care s& lanse9e n e)ecuie aplicaia
de mail a utili9atoruluiG ci de transmiterea datelor introduse n 'ormular la o adres& de mail
speci'icat& de dumnea;oastr&.
,cest lucru se poate reali9a preci90nd ca ;aloare a atri>utului action urm&toarea sec;en&H
JmailtoHadresa\mailJG ca n e)emplul urm&torH
5."=M actionKmailtoHautorhdomeniu.com met%odKJpostJ8
,a cum spuneamG atri>utul action comunic& >roEserului unde s& trimit& datele introduse n
'ormular. .olosind comanda mailtoH >roEserului i se indic& s& trimit& datele la adresa de mail
speci'icat& n comand&.
!in p&cateG aceast& comand& nu este e)ecutat& n acest mod dec0t de >roEserele Aetscape.
4roEserele 6nternet E)plorer nu recunosc comanda mailtoH pre9ent& n cadrul 'ormularelor. ,cestea
o e)ecut& la 'el cum este ea e)ecutat& atunci c0nd 'ace parte din etic%eta 5,8 ca ;aloare a
atri>utului %re' adic& lansea9& aplicaia de mail a utili9atorului.
!in acest moti;G inclusi; pentru trimiterea datelor la o adres& speci'icat& de mailG se 'olosesc
scripturi C@6. $entru a nu intra nc& n am&nunte pri;ind scripturileG ;om 'olosi totui n e)emplele
urm&toare comanda mailtoH
=einei totui c& a'iarea corect& a unui 'ormular n pa+in& nu este dec0t prima etap& a utili9&rii
'ormularului. $entru a 'ace o testare complet& tre>uie s& a;ei un script instalat pe ser;er care s&
prelucre9e datele din 'ormular i s& le transmit& la adresa de mail speci'icat&.
$entru a de'ini elementele care 'ac parte din 'ormular se utili9ea9& etic%etele .!75:T/G
.&(L(CT/G .45T!47/ i .T(>T18(1/.
3. Etic%eta 56A$<T8
$rin intermediul etic%etei .!75:T/ se pot introduce n 'ormular c0mpuri de editare 1casete
de te)t2G c0mpuri de tip pass'or%G >utoane de e)pediere i anulareG >utoane radio i casete de
;alidare.
Etic%eta 56A$<T8 are urm&toarele atri>uteH
tFpe - prin care se preci9ea9& tipul elementului.
na"e - permite ataarea unui nume 'iec&rui element al 'ormularului.
?alue - permite atri>uirea unei ;alori iniiale unui element al 'ormularului.
$erec%ea de atri>ute na"e0?alue 1numeO;aloare2 este deose>it de important& pentru >una
'uncionare a 'ormularului.
.iecare element introdus prin etic%eta 56A$<T8 repre9int& o ;aria>il&. 6n'ormaia introdus&
de utili9ator n c0mpul elementului respecti; repre9int& ;aloarea pe care o primete aceast&
;aria>il&. !in acest moti;G toate elementele introduse prin etic%eta 56A$<T8 tre>uie s& ai>& atri>uit
un nume. ,cest lucru este o>li+atoriu deoareceG n ca9 contrarG ;aria>ila repre9entat& de acel
element nu ;a a;ea un identi'icator.
//
In plusG este indicat s& atri>uii nume distincte di'eritelor elemente care 'ac parte din 'ormular.
,ltminteriG scriptul C@6 care prelucrea9& datele nu ;a ti s& 'ac& distincia ntre ;aria>ile a;0nd
acelai nume i ;alori di'erite.
,tri>utul tWpe poate a;ea urm&toarele ;aloriH
te)t - se 'olosete pentru a introduce un c0mp de editare pe o sin+ur& linie
passEord k se 'olosete pentru a insera un c0mp de editare n care caracterele introduse sunt
nlocuite cu asteriscuri 1l2
radio k 'olosit pentru a insera un ir de >utoane radio 1elemente care se 'olosesc pentru a
selecta dintr-o list& de opiuni una i numai una dintre ele2
c%ec?>o) k 'olosit pentru a introduce un ir de casete de ;alidare 1elemente care se 'olosesc
c0nd dintr-o list& de opiuni se poate ale+e mai mult de o sin+ur& ;ariant&2
su>mit k se 'olosete pentru a introduce un >uton de e)pediere
reset k se 'olosete pentru a introduce un >uton de anulare a in'ormaiilor introduse n
'ormular
>utton - se 'olosete pentru a introduce n 'ormular un >uton o>inuit
%idden - se 'olosete pentru a introduce n 'ormular un c0mp ascuns
.iecare dintre ;alorile atri>utului tWpe +enerea9& un anumit tip de element n cadrul
'ormularului.
E)emplul 13.1 creea9& un 'ormular 'oarte simplu care conine un c0mp de editare i un >uton de
e)pediere
(e"plul 10. 1

5HTML8
5HE,!8
5T6TLE8'ormulare 13.15OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8 Caseta de te)t si >uton de e)pediere5OH185H=8
5."=M actionKJmailtoHadresahWWW.comJ met%odKJpostJ8
6ntroduceti adresa d;s. de mailH
56A$<T tWpeKJte)tJ nameKJadresaJ ;alueKJadresa mailJ854=8
56A$<T tWpeKJsu>mitJ ;alueKJe)pedia9aJ8
5O."=M8
5O4"!#8
5OHTML8
!up& cum o>ser;aiG numele atri>uit c0mpului de editare este JadresaJ iar atri>utul ;alue a
primit ca ;aloare irul de caractere Jadresa mailJ. ,cest te)t ;a 'i a'iat n interiorul c0mpului de
editareG nainte ca utili9atorul s& nceap& introducerea in'ormaiilor. !ac& atri>utul ;alue nu era
pre9ent sau era iniiali9at cu strin+ul ;id 1 JJ 2G caseta de te)t ar 'i 'ost +oal&.
In cadrul 'ormularului este pre9ent i un >uton de e)pediereG inserat de asemenea prin
intermediul etic%etei 56A$<T8 a;0nd atri>utul tWpe setat cu ;aloarea Jsu>mitJ. ,a cum se o>ser;&
133
din 'i+ur&G pe >uton este a'iat te)tul Je)pedia9aJG deoarece pentru acest elementG atri>utului ;alue
i-a 'ost atri>uit& ca ;aloare te)tul respecti;.
Casete de tet
In E)emplul 13.2 am creat un 'ormular care conine trei casete de te)t 1c0mpuri de editare2 n
care utili9atorul este ru+at s& introduc& numeleG prenumele i adresa de mailG precum i o caset& de
tip pass'or%G care cere introducerea unei parole. ,a cum ;ei o>ser;a din .i+ura 11.2G o caset& de
tip pass'or% este asem&n&toare cu un c0mp de editareG sin+ura di'eren& 'iind aceea c& aici
caracterele nu sunt a'iate n clar ci sunt nlocuite cu asteriscuri.
In plusG 'ormularul conine un >uton de e)pediere i unul de anulare a datelor introduse.
(e"plul 10. 2

5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Casete de te)t5OH185H=8
6ntroduceti numeleH
56A$<T tWpeKJte)tJ nameKJnumeJ ;alueKJJ854=8
6ntroduceti prenumeleH
56A$<T tWpeKJte)tJ nameKJprenumeJ ;alueKJJ854=8
6ntroduceti adresa de mailH
56A$<T tWpeKJte)tJ nameKJmailJ ;alueKJJ854=8
6ntroduceti parolaH
56A$<T tWpeKJpassEordJ nameKJparolaJ854=8
56A$<T tWpeKJresetJ ;alueKJster+eJ8
5O."=M8
5O4"!#8
5OHTML8
$entru elementele de tip caset& de te)t i pass'or% sunt utile i atri>uteleH
"alen,tC k care sta>ilete num&rul ma)im de caractere care poate 'i introdus n c0mpul de
editare
si*e k care sta>ilete l&imea acestui c0mp.
!utoane radio
In E)emplul 13.3 am creat un 'ormular care conine un ir de >utoane radioG prin care se cere
p&rerea ;i9itatorului despre o pa+in& Fe>. !up& cum o>ser;aiG 'iecare element de tip >uton radio
are acelai nume i anume JopinieJ deoarece nu se poate selecta dec0t un sin+ur elementG ast'el
nc0t orice am>i+uitate este e)clus&.
.iecare >uton radio tre>uie s& ai>& o ;aloare. !in acest moti; pentru 'iecare >uton atri>utul
;alue a 'ost setat la o alt& ;aloare. ,le+erea uneia dintre opiuniG de e)emplu J>unaJG 'ace ca
;aria>ila JopinieJ s& primeasc& ;aloarea J>unaJ. $rin urmareG ser;erului i ;a 'i transmis& perec%ea
JopinieK>unaJ.
In plusG o>ser;ai pre9ena atri>utului cCecIedG care are rolul de a presta>ili o anumit&
opiuneG pe care ns& utili9atorul o poate sc%im>aG dac& dorete
(e"plul 10. 3
131
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ84utoane radio5OH185H=8
Ce parere a;eti despre aceasta pa+ina?54=8
56A$<T tWpeKJradioJ nameKJopinieJ ;alueKJ'oarte >unaJ c%ec?ed8.oarte >una54=8
56A$<T tWpeKJradioJ nameKJopinieJ ;alueKJ>unaJ84una54=8
56A$<T tWpeKJradioJ nameKJopinieJ ;alueKJdestul de >unaJ8!estul de >una54=8
56A$<T tWpeKJradioJ nameKJopinieJ ;alueKJproastaJ8$roasta54=8
56A$<T tWpeKJresetJ ;alueKJanulea9aJ8
5O."=M8
5O4"!#8
5OHTML8
Casete de validare
E)emplul 13.4 creea9& un ir de casete de ;alidareG care se deose>esc de >utoanele radio prin
'aptul c& se pot selecta mai multe opiuni dintre cele pre9entate
(e"plul 10. 4
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Casete de ;alidare5OH185H=8
Care sunt %o>>W-urile dumnea;oastra?54=8
56A$<T tWpeKJc%ec?>o)J nameKJ%o>>WJ ;alueKJsportJ8:port54=8
56A$<T tWpeKJc%ec?>o)J nameKJ%o>>WJ ;alueKJ'ilmJ8.ilm54=8
56A$<T tWpeKJc%ec?>o)J nameKJ%o>>WJ ;alueKJlecturaJ8Lectura54=8
56A$<T tWpeKJc%ec?>o)J nameKJ%o>>WJ ;alueKJCocuriJ8Docuri pe computer54=8
56A$<T tWpeKJc%ec?>o)J nameKJ%o>>WJ ;alueKJinternetJ8:ur'in+ pe net54=8
56A$<T tWpeKJc%ec?>o)J nameKJ%o>>WJ ;alueKJalpinismJ8,lpinism54=8
56A$<T tWpeKJsu>mitJ nameKJsu>mitJ ;alueKJe)pedia9aJ8
5O."=M8
5O4"!#8
5OHTML8
" caset& de ;alidare are dou& st&riH marcat& sau nemarcat& 1on sau o##2. Ca i la >utoanele
radioG atri>utul name are n e)emplul considerat o sin+ur& ;aloareG J%o>>WJG iar atri>utul ;alue areG
pentru 'iecare caset&G ;alori distincte. :er;erului i sunt transmise numai acele ;alori care au 'ost
marcate n casetele de ;alidare corespun9&toare.
Ti n ca9ul casetelor de ;alidare este posi>il& pre9ena atri>utului cCecIed care preselectea9& o
anumit& opiune sau mai multe.
!utoane
132
In cadrul unui 'ormular se pot introduce i >utoane o>inuite 1altele dec0t >utoanele Su!mit i
2eset2. =olul acestora este de a iniia anumite aciuni n momentul c0nd utili9atorul 'ace clic? cu
mouse-ul pe ele. Lim>aCul HTML nu o'er& instrumentele necesare pentru a speci'ica ce anume se
nt0mpl& c0nd >utonul este ap&sat. $entru aceasta este necesar s& includei n documentul HTML
scripturi Da;a:cript care s& trate9e aceste e;enimente.
Ca i >utoanele Su!mit i 2esetG >utoanele o>inuite sunt incluse n 'ormular cu aCutorul
etic%etei 56A$<T8 a;0nd atri>utul tWpe setat la ;aloarea >uttonH
56A$<T tWpeKJ>uttonJ nameKJ>utonJ ;alueKJte)tJ8.
Te)tul speci'icat ca ;aloare a atri>utului ;alue ;a 'i a'iat pe >uton.
4utoanele pot 'i 'olosite pentru a ;alida in'ormaiile introduse n 'ormularG pentru a desc%ide
documente i a iniia di;erse alte aciuni din partea >roEserului.
C"mpuri ascunse #$idden fields%
C0mpurile ascunse sunt elemente care 'ac parte dintr-un 'ormular dar nu sunt ;i9i>ile n
cadrul pa+inii. $rin intermediul acestora se pot include n 'ormular in'ormaii care nu pot 'i alterate
de >roEser sau de utili9ator. 6ntroducerea unui ast'el de c0mp n 'ormular se 'ace prin etic%eta
56A$<T tWpeKJ%iddenJ8.
Ca i n ca9ul celorlalte elemente ale 'ormularului este necesar& pre9ena atri>utelor name i
;alueG ca n e)emplul urm&torH
56A$<T tWpeKJ%iddenJ nameKJascunsJ ;alueKJmodi'icaJ8
C0mpurile ascunse pot ser;i la o +estionare mai >un& a datelor transmise la ser;er. !e
e)empluG s& presupunem c& a;em un 'ormular care cere utili9atorului c0te;a in'ormaii iniialeH
numele i adresa. $e >a9a acestoraG aplicaia de pe ser;er iniia9& a'iarea unui nou 'ormular care
solicit& introducerea unor in'ormaii mai detaliate.
!eoarece este plictisitor pentru ;i9itator s& reia introducerea in'ormaiilor iniialeG scriptul
poate 'i con'i+urat s& depun& primele in'ormaii n c0mpurile ascunse ale celui de-al doilea
'ormular. In aceast& situaie este util& 'olosirea c0mpurilor ascunse deoarece ser;erul procesea9& un
sin+ur 'ormular la un moment dat i nu are cum s& tie c& cel de-al doilea 'ormular a 'ost completat
de aceeai persoan&.
4. Etic%etele 5:ELECT8 i 5"$T6"A8
Cu aCutorul etic%etei .&(L(CT/ .0&(L(CT/ se poate introduce ntr-un 'ormular un meniu
derulant. Crearea unui meniu pentru ;i9itatorii pa+inii i aCut& la selectarea unor opiuni dintr-o list&
prede'init&.
.iecare opiune care 'ace parte din >locul 5:ELECT8 se introduce prin etic%eta .45T!47/.
In E)emplul 13. este construit un meniu derulantG din care ;i9itatorul poate selecta opiunea
dorit&. ,tri>utul na"e are acelai rol ca i n etic%eta 56A$<T8. !ac& ;i9itatorul selectea9& din
meniu 9odia TaurG de e)empluG la ap&sarea >utonului de e)pediereG ser;erului i este transmis&
perec%eaH J9odiaKtaurJ. ,tri>utul si*e este setat la ;aloarea J1J. :etarea atri>utului si9e la ;aloarea
J1J creea9& o un meniu derulant cu o sin+ur& opiune ;i9i>il& iniial aa cum se poate o>ser;a din
.i+ura 13..
(e"plul 10. 5
133
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Meniu derulant5OH185H=8
Care este 9odia dumnea;oastra?54=8
5:ELECT nameKJ9odiaJ si9eKJ1J8
5"$T6"A84er>ec
5"$T6"A8Taur
5"$T6"A8@emeni
5"$T6"A8=ac
5"$T6"A8Leu
5"$T6"A8.ecioara
5"$T6"A84alanta
5"$T6"A8:corpion
5"$T6"A8:a+etator
5"$T6"A8Capricorn
5"$T6"A87arsator
5"$T6"A8$esti
5O:ELECT8
5O."=M8
5O4"!#8
5OHTML8
!ac& atri>utul si9e este setat la o ;aloare mai mare dec0t 1 meniul ;a a'ia un num&r de
opiuni e+al cu aceast& ;aloare i ;a conine o >ar& de derulare pentru a 'ace accesi>ile i celelalte
opiuni.
. Etic%eta 5TEBT,=E,8
Cu aCutorul etic%etei .T(>T18(1/ .0T(>T18(1/ putei insera n pa+in& o caset& de te)t
multi-linie care permite ;i9itatorului s& introduc& un te)t mai lun+G care se poate ntinde pe mai
multe linii. ,ceast& etic%et& se 'olosete atunci c0nd dorim s& cerem ;i9itatorului o opinie despre un
anumit su>iectG care necesit& introducerea unui te)t mai lun+ dec0t o sin+ur& linie 1acest element se
mai numete i caset& de comentarii2. 5TEBT,=E,8 este o etic%et& containerG deci necesit&
etic%eta de nc%idere 5OTEBT,=E,8.
,tri>utele roAs i cols sta>ilesc num&rul de liniiG respecti; de coloane re9er;ate pentru introducerea
te)tului.
(e"plul 10. 6
5HTML8
5HE,!8
5T6TLE8'ormulare 13.(5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Caseta de comentarii5OH185H=8
Care este opinia dumnea;oastra despre acest 'ilm?54=8
5TEBT,=E, nameKJcomentariuJ roEsKJ13J colsKJ43J85OTEBT,=E,854=8
134
5O."=M8
5O4"!#8
5OHTML8
Toate elementele pre9entate pot 'i reunite ntr-un sin+ur 'ormular sau putei crea 'ormulare
di'eriteG n 'uncie de in'ormaiile pe care dorii s& le o>inei de la ;i9itatorii pa+inii.
!ac& dorii s& introducei n pa+in& mai multe 'ormulareG sau elemente de tipuri di'erite n
cadrul aceluiai 'ormularG tre>uie s& a;ei n ;edere aspectele care in de alinierea acestora. "
posi>ilitate de a alinia elementele coninute ntr-un 'ormular este 'olosirea ta>elelor.
E)emplul 13.* conine elemente de mai multe tipuri ncadrate ntr-un 'ormular unic. $entru
alinierea unora dintre ele am 'olosit un ta>el.
(e"plul 10. 7
5HTML8
5HE,!8
5T6TLE8'ormulare 13.*5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,linierea elementelor5OH185H=8
5H38Comandati $i99a5OH385$8
5$8Cate pi99a doriti?
56A$<T nameKJnrpi99aJ ;alueKJ3J si9eK3 ma)len+t%K385$8
56A$<T tWpeKJradioJ nameKJmarimeJ ;alueKJmareJ c%ec?ed8Mare54=8
56A$<T tWpeKJradioJ nameKJmarimeJ ;alueKJmedieJ8Medie54=8
56A$<T tWpeKJradioJ nameKJmarimeJ ;alueKJnormalaJ8Aormala
5$8Toppin+-uri5$8
56A$<T tWpeKJc%ec?>o)J nameKJtoppin+J ;alueKJsalamJ8:alam54=8
56A$<T tWpeKJc%ec?>o)J nameKJtoppin+J ;alueKJcarnatiJ8Carnati54=8
56A$<T tWpeKJc%ec?>o)J nameKJtoppin+J ;alueKJsuncaJ8:unca54=8
56A$<T tWpeKJc%ec?>o)J nameKJtoppin+J ;alueKJciuperciJ8Ciuperci54=8
56A$<T tWpeKJc%ec?>o)J nameKJtoppin+J ;alueKJceapaJ8Ceapa54=8
56A$<T tWpeKJc%ec?>o)J nameKJtoppin+J ;alueKJmaslineJ8Masline
5$8
5T,4LE Eidt%KJ(3_J8
5T=8
5T! Eidt%KJ23_J8Aumele
5T!856A$<T tWpeKJte)tJ nameKJnumeJ8
5T=8
5T! Eidt%KJ23_J8Tele'onul
5T!856A$<T tWpeKJte)tJ nameKJtele'onJ8
5T=8
5T! Eidt%KJ23_J8,dresa
5T!85TEBT,=E, nameKJadresaJ roEsK( colsK385OTEBT,=E,8
5T=8
5T! Eidt%KJ23_J8Aum&rul cartii de credit
5T!856A$<T tWpeKJpassEordJ nameKJcreditcardJ si9eK238
5OT,4LE8
5$8
5CEATE=8
56A$<T tWpeKJsu>mitJ ;alueKJTrimite comandaJ8
13
5OCEATE=8
5O."=M8
5O4"!#8
5OHTML8
(. 7alidarea datelor
<nul dintre aspectele importante pe care tre>uie s& le a;ei n ;edere atunci c0nd 'olosii
'ormulare n pa+inile dumnea;oastr& este ;alidarea datelor introduse de ;i9itatorii lor. Lim>aCul
HTML o'er& relati; puine instrumente pentru ndeplinirea acestei sarcini. TotuiG a;ei la dispo9iie
c0te;a posi>ilit&i.
.olosii atri>utul ma)len+t% atunci c0nd introducei un c0mp de editareG pentru a mpiedica
;i9itatorul s& introduc& un num&r eronat de caractere. !e e)empluG dac& cerei introducerea ntr-o
caset& de te)t a codului numeric personalG acea caset& nu tre>uie s& permit& introducerea a mai mult
de 13 caractereG un c0mp de editare care cere introducerea codului potal nu tre>uie s& permit&
introducerea a mai mult de 4 caractereG etc.
$entru a ;& asi+ura c& ;i9itatorul introduce date corecte ntr-un c0mp de editare 1de e)emplu o
adres& de mail ;alid& tre>uie s& conin& o>li+atoriu caracterul JhJ2 nu e)ist& instrumente HTML.
$entru a reali9a ast'el de sarcini sunt necesare scripturi Da;a:cript. In capitolul Sa?a&cript ;ei +&si
scripuri utile care 'ac posi>ile ;alid&rile datelorG nc& din momentul introducerii lor.
.olosii de c0te ori este posi>il >utoanele radioG casetele de ;alidare i meniurileG pentru a
simpli'ica procesul de introducere a datelor. .ii c0t mai e)plicitG asi+urai indicaiile necesare
pentru completarea 'ormularelorG preci90ndG unde este ca9ulG dac& pot 'i selectate mai multe opiuni
sau numai una sin+ur&.
1tenie#
,si+urai-;& c& scriptul care prelucrea9& in'ormaiile din 'ormular are 'acilit&i de +estionare
a erorilor.
!ac& este semnalat& o eroareG 'urni9ai ;i9itatorului un mesaC de eroare e)plicit iG e;entualG
c0te;a corecii posi>ile.
<na dintre cele mai 'rustrante situaii este ca dup& completarea unui 'ormular comple)G la
apariia unei eroriG ;i9itatorul s& 'ie ne;oit s& reia completarea inte+ral& a 'ormularului. E;itai acest
lucru utili90nd scripturi care returnea9& utili9atorului 'ormularul completatG a;0nd c0mpurile +reite
marcate pentru corectare.
Au uitai un am&nunt 'oarte importantH in'ormaiile introduse de ;i9itatori n 'ormulare ;& sunt
necesare dumnea;oastr&G pentru a m>un&t&i e'iciena i calitatea site-ului sau c%iar pentru a derula
a'aceri prin intermediul s&u. !e aceea corectitudinea acestor date este esenial&.
.acei n aa 'el nc0t ;i9itatorii site-ului dumnea;oastr& s& complete9e uor i cu pl&cere
'ormularele pre9ente n pa+ini.
13(
Capitolul 11
6oi de stiluri +C&&-
6oile de stiluri HTML 1/asca%ing Style Sheets2 repre9int& o ino;aie n de9;oltarea Forld
Fide Fe>G n ciuda 'aptului c& ideea +rup&rii elementelor de 'ormatare a documentelor a ap&rut
ce;a mai demult. ,plicarea stilurilor repre9int& o e)tindere important& a posi>ilit&ilor de desi+nG
e;it0nd utili9area de 'iiere +ra'ice mari ce determin& ncetinirea nc&rc&rii pa+inilor i manipularea
lor +reoaie.
.olosind stilurile HTML putei 'i si+ur c& cititorii ;or ;edea te)tul din pa+in& e)act aa cum a
'ost el proiectat. Te)tul i propriet&ile acestuiaG care au 'ost iniial controlate de >roEsereG se
rentorc la autorG acolo unde le esteG de 'aptG locul.
1. Ce este un stil?
<n stil repre9int& o colecie de atri>ute ale te)tului i ale modului de aranCare a documentului
care pot 'i aplicate n mod selecti; unui document sau doar unei p&ri din acesta. ,ceste atri>ute pot
'i tipul de 'ontG m&rimea i +rosimea acestuiaG mar+inileG para+ra'ele i orice altce;a ce poate
in'luena aspectul te)tului n pa+in&. @ruparea lor n stiluri permite autorului s& aplice aceeai
colecie de atri>ute la di'erite p&ri ale unui document.
:tilurile aplicate unui document HTML au multe a;antaCe pentru creatorii de pa+ini Fe>H
13*
"'er& control crescut asupra aspectului i plas&rii te)tului n pa+in&
=educ Jn;&lm&ealaJ produs& de multitudinea de desc%ideri i nc%ideri ale etic%etelor care
descriu elementele indi;iduale ale te)tului
$rocesul de modi'icare a di'eritelor elemente din pa+in& se simpli'ic&.
!e e)empluG dac& dorii ca titlurile dumnea;oastr& s& ai>& un alt tip de 'ont dec0t te)tul
o>inuitG s& 'ie de dimensiune mai mare i scrise cu caractere n+roate i italiceG ar tre>ui s& de'inii
aceste atri>ute de 'ormatare pentru 'iecare titlu n parte. .olosind stilurile nu a;ei ne;oie dec0t s&
creai o sin+ur& de'iniie de stil care s& conin& atri>utele de 'ormatare doriteG pe care s& o aplicai la
'iecare titlu.
In plusG 'olosirea stilurilor reduce considera>il e'ortul depus atunci c0nd dorii s& aducei modi'ic&ri
aspectului i aranC&rii elementelor din pa+inile dumnea;oastr&. In loc s& parcur+ei 'iecare
document n parte i s& 'acei modi'ic&ri asupra 'iec&rui elementG nu mai este necesar s& operai
modi'ic&ri dec0t asupra 'oii de stiluri care controlea9& aceste elemente.
2. Tipuri de 'oi de stiluri
:tilurile HTML pot 'i aplicate ntr-o pa+in& Fe> n trei moduriH
Vncapsulate 1em!e%%e%2H stilurile sunt incluse n documentul asupra c&ruia se aplic&G i anume
n seciunea 5HE,!8 a documentului. $rin includerea lor n antetul documentuluiG stilurile r&m0n
in;i9i>ile pentru ;i9itatorul pa+inii.
Le,ate 1linke%2H stilurile sunt de'inite n 'iiere separate de documentul HTML. !ocumentul
'ace apel la 'oaia de stiluri prin intermediul etic%etei 5L6AL8. .olosirea acestui tip de stiluri 'ace
posi>il& utili9area aceleiai 'oi de stil pentru documente di'erite. !e asemeneaG este posi>il&
aplicarea mai multor 'oi de stiluri pentru acelai document.
!n9lineH stilurile sunt incluse ca atri>ute n cadrul etic%etelor HTML din document. ,ceasta
nseamn& c& ele ;or a'ecta doar elementul asupra c&ruia sunt aplicate. Este o modalitate mai puin
utili9at& deoarece contra9ice principiul +eneral al stilurilorG acela de a simpli'ica i de a 'ace mai
li9i>il codul documentului HTML.
:inta)a de'iniiilor de stil esteG n +eneralG aceeaiG indi'erent de modul cum sunt ele aplicate.
Cele trei tipuri de stiluri pot 'iG de asemeneaG com>inate n cadrul aceluiai document. =elaiile
dintre di'eritele tipuri de stiluri reali9ea9& e'ectul de cascad& care d& numele acestei metode.
&tiluri 'ncapsulate
Crearea unui ast'el de stil se reali9ea9& 'olosind etic%eta
.&T%L(/ .0&T%L(/. Etic%eta 5:T#LE8 este o etic%et& containerG deci este o>li+atorie
pre9ena etic%etei de nc%idere 5O:T#LE8. Intre cele dou& etic%ete se introduc de'iniiile de stil.
Etic%eta de stil este plasat& n antetul documentului adic& n seciunea 5HE,!8.
In E)emplul 11.1 este pre9entat& o de'iniie de stil care reali9ea9& a'iarea tuturor titlurilor de
ni;el 1 1adic& a te)telor cuprinse ntre etic%etele 5H18 5OH182 cu caractere >old i de culoare ;erde.
In plusG te)tele incluse ntre etic%etele 5$8 5O$8 ;or 'i a'iate cu 'onturi arialG de m&rime 2 i
culoare ;iolet.
!e asemeneaG este creat un stil JnormalJ care poate 'i aplicat asupra oric&rui te)t. $rin intermediul
s&uG te)tul este a'iat cu caractere mai mari i de culoare oranC.
(e"plul 11. 1
13-
5HTML8
5HE,!8
5T6TLE8:tiluri 11.15OT6TLE8
5:T#LE8
5[--
H1 mcolorH Q33-333R 'ont-Eei+%tH >oldn
$ m'ont-'amilWH ,rialR colorH Q-333-3R 'ont-si9eH 14p)n
.normal m'ont-si9eH lar+eR colorH Q..-333n
--8
5O:T#LE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8:tiluri5OH185H=8
5$8Te)tul din acest para+ra' este 'ormatat cu aCutorul stilurilor5O$8
,cesta este un te)t ne'ormatat
5H18Titlu5OH18
5:$,A classKJnormalJ8,cesta este stilul normal5O:$,A8
5O4"!#8
5OHTML8
">ser;ai c& de'iniia stilurilor a 'ost plasat& ntre etic%etele HTML de comentariuG n aceeai
manier& ca i la scripturile Da;a:cript. Moti;ul este acelaiH dac& >roEserul cu care este ;i9uali9at&
pa+ina nu suport& 'oi de stiluriG se e;it& ast'el a'iarea n pa+in& a codului HTML.
&tiluri legate ( foi de stiluri eterne
:tilurile incluse n pa+in& se aplic& elementelor pre9ente n respecti;ul document HTMLG
reduc0nd dimensiunea codului i e'ortul de a de'ini 'iecare element n parte. ,ceast& idee se poate
e)tinde la ni;elul mai multor documente care pot >ene'iciaG toateG de aceleai stiluriG reunite ntr-o
'oaie de stiluri e)tern&.
,;antaCul 'olosirii 'oilor de stiluri e)terne este du>lu. $e de-o parte ele se pot aplica la ni;elul
mai multor documente HTMLG reali90nd ast'el o le+&tur& de stil ntre eleG lucru deose>it de util la
construirea unui site. $e de alt& parteG acelai document poate 'olosi 'oi de stiluri di'eriteG o'erind
;i9itatorului posi>ilitatea de a opta pentru unul sau altul dintre eleG n 'uncie de propriile pre'erine.
" 'oaie de stiluri este un 'iier te)t care conine re+ulile de stil de'inite n aceeai manier&
'olosit& la stilurile incluse n pa+in&. "dat& creat& o 'oaie de stiluriG ea tre>uie sal;at& cu e)tensia
.css. .oile de stiluri pot 'i stocate ntr-un 'older separat sau n acelai 'older n care sunt plasate i
documentele HTML.
,pelul 'oilor de stiluri se poate reali9a n dou& moduriH
'olosind etic%eta .L!7</
'olosind 'uncia Wi"port
Cel mai 'olosit mod de apelare a unei 'oi de stiluri este cu aCutorul etic%etei 5L6AL8 con'orm
urm&toarei sinta)eH
5L6AL relKJstWles%eetJ %re'KJnume\'oaie\stiluri.cssJ8
In E)emplul 11.2 este construit& o 'oaie de stiluri e)tern& care ;a 'i apelat& cu aCutorul
etic%etei 5L6AL8. :al;ati 'oaia de stiluri cu numele stiluri,.css
13/
(e"plul 11. 2
4"!#
m>ac?+round-colorH QCC..CCR
'ont-'amilWH ,rialG sans-seri'R
colorH Q3333((R
paddin+H 3p)G *3p)n
,Hlin? mcolorH QCC//33n
,H;isited mcolorH Q((3333n
,H%o;er mcolorH Q..CC33n
,Hacti;e mcolorH Q..3333n
H1 mcolorH Q//((33R
>ac?+round-colorH Q....CCn
!ocumentul HTML care urmea9& apelea9& 'oaia de stiluri de mai sus este pre9entat n
E)emplul 11.3. !up& cum o>ser;aiG 'oaia stiluri,.css a 'ost apelat& n antetul documentuluiG prin
intermediul etic%etei 5L6AL8 cu atri>utul relKJstWles%eetJ. ,tri>utul %re' al etic%etei are ca ;aloare
numele 1i adresa relati;&G dac& este necesar2 al 'oii de stiluri apelate. In documentul HTML am
inclus i o le+&tur&G pentru a e)empli'ica modul n care 'oaia de stiluri sc%im>& culorile le+&turii.
,tri>utul Co?er se re'er& la proprietatea ca le+&tura s& i sc%im>e culoarea la trecerea cu mouse-ul
peste eaG '&r& a 'ace clic?.
(e"plul 11. 3
5HTML8
5HE,!8
5L6AL relKJstWles%eetJ %re'KJstiluri2.cssJ8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8.oi de stiluri e)terne5OH18
,cest e)emplu ilustrea9a modul in care este inclusa in pa+ina o 'oaie de stiluri e)terna
5$8Mai multe e)emple in 5, %re'KJane)a1.%tmlJ8ane)a25O,8
5O4"!#8
5OHTML8
&tiluri in)line
:pre deose>ire de stilurile ncapsulate i de 'oile de stiluri e)terneG stilurile in-line 'ac parte
c%iar din corpul documentului HTML. Ele se aplic& prin 'olosirea atri>utului stFle n asociere cu
etic%etele HTML standard. =eineiG deciG c& stWle poate 'i at0t etic%et& n sine c0t i atri>ut al altor
etic%ete.
!e'iniiile de stil in-line se aplic& numai asupra elementelor incluse ntre etic%etele care au
asociat atri>utul stWle. !in acest moti;G dac& dorim s& repet&m n alt loc din cuprinsul documentului
aceleai de'iniii de stilG ele ;or tre>ui repetateG nc&rc0nd ast'el documentul HTML. TotuiG
utilitatea stilurilor in-line este aceea c& 'iind de'inite c%iar n cuprinsul documentuluiG de'iniiile lor
sunt mai puternice dec0t cele din stilurile ncapsulate sau e)terne. !ac&G de e)empluG am creat o
'oaie de stiluri pe care dorim s& o aplic&m unui documentG i dac& n cadrul acestui document a;em
un anumit element particular c&ruia dorim s&-i d&m un alt aspect dec0t cel pre;&9ut n 'oaia e)tern&G
putem aplica acelui element un stil in-line care se ;a re'eri strict la el.
6at& un e)emplu de aplicare a unui stil in-line asociat etic%etei 5$8H
113
5$ stWleKJcolorH redR 'ont-'amilWH arialR 'ont-Eei+%tH >oldJ8Te)tul din acest para+ra' este scris
cu 'onturi arialG in+rosateG de culoare rosu5O$8
">ser;ai c& la stilurile in-line de'iniiile de stil sunt incluse ntre apostro'uri i nu ntre
acoladeG ca la celelalte tipuri de stiluri.
,tunci c0nd lucrai cu documente HTML deCa e)istente c&rora dorii s& le aplicai stiluri in-lineG
este recomandat s& 'olosii etic%etele .2!=/ i .&517/. ,cestea ;& permit s& aplicai stilurile '&r&
a a'ecta codul HTML deCa e)istent sau aspectul pa+inii n >roEserele care nu suport& stiluri.
E)emplul 11.4 ilustrea9& 'olosirea etic%etei 5:$,A8
(e"plul 11. 4
5HTML8
5HE,!8
5OHE,!8
54"!#8
5H1 stWleKJcolorHredR'ont-'amWlWHarialJ8:tiluri in-line5OH185H=8
5$8Te)tul din acest para+ra' este di;i9at 'olosind etic%eta span5O$8
5:$,A stWleKJ'ont-'amilWHarialR colorH >lueJ8Te)t scris cu al>astru si 'onturi
arial5O:$,A854=8
5:$,A stWleKJ'ont-'amilWH courierR si9eH mediumR colorH+reenJ8Te)t scris cu ;erde si 'onturi
courier medium5O:$,A8
5O4"!#8
5OHTML8
La 'el ca i la capitolele anterioareG nu ;om intra n am&nunte pri;ind pro+ramarea cu aCutorul
stilurilor. !ei stilurile sunt intuiti;e i uor de aplicatG totui o a>ordare e)%austi;& a acestui su>iect
dep&ete o>iectul acestei c&ri. $re9ent&mG totuiG n continuareG c0te;a e)emple care ;& pot 'i utile
n pa+inile dumnea;oastr&.
3. E'ecte o>inute cu aCutorul stilurilor
Aspectul tetului
6at& c0te;a atri>ute care se pot asocia cu di;erse etic%ete HTML permi0nd sc%im>area aspectului
te)tului.
6at& c0te;a atri>ute care se pot asocia cu di;erse etic%ete HTML permi0nd sc%im>area
aspectului te)tului.
Ta)el 11. 1
1tri)utul (;ectul
color :etea9& culoarea te)tului.
>ac?+round-
color
:etea9& culoarea 'undalului unui o>iect.
'ont-'amilW :etea9& tipul de 'ont.
'ont-si9e :etea9& dimensiunea 'onturilor. 7alorile pot 'i
111
e)primate n pi)eli 1p)2 sau puncte 1pt2.
'ont-Eei+%t
:etea9& +rosimea 'onturilor. 7alorile posi>ile
pot 'iH normalG >oldG >olderG li+%ter.
'ont-stWle
:etea9& stilul de 'ont. 7alorile pot 'iH normalG
italicG o>liNue.
letter-spacin+
:etea9& spaierea literelor. 7alorile pot 'iH
pi)eli 1p)2G puncte 1pt2G inci 1in2G centimetri 1cm2 sau
milimetri 1mm2.
Eord-spacin+
:etea9& spaierea cu;intelor. 7alorile pot 'iH
pi)eli 1p)2G puncte 1pt2G inci 1in2G centimetri 1cm2 sau
milimetri.
te)t-trans'orm
7alorile posi>ile pot 'iH capitali9eG uppercaseG
loEercaseG none.
te)t-decoration
7alorile pot 'iH underlineG o;erlineG line-
t%rou+%G >lin?.
%o;er
:c%im>& aspectul unei le+&turi c0nd mouse-ul
se a'l& deasupra ei.
lin? !e'inete aspectul unei le+&turi.
acti;e !e'inete aspectul le+&turii acti;e.
;isited !e'inete aspectul le+&turii ;i9itate.
'irst-letter
:c%im>& aspectul primei litere dintr-un
cu;0nt.
'irst-line :c%im>& aspectul primei linii dintr-un te)t.
In e)emplele urm&toare sunt ilustrate c0te;a din aceste atri>ute.
E)emplul 11. include o de'iniie de stil n care sunt de'inii aa numiii selectori de clasGG n
acest e)emplu 4.titlu i 4.su>titlu. In corpul documentului apelul acestora a 'ost '&cut prin
construciaH
54 classKJtitluJ8Titlu5O48
,tri>utul class care se poate asocia etic%etei 548 ca n acest e)emplu sau altor etic%ete de
'ormatare a te)tului are ca ;aloare un identi'icator care a 'ost de'init n preala>il n cadrul de'iniiei
de stil.
(e"plul 11. 5
5HTML8
5HE,!8
5:T#LE8
5[--
4.titlu m'ont-si9eH 23 ptR 'ont-Eei+%tH >olderR letter-spacin+Hp)n
4.su>titlu m'ontOsi9eH 1 ptR letter-spacin+H p)n
--8
5O:T#LE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8,spectul te)tului5OH185H=8
112
5$8
Te)t normal54=8
548Te)t in+rosat5O4854=8
54 classKJtitluJ8Titlu5O4854=8
54 classKJsu>titluJ8:u>titlu5O48
5O$8
5O4"!#8
5OHTML8
E)emplul 11.( 'olosete stiluri la 'ormatarea titlului de ni;el H1 i a te)tului din cadrul
para+ra'uluiG 'olosind atri>utul 'irst-letter care sc%im>& aspectul primei litere din para+ra'. Ti n
acest e)emplu a 'ost 'olosit un selector de clas& i anume $.primalit.
(e"plul 11. 6
5HTML8
5HE,!8
5T6TLE8:tiluri 11.(5OT6TLE8
5:T#LE8
5[--
$.primalitH'irst-letter m'ont-Eei+%tH >olderR 'ont-stWleH italicR 'ont-si9eH3 ptR colorHredn
H1 mcolorH>lueR letter-spacin+H p)n
--8
5O:T#LE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8E'ecte asupra te)tului5OH185H=8
5$ classKJprimalitJ8Te)tul din acest para+ra' 'oloseste atri>utul 'irst-letter5O$8
5O4"!#8
5OHTML8
!are de derulare colorate
<nul dintre e'ectele des nt0lnite n pa+inile Fe> este pre9ena >arelor de derulare colorate.
,cest e'ect se poateG de asemeneaG o>ine prin aplicarea stilurilor. $entru a de'ini culoarea >arelor
de derulare se 'olosesc c0te;a atri>uteG pe care le de'inim mai Cos.
Ta)el 11. 2
1tri)utul (;ectul
scroll>ar->ase-color !e'inete culoarea de >a9& a >areiG a
>utoanelor cu s&+ei i a 'undalului pe care se
deplasea9& >ara. !ac& dorii s& reali9ai rapid
o >ar& de derulare nu este necesar s& setai
dec0t acest atri>ut i pe cel urm&tor. :etarea
celorlalte atri>ute se suprapune i anulea9&
e'ectele acestuia.
scroll>ar-arroE-
color
!e'inete culoarea s&+eilor de pe >ar&
scroll>ar-'ace-color !e'inete culoarea supra'eei >arei de
derulare i a >utoanelor pe care sunt s&+eile.
!e asemeneaG sta>ilete culoarea 'undalului
pe care se deplasea9& >ara.
113
scroll>ar-%i+%li+%t-
color
!e'inete culoarea p&rilor JiluminateJ
ale >arei i >utoanelor cu s&+ei 1mar+inile de
sus i din st0n+a2 i a 'undalului pe care se
deplasea9& >ara
scroll>ar-
dar?s%adoE-color
!e'inete culoarea p&rilor JntunecateJ
ale >arei i >utoanelor cu s&+ei 1mar+inile de
Cos i din dreapta2
scroll>ar-s%adoE-
color
!e'inete culoarea mar+inilor de Cos i
din dreapta ale >arei i >utoanelor cu s&+ei
scroll>ar-3dli+%t-
color
!e'inete culoarea mar+inilor de sus i
din st0n+a ale >arei i >utoanelor cu s&+ei
scroll>ar-trac?-color !e'inete culoarea 'undalului >arei
!up& cum o>ser;aiG unele dintre aceste atri>ute i suprapun e'ectele. E)ist& anumite re+uli
care sta>ilesc priorit&ile atri>utelor pe care nu le ;om a>orda aici. Ca ncep&torG este recomandat s&
nu 'olosii atri>ute care se suprapun pentru a nu o>ine re9ultate necon'orme cu inteniile
dumnea;oastr&.
E)emplul urm&tor ilustrea9& modul de construire a >arelor de derulare colorate.
In E)emplul 11.* am construit o 'oaie de stiluri e)tern& sal;at& su> numele stiluri?.css.
(e"plul 11. 7
4"!#
m
scroll>ar-'ace-colorH>lueR
scroll>ar-arroE-colorHWelloER
scroll>ar-s%adoE-colorHredR
scroll>ar-3dli+%t-colorHWelloER
scroll>ar-trac?-colorHcWanR
n
!ocumentul HTML care apelea9& 'oaia de stiluri este construit n E)emplul 14.-.
(e"plul 11. 8
5HTML8
5HE,!8
5T6TLE8:tiluri 11.-5OT6TLE8
5L6AL relKJstWles%eetJ %re'KJstiluri*.cssJ8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ84are de derulare colorate5OH18
a54=8a54=8a54=8a54=8a54=8a54=8a54=8
a54=8a54=8a54=8a54=8a54=8a54=8a54=8
a54=8a54=8a54=8a54=8a54=8a54=8a54=8
5O4"!#8
5OHTML8
114
!esi+urG culorile pe care le ale+ei pentru >ara de derulare tre>uie selectate cu +riC&G ast'el
nc0t s& se armoni9e9e cu restul pa+inii. .olosirea unei 'oi de stiluri e)terne este util& deoarece
putei sta>ili ast'el culoarea >arei pentru toate pa+inile site-ului dumnea;oastr&.
4roEserele Aetscape nu suport& sc%im>area culorilor >arei de derulare.
*ormulare colorate
E)emplul care urmea9& 1E)emplul 11./2 'olosete stiluri in-line pentru a crea 'ormulare
colorate care pot da pa+inii un aspect mai atracti;. Ca i la >arele de derulareG culorile 'ormularelor
tre>uie alese cu +riC& pentru a nu da pa+inii un aspect nc&rcat i lipsit de >un-+ust.
(e"plul 11. 9
5HTML8
5HE,!8
5T6TLE8:tiluri 11./5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8.ormulare colorate5OH185H=8
5."=M8
56A$<T nameKJte)tJ stWleKJ>ac?+round-colorH Q33CC..R colorH Q......R 'ont-Eei+%tH
>oldJ ;alueKJ:alut[J8
5$8
5TEBT,=E, roEsKJJ colsKJ23J stWleKJcolorH Q33((CCR >ac?+round-colorH QCCCCCCR
scroll>ar->ase-colorHredRJ8Care sunt impresiile tale?5OTEBT,=E,8
5$8
56A$<T tWpeKJsu>mitJ ;alueKJtrimiteJ stWleKJ>ac?+round-colorH Q33((CCJ8
5O."=M8
5O4"!#8
5OHTML8
7i9uali9ate n Aetscape 'ormularele din e)emplul de mai sus ;or a;ea aspectul normalG necolorat.
Capitolul 12
Sa?a&cript
1. Ce este Da;a:cript?
Da;a:cript este un li")aX de pro,ra"are orientat pe o>iecteG care ;& permite s& o'erii
pa+inilor dumnea;oastr& un caracter mai dinamic i interacti;. !ac& ai parcurs prima parte a c&rii
i a;ei cunotine minime de pro+ramareG nu ;ei a;ea di'icult&i n nele+erea modului n care
'uncionea9& acest lim>aC.
1tenie#
Da;a:cript nu este acelai lucru cu lim>aCul Da;a. !e 'aptG dei numele sunt asem&n&toareG sunt
dou& lim>aCe 'oarte di'erite. :pre deose>ire de Da;aG care este un lim>aC orientat pe o>iecteG
comple)G asem&n&tor cu lim>aCul C]]G Da;a:cript este mult mai simplu i mai uor de 'olosit. In
timp ce Da;a este un lim>aC pentru pro+ramatoriG Da;a:cript este destinat nepro'esionitilor care
doresc s& m>un&t&easc& aspectul i 'uncionalitatea pa+inilor de Fe>.
Da;a:cript a 'ost de9;oltat de Aetscape Corporation pentru a 'i utili9at n >roEserul Aetscape
Aa;i+ator. <n script Da;a:cript poate 'i plasat direct n pa+ina Fe>G 'iind e)ecutat de >roEser
mpreun& cu documentul Fe> care-l conine. 4roEserul 6nternet E)plorer 1;ersiunile mai noi dec0t
6E 3.32 e)ecut& i el corect scripturile Da;a:cript.
11
Da;a:cript este un lim>aC interpretatG ca i $erlG dar n ca9ul s&u nu tre>uie s& ;& mai 'acei
+riCi n pri;ina instal&rii unui interpretor deoarece acesta este inclus n >roEser. Codul surs& poate
'i inclus n pa+ina Fe> sau poate 'i pus ntr-un 'iier separat care este re'erit din pa+in&.
Ca i n ca9ul scripturilor C@6G nici n acest ca9 nu este a>solut necesar& cunoaterea lim>aCului
Da;a:cript pentru a putea insera i utili9a cu succes ast'el de scripturi. E)ist& un num&r impresionant
de scripturi +ata de utili9areG care se pot inte+ra cu uurin& n codul surs& al documentelor
dumnea;oastr&.
2. Cum poate 'i inclus un script n pa+in&?
:cripturile Da;a:cript pot 'i incluse n pa+ina Fe> n dou& moduriH
prin intermediul etic%etei .&C8!5T/ .0&C8!5T/
prin intermediul unei proceduri e?eni"ent
6at& un e)emplu 'oarte simplu n care n document este inclus un script care a'iea9& n pa+in&
te)tul J4una 9iua[J prin intermediul etic%etei 5:C=6$T8.
(e"plul 12. 1
5HTML8
5HE,!8
5T6TLE8Da;a:cript 12.15OT6TLE8
5OHE,!8
54"!#8
5H18$rimul e)emplu Da;a:cript5OH185H=8
5:C=6$T lan+ua+eKJDa;a:criptJ8
document.Erite1J4una 9iua[J2
5O:C=6$T8
5O4"!#8
5OHTML8
<nul dintre atri>utele etic%etei 5:C=6$T8 este lan,ua,e prin care este speci'icat lim>aCul n
care este scris scriptulG n ca9ul acesta ;aloarea atri>utului 'iind JDa;a:criptJ.
" alt& modalitate de a include de a include un script n pa+in& este sal;area acestuia ca un
'iier e)tern i apelarea sa prin intermediul atri>utului src al etic%etei 5:C=6$T8.
In e)emplele de scripturi care ;or urma ;ei o>ser;a di;erse moduri n care pot 'i incluse n
pa+inile Fe> scripturi Da;a:cript.
Au ;om intra n am&nunte pri;ind sinta)a lim>aCuluiG deoarece aceasta dep&ete su>iectul
acestei c&ri. TotuiG pentru a putea 'olosi Cudicios un script Da;a:cript tre>uie s& a;ei o ima+ine
despre elementele eseniale cu care lucrea9& Da;a:criptG o>iectele i e;enimentele.
+biecte
<n o)iect este un nou tip de dateG care reunete su> aceeai denumire at0t datele c0t i
'unciile care le prelucrea9&. !atele se numesc proprietGile o>iectului iar 'unciile se numesc
"etodele o>iectului.
$entru a e)empli'ica aceste concepteG s& presupunem c& dorim s& construim un o>iect care s&
repre9inte o carte de ;i9it&G pe care l ;om numi Card. ,cest o>iect ;a a;ea urm&toarele propriet&iH
11(
- nume
- adres&
- tele'on
$entru a de'ini un o>iect se 'olosete o 'uncie numit& constructor. In e)emplul nostruG
'uncia constructor a o>iectului Card ;a arata ast'elH
'unction Card1numG adrG tel2
m
t%is.numeKnumR
t%is.adresaKadrR
t%is.tele'onKtelR
n
In acest momentG constructorul o>iectului Card nc& nu este completG el conine numai propriet&ile
o>iectului.
,cum s& construim i o metod& care s& lucre9e cu acest o>iect. !eoarece dorim s& tip&rim
c&rile de ;i9it& pe care le ;om reali9a cu aCutorul acestui o>iectG ;om crea o 'uncie care ;a tip&ri
propriet&ile o>iectuluiG numit& $rintCard12.
'unction $rintCard12
m
document.Erite1JAumeleH JG t%is.numeG JjnJ2R
document.Erite1J,dresaH JG t%is.adresaG JjnJ2R
document.Erite1JTele'onulH JG t%is.tele'onG JjnJ2R
n
,cum putem scrie de'iniia complet& a o>iectului nostruH
m
t%is.numeKnumR
t%is.adresaKadrR
t%is.tele'onKtelR
t%is.$rintCardK$rintCardR
n
:& trecemG acumG la 'olosirea unui o>iect. $entru a crea un o>iect concretG adic& o instan& a
o>iectului CardG se 'olosete cu;0ntul c%eie neE. <rm&toarea instruciune construiete o instan& a
o>iectului CardG care se numete anaH
anaKneE Card 1J,na MunteanuJG J:tr. ,pusuluiG nr.2G 4ucurestiJG J(1(234J2
"dat& ce a 'ost creat& o nou& instan& a o>iectului CardG metoda $rintCard poate 'i 'olosit&
ast'elH
ana.$rintCard12
Ti acumG s& punem toate aceste sec;ene de cod laolalt& i s& 'olosim o>iectul ntr-o pa+in&
Fe>G pentru a a'ia mai multe c&ri de ;i9it&.
(e"plul 12. 2
11*
5HTML8
5HE,!8
'unction $rintCard12
m
document.Erite1J548AumeleH5O48 JG t%is.numeG J54=8J2R
document.Erite1J548,dresaH5O48 JG t%is.adresaG J54=8J2R
document.Erite1J548Tele'onulH5O48 JG t%is.tele'onG J5H=8J2R
n
m
t%is.numeKnumR
t%is.adresaKadrR
t%is.tele'onKtelR
t%is.$rintCardK$rintCardR
n
5O:C=6$T8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Crearea o>iectelor5OH18
6nceputul scriptului5H=8
OO Crearea a trei o>iecte noi
anaKneE Card 1J,na MunteanuJG J:tr. ,pusuluiG nr.2G 4ucurestiJG J(1(234J2
ionKneE Card1J6on $opescuJG J:tr. Morilor nr.1G $loiestiJG J4(*-/J2R
raduKneE Card1J=adu 6onescuJG J:tr. AoptiiG nr.3G $itestiJG J231232J2R
OO ,'isarea lor
ana.$rintCard12R
ion.$rintCard12R
radu.$rintCard12R
5O:C=6$T8
:'arsitul scriptului
5O4"!#8
5OHTML8
$utei o>ser;a modul n care a 'ost inclus scriptul n pa+ina Fe>. ,st'elG de'iniia scriptului
este plasat& n antetul documentului HTMLG iar apelul scriptului este '&cut n corpul documentului.
In cadrul scriptului apar dou& linii precedate de irul de caractere JOOJ. ,cesta este modul n care se
introduc comentariile n cadrul scripturilor Da;a:cript.
,venimente
In continuare ;om discuta despre un alt concept 'undamental cu care lucrea9& Da;a:criptG i
anume e?eni"entul. <n e;eniment este o aciune care sur;ine la un moment dat i n urma c&reia
este declanat& e)ecuia unei anumite p&ri din pro+ram. "ri de c0te ori ;i9itatorul 'ace clic? pe o
le+&tur&G de e)empluG c0nd introduce un te)t sau c%iar c0nd trece cu mouse-ul deasupra unei 9one a
pa+iniiG sur;ine un e;eniment la care scriptul reacionea9& +ener0nd un r&spuns.
6at& care sunt tipurile de e;enimente cu care lucrea9& Da;a:criptH
Ta)el 12. 1
11-
(?eni"ent 2escriere
on,>ort
,pare c0nd utili9atorul renun& la nc&rcarea
unei ima+ini
on4lur
,pare c0nd un o>iect din pa+in& pierde
'ocusul
onC%an+e
,pare c0nd un c0mp de editare este
modi'icat de utili9ator 1c0nd se introduce un te)t2
onClic?
,pare c0nd utili9atorul 'ace clic? pe un
element
onError
,pare c0nd un document sau o ima+ine nu
se ncarc& corect
on.ocus ,pare c0nd un element primete 'ocusul
onLoad
,pare c0nd o pa+in& sau o ima+ine i
termin& nc&rcarea
onMouse";er
,pare c0nd cursorul mouse-ului se plim>&
deasupra unui element
onMouse"ut
,pare c0nd cursorul mouse-ului p&r&sete
elementul
on:elect ,pare c0nd utili9atorul selectea9& un te)t
on:u>mit
,pare c0nd este ap&sat un >uton de tip
:u>mit
on<nload
,pare c0nd utili9atorul p&r&sete
documentul sau sesiunea curent&.
!up& cum ;edeiG prin intermediul Da;a:cript se poate r&spunde unui mare num&r de
e;enimente. ,cest lucru se reali9ea9& prin crearea unei proceduri e?eni"ent.
$rocedurile e;eniment nu sunt de'inite cu aCutorul etic%etei 5:C=6$T8 ci ele sunt atri>ute ale
celorlalte etic%ete. !e e)empluG iat& o le+&tur& care include o procedur& e;enimentH
5, %re'KJ%ttpHOOEEE.ama9on.comJ
onMouse";erKJ EindoE.statusKoCea mai mare li>rarie ;irtualaoR return trueJ8 Clic? aici5O,8
">ser;ai c& ntrea+a procedur& e;eniment care r&spunde la e;enimentul Mouse";er este
inclus& n etic%eta 5,8. :unt speci'icate dou& instruciuni care se e)ecut& n momentul c0nd
cursorul mouse-ului este plasat deasupra le+&turii. $rima a'iea9& un mesaC n >ara de status a
'erestreiG urm&toarea returnea9& ;aloarea trueG pentru a mpiedica ter+erea mesaCului. Mai o>ser;ai
c& mesaCul care ;a 'i a'iat este delimitat de apostro'uri.
!ac& procedura e;eniment este mai e)tins&G includerea ei n ntre+ime ntr-o etic%eta de;ine
nepractic&. In aceast& situaieG este mai a;antaCos s& construim o 'uncie care s& trate9e e;enimentul.
.uncia este de'init& n seciunea 5HE,!8 a documentuluiG iar n corpul documentului este
apelat& ca procedur& e;eniment. !e e)empluG s& presupunem c& am construit o 'uncie e;eniment
numit& Citeste12. ,tunci ea poate 'i apelat& ast'elH
5, %re'KJQcuprinsJ onMouse";erKJCiteste12RJ8Mer+i la Cuprins5O,8
11/
In momentul c0nd mouse-ul se a'l& deasupra le+&turiiG 'uncia este lansat& n e)ecuie.
3. Modul de e)ecuie al scriptului
:cripturile inte+rate n cadrul pa+inilor sunt e;aluate dup& ce nc&rcarea pa+inii s-a nc%eiat
dar nainte ca aceasta s& 'ie a'iat&. $e de alt& parteG scripturile stocate ca 'iiere separate sunt
e;aluate naintea tuturor scripturilor in-line 1adic& a celor incluse n pa+in&2. .unciile de'inite n
cadrul scripturilor nu sunt e)ecutate automat la nc&rcarea pa+inilor ci a>ia atunci c0nd acestea sunt
apelateG 'ie prin etic%eta 5:C=6$T8 'ie printr-o procedur& e;eniment.
!ac& ai ;&9ut ;reodat& un script Da;a:cript ntr-o pa+in& Fe>G poate ai remarcat un lucru
aparent ciudatH ntre+ul script este inclus ntre etic%etele HTML de comentariuH
5[- - comentariu - -8.
Moti;ul este 'aptul c& e)ist& >roEsere care nu recunosc i nu pot e)ecuta scripturile
Da;a:cript. !ac& un document Fe> care conine cod Da;a:cript este nc&rcat ntr-un asemenea
>roEserG n loc ca scriptul s& 'ie e)ecutatG este a'iat n pa+in& ntre+ul codG ceea ce nu este de dorit.
,a dup& cum tiiG comentariile sunt i+norate de >roEserG ast'el c& includerea codului Da;a:cript
ntre etic%etele de comentariu ;a duce la i+norarea acestei p&ri a documentului. E)cepie 'ac
>roEserele care recunosc Da;a:cript i care ;or identi'ica pre9ena Da;a:cript i ;or e)ecuta
scriptul.
In conclu9ieG maniera recomandat& pentru introducerea n pa+in& a unui script este
urm&toareaH
5[ - -
Cod Da;a:cript
OO - -8
5O:C=6$T8
,m n;&at p0n& acum cum poate 'i inclus codul Da;a:cript ntr-un document HTML. :&
;edemG mai departeG cum putem 'olosi scripturile Da;a:cript pentru a 'ace pa+inile mai atracti;e i a
le m>un&t&i 'uncionalitatea.
4. Ce se poate 'ace cu Da;a:cript?
In continuare sunt pre9entate c0te;a e)emple de scripturi cu aCutorul c&rora se pot reali9a
lucruri care dep&esc posi>ilit&ile lim>aCului HTMLG cum ar 'i a'iarea datei curente n pa+ina
dumnea;oastr&G desc%iderea unei 'erestre pop-upG a'iarea unui mesaC n >ara de status a 'erestrei
>roEseruluiG a'iarea aleatoare a unor mesaCe n pa+in&G ima+ini care i sc%im>& aspectul la trecerea
mouse-uluiG iG una dintre cele mai utile aplicaii Da;a:criptG ;alidarea 'ormularelor.
Afiarea unui mesa- 'n bara de status
,cest e)emplu ilustrea9& modul cum se poate a'ia un mesaC n >ara de status 1a'lat& la >a9a
'erestrei >roEserului2 la trecerea cu mouse-ul peste un anumit element din pa+in&. !e o>iceiG acest
element este un lin? sau o ima+ine. In E)emplul 12.3G elementul este o ima+ine
(e"plul 12. 3
5HTML8
5HE,!8
123
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8MesaC in status >ar5OH185H=8
5H38MesaCul apare la plasarea mouse-ului pe ima+ine5OH38
56M@ srcKJ..O6ma+iniOti+er.+i'J onMouse";erKJEindoE.statusKp,cesta este un ti+rupR
return trueJ onMouse"utKJEindoE.statusKp pRreturn trueJ8
5O4"!#8
5OHTML8
Afiarea datei curente 'n pagin
:criptul urm&tor preia data sistemului de operare al utili9atorului i o a'iea9& n pa+in&.
E;identG dac& data sistemului este setat& incorectG ea ;a ap&rea n pa+in& ca atare. E)emplul 12.4
construiete o pa+in& Fe> care conine un ast'el de script
(e"plul 12. 4
5HTML8
5HE,!8
5:C=6$T lan+ua+eKJCa;ascriptJ8
5[--
;ar 9iG dataG luna
a9iKneE !ate12
i'1a9i.+et!aW1KK32m 9iKJ!uminicaG J n
else i'1a9i.+et!aW12KK12m 9iKJLuniG J n
else i'1a9i.+et!aW12KK22m9iKJMartiG Jn
else i'1a9i.+et!aW12KK32m9iKJMiercuriG Jn
else i'1a9i.+et!aW12KK42m9iKJDoiG Jn
else i'1a9i.+et!aW12KK2m9iKJ7ineriG Jn
else i'1a9i.+et!aW12KK(2m9iKJ:am>ataG Jn
i'1a9i.+etMont%12KK32mlunaKJ6anuarie Jn
else i'1a9i.+etMont%12KK12mlunaKJ.e>ruarieJn
else i'1a9i.+etMont%12KK22mlunaKJMartieJn
else i'1a9i.+etMont%12KK32mlunaKJ,prilieJn
else i'1a9i.+etMont%12KK42mlunaKJMaiJn
else i'1a9i.+etMont%12KK2mlunaKJ6unieJn
else i'1a9i.+etMont%12KK(2mlunaKJ6ulieJn
else i'1a9i.+etMont%12KK*2mlunaKJ,u+ustJn
else i'1a9i.+etMont%12KK-2mlunaKJ:eptem>rieJn
else i'1a9i.+etMont%12KK/2mlunaKJ"ctom>rieJn
else i'1a9i.+etMont%12KK132mlunaKJAoiem>rieJn
else i'1a9i.+etMont%12KK112mlunaKJ!ecem>rieJn
dataKa9i.+et!ate12
OO--8
5O:C=6$T8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8!ata calendaristica5OH185H=8
5."AT si9eKJ3J colorKJ>lac?J 'aceKJarialJ8,9i suntem in data deH
5[--
5."AT si9eKJ4J colorKJredJ 'aceKJarialJ8
121
document.Erite19i]p p]data]p p]luna2
OO--8
5O:C=6$T85O."AT8
5O4"!#8
5OHTML8
*erestre pop)up
<nul din lucrurile care nu se pot reali9a 'olosind doar HTML este a'iarea mesaCelor pop)up.
,ceste mesaCe apar ntr-o mic& 'ereastr& care se nc%ide atunci c0nd e)ecutai o anumit& aciuneG de
o>icei clic? pe un >utonG sau pe un lin?.
In E)emplul 12. este construit& pa+ina principal& din care este apelat& 'ereastra pop-up.
(e"plul 12. 5
5HTML8
5HE,!8
5[--
'unction desc%ide12
miEinKEindoE.open1JDa;a:cript 12.(.%tmlJG J6F6AJG JstatusKnoG tool>arKnoG locationKnoG
menuKnoG Eidt%K233G %ei+%tK233J2Rn
OO--8
5O:C=6$T8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8.ereastra pop-up5OH185H=8
,ceasta pa+ina demonstrea9a cum poate 'i creata o 'ereastra pop-up54=8
.ereastra se desc%ide la apasarea pe le+atura de mai Cos si se inc%ide54=8
cand este apasat >utonul "L54=8
!esc%ide 'ereastra
5, %re'KJQJ onClic?KJdesc%ide12RJ8aici5O,8.
5O4"!#8
5OHTML8
.irete c& tre>uie creat un document separatG care ;a 'i a'iat n 'ereastra pop-up. In E)emplul
12.( este construit documentul HTML 19avaScript@.html2 care ;a 'i a'iat n 'ereastra pop-up
de'init& n e)emplul anterior.
(e"plul 12. 6
5HTML8
5HE,!8
5T6TLE8Da;a:cript 12.(5OT6TLE8
5OHE,!8
54"!#8
5H3 ali+nKJcenterJ8Test pop-up5OH38
5."AT colorKJ+reenJ 'aceKarial8,ti in;atat sa creati o 'ereastra pop-up54=8
,pasati "L ca sa re;eniti in 'ereastra initiala
5$8
5."=M nameKJ'orm1J8
56A$<T tWpeKJ>uttonJ ;alueKJ"LJ
122
onClic?KJEindoE.close12RJ8
5O."=M8
5O4"!#8
5OHTML8
$utei modi'ica documentul HTML care se ;a desc%ide n 'ereastra pop-up dup& dorin& i l
putei sal;a su> alt nume. Au uitaiG ns&G s& 'acei modi'icarea corespun9&toare n 'uncia desc%ide12
din script.
Afiarea aleatoare a unor mesa-e 'n pagin
<nul dintre lucrurile care i 'ac pe ;i9itatorii pa+inii dumnea;oastr& s& re;in& la ea cu
re+ularitate este ;arietateaG 'ie n aspectG 'ieG mai alesG n coninut.
<n mod de a 'ace pa+inile mai ;ariate este de a a'ia di;erse mesaCeG citate sau ima+ini care s&
se sc%im>e de 'iecare dat& c0nd este accesat& pa+ina.
In E)emplul 12.* este pre9entat un script care reali9ea9& a'iarea aleatoare a unui citatG ales dintr-un
ir prede'init.
(e"plul 13. 7
5HTML8
5HE,!8
5T6TLE8Da;a:cript 12.*5OT6TLE8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ8Citate5OH185H=8
5[--
citatKneE ,rraW12R
autorKneE ,rraW12R
citatq3rKJ"mul care-si cunoaste limitele este sin+urul care are sanse sa o>tina ce ;rea.JR
autorq3rKJ@oet%eJR
citatq1rKJ$e stancile cele mai inalte aCun+ numai ;ulturii si reptilele.JR
autorq1rKJMontesNuieuJR
citatq2rKJ$utine lucruri sunt atat de +reu de suportat ca un e)emplu >un.JR
autorq2rKJMar? TEainJR
citatq3rKJ,de;arul pur si simplu este rareori pur si niciodata simplu.JR
autorq3rKJ"scar FildeJR
citatq4rKJ"mul a in;entat lim>aCul pentru a-si satis'ace ne;oia pro'unda de a se plan+e.JR
autorq4rKJLilW TomlinJR
inde)KMat%.'loor1Mat%.random12 l citat.len+t%2R
document.Erite1J5!L8jnJ2R
document.Erite1J5!T8J ] JjJJ ] citatqinde)r ] JjJjnJ2R
document.Erite1J5!!8J ] J- J ] autorqinde)r ] JjnJ2R
document.Erite1J5O!L8jnJ2R
OO--8
5O:C=6$T8
5H=8
Citatul de mai sus este +enerat aleator la incarcarea pa+inii.
5O4"!#8
5OHTML8
123
!ac& dorii s& inserai acest script n pa+ina dumnea;oastr& i s& ad&u+ai i alte citateG nu
uitai s& redimensionai ;ectorii citat i autor la ;aloarea n-+G unde n este num&rul de citate. $entru a
o>ser;a 'uncionarea scriptuluiG renc&rcai pa+ina de mai multe ori.
.magini care se sc$imb #rollover images%
<n e'ect interesant pe care l putei introduce n pa+in& sunt ima+inile care i sc%im>&
aspectul la trecerea cu mouse-ul pe supra'aa lor
(e"plul 12. 8
5HTML8
5HE,!8
5T6TLE8Da;a:cript 12.-5OT6TLE8
5[--
i' 1document.ima+es2
m
pic1onKneE 6ma+e12R
pic1on.srcKJ..O6ma+iniOdo;leac1.Cp+JR
pic1o''KneE 6ma+e12R
pic1o''.srcKJ..O6ma+iniOdo;leac2.Cp+JR
n
'unction desc%ide1im+Aame2
m
m
im+"nKe;al1im+Aame ] Jon.srcJ2R
documentqim+Aamer.srcKim+"nR
n
n
'unction inc%ide1im+Aame2
m
m
im+"''Ke;al1im+Aame ] Jo''.srcJ2R
documentqim+Aamer.srcKim+"''R
n
n
OO---8
5O:C=6$T8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ86ma+ini care se sc%im>a5OH185H=8
5CEATE=8
5, %re'KJQJ onMouseo;erKJdesc%ide1ppic1p2J onMouseoutKJinc%ide1ppic1p2J8
56M@ srcKJ..O6ma+iniOdo;leac2.Cp+J Eidt%KJ133J %ei+%tKJ133J >orderKJ1J nameKJpic1J8
5O,8
5OCEATE=8
5O4"!#8
5OHTML8
/alidarea formularelor
124
!ac& e)emplele pre9entate p0n& acum au a;ut rolul de a 'ace pa+ina dumnea;oastr& mai
atracti;&G urm&torul e)emplu este de natur& s& i m>un&t&easc& 'uncionalitatea. " pro>lem& cu
care ;& ;ei con'runta '&r& ndoial& dac& 'olosii 'ormulare n pa+in&G este ;alidarea datelor
introduse de utili9ator.
7om crea o pa+in& 'oarte simpl& care conine dou& casete de te)t n care utili9atorul tre>uie s&
introduc& numele i adresa de mail. !eoarece dup& completarea 'ormularului in'ormaiile introduse
;or 'i supuse procesului de ;alidare reali9at de scriptul Da;a:criptG etic%eta 5."=M8 ;a a;ea un
coninut di'erit de cel pe care l cunoatei de la capitolul 6or"ulare.
:criptul de mai Cos ;eri'ic& dac& toate c0mpurile de editare au 'ost completate. !ac& se apas&
pe >utonul :u>mit nainte de a completa am>ele c0mpuriG este transmis un mesaC de eroare. !atele
din 'ormular sunt transmise unui script C@6 'icti;G numit myscript.cgi a'lat n directorul cgi-!in.
">ser;ai c& atri>utele action i met%od ale etic%etei 5."=M8 pe care le cunoatei de la
6or"ulare suntG de data aceasta 'olosite ca propriet&i ale o>iectului prede'init n Da;a:criptG 'orm.
!ocumentul construit n E)emplul 12./ conine un 'ormular i scriptul care reali9ea9&
;alidarea datelor introduse n c0mpurile 'ormularului.
(e"plul 12. 9
5HTML8
5HE,!8
5T6TLE8Da;a:cript 12./5OT6TLE8
5[--
'unction ;eri'ica1'orm2
m
i' 1'orm.nume.;alueKK JJ2
m
alert1J7a ro+G introduceti numele[J2R
'orm.nume.select12R
n
else i' 1'orm.email.;alueKK JJ2
m
alert1J7a ro+G introduceti adresa de mail[J2R
'orm.email.select12R
n
else
m
'orm.met%odKJpostJR
'orm.tar+etKJ\sel'JR
'orm.actionKJc+i->inOmWscript.c+iJR
'orm.su>mit12R
n
n
OO--8
5O:C=6$T8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ87alidarea 'ormularelor5OH18
5H3 ali+nKJcenterJ81completarea tuturor campurilor25OH385H=8
5."=M on:u>mitKJ;eri'ica1t%is2R return 'alseRJ8
AumeH
56A$<T tWpeKJte)tJ nameKJnumeJ si9eKJ33J854=8
12
,dresa mailH
56A$<T tWpeKJte)tJ nameKJemailJ854=8
56A$<T tWpeKJsu>mitJ nameKJ>uttonJ ;alueKJ:u>mitJ8
5O."=M8
5O4"!#8
5HTML8
" alt& ;eri'icare deose>it de util& este dac& utili9atorul a introdus o adres& de mail ;alid&.
:criptul din e)emplul urm&tor reali9ea9& trei ;eri'ic&riH
dac& n irul de caractere introdus e)ist& caracterul h
dac& este pre9ent caracterul J.J urmat de trei caractere 1.comG de e)emplu2G
dac& este pre9ent caracterul J.J urmat de dou& caractere 1.roG de e)emplu2
.ormularul din E)emplul 12.13 conine un c0mp de editare i un >uton Su!mit. !ac& adresa de mail
introdus& n c0mpul de editare este incorect& se ;a a'ia un mesaC de eroare.
(e"plul 12. 10
5HTML8
5HE,!8
5T6TLE8Ca;ascript135OT6TLE8
5[--
'unction ;eri'ica\mail1'orm2
m
;eri'K'orm.email.;alue
i' 11;eri'.inde)"'1php2 5 32 ii 11;eri'.c%ar,t1;eri'.len+t%-42 [Kp.p2 PP
1;eri'.c%ar,t1;eri'.len+t%-32 [Kp.p222
m
alert1JAu ati introdus o adresa de mail ;alida. 7a ro+G incercati din nou[J2R
'orm.email.select12R
return 'alseR
n
else
m
'orm.met%odKJpostJR
'orm.tar+etKJ\sel'JR
'orm.actionKJc+i->inOmWscript.c+iJR
'orm.su>mit12R
n
n
OO--8
5O:C=6$T8
5OHE,!8
54"!#8
5H1 ali+nKJcenterJ87alidarea 'ormularelor5OH18
5H3 ali+nKJcenterJ81adresa de mail corecta25OH385H=8
5."=M on:u>mitKJ;eri'ica\mail1t%is2Rreturn 'alseRJ8
,dresa mailH
56A$<T tWpeKJte)tJ nameKJemailJ854=8
56A$<T tWpeKJsu>mitJ nameKJ>uttonJ ;alueKJ:u>mitJ8
5O."=M8
5O4"!#8
12(
5HTML8
$utei 'olosi n pa+inile dumnea;oastr& oricare dintre aceste scripturiG desi+urG '&c0nd
modi'ic&rile necesare le+ate de structura site-ului dumnea;oastr&. !e e)empluG n scripturile care
reali9ea9& ;alidarea 'ormularelorG pentru ca acestea s& 'ie 'uncionaleG tre>uie s& preci9ai
locali9area corect& a scriptului C@6 care 'ace prelucrarea lor.
!in e)emplele pre9entate pro>a>il c& ;-ai putut crea o ima+ine despre modul n care pot 'i
utili9ate scripturile Da;a:cript ntr-o pa+in& Fe>. !ac& suntei entu9iasmat nc& de pe acumG ;ei 'i
i mai mult dac& ;ei depune puin e'ort pentru a n;&a lim>aCul i ;ei putea crea scripturi mult mai
comple)e dec0t acestea.
,;ei ns& +riC& la aspectele le+ate de ;ite9a de nc&rcare a pa+iniiH aplicaiile comple)e i de mari
dimensiuni ncetinesc nc&rcarea pa+inii unde sunt 'olosite. Ca i n ca9ul ima+inilorG nu 'olosii
scripturi de care nu este ne;oieG doar pentru a arata cu orice pre c& suntei un >un pro+ramator. <na
dintre re+ulile de aur ale unei pa+ini Fe> >uneG re+ul& at0t de adesea nc&lcat&G este simplitatea.
Capitolul 13
1. Ce este un motor de c&utare?
!ac& a;ei o minim& e)perien& n na;i+area pe Fe> ;-ai nt0lnitG '&r& ndoial& cu motoarele
de c&utare. Motoarele de cGutare sunt aplicaii plasate pe ser;ere deose>it de puterniceG care conin
>a9e de date imense i care au drept scop cercetarea i inde)area sutelor de milioane de pa+ini Fe>
e)istente. <tilitatea motoarelor de c&utare este e;ident&H '&r& ele ar 'i aproape imposi>il s& +&sim
in'ormaiile care ne interesea9& n oceanul de in'ormaii care este Fe>-ul.
Motoarele de c&utare conin un 'ormular de tip c0mp de editare n care utili9atorul introduce
unul sau mai multe cu;inte 'olosite drept cCeie de cGutare. =e9ultatele sunt 'urni9ate su> 'orma
unei liste de pa+ini Fe> care conin cu;intele c%eie introduse. 6nde)area unei pa+ini de c&tre un
motor de c&utare nseamn& asocierea cu;intelor c%eie cu coninutul in'ormaional al acesteia. Cele
mai 'olosite motoare de c&utare suntG n acest momentG @oo+leG #a%oo[G LWcosG @o.com i E)cite.
Motoarele de c&utare au drept scop inde)area tuturor pa+inilor e)istente pe Fe>G darG e;identG
acest lucru este imposi>il. "ric0t de per'ormante ar 'i pro+ramele cu care lucrea9&G num&rul de site-
uri care sunt pu>licate n permanen& pe Fe> dep&ete posi>ilit&ile acestora. ,cesta este moti;ul
pentru care simpla postare a unui site pe Fe> nu +arantea9& c0tui de puin c& acesta ;a a;ea
;i9itatori. !escoperirea lui de c&tre motoarele de c&utare poate dura ntre ase luni i un an. Tocmai
12*
de aceea nu tre>uie s& ateptai ca site-ul dumnea;oastr& s& 'ie descoperitG ci tre>uie s&-l promo;ai
acti;G una dintre metode 'iind nscrierea lui n >a9ele de date ale motoarelor de c&utare.
E)ist& dou& tipuri principale de motoare de c&utareG care se >a9ea9& pe moduri di'erite de a
'ace inde)area pa+inilorH
Motoarele de c&utare de tip Jp&ianCenJ care reali9ea9& inde)area automatG pe >a9a cu;intelor
c%eie pre9ente n antetul documentelor HTML 1de e)emplu @oo+le2. ,cest tip de motoare 'olosesc
al+oritmi e)trem de per'ormaniG care cercetea9& i inde)ea9& milioane de pa+ini pe 9i.
Motoarele de c&utare care 'ac inde)area pe >a9a cu;intelor c%eie 'urni9ate de creatorul pa+iniiG la
nscrierea acesteia n >a9a de date a aplicaiei 1de e)emplu #a%oo[2. Inscrierea n >a9a de date se
'ace personalG de c&tre autorul site-uluiG iar e;aluarea site-ului se 'ace de c&tre personal uman.
$entru a 'ace mai e'icient& inde)area pa+inilor de c&tre motoarele de tip Jp&ianCenJ lim>aCul
HTML include o cate+orie special& de etic%ete numite metata+-uri.
2. Metata+-uri
Metata,9urile sunt o cate+orie special& de etic%ete care sunt plasate n antetul documentului
HTML 1n >locul 5HE,!82. Ca i celelalte elemente incluse n antetul documentuluiG cu e)cepia
titlului documentuluiG metata+-urile nu sunt ;i9i>ile pentru ;i9itatorul pa+inii.
$rimul metata+ despre care ;om ;or>i este deCa cunoscut i l-ai 'olosit de 'oarte multe ori
p0n& acumH este metata+ul .T!TL(/. :e utili9ea9& con'orm sinta)eiH
5T6TLE8Titlul pa+inii Fe>5OT6TLE8.
!up& cum ai o>ser;at din e)emplele de p0n& acumG titlul pa+inii apare n >ara de titlu a
'erestrei >roEserului.
Multe dintre motoarele de c&utare a'iea9& n lista de re9ultate i titlul pa+inilor pe l0n+&
adresele <=L. Titlul pa+inii este in'ormaia care l determin& pe ;i9itator s& intre sau nu pe pa+ina
dumnea;oastr&. Titlul tre>uie s& 'ie o propo9iie care s& atra+& atenia i n acelai timp s& conin&
in'ormaiile eseniale pri;ind su>iectul i coninutul pa+inii.
Celelalte metata+-uri se introduc prin intermediul etic%etei .M(T1/ care nu este o etic%et&
container. Etic%eta 5MET,8 admite o serie de atri>ute care o'er& motoarelor de c&utare di;erse
in'ormaii care s& aCute la inde)area pa+inii. ,lte atri>ute o'er& in'ormaii >roEserului pri;ind data
de e)pirare a documentului sau speci'ic& perioada de timp dup& care documentul este renc&rcat n
mod automat.
E)ist& dou& cate+orii de metata+-uriH
1. metata+-urile name
2. metata+-urile %ttp-eNui;
0etatag)urile Dna"eD
Cele mai 'olosite metata+-uri sunt cele care se re'er& la cu;intele c%eie care caracteri9ea9&
pa+ina i coninutul eiG o'erind ast'el in'ormaii motoarelor de c&utare. ,cestea suntH
J?eWEordsJ
JdescriptionJ
Jro>otsJ
Metata,9ul DIeFAordsD
12-
Metata+-ul J?eWEordsJ se introduce con'orm urm&toarei sinta)eH
5MET, nameKJ?eWEordsJ contentKJlista cu;inte c%eieJ8
Lista cu;intelor c%eie tre>uie s& includ& toate cu;intele pe care considerai c& le-ar putea
introduce un ;i9itator ca c%eie de c&utare pentru a descoperi pa+ina dumnea;oastr&. Cu;intele se
scriu desp&rite prin ;ir+ul&G '&r& spaii intre ele. $e l0n+& cu;intele c%eieG putei 'olosi i com>inaii
de cu;inte. !e e)emplu ntr-o pa+in& care o'er& in'ormaii despre crearea de pa+ini Fe> i Ee>
desi+nG cu;intele c%eie ar putea 'i urm&toareleH
5MET, nameKJ?eWEordsJ contentKJFe> desi+nG creare pa+ini Fe>G construire siteG Fe> site
desi+nJ8
@&sirea cu;intelor i com>inaiilor de cu;inte c%eie este o etap& care tre>uie tratat& cu atenie.
$entru a aduce pa+ina dumnea;oastr& n atenia acelor ;i9itatori pentru care este ea conceput&G
cu;intele c%eie tre>uie alese cu atenie i ele tre>uie s& re'lecte e)act elementele de coninut
de'initorii ale pa+inii.
<nii dintre creatorii de pa+ini Fe> care doresc s& o>in& o po9iionare mai >un& n lista de
re9ultate 'urni9ate de motoarele de c&utare 'olosesc n mod a>u9i; cu;intele c%eieG repet0nd acelai
cu;0nt sau com>inaii de cu;inte de un num&r 'oarte mare de ori sau 'olosind cu;inte c%eie care nu
au le+&tur& cu su>iectul pa+inii. Ca urmare a acestor ncerc&ri de Jp&c&lireJ a motoarelor de c&utareG
au 'ost de9;oltai al+oritmi per'ormani care identi'ic& tentati;ele de 'raud& i care se soldea9& 'ie
cu sc&derea cotaiei pa+inilor respecti;eG 'ie c%iar cu eliminarea lor din >a9a de date a motorului de
c&utare.
Metata,9ul DdescriptionD
Metata+-ul n cadrul c&ruia se reali9ea9& descrierea pa+inii esteG de asemenea 'oarte important
pentru succesul acesteia. Ca i cel anteriorG se introduce n antetul documentului con'orm
urm&toarei sinta)eH
5MET, nameKJdescriptionJ contentKJdescrierea su>iectului pa+iniiJ8
Multe motoare de c&utare includ n lista de re9ultate pe l0n+& <=L-ul i titlul pa+inii i
descrierea ei. $entru a 'ace descrierea pa+inii dumnea;oastr& este >ine s& 'olosii com>inaii de
cu;inte c%eieG reunite n 'ra9e atracti;e i con;in+&toare. .ii concis n descriere i plasai
in'ormaiile eseniale la nceput deoarece este posi>il ca descrierile prea lun+i s& 'ie trunc%iate. Ca
i n ca9ul ale+erii cu;intelor c%eieG acordai o atenie deose>it& 'ormul&rii unei descrieri c0t mai
potri;ite i inei seama c& aceasta poate 'i sin+ura dumnea;oastr& ans& de a-l con;in+e pe
utili9ator s& desc%id& pa+ina pe care ai creat-o. !escrierea unei pa+ini poate ar&ta ast'elH
5MET, nameKJdescriptionJ contentKJTutorial de Fe> desi+n care ;a initia9a pas cu pas in
procesul de construire al unui site Fe>. 6n;atati sa concepetiG sa creati si sa promo;ati propriul
dumnea;oastra site.J8
$e l0n+& metata+-ul care 'ace descrierea pa+inii este recomandat& introducereaG la nceputul pa+iniiG
a unui comentariu n cadrul c&ruia s& inserai descrierea. ,cest lucru este util deoarece e)ist&
motoare de c&utare care i+nor& metata+-urile i preiau primele cu;inte pe care le +&sesc n pa+in&.
!ac& ai reuit s& 'ormulai o descriere su+esti;& i con;in+&toareG o putei 'olosi c%iar ca 'ra9& de
nceput n partea ;i9i>il& a pa+inii.
Metata,9ul Dro)otsD
12/
:unt situaii c0nd creatorul pa+inii Fe> dorete ca anumite pa+ini s& 'ie e)cluse de la
inde)area de c&tre motoarele de c&utare. !e e)emplu dac& ai pu>licat site-ul pe Fe> nainte de a 'i
terminat 1dei acest lucru este nerecomandat2 sau dac& dorii s& reactuali9ai coninutul anumitor
pa+ini i dorii ca p0n& la 'inali9area modi'ic&rilor pa+inile s& nu 'ie accesate de motoarele de
c&utareG putei 'olosi n antetul pa+inilor respecti;e metata+-ul Jro>otsJ ast'elH
5MET, nameKJro>otsJ contentKJnoinde)G no'olloEJ8
,ceast& construcie comunic& motoarelor de c&utare s& nu inde)e9e pa+ina i n acelai timp
s& nu urme9e nici una dintre le+&turile incluse n ea. ,tri>utul content poate lua urm&toarele ;aloriH
all - permite inde)area tuturor pa+inilor
none - nu permite inde)area nici unei pa+ini i nici urmarea le+&turilor din cadrul lor
inde) - permite inde)area pa+inii
'olloE - permite urmarea le+&turilor din pa+in&
noinde) - nu permite inde)area pa+inii
no'olloE - nu permite urmarea le+&turilor din cadrul pa+inii
,lte metata+-uri name utili9ate suntH
5MET, nameKJaut%orJ contentKJnume\autorJ8
$ermite speci'icarea numelui autorului pa+inii
5MET, nameKJcopWri+%tJ contentKJdrepturi copWri+%tJ8
$ermite speci'icarea drepturilor de autor
5MET, nameKJ+eneratorJ contentKJnume\ aplicatieJ8
:peci'ic& aplicaia cu care a 'ost creat& pa+ina.
E)empluH
5MET, nameKJ+eneratorJ contentKJMicroso't .ront$a+e 3.3J8
0etatag)urile 1Cttp9eKui?1
$e l0n+& metata+-urile name care o'er& in'ormaii motoarelor de c&utareG e)ist& metata+-urile
%ttp-eNui; care o'er& in'ormaii >roEserului pri;ind documentul pe care urmea9& s&-l desc%id&. 6at&
n continuare o list& a acestor metata+-uri mpreun& cu 'unciile 'iec&ruia dintre ele.
Ta)el 13. 1
Etic%eta 6uncia
5MET, %ttp-
eNui;KJContent-TWpeJ
contentKJte)tO%tmlR c%arsetKiso-
--/-1J8
,cest tip de metata+-uri sunt
ec%i;alente cu %eaderele HTT$. Ele
comunic& >roEserului care este tipul
pa+inii i cum s& o a'ie9e precum i
setul de caractere 'olosit 1opional2
5MET, %ttp-
eNui;KJContent-:cript-TWpeJ
contentKJte)tOCa;ascriptJ8
:peci'ic& lim>aCul de script
'olosit n document
5MET, %ttp-
eNui;KJContent-:tWle-TWpeJ
contentKJte)tOcssJ8
:peci'ic& lim>aCul de 'oi de
stiluri 'olosit n document
5MET, %ttp-
eNui;KJe)piresJ contentKJdata\
$ermite preci9area datei la care
documentul poate 'i considerat
133
e)pirarii8 e)pirat
5MET, %ttp-
eNui;KJre'res%J contentKJnr\
secundeJ8
5MET, %ttp-
eNui;KJre'res%J contentKJnr
secundeR urlKadresa\nouaJ8
:peci'ic& num&rul de secunde
dup& care pa+ina este renc&rcat&
automat de c&tre >roEser. ,tri>utul
content poate conineG opionalG i
adresa <=L a altei pa+ini care se ;a
nc&rca n locul pa+inii curente.
,ceast& opiune este util& c0nd dorii
redirectarea ;i9itatorului c&tre alt&
pa+in&.
E)empluH
5MET, %ttp-eNui;KJre'res%J
contentKJR
urlK%ttpHOOEEE.nouapa+ina.comJ8
!up& cum o>ser;aiG metata+-urile de tip %ttp-eNui; sunt 'olosite pentru a transmite
>roEserului di;erse in'ormaii pri;ind documentul HTML. !in aceast& cate+orie 'ace parte i
metata+-ul care permite speci'icarea modului de tran9iie ntre pa+iniH
5MET, %ttp-eNui;KJ$a+e-EnterJ contentKJ=e;ealTrans1!urationKnr\secundeG
TransitionKcod\tran9itie2J8
5MET, %ttp-eNui;KJ$a+e-E)itJ contentKJ=e;ealTrans1!urationKnr\secundeG
TransitionKcod\tran9itie2J8
undeH nr\secunde repre9int& durata tran9iiei n secunde iar cod\tran9itie poate 'i unul dintre
codurile de mai Cos. .iecare dintre ele reali9ea9& tran9iia pa+inii n alt mod.
Ta)el 13. 2
Cod de
tran*iie
Cu" se ;ace tran*iia
3
!reptun+%i care se
nc%ide
1
!reptun+%i care se
desc%ide
2 Cerc care se nc%ide
3 Cerc care se desc%ide
4 !e Cos n sus
!e sus n Cos
( !e la st0n+a la dreapta
* !e la dreapta la st0n+a
-
!un+i care se
deplasea9& spre dreapta
/
!un+i care se
deplasea9& n Cos
131
13
!reptun+%iuri care se
deplasea9& spre dreapta
11
!reptun+%iuri care se
deplasea9& n Cos
12
$i)eli care Jdi9ol;&J
pa+ina
13
Cortin& care se nc%ide
ori9ontal
14
Cortin& care se
desc%ide ori9ontal
1
Cortin& care se nc%ide
;ertical
(e"plul 13. 1
5HTML8
5HE,!8
5T6TLE8Meta 13.15OT6TLE8
5MET, %ttp-eNui;KJpa+e-enterJ contentKJ=e;ealTrans1durationKG transitionK3J8
5MET, %ttp-eNui;KJpa+e-e)itJ contentKJ=e;ealTrans1durationKG transitionK1J8
5OHE,!8
54"!# >+colorKJredJ8
5H1 ali+nKJcenterJ8Tran9itia intre pa+ini5OH185H=8
$entru a o>ser;a modul de tran9itie apasati 5, %re'KJmeta2.%tmlJ8aici5O,8
5O4"!#8
5OHTML8
$utei sc%im>a codurile dup& cum dorii pentru a o>ser;a i alte moduri de tran9iie.
!ocumentul meta +A.,.html creat n E)emplul 13.2 ser;ete doar pentru a e)empli'ica modul
n care se 'ace tran9iia pentru intrarea n pa+in&.
(e"plul 13. 2
5HTML8
5HE,!8
5T6TLE8Meta 13G25OT6TLE8
5OHE,!8
54"!# >+colorKJWelloEJ8
5H38$entru a re;eni la pa+ina anterioara apasati >utonul 4ac? al >roEserului5OH38
5O4"!#8
5OHTML8
1tenie#
,m preci9at c& metata+-urile sunt incluse n antetul documentului HTML. ,tunci c0nd 'olosii
cadre n pa+inile dumnea;oastr& nu uitai s& plasai metata+-urile n >locul 5HE,!8 al tuturor
documentelor care se desc%id n cadre i nu numai n documentul de de'inire a cadrelor
5.=,ME:ET8.
Crearea Ji pu)licarea unui site Ae)
132
,m studiat p0n& acum elementele 'undamentale ale lim>aCului HTML inclusi; modul n care
acesta poate 'i e)tins prin 'olosirea scripturilor C@6G a scripturilor Da;a:cript i a 'oilor de stiluri.
,;ei la ndem0n& acum instrumentele necesare pentru a crea propriul dumnea;oastr& site Fe>. !ar
este oare su'icient? =&spunsul este nu.
$entru a crea un site Fe> de calitateG care s& comunice in'ormaiile n mod lo+ic i atracti; i
care s& atra+& ;i9itatori permaneniG cunoaterea lim>aCului HTML nu este su'icient&. Inainte de a
ncepe scrierea codului HTML pentru pa+inile dumnea;oastr& tre>uie s& parcur+ei alte dou& etape
importanteH plani'icarea site-ului i sta>ilirea elementelor de Fe> desi+n. !up& ce ai 'inali9at
documentele HTML care ;or 'ace parte din site tre>uie s& testai 'uncionarea lin?-urilor i aspectul
pa+inilor n di'erite >roEsere. TiG n 'ineG dup& ce toate aceste etape au 'ost parcurseG urmea9&
pu>licarea site-ului pe un ser;er Fe> care s&-l 'ac& accesi>il tuturor celor care na;i+%ea9& pe Fe>.
In cele ce urmea9& ;om discuta despre etapele care preced construirea documentelor HTML care
;or 'orma site-ul i despre cele care urmea9& dup& ce codul HTML al pa+inilor a 'ost de'initi;at.
Capitolul 14
5lani;icarea site9ului
5lani;icarea este un aspect crucial n procesul de creare a unui site Fe>G deoarece este etapa
n care se iau deci9ii care ;or in'luena desi+nulG implementarea iG mai t0r9iuG promo;area site-ului.
Forld Fide Fe> 'iind un mediu desc%is i dinamicG plani'icarea este mai de+ra>& un proces
continuu n care inter;in sc%im>&ri determinate de nnoirea permanent& a in'ormaiilor i de apariia
altora noi.
,tunci c0nd creai un site Fe> tre>uie s& 'ii contient c& e)ist& o serie de 'actori asupra
c&rora creatorul site-ului nu are nici un control. $rimul pas n procesul de plani'icare este
identi'icarea acestor 'actori i determinarea modului n care acetia pot a'ecta structura ;iitoare a
site-ului dumnea;oastr&.
1. .actori care nu pot 'i plani'icai
.actorii pe care creatorul site-ului nu i poate controla i prin urmare nu pot 'ace o>iectul unei
plani'ic&ri ri+uroase sunt urm&toriiH
Comportamentul utili2atorului.
133
,cest 'actor implic& 'aptul c& nu putei controla cum ;a accesa utili9atorul in'ormaiile din site-ul
dumnea;oastr&. Fe>-ul este un siste" per"ea)ilG aceasta nsemn0nd c& un ;i9itator poate intra n
interiorul site-ului nu numai prin pa+ina de nceput 1pa+ina %ome2 ci i printr-o pa+in& oarecare.
7i9itatorul site-ului poate aCun+e la el parcur+0nd o list& de re9ultate 'urni9at& de un motor de
c&utareG sau prin intermediul unui lin? a'lat pe un alt siteG sau parcur+0nd o list& de resurse. "ricare
dintre aceste metode l poate conduce pe ;i9itator la o alt& pa+in& din interiorul site-uluiG i nu la cea
destinat& de dumnea;oastr& a 'i pa+ina Home.
In +eneralG creatorul site-ului este tentat s& structure9e site-ul a;0nd n minte un anumit tip de
accesG cel mai adesea cel care pleac& de la pa+ina de startG ceea ce conduce la ale+erea unei anumite
structuriG la o anumit& or+ani9are a le+&turilor ntre pa+iniG etc. Tre>uie s& a;ei permanent n ;edere
'aptul c& ;i9itatorul site-ului poate a;ea un cu totul alt mod de a parcur+e site-ul dec0t cel +0ndit de
dumnea;oastr& i s&-i 'urni9ai de-a lun+ul ntre+ului site elemente de na;i+aie clare care s&-l aCute
s& se oriente9e.
!rowserul utili2atorului.
,a cum am mai discutatG e)ist& o mare ;arietate de >roEsere 'olosite pentru a ;i9uali9a
pa+inile Fe>. $rin urmareG ;i9itatorii site-ului ;or percepe o ima+ine di'erit& a site-ului
dumnea;oastr&G n 'uncie de tipul de >roEser 'olosit. Creatorul site-ului nu poate ti ce tip de
>roEser 'olosete un anumit ;i9itator i deci nu are control asupra modului n care ;a 'i a'iat
coninutul pa+inilor sale. !e e)empluG mai e)ist& nc& utili9atori care 'olosesc ;ersiuni ;ec%i de
Aetscape sau E)plorerG care nu suport& anumite e)tensii HTML. E)ist& de asemenea nc& n u9
>roEsere te)tG cum este LWn)G care nu suport& +ra'ica. !ac& ;ei plasa in'ormaii eseniale n 'iiere
+ra'iceG de e)empluG aceti utili9atori nu ;or a;ea acces la ele.
!in acest moti; este >ine s& sta>ilii de la nceput care dorii s& 'ie ni;elul de accesi>ilitate al site-
ului dumnea;oastr& din acest punct de ;edere. <n alt aspect este nele+erea 'aptului c& HTML este
un lim>aC care este destinat de'inirii structurii documentului i nu al modului s&u de a'iare. Este
recomandat s& e;itai speci'icarea n detaliu a aspectului pa+inilor sau optimi9area pa+inilor pentru
un anumit tip de >roEser.
Legturile cu pagini eterne.
Intr-un site Fe> e)ist& de o>icei le+&turi c&tre resurse e)terioare site-ului care sunt i ele n
a'ara controlului dumnea;oastr&. $a+inile re'erite prin aceste le+&turi i pot sc%im>a adreseleG
'&c0nd ast'el ca le+&tura s& nu mai 'ie ;ala>il& 1le+&turi perimate2. !e asemenea pot e)ista le+&turi
rupteG n ca9ul c0nd ser;erul pe care este +&9duit& pa+ina respecti;& are anumite di'icult&i te%nice.
Uin0nd seama de imposi>ilitatea de a controla acest aspectG pot 'i adoptate mai multe metode de
a>ordareH
:ite-ul s& nu conin& nici o le+&tur& e)tern& sau care s& se a'le n a'ara controlului direct al
desi+nerului. Este metoda cea mai si+ur&. !in p&cateG aceast& strate+ie anulea9& posi>ilitatea ca
;i9itatorul s& >ene'icie9e de in'ormaii cone)e cu su>iectul site-ului dumnea;oastr& a'late n
e)teriorul s&u.
Centrali9area resurselor. Este o practic& des nt0lnit& pe Fe>G aceea de a include toate le+&turile
e)terne ntr-o pa+in& special destinat& acestora. 4ene'iciul acestei strate+ii este c& n ca9ul c0nd
una dintre aceste le+&turi e)terne nu mai 'uncionea9&G ;i9itatorul se poate cu uurin& rentoarce
la pa+ina de resurse pentru a testa urm&torul lin?. In plusG cu unele e)cepiiG ;i9itatorii ;or
parcur+e cel puin o parte a site-ului nainte de a aCun+e la pa+ina de le+&turi e)terne i a-l
p&r&siG e;entualG de'initi;.
134
6eirea li>er&. Este cea mai 'le)i>il& a>ordareG permi0nd plasarea le+&turilor e)terne oriunde n
cadrul pa+inilor. !e9a;antaCul ei maCor este c& ;i9itatorul poate p&r&si prematur site-ul pentru a
urma un anumit lin?.
!ac& nu a;ei control asupra le+&turilor de la site c&tre e)teriorG este tot at0t de ade;&rat c& nu putei
controla nici le+&turile care se 'ac din e)terior c&tre site. ,cest lucru poate 'i de9a;antaCosG deoarece
nu putei ti n ce mod este pre9entat& le+&tura c&tre site-ul dumnea;oastr&. $oate c& re'erirea la el
este ironic& sau r&u;oitoareG ns& acest lucru este dincolo de controlul dumnea;oastr&. Tot ceea ce
putei 'ace este s& creai un site de calitate i cu un coninut ;alorosG care s& con;in+& prin el nsui.
Cu toate c& elementele pre9entate mai sus pot p&rea descuraCanteG unele dintre ele pre9int&
totui i a;antaCe. ,st'elG permea>ilitatea Fe>-ului poate lucra n 'a;oarea desi+neruluiG cu condiia
ca acesta s& structure9e atent in'ormaiile pre9entate i s& o'ere su'iciente elemente de na;i+aie. "
pa+in& sau un +rup de pa+ini din cadrul unui site pot 'i 'olosite ca re'erine n alte pa+ini sau c%iar
ca elemente constituti;e ale unui alt site. !e e)empluG un site de tip mono-pa+in& care 'ace
pre9entarea unui manual de HTML poate 'i 'olosit ca pa+in& indi;idual& ntr-un site de li>r&rie
electronic&G sau poate constitui o le+&tur& util& din interiorul unui site de desi+n Fe>G m&rind ast'el
ansele ca pa+ina respecti;& s& 'ie accesat& de ;i9itatori printr-unul dintre aceste puncte.
2. Etapele plani'ic&rii site-ului
$rocesul de plani'icare a unui site tre>uie s& parcur+& urm&toarele etapeH
:ta>ilirea audienei
:ta>ilirea scopului
!e'inirea o)iecti?elor
Colectarea in;or"aiilor despre su>iectul pre9entat
:ta>ilirea speci;icaiilor
:ta>ilirea "odului de pre*entare
Audiena
$entru a crea un site de calitate i o comunicare e'icient& a in'ormaiilorG o etap& deose>it de
important& este de'inirea audienei site-ului. ,udiena repre9int& pu>licul c&ruia i se adresea9& site-
ul. :ta>ilirea audienei site-ului dumnea;oastr& este esenial& deoarece contri>uie la de'inirea
coninutului pa+inilorG precum i a or+ani9&rii i aspectului s&u. <n site Fe> creat pe >a9a unor
in'ormaii precise asupra audienei sale actuale i ;iitoare are mult mai multe anse de succes dec0t
unul care nu se adresea9& unui pu>lic speci'ic.
:ta>ilirea audienei unui site implic& doi paiH
!e'inirea pu>licului int&.
Tre>uie s& sta>ilii cui se adresea9& site-ul dumnea;oastr&. $uteiG de e)emplu s& ;& adresai
Jpersoanelor care studia9& c%imiaJ. !ei este un enun care de'inete ntr-o oarecare m&sur&
audiena site-uluiG este de dorit ca de'inirea audienei s& 'ie mai precis& dec0t at0t. 7& putei adresa
de pild&G specialitilor n c%imieG i atunci in'ormaiile ;or a;ea un nalt +rad de speciali9are i un
ni;el tiini'ic ridicat sau ;& putei adresa ele;ilor de liceu interesai de studiul c%imieiG sau care ;or
da e)amene la aceast& disciplin&. In acest ca9 in'ormaiile ;or 'i de ni;el mai +eneralG le+ate de
pro+rama colar& i de tipurile de su>iecte cu care ele;ii se ;or con'runta la e)amene.
13
!ac&G de e)empluG dorii s& creai un site comercialG sta>ilirea se+mentului de pia& c&ruia ;&
adresai este la 'el de important&. !ac& intenionai s& ;indei produse cosmetice ;& ;ei adresa
pro>a>il 'emeilor. !ar aceasta este o repre9entare mult prea +eneral& a pu>licului dumnea;oastr&.
,i putea s& 'ii mai speci'icG sta>ilindu-;& drept se+ment de pia& 'emeile cu ;0rsta mai mic& de 2
de ani. In aceast& situaie este mai pro>a>il c& ;or a;ea succes produsele de n'rumuseare mai
ndr&9neeG n ;reme ceG dac& ;& adresai 'emeilor de ;0rst& medieG cele mai >ine ;0ndute ;or 'i
produsele de ntreinereG cremele anti-ridG etc.
Conclu9ia care se impune este c& de'inirea c0t mai precis& a audienei este de'initorie pentru
toate etapele ulterioare ale ela>or&rii site-ului. Cu c0t mai >ine de'init& este audienaG cu at0t ansele
de a crea un site de succes sunt mai mari.
!e'inirea in'ormaiilor necesare care pri;esc pu>licul int&.
Au toate in'ormaiile despre pu>licul int& sunt eseniale n ela>orarea site-ului. !ac&
intenionai s& ;& adresai specialitilor n c%imieG care anume caracteristici ale acestora sunt
importante pentru dumnea;oastr&? Ai;elul de educaie? ,ria de speciali9are? Caracteristici
personaleG precum n&limea i +reutatea? E;identG e)cept0nd ca9ul n care intenionai s& ;indei
prin intermediul site-ului ec%ipament de la>oratorG ultimele in'ormaii sunt inutile. $rin urmare este
necesar s& identi'icai in'ormaiile rele;ante pri;itoare la audiena site-ului dumnea;oastr&.
&copul
:ta>ilirea scopului site-ului este etapa n care tre>uie s& r&spundei la ntre>area Jde ceTJ. !e
ce dorii s& creai acest site? !e'iniia scopului site-ului repre9int& tema conduc&toare n procesul de
construire a acestuia. <n site '&r& un scop clar i >ine de'init lansea9& un mesaC necon;in+&tor i
ceos. 7i9itatorul se ;a ntre>aG '&r& ndoial&G JLa ce ser;ete acest site?J i se ;a +r&>i s&-l
p&r&seasc&.
$entru a de'ini scopul site-ului tre>uie s& a;ei n ;edere urm&toarele elementeH
,ria de cuprindere a su>iectului. :& presupunem c& dorii s& creai un site care s& conin&
in'ormaii despre mu9ica roc? a anilor o(3. Intr-o asemenea situaieG nu ;ei de'ini drept su>iect
al site-ului mu9ica roc? n ansam>luG deoarece o de'inire at0t de ;ast& dep&ete cu mult aria de
cuprindere a su>iectului dumnea;oastr&.
,udiena. In scopul site-ului tre>uie s& 'acei re'erire i la audiena sta>ilita anterior. ,st'elG
scopul site-ului ar putea 'i de'init n maniera urm&toareH J:ite-ul o'er& in'ormaii iu>itorilor
mu9icii roc? a anilor o(3G de ;0rst& medieJ.
Ai;elul de detaliere a su>iectului. Tre>uie s& speci'icai dac& ;& re'erii doar la +rupurile roc?
repre9entati;e sau dorii s& 'acei o istorie complet& a perioadei.
4ene'iciul sau a;antaCul ;i9itatorului. Ce are de c0ti+at o persoan& care ;i9itea9& site-ului
dumnea;oastr&? $oate a'la in'ormaii inedite despre 'ormaiile pre'erateG sau poate 'i in'ormat cu
pri;ire la e;oluia lor ulterioar&.
:ta>ilirea scopului site-ului determin& deci9iile ulterioare ale desi+nerului pri;ind mesaCul pe
care l transmite site-ul. <n scop >ine articulat ser;ete ca Calon pentru toate celelalte etape ale
procesului de plani'icare i creare a site-ului. :copul site-ului poate repre9enta c%iar prima
in'ormaie care le este o'erit& ;i9itatorilorG la intrarea pe prima pa+in&.
+biectivele
13(
!up& ce ai sta>ilit audiena site-uluiG care sunt in'ormaiile pri;itoare la pu>licul int&G precum
i scopul s&uG pasul urm&tor const& n com>inarea tuturor acestor in'ormaii i 'ormularea unor
o>iecti;e speci'ice ale site-ului dumnea;oastr&. ">iecti;ele repre9int& o detaliere a scopului +eneral
al site-uluiG conin0nd in'ormaiile speci'ice care ;or conduce la ndeplinirea scopului pentru care a
'ost creat site-ul. !e e)empluG dac& scopul unui site este Js& o'ere in'ormaii despre oraul MMMJ G
acesta poate 'i dus la ndeplinire prin intermediul unor o>iecti;e speci'ice i ;ariate cum ar 'iH
in'ormaii despre ae9area +eo+ra'ic& a orauluiG despre de9;oltarea economic&G despre ;iaa
cultural&G o>iecti;e turisticeG etc. Cu alte cu;inteG n ;reme ce scopul site-ului comunic& ce a;ei de
+0nd s& 'aceiG o>iecti;ele comunic& ce in'ormaii ;ei o'eri pentru a ;& ndeplini scopul propus.
:pre deose>ire de scopul site-uluiG o>iecti;ele se pot modi'ica n timpG pe m&sur& ce apar noi
in'ormaii despre pu>licul int& sau despre su>iectul site-uluiG cu aCutorul c&rora putei susine mai
>ine scopul s&u.
Colectarea informaiilor despre subiect
6n'ormaiile re'eritoare la su>iectul site-ului includ at0t in'ormaiile on-line c0t i sursele
clasice de in'ormaii. In aceast& etap& ;ei colecta nu numai in'ormaii le+ate de su>iectul site-ului
care ;or 'i pre9entate utili9atorului ci i in'ormaiile i cunotinele de care a;ei ne;oie pentru
reali9area site-ului.
$aii necesari n construirea coleciei de in'ormaii necesare suntH
:ta>ilirea in'ormaiilor necesareG at0t cele pe care le ;ei 'urni9a ;i9itatorului c0t i cele care ;&
sunt necesare dumnea;oastr&
!eterminarea modului cum ;ei o>ine aceste in'ormaii. In aceast& etap& tre>uie s& identi'icai
sursele de documentare. 6n'ormaiile despre su>iectul ales le putei +&si pe Fe>G n literatura de
specialitateG n di;erse >a9e de date.
Modul de reactuali9are a in'ormaiilor. !ac& in'ormaiile pe care dorii s& le pre9entai sunt
dinamice i se perimea9& cu repe9iciuneG tre>uie s& sta>ilii cum intenionai s& le actuali9ai i care
este inter;alul de timp ntre dou& reactuali9&ri. !e e)empluG dac& intenionai s& creai un site care
s& pre9inte tiri sau date despre ;remeG ele ;or tre>ui reactuali9ate 9ilnic sau c%iar mai 'rec;ent.
!ac& site-ul pre9int& in'ormaii despre istorieG e;ident c& in'ormaiile ;or 'i reactuali9ate mult mai
rarG e;entual la apariia unor noi descoperiri ar%eolo+iceG de e)emplu.
&pecificaiile
:ta>ilirea speci'icaiilor pentru un site repre9int& o detaliere a o>iecti;elor sale i de'inirea
unor cerine sau a unor restricii. :peci'icaiile descriu n detaliu ce in'ormaii ;or 'i o'erite n
pa+inile site-ului i cum ;or 'i ele pre9entate. !e e)empluG dac& unul dintre o>iecti;ele unui site
este J'urni9area de le+&turi c&tre surse >i>lio+ra'ice re'eritoare la su>iectJ G atunci speci'icaiile ;or
preci9a care sunt aceste surse >i>lio+ra'iceG care sunt adresele lor <=LG c0te ast'el de adrese ;or 'i
incluse ntr-o pa+in&G etc.
:peci'icaiile tre>uie s& identi'ice toate resursele necesare atin+erii o>iecti;elorH lin?-uriG
'iiere +ra'iceG 'iiere de sunet sau ;ideoG alte elemente care ;or 'i incluse n siteH 'ormulareG ima+ini
%art&G scripturi. !e asemeneaG n cadrul speci'icaiilor tre>uie sta>ilite i elementele care nu ;or 'i
incluse n pa+ini 1dac& este ca9ul2. !e e)empluG se poate speci'ica s& nu 'ie 'olosite anumite e)tensii
HTMLG sau 'ormulareG 'iiere care s& dep&easc& anumite dimensiuniG etc.
0odul de pre2entare
13*
$lani'icarea modului de pre9entare implic& o serie de deci9ii care ;or ser;i drept puncte de
reper n etapa de construire e'ecti;& a site-ului. ,ceast& etap& poate includeH
Crearea unor template-uri pentru site
Crearea unor mostre de documente HTMLG ima+ini %art&G sau 'ormulare
Ealonarea n timp a etapelor de creare a site-ului.
Capitolul 1
2esi,nul site9ului
"dat& parcurs& etapa de plani'icareG a;0nd clare audienaG scopulG o>iecti;ele i speci'icaiile
site-uluiG putei trece la etapa de creare e'ecti;&. $entru ca site-ul dumnea;oastr& s& ai>& un aspect
pl&cutG o >un& or+ani9areG instrumente de na;i+are e'iciente tre>uie s& cunoatei i s& aplicai
re+ulile 'undamentale de Fe> desi+n.
C0nd suntei n 'a9a de concepere a desi+nului principalul dumnea;oastr& o>iecti; este s&
creai un aspect atracti; i s& o'erii ;i9itatorului site-ului un sentiment de satis'acieG pe m&sur& ce
acesta parcur+e pa+inile. !esi+nul unui site tre>uie s& ec%ili>re9e per'ormanele >roEseruluiG cu
estetica i 'uncionalitatea site-ului. In etapa de desi+n sunt luate deci9iile de ordin practic care ;or
conduce la ndeplinirea o>iecti;elor sta>iliteH c0te ima+ini sau elemente +ra'ice ;ei include n
pa+in&G c0t de mult te)t ;or conine pa+inileG ce te)te sau ima+ini ;or 'i 'olosite drept le+&turi.
1. $rincipiile desi+nului Ee>
$entru a lua deci9iile corecte n ceea ce pri;ete desi+nul unui site tre>uie s& a;ei n ;edere
c0te;a principii de >a9&H
13-
1socierea se"ni;icaiilor. .olosii-;& de puterea %Wperte)tului pentru a sta>ili le+&turi ntre
in'ormaiile nrudite ca semni'icaie.
Meninerea co"petiti?itGii. !eoarece Fe>-ul este un mediu 'oarte competiti;G asi+urai-;& c&
desi+nul site-ului se menine la cel mai sc&9ut cost posi>ilG din punctul de ;edere al ;i9itatorului.
,cest cost include timpul de nc&rcare al pa+inilorG aplicaiile suplimentare necesare pentru
;i9uali9area optim& a pa+inilor precum i e'ortul depus de ;i9itator pentru a nele+e in'ormaiile
pre9entate.
6olosirea e;icientG a resurselor. ,le+ei pentru site-ul dumnea;oastr& acele elemente care
;in n nt0mpinarea necesit&ilor utili9atoruluiG i sunt c0t mai e'iciente posi>il din punctul de ;edere
al dimensiunii 'iierelorG al timpului de acces i al ntreinerii ulterioare.
Concentrarea pe necesitGile utili*atorului. ,cesta esteG poateG cel mai important principiu
de Fe> desi+n iG parado)alG cel mai adesea i+norat. <n site Fe> nu se construiete pentru a
satis'ace +ustul desi+nerului 1sau al clientului pentru care lucrea9&2 i nici pentru a etala
cunotinele sale ;aste asupra celor mai noi te%nici de pro+ramare Fe>G ci pentru a ;eni n
nt0mpinarea ne;oii de in'ormaii a ;i9itatorilor s&i. .ocali9area asupra utili9atorului este prioritatea
principal& a unui site de calitate.
Vnele,erea per"ea)ilitGii. ,cest principiu se re'er& la nele+erea i asumarea 'aptului c&
;i9itatorul poate accesa un site prin oricare pa+in& a sa. !in acest moti; este de dorit ca in'ormaiile
din cadrul unei pa+ini s& se auto-susin& '&r& a depinde de in'ormaiile din restul site-ului. !ac&
acest lucru nu este posi>ilG este o>li+atorie pre9ena unor instrumente de na;i+aie e'iciente care s&
permit& ;i9itatorului orientarea cu uurin& n interiorul site-ului.
Crearea unui aspect plGcutP coerent Ji ;luent. $a+inile site-ului tre>uie s& o'ere impresia unui tot
>ine or+ani9atG elementele ;i9uale 1icon-uriG elemente de na;i+are2 tre>uie s& 'ie coerente pe tot
parcursul site-uluiG 'iecare pa+in& tre>uie s& conin& indicii asupra identit&ii site-ului i asupra
scopului ei.
&usinerea interacti?itGii. C%iar dac& nu 'olosii 'ormulare care asi+ur& un +rad nalt de
interacti;itate cu ;i9itatorii site-uluiG este o>li+atorie pre9ena unor in'ormaii de contact 1adresa de
mail a Fe>master-uluiG cel puin2 ast'el nc0t utili9atorii s& poat& o>ine in'ormaii suplimentare sau
s& poat& comunica e;entualele pro>leme ap&rute la parcur+erea site-ului.
&usinerea na?i,aiei. ,si+urarea unor instrumente de na;i+aie e'iciente este una dintre
condiiile eseniale ale unui site de calitate. :e spune c& un site >un este acela n care ;i9itatorul nu
este niciodat& o>li+at s& apese >utonul 4ac? al >roEserului.
2. "r+ani9area unui site
4una or+ani9are a site-ului este unul dintre elementele c%eie ale succesului s&u. Modul de
or+ani9are depinde de scopulG o>iecti;ele i su>iectul site-ului i se >a9ea9& pe principiile de desi+n
enunate mai sus.
In 'uncie de structura lorG site-urile se mpart n mai multe cate+oriiH
site-uri liniareG 'ormate dintr-o sin+ur& pa+in& 1mono-pa+in&2
site-uri liniare 'ormate din mai multe pa+ini 1multi-pa+in&2
site-uri cu structur& ierar%ic&
site-uri cu structur& de tip Fe>
13/
Le+&turile dintre pa+ini tre>uie s& 'ie corespun9&toare tipului de site pe care l construii.
&ite)urile liniare mono)pagin
,cest tip de site esteG aa cum indic& i numeleG 'ormat dintr-o sin+ur& pa+in&. ,ceast&
structur& se 'olosete atunci c0nd in'ormaiile pre9entate sunt su> 'orm& de te)t care se poate
mp&ri 'iresc n seciuni mai mici. 7i9itatorii pot parcur+e ntrea+a pa+in& derul0nd-o darG de
o>iceiG la nceputul pa+inii e)ist& o list& de le+&turi care are rol de Cuprins. ,cestea sunt nite
le+&turi interne 1ancore2 care conduc rapid ;i9itatorul la seciunea care l interesea9&G '&r& a mai
derula ntrea+a pa+in&. Imp&rirea coninutului pa+inii n seciuni mai mici se poate 'ace 'olosind
linii ori9ontale. Este indicat ca la 'iecare nou& seciune s& inserai o le+&tur& intern& c&tre partea
superioar& a pa+inii unde se a'l& Cuprinsul.
&ite)urile liniare multi)pagin
:tructura de acest tip se 'olosete n situaia c0nd in'ormaiile pre9entate se succed ntr-o ordine
sec;enial&G de la nceput la s'0ritG in'ormaiile pre9entate ntr-o pa+in& >a90ndu-se pe cele din
pa+ina anterioar&. $entru a-l ndruma pe ;i9itator s& parcur+& site-ul n ordineG 'iecare pa+in&
tre>uie s& conin& o le+&tur& cu pa+ina urm&toareG precum i cu cea anterioar&. !e asemeneaG este
necesar s& inserai i o le+&tur& cu prima pa+in& a site-ului care tre>uie s& conin& CuprinsulG pentru
a 'acilita i saltul direct la o anumit& pa+in&. Intr-un site cu o ast'el de structur& pa+inile nu tre>uie
s& 'ie prea lun+i 1de dorit ar 'i s& nu dep&easc& un ecran2 pentru a 'ace na;i+area mai comod&. Cu
toate c& acest tip de or+ani9are este lo+ic&G nu tre>uie s& uitai principiul permea>ilit&ii. $entru un
;i9itator care ;a intra n site printr-o pa+in& oarecareG indicaii de na;i+are cum ar 'i JInainteJ G
JInapoiJ ar putea s& nu ai>& prea mult neles.
&ite)urile cu structur ierar$ic
:ite-urile de acest tip sunt cele mai numeroase pe Fe>. <n ast'el de site este 'ormat dintr-o
pa+in& de >a9& 1Home2 de ni;el 9eroG care conine le+&turi c&tre alte pa+iniG 'iecare pa+in&
conin0nd c0te o parte a su>iectului site-ului. .iecare dintre aceste pa+ini de ni;el unu poate a;eaG la
r0ndul s&uG le+&turi cu alte pa+iniG detaliind su>iectul i 'urni90nd in'ormaii speci'ice.
<n e)emplu de site de acest tip este o li>r&rie ;irtual&. $a+ina Home ar putea conine le+&turi
c&tre di;erse cate+oriiH 4eletristic&G 6storieG $olitic&G EconomieG Calculatoare i 6nternet. !ac& un
;i9itator este interesat de un manual de pro+ramare n $erlG el ;a ale+e le+&tura c&tre Calculatoare i
6nternet i ;a aCun+e ntr-o pa+in& de ni;elul unu unde ;a +&si le+&turi c&tre $ro+ramareG 6nternetG
HardEare. 7a ale+e le+&tura $ro+ramare care ;a desc%ide o pa+in& de ni;elul doi care ;a conine o
list& de titluriG printre care i manualul c&utat.
,tunci c0nd concepei structura unui ast'el de siteG tre>uie s& acordai o mare atenie
or+ani9&rii lo+ice i 'luente a site-ului. .iecare pa+in& tre>uie s& conin& o le+&tur& c&tre pa+ina
Home ast'el nc0t ;i9itatorul s& poat& re;eni la nceput '&r& s& 'ie o>li+at s& str&>at& toate ni;elele.
Au le+ai prima pa+in& de prea multe pa+ini de ni;elul unu ci rami'icai-le n ad0ncime. !ac& site-
ul este de mari dimensiuniG introducei n partea superioar& a 'iec&rei pa+ini o >ar& de na;i+are care
in'ormea9& ;i9itatorul despre locul unde se a'l&. =e;enind la e)emplul cu li>r&riaG un ast'el de
instrument de na;i+are ar putea ar&ta aaH Home 8 /alculatoare ( :rogramare.
In plusG este indicat s& o'erii o >ar& de na;i+are secundar& la >a9a pa+inii.
&ite)urile de tip reea.
,ceste site-uri au o structur& li>er&. Ele sunt 'ormate din mai multe pa+iniG 'iecare put0nd
a;ea le+&tur& cu oricare alt& pa+in&. E)ist& i aici o pa+in& HomeG ns& de la eaG ;i9itatorul poate
na;i+a prin site '&r& a urma un drum precis. In +eneralG acest tip de site este potri;it pentru
143
su>iectele care nu au o structur& lo+ic& intern&G su>iecte recreaionale sau distracti;e. !ac& dorii s&
creai un site de acest tipG tre>uie s& a;ei +riC& s& o'erii n 'iecare pa+in&G pe l0n+& le+&turile cu alte
pa+iniG o le+&tur& c&tre pa+ina Home. In plusG asi+urai-;& c& materialul dumnea;oastr& este adec;at
acestui tip de site deoarece alt'el site-ul ;a purta amprenta neconcordanei ntre su>iectul a>ordat i
modul s&u de or+ani9are.
3. Metodolo+ia de construire a site-ului
!ei nu e)ist& un mod unic de des'&urare a procesului de construire a unui siteG e)ist& trei
tipuri de a>ord&ri posi>ileG pe care creatorul site-ului le poate ale+e sau com>inaG n 'uncie de
necesit&i.
0etoda 13op)Down1
!ac& desi+nerul are nc& de la nceput o idee clar& asupra coninutului site-uluiG aceast&
a>ordare este cea mai potri;it&. In acest tip de metodolo+ieG este creat& mai nt0i pa+ina de nceput a
site-ului 1pa+ina Home2 i apoi celelalte pa+ini. $a+inile pot conine un minim de in'ormaiiG
urm0nd ca la de9;oltarea ulterioar& a site-uluiG ele s& 'ie m>o+&ite. ,;antaCul maCor al acestei
a>ord&ri este acela c& permite continuitatea ;i9ual& i de coninutG deoarece toate pa+inile ;or 'i
construite n acord cu pa+ina de start. " metod& 'oarte >un& de a reali9a acest lucru este crearea
unor template-uri care s& conin& acelai tip de elemente pentru toate pa+inile i care ;or 'i 'olosite
drept tipare la momentul scrierii codului HTML pentru pa+inile respecti;e.
0etoda 1!ottom)4p1
,ceast& a>ordare se 'olosete c0nd desi+nerul nu cunoate de la nceput care ;or 'i structura i
aspectul 'inal al site-uluiG dar cunoate aspectul i coninutul unor pa+ini din cadrul s&u. ,ceast&
situaie poate ap&rea c0nd dorii ca site-ul s& conin& pa+ini deCa e)istenteG care au 'ost create n
procesul de de9;oltare al altui siteG de e)emplu. C%iar dac& nu deinei pa+ini create deCa de la care
s& porniiG aceast& a>ordare permite crearea unor pa+ini indi;iduale care ndeplinesc anumite
o>iecti;e i care pot 'i le+ate apoi de o pa+in& Home. ,;antaCul a>ord&rii J4ottom-<pJ este acela
c&G la construirea pa+inilor indi;idualeG nu mai suntei constr0ns la respectarea unui anumit stilG
consec;ent cu cel din pa+ina Home. TotuiG aCustarea ulterioar& a pa+inilor n sensul reali9&rii unui
aspect unitarG este necesar&.
0etoda incrementrii
,ceast& metod& const& n construirea unei pa+ini de start i a unor pa+ini indi;iduale le+ate de
acestaG a;0ndu-se n ;edere crearea unor pa+ini intermediareG pe m&sura necesit&ilor. Metoda se
'olosete atunci c0nd este necesar& construirea rapid& a unui site care urmea9& a 'i de9;oltat ulteriorG
n loc de a-l construi n ntre+ime de la nceput. Este o metod& nerecomandat& ncep&torilorG
deoarece prin ad&u+irile ulterioare e)ist& riscul de a o>ine un site de'ectuos or+ani9at i lipsit de
unitate.
4. Te%nici de desi+n Ee>
$entru a reali9a desi+nul unui site sunt 'olosite o serie de te%nici cu aCutorul c&rora pa+inile
cap&t& conturG at0t din punct de ;edere ;i9ual c0t i din punct de ;edere al or+ani9&rii le+&turilor i
al amplas&rii coninutului n pa+ini. In continuare sunt pre9entate c0te;a dintre aceste te%niciG
'iecare dintre ele re'erindu-se la c0te un aspect al desi+nului site-ului.
&c$ia site)ului
141
"dat& ce ;-ai decis asupra modului n care ;a 'i structurat site-ul este 'oarte >ine ca nainte de
a ncepe scrierea e'ecti;& a codului HTML pentru 'iecare pa+in& n parteG s& reali9ai o sc%i& a
ntre+ului site.
$utei 'olosi n acest scop Microso't Ford sau orice alt procesor de te)t. $entru nceput creai
un document nou n care listai punctele maCore pe care dorii s& le acoperii n pa+ina Home.
.acei de asemenea o list& a elementelor +ra'ice pe care intenionai s& le includeiG nsoite de
indicaii pri;ind ae9area lor n pa+in&. :ta>ilii care sunt pa+inile de ni;el unu i ce in'ormaii
dorii s& o'erii n cadrul lorG precum i pa+inile su>ordonate acestora care ;or cuprinde detalierea
su>iectelor anunate n pa+inile de ni;el unu.
$entru a a;ea o ima+ine c0t mai e)act& a structurii site-ului nc& din 'a9a de sc%iare a sa este
recomandat s& 'olosii >ara de instrumente Butlining din meniul *ools 8 /ustomi)e din Ford.
,ceasta ;& permite s& sta>ilii ni;elul pa+inilor i s& reali9ai cu uurin& rami'icarea lor n
ad0ncime.
" alt& metod& pentru a reali9a sc%ia site-ului o constituie +ra'icul 1sau %arta2 site-ului. !ac&
nu dorii s& ;& complicai 'olosind un editor de te)t sau un pro+ram de +ra'ic&G putei reali9a o ast'el
de sc%i& i pe %0rtieG cu creionul. !esenai c0te un dreptun+%i pentru 'iecare pa+in& din siteG
speci'ic0nd n interiorul s&u scopul i o>iecti;ele pa+iniiG elementele i aranCarea lor n pa+in&. ,poi
unii dreptun+%iurile prin s&+ei pentru a speci'ica traseele pe care le poate parcur+e utili9atorul.
:&+eile repre9int& de 'apt le+&turile dintre pa+ini. ,;ei +riC& ca spre pa+ina Home s& indice toate
s&+eileG pentru a asi+ura ast'el o le+&tur& cu ea din orice pa+in& a site-ului. In acest mod putei
plani'ica pentru 'iecare pa+in& ce urmea9& s& ;ad&G s& nelea+& i s& 'ac& ;i9itatorul acesteiaG
precum i unde se poate deplasa din pa+ina respecti;&.
"ricare ar 'i metoda 'olosit& pentru a sc%ia site-ulG la 'iecare pa+in& tre>uie s& ;& punei
urm&toarele ntre>&riH
Ce doresc s& a'le ;i9itatorul din aceast& pa+in&?
Ce doresc s& 'ac& ;i9itatorul n acest moment?
Ce doresc s& simt& ;i9itatorul parcur+0nd pa+ina?
<nde doresc s& mear+& ;i9itatorul n continuare?
!esi+urG n ultim& instan& comportamentul i impresiile ;i9itatorului scap& controlului
desi+neruluiG ns& un site n care 'iecare pa+in& d& r&spunsuri clare i limpe9i acestor ntre>&ri are
'oarte multe anse de a ntruni aprecierile po9iti;e ale ;i9itatorilor s&i.
5a,ina de intrare @n site +pa,ina splasC-
E)ist& multe site-uri care nainte de pa+ina Home au o pa+in& de intrare n siteG numit& pa,inG
splasC. :copul unei ast'el de pa+ini este identi'icarea rapid& a o>iectului site-ului n timp ce se
ncarc& restul de date. $a+ina splas% are pentru site acelai rol pe care l are coperta unei c&ri sau
prima pa+in& a unei re;iste. ,ceast& prim& pa+in& tre>uie s& se ncarce rapidG s& ai>& un impact
;i9ual puternic i s& comunice esenialul despre su>iectul site-ului sau compania c&reia i aparine
site-ul.
E)ist& opinii di;er+ente n le+&tur& cu 'olosirea i utilitatea pa+inii splas% ntr-un site. Mai
ales dac& 'ace apel la elemente multimediaG sunetG +ra'ic&G animaie comple)& care ncetinesc timpul
de nc&rcareG pa+ina splas% poate aduce mai de+ra>& deser;icii site-ului. In plusG pa+ina splas%
poate 'i resimit& de ;i9itator ca o >arier& n accesul imediat la in'ormaiile din interiorul site-ului.
5a,ina Ho"e
142
!ei aspectul i coninutul pa+inii Home poate ;aria 'oarte multe de la un site la altulG e)ist&
c0te;a elemente comune pre9ente n orice pa+in& de startH
6denti'icarea 'irmei sau companiei c&reia i aparine site-ul 1dac& este ca9ul2
!escrierea scopului site-ului
!escrierea structurii site-ului. $a+ina Home are i 'uncia de Cuprins al site-ului o'erind
indicaii ;i9itatorilor asupra su>iectelor a>ordate
:ta>ilirea relaiilor ntre seciunile de ni;el unu ale site-ului i cele su>ordonate lor. ,ceasta se
reali9ea9& prin intermediul >arelor de na;i+areG >utoanelorG %&rilor de ima+ini sau listelor de
le+&turi.
.urni9area in'ormaiilor de contact.
5a,inile din interior
$a+inile de ni;el unu repre9int& di;i9iunile maCore ale su>iectului +eneral al site-ului. E)ist&
tentaia de a include prea multe in'ormaii detaliate la acest ni;el. !ac& site-ul acoper& un su>iect
;astG cu o cantitate mare de in'ormaii speci'iceG este >ine s& l&sai detalierea acestora pentru
pa+inile de ni;el doi. $a+inile de ni;el unu tre>uie s& conin& o descriere succint& a su>iectului
acoperit precum i le+&turi c&tre pa+inile de ni;el doi care detalia9& 'iecare parte a su>iectului. "
te%nic& des utili9at& este plasarea resurselor suplimentare n pa+ini de ni;elul trei. !e e)emplu o
pa+in& de ni;elul doi care o'er& pe l0n+& te)t i ima+ini e)plicati;e ale unui anumite noiuni poate 'i
le+at& de pa+ini de ni;el trei care conin ima+inile. C0nd ;i9itatorul 'ace clic? pe un anumit te)t
a'lat n pa+ina de ni;el doi se desc%ide pa+ina de ni;el trei cu ima+inea e)plicati;&. ,;antaCul
acestei a>ord&ri este descon+estionarea pa+inilor de ni;elul doi care cuprind detalierea su>iectului.
:c%ia dumnea;oastr& tre>uie s& cuprind&G pe l0n+& modul de or+ani9are a pa+inilorG i o list&
c0t mai complet& a elementelor pe care dorii s& le includei n 'iecare pa+in& 1ima+iniG 'ormulareG
'iiere multimediaG etc.2.
*ragmentarea informaiilor
"mul poate procesa o cantitate limitat& de in'ormaii ntr-o anumit& unitate de timp. !in acest
moti;G una dintre sarcinile speci'ice n desi+nul Fe> este 'ra+mentarea in'ormaiilor n sec;ene
care s& nu dep&easc& posi>ilit&ile de cuprindere ale utili9atorului. Cantitatea de in'ormaii cuprins&
ntr-o pa+in& nu tre>uie s&-l copleeasc& pe ;i9itatorul pa+inii sau s& m&reasc& timpul ei de
nc&rcare. !e asemeneaG modul de 'ra+mentare al in'ormaiei tre>uie s& 'ocali9e9e atenia
;i9itatorului asupra principalelor su>iecte a>ordate n pa+in& i s& l aCute s& ia cunotin& n mod
+radat de su>iectul pre9entat. .ra+mentarea corect& a in'ormaiilor este n a;antaCul desi+neruluiG
deoarece l aCut& s& cree9e pa+ini reutili9a>ile. !ac& 'iecare pa+in& pe care o ;ei crea ser;ete la
ndeplinirea unui anumit scopG putei include aceast& pa+in& 'ie directG 'ie ca o resurs& util& i n alte
site-uri pe care le creai ulterior i care au su>iecte cone)e cu pa+ina respecti;&.
In cadrul site-ului 'ra+mentarea in'ormaiilor conduce la sta>ilirea modului n care ;a 'i
detaliat su>iectulG la determinarea num&rului de pa+ini necesare pentru acesta precum i a ni;elului
pa+inilor. !ei di;i9area su>iectului n p&ri mai mici este o te%nic& deose>it de util&G nu a>u9ai
totui de puterea %Wperte)tului. " 'ra+mentare e)cesi;& a su>iectului ntr-un mare num&r de pa+ini
este la 'el de o>ositoare ca i pre9entarea acestuia n >loc. <n desi+n e'icient anticipea9& ne;oia
;i9itatorului de a o>ine in'ormaii suplimentare i 'urni9ea9& la momentul oportun le+&turi c&tre
pa+inile care detalia9& acel punct.
In cadrul unei pa+ini modul de 'ra+mentare al in'ormaiilor ine de lo+ica intern& a su>iectului
pre9entat. $entru a di'erenia p&rile constituti;e ale su>iectului unei pa+ini o mare importan& o are
or+ani9area te)tului n cadrul pa+inii.
143
Cei mai muli dintre cei care na;i+%ea9& pe Fe> o>inuiesc s& Jscane9eJ pa+inile n c&utare de
in'ormaii. Ei citesc mai nt0i titlurileG listeleG i primele 'ra9e dintr-un para+ra'. Este >ine s& inei
seama de acest lucru c0nd or+ani9ai te)tul n pa+in&.
Coninutul pa+inii tre>uie s& 'ie c0t mai uor de citit. .olosii para+ra'e scurteG desp&rite prin
linii li>ereG e;itai 'ra9ele prea lun+i i 'olosii n mod Cudicios titlurile. ,ccentuai p&rile pe care
;rei s& le scoatei n e;iden& n te)t prin n+roare sau scrierea lor cu alt& culoareG dar nu n e)ces.
,>u9ul de culori sau de te)te scrise cu caractere aldine 'ac pa+ina nc&rcat& i +reoaie. Este indicat
s& ;& limitai la un num&r redus de tipuri de 'ont. Cele mai apreciate sunt 7erdana i ,rialG deoarece
sunt li9i>ile i ele+ante. Este mai >ine s& e;itai 'olosirea tipului Times AeE =omanG dei este un tip
'oarte 'olosit n editarea de te)te. :pre deose>ire de te)tele tip&riteG pe monitor citirea se 'ace cu
2_ mai ncet deoarece monitorul adau+& 'onturilor un anumit +rad de neclaritate 1#u))iness2G mai
accentuat la 'onturile cu seri'eG aa cum este Times AeE =oman. Au aranCai te)tul n pa+in& pe
dou& coloane ast'el nc0t ;i9itatorul s& 'ie ne;oit s& re;in& n partea superioar& a pa+inii pentru a citi
ce-a de-a doua coloan&. ,cest 'ormat este potri;it pentru 9iare i re;iste dar nu i pentru o pa+in&
Fe> deoarece rupe cursi;itatea deplas&rii n cadrul site-ului.
Legarea paginilor
Modul n care ;ei reali9a le+&turile dintre pa+ini depinde de structura site-ului. !ac& optai pentru o
structur& ierar%ic&G le+&turile din interiorul site-ului ;or 'i adaptate acestei structuri. ,;antaCul
structurii ierar%ice este c& o'er& utili9atorului posi>ilitatea unei na;i+&ri lo+iceG plec0nd de la
in'ormaiile +enerale c&tre cele particulare. !e9a;antaCul acestei te%nici este c& utili9atorul tre>uie
s& urme9e o cale presta>ilit& pentru a aCun+e la o anumit& in'ormaieG care se poate a'la c0te;a lin?-
uri distan& de pa+ina Home.
" alt& manier& de a reali9a le+&turile din interiorul site-ului este de a le+a 'iecare pa+in& de
toate celelalte. 7ei o>ine ast'el o structur& ne-ierar%ic& care are a;antaCul c& 'iecare pa+in& se a'l&
la distan& de un lin? de oricare altaG inclusi; de pa+ina Home. $entru site-urile de dimensiuni
reduse o ast'el de structur& poate 'unciona >ineG ns& pentru site-urile cu un mare num&r de pa+ini
num&rul de le+&turi crete rapid iar na;i+area n interiorul site-ului de;ine 'oarte di'icil&. In plusG
utili9atorul nu are la dispo9iie o cale ierar%ic& prin care poate aCun+e la o in'ormaie speci'ic&.
.nstrumentele de navigare
$entru a reali9a o na;i+are lo+ic& i e'icient& n cadrul site-ului instrumentele de na;i+are
tre>uie s& 'ie per'ect adaptate modului n care sunt create le+&turile dintre pa+ini i n plusG s& o'ere
indicii ;i9uale asupra 'unciei lor. $entru a crea un aspect ;i9ual unitar al ntre+ului site i pentru a
nu deruta ;i9itatorulG este recomandat ca instrumentele de na;i+are s& 'ie aceleai n toate pa+inile.
:ta>ilii de la nceput aspectul icon-urilorG >utoanelor sau te)tului pe care le ;ei 'olosi drept
le+&turi i p&strai-l pe parcursul ntre+ului site. ,ceast& te%nic& o'er& site-ului coeren& i unitate i
sta>ilete imediat identitatea 'iec&rei pa+ini n cadrul site-ului. In plusG 'olosirea repetat& a acelorai
elemente +ra'ice de na;i+are m&rete e'iciena >roEserului deoarece acestea sunt nc&rcate la
desc%iderea primei pa+ini i stocate n memoria cacheG '&r& a mai 'i necesar& nc&rcarea lor la
'iecare nou& pa+in&.
6nstrumentele de na;i+are tre>uie s& 'ie c0t mai uor de neles i locali9at. !ac& 'olosii o >ar& de
na;i+are plasai-o acolo unde ;i9itatorii sunt o>inuii s& o cauteH n partea superioar& a pa+inilorG n
st0n+a sau n dreapta pa+inii. .olosii o >ar& secundar& de na;i+are la >a9a pa+iniiG aceasta l ;a
aCuta pe ;i9itator s& se deplase9e ntr-o alt& seciune a site-ului '&r& a mai 'i ne;oit s& derule9e
pa+ina n sus p0n& la >ara principal& de na;i+are.
144
!ac& site-ul este de dimensiuni mari este o idee >un& s& creai o pa+in& special& care s&
repre9inte %arta site-ului i s& plasai le+&tura c&tre ea n >ara principal& de na;i+are din cadrul
'iec&rei pa+ini. ,ceasta ;a permite ;i9itatorului s& se oriente9e n interiorul site-uluiG oricare ar 'i
pa+ina prin care a intrat n site. Harta ;a conine le+&turi c&tre toate pa+inileG +rupate con'orm
modului de or+ani9are al site-ului.
!e asemeneaG dac& 'olosii o structur& ierar%ic&G este util& pre9ena unui instrument
suplimentar care s& in'orme9e ;i9itatorul asupra locului unde se a'l& n cadrul site-ului i a c&ii prin
care a aCuns aiciG n maniera urm&toareH
Home ( :agina %e nivel unu ( :agina %e nivel %oi ( :agina curent4.
.nformaiile despre site i pagina curent
.iecare pa+in& a site-ului tre>uie s& conin& indicaii pri;ind scopul i o>iecti;ele site-ului
precum i o>iecti;ele speci'ice acelei pa+ini. In 'a9a de plani'icare ai colectat in'ormaii pri;ind
pu>licul int&G ai 'ormulat scopul i o>iecti;ele ntre+ului site. ,cestea repre9int& elementele
'undamentale n Curul c&rora este construit site-ul. .iecare pa+in& a sa are drept scop ndeplinirea
unuia dintre o>iecti;e. ,ceste in'ormaii tre>uie comunicate n pa+ina respecti;&. 7i9itatorul nu
tre>uie 'orat s& +%iceasc& ce rol are o anumit& pa+in& n cadrul site-ului.
Multe site-uri pre9ente pe Fe> conin o pa+in& special& cu in'ormaii de contact precum i o pa+in&
care conine in'ormaii despre site i creatorii s&i 1pa+ina <!out2. Totui este recomandat ca aceste
in'ormaii s& 'ie incluse i n su>solul pa+inilor din interiorul site-ului. Este >ine s& includei aici
in'ormaii despre copWri+%tG data ultimei reactuali9&ri a pa+iniiG despre or+ani9aia sau compania
c&reia i este dedicat site-ul 1dac& este ca9ul2 i in'ormaii de contact 1adres& de mailG num&r de
tele'onG adres& potal&2.
+rgani2area paginii cu a-utorul tabelelor
<nul dintre aspectele pe care tre>uie s& le a;ei n ;edere la construirea unei pa+ini este
re9oluia ecranului. Muli dintre ;i9itatorii pa+inii 'olosesc re9oluia de -33)(33 de pi)eli. " pa+in&
cu l&imea mai mare de (33 de pi)eli poate 'ace necesar& derularea pe ori9ontal& a pa+iniiG care
pentru muli ;i9itatori este o>ositoare i incomod&. !in acest moti;G este recomandat ca tot
coninutul pa+inii s& 'ie inclus ntr-un ta>el de >a9& cu l&imea de (33 de pi)eli.
Ta)elul de )a*G
Construirea pa+inii ncepe cu un ta>el de >a9&G cu l&imea 1Eidt%2 de (33 de pi)eliG o linie i o
coloana. ,liniai ta>elul la mar+inea din st0n+a sau centrat n pa+in&. :etai c%enarul 1>order2 la
;aloarea J3J pentru a-l 'ace in;i9i>il pentru ;i9itator. Intre+ul coninut al pa+inii ;a 'i plasat n
interiorul acestui ta>el.
,si+urai-;& c& ai setat culoarea de 'ond 1>+color2 pentru pa+ina dumnea;oastr&. "piunea
Jde'aultJ las& >roEserul s& controle9e culoarea 'ondului. !e cele mai multe ori aceasta este al>G dar
este mai >ine s& a;ei certitudinea c& ea ;a ap&rea la 'el n orice >roEserG aa nc0t setai
>+colorKJE%iteJ sau orice alt& culoare dorii.
In 'uncie de 'elul cum dorii s& ;& or+ani9ai site-ul i de scopul acestuia ;ei %ot&r unde
dorii s& plasai >ara principal& de na;i+are.
3ara de na?i,are @n stYn,a pa,inii
14
!ac& ai decis s& optai pentru plasarea >arei de na;i+are n partea st0n+a 1cea mai u9ual& ae9are2G
;ei include n ta>elul de >a9& un ta>el cu 2 sau 3 coloane.
!ac& 'olosii un ta>el cu 2 coloane setai distana ntre celule 1cellpaddin+2 la ;aloarea J4J
pentru a spaia te)tul de mar+inea ta>elului. $utei speci'ica l&imea celulelor 'ie n pi)eli 'ie n
procente.
!ac& 'olosii un ta>el cu 3 coloaneG coloana din centru poate 'i 'olosit& ca JtamponJ G care ;a
separa coninutul coloanei din st0n+a de coninutul celei din dreapta. :etai atri>utul >order al
ta>elului la J3J pentru ca mar+inea s& nu 'ie ;i9i>il&. "dat& sta>ilite aceste atri>uteG putei ad&u+a n
ta>el at0tea linii c0te sunt necesare sau putei include un alt ta>el n cel e)istent.
3ara de na?i,are @n partea superioara
$entru a construi o >ar& de na;i+are n partea de sus a pa+iniiG tre>uie s& includei n ta>elul de
>a9& un ta>el cu o sin+ura coloana. :etai atri>utele cellpaddin+ K J4J i >order K J3J. In prima linie
a ta>elului ;ei introduce lo+o-ul sau titlul site-uluiG n linia a doua ;ei a'ia >ara de na;i+areG iar pe
liniile urm&toareG coninutul pa+inii.
3ara de na?i,are @n partea dreapta
Este o a>ordare mai puin utili9at&. Cel mai adesea este 'olosit& pentru pa+inile de tip catalo+
de produseG unde ima+inile i descrierea produselor sunt plasate n coloana din st0n+aG care ocup&
cea mai mare parte a spaiului.
.olosirea ta>elelor pentru or+ani9area coninutului pa+inii este o practic& 'oarte 'olosit&.
Ta>elele ;or p&stra ima+inile i te)tul acolo unde le-ai plasat. $utei include i alte ta>ele n
interiorul celor pe care le-ai creatG n 'uncie de modul n care sunt or+ani9ate in'ormaiile i de
aspectul pe care dorii s& l dai pa+inii.
. @reeli de desi+n
In procesul de creare a unui site pot ap&rea o serie de +reeli de desi+nG cele mai multe
datorate nerespect&rii te%nicilor i principiilor pre9entate anterior.
5agini fr legturi #1fundturi1%
<na dintre cele mai 'rustrante situaii n care se poate +&si o persoan& care na;i+%ea9& pe Fe>
este o pa+in& '&r& instrumente de na;i+are i '&r& nici un indiciu pri;ind site-ul c&ruia i aparine.
!esi+urG site-ul din care 'ace parte pa+ina poate 'i locali9at o>ser;0nd prima parte a adresei <=L a
pa+iniiG care apare n >ara de adrese a >roEserului. !ar a 'ora ;i9itatorul s& e'ectue9e aceast&
mane;r& este cu totul nerecomandat. Cel mai pro>a>il acesta nu se ;a osteni s& caute pa+ina Home
a unui asemenea site ci l ;a p&r&si de'initi;. E;itai s& creai asemenea pa+ini.
$re9ena unor J'und&turiJ ntr-un site denot& 'aptul c& desi+nerul nu a neles caracterul permea>il al
Fe>-ului i ideea c& un ;i9itator poate intra n site prin oricare pa+in& a sa. $ericolul construirii
unor ast'el de pa+ini apare mai ales n ca9ul site-urilor liniare multi-pa+in&G n care desi+nerul
dorete s& conduc& ;i9itatorii de-a lun+ul site-ului pe un traseu liniarG presta>ilit. ,ceasta nu
nseamn& c& acest tip de site-uri nu tre>uie 'olositG mai ales dac& in'ormaiile pre9entate sunt
adec;ate acestui mod de pre9entare. Tre>uie ns& acordat& atenie instrumentelor de na;i+are care
tre>uie ast'el concepute nc0t ;i9itatorul s& poat& aCun+e cu uurin& cel puin la pa+ina Home. In
plusG in'ormaiile despre site i pa+ina curent& nu tre>uie s& lipseasc& din su>solul 'iec&rei pa+ini.
" ;ariaie a acestor pa+ini de tip J'und&tur&J o constituie pa+inile Home care o'er& in'ormaii
prea puine sau lipsite de semni'icaie. !estul de des pot 'i nt0lnite pe Fe> pa+ini Home care nu
14(
o'er& nici un 'el de indicii asupra structurii sau coninutului site-uluiG '&r& a mai ;or>i de scopul i
o>iecti;ele sale. 6nstrumentele de na;i+aie sunt a>senteG pre'er0ndu-se 'olosirea unor ima+ini sau
te)te cu prea puin& semni'icaie pentru a reali9a accesul n di'eritele seciuni ale site-ului. $oate c&
este o a>ordare a;an+ardist&G dar pentru marea maCoritate a ;i9itatorilor este nepl&cut s& aCun+& ntr-
o asemenea pa+in& aa nc0t este mai >ine s& respectai re+ulile clasice de desi+n pre9entate.
5agini 1uriae1
!ac& pa+inile J'und&tur&J o'er& prea puine indicii ;i9itatoruluiG e)ist& i re;ersul lorH pa+inile
JuriaeJ. ,ceste pa+ini sunt nc&rcate p0n& la re'u9 cu in'ormaiiG listeG ima+iniG lin?-uri i alte
elemente. $a+inile de acest 'el ridic& dou& mari pro>lemeH
Timpul de acces. Mai ales dac& pa+ina conine 'oarte multe ima+iniG timpul de nc&rcare al
pa+inii poate 'i 'oarte mare
:upranc&rcarea cu in'ormaii. !ac& ;ei pune prea mult& in'ormaie ntr-o sin+ur& pa+in&
;i9itatorul acesteia nu ;a 'i capa>il s& o procese9e.
E)ist& opinii care spun c& lun+imea unei pa+ini nu ar tre>ui s& dep&easc& un ecran pentru a se
e;ita ca ;i9itatorul s& derule9e pa+ina pe ;ertical&. " asemenea cerin& este prea drastic& i poate 'i
adesea n de9a;antaCul pre9ent&rii e)plicite a in'ormaiilor. .ra+mentarea su>iectului tre>uie s& se
'ac& n 'uncie de lo+ica lui intern& i nu de re+uli ar>itrare cum este m&rimea 'erestrei >roEserului.
E)ist& situaii n care pa+inile lun+i ndeplinesc cel mai >ine o>iecti;ele urm&rite. !e e)empluG n
pa+inile de pre9entare ale unor produseG pe un site comercialG plasarea descrierii produsului pe dou&
sau mai multe pa+ini rupe cursi;itatea pre9ent&rii i se poate solda cu pierderea unor poteniali
clieni.
,nalo+G dac& pa+ina conine o list& lun+& de elemente nruditeG ruperea listei este ar>itrar& i
de9a;antaCoas&. $e de alt& parteG a+lomerarea de in'ormaii la ni;elul unei sin+ure pa+iniG mai ales
c0nd ntre seciunile pa+inii nu e)ist& o le+&tur& intrinsec& 'ace ca pa+ina s& apar& ca un amal+am
din care ;i9itatorul ;a e)tra+e cu +reu in'ormaiile care l interesea9&.
!ac& este necesar s& 'olosii pa+ini 'oarte lun+i nu uitai s& o'erii pe parcursul pa+inii ancore
care s& conduc& ;i9itatorul la nceputul seciunilor principaleG precum i n partea superioaraG
respecti; in'erioar& a pa+inii. !ac& pa+ina conine mult te)t nu o nc&rcai suplimentar i cu ima+ini
sau cu elemente multimedia deoarece timpul de acces ;a crete 'oarte mult.
,cesul de elemente multimedia
.olosirea '&r& discern&m0nt a elementelor multimedia 1ima+ineG sunetG ;ideo2 precum i
'olosirea n e)ces a celor mai noi te%nolo+ii Fe> este adesea d&un&toare pentru site. !ac& ;&
adresai unei audiene despre care presupunei c& nu dispune de cone)iuni rapideG de ultimele
;ersiuni de >roEsere sau de aplicaiile necesare e)ecut&rii i a'i&rii corecte a unora dintre
elementele din pa+inile site-uluiG este mai >ine s& nu includei aceste elemente.
,st'elG dei aplicaiile create cu Macromedia .las% sunt spectaculoase i se pot reali9a e'ecte
speciale deose>it de atracti;eG un ast'el de 'iier poate aCun+e cu uurin& la dimensiuni care
dep&esc 1 me+a>WteG ceea ce ncetinete considera>il ;ite9a de nc&rcare a pa+inii. In plusG pentru
;i9uali9area corect& a acestoraG ;i9itatorul tre>uie s& descarce plu+-in-ul :%oc?Ea;e n ca9ul c0nd
nu l are deCa instalat pe computerul propriu. Este 'oarte nepl&cut pentru ;i9itator s& e'ectue9e toate
aceste operaii doar pentru a constata c& in'ormaiile pre9entate n aceast& 'orm& puteau 'i tot at0t de
>ine pre9entate ca te)t sau ima+ini o>inuite.
14*
" soluie de compromis este aceea caG simultan cu includerea unui ast'el de 'iierG s& se pun&
la dispo9iia ;i9itatorului o opiune de JeludareJ de tip Js?ip introJ G atunci c0nd pre9ent&rile sunt
'olosite doar cu rol de splas% screenG ca ecran de desc%idere a site-uluiG de e)emplu.
In plusG 'olosirea pre9ent&rilor .las% '&r& ca acestea s& ser;easc& unui scop >ine de'init nu 'ace
altce;a dec0t s& distra+& atenia ;i9itatorului de la su>iectul site-ului.
" alt& +reeal& destul de des nt0lnit& este includerea 'iierelor audioG '&r& ca acestea s& ai>&
le+&tur& cu scopul site-ului. E)ist& desi+neri care consider& c& 'urni9area unei mu9ici de 'undal
sporete atracti;itatea site-ului. In realitate se nt0mpl& e)act contrariul. In a'ara situaiei c0nd
su>iectul site-ului este le+at de mu9ic& sau c0nd 'iierele de sunet ;in s& complete9e in'ormaiile
pre9entate n pa+iniG mu9ica de 'undal nu 'ace altce;a dec0t s& ncetineasc& nc&rcarea pa+inilor i
s&-l irite pe ;i9itatorG prin repetare. !ac& este necesar s& includei 'iiere de sunetG l&sai ;i9itatorului
posi>ilitatea de a opta pentru desc%iderea lor prin intermediul unei le+&turiG mai ales n ca9ul n care
este ;or>a despre 'iiere de mari dimensiuni.
Este recomandat s& procedai la 'el i n ca9ul 'iierelor ;ideoG a;erti90ndu-l pe ;i9itator c&
pa+ina respecti;& se ;a desc%ide mai +reu.
5agini inegale
$a+inile ine+ale conin in'ormaii 'oarte di'erite ca importan& sau ca ni;el de detaliere. Cel
mai adesea se con'runt& cu aceast& pro>lem& pa+inile Home n care sunt incluse lin?-uri c&tre noile
pa+ini create n procesul de de9;oltare a site-ului. Este 'oarte uor s& c&dei n +reeala de a include
noile le+&turi n pa+ina Home '&r& a mai respecta ierar%ia sta>ilit& n etapa de or+ani9are a site-ului.
!ac& site-ul la care lucrai necesit& crearea unor noi pa+ini tre>uie s& a;ei n ;edere plasarea
acestora la ni;elele speci'ice o>iecti;elor pe care le au precum i ncadrarea la locul cu;enit n
structura de le+&turi a site-ului pre9entat& n pa+ina Home.
Legturi fr semnificaie
$re9ena le+&turilor '&r& semni'icaie esteG de asemeneaG o +reeal& de desi+n 'oarte 'rec;ent&.
$ro>a>il ai ;&9ut de nenum&rate ori n pa+inile Fe> 'ormul&ri ca aceastaH
$entru mai multe in'ormatii apasati 5, %re'KJin'o.%tmlJ8aici5O,8
Cu;0ntul JaiciJ nu are n acest conte)tG nici o semni'icaie. " 'ormulare mult mai potri;it& ar
putea 'i urm&toareaH
$uteti o>tine aici 5, %re'KJin'o.%tmlJ8mai multe in'ormatii5O,8
" alt& situaie este aceea n care documentul indicat nu are le+&tur&G din punct de ;edere al
coninutuluiG cu pa+ina care conine re'erina la el. Toate lin?-urile din cadrul unei pa+ini tre>uie s&
e)tind& coninutul in'ormaional al pa+iniiG ;i9itatorul care urmea9& o le+&tur& atept0ndu-se ca
aceasta s& i o'ere in'ormaii suplimentare despre su>iect.
In aceeai cate+orie se pot ncadra i le+&turile J>analeJ G care nu m>o+&esc prin nimic
in'ormaiile pre9entate. !e e)emplu o construcie ca aceastaH
4ine ati ;enit in 5, %re'KJde'.%tmlJ8$a+ina5O,8 Home a <ni;ersitatii
unde documentul %e#.html conine de'iniia de dicionar a cu;0ntului Jpa+inaJ G este o le+&tur&
J>anal&J deoarece n acest conte)t in'ormaia o'erit& nu ser;ete nici unui scop. $e de alt& parteG
ntr-o pa+in& al c&rei su>iect este ;oca>ularul speci'ic Fe>-uluiG o ast'el de de'iniie ar 'i 'oarte
important&.
14-
<n alt tip de le+&turi '&r& semni'icaie apare atunci c0nd 'ra+mentarea in'ormaiei este dus& la
e)trem prin 'olosirea unui num&r 'oarte mare de lin?-uri. :u>iectul este secionat n p&ri 'oarte mici
iar ;i9itatorul este o>li+at s& parcur+& un mare num&r de pa+ini n ad0ncime pentru a pune cap la
cap in'ormaiile i a nele+e sensul lor. " a>ordare de acest tip rupe cursi;itatea su>iectului i
m&rete e'ortul de a nele+e i asimila al ;i9itatorului.
5agini de2organi2ate i stridente
,cest tip de pa+ini su'er& din pricina lipsei de or+ani9are a coninutului. C%iar dac& su>iectul este
mp&rit n seciuniG unit&ile de in'ormaie sunt mpr&tiate n pa+in& '&r& o sistemati9are preala>il&
care s& 'ocali9e9e atenia ;i9itatorului c&tre punctele importante. ,ceste pa+ini au prea multe culoriG
adesea stridenteG tipuri di'erite de 'onturiG sau ima+ini de 'undal 'oarte nc&rcate. ,desea este
'olosit& n e)ces animaia '&r& nici ca aceasta s& ai>& ;reo semni'icaie sau le+&tur& cu coninutul
pa+inii i mu9ica de 'undal. ,spectul +eneral al unor ast'el de pa+ini este la 'el de strident i ip&tor
ca un decor de >0lci.
Capitolul 1(
Testarea site9ului
Etapa de desi+n a site-ului se des'&oar& n str0ns& le+&tur& cu cea de implementareG de scriere
a codului HTML pentru pa+inile care 'ac parte din site. TotuiG procesul de creare a site-ului nu se
poate considera nc%eiat n momentul 'inali9&rii tuturor documentelor HTML care l 'ormea9&.
<rmea9& o etap& adesea tratat& oarecum super'icialG deiG ca i celelalteG este esenial& pentru
construirea unui site de calitateH etapa de testare.
1. Corectarea pa+inilor
Corectarea este unul din cele mai ne+liCate aspecte al pu>licisticii Fe>. .oarte 'rec;ent putei
nt0lni pa+ini Fe> cu multiple +reeli de orto+ra'ieG +ramatic&G 'ormatareG c%iar i n ca9ul site-
urilor importante. $a+inile cu +reeli de orto+ra'ieG e)prim&ri ne+liCenteG re'lect& cel puin o
insu'icient& e)perien& n acest domeniu iG de ce nuG c%iar lips& de respect pentru ;i9itator.
Corectarea este ne+liCat& n primul r0nd datorit& uurinei e)traordinare cu care te)tele pot 'i
pu>licate electronic. $utei crea o pa+in& ntr-un editor de te)t i aceasta poate 'i pu>licat& la doar
c0te;a minute dup& terminarea eiG daca suntei su'icient de rapid. Cei mai muli nu ;or petrece ore
14/
n ir ;eri'ic0nd e)istena e;entualelor +reeli +ramaticale n te)tul editatG aa cum ar 'ace-oG
pro>a>ilG n ca9ul unei tip&rituri clasiceG dac& aceste erori i-ar costa o a;ere pentru a retip&ri 13.333
de copii ale documentului. !ac& ai '&cut o +reeal&G tre>uie doar s& desc%idei 'iierulG s& e'ectuai
corectura i s& l repu>licai pe Fe>G unde toat& lumea l poate ;edea. Este aceasta o strate+ie
corect&? !esi+ur c& nu.
Calitatea muncii pe care ai depus-o la crearea site-ului de'inete calitatea acestuia. MiiG poate
milioane de utili9atori ar 'i putut deCa citi pa+ina n cau9&. Este mult mai simplu s& petrecei c0te;a
ore corect0nd te)tulG pentru a e;ita ca ulterior s& ;& luptai 9ileG s&pt&m0ni sau luni n ir pentru a ;&
rec0ti+a credi>ilitatea.
6at& c0te;a metode care ;& pot aCuta s& corectai mai e'icient pa+inile Fe>H
1. <tili9ai corectoare automate pentru orto+ra'ie i +ramatic& pentru a descoperi erorile
plictisitoareG '&cute din +ra>& sau din o>oseal&.
2. Au a;ei niciodat& ncredere a>solut& n acest tip de corectoare pentru a descoperi
erorile mai su>tile. !up& utili9area lorG nc&rcai pa+ina n >roEser i citii-o de c0te;a ori.
3. $entru site-urile de dimensiuni mari citii documentele n mod repetatG c&ut0nd de
'iecare dat& un anumit tip particular de erori
4. La prima lectur& concentrai-;& atenia pe aspectul +eneral al documentului i pe
descoperirea erorilor de 'ormatareG a itemurilor lips& sau a erorilor de plasare a acestora.
5. La a doua lectur& ;eri'icai lo+ica i cursi;itatea ideilor i a cu;intelor.
6. La a treia lectur&G corectai minuios ntre+ul te)t ;eri'ic0nd sinta)aG orto+ra'iaG
punctuaia.
7. Intotdeauna ;eri'icai ima+inileG 'i+urile i %&rile din pa+in&. ,si+urai-;& c& ele au
le+&tur& cu te)tul de re'erin&G i ;eri'icai te)tul e)plicati; care nsoete ima+inea.
E)ist& i erori ce ;or persista uneori c%iar dup& toate aceste ;eri'ic&ri. !ac& le descoperii dup&
pu>licarea site-uluiG nu mai r&m0ne dec0t s& le corectai atunci.
2. Testarea pa+inilor
"dat& terminat& ;eri'icarea corectitudinii te)tului din pa+ini din punct de ;edere +ramatical i
lo+icG urmea9& etapa de testare a pa+inilor. In aceast& 'a9& tre>uie s& ;& concentrai pe testarea
corectitudinii etic%etelor HTMLG a lin?-urilorG a ima+inilor i a celorlalte elemente incluse n pa+ini.
3estarea lin6)urilor
Cea mai simpl& cale de testare a lin?-urilor este de a nc&rca pa+ina n >roEser i de a da clic?
pe 'iecare lin?.
7eri'icai 'uncionarea tuturor ancorelor din pa+ini care tre>uie s& accese9e seciunea din
pa+in& corespun9&toare identi'icatorului ancorei. ,tenie la seciunile multiple ale aceleiai pa+ini
etic%etate cu acelai identi'icator. ,ceast& +reeal& poate produce re9ultate stranii. !aca >roEserul
sare la o alt& seciune a pa+inii dec0t cea ateptat&G ;eri'icai mai nt0i identi'icatorul ancorei n
seciunea pe care >roEserul o a'iea9&.
13
7eri'icai apoi modul de 'uncionare a le+&turilor c&tre alte documenteG at0t n cadrul site-ului
c0t i n a'ara saG respecti; ;aliditatea lor i dac& pa+inile accesate sunt cele potri;ite. !ac& o
anumit& pa+in& nu poate 'i desc%is&G ;eri'icai sinta)a lin?-urilor i anumeH
1. corectitudinea protocolului speci'icat
2. e)tensia 'iierului
3. e)istena sim>olului s
5robleme 'n funcionarea paginilor 7eb
Este posi>il ca pa+inile Fe> create s& nu arate n >roEser aa cum au 'ost ele proiectate.
=e9ol;area unor ast'el de de'iciene poate 'i di'icil&G deoarece c0nd scriei codul HTML a;ei doar o
ima+ine mental& a modului cum ar tre>ui s& arate pa+ina. " soluie pentru a 'ace procesul de
depanare mai uor ar 'i s& ;i9uali9ai pa+ina cu aCutorul >roEserului pe m&sur& ce o construii.
$utei i9ola di;ersele seciuni ale pa+inii pentru a ;eri'ica 'uncionarea 'iec&reia dintre ele.
Cele mai multe +reeli care pot ap&rea se datorea9& erorilor n codului sursa al pa+inii. :inta)a
codului este de o importanta critic& n HTML. Cele mai comune pro>leme de sinta)a care apar suntH
1. a>sena etic%etelor de nc%idere 5 O 8
2. mperec%erea etic%etelor HTML
3. +%ilimelele J J
4. im>ricarea etic%etelor
6at& c0te;a dintre pro>lemele cu care ;& putei con'runtaH
4 caracteristicG de ;or"atare a;ectea*G o sec?enG "ai "are de tet decYt era pre?G*ut.
:& presupunem c& ai 'olosit ntr-o seciune a pa+inii una dintre etic%etele de titluG 5H38 de
e)emplu. La ;i9uali9area pa+inii n >roEser constatai c& nu doar te)tul pe care doreai s&-l
e;ideniai este 'ormatat ast'elG ci o parte mai mare a te)tului din pa+in&.
" ast'el de situaie este pro;ocat& deH
1. ,>sena unuia dintre caracterele J 5 J sau J 8 J
2. ,>sena etic%etei de nc%idere 5OH38
3. 6m>ricarea de'ectuoas& a etic%etelor HTML
" etic%et& de nc%idere c&reia i lipsete unul dintre caracterele J5 Jsau J8J nu ;a 'i
interpretat& corect de >roEserG prin urmare 'ormatul nu ;a lua s'0rit dec0t n punctul n care
>roEserul nt0lnete caracterul respecti;. ,ceasta poate determina a'iarea ntr-un 'ormat +reit a
unui te)t.
!ac& acest element este un titluG tot te)tul dintre etic%eta de desc%idere asociat& titlului i cea
mai apropiat& etic%et& de nc%idere nt0lnit& ;a 'i a'iat ca titlu. !aca acest element este te)t ancor&G
tot te)tul dintre etic%eta de desc%idere 5,8 i prima etic%et& de nc%idere nt0lnit& ;a 'i a'iat ca o
le+&tur& 1de culoare al>astru i su>liniat2.
" etic%et& de nc%idere a>sent& sau o mperec%ere inadec;ata de etic%ete ;a pro;oca pro>leme
similare. <neori pro>lemele sunt di'icil de urm&rit i re9ol;at. <rm&rirea unei pro>leme se 'ace n
sens descendentG de'eciunea tre>uie c&utat& acolo unde ncepe sec;ena de cod eronat& i nu unde
se s'0rete.
4 parte din tetul pa,inii nu este a;iJat
11
Te)tul sau o>iectele care lipsesc din pa+ina pot 'i depistate prin urm&rirea +%ilimelelor J J i a
etic%etelor +reit nc%ise i care conin adrese <=L.
!ac& pa+ina conine +%ilimele de desc%idere n interiorul unei etic%eteG i cele de nc%idere
tre>uie s& se re+&seasc& n aceeai etic%et&. " etic%et& din care lipsesc +%ilimelele de nc%idere nu
este interpretat& corect i acest lucru poate produce re9ultate >i9are. !ac& etic%eta c&reia i lipsesc
+%ilimelele este o etic%et& ancor&G ntre+ te)tul de la primele +%ilimele p0n& la urm&toarele nt0lnite
ar putea 'i interpretat de >roEser ca parte dintr-o adres& <=L.
" alt& eroare care poate pro;oca acelai e'ect este nc%iderea +reit& a etic%etei conin0nd o
adres& <=L. !ac& o ast'el de etic%et& nu este nc%is& corespun9&torG >roEserul ar putea interpreta
orice te)t care urmea9&G p0n& la etic%eta de nc%idere corespun9&toareG ca 'iind parte a adresei <=L.
$ro>lema se re9ol;& prin e)aminarea etic%etelor a'late naintea poriunii de te)t care nu este a'iat&.
Eroarea ar putea pro;eni de la orice etic%et& care conine +%ilimele sau o adres& <=L. @%ilimelele
utili9ate n editorul de te)t cu aCutorul c&ruia scriei codul HTML tre>uie s& 'ie ntotdeauna n
standard ,:C66. <nele editoare de te)t utili9ea9& aa-numitele Jsmart NuotesJ G n care +%ilimele de
desc%idere arat& di'erit 'a& de cele de nc%idere. !ac& procesorul de te)t cu care lucrai are aceast&
posi>ilitateG ea tre>uie de9acti;at&G deoarece acest tip de +%ilimeleG ne'iind n standardul ,:C66G nu
;or 'unciona corect n HTML.
1;iJarea de;ectuoasG a ;or"atului
In ca9ul c0nd 'ormatul a'iat de >roEser nu este cel ateptat ;eri'icai mai nt0i
compati>ilitatea dintre >roEser i stilul de caractere speci'icat n codul HTML. 4roEserul tre>uie s&
'ie capa>il s& a'ie9e stilul ales. ,tunci c0nd sunt 'olosite stiluri lo+iceG >roEserul este ultima
instan& n deci9ia pri;ind stilul caracterelor a'iate.
" metod& rapid& de ;eri'icare a e)istenei unei pro>leme de compati>ilitate este de a a'ia
pa+inile utili90nd >roEsere di'eriteG dintre care unul s& poat& a'ia n mod si+ur stilul de caracter
utili9at. !ac& acel >roEser a'iea9& te)tul incorectG se 'ace ;eri'icarea codului HTML. !ac& te)tul
este a'iat corectG atunci e)ist& o incompati>ilitate cu celelalte >roEsere.
In codul HTMLG pro>lema poate 'i le+at& de o im>ricare de'ectuoas& a etic%etelor. 7eri'icai
modul cum au 'ost im>ricate etic%etele de 'ormatare din seciunea de pa+in& asociat& cu eroarea
respecti;&. ,st'el o construcie de tipul urm&torH
5EM87a multumim ca ati ;i9itat 5:T="A@8$a+ina5OEM8noastra5O:T="A@8
nu ;a 'unciona corectG deoarece etic%etele 5EM8 i 5:T="A@8 sunt im>ricate eronat.
12
Capitolul 1*
5u)licarea site9ului
In s'0ritG site-ul dumnea;oastr& este 'inali9at. ,i parcurs toate etapeleG de la plani'icareG la
desi+n i implementareG ;-ai asi+urat c& toate elementele 'uncionea9& corect. , ;enit momentul
pu>lic&rii pe Fe> a site-uluiG ast'el nc0t re9ultatele muncii dumnea;oastr& s& 'ie cunoscute de toi
aceea care ;& ;or ;i9ita pa+inile. In etapa pu>lic&rii pe Fe> a site-ului inter;in mai muli paiH
:ta>ilirea unui nume de domeniu
:ta>ilirea ser;erului Fe> pe care ;a 'i stocat 1+&9duit2 site-ul
"r+ani9area i denumirea 'iierelor n con'ormitate cu cerinele ser;erului +a9d&
Trans'erul 'iierelor
1. Aumele de domeniu
13
$entru ca site-ul dumnea;oastr& s& ai>& o identitate pe Fe> a;ei ne;oie de un nume de
domeniu pentru el. Aumele de domeniu al site-ului ;a 'ace parte din adresa <=L a 'iec&rei pa+ini i
;a o'eri site-ului o pre9en& distinct& pe Fe>.
!omeniile principale de pe Fe> pot 'i de mai multe tipuriH
comerciale .com
educaionale .edu
+u;ernamentale .gov
'urni9orii de ser;icii de reea .net
instituii non-pro'it .org
domeniile corespun9&toare &rilor lumii .roG etc
$entru a o>ine un nume de domeniu pentru site a;ei la dispo9iie dou& posi>ilit&iH
domeniu pl&tit
domeniu +ratuit
Domeniu pltit
!ac& site-ul pe care l-ai creat aparine 'irmei dumnea;oastr& sau unei 'irme client sau dac&
dorii s& a;ei o pre9en& sta>il& i credi>il& pe Fe> cea mai >un& opiune este s& a;ei un domeniu
pl&tit. Inre+istrarea unui domeniu nu este 'oarte costisitoare i ;a asi+ura site-ului dumnea;oastr& o
identitate serioas& i credi>il&. In plusG odat& ce suntei proprietarul unui domeniu putei s&
sc%im>ai locaia site-ului 1ser;erul Fe> pe care este +&9duit2 '&r& ca aceasta s& necesite sc%im>area
domeniului.
$reul pentru nre+istrarea unui nume de domeniu ;aria9& destul de mult. <na dintre cele mai
con;ena>ile o'erte poate 'i +&sit& la adresa %ttpHOOEEE.13-domains.com care o'er& nre+istrarea
unui nume de domeniu pentru 13 <:! anual precum i o serie de discount-uri pentru nre+istrarea
pe perioade mai lun+i. !ac& dorii un domeniu rom0nesc 1.ro2 putei o>ine in'ormaii la adresa
%ttpHOOEEE.rnc.ro. $entru nre+istrarea unui ast'el de domeniu se percepe o ta)& unic& de (1 <:!
1pre ;ala>il la data scrierii acestei c&ri2 '&r& alte ta)e anuale.
In ca9ul c0nd optai pentru un domeniu pl&titG adresa <=L a site-ului ;a 'i de 'orma
%ttpHOOEEE.dumnea;oastra.com
Domeniu gratuit
">inerea unui nume de domeniu +ratuit este 'oarte simpl&. E)ist& multe companii on-line
care o'er& ast'el de domenii iG n plusG i spaiu de +&9duire pentru site. !ac& suntei ncep&tor i
dorii s& ;& testai cunotinele de Fe> desi+n nou n;&ateG nu este o idee rea s& construii un site
Jde pro>&J 'olosind pentru acesta un domeniu i un ser;iciu de %ostin+ +ratuite. In a'ara acestei
situaiiG dei poate p&rea ale+erea ideal&G un domeniu +ratuit poate aduce multe de9a;antaCe site-ului
dumnea;oastr&.
$rima Cudecat& de ;aloare asupra unui site este '&cut& pe >a9a numelui s&u de domeniu. In
ca9ul unui domeniu +ratuit adresa <=L a site-ului ;a 'iH
%ttpHOOEEE.nume'irma+a9da.comOsdumnea;oastra sau
%ttpHOOEEE.dumnea;oastra.nume'irma+a9da.com
7i9itatorii site-ului ;or ti imediat c& nu deinei propriul domeniu i 'olosii un ser;iciu de
%ostin+ +ratuit ceea ce ;& ;a a'ecta serios credi>ilitatea. Mai ales dac& site-ul este unul de a'aceriG
'olosirea unui domeniu i ser;iciu de %ostin+ +ratuit este cu totul contraindicat&. In plusG 'irmele
14
care o'er& acest +en de ser;iciiG impun a'iarea unor >annere pu>licitare care distra+ atenia
;i9itatorilor de la coninutul site-ului i m&resc timpul de nc&rcare al pa+inilor.
2. :er;iciul de +&9duire Fe> 1Fe> %ostin+2
Inainte de a pu>lica site-ul pe Fe> este necesar& o e;aluare a necesit&ilor de accesG pentru a
determina ce 'el de cont se potri;ete site-ului dumnea;oastr&. $lec0nd de la presupunerea c&
deinei deCa o cone)iune la 6nternetG nu ;om intra n am&nunte pri;ind ale+erea unui 'urni9or de
ser;icii 6nternet 16:$ k Internet Service :rovi%er2. TotuiG n ca9ul c0nd nc& nu deinei o
cone)iune sau dorii s& sc%im>ai pro;ider-ul actualG ;& recomand&m s& studiai cu atenie o'ertele
principalilor 'urni9ori de ser;icii. ,;0nd n ;edere c& nu ;& ;ei mai limita doar la simpla na;i+are
pe Fe> sau la sc%im>ul de emailuri ci ;ei dori s& trans'erai i s& ntreinei un site Fe>
necesit&ile dumnea;oastr& ;or crete. !in acest moti; este >ine s& ;& in'ormai asupra unor detalii
te%nice cum ar 'i l&imea de >and&G mediul de transmisie 1anten& satelitG ca>lu cu 'i>re opticeG unde
radio2G ce tip de ser;er 'oloseteG asistena te%nic& o'erit&G dac& o'er& +&9duire pentru pa+ini Fe>.
"piunile pentru +&9duire sunt urm&toareleH
6nstalarea unui ser;er Fe> propriu
<tili9area ser;erului Fe> al pro;iderului de ser;icii 6nternet
<tili9area unui ser;er Fe> aparin0nd unei 'irme care o'er& ser;icii de %ostin+
.nstalarea unui server 7eb propriu
6nstalarea unui ser;er Fe> propriu este cea mai costisitoare soluieG dar ea o'er& n sc%im>
a;antaCe semni'icati;e. !ispun0nd de o cone)iune dedicat& se pot 'urni9a ser;icii Fe> 24 de oreO9i
utili9atorilor din lumea ntrea+&. 7ei dispune de un control complet asupra ser;erului Fe> i putei
pu>lica orice dorii. $utei con'i+ura ser;erul i pentru alte ser;iciiG cum ar 'i .T$G @op%erG TelnetG
scripturi C@6G etc. $utei de asemenea a;ea propriul domeniu care ;a sta>ili o pre9en& distinct& pe
Fe>. ,dresa <=L ;a a;ea 'orma urm&toareH
%ttpHOOEEE.'irma\dumnea;oastra.comO
Intruc0t costurile necesare ec%ipamentului %ardEareG cone)iunii la 6nternetG con'i+ur&rii i
ntreinerii unui ser;er propriu dep&esc posi>ilit&ile unui utili9ator o>inuitG nu ;om insista asupra
acestei soluii.
4tili2area serverului 7eb al providerului .&5
<tili9area ser;erului Fe> al pro;iderului dumnea;oastr& de 6nternet este o opiune
economic&. Muli dintre 'urni9orii de ser;icii 6nternet o'er& n cadrul contului de acces i un anumit
spaiu pe ser;erele proprii pe care ;& putei plasa site-ulG '&r& a percepe ta)e suplimentare. !in
p&cateG spaiul o'erit este de o>icei micG de ordinul 1-3 M> i nu sunt o'erite 'acilit&i pentru crearea
de pa+ini dinamice. $entru a o>ine 'acilit&i suplimentare ;a tre>ui s& pl&tii n plus.
Cu toate c& 'iierele standardG contul de email i 'iierele pu>licate pe Fe> utili9ea9& acest
spaiuG 2-3 M> sunt de re+ul& su'icieni pentru a menine un site modest ca dimensiuni. Contul la
6:$ este accesi>il pe >a9a unei cone)iuni dial-up care permite o le+&tur& cu o ;ite9& de p0n& la (
L>ps.
Inainte de a desc%ide un ast'el de contG tre>uie ;eri'icate detaliile pri;ind spaiul de stocareG
ta)ele pentru spaiul adiionalG n mod curent 2t pentru 1 M>G e;entualele alte ta)e. Tre>uie
;eri'icat& de asemenea disponi>ilitatea altor ser;iciiG cum ar 'i .T$G @op%erG TelnetG scripturi C@6G
care ar tre>ui s& poat& 'i utili9ate +ratuitG n ca9ul n care e)ist&.
<n cont la un pro;ider 6:$ este o opiune economic& darG n acelai timpG limitat&. Au e)ist&
control al ser;erului Fe>G ser;iciile adiionale r&m0n0nd la latitudinea pro;iderului. Au ;ei a;ea
propriul domeniuG iar adresa <=L ;a ar&ta ast'elH
%ttpHOOEEE.pro;ider.comOsdumnea;oastra
4tili2area unui serviciu de $osting
1
Cea mai >un& soluie din punctul de ;edere al raportului ser;iciiOpre o repre9int& 'olosirea
unui ser;iciu de %ostin+ pl&tit. "'ertele de pe piaa rom0neasc& sunt numeroase i ;ariate ca pre.
Inainte de a 'ace o ale+ere este >ine s& 'acei un studiu comparati; al acestora n pri;ina spaiului
pus la dispo9iieG al modului de trans'er al 'iierelorG al tra'icului impus precum i al pre9enei
di;erselor 'acilit&iH scripturi C@6G >a9e de dateG email personali9atG etc. Au tre>uie s& pierdei din
;edere c& site-ul dumnea;oastr& se poate de9;olta ast'el nc0t spaiul de stocare re9er;at la nceput
poate de;eni insu'icient.
<tili90nd un ser;iciu de %ostin+ adresa <=L a site-ului ;a a;ea 'orma urm&toareH
%ttpHOOEEE.dumnea;oastra.com
!e asemenea ;ei >ene'icia i de una sau mai multe adrese de email personali9ate de tipulH
adresahdumnea;oastra.com
.olosirea ser;iciilor unei 'irme de %ostin+ ;& permite caG odat& ce deinei propriul nume de
domeniuG s& ;& trans'erai site-ul pe ser;erul Fe> al 'irmei i s& >ene'iciai de o pre9en& sta>il& pe
Fe>. .irmele de %ostin+ o'er& uneori i nume de domenii pentru clienii lor ns& e)ist& riscul ca
dac& ;& %ot&r0i s& renunai la ser;iciile acelei 'irme s& pierdei domeniul. !in acest moti; este mai
>ine s& tratai separat cele dou& pro>leme.
3. "r+ani9area i denumirea 'iierelor
!ei aceast& etap& este intrinsec& procesului de construire a site-uluiG o ;om discuta n acest
capitolG deoarece acum este momentul c0nd o >un& or+ani9are a directoarelorG su>directoarelor i
'iierelor de;ine deose>it de important&.
+rgani2area directoarelor i fiierelor
Este 'oarte >ine s& or+ani9ai 'iierele care 'ac parte din site pe computerul dumnea;oastr&
e)act aa cum ele ;or 'i or+ani9ate pe ser;erul Fe>. :er;erul Fe> are un director Jr&d&cin&J 1root2
unde ;or 'i stocate toate 'iierele site-ului. .olderul unde ;ei stoca aceste 'iiere pe computerul
personal ;a Cuca rolul directorului Jr&d&cin&J al ser;erului. In directorul Jr&d&cin&J ;a 'i plasat
'iierul care ;a conine pa+ina J%omeJ a site-uluiG 'iier denumit de o>icei in%ex.html sau in%ex.htm.
!ac& site-ul este de mici dimensiuni 1ntre i 13 pa+ini2 putei plasa toate 'iierele n acelai
director. !ac& site-ul este mai mareG este recomandat s& creai pentru 'iecare seciune principal& a sa
c0te un su>director care ;a conine 'iierele asociate acelei seciuni. :u>directoarele pot conine la
r0ndul lor c0te un 'iier inde). ,tunci c0nd ;ei trans'era 'iierele de pe computerul dumnea;oastr&
pe ser;erul Fe> ;ei putea s& trans'erai ntre+ul su>director cu 'iierele coninute n el. !e
asemenea aceast& metod& ;a 'ace i ntreinerea site-ului mult mai uoar&.
" alt& pro>lem& este locul unde ;ei stoca ima+inile. $ractica standard este de a crea un
su>director special n directorul Jr&d&cin&J unde s& plasai toate ima+inile din site. !ac& procedai
ast'el este e)trem de important s& creai un su>director similar cu aceeai amplasare i pe
computerul dumnea;oastr&. Calea de la pa+ina care apelea9& o ima+ine la ima+inea respecti;&
tre>uie s& 'ie aceeai i pe computerul dumnea;oastr& i pe ser;erG altminteri ima+inile nu se ;or
a'ia dup& ce site-ul a 'ost trans'erat pe ser;er.
" alt& ;ariant& de stocare a ima+inilor este crearea unui su>director destinat ima+inilorG plasat
n su>directorul 'iec&rei pa+ini. Cu aceleai precauii le+ate de calea corect& c&tre ima+iniG aceast&
metod& 'uncionea9& >ineG >a c%iar m>un&t&ete ;ite9a de nc&rcare a ima+inilor n pa+ini.
!e9a;antaCul const& n 'aptul c& adesea este necesar s& reinei mai multe copii ale aceleiai ima+ini
n di'erite su>directoareG n 'uncie de pa+inile unde este 'olosit&.
/erificarea numelor fiierelor
La mutarea 'iierelor de pe computerul dumnea;oastr& pe ser;erul Fe> se impune ;eri'icarea
numelor 'iierelor care tre>uie s& 'ie compati>ile cu sistemul pe sunt mutate.
1(
" atenie deose>it& tre>uie acordat& denumirii i e)tensiei 'iierelor. Au are importan& dac&
optai pentru e)tensia .html sau .htm. Tot ce tre>uie este s& 'ii consec;ent cu e)tensia aleas& de-a
lun+ul ntre+ului site. !e asemeneaG tre>uie s& a;ei n ;edere c& n sistemele <A6BG cele mai des
'olosite ca ser;ere Fe>G denumirile 'iierelor sunt case-sensitive. " pa+in& denumit& mypage.html
nu este totuna cu pa+ina My:age.html. $entru a e;ita con'u9iile 'olosii pentru denumirea 'iierelor
numai litere mici.
4. Trans'erul 'iierelor
Trans'erul 'iierelor care compun site-ul de pe computerul propriu pe ser;erul Fe> este o
operaiune relati; simpl&G care const& n copierea 'iierelor pe ser;er n locaia destinat& site-ului
dumnea;oastr&. <nele dintre 'irmele de %ostin+ asi+ur& o aplicaie special& destinat& trans'erului
'iierelorG dar cea mai utili9at& metod& de trans'er este prin intermediul unui client .T$.
<n client 6T5 17ile *rans#er :rotocol2 este o aplicaie prin intermediul c&reia se poate reali9a
trans'erul 'iierelor de pe un sistem pe altul. $utei copia 'iiere de pe computerul personal pe un alt
computer 1operaie denumit& 1ploa%2 dup& cum putei prelua 'iiere de pe un alt computerG pe
computerul personal 1operaie denumit& Co'nloa%2. Cele mai 'olosite pro+rame .T$ sunt /ute7*:
1%ttpHOOEEE.cute'tp.com2 i WS;7*: 1%ttpHOOipsEitc%.com2. "dat& ce ai instalat pe computerul
dumnea;oastr& un client .T$G ;-ai nre+istrat numele de domeniu i a;ei un cont la un ser;iciu de
+&9duire totul este pre+&tit pentru trans'erul 'iierelor care compun site-ul pe ser;erul +a9d&.
$entru a reali9a trans'erul 'iierelorG n +eneral ;a tre>ui s& urmai urm&torii paiH
Conectarea la 6nternet
!esc%iderea pro+ramului .T$. 7ei o>ser;a o serie de casete de dialo+ n care tre>uie introduse
in'ormaiile necesare pro+ramului pentru a reali9a cone)iunea cu computerul +a9d&.
$entru a 'ace cone)iunea cu ser;erul tre>uie s& 'urni9ai pro+ramului adresa .T$ a %ost-ului
dumnea;oastr&. ,ceasta ;& este 'urni9at& de 'irma de %ostin+ la desc%iderea contului. !e
asemeneaG pro+ramul ;& ;a cere numele de utili9ator i parola pe care le-ai sta>ilit la
desc%iderea contului. Au uitai s& de->i'ai opiunea <nonymous din meniul Login. $rin
introducerea numelui de utili9ator i a parolei ;ei c&p&ta acces la contul dumnea;oastr& i ;ei
putea intra n directorul unde ;or 'i plasate 'iierele site-ului.
" alt& in'ormaie care tre>uie 'urni9at& pro+ramului este tipul 'iierelor trans'erate. In +eneral
pentru 'iierele HTML se 'olosete opiunea <S/II iar pentru celelalte 'iiereG opiunea !inary.
Mai simpluG putei ale+e opiunea <utoCetect prin care pro+ramul determin& sin+ur tipul
'iierului i modul cum ;a 'ace transmiterea lui.
Celelalte casete de dialo+ pot 'i l&sate necompletate sau cu set&rile pree)istente.
!up& 'urni9area acestor in'ormaii pro+ramul .T$ ;a reali9a cone)iunea cu ser;erul +a9d&.
:electarea 'iierelor pe care dorii s& le copiai. 7ei o>ser;a c& 'ereastra aplicaiei .T$ este
mp&rit& n dou&H ntr-o parte a;ei directoarele de pe computerul personalG n cealalt& parte
directoarele de pe computerul +a9d&. :electai directorul care conine 'iierele dumnea;oastr& i
dai comanda de trans'er n directorul care ;& este destinat pe ser;erul +a9d&.
!ac& 'olosii scripturi C@6 asociate site-ului tre>uie s& le acordai o atenie special&. Cele mai
multe ser;ere necesit& instalarea scripturilor C@6 ntr-un su>director special numit cgi-!inG a'lat n
directorul dumnea;oastr&. $entru plasarea i setarea corect& a scripturilor tre>uie s& luai le+&tura cu
administratorul ser;erului +a9d& care ;& ;a o'eri indicaiile necesare.
$e unele sisteme de operare modul de accesare al 'iierelor este strict de'initG permi0nd sau
restricion0nd citireaG scrierea sau e)ecutarea 'iierelor de c&tre di'erii utili9atori. ,ceste 'acilit&i
sunt setate de re+ul& prin drepturile de acces atri>uite 'iierelor. !in acest moti;G ;eri'icarea
modului de setare a 'iierelor este e)trem de important&. !e e)empluG n sistemele <A6B modul
*3 semni'ic& 'aptul c& 'iierele pot 'i cititeG modi'icate sau e)ecutate de proprietarul lorG n ;reme
ce ali utili9atori nu le pot dec0t citi sau e)ecuta 1dup& ca92.
!up& trans'erul 'iierelorG pot ap&rea pro>leme de di;erse tipuri. <neoriG pa+inile pu>licate nu
pot 'i accesate delocG scripturile nu 'uncionea9&G etc. $rimul lucru care tre>uie ;eri'icat n acest ca9
1*
este dac& 'iierele se a'l& n directoarele potri;ite. ,poi tre>uie ;eri'icate permisiunile de acces
pentru directoare i 'iiereG e)tensiile 'iierelorG 'iierele inde). In ca9ul c0nd apar pro>lemeG cea
mai si+ur& cale de re9ol;are a lor este s& luai le+&tura cu administratorul ser;erului +a9d& i s& i
cerei in'ormaii c0t mai complete pri;ind drepturile de acces pentru directoareG calea corect& c&tre
scripturile 'olosite iG n +eneralG set&rile necesare pentru >una 'uncionare a site-ului.
CYte?a cu?inteZla ;inal
,m aCunsG iat&G la 'inalul c&l&toriei noastre. ,;eiG acumG toate in'ormaiile i instrumentele
necesare construirii unui site atr&+&torG 'uncional i e'icient. $utei ncepe prin a ;& construi o
pa+in& personal& pe care o putei plasa pe un ser;er +ratuitG pentru a e)ersa cunotinele do>0ndite.
!ar acesta este doar primul pas.
!esi+nul Fe> este unul dintre domeniile cu un mare potenial de de9;oltare. Tot mai multe
'irme doresc site-uri pe Fe>G 'ie pentru a derula a'aceri prin intermediul lorG 'ie doar pentru a-i
pre9enta o'erta de produse i ser;icii. " carier& n acest domeniu este o ale+ere cu mari anse de
succes pentru orice t0n&r. Mai multG dei pe Fe>-ul rom0nesc aceast& 9on& este nc& sla>
de9;oltat&G putei s& ;& iniiai propria a'acere care s& se derule9e e)clusi; pe 6nternet.
,ceast& carte a urm&rit s& ;& o'ere in'ormaiile necesare unui start corect n domeniul
desi+nului Fe>. !ar nu tre>uie s& ;& oprii aici. !esi+nul i pro+ramarea Fe> repre9int& domenii
;aste iar cartea noastr& a atins doar elementele de >a9& ale acestora. $utei continua n;&0nd s&
pro+ramai n $erl pentru a crea scripturi C@6G putei n;&a Da;a:criptG Da;a sau un lim>aC de
intero+are pentru >a9ele de date stocate pe ser;er. $utei de;eni 'amiliar cu unul din editoarele
puternice de HTML 1Macromedia !reamEa;er este cel mai utili9at n acest moment2 sau putei
n;&a s& st&p0nii 'oarte >ine un pro+ram de +ra'ic& 1Corel!raE sau ,do>e $%otos%op de e)emplu2
pentru a crea +ra'ic& Fe>. $osi>ilit&ile sunt nenum&rate.
In lumea Forld Fide Fe> totul este ntr-o continu& micare i de9;oltare. ,ceast& carte ;-a o'erit
'undamentele pro+ram&rii n HTML. Continuai s& n;&aiG per'ecionai-;& continuu i succesul
;iitor ;& este asi+urat.
1-

HTML Bun

Încărcat de

Informații document

Titlu original

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

HTML Bun

Încărcat de

Drepturi de autor:

Formate disponibile

Capitolul 1 ..........................................................................................................................................

(le"ente de )a*a +ta,uri-.

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