Curs Initiere Web Design

Colegiul Tehnic Dumitru Mangeron Bacu
Prof. Ing. Bostan Mihaela

Cap. 3: HTML DE BAZ
------------------------------------------------------------------
3.1. STRUCTURA UNUI DOCUMENT HTML
------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
Salut!
Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum
este tare tarziu, dar cum somnul intarzie sa vina iata-ma ai-ui
pe internet. Saptamana viitoare tre!uie sa prezint la ora de
engleza un referat cu tema "#nternet viitorul omenirii$" in care
voi vor!i despre implicatiile pe care le are informatica si, in
special, internetul in viata omului viitorului. Sigur ca tre!uie
sa fie o viziune a mea asupra viitorului si nu o profetie. %aca
tu, draga mea prietene de pe internet, m-ai putea a&uta cu cateva
sugestii in realizarea acestui referat ti-as ramane indatorata.
</BODY>
</HTML>
------------------------------------------------------------------
3.2. FORMATAREA PARARAFELOR
3.2.1. T!"#"!"a $a $%&%" &'(a
Ma!#a)($ . 'l se poate folosi si in com!inatie cu
parametrul CL'A()optiune, optiune ce forteaza trecerea la linie
noua fata de marginea specificata.
*alorile posi!ile pentru optiune sunt left, rigt, all.
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
Salut! 
Ma numesc Alina si sunt eleva la un liceu din Craiova.
Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma
ai-ui pe internet. Saptamana viitoare tre!uie sa prezint la
ora de engleza un referat cu tema "#nternet viitorul omenirii$" in
care voi vor!i despre implicatiile pe care le are informatica si,
in special, internetul in viata omului viitorului. Sigur ca
tre!uie sa fie o viziune a mea asupra viitorului si nu o profetie.

%aca tu, draga mea prietene de pe internet, m-ai putea
a&uta cu cateva sugestii in realizarea acestui referat ti-as
ramane indatorata.
</BODY>
</HTML>
------------------------------------------------------------------
1
------------------------------------------------------------------
3.2.2. Sp"#%+%#a!"a (&(% pa!a,!a+
Ma!#a)($ ...<P/P>
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
Salut!
Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum
este tare tarziu, dar cum somnul intarzie sa vina iata-ma ai-ui
pe internet. 
Saptamana viitoare tre!uie sa prezint la ora de engleza un
referat cu tema "#nternet viitorul omenirii$" in care voi vor!i
despre implicatiile pe care le are informatica si, in special,
internetul in viata omului viitorului. Sigur ca tre!uie sa fie o
viziune a mea asupra viitorului si nu o profetie. 
%aca tu, draga mea prietene de pe internet, m-ai putea
ramane indatorata.
</BODY>
</HTML>
------------------------------------------------------------------
3.2.3. A$%&%"!"a (&(% pa!a,!a+
Ma!#a)($ ...<P/P> se im!ogateste cu optiunea align.
+ptiunea align poate primi ca valoare unul din cuvintele,
left, rigt, center.
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
Salut!
Ma numesc Alina si sunt eleva la un liceu din Craiova.
ai-ui pe internet. 
Saptamana viitoare tre!uie sa prezint la ora de
sa fie o viziune a mea asupra viitorului si nu o profetie. 
</BODY>
</HTML>
------------------------------------------------------------------
2
------------------------------------------------------------------
3.2./. C"&.!a!"a ."0.($(%
Ma!#a)($ <CENTER>...</CENTER> are ca efect centrarea rapida a
te-tului.
.Are acelasi efect ca marca&ul /0 align)"center"1.../2013
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
<CENTER> Salut! </CENTER>
Ma numesc Alina si sunt eleva la un liceu din Craiova.
ai-ui pe internet. 
Saptamana viitoare tre!uie sa prezint la ora de
sa fie o viziune a mea asupra viitorului si nu o profetie. 
</BODY>
</HTML>
------------------------------------------------------------------
3.3. FORMATAREA FONT1URILOR
------------------------------------------------------------------
4n font reprezinta un set de caractere 56789 cu un aspect
grafic unitar.
S.%$(!% 2" a+%3a!", ingrosat, inclinat, su!liniat.
Ma!#a)($ ... este folosit daca vrem ca un cuvant
sau o portiune din te-t sa ne apara ingrosat.
Ma!#a)($ ... este folosit daca vrem ca un cuvant
sau o portiune din te-t sa ne apara ingrosat.
Ma!#a)($ ... este folosit daca vrem ca un cuvant
sau o portiune din te-t sa ne apara su!liniat.
3.3.1. N%4"$" 2" .%.$(
Ma!#a)"$" <H&>...</H&> pun in evidenta nivelele de su!titlu al
unui document: n poate lua valori de la ; la 8. Cel mai inalt
nivel este ;, apoi nivelul descreste pana la nivelul 8, nivelul 8
fiind cel mai mic nivel.
3.3.2. A$","!"a .%p($(% 2" +'&.
Ma!#a)($ ... %5p!"(&a #( 'p.%(&" +a#" 5ce va
primi ca valoare numele fontului ce intentionam sa-l folosim
incadrat de gilimele9 -1 permite alegerea tipului de font cu care
dorim sa fie afisat te-tul.
3
...
3.3.3. A$","!"a 2%5"&3%(&%% #a!a#."!"$'!
Ma!#a)($ ... %5p!"(&a #( 'p.%(&" 3%7" 5ce va
primi ca valoare un numar incadrat intre gilimele9.
...
3.3./. A$","!"a #($'!%% +'&.1($(%
Ma!#a)($ ... %5p!"(&a #( 'p.%(&" #'$'!. *aloarea
acestei optiuni va fi numele in lim!a engleza incadrat de
gilimele sau codul culorii precedat de semnul < si incadrat, de
asemenea, de gilimele.
...
...
------------------------------------------------------------------
3./. LINII DE DELIMITARE SI COMENTARII
------------------------------------------------------------------
3./.1. Ma!#a)($ <HR>6 plasat oriunde in document, are ca efect
.!a3a!"a (&"% $%&%% '!%7'&.a$".
Se poate folosi in com!inatie cu parametrii, S#=')optiune,
>#%TH)optiune, AL#?H)optiune si @+SHA%'.
- optiunea parametrului S#=' este un numar ce sta!ileste
grosimea liniei:
- optiunea parametrului >#%TH poate sta!ili cat la A din
latimea paginii va ocupa rigla respectiva:
- parametrul AL#?@ se utilizeaza impreuna cu parametrul >#%TH
si optiunea lui are drept efect fortarea liniei fata de marginea
specificata. *alorile posi!ile pentru optiune sunt left, rigt.
- optiunea C+L+( sta!ileste culoarea riglei:
- prin prezenta parametrului @+SHA%', fara nici o optiune, se
dezactiveaza afisarea um!rei pentru rigla orizontala.
3./.2. C'5"&.a!%%
Comentariile sunt te-te incadrate intre /!-- si --1.
(olul comentariilor este de a face un document HTML mai usor
de inteles prin plasarea unor e-picatii din loc in loc. 'le nu vor
fi afisate in cuprinsul paginii >e! creata prin documentul
respectiv.
------------------------------------------------------------------
4
Cap./
:MBUNT;IREA PAINII <EB CU IMAINI6 LISTE =I TABELE
/.1. I5a,%&% IF 3% >P
Formele grafice permise de HTML sunt, ?#F5imagini:678 culori9
Bi C0? 5imagini: milioane de culori9.
/.2. I&3"!a!"a %5a,%&%$'!
Marca&ul /#M? S(C)numeDimagine1
E0"5p$( 50#S#CA.tml9
/HTML1
/H'A%1
/T#TL'1 #ncluderea unei imagini /2T#TL'1
/2H'A%1
/E+%F1
/H( S#=')GH color)('%1
/#M? S(C)C,Icatel.&pg1
/H;1/C'@T'(1 Salut!/2C'@T'(1/2H;1
/C'@T'(1/F+@T face)"Courier, Arial" color)"('%"
size)"8"1/01 Ma numesc Motanel!/201/2F+@T1/2C'@T'(1
/C'@T'(1/#M? S(C)C,Ipisica.&pg1/2C'@T'(1
/H( S#=')GH color)('%1
/#1pisicaJK.ro/2#1/H( C+L+()red1
/2E+%F1
/2HTML1
E+"#.
Salut!
Ma numesc Motanel!
pisica@k.ro
5
/.3. L%3." %& pa,%&% <"?
/.3.1. L%3." O!2'&a." 5elementele sunt automat numerotate9.
%eclararea unei liste ordonate se face cu a&utorul marca&ului,
<OL>..</OL>
E0. N!.1 5L+;.tml9 E+"#.
<OL>
/L#1element ;
/L#1element 6
/L#1element G
</OL>
1. element 1
2. element 2
3. element 3
E0. N!.2 5L+6.tml9
Efect
<OL TYPE*A>
/L#1element ;
/L#1element 6
/L#1element G
</OL>
A. element 1
B. element 2
C. element 3
E0. N!.3 5L+G.tml9
Efect
<OL TYPE*I START*3>
/L#1element ;
/L#1element 6
/L#1element G
</OL>
III. element 1
IV. element 2
V. element 3
E0. N!./ 5L+L.tml9
Efect
<OL TYPE*I START*3>
/L#1element ;
/L# *AL4');H1element 6
/L# *AL4')6H1element G
/L#1element L
</OL>
III. element 1
X. element 2
XX. element 3
XXI. element 4
/.3.2. L%3." N"'!2'&a." @ 3a( $%3." 5a!#a." 5elementele sunt
marcate printr-un semn special9.
%eclararea unei liste neordonate se face cu a&utorul marca&ului,
<UL>..</UL>.
E0. N!.1 54L;.tml9 E+"#.
<UL>
/L#1 element ;
/L#1 element 6
/L#1 element G
</UL>
element 1
element 2
element 3
E0. N!.2 54L6.tml9
Efect
<UL TYPE*#%!#$">
/L#1 element ;
/L#1 element 6
/L#1 element G
</UL>
o element 1
o element 2
o element 3
6
.Scim!area sim!ulului care preced elementele din lista se poate
face utilizand parametrul TF0' al marca&ului /4L1../24L1, caruia i
se pot asocia una dintre urmatoarele valori1 2%3#, #%!#$" Bi
3A(a!".3
/.3.3. L%3." 2" D"+%&%.%% de termeni si definitiile lor
asociate.
%eclararea unei liste ordonate se face cu a&utorul marca&ului
<DL>..</DL> utilizat impreuna cu marca&ul <DT> pentru termenul
definit si marca&ul <DD> pentru definitia propriu zisa.
E0"5p$( 5%L.tml9
<DL>
<DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate
prin caractere mai ingrosate.
/%T1%ate/%%1Flu- nesfarsit de materiale care apar pe #nternet.
<DT>Font<DD>4tilizarea particulara a unui anumit stil de
caractere.
</DL>
E+"#.
Aldine
Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate.
ate
!lu" nesfarsit de materiale care apar pe Internet.
!ont
#tilizarea particulara a unui anumit stil de caractere.
/.3./. L%3." %& $%3." @ $%3." %5?!%#a."
$
%istele pot fi con&inute una 'ntr(alta. )n proiectarea unei pagini *e+ tre+uie a,ut 'n ,edere
urm-torul lucru foarte important. informa&ia con&inut- 'n pagin- s- fie structurat- astfel 'nc/t s-
poat- fi u0or de urm-rit 0i de g-sit. )n acest sens com+inarea celor trei tipuri de liste este foarte util-.
Exerciiu:
Construii o pagin e! "n care s re#actai propria agen# telefonic utili$%n# listele #e
#efiniii. Documentul &a fi sal&at su! numele Agenda.html "n #irectorul 'le& al #irectorului
r#cin.
E0"5p$( 5ListeDim!ricate.tml9
<HTML>
<HEAD>
/T#TL'1Liste in pagini >e!/2T#TL'1
</HEAD>
<BODY>
/H( S#=')GH C+L+()('%1
/#M? S(C)c,IAlina.&pg allign)rigt1
/H;1/C'@T'(1Salut!/2C'@T'(1/2H;1
/H( >#%TH)7HA1
/4L1
/L#1/HG1%ate personale/2HG1
/%L1
/%T1@ume,/%%1Mateescu.
/%T10renume,/%%1Alina
/%T1%ata nasterii,/%%1;6DHLD;MN7
/%T10rofesia,/%%1'leva anul ## la Colegiu
/2%L1
/L#1/HG1Stare emotionala/2HG1
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma
ai-iu pe internet.
/01/L#1/HG10reocupari actuale/2HG1
Saptamana viitoare tre!uie s prezint la ora de engleza un
referat cu urmatoarele caracteristici1
/4L1
/L#1Tema- "#nternet viitorul omenirii$"
/L#1Continutul,-implicatiile pe care le are informatica si, in
special, internetul in viata omului viitorului
/L#1Concluzia,-Sigur ca tre!uie sa fie o vizine a mea asupra
viitorului si nu o profetie
/24L1
/L#1/HG1Sugestii/2HG1
%aca tu, draga prietene de pe internet, m-ai putea a&uta cu
cateva sugeestii in realizarea acestui referat ti-as ramane
indatorata. /01
/24L1
/H( >#%TH)6HA ALL#?@)left @+SHA%'1/HG1Alina/2HG1/01
/#1alinaJK.ro/2#1/H( C+L+()('%1
</BODY>
</HTML>
E+"#.
1
Salut!
Date personale
2ume.
3ateescu.
4renume.
Alina
ata nasterii.
1256451715
4rofesia.
8le,a anul II la Colegiu
Stare emotionala
Acum este tarziu9 dar cum somnul intarzie sa apara iata(ma :ai(:iu pe internet.
Preocupari actuale
;aptamana ,iitoare tre+uie s prezint la ora de engleza un referac cu urmatoarele
caracteristici<
o =ema( >Internet ,iitorul omenirii?>
o Continutul.(implicatiile pe care le are informatica si9 in special9 internetul in ,iata
omului ,iitorului
o Concluzia.(;igur ca tre+uie sa fie o ,izine a mea asupra ,iitorului si nu o profetie
Sugestii
aca tu9 draga prietene de pe internet9 m(ai putea a@uta cu cate,a sugeestii in realizarea
acestui referat ti(as ramane indatorata.
Alina
alina@k.ro
/./. I&3"!a!"a .a?"$"$'!
7
3arca@ul pentru definirea unui ta+el este. <TABLE>..</TABLE> iar 'n interiorul acestui marca@ se
utilizeaz- marca@ele.
<TR>..</TR> pentru definirea unei linii a ta+eluluiA
<TH>..</TH> pentru definirea antetului ta+eluluiA
<TD>..</TD> pentru definirea datei unei celule a ta+elului.
4arametrii marca@ului <TABLE> 4arametrii marca@ului <TD>
BRDER!n B permite definirea
zonei um+rite din @urul ta+elului
Cn9 nr. 'ntregD.
BRDER "LR!co#$culoare
B permite definirea culori zonei
um+rite.
"ELLSPA"%&'!n B define0te
spa&iul l-sat 'ntre celule Cn9 nr.
'ntreg ( pi"eliD.
"ELLPADD%&'!n ( define0te
spa&iul l-sat dintre data din celul-
0i c:enarul celulei Cn9 nr. 'ntreg (
pi"eliD.
(%DTH!n B permite definirea
l-&imii dorite a ta+elului Cn9 'n
pi"eli sau 'n procenteD.
HE%'HT!n permite definirea
'n-l&imii dorite a ta+elului Cn9 'n
pi"eli sau 'n procenteD.
"LSPA&!n B permite unei celule s- se
e"tind- pe mai multe coloane.
R(SPA&!n B permite unei celule s- se
e"tind- pe mai multe r'nduri.
'B"LR!culoare Bpermite definirea
culorii de fond a unei celule.
AL%'&!po)itie B specific- alinierea
orizontal- a datei din celul-. Ep&iunile posi+ile
sunt. (eft) *ight) Center.
BA"*'R+&D!fisier$imagine permite
specificarea unei imagini grafice de fond 'n
interiorul unei cellule.
E,. &r. - C=a+el1.:tmlD Efect
FG=3%<
FG8A<
F=I=%8<=a+eleFH=I=%8<
FHG8A<
FBEI<
F=AB%8<
F=J<F=G<2umeFH=G<
F=G<4renumeFH=G<
F=G<3ediaFH=G<
F=J<F=<4etcuFH=<
F=<IonutFH=<
F=<1.26FH=<
FH=AB%8<
FHBEI<
FHG=3%<
&ume Prenume .e#ia
4etcu Ionut 1.26
16
E,. &r. / C=a+el2.:tmlD Efect
FG=3%<
FG8A<
FHG8A<
FBEI<
F=AB%8 BEJ8J CE%EJKJ8<
F=J<F=G<2umeFH=G<
F=G<4renumeFH=G<
F=G<3ediaFH=G<
F=J<F=<4etcuFH=<
F=<IonutFH=<
F=<1.26FH=<
FH=AB%8<
FHBEI<
FHG=3%<
&ume Prenume .e#ia
4etcu Ionut 1.26
E,. &r. 0 C=a+el3.:tmlD
FG=3%<
FG8A<
FHG8A<
FBEI<
F=AB%8 BEJ8J G8ILG=K166 *I=GK166<
F=J<F=G roMspanK2 +gcolorKlig:t+lue<CandidatFH=G<
F=G<2umeFH=G<
F=G<4renumeFH=G<
F=G<3ediaFH=G<
F=J<F=<4etcuFH=<
F=<IonutFH=<
F=<1.26FH=<
FH=AB%8<
FHBEI<
FHG=3%<
Efect
"an#i#at
&ume Prenume .e#ia
4etcu Ionut 1.26
Exerciiu:
Construii o pagin e! #e pre$entare a ora+ului "n care locuii. ,nserai imagini cu
monumente semnificati&e ale ora+ului. -tructurai pagina utili$%n# un ta!el fr chenar. .olosii
pentru antetul ta!elului o culoare #e fun#al pastelat. Documentul &a fi sal&at su! numele
Oras.html "n #irectorul 8le, al #irectorului r#cin.
"AP.1. RE2ER%&3E 4& PA'%&% (EB
11
1.-. Referin5e interne
1./. Referin5e e,terne
1.0. Lin67uri 8i imagini
4rincipala caracteristic- a :iperte"telor o constituie leg-turile ClinNsD.
#n lin6s este o cone"iune c-tre alt- resurs- *e+9 resurs- care poate fi accesat- din fereastra
!ro/ser B ului printr(un singur clic.
%inN(urile pot fi de dou- tipuri. interne 0i e"terne.
3arca@ul principal at/t pentru referin&ele interne c/t 0i pentru cele e"terne este. <A>9</A>
Canc:or( ancor-D9 acesta tre+uie s- con&in- parametrul GJ8!K,aloare9 f-r- de care nu are nici un
sens.
1.-. Referin5e interne
;- presupunem c- dorim s- ad-ug-m un cuprins unei pagini *e+ de dimensiune mare pentru
a permite utilizatorului s- se deplaseze 'ntr(un anumit loc din aceea0i pagin-. %ocurile 'n care dorim
s- se fac- deplasarea se numesc &intele salturilor interne din paginile *e+ sau ancore cu nume 0i
sunt specificate9 'n cadrul documentului G=3%9 prin utilizarea parametrului name al marca@ului
FA<OFHA<.
FA nameK,aloare<3esa@FHA<
8".. FA numeK>+aza><Baza material-FHA<
#nde ,aloarea parametrului name poate fi orice sec,en&- de caractere9 numere sau semen de
punctua&ie.
A#:ugarea leg:turilor c:tre 5inte #in ca#rul paginii (e;
Corespondentul unei ancore cu nume care define0te saltul c-tre aceast- &int- este.
FA GJ8!KP2ume0ncorCu1ume<3esa@FHA<
FA GJ8!K>P+aza><Baza materialaFHA<
Exemplu care ilustreaz- cum ar ar-ta un set de ancore cu nume 'ntr(un document G=3%
destinat s- afi0eze o pagin- *e+ a unei 0coli.
F:tml<
F+odQ +acNgroundK>C.Rocuments and ;ettingsRandQeR3Q ocumentsR3Q 4icturesR464.gif>
te"tK>steel+lue><
F:1<;coala cu clasele I(VIII >2icolae Iorga> BacauFH:1<
F:2<FI<4rof. ing. Bostan 3i:aelaFHI<FH:2<
F!ont colorK>green> sizeK>5><
F4<Fa :refKP@os nameKsus<u(te @osFHa<
F4<FA GJ8!K>P+aza><Baza materialaFHA<
F4<FA GJ8!K>Pprofile>< 4rofileFHA<
F4<FA GJ8!K>Pprofesori>< 4rofesoriFHA<
F4<FA GJ8!K>Pele,i>< 8le,iFHA<
FA 2#38K>+aza><F:2<BASA 3A=8JIA%AFH:2<FHA<
F+r<2$ sali de clasa
F+r<14 la+oratoare si sali specializate
F+r<un atelier scoala
12
F+r<o +i+lioteca
F+r<la+oratoare de informatica cu retea de calculatoare si acces la Internet
F+r<ca+inet metodic de perfectionare
F+r<dispensar medical scolar
F+r<ca+inet stomatologic scolar
F+r<un +azin de inot in constructie
F+r<+aza sporti,a proprie
F+r<o cantina
F+r<un camin
F+r<Fa nameK@os :refKPsus<u(te susFHa<
FA 2A38K>profile><F:2<4JE!I%8FH:2<
F+r<4rofil 4edagogic
F+r<In,atatori(8ducatoare
F+r<4rofil Bi+liotecar si 4edagog scolar
F+r<Bi+liotecar documentarist
F+r<Instructor animator
F+r<4edagog scolar
F+r<4rofil 3atematica(Informatica
F+r<4rofil ;tiinte ale naturii
F+r<4rofil !ilologie
FA 2A38K>profesori><F:2<4JE!8;EJIFH:2<
F+r<Lor+anescu
F+r<;toica
F+r<2egrea
F+r<
...
F+r<
FA 2A38K>ele,i><F:2<8%8VIFH:2<
F+r<5A(ir.. 4rof. 2egrea
F+r<5B(ir.. 4rof. 3ocanu
F+r<5C(ir.. 4rof. Vintila
F+r<6A(ir.. 4rof. Cuciureanu
F+r<6B(ir.. 4rof. Arsinte
F+r<6C(ir.. 4rof. Bi+ire
F+r<$A(ir.. 4rof. 8scu
F+r<$B(ir.. 4rof. Costea
F+r<$C(ir.. 4rof. 3irzac
F+r<
O
FH+odQ<
FH:tml<
1./. Referin5e e,terne
13
Referin5e c:tre pagini (e; #e pe acela8i sistem #e calcul
Referin5e c:tre site7uri #in %nternet
"ap.<. "ADRE
14
"a#rele CframesD sunt sec&iuni ce ofer- posi+ilitatea de a ,izualiza simultan 'n fereastra !ro/ser2
ului mai multe pagini *e+.
Ba)ele organi):rii ca#relor
!iecare pagin- afi0at- 'ntr(un cadru se specific- utiliz/nd marca@ul F!JA38< ce este inserat 'n
marca@ul F!JA3;8=<.
4rin intermediul parametrilor JE*; sau CE%; al marca@ului F!JA3;8=< se define0te spa&iul
din cadrul ferestrei !ro/ser2ului) alocat fiec-rei pagini *e+ 'n parte.
efinirea spa&iului alocat fiec-rei pagini *e+ se poate face 'n pi"eli sau 'n procente9 procentul
se refer- la c/t la sut- din fereastra !ro/ser2ului este alocat- fiec-rei pagini *e+ 'n parte.
<.-. "a#re ori)ontale
Exemplul1: )mp-r&irea !ro/ser2ului 'n dou- sec&iuni orizontale.
Ca#re3.html
FG=3%<
F!JA38;8= JE*;K>169 T><
F!JA38 ;JC K>unu.:tml><
F!JA38 ;JC K>doi.:tml><
FH!JA38;8=<
FHG=3%<
Exemplul2: )mp-r&irea !ro/ser2ului 'n trei sec&iuni orizontale.
Ca#re4.html
FG=3%<
F!JA38;8= JE*;K>169569 T><
F!JA38 ;JC K>trei.:tml><
FH!JA38;8=<
FHG=3%<
<./. "a#re =erticale
Exemplul1: )mp-r&irea !ro/ser2ului 'n dou- sec&iuni ,erticale.
Ca#re5.html
FG=3%<
F!JA38;8= CE%;K>169T><
FH!JA38;8=<
FHG=3%<
Exemplul2: )mp-r&irea !ro/ser2ului 'n trei sec&iuni ,erticale.
Ca#re6.html
FG=3%<
F!JA38;8= CE%;K>169569T><
F!JA38 ;JC K>trei.:tml><
FH!JA38;8=<
FHG=3%<
<.0. "a#re >n ca#re
15
Exemplul1. 4utem afi0a 'n aceea0i fereastr- a !ro/ser2ului simultan at/t cadre orizontale c/t 0i
cadre ,erticale.
FG=3%<
F!JA38;8= CE%;K>16U9T><
F!JA38;8= JE*;K>36U9$6UT><
F!JA38 ;JCK>unu.:tml><
FH!JA38;8=<
F!JA38;8= JE*;K>33U933U9T><
F!JA38 ;JC K>rosu.:tml><
F!JA38 ;JC K>gal+en.:tml><
F!JA38 ;JC K>,erde.:tml><
FH!JA38;8=<
FH!JA38;8=<
FHG=3%<
Exemplul2. #nui cadru i se poate asocia un nume prin intermediul parametrului 2A38 al
marca@ului F!JA38<.
ocumentul prima.html
FG=3%<
F!JA38;8= CE%;K>36U9T><
F!JA38 ;JC K>JE;#.:tml><
F!JA38;8= JE*;K>36U9T><
F!JA38 ;JC K>28LJ#.:tml><
F!JA38 ;JC K>A%B.:tml> 2A38KJ8!8J<
FH!JA38;8=<
FH!JA38;8=<
FHG=3%<
ocumentul rsu.html
FG=3%<
FG8A<
FHG8A<
FBEI BLCE%EJK>J8>=8X=K>P!!!!!!><
FA GJ8!K>V8J8.:tml> =AJL8=KJ8!8J<Jeferire catre pagina *e+ ,erdeFHA<
FBJ<
FA GJ8!K>A%BA;=J#.:tml>=AJL8=KJ8!8J<Jeferire catre pagina *e+ al+astraFHA<
FHBEI<
FHG=3%<
ocumentul al!.html
FG=3%<
FG8A<
FHG8A<
FBEI BLCE%EJK>*GI=8>=8X=KP666666><
FG1<FC82=8J<4ALI2A A%BAFHC82=8J<FHG1<
FHBEI<
FHG=3%<
16
ocumentul negru.html
FG=3%<
FG8A<
FHG8A<
FBEI BLCE%EJK>B%ACV>=8X=KP!!!!!!><
FG1<FC82=8J<4ALI2A 28ALJAFHC82=8J<FHG1<
FHBEI<
FHG=3%<
ocumentul "erde.html
FG=3%<
FG8A<
FHG8A<
FBEI BLCE%EJK>LJ882>=8X=KP666666><
FG1<FC82=8J<4ALI2A V8J8FHC82=8J<FHG1<
FHBEI<
FHG=3%<
ocumentul al!astru.html
FG=3%<
FG8A<
FHG8A<
FBEI BLCE%EJK>B%#8>=8X=KP666666><
FG1<FC82=8J<4ALI2A A%BA;=JAFHC82=8J<FHG1<
FHBEI<
FHG=3%<
E,ercitii?
1. ;crie&i codurile G=3% anterioare Cprima.:tml9 rosu.:tml9 al+.:tml9 negru.:tml9 ,erde.:tml9
al+astru.:tmlD cre/nd paginile *e+ corespunz-toare.
2. Vizualiza&i pagina *e+ prima.html.
3. Vizita&i pe r/nd referin&ele. WJeferire c-tre pagina *e+ ,erdeX 0i WJeferire c-tre pagina *e+
al+astr-X. Ce constata&i?
1$
"ap. @. 2R.+LARE
!ormularele sunt una dintre cele mai populare metode interacti,e de comunicare *orld *ide
*e+ C***D. !ormularele G=3% ,- ofer- posi+ilitatea de a aduna informa&ii sau impresii de la cei
care ,- ,iziteaz- pagina *e+. 4entru a prelucra datele dintr(un formular9 a,e&i ne,oie de un script.
Acesta are trei componente principale. F=8X=AJ8A<9 F;8%8C=< 0i FI24#=<.
-. <TEATAREA> (define0te un c/mp 'n care utilizatorul poate introduce un te"t pe mai multe
linii.
Atri+utele pentru aceasta sunt.
2A38 B define0te numele c/mpuluiA
JE*; B sta+ile0te num-rul de linii de c/mpA
CE%; B sta+ile0te num-rul de coloane din c/mp.
Exemplul1:
!i0ierul W#rm1.htmlX
FG=3%<
F!EJ3<
F=8X=AJ8A 2A38K>Comentariu> JE*;K5 CE%;K46<
FH=8X=AJ8A<
FH!EJ3<
FHG=3%<
/. <SELE"T> ( ofer- utilizatorului posi+ilitatea de a alege dintr(o list- de op&iuni.
;IS8 B sta+ile0te c/te op&iuni sunt afi0ate 'n acela0i timpA
3#%=I4%8 B permite selectarea mai multor op&iuni 'n acela0i timp.
Ep&inile sunt delimitate de marca@ele F;8%8C=< 0i FH;8%8C=< 0i sunt listate 'n cadrul
etic:etei FE4=IE2<. Valorile pentru aceast- etic:et- sunt.
VA%#8 B reprezint- ,aloare ce este atri+uit- op&iunii 0i care apoi este trimis- c-tre scriptA
;8%8C=8 B sta+ile0te o op&iune ca fiind implicit-.
Exemplul2:
!i0ierul W#rm2.htmlX
FG=3%<
Alegeti o optiune din lista
F!EJ3<
F;8%8C= 2A38K>Eptiuni><
FE4=IE2 ;8%8C=8 VA%#8K>Eptiune1><Eptiune1
FE4=IE2 VA%#8K>Eptiune2><Eptiune2
FE4=IE2 VA%#8K>Eptiune3><Eptiune3
FH;8%8C=8<
FH!EJ3<
FHG=3%<
0. <%&P+T> ( este un c/mp pentru o singur- op&iune ce permite colectarea de informa&ii9
incluz/nd c/mpuri simple de te"t9 +utoane radio9 c-su&e de +ifare 0i +utoane de trimitere sau
de anulare a informa&iilor din formulare.
;II8 B dimensiunea c/mpului specificat- 'n num-r de caractere te"tA
11
3AX%82LG= B specific- nr. 3a". e caractere ce pot fi citite pentru un c/mp de
te"tA
VA%#8 B define0te pentru un c/mp de te"t9 te"tul implicit ce ,a fi afi0atA
CG8CV8 B acti,eaQ- un +uton radio sau o c-su&- de +ifareA
=I48 B define0te tipul c/mpului de intrare.
Exemplul$ % pentru un c/mp simplu de te"t.
!i0ierul W#rm$.htmlX
FG=3%<
F!EJ3<
Introduceti numele.FI24#= =I48K>te"t> 2A38K>2ume> ;IS8K>15> 3AX%82L=GK>12><
FH!EJ3<
FHG=3%<
Exemplul& B pentru c-su&a de +ifare :
!i0ierul W#rm&.htmlX
FG=3%<
F!EJ3<
FI24#= =I48K>c:ecN+o"> 2A38K>>c:ecN+o"1> VA%#8K>Eptiune1><Eptiune1
FI24#= =I48K>c:ecN+o"> 2A38K>c:ecN+o"2> VA%#8K>Eptiune2> CG8CV8<Eptiune2
FH!EJ3<
FHG=3%<
Exemplul' B pentru +utoane radio:
!i0ierul W#rm'.htmlX
FG=3%<
F!EJ3<
Intre+area 1. Va placut pana acum?
F+r<
FI24#= =I48K>radio> 2A38Kc:oice> VA%#8>Eptiune1><a
FI24#= =I48K>radio> 2A38Kc:oice> VA%#8>Eptiune2><2u
FH!EJ3<
FHG=3%<
Exemplul( B pentru +utoane de trimitere 0i anulare:
!i0ierul W#rm(.htmlX
FG=3%<
F!EJ3<
Introduceti numele.FI24#= =I48K>te"t> 2A38K>2ume> ;IS8K>15> 3AX%82L=GK>12><
F+r<F+r<
FI24#= =I48K>;u+mit> VA%#8K>=rimite><
FI24#= =I48K>Jeset> VA%#8K>Anuleaza><
FH!EJ3<
FHG=3%<
E,erci5iu?
;. Crea&i o pagin- *e+ numit- .ormular.html9 care s- con&in- un formular pentru
sugestiile 0i 'ntre+-rile ,izitatorilor site(ului din care ,a face parte pagina respecti,-.
17
4rogramul pentru !ormularul pe *8B.
son#a7.html
FG=3%<
FG8A<
F=I=%8<;onda@FH=I=%8<
FHG8A<
FBEI<
FG1<;E2AYFHG1<
3ultumim pentru timpul alocat raspunsului la urmatoarele intre+ari.
F!EJ3 AC=IE2K>mailto.euZpro,aiderul meu.ro
38=GEK4E;=
82C=I48K>te"tHplain><
Adresa dumnea,oastra de e(mail.
FI24#= =I48K>te"t> 2A38K>8(mail> VA%#8KloginZpro,ider.ro
F4<
FI24#= =I48K>c:ecN+o"> 2A38K>secret> VA%#8K>da><
2u ,reau sa faceti pu+lica adresa mea.
F4<
Cum ,a conectati la internet? FBJ<
FI24#= =I48K>radio> 2A38K>cone"iune> VA%#8K>modem> CG8CV8<3odem FBJ<
FI24#= =I48K>radio> 2A38K>cone"iune> VA%#8K>J2I;><J2I;FBJ<
FI24#= =I48K>radio> 2A38K>cone"iune> VA%#8K>%;><legatura specificataFBJ<F4<
#nde ,a aflati?
F;8%8C= 2A38K>Jegiune><
FE4=IE2 VA%#8K>Jomania ;8%8C=8><Jomania
FE4=IE2 VA%#8K>;#A><;#A
FE4=IE2 VA%#8K>8uropa><8uropa
FE4=IE2 VA%#8K>Jestul lumii><Jestul lumii
FH;8%8C=<
F4<
Ce cautati prin pagina mea de Me+?FBJ<
F;8%8C= 2A38K>Interes> ;IS8K43#%=I4%8<
FE4=IE2 VA%#8K>Informatii><Informatii
FE4=IE2 VA%#8K>;port><;port
FE4=IE2 VA%#8K>i,ertisment><i,ertisment
FE4=IE2 VA%#8K>Cultura><Cultura
FE4=IE2 VA%#8K>;lu@+a><;lu@+a
FH;8%8C=<
F4<
A,eti ,reo o+ser,atie de facut?FBJ<
F=8X=AJ8A 2A38K>Comentarii> CE%;K46 JE*;K4 *JA4Kp:Qsical<
FH=8X=AJ8A<
F4<
FI24#= =I48K>su+mit> VA%#8K>=rimite><
FI24#= =I48K>reset> VA%#8K>Initializare><
FH!EJ3<
FHBEI<
FHG=3%<
26
Cap.8 2 Transferul fi+ierelor prin .TP
21
Cap. 9 2 Proiectarea site2urilor e!
)ap. 1* 7 %&TRD+"ERE 4& BACAS"R%PT
Ya,a;cript este un lim+a@ de programare creat de 2etscape9 cu a@utorul c-ruia se pot realiza
pagini Me+ interacti,e. ;inta"a sa este asem-n-toare cu cea a lim+a@elor CHC[[ sau Ya,a.
Ya,a;cript poate recunoa0te 0i r-spunde la e,enimentele utilizatorului cum ar fi efectuarea
unui cliN cu mouse(ul9 introducerea datelor 'ntr(un formular de na,igare 'n pagin-. e e"emplu9 se
pot scrie func&ii care s- ,erifice dac- datele introduse 'ntr(un formular sunt ,alide.
Instruc&iunile Ya,a;cript sunt cuprinse 'n interiorul documentului G=3% 'n interiorul
marca@ului. F;CJI4=<...FH;CJI4=<
Acesta poate ap-rea9 fie 'n antetul documentului9 fie 'n corpul s-u.
F;CJI4= languageKXYa,a;criptX<
HHcodul Ya,a;cript
FH;CJI4=<
Exemplu:
7a&a.html
FG=3%<
FBEI<
F;CJI4= languageK>Ya,a;cript><
document.MriteC>=e"t scris cu Ya,a;cript>DA
FH;CJI4=<
F+r<=e"t scris cu G=3%
FHBEI<
FHG=3%<
+e,ultat:
Te-t scris cu CavaScript
Te-t scris cu HTML
-D.-. E=enimente
#n e,eniment este o ac&iune generat- de utilizator. clicN pe un o+iect9 trecerea mouse(ului
pe un o+iect9 trimiterea unui formular etc.
Exemplu: -e&en.html +e,ultat:
FG=3%<
FBEI<
F!EJ3<
FI24#= tQpeK>Button> ,alueK>Apasati(ma>
onClicNK>alertC\;alut\D><
FH!EJ3<
FHBEI<
FHG=3%<
-D./. Elementele lim;aEului Ba=aScript
22
De.inirea /i apelarea .unciilr:
efinirea unei func&ii presupune doar specificarea ac&iunilor ce se ,or efectua. Apelarea unei func&ii
presupune punerea 'n aplicare a acelor ac&iuni.
efinirea func&iilor se face 'n antetul documentului G=3%.
!unc&iile pot returna unul sau mai multe rezultate ori nici unul 'n urma apelului.
Exemplu ce define0te o func&ie 'n antet 0i o apeleaz- apoi 'n corpul documentului G=3%.
fct.html
FG=3%<
FG8A<
function sumaCnumar19 numar2D
]
return numar1[numar2A
^
FH;CJI4=<
FHG8A<
FBEI<
document.MriteC>;uma returnata de functie este >9 sumaC5916DDA
FH;CJI4=<
FHBEI<
FHG=3%<
0aria!ile:
Varia+ilele se declar- cu a@utorul cu,/ntului c:eie &ar9 f-r- a se preciza tipul acestora. Acestea '0i pot
sc:im+a tipul pe parcursul programului.
;inta"a de declarare a ,aria+ilellor este.
&ar &aria!ila3) &aria!ila4) ...
sau
&ar &aria!ila:&aloare
Varia+ilele sunt de dou- tipuri. locale Csunt declarate 'n interiorul func&iilorD 0i glo!aleD sunt
declarate 'n afara func&iilorD.
&aria!ile.html
FG=3%<
FG8A<
,ar numeK\=oma\
,ar prenume
function scrieCD
]
,ar prenumeK\8lena\
document.MriteCprenumeDA
^
FH;CJI4=<
FHG8A<
FBEI<
document.MriteCnume[\ \[prenume[\ \DA
scrieCDA
FH;CJI4=<
FHBEI<
FHG=3%<
23

Curs Initiere Web Design

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs Initiere Web Design

Încărcat de

Drepturi de autor:

Formate disponibile

Colegiul Tehnic Dumitru Mangeron Bacu

Prof. Ing. Bostan Mihaela

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