HTML - (HyperText Mark-up Language) Limbaj folosit pentru crearea documentelor web si reprezinta o colectie de comenzi de aranjare a elementelor

ce creeaza documente !ypertext (pagini "eb)#

Taguri HTML Semnificaie de nceput i de sfrit $HTML% $&HTML% $H+,'% $&H+,'% $T-TL+% $&T-TL+% $01'2% $&01'2% $H3%$&H3% $H5%$&H5% $H6%$&H6% $H7%$&H7% $H8%$&H8% $H9%$&H9% $0%$&0% $-%$&-% $:%$&:% HyperText Markup Language ,ntet Titlu .orp Titlu 3 Titlu 5 Titlu 6 Titlu 7 Titlu 8 Titlu 9 gras (bold) italic subliniat

Funcie

Rezultat

'efine(te )nceputul (i sf*r(itul documentului 'efine(te )nceputul (i sf*r(itul documentului .on/inutul apare )n bara de titlu a documentului 'efine(te )nceputul (i sf*r(itul corpului de text 4ras foarte gros 4ras gros 4ras mijlociu 4ras normal 4ras mic 4ras foarte mic ,tributul textului ,tributul textului ,tributul textului , se e;ita <<< confuzie cu un !yperlink spa/iu protejat @a fi creat un spa/iu )ntre paragrafe ,ici este un paragraf ,ici al doilea ,ici e o frazB :rmBtoarea este pe o nouB linie care nu este un paragraf gras italic subliniat

=nbsp> $?%$&?% $0A%

spa/iu protejat ?aragraf retrimitere la linie nu se dore(te sB existe o linie ;idB )ntre douB linii consecuti;e linie orizontalB

$HA% $?%=nbsp > $L-%

?aragraf cu spa/iu protejat .reazB un spa/iu gol listB op/iuni ;ezi alegerea urmBtoare ;ezi alegerea

urmBtoare $1L%$&1L% $:L%$&:L% listB ordonatB listB neordonatB 'efine(te )nceputul (i sf*r(itul unei enumerBri 3# primul punct ordonate 5# al doilea punct 'efine(te )nceputul (i sf*r(itul unei enumerBri C primul punct neordonate C al doilea punct

-ntroducere in HTML -n aceasta prima lectie ;ei in;ata ce este limbajul HTML la ce iti poate fi de folos precum si ce ar trebui sa stii inainte de a trece la in;atarea acestui limbaj# .e este limbajul HTMLD HTML este prescurtarea de la Hypertext Markup Language ceea ce reprezinta de fapt limbajul pe care browserele de internet il inteleg si cu ajutorul lui pot fi afisate paginile web# Limbajul HTML nu este greu de in;atat asa cum te ;ei putea con;inge din acest curs# +ste de ajuns sa cunosti tag-urile de baza ale acestui limbaj (;om ;edea mai incolo ce inseamna aceste tag-uri) pentru a putea crea o pagina web#

?entru aceasta trebuie sa exersezi cat mai mult incepand cu exemplele din cadrul cursului EHTML pe intelesul tuturorF sa scrii tu codul pentru fiecare exemplu# -n felul acesta ;ei dobandi foarte repede cunostintele de baza care te ;or ajuta sa creezi pagini web din ce in ce mai performante# 'e ce trebuie sa in;at HTMLD ,sa cum spuneam desi exista mai multe programe care au grija de codul HTML atunci cand faci o pagina web pentru a usura folosirea lor este ne;oie de cel putin cate;a notiuni elementare de HTML# ,ceste programe se numesc editoare HTML si pot fi de doua tipuriG editoare clasice si editoare de tipul "2H-"24 ("!at 2ou Hee -s "!at 2ou 4et care se traduce prin ceea ce ;ezi este ceea ce obtii)# -n cazul celei de-a doua categorii de editoare HTML utilizatorii nu trebuie decat sa se ocupe de partea grafica de asezarea in pagina etc# scrierea codului HTML ramanand in seama acestor programe# 1 obser;atie demna de luat in seama este si aceea ca cele mai bune editoare HTML nu sunt gratuite# Hfatul meu este ca pentru realizarea paginilor web sa folosesti un editor HTML care iti este cel mai de folos dar numai atunci cand te ;ei familiariza cu limbajul HTML# -n concluzie in;atarea limbajului HTML are trei mari a;antajeG I este foarte simpla si nu necesita mult timp I ofera controlul absolut asupra realizarii paginii web I poti folosi in cadrul paginilor pe care le ;ei realiza sec;ente de cod HTML JimprumutateJ de la alte pagini web (pentru a ;edea codul sursa al unei pagini web in -nternet +xplorer intra in meniul @iew si apoi selecteaza Hource) <Ha nu uit# ?entru a intra in posesia editoarelor HTML sau a ;ariantelor demo ale editoarelor profesionale le poti descarca de pe internet dar daca nu ai o conexiune buna la internet le poti gasi si pe .'-urile re;istelor de -T# .e trebuie sa stiu pentru a ma apuca sa in;at HTMLD

-n;atarea limbajului HTML este foarte usoara nu ai ne;oie decat de urmatoareleG I sa stii sa utilizezi un editor de text (exG Kotepad etc#) I sa ai cel putin un browser de internet (exG Microsoft -nternet +xplorer Ketscape .omunicator etc#) I sa-ti faci un pic de timp liber (de exemplu o jumatate de ora pe zi) pentru a urma cursul de fata si pentru a scrie tu fiecare exemplu pe care-l ;ei intalni aici ,cum la sfarsitul primei lectii a cursului este cazul sa-ti pui cel putin urmatoarele doua intrebariG @reau sa in;at limbajul HTMLD Ma ;a ajuta cu ce;a daca o sa stiu sa fac pagini web folosind HTMLD

Structura unui document HTML -n cadrul acestei lectii ;ei realiza primul document HTML adica prima pagina web# Despre tag-uri Tag-urile nu sunt altce;a decat niste marcaje sau etic!ete pe care limbajul HTML le foloseste alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul paginii web# ,ceste tag-uri (etic!ete) pot fi de doua feluriG - tag-uri perec!e (un tag de inceput si unul de inc!eiere)# +xempleG $HTML% si $&HTML%> $T-TL+% si $&T-TL+%> $H+,'% si $&H+,'%> - tag-uri singulare (nu au un tag de inc!eiere) +xempleG $HA% $0A%# Ha ;edem tag-urile de baza pe care trebuie sa le contina un document HTMLG
$HTML% - cu acest tag incepe orice document HTML# ?rin folosirea acestui tag ii spunem browser-ului ca este

;orba de un fisier HTML pentru a il putea afisa#

$H+,'% - intre aceste tag-uri sunt trecute pe langa titlul paginii di;erse informatii folositoare pentru browser-ul

de internet informatii pe care le ;om descoperi pe parcursul acestui curs#

$&H+,'% - acesta este tag-ul de inc!eiere al tag-ului $H+,'% $T-TL+% - cu ajutorul acestei perec!i de tag-uri ;ei putea da un titlu documentului tau# ,stfel textul pe care il ;ei

scrie intre aceste tag-uri ;a fi afisat in bara de titlu a documentului#

$&T-TL+% - este tag-ul de )nc!eiere al tag-ului $T-TL+%# ,rata sfarsitul titlului documentului# $01'2% - odata cu acest tag incepe continutul paginii web# Tot ce ;ei scrie intre tag-urile $01'2% si $&01'2%

;a fi afisat de catre browser pe ecranul monitorului#

$&01'2% - ii spui browser-ului ca ai terminat de scris continutul paginii# Tot ceea ce ;ei scrie dupa acest tag nu

;a mai fi afisat#
$&HTML% - este tag-ul de )nc!eiere al tag-ului $HTML%# .odul oricarui document se termina cu acest tag#

Tag-urile (etic!etele) pot fi scrise atat cu litere mari cat si cu litere mici#
,tentie< Ku uita atunci cand scrii codul unei pagini web sa inc!izi toate tag-urile pe care le-ai desc!is# ?entru a fi

sigur ca nu uiti incearca sa te obisnuiesti sa scrii dupa fiecare tag si tag-ul de inc!eiere (la tag-urile perec!e) scriind apoi continutul intre ele# 1 alta solutie pentru a nu uita sa inc!izi ;reun tag este sa folosesti la scrierea codului un editor HTML (atunci cand ;rei sa folosesti un tag editorul ;a scrie automat si tag-ul de inc!eiere)# .rearea primului document HTML

,cum ;a trebui sa pui in practica notiunile in;atate si sa realizezi prima ta pagina web# Ha ;edem deci cum ;a trebui sa arate aceasta prima pagina# Mai intai trebuie sa desc!izi editorul de texte (Kotepad este suficient)# ,cum sa trecem la scrierea codului# Ku trebuie sa te sperii ;ei ;edea cat de usor este# @om incepe cu tag-ul HTML!" ?entru a nu uita de tag-ul de inc!idere este bine sa-l pui si pe acesta tot la inceput# -n continuare ;in tag-urile H#$D! si %H#$D!# ,poi intre cele doua tag-uri ;om pune perec!ea de tag-uri T&TL#! si %T&TL#!# -ntre aceste tag-uri punem titlul paginiiG ?rima mea pagina web# :rmeaza tagurile $01'2% si $&01'2%# .e ;om scrie intre ele ;a fi afisat in browserul de internet# &ata cum ar tre'ui sa arate codul HTML:
<HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY> Bine ai venit!<BR>

!m invata impre"na #imba$"# HTML% A&ea'ta e'te prima mea pagina web!<BR>
</BODY> </HTML>

,m folosit tag-ul (R! pentru a trece pe urmatorul rand# ,stfel ii spunem browser-ului ca ce ;a fi scris dupa tagul $0A% ;a trebui afisat pe urmatorul rand# Tag-ul $0A% nu are un tag de inc!idere# 'upa ce am scris codul ;a trebui sa sal;am documentul cu extensia #!tml sau #!tm# 'in meniul Lile alege optiunea Ha;e ,s iar apoi denumeste documentul asa cum ;rei dar cu una din extensiile de mai sus# ,pasa butonul Ha;e# ,i acum un document !tml care reprezinta prima ta pagina web# -ntra in fisierul unde ai sal;at documentul si desc!ide-l# -nainte de a trece la lectia ) sa recapitulam cu ajutorul exercitiului de mai jos notiunile in;atate in aceasta lectie# #*ercitiu+ Lolosind cunostintele dobandite pana acum in cadrul cursului incearca sa scrii codul pentru a realiza o pagina web la fel cu aceastaG click aici## ?entru a ;edea codul unei pagini web scrise cu HTML alege din meniul @iew al browserului optiunea Hource# Despre atri'ute HTML -n aceasta lectie ;om in;ata despre atributele tag-urilor# 'ar mai intai sa ;edem ce sunt atributele# .e sunt atributeleD $tri'utele pot fi definite ca niste proprietati ale tag-urilor# ,tributele se pun numai in tag-ul de inceput# 'aca un tag nu are nici un atribut atunci browser-ul ;a lua in considerare ;alorile implicite ale tag-ului respecti;# ?entru a intelege mai bine notiunea de atribut sa ;edem cate;a exemple# ,tributul (,-.L.R care se foloseste cu tag-ul $01'2% indica ce culoare ;a a;ea fondul ;iitoarei pagini web# Londul unei pagini web are in mod implicit culoarea alba dar sa spunem ca ;rem ca fondul paginii noastre sa fie portocaliu# -n acest caz ;om folosi pentru atributul 04.1L1A codul culorii orangeG MLLNNOO (;ei in;ata in lectia urmatoare mai multe despre culori)G
<BODY B()OLOR*+,--..//+>

Ha luam codul paginii web din lectia trecuta si sa-i aplicam tag-ului 01'2 atributul 04.1L1A# @om obtine urmatorul rezultatG click aici# ,cum sa ne ocupam de textul paginii noastre# Mesajul J0ine ai ;enit<J sa spunem de exemplu ca am ;rea sa fie

scris cu albastru in loc de negru care este ;aloarea implicita si sa fie scris cu litere mai mari decat restul textului# ?entru a scrie astfel textul ;om folosi tag-ul $L1KT% insotit de unele atribute astfelG
$L1KT .1L1APJMOOOOLLJ H-Q+PJ9J%

0ine ai ;enit<
$&L1KT%$0A%

Textul urmator J@om in;ata impreuna limbajul HTML# ,ceasta este prima mea pagina web<J daca dorim doar sa aiba culoarea rosie ;om folosi numai atributul .1L1A pentru tag-ul $L1KT% restul proprietatilor fiind cele impliciteG
$L1KT .1L1APJMLLOOOOJ%

@om in;ata impreuna limbajul HTML# ,ceasta este prima mea pagina web<
$&L1KT%

?rin folosirea liniilor de cod de mai sus in cadrul codului nostru pagina web initiala ;a arata astfelG click aici# Mai multe despre texte ;om in;ata impreuna in Lectia 8G Lormatarea textului # ,tunci cand ;rem sa trasam o linie folosim tag-ul $HA% care ;ine de la Horizontal Aule care inseamna linie orizontala# 'aca nu ii asociem acestui tag nici un atribut atunci ;om obtine o line orizontala cat latimea paginii web# 'aca ;rem sa folosim propriile noastre proprietati pentru trasarea unei linii orizontale ;om apela la atributele tagului $HA%# ,ceste atribute sunt urmatoareleG ,L-4K - pentru alinierea liniei .1L1A - pentru culoarea liniei H-Q+ - pentru grosimea liniei si "-'TH - pentru lungimea liniei# ?entru a trasa o linie rosie (.1L1APJMLLOOOOJ) cu o lungime de jumatate din ;aloarea implicita ("-'THPJ8ORJ) si putin mai groasa decat cea implicita (H-Q+PJ8RJ) ce ;a fi aliniata in centrul paginii (,L-4KPJcenterJ) ;om folosi urmatoarea linie de codG
$HA .1L1APJMLLOOOOJ "-'THPJ8ORJ H-Q+PJ8RJ ,L-4KPJcenterJ%

,cum sa folosim cele doua linii de mai sus in cadrul paginii noastre# ?rima linie o ;om folosi la sfarsit in timp ce a doua linie o ;om folosi dupa mesajul J0ine ai ;enit<J# Koul cod HTML al paginii noastre ;a fi urmatorulG
$HTML% $H+,'% $T-TL+%?rima mea pagina web$&T-TL+% $&H+,'% $01'2 04.1L1APJMLLNNOOJ% $L1KT .1L1APJMOOOOLLJ H-Q+PJ9J%

0ine ai ;enit<
$&L1KT%$0A% $HA .1L1APJMLLOOOOJ "-'THPJ58RJ H-Q+PJ8RJ ,L-4KPJleftJ% $0A% $L1KT .1L1APJMLLOOOOJ%

@om in;ata impreuna limbajul HTML# ,ceasta este prima mea pagina web<
$&L1KT% $HA% $&01'2% $&HTML%

Hal;eaza pagina cu ce nume ;rei tu# Ku uita de extensia #!tml sau #!tm# ?entru a ;edea rezultatul click aici# Ke oprim aici cu exemplele de atribute insa in lectiile urmatoare ;or fi folosite atributele cele mai importante astfel incat pana la sfarsitul cursului te ;ei familiariza cu toate acestea# Ku uita ca pentru a intelege cat mai bine limbajul HTML trebuie sa scrii si tu codul fiecarui exemplu prezentat aici sa sal;ezi pagina cu extensia #!tml sau #!tm si sa ;erifici daca ai obtinut aceleasi rezultate# Lista celor mai utilizate tag-uri impreuna cu atributele lor

-n tabelul urmator ;or fi prezentate cele mai utilizate tag-uri impreuna cu cele mai importante atribute ale lorG Kume tag Kume atribut @aloare atribut 'etalii $,% !ref target :AL Sblank Sself Sparent Stop ,ncora ,dresa catre care ;rem sa fie legatura Lereastra in care se ;a face afisarea

$0% $01'2% background bgcolor leftmargin adresa imaginii cod culoare nume culoare procent din latimea paginii numar de pixeli procent din inaltimea paginii numar de pixeli cod culoare nume culoare cod culoare nume culoare cod culoare nume culoare cod culoare nume culoare

Text bold .uprinsul documentului -maginea de fond .uloarea fondului 'istanta dintre marginea din stanga a ferestrei browserului si marginea din stanga a paginii 'istanta dintre marginea de sus a ferestrei browserului si marginea de sus a paginii .uloarea textului .uloarea legaturilor acti;e (atunci cand mouse-ul se afla deasupra lor) .uloarea legaturilor ne;izitate (nu s-a efectuat nici un click pe ele) .uloarea legaturilor ;izitate (s-a efectuat cel putin un click pe ele) Hfarsitul randului ,fisarea in centrul paginii Lontul textului color face size cod culoare nume culoare nume font un numar de la 3 la T :AL .uloarea fontului Tipul fontului Marimea fontului Lormular interacti; action ,dresa scriptului care prelucreaza datele din cadrul formularului Metoda de prelucrare a datelor formularului .adru (fereastra) frameborder 3 sau O .adrul are sau nu are c!enar

topmargin

text alink link ;link $0A% $.+KT+A% $L1KT%

$L1AM%

met!od $LA,M+%

4+T ?1HT

margin!eig!t marginwidt! src $LA,M+H+T% cols

numar de pixeli numar de pixeli :AL procent din latimea paginii numar de pixeli procent din inaltimea paginii numar de pixeli

Hpatiu deasupra si sub un cadru Hpatiu la stanga si la dreapta unui cadru Hursa cadrului Multime de ferestre numarul si marimea relati;a a coloanelor numarul si marimea relati;a a randurilor Titluri in cadrul documentului

rows

H3 H5 H6 H7 H8 H9 align left center rig!t justify

,linierea titlului

$H+,'% $HA% align left center rig!t cod culoare nume culoare numar de pixeli procent din latimea paginii numar de pixeli

,ntetul documentului Linie orizontala ,linierea orizontala a liniei

color size widt!

.uloarea liniei -naltimea liniei Latimea liniei

$HTML% $-% $-M4% align left rig!t top middle bottom text numar de pixeli procent numar de pixeli numar de pixeli :AL numar de pixeli

'ocument HTML Text italic ,daugarea unei imagini ,linierea imaginii in paginaG left (stanga) sau rig!t (dreapta) ,linierea elementelor din jurul imaginiiG top (sus) middle (mijloc) bottom (jos) Text ce ;a fi afisat in locul imaginii in cazul in care aceasta nu este afisata Marimea c!enarului din jurul imaginii -naltimea imaginii Hpatiu pe orizontala in jurul imaginii ,dresa imaginii Hpatiu pe ;erticala in jurul imaginii

alt border !eig!t !space src ;space

widt! $-K?:T% maxlengt! name size src type

procent numar de pixeli numar date de tip caracter numar :AL text password c!eckbox radio submit reset file !idden image button date de tip caracter

Latimea imaginii +lement al formularului Kumar maxim de caractere Kumele elementului formularului Marimea elementului formularului ,dresa pentru o imagine Tip input

;alue $L-% $M+T,% content name

@aloare input +lement al unei liste Metainformatii

text aut!or description keywords

'escrie ;aloarea atributului name ,utor 'escriere .u;inte c!eie Lista ordonata .u ce ;aloare incepe numerotarea Tipul numerotariiG , a - i 3 (implicit) ?aragraf ,linierea paragrafului

$1L% start type $?% align left center rig!t justify numar , a - i 3

$H+L+.T% multiple name size $HTA1K4% $H:0% $H:?% $T,0L+% date de tip caracter numar

Lista de selectii ?ermite selectia mai multor elemente Kumele listei de selectii Kumarul de elemente ale listei Text e;identiat Text indice Text exponent Tabel

align

left center rig!t :AL cod culoare nume culoare procent numar de pixeli cod culoare nume culoare numar de pixeli

,linierea tabelului

background bgcolor border bordercolor cellpadding

-maginea de fond pentru tabel .uloarea fondului pentru tabel .!enarul tabelului .uloarea c!enarului Hpatiu intre continutul celulelor tabelului si marginile lor Hpatiu intre celulele tabelului Kumarul de coloane ale unui tabel Hpatiu pe orizontala in jurul tabelului Hpatiu pe ;erticala in jurul tabelului Latimea tabelului .elula de tabel

cellspacing cols !space ;space widt! $T'% align

numar de pixeli numar numar de pixeli numar de pixeli procent numar de pixeli left center rig!t :AL cod culoare nume culoare numar numar de pixeli numar top middle bottom numar de pixeli numar date de tip caracter numar

,linierea continutului celulei pe orizontala -maginea de fond pentru celula .uloarea fondului pentru celula Kumarul de coloane pe care se intinde celula -naltimea celulei Kumarul de linii pe care se intinde celula ,linierea continutului celulei pe ;erticala Latimea celulei .amp de editare multilinie Kumarul de coloane Kumele campului de editare multilinie Kumarul de randuri Titlu document Aand tabel

background bgcolor colspan !eig!t rowspan ;align

widt! $T+UT,A+,% cols name rows $T-TL+% $TA%

align

left center rig!t cod culoare nume culoare top middle bottom

,linierea continutului celulelor pe orizontala .uloarea fondului pentru tot randul ,linierea continutului celulelor pe ;erticala Text subliniat Lista neordonata

bgcolor ;align

$:% $:L% type circle disc sVuare

Lorma marcajului

Despre culori HTML -n aceasta lectie ;om ;orbi despre culori mai precis despre codurile si numele culorilor# ,cest curs asa cum s-a mai spus este pentru cei care ;or sa in;ete limbajul HTML intr-un mod cat mai usor si placut in acelasi timp# 'e aceea nu ;om intra in foarte multe detalii si ne ;om referi in cadrul acestei lectii strict la modul cum se poate sc!imba culoarea fondului sau textului unei pagini web# 'e asemenea ;ei gasi in sectiunea a treia a lectiei si un tabel cu numele si codurile culorilor cele mai folosite# .uloarea fondului unei pagini web ,sa cum am ;azut si in lectia precedenta nu trebuie ca fondul paginii tale sa fie alb# ?oti opta pentru ce culoare ;rei cu ajutorul atributului 04.1L1A al tag-ului $01'2%# Tot ce trebuie sa faci este sa cauti in tabelul cu nume si coduri de culori din cadrul acestei lectii sa alegi una careti place si sa-i scrii numele sau codul in cadrul atributului 04.1L1A# Ha ;edem un exempluG @reau ca pagina mea sa aiba fondul de culoare desc!isa# ?entru a ma decide ma uit la culorile din tabelul cu nume si coduri de culori# Mi-a atras atentia culoarea aVua care are codul MOOLLLL# ,cest cod il scriu in locul celui de la lectia 6G in loc de liniaG
$01'2 04.1L1APJMLLNNOOJ%

;om a;ea urmatoarea linieG

$01'2 04.1L1APJMOOLLLLJ%

?agina web ;a de;eniG click aici# .uloarea textului .uloarea textului in cadrul unei pagini !tml se poate sc!imba folosind atributul .1L1A (culoare) al tag-ului $L1KT%# 'e altfel un prim exemplu despre cum putem sc!imba culoarea textului unei pagini web am ;azut in lectia precedenta# -n lectia 6 am ales culorile albastru si rosu pentru text# Ha spunem ca ;rem ca tot textul sa fie scris cu albastru inc!is si ;erde# ,tunci in loc de codul culorii albastru (MOOOOLL) si respecti; rosu (MLLOOOO) ;om folosi codul MOOOOW0 (albastru inc!is) si codul MOOWOOO (;erde) in atributul .1L1A al tag-ului $L1KT%# ,stfel codul HTML al paginii noastre ;a fi urmatorulG
$HTML% $H+,'% $T-TL+%?rima mea pagina web$&T-TL+% $&H+,'% $01'2 04.1L1APJMOOLLLLJ%

$L1KT .1L1APJMOOOOW0J H-Q+PJ9J%

0ine ai ;enit<
$&L1KT%$0A% $HA .1L1APJMLLOOOOJ "-'THPJ58RJ H-Q+PJ8RJ ,L-4KPJleftJ% $0A% $L1KT .1L1APJMOOWOOOJ%

@om in;ata impreuna limbajul HTML# ,ceasta este prima mea pagina web<
$&L1KT% $HA% $&01'2% $&HTML%

Hal;eaza pagina cu numele de culori#!tml# Ku uita sa scrii si tu si sa ;erifici codul HTML al fiecarui exemplu al acestui curs# 'aca nu ai facut nici o greseala la exemplul de mai sus pagina web ar trebui sa arate astfelG click aici# Kume si coduri de culori sigure -n continuare ;om ;edea ce inseamna culori sigure# Hunt acele culori care ;or fi afisate de majoritatea browserele# 'aca de exemplu pentru fondul paginii tale web ai folosit o anumita culoare dar nu ai ;erificat sa ;ezi daca aceasta face parte din culorile sigure atunci exista posibilitatea ca unii dintre utilizatorii paginii tale sa ;ada o cu totul alta culoare# Ha ;edem cele mai importante culori care sunt recunoscute de majoritatea browserelorG .uloare Kume culoare ,lice0lue ,ntiVue"!ite ,Vua ,Vuamarine ,zure 0eige 0isVue 0lack 0lanc!ed,lmond 0lue 0lue@iolet 0rown 0urly"ood .adet0lue .!artreuse .!ocolate .oral .ornflower0lue .ornsilk .rimson .yan 'ark0lue 'ark.yan 'ark4oldenAod

.od culoare MLOLWLL ML,+0'T MOOLLLL MTLLL'7 MLOLLLL ML8L8'. MLL+7.7 MOOOOOO MLL+0.' MOOOOLL MW,50+5 M,85,5, M'+0WWT M8LN+,O MTLLLOO M'59N3+ MLLTL8O M97N8+' MLLLW'. M'.376. MOOLLLL MOOOOW0 MOOW0W0 M0WW9O0

'ark4ray 'ark4reen 'arkX!aki 'arkMagenta 'ark1li;e4reen 'arkorange 'ark1rc!id 'arkAed 'arkHalmon 'arkHea4reen 'arkHlate0lue 'arkHlate4ray 'arkTurVuoise 'ark@iolet 'eep?ink 'eepHky0lue 'im4ray 'odger0lue Leldspar Lire0rick Lloral"!ite Lorest4reen Luc!sia 4ainsboro 4!ost"!ite 4old 4oldenAod 4ray 4reen 4reen2ellow Honey'ew Hot?ink -ndianAed -ndigo -;ory X!aki La;ender La;ender0lus! Lawn4reen Lemon.!iffon Lig!t0lue Lig!t.oral

M,N,N,N MOO97OO M0'0T90 MW0OOW0 M88905L MLLW.OO MNN65.. MW0OOOO M+NN9T, MWL0.WL M7W6'W0 M5L7L7L MOO.+'3 MN7OO'6 MLL37N6 MOO0LLL M9N9N9N M3+NOLL M'3N5T8 M055555 MLLL,LO M55W055 MLLOOLL M'.'.'. MLWLWLL MLL'TOO M',,85O MWOWOWO MOOWOOO M,'LL5L MLOLLLO MLL9N07 M.'8.8. M70OOW5 MLLLLLO MLO+9W. M+9+9L, MLLLOL8 MT.L.OO MLLL,.' M,''W+9 MLOWOWO

Lig!t.yan Lig!t4oldenAod2ellow Lig!t4rey Lig!t4reen Lig!t?ink Lig!tHalmon Lig!tHea4reen Lig!tHky0lue Lig!tHlate0lue Lig!tHlate4ray Lig!tHteel0lue Lig!t2ellow Lime Lime4reen Linen Magenta Maroon Medium,VuaMarine Medium0lue Medium1rc!id Medium?urple MediumHea4reen MediumHlate0lue MediumHpring4reen MediumTurVuoise Medium@ioletAed Midnig!t0lue Mint.ream MistyAose Moccasin Ka;ajo"!ite Ka;y 1ldLace 1li;e 1li;e'rab 1range 1rangeAed 1rc!id ?ale4oldenAod ?ale4reen ?aleTurVuoise ?ale@ioletAed

M+OLLLL ML,L,'5 M'6'6'6 MNO++NO MLL09.3 MLL,OT, M5O05,, MWT.+L, MW7TOLL MTTWWNN M0O.7'+ MLLLL+O MOOLLOO M65.'65 ML,LO+9 MLLOOLL MWOOOOO M99.',, MOOOO.' M0,88'6 MN6TO'W M6.06T3 MT09W++ MOOL,N, M7W'3.. M.T38W8 M3N3NTO ML8LLL, MLL+7+3 MLL+708 MLL'+,' MOOOOWO ML'L8+9 MWOWOOO M90W+56 MLL,8OO MLL78OO M',TO'9 M+++W,, MNWL0NW M,L++++ M'WTON6

?apaya"!ip ?eac!?uff ?eru ?ink ?lum ?owder0lue ?urple Aed Aosy0rown Aoyal0lue Haddle0rown Halmon Handy0rown Hea4reen HeaH!ell Hienna Hil;er Hky0lue Hlate0lue Hlate4ray Hnow Hpring4reen Hteel0lue Tan Teal T!istle Tomato TurVuoise @iolet @ioletAed "!eat "!ite "!iteHmoke 2ellow 2ellow4reen HTML - imagini

MLL+L'8 MLL',0N M.'W86L MLL.O.0 M'',O'' M0O+O+9 MWOOOWO MLLOOOO M0.WLWL M739N+3 MW07836 ML,WOT5 ML7,79O M5+W08T MLLL8++ M,O855' M.O.O.O MWT.++0 M9,8,.' MTOWONO MLLL,L, MOOLLTL M79W507 M'507W. MOOWOWO M'W0L'W MLL967T M7O+O'O M++W5++ M'O5ONO ML8'+06 MLLLLLL ML8L8L8 MLLLLOO MN,.'65

?ana acum ai in;atat cum sa folosesti decat texte si culori in cadrul paginilor web# -n aceasta lectie ;ei in;ata despre imagini care alese cu grija ;or da un plus design-ului paginilor tale# Lormatele imaginilor 0rowserele recunosc in cadrul paginilor web mai multe formate ale imaginilor# .ele mai raspandite sunt cele cu extensia #gif si cele care au una din terminatiile #jpg sau #jpeg# -ata in continuare cate;a caracteristici ale acestor formate de imaginiG 4-L (4rap!ics -nterc!ange Lormat) Lormatul 4-L poate reda un numar de 589 de culori de aceea este folosit pentru imaginile de dimensiuni miciG butoane icon-uri animatii#

0utoaneG

buton3#gif marimeG WTT bytes -con-uriG

buton5#gif marimeG N58 bytes

buton6#gif marimeG N53 bytes

icon3#gif marimeG 669 bytes ,nimatiiG

icon5#gif marimeG 578 bytes

icon6#gif marimeG 7O3 bytes

animatie#gif marimeG N 5T Xb Y?+4 (Yoint ?!otograp!ic +xpert 4roup) Lormatul Y?+4 nu mai este limitat la 589 de culori si de aceea este folosit pentru fotografii# -maginile care apartin acestui format au extensia #jpg sau #jpeg#

poza#jpg marimeG 9 78 Xb

poza#gif marimeG 35 N Xb

He obser;a ca in cazul fotografiilor formatul jpg ofera o calitate mai buna a imaginii si ocupa un spatiu mult mai mic decat daca am fi sal;at aceeasi imagine in formatul gif# ,daugarea imaginilor in paginile web ,sa cum ai ;azut la majoritatea site-urilor imaginile dau o nota aparte paginilor web# ?entru a folosi imagini si in cadrul paginilor tale web trebuie sa folosesti tag-ul $-M4% insotit de atributul HA. (source) care indica adresa sau calea catre imaginea pe care ;rei sa o folosesti# Lorma generala a acestui tag ;a fiG
$-M4 HA.PJnumeleimaginii#extensieJ%

< ,tentie la extensie# Ku uita sa scrii si extensia imaginii pentru ca altfel imaginea nu ;a fi afisata de browser# +ste bine ca atunci cand ;rei sa faci un site sa tii toate fisierele (pagini HTML imagini etc#) in cadrul aceluiasi folder# 'aca ;ei folosi in codul HTML al paginilor site-ului tau linia de cod de mai sus imaginea ;a fi afisata doar daca pagina respecti;a ;a fi in acelasi folder cu imaginea pe care ;rei sa o folosesti# -n caz contrar imaginea nu ;a fi afisata# Ha scriem codul unei pagini web care sa contina o imagine# Hal;eaza imaginea de mai jos (click dreapta Ha;e ?icture ,s) sub numele de bebe#jpg in acelasi folder cu pagina web pe care o ;om face in continuare#

,cum sa ;edem codul HTMLG

$HTML% $H+,'% $T-TL+%-magini$&T-TL+% $&H+,'% $01'2% $.+KT+A%$0%,d=M58Nugarea imaginilor =M56Wn paginile web$&0% $0A% $-M4 HA.Pbebe#jpg% $&.+KT+A% $&01'2% $&HTML%

Hal;eaza pagina cu numele imagini#!tml# Ha ;edem cum ar trebui sa arate pagina imagini#!tmlG click aici# 'aca site-ul tau ;a a;ea multe fisiere nu mai este o solutie sa le tii pe toate in acelasi folder# -n acest caz este bine sa grupam fisierele de acelasi tip in subfoldere# ,stfel in folderul Hite de exemplu ;om a;ea un subfolder ?oze in care ;or fi sal;ate toate imaginile site-ului un subfolder ?agini in care ;or fi sal;ate toate paginile HTML si asa mai departe# -ata cum ar arata structura site-uluiG

?entru o functionare corecta ;om utiliza una din urmatoarele linii de cod prin care ii ;om spune browser-ului ca imaginea se afla in folder-ul ?ozeG
$-M4 HA.PF##&?oze&bebe#jpgF%

- daca pagina ;a fi sal;ata in subfolderul ?agini si imaginea ;a fi in subfolderul ?oze#

$-M4 HA.PF?oze&bebe#jpgF%

- daca pagina ;a fi sal;ata in folderul Hite si imaginea ;a fi in subfolderul ?oze# -ncearca si tuG 3# La un folder pe care denumeste-l Hite# 5# -n cadrul acestuia mai fa doua subfoldereG ?agini respecti; ?oze# 6# .opiaza imaginea bebe#jpg in folderul ?oze# 7# Modifica in codul HTML de mai sus liniaG $-M4 HA.PFbebe#jpgF% cu liniaG $-M4 HA.PF##&?oze&bebe#jpgF% 8# Hal;eaza pagina in folderul ?agini cu numele imagini.html. 9# 'ublu click pe imagini.html din folder-ul ?agini# 'aca totul a functionat bine ar trebui sa obtii aceeasi pagina web# 'aca ;rei ca imaginea sa fie incadrata de un c!enar foloseste atributul 01A'+A al tag-ului $-M4%# ,cest atribut are ca ;aloare numere intregi poziti;e# $-M4 HA.PF##&?oze&bebe#jpgF 01A'+AP8% Koua pagina web ;a fiG click aici# 'aca imaginea ;a fi de dimensiuni mai mari atunci pana cand se ;a incarca si ;a fi afisata de browser utilizatorul poate ;edea un text inlocuitor al imaginii# ,cest lucru se poate realiza folosind atributul ,LT impreuna cu tag-ul $-M4%# 'aca trecem cursorul mouse-ului deasupra imaginii o sa apara textul pe care l-am scris la atributul ,LT# 'e exemplu la pagina de mai sus imagini#!tml ;om inlocui liniaG

$-M4 HA.PF##&?oze&bebe#jpgF 01A'+AP8%

cu liniaG
$-M4 HA.PF##&?oze&bebe#jpgF 01A'+AP8 ,LTPF-magine bebeF%

Lolosirea imaginilor alaturi de texte ?entru a alinia o imagine ;om folosi atributul ,L-4K al tag-ului $-M4%# ,tributul ,L-4K poate a;ea una dintre ;alorileG left sau right aliniere la stanga sau la dreapta paginii# Hal;eaza imaginea de mai jos (click dreapta Ha;e ?icture ,s) cu numele de euro#jpg in folder-ul ?oze#

,cum sa scriem codul HTML al unei pagini web care ;a contine si text in jurul imaginiiG
$HTML% $H+,'% $T-TL+%+:A1 5OO7$&T-TL+% $&H+,'% $01'2% $L1KT .1L1APFMOOOOLLF L,.+PFTimes Kew AomanF% $.+KT+A%$0%-storia campionatului european de fotbal$&0%$&.+KT+A% $&L1KT%$0A% $-M4 HA.PJ##&?oze&euro#jpgJ 01A'+AP8 ,L-4KPleft% $L1KT .1L1APJMLLOOOOJ L,.+PF,rialF%

?rima edi=M688>ie a campionatului european de fotbal a a;ut loc =M56Wn Lran=M688>a =M56Wn anul 3N9O iar c=M559=M683>tig=M58Ntoare a fost Ausia# :rm=M58Ntorul turneu european a a;ut loc =M56Wn anul 3N97 =M56Wn Hpania acolo unde s-a impus =M688>ara gazd=M58N# ?atru ani mai t=M559rziu =M56Wn 3N9W =M56Wn -talia a fost r=M559ndul acesteia s=M58N c=M559=M683>tige trofeul# =M5O9n 3NT5 organizatoare a fost 0elgia Aepublica Lederal=M58N 4erman=M58N impun=M559ndu-se# =M5O9n 3NT9 a ;enit r=M559ndul .e!oslo;aciei s=M58N c=M559=M683>tige campionatul european de fotbal disputat =M56Wn -ugosla;ia# =M5O9n 3NWO 4ermania a fost c=M559=M683>tig=M58Ntoare =M56Wn -talia iar =M56Wn 3NW7 edi=M688>ie g=M58Nzduit=M58N de Lran=M688>a din nou s-a impus =M688>ara organizatoare# +di=M688>ia din anul 3NWW a a;ut loc =M56Wn 4ermania =M683>i a fost c=M559=M683>tigat=M58N de 1landa# 'up=M58N patru ani 'anemarca se impunea =M56Wn Huedia pentru ca dup=M58N al=M688>i patru ani =M56Wn 3NN9 s=M58N fie r=M559ndul 4ermaniei s=M58N =M56W=M683>i adjudece trofeul =M56Wn ,nglia# =M5O9n anul 5OOO 0elgia =M683>i 1landa au organizat turneul final iar c=M559=M683>tig=M58Ntoare a fost Lran=M688>a# :ltimul turneu final care s-a disputat =M56Wn ?ortugalia =M56Wn 5OO7 a f=M58Ncut ca 4recia s=M58N c=M559=M683>tige trofeul#$&L1KT% $0A%
$&01'2% $&HTML%

Hal;eaza pagina cu numele de euro#!tml in folderul ?agini# -ata cum ;a arata aceasta paginaG click aici# ,sa cum ai obser;at textul este afisat in jurul imaginii# 'aca ;rei ca textul sa fie afisat la o anumita distanta de imagine foloseste atributele HH?,.+ (spatiu pe orizontala) si @H?,.+ (spatiu pe ;erticala)# @alorile acestor atribute trebuie sa fie numere intregi care reprezinta de fapt distanta in pixeli dintre imagine si text# 'e exemplu inlocuieste in codul de mai sus liniaG
$-M4 HA.PF##&?oze&euro#jpgF 01A'+AP8 ,L-4KPFleftF%

cu urmatoareaG
$-M4 HA.PF##&?oze&euro#jpgF 01A'+AP8 ,L-4KPFleftF HH?,.+P8O @H?,.+P5O%

Hal;eaza pagina cu numele euro5#!tml in folder-ul ?agini# @ezi diferentaG click aici# Loloseste diferite ;alori pentru atributele HH?,.+ si @H?,.+ pana cand ;ei obtine rezultatele dorite# -magini ca fond al unei pagini web .u ajutorul atributului 0,.X4A1:K' al tag-ului $01'2% poti folosi o imagine ca fond al unei pagini web# ?entru a intelege mai bine copiaza imaginile urmatoare (click dreapta iar apoi Ha;e ?icture ,s) in folder-ul ?oze cu numele scrise sub fiecare#

background3#jpg

background5#jpg

background6#jpg

background7#jpg

background8#jpg

,cum in codul paginii imagini#!tml din folder-ul ?agini adauga tag-ului $01'2% atributul 0,.X4A1:K' dupa cum urmeazaG
$01'2 0,.X4A1:K'PF##&?oze&background3#jpgF%

Hal;eaza pagina cu numele background3#!tml# -ata rezultatulG click aici# Aepeta operatiunea de mai sus numai ca in loc de background3#jpg foloseste pe rand unul din numele celorlalte imagini# Hal;eaza paginile cu numele background5#!tml background6#!tml background7#!tml background8#!tml# -ata rezultateleG
background5#!tml background6#!tml background7#!tml background8#!tml

.rearea legaturilor in HTML

Ka;igarea in cadrul site-urilor este posibila cu ajutorul link-urilor (legaturilor)# -n aceasta lectie ;ei in;ata cum sa folosesti diferite tipuri de legaturi in cadrul site-ului tau# Legatura catre o alta pagina ?entru a folosi legaturi in paginile web pe care le ;ei face trebuie sa folosesti perec!ea de tag-uri $,% si $&,%# Kumele acestor tag-uri ;ine de la cu;antul anc!or care se traduce ancora# Tag-ul $,% ;a trebui folosit impreuna cu atributul HA+L# Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web ;a a;ea urmatoarea formaG
$, HA+LPnumelepaginii#!tml%Textul legaturii$&,%

'aca pagina respecti;a se afla in acelasi folder cu pagina pe care se afla legatura atunci nu sunt necesare g!ilimelele# Ha ;edem impreuna cum poti adauga o legatura intr-o pagina web din folderul ?agini catre pagina imagini#!tml din acelasi folder# 'esc!ide editorul de texte (de exempluG Kotepad) si scrie urmatorul cod HTMLG
$HTML% $H+,'% $T-TL+%Legaturi$&T-TL+% $&H+,'% $01'2% $.+KT+A%$0%Leg=M58Ntur=M58N c=M58Ntre o alt=M58N pagin=M58N $&0% $0A%$0A% $, HA+LPimagini#!tml%-magine bebe$&,% $&.+KT+A% $&01'2% $&HTML%

Hal;eaza pagina (Lile&Ha;e ,s) cu numele de link#!tml in folderul ?agini# ?agina link#!tml ar trebui sa arate astfelG click aici# 'aca pagina catre care ;rem sa facem o legatura nu se afla in acelasi folder cu pagina noastra atunci nu mai putem folosi decat numele paginii HTML ca ;aloare a atributului HA+L# Ha ;edem cate;a exemple de legaturi catre pagini din alte directoare sau subdirectoare# Lie urmatoarea structuraG

?entru a intelege cat mai bine cum functioneaza legaturile catre di;erse pagini web este bine sa faci si tu pe calculatorul tau o structura asemanatoare cu cea de mai sus iar apoi sa faci cate;a pagini HTML in di;erse directoare sau subdirectoare si sa incerci sa creezi legaturi din fiecare pagina HTML catre celelate# -ata cate;a

exempleG - pentru a adauga o legatura in cadrul unei pagini HTML din directorul .ontabilitate catre o pagina HTML din directorul Lirma 3 ;om folosi urmatoarea ;aloare a atributului HA+LG $, HA+LPJLirma 3&numelepaginii#!tmlJ%Text link$&,% - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Hite catre o pagina HTML din directorul .arti ;om folosi urmatoarea ;aloare a atributului HA+LG $, HA+LPJ'ocumente&.arti&numelepaginii#!tmlJ% Text link$&,% - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o pagina HTML din directorul Hcoala ;om folosi urmatoarea ;aloare a atributului HA+LG $, HA+LPJ##&numelepaginii#!tmlJ%Text link$&,% - pentru a adauga o legatura in cadrul unei pagini HTML din directorul 0ilanturi catre o pagina HTML din directorul Hite ;om folosi urmatoarea ;aloare a atributului HA+LG $, HA+LPJ##&##&numelepaginii#!tmlJ% Text link$&,% - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Her;ici catre o pagina HTML din directorul Matematica ;om folosi urmatoarea ;aloare a atributului HA+LG $, HA+LPJ##&##&Hcoala&Matematica&numelepaginii#!tmlJ% Text link$&,% - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Lirma 5 catre o pagina HTML din directorul Lirma 6 ;om folosi urmatoarea ;aloare a atributului HA+LG $, HA+LPJ##&Lirma 6&numelepaginii#!tmlJ%Text link$&,% Legatura catre un site 'upa ce ai ;azut cum se folosesc legaturile catre alte pagini !tml locale acum ;om ;edea impreuna cum putem adauga o legatura catre un site particular# Trebuie sa folosesti urmatoarea linie de codG $, HA+LPJadresa site-uluiJ%Textul legaturii$&,% Ha facem o pagina web care sa contina legaturi catre site-uri ale unor ziare din Aomania# Hcrie urmatorul cod HTMLG
$HTML% $H+,'% $T-TL+%Legaturi catre site-uri particulare$&T-TL+% $&H+,'% $01'2% $.+KT+A% $0%Leg=M58Nturi c=M58Ntre site-urile unor ziare din Aom=M559nia $&0% $&.+KT+A% $0A%$, HA+LPJ!ttpG&&www#e;z#roJ%+;enimentul Qilei$&,% $0A%$, HA+LPJ!ttpG&&www#jurnalul#roJ%Yurnalul Ka=M688>ional$&,% $0A%$, HA+LPJ!ttpG&&www#capital#roJ%.apital$&,% $0A%$, HA+LPJ!ttpG&&www#prosport#roJ%?rosport$&,% $0A%$, HA+LPJ!ttpG&&www#gsp#roJ%4azeta sporturilor$&,% $0A%$, HA+LPJ!ttpG&&www#libertatea#roJ%Libertatea$&,% $0A% $&01'2% $&HTML%

Hal;eaza pagina cu numele de ziare#!tml in directorul ?agini# ?entru a ;edea cum ar trebui sa arate aceasta paginaG click aici#

,sa cum ai obser;at pana acum atunci cand dai click pe una dintre legaturile din paginile prezentate ca exemple se desc!ide o pagina HTML in aceeasi fereastra a browser-ului peste pagina ce contine legatura# ?entru a desc!ide o noua fereastra a browser-ului atunci cand se da click pe o legatura trebuie folosit atributul T,A4+T caruia i se atribuie ;aloarea JSblankJ# Ha ;edem un exempluG sa sc!imbam codul paginii ziare#!tml astfel incat site-ul fiecarui ziar sa se desc!ida intr-o noua fereastra atunci cand se ;a efectua un click pe legatura catre acesta# 'aca in plus ;rei ca atunci cand utilizatorii paginii tale web ;or trece cursorul mouse-ului deasupra legaturilor sa apara o mica nota explicati;a trebuie sa folosesti atributul T-TL+# .a ;aloare a acestui atribut trebuie sa scrii textul care ;rei sa apara atunci cand se ;a trece cursorul mouse-ului deasupra legaturii respecti;e# ?entru a intelege mai bine iata cum ;a arata codul paginii ziare#!tml dupa adaugarea atributelor T,A4+T si T-TL+ pentru fiecare legaturaG
$HTML% $H+,'% $T-TL+%Legaturi catre site-uri particulare$&T-TL+% $&H+,'% $01'2% $.+KT+A% $b%Leg=M58Nturi c=M58Ntre site-urile unor ziare din Aom=M559nia $&b% $&.+KT+A% $0A%$, HA+LPJ!ttpG&&www#e;z#roJ T,A4+TPJSblankJ T-TL+PJQiarul +;enimentul QileiJ% +;enimentul Qilei$&,% $0A%$, HA+LPJ!ttpG&&www#jurnalul#roJ T,A4+TPJSblankJ T-TL+PJQiarul Yurnalul Ka=M688>ionalJ% Yurnalul Ka=M688>ional$&,% $0A%$, HA+LPJ!ttpG&&www#capital#roJ T,A4+TPJSblankJ T-TL+PJQiarul .apitalJ% .apital$&,% $0A%$, HA+LPJ!ttpG&&www#prosport#roJ T,A4+TPJSblankJ T-TL+PJQiarul ?rosportJ% ?rosport$&,% $0A%$, HA+LPJ!ttpG&&www#gsp#roJ T,A4+TPJSblankJ T-TL+PJQiarul 4azeta HporturilorJ% 4azeta sporturilor$&,% $0A%$, HA+LPJ!ttpG&&www#libertatea#roJ T,A4+TPJSblankJ T-TL+PJQiarul LibertateaJ% Libertatea$&,% $0A% $&01'2% $&HTML%

Hal;eaza pagina cu numele ziare#!tml peste pagina existenta# -ata cum ar trebui sa arate pagina finala ziare#!tmlG click aici# Legatura catre o sectiune de pagina ,tunci cand a;em de-a face cu pagini mai lungi putem imparti aceste pagini in mai multe sectiuni catre care sa adaugam cate o legatura la inceputul paginii pentru ca utilizatorii sa ajunga mai repede la sectiunea care ii intereseaza# :n bun exemplu pentru o astfel de pagina il reprezinta paginile care contin intrebarile frec;ente (Lrec;ently ,sked Zuestions)# ?entru a ;edea cum arata o astfel de paginaG click aici# Liecare titlu al sectiunii trebuie definit ca ancoraG $, K,M+PJMancora3J%Titlul primei sectiuni$&,% $, K,M+PJMancora5J%Titlul sectiunii a doua$&,% $, K,M+PJMancora6J%Titlul sectiunii a treia$&,% Legaturile catre ancorele din cadrul aceleiasi pagini HTML ;or a;ea urmatoarea formaG $, K,M+PJMancora3J%Legatura catre prima sectiune$&,% $, K,M+PJMancora5J%Legatura catre a doua sectiune$&,% $, K,M+PJMancora6J%Legatura catre a treia sectiune$&,% Legaturile catre ancore din cadrul altei pagini HTML ;or a;ea urmatoarea formaG

$, K,M+PJnumelepaginii#!tmlMancora3J% Legatura catre prima sectiune$&,% $, K,M+PJnumelepaginii#!tmlMancora5J% Legatura catre a doua sectiune$&,% $, K,M+PJnumelepaginii#!tmlMancora6J% Legatura catre a treia sectiune$&,%

,tentie< ?entru crearea corecta a legaturilor catre alte pagini HTML ;ezi sectiunea Legatura catre o alta pagina din cadrul acestei lectii# ?entru a intelege mai bine cum functioneaza legaturile catre sectiunile paginilor sa scriem impreuna codul unei pagini cu mai multe sectiuniG
$HTML% $H+,'% $T-TL+%Legatura catre o sectiune de pagina$&T-TL+% $&H+,'% $01'2% $0A%$0A%$0A%$0A%$0A%$0A% $.+KT+A%$0%=M5O9ntreb=M58Nri frec;ente$&0%$&.+KT+A% $0A%$0A%$0A%$0A%$0A%$0A% $, HA+LPJMintrebarea3J%3# .e pot g=M58Nsi pe site-ul ecursuri#roD$&,%$0A%$0A%$0A% $, HA+LPJMintrebarea5J%5# .e este un curs onlineD$&,%$0A%$0A%$0A% $, HA+LPJMintrebarea6J%6# 'e ce s=M58N =M56Wn;=M58N=M688> onlineD$&,%$0A%$0A%$0A%$0A% $HA%$0A%$0A%$0A%$0A%$0A% $L1KT .1L1APJMLLNNOOJ H-Q+PJ6J L1KTPJ,rial Times Kew AomanJ% $, K,M+PJMintrebarea3J%3# .e pot g=M58Nsi pe site-ul ecursuri#roD$&,%$&L1KT%$0A% $0A%

=nbsp> =nbsp> =nbsp>Hite-ul ecursuri#ro =M56W=M683>i propune s=M58N ofere ;izitatorilor s=M58Ni c=M559t mai multe resurse pentru a =M56Wn;=M58N=M688>a online# =M5O9n aces moment pe site sunt disponibile peste 5O de cursuri online din di;erse domenii dar cu ajutorul ;ostru sper=M58Nm ca num=M58Nrul acestora s=M58N creasc=M58N#$0A% =nbsp> =nbsp> =nbsp> ?e l=M559ng=M58N cursurile online ;ei g=M58Nsi =M56Wn cadrul site-ului nostru mai mult de 3OOO de referate =M683>i peste 3OO de jocuri online#
$0A%$0A%$0A%$0A%$0A%$0A%$0A%$0A% $0A%$0A% $0A%$0A% $0A%$0A% $L1KT .1L1APJMLLNNOOJ H-Q+PJ6J L1KTPJ,rial Times Kew AomanJ% $, K,M+PJMintrebarea5J%5# .e este un curs onlineD$&,%$&L1KT%$0A%$0A%

=nbsp> =nbsp> =nbsp>:n curs online presupune ca toate materialele necesare s=M58N fie disponibile pe internet# ,=M683>adar ;iitorii cursan=M688>i ;or a;ea la dispozi=M688>ie toate resursele necesare pentru =M56Wn;=M58N=M688>at la fel ca =M683>i =M56Wn cazul unui curs tradi=M688>ional singura deosebire fiind c=M58N totul se petrece online#
$0A%$0A%$0A%$0A%$0A% $0A%$0A%$0A% $0A%$0A%$0A%$0A%$0A% $0A% $L1KT .1L1APJMLLNNOOJ H-Q+PJ6J L1KTPJ,rial Times Kew AomanJ% $, K,M+PJMintrebarea6J%6# 'e ce s=M58N =M56Wn;=M58N=M688> onlineD$&,% $&L1KT%$0A% $0A%

=nbsp> =nbsp> =nbsp>.ursurile online prezint=M58N indiscutabil foarte multe a;antaje fa=M688>=M58N de alte tipuri de cursuri# =M5O9n primul r=M559nd cursurile online pot fi consultate oric=M559nd ele fiind disponibile non stop pe internet# :n lucru extrem de important =M56Wn alegerea unui curs online este =M683>i pre=M688>ul sc=M58Nzut al unui astfel de curs comparati; cu pre=M688>urile cursurilor tradi=M688>ionale# =M5O9n cazul cursurilor prezente pe site-ul ecursuri#ro acestea sunt 3OOR 4A,T:-T+#
$0A%$0A%$0A%$0A%$0A%$0A% $0A%$0A%$0A% $0A% $0A%$0A%$0A%$0A%$0A%$0A% $0A%$0A%$0A% $0A% $&01'2% $&HTML%

Hal;eaza pagina cu numele intrebari#!tml in directorul ?agini# 'aca totul a mers bine pagina ar trebui sa fie la fel cu aceastaG click aici# Legatura catre o adresa de e-mail

'aca ;rei ca utilizatorii paginii tale web sa iti poata scrie parerile lor despre site de exemplu atunci trebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail# .um faci astaD Loarte simplu# Lorma generala a unei legaturi catre o adresa de e-mail este urmatoareaG $, HA+LPJmailtoGadresa de e-mailJ% Trimite-mi un e-mail$&,% -n codul HTML al paginii intrebari#!tml adauga inainte de linia de cod ce contine etic!eta de inc!eiere $&01'2% urmatoarea sec;enta de codG
$0A%$0A%$0A%$L1KT L,.+PJ,rialJ .1L1APJMLLNNOOJ%

?entru a afla r=M58Nspunsul la alte =M56Wntreb=M58Nri trimite un mail laG

$&L1KT% $, HA+LPJmailtoGcontact[ecursuri#roJ T-TL+PJ'ac=M58N ;rei s=M58N pui o =M56Wntrebare nu ezita s=M58N o faciJ%?=M58Nrerea ta$&,%$0A%

Hal;eaza pagina intrebari#!tml peste cea existenta# ?entru a ;edea rezultateleG click aici# :tilizarea unei imagini ca legatura ?entru a folosi o imagine ca legatura intre tag-urile $,% si $&,% ;a trebui scrisa adresa imaginiiG
$, HA+LPnumepagina#!tml%$-M4 HA.PJadresaimaginiiJ$&,%

Ha ;edem un exemplu# .opiaza imaginea de mai jos (click dreapta Ha;e ?icture ,s) in directorul ?oze cu numele de intreb#jpg#

,cum sa scriem codul unei pagini web care sa foloseasca aceasta imagine ca legatura catre pagina intrebari#!tml# 'esc!ide editorul de texte si scrie codul urmatorG
$HTML% $H+,'% $T-TL+%Lolosirea unei imagini ca legatura$&T-TL+% $&H+,'% $01'2% $.+KT+A%$H3%-magini ca leg=M58Nturi$&H3% $0A%$0A% $, HA+LPintrebari#!tml%$-M4 HA.PJ##&?oze&intreb#jpgJ%$&,% $&.+KT+A% $&01'2% $&HTML%

Hal;eaza pagina cu numele linkimg#!tml in directorul ?agini# ?entru a ;edea rezultatul click aici# .um pot sc!imba culorile legaturilorD Liecare legatura din cadrul unei pagini web are trei culoriG I o culoare pentru legaturile ne;izitate (nu a fost efectuat nici un click pe ele) I o culoare pentru legaturile ;izitate (s-a efectuat cel putin un click pe ele) I o culoare pentru legaturile acti;e (atunci cand cursorul mouse-ului se afla deasupra lor) ?entru fiecare culoare din cele trei de mai sus exista cate un atribut al tag-ului $&01'2% cu ajutorul caruia putem

sc!imba culoarea implicitaG I L-KX pentru legaturile ne;izitate I @L-KX pentru legaturile ;izitate I ,L-KX pentru legaturile acti;e Liecarui atribut i se ;a atribui un nume de culoare sau codul unei culori# Hpre exemplu daca ;rei ca in cadrul paginii tale web legaturile sa fie de culoare rosie atunci cand nu au fost ;izitate de culoare neagra cele ;izitate si de culoare portocalie atunci cand se trece cu mouse-ul pe deasupra lor trebuie sa folosesti urmatoarea linie de codG
$01'2 L-KXPFMLLOOOOF @L-KXPFMOOOOOOF ,L-KXPFLLN9OOF%

?entru a folosi culorile preferate pentru legaturile paginilor tale nu trebuie decat sa inlocuiesti in linia de mai sus codurile cu cele ale culorilor dorite# .rearea listelor in HTML
.uprins

-n aceasta lectie ;ei in;ata cum poti folosi listele in pagina ta web# Listele pe care le poti crea cu ajutorul limbajului HTML sunt de urmatoarele tipuriG liste neordonate liste ordonate si liste de definitii# Ha le luam pe rand# Liste neordonate (:L) -nainte de ;orbi despre listele neordonate sa ;edem mai intai cum arata unaG Lirma noastra ;a ofera urmatoarele ser;iciiG printare printare indosariere xerox te!noredactare

Lectia 3 Lectia 5 Lectia 6 Lectia 7 Lectia 8 Lectia 9 Lectia T

Lectia W
Lectia N Lectia 3O Lectia 33 Lectia 35

?entru a putea face o lista neordonata trebuie sa folosim tag-urile $:L% si $&:L%# (denumirea acestor tag-uri ;ine de la Junordered listJ care inseamna in limba engleza lista neordonata)# Liecare element al listei trebuie introdus de tag-ul $L-%# .a sa intelegi mai bine sa ;edem impreuna cum arata codul HTML pentru lista de mai sus#
$HTML% $H+,'% $T-TL+%Liste neordonate$&T-TL+% $&H+,'% $01'2%

$:L%Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG $L-%printare $L-%laminare $L-%=M56Wndosariere $L-%xerox $L-%te!noredactare $&:L% $&01'2% $&HTML%

Hal;eaza pagina cu numele de liste3#!tml in directorul ?agini# ?entru a ;edea cum ar trebui sa arate aceasta paginaG click aici# .u ajutorul atributului T2?+ putem sc!imba cercul plin din fata fiecarui element# ,cesta este folosit in mod implicit atunci cand folosim o lista neordonata# ,stfel prin atribuirea unei ;alori atributului T2?+ ;om putea face ca elementele listei sa fie precedate de un patrat sau de un cerc gol# ?entru a ;edea rezultatele inlocuieste linia a 9-a din codul HTML de mai sus cu una din urmatoarele linii de codG pentru cercuri goaleG $:L T2?+Pcircle% Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG Hal;eaza pagina cu numele de liste5#!tml in directorul ?agini# @ezi rezultatulG click aici# pentru patrate plineG $:L T2?+PsVuare%Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG Hal;eaza pagina cu numele de liste6#!tml in directorul ?agini# @ezi rezultatulG click aici# Ku uitaG ?entru a in;ata limbajul HTML trebuie sa scrii codul de la fiecare exemplu si sa ;ezi daca obtii aceleasi rezultate ca cele din cadrul cursului# Liste ordonate (1L) ,m ;azut cum putem folosi listele neordonate in cadrul paginilor web# Lista urmatoare pastreaza continutul celei de mai sus insa este o lista ordonata (ordered list)# Ha ;edem diferentaG Lirma noastra ;a ofera urmatoarele ser;iciiG printare printare indosariere xerox te!noredactare Listele ordonate se formeaza cu ajutorul tag-urilor $1L% si $&1L% denumirea acestora ;enind din limba engleza Eordered listF care inseamna lista ordonata# La fel ca si la listele neordonate fiecare element trebuie introdus de tag-ul $L-%# -ata codul pentru lista ordonata de mai susG
$HTML% $H+,'% $T-TL+%Liste ordonate$&T-TL+% $&H+,'% $01'2% $1L%Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG $L-%printare $L-%laminare

$L-%=M56Wndosariere $L-%xerox $L-%te!noredactare $&1L% $&01'2% $&HTML%

Hal;eaza pagina cu numele de liste7#!tml in directorul ?agini# ?entru a ;edea cum ar trebui sa arate aceasta paginaG click aici# .a si in cazul listelor neordonate si la listele ordonate atributul T2?+ are o ;aloare implicita asa cum am ;azut in exemplul de mai susG numerele# in loc de numere putem folosi si alte caractere# ?entru a folosi aceste caractere este de ajuns sa utilizam atributul T2?+ cu ;aloarea potri;ita# ?entru a ;edea rezultatele inlocuieste linia a 9-a din codul HTML de mai sus cu una din urmatoarele linii de codG pentru litere mariG $1L T2?+P,%Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG Hal;eaza pagina cu numele de liste8#!tml in directorul ?agini# @ezi rezultatulG click aici# pentru litere miciG $1L T2?+Pa%Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG Hal;eaza pagina cu numele de liste9#!tml in directorul ?agini# @ezi rezultatulG click aici# pentru cifre romane miciG $1L T2?+Pi%Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG Hal;eaza pagina cu numele de listeT#!tml in directorul ?agini# @ezi rezultatulG click aici# pentru cifre romane mariG $1L T2?+P-%Lirma noastr=M58N ;=M58N ofer=M58N urm=M58Ntoarele ser;iciiG Hal;eaza pagina cu numele de listeW#!tml in directorul ?agini# @ezi rezultatulG click aici# ?e langa atributul T2?+ pentru tag-ul $1L% mai putem folosi si atributul HT,AT# ,cest atribut este folosit atunci cand ;rem sa sc!imbam ;aloarea initiala de exemplu daca ;rem sa incepem de la 7 in cazul numerelor sau de la ' in cazul literelor mari etc# Lorma generala a acestui atribut este HT,ATPn unde n este un numar natural# Ha ;edem un exempluG
$HTML% $H+,'% $T-TL+%Liste ordonate$&T-TL+% $&H+,'% $01'2% $1L T2?+P, HT,ATP7%=M5O9n ;acan=M688>a de ;ar=M58N am ;izitat urm=M58Ntoarele ora=M683>eG $L-%Aoma $L-%@iena $L-%Londra $L-%?aris $L-%?raga $&1L%

$&01'2% $&HTML%

.odul de mai sus ;a afisa in cadrul browser-ului urmatoarea lista ordonataG click aici# Liste de definitii ('L) ?entru a forma liste de definitii trebuie sa folosesti tag-urile $'L% si $&'L% (denumirea lor ;ine de la Edefinition listF P lista de definitii)# -ata cum arata o lista de definitiiG Teorema lui ?itagora \n orice triung!i dreptung!ic suma pBtratelor catetelor este egalB cu pBtratul ipotenuzei# Teorema catetei \n orice triung!i dreptung!ic pBtratul catetei este egal cu produsul dintre ipotenuzB (i proiec/ia catetei pe ipotenuzB# Teorema )nBl/imii \n orice triung!i dreptung!ic pBtratul )nBl/imii este egal cu produsul proiec/iilor celor douB catete pe ipotenuzB# Liecare element al unei liste de definitii ;a trebui introdus de tag-ul $'T% ('efinition Term) iar apoi fiecare definitie ;a fi precedata de tag-ul $''% ('efinition 'efinition)# .odul listei de mai sus este urmatorulG
$HTML% $H+,'% $T-TL+%Liste definitii$&T-TL+% $&H+,'% $01'2% $'L% $'T%$0%Teorema lui ?itagora$&0% $''%=M5O9n orice triung!i dreptung!ic suma p=M58Ntratelor catetelor este egal=M58N cu p=M58Ntratul

ipotenuzei# $'T%$0%Teorema catetei$&0% $''%=M5O9n orice triung!i dreptung!ic p=M58Ntratul catetei este egal cu produsul dintre ipotenuz=M58N =M683>i proiec=M688>ia catetei pe ipotenuz=M58N# $'T%$0%Teorema =M56Wn=M58Nl=M688>imii$&0% $''%=M5O9n orice triung!i dreptung!ic p=M58Ntratul =M56Wn=M58Nl=M688>imii este egal cu produsul proiec=M688>iilor celor dou=M58N catete pe ipotenuz=M58N#
$&'L% $&01'2% $&HTML%

?ersonalizarea listelor 'aca ;rei ca in loc de simbolurile folosite in mod prestabilit pentru elementele listelor sa fie afisate propriile imagini in loc de tag-ul $L-% cu care introducem fiecare element al listei ;om adauga imaginea dorita cu ajutorul tag-ului $-M4%# ?entru a intelege mai bine sa luam un exemplu# Hal;eaza mai intai imaginea de mai jos in directorul ?oze cu numele de sageata#gif# ,cum sa scriem codul unei pagini web ce ;a contine o lista cu persoanele din cadrul departamentului .ontabilitate al unei firmeG
$HTML% $H+,'% $T-TL+%Lista personal$&T-TL+% $&H+,'% $01'2% $:L%Lista persoanelor care sunt angajate =M56Wn cadrul departamentului .1KT,0-L-T,T+G

$0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%4!eorg!e Maria $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%?rodan +ugenia $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%Matac Marian $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%Keac=M683>u +lena $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%-onescu @ioleta $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%Manea .ristina $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%-oni=M688>=M58N Laura $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%=M68O>erb=M58Nnescu Mi!aela $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%.r=M58Nciun 'orina $0A%$0A%$-M4 HA.PJ##&?oze&sageata#gifJ%Keagu +mil $&:L% $&01'2% $&HTML%

Hal;eaza pagina in directorul ?agini cu numele de listapersonal#!tml# 'aca totul a iesit asa cum trebuie pagina ta ar trebui sa arate astfelG click aici# +xercitiiG 3# Hcrie codul HTML al unei pagini web care sa contina urmatoarea listaG Mic!ael Hc!umac!er Aubens 0aric!ello Yenson 0utton Lernando ,lonso 4iancarlo Lisic!ella Yuan ?ablo Montoya Ximi Aaikkonen YacVues @illeneu;e 'a;id .oult!ard Aalf Hc!umac!er -n loc de semnul din fata fiecarui pilot foloseste urmatoarea imagineG Hal;eaza imaginea cu numele f3#jpg in directorul ?oze (click dreapta Ha;e ,s)# Hal;eaza pagina HTML in directorul ?agini cu numele formula3#!tml# ?agina ta ar trebui sa arate astfelG click aici# 5# Lolosind notiunile in;atate pana acum incearca sa scrii codul urmatoarei pagini HTML pe care sal;eaz-o cu numele mate#!tmlG click aici# ?entru a te ;erifica dupa ce ai desc!is pagina alege din meniul @iew optiunea Hource# Tabele in HTML
.uprins

Tabelele sunt foarte importante pentru realizarea unei pagini web# .u ajutorul lor pe langa crearea propriu-zisa a tabelelor putem controla mult mai bine elementele din cadrul paginilor web# .rearea unui tabel ?entru a crea un tabel trebuie sa folosim tag-urile $T,0L+% si $&T,0L+%# Tot ce ;a fi scris intre aceste tag-uri ;a forma un tabel# 'upa tag-ul $T,0L+% urmeaza tag-ul $TA% care ;ine de la JTable AowJ (randul tabelului) si reprezinta introducerea unui rand in cadrul tabelului# Tot ce ;a fi scris intre tag-urile $TA% si $&TA% ;a forma un rand al tabelului# 'upa crearea unui rand trebuie sa adaugam in cadrul acestuia cate;a celule cu ajutorul tag-urilor $T'% si $&T'%#

Lectia 3 Lectia 5 Lectia 6 Lectia 7 Lectia 8 Lectia 9 Lectia T Lectia W

Lectia N
Lectia 3O Lectia 33 Lectia 35

Ha ;edem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web# Hcrie urmatorul cod HTMLG
$HTML% $H+,'% $T-TL+%?rimul tabel$&T-TL+% $&H+,'% $01'2% $T,0L+% $TA% $T'%$0%Kume$&0%$&T'% $T'%$0%?renume$&0%$&T'% $T'%$0%Kota$&0%$&T'% $&TA% $TA% $T'%-onescu$&T'% $T'%0ogdan$&T'% $T'%T$&T'% $&TA% $TA% $T'%Htancu$&T'% $T'%4eorge$&T'% $T'%N$&T'% $&TA% $TA% $T'%'umitrescu$&T'% $T'%,lexandra$&T'% $T'%3O$&T'%

$&TA% $TA% $T'%Marin$&T'% $T'%?aul$&T'% $T'%W$&T'% $&TA% $TA% $T'%-;ano;$&T'% $T'%Mi!aela$&T'% $T'%N$&T'% $&TA% $&T,0L+% $&01'2% $&HTML%

Hal;eaza pagina cu numele de tabel#!tml# ?entru a ;edea rezultatulG click aici# ?roprietatile tabelelor ,sa cum ai obser;at in exemplul de mai sus am realizat un tabel dar fara nici o linie# ?entru ca liniile unui tabel sa fie ;izibile tag-ul $T,0L+% trebuie sa fie insosit de atributul 01A'+A a;and ;aloarea egala cu cel putin 3# -n plus poti sc!imba culoarea liniilor unui tabel folosind atributul 01A'+A.1L1A insotit de codul culorii dorite# ,stfel daca ;rem ca liniile tabelului nostru sa aiba culoarea rosie ;om folosi urmatoarea linie de codG
$T,0L+ 01A'+APJ3J 01A'+A.1L1APJMLLOOOOJ%

-nlocuieste in exemplul de mai sus si sal;eaza pagina cu numele tabel5#!tml# ?entru a ;edea rezultatulG click aici# 'upa cum ai putut obser;a liniile tabelului sunt practic niste linii duble# ?entru a a;ea decat o singura linie ;om folosi atributul .+LLH?,.-K4 cu ;aloarea JOJ# ,cest atribut specifica distanta dintre celulele unui tabel# ,laturi de acest atribut putem folosi si atributul .+LL?,'-K4 care indica distanta dintre marginile celulelor si textul din cadrul acestora# ?entru a stabili dimensiunea unui tabel unui rand sau a unei celule folosim atributele "-'TH pentru latime si&sau H+-4HT pentru inaltime# ?entru alinierea datelor din cadrul tabelului folosim atributul ,L-4K cu una dintre ;alorile JleftJ JcenterJ sau Jrig!tJ# ?entru a alinia datele tabelului pe ;erticala folosim atributul @,L-4K insotit de una dintre ;alorile JtopJ JmiddleJ sau JbottomJ# ?entru a sc!imba culoarea unei celule unui rand sau c!iar a intregului tabel folosim atributul 04.1L1A impreuna cu codul culorii alese# Ha facem impreuna o pagina web cu un tabel care sa cuprinda toate notiunile pe care le-am in;atat pana acum in aceasta lectie# Hcrie codul urmator in cadrul unui editor text si sal;eaza apoi pagina cu numele de tabel6#!tml#
$HTML% $H+,'% $T-TL+%?roprietatile tabelelor$&T-TL+% $&H+,'% $01'2% $.+KT+A%$H5%Aezultatele ob=M688>inute la matematic=M58N$&H5%$&.+KT+A% $HA "-'THPJ8ORJ ,L-4KPJcenterJ .1L1APJMLLOOOOJ% $T,0L+ "-'THPJ8OOJ ,L-4KPJ.+KT+AJ 01A'+APJ3J 01A'+A.1L1APJMOOOOOOJ .+LLH?,.-K4PFOF .+LL?,''-K4PJOJ% $TA 04.1L1APJMOOOOOOJ ,L-4KPJcenterJ @,L-4KPJmiddleJ% $T' "-'THPJ5OOJ H+-4THPJ8OJ%$0%$L1KT .1L1APJMLLLLLLJ% Kume$&L1KT%$&0%$&T'% $T' "-'THPJ5OOJH+-4THPJ8OJ%$0%$L1KT .1L1APJMLLLLLLJ% ?renume$&L1KT%$&0%$&T'% $T' "-'THPJ3OOJ H+-4THPJ8OJ%$0%$L1KT .1L1APJMLLLLLLJ% Kota$&L1KT%$&0%$&T'% $&TA% $TA @,L-4KPJmiddleJ%

$T' "-'THPJ5OOJ H+-4THPJ5OJ%-onescu$&T'% $T' "-'THPJ5OOJ H+-4THPJ5OJ%0ogdan$&T'% $T' "-'THPJ3OOJ H+-4THPJ5OJ ,L-4KPJcenterJ%T$&T'% $&TA% $TA 04.1L1APJMLLLL..J @,L-4KPJmiddleJ% $T' "-'THPJ5OOJ H+-4THPJ5OJ%Htancu$&T'% $T' "-'THPJ5OOJ H+-4THPJ5OJ%4eorge$&T'% $T' "-'THPJ3OOJ H+-4THPJ5OJ ,L-4KPJcenterJ%N$&T'% $&TA% $TA @,L-4KPJmiddleJ% $T' "-'THPJ5OOJ H+-4THPJ5OJ%'umitrescu$&T'% $T' "-'THPJ5OOJ H+-4THPJ5OJ%,lexandra$&T'% $T' "-'THPJ3OOJ H+-4THPJ5OJ ,L-4KPJcenterJ%3O$&T'% $&TA% $TA 04.1L1APJMLLLL..J @,L-4KPJmiddleJ% $T' "-'THPJ5OOJ H+-4THPJ5OJ%Marin$&T'% $T' "-'THPJ5OOJ H+-4THPJ5OJ%?aul$&T'% $T' "-'THPJ3OOJ H+-4THPJ5OJ ,L-4KPJcenterJ%W$&T'% $&TA% $TA @,L-4KPJmiddleJ% $T' "-'THPJ5OOJ H+-4THPJ5OJ%-;ano;$&T'% $T' "-'THPJ5OOJ H+-4THPJ5OJ%Mi!aela$&T'% $T' "-'THPJ3OOJ H+-4THPJ5OJ ,L-4KPJcenterJ%N$&T'% $&TA% $&T,0L+% $&01'2% $&HTML%

?entru a ;edea rezultatulG click aici# Lolosirea tabelelor ca plan al unei pagini web ,sa cum spuneam cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini web# ?ractic folosind tabelele putem adauga o imagine sau un text oriunde in pagina web# Ha ;edem un exempluG click aici# ?agina de mai sus a fost facuta folosind tabele# -ata cum ar fi aratat pagina daca tabelele folosite ar fi a;ut atributul 01A'+A egal cu J3J in loc de JOJG click aici# -n plus fata de notiunile in;atate pana acum in aceasta lectie mai trebuie sa retinem inca doua atribute foarte importante ale tag-ului $T'%G .1LH?,K (numarul de coloane pe care se intinde celula) si A1"H?,K (numarul de linii pe care se intinde celula)# 'e exemplu pentru crearea tabelului urmatorG

am folosit pentru celula rosie atributul .1LH?,KPJ5J deoarece se intinde pe doua coloane iar pentru celula albastra am folosit atributul A1"H?,KPJ6J deoarece se intinde pe trei randuri# ?entru a intelege mai bine utilizarea tag-urilor si a atributelor lor nu uita sa exersezi cat mai mult# -ncearca sa realizezi diferite pagini web pe baza notiunilor in;atate in acest curs# Lolosirea cadrelor intr-o pagina web
.uprins

-n aceasta lectie ;om in;ata cum putem folosi cadrele in paginile noastre web# .u ajutorul cadrelor putem imparti o pagina web in mai multe zone iar apoi putem stabili ce pagina ;a fi afisata in fiecare zona# Lolosirea cadrelor intr-o pagina web

Lectia 3 Lectia 5 Lectia 6

?entru a imparti o pagina web in mai multe cadre trebuie sa folosim inainte de tag-ul $01'2% tag-ul $LA,M+H+T% insotit de unul dintre atributele $.1LH% sau $A1"H% pentru Lectia 7 a defini exact cum ;a fi impartita pagina respecti;a# ,stfel pentru a imparti pagina in doua cadre orizontale ;om folosi urmatoarea linie de codG Lectia 8
$LA,M+H+T A1"HPJTOR ]J% Lectia 9 Lectia T Lectia W Lectia N

Lectia 3O
Lectia 33 Lectia 35

He folosesc procente pentru a defini marimea randurilor sau a coloanelor care ;or forma cadrele# -n exemplul de mai sus primul cadrul ;a a;ea TOR din inaltimea paginii iar al doilea cadru restul adica J]J sau 6OR# ,laturi de tag-ul $LA,M+H+T% se mai folosesc si atributele $LA,M+H?,.-K4% pentru marimea spatiilor dintre cadre si $LA,M+01A'+A% care se refera la cadrele definite daca au sau nu c!enar ;alorile sale fiind JyesJ sau JnoJ# ,stfel linia completa pentru definirea a doua cadre orizontale ;a fi urmatoareaG

$LA,M+H+T A1"HPJTOR ]J LA,M+01A'+APJnoJ LA,M+H?,.-K4PJOJ%

?entru a imparti pagina web in mai multe cadre orizontale se ;or asocia mai multe procente atributului A1"H dar a;and grija ca suma lor sa nu depaseasca 3OOR# La fel se procedeaza si pentru impartirea unei pagini web in cadre ;erticale singura deoasebire fiind aceea ca in locul atributului A1"H se foloseste atributul .1LH# Ku uita de tag-ul de inc!eiere $&LA,M+H+T% 'upa ce am stabilit impartirea paginii in cadre se trece la definirea cadrelor# ,stfel intre tag-urile $LA,M+H+T% si $&LA,M+H+T% ;om folosi tag-ul $LA,M+%# ?rincipalul atribut al tag-ului $LA,M+% este HA. cu ajutorul caruia indicam sursa cadrului# ,stfel o linie de cod care defineste un cadru ar putea fi urmatoareaG

$LA,M+ HA.PJnumelepaginii#!tmlJ%

?entru a intelege mai bine utilizarea cadrelor in paginile web ;om face impreuna o pagina web cu mai multe cadre care ;a arata ca in imaginea urmatoareG

Ha ne apucam de treaba# Trebuie sa facem patru pagini web fiecare a;and culoarea de background la fel cu una dintre cele patru culori din imaginea de mai sus# ,poi ;om face a cincea pagina web in care ;om defini cadrele si care le ;a contine practic pe celelalte patru pagini# Kumele celor patru pagini web ;or fi rosu#!tml albastru#!tml galben#!tml si ;erde#!tml# ?aginile ar trebui sa arate astfelG
rosu#!tml albastru#!tml galben#!tml ;erde#!tml

?entru a ;edea codul sursa al fiecarei pagini alege din meniul @iew optiunea Hource# ,cum sa ;edem codul sursa al paginii care ;a contine cele patru pagini web createG

$HTML% $H+,'% $T-TL+%.adre$&T-TL+% $&H+,'% $LA,M+H+T .1LHPJ58R ]J LA,M+01A'+APJnoJ LA,M+H?,.-K4PJOJ% $LA,M+ HA.PJrosu#!tmlJ% $LA,M+H+T A1"HPJ78R 68R ]J LA,M+01A'+APJnoJ LA,M+H?,.-K4PJOJ% $LA,M+ HA.PJalbastru#!tmlJ% $LA,M+ HA.PJgalben#!tmlJ% $LA,M+ HA.PJ;erde#!tmlJ% $&LA,M+H+T% $&LA,M+H+T% $01'2% $&01'2% $&HTML% Hal;eaza pagina in acelasi fisier cu celelalte patru cu numele cadre#!tml# 'aca totul a mers asa cum trebuie pagina ta ar trebui sa arate asaG click aici# Ku a iesit c!iar ca in imagine dar important este sa intelegi cum facem o pagina web cu mai multe cadre# Ku uita sa definesti cadrele inainte de tag-ul $01'2% si sa exersezi toate notiunile in;atate in aceasta lectie# La cat mai multe pagini web care sa fie formate din cadre# Hucces<

.rearea formularelor folosind HTML

.uprins

-ata-ne ajunsi si la ultima lectie a cursului EHTML pe intelesul tuturorF inainte de a trece la realizarea propriu-zisa a unui site# Kotiuni generale despre formulare Lormularele reprezinta o metoda de interacti;itate cu utilizatorii paginii tale web# ?rin intermediul unui formular poti obtine date importante de la ;izitatorii paginii tale# 'upa ce formularul a fost completat utilizatorul apasa un buton de trimitere iar tu primesti datele introduse in formular sub forma unui e-mail sau datele ;or fi procesate cu ajutorul unui limbaj de programare si adaugate intr-o baza de date# -n aceasta lectie ;om in;ata cum se pot adauga in cadrul unei pagini web diferite tipuri de formulare dar si cum putem trimite datele introduse intr-un formular prin email#

Lectia 3 Lectia 5 Lectia 6 Lectia 7 Lectia 8 Lectia 9 Lectia T Lectia W Lectia N Lectia 3O

Lectia 33
Lectia 35

?entru a folosi un formular in pagina ta web ;a trebui sa folosesti tag-urile $L1AM% si $&L1AM%# -ntre aceste tag-uri ;or fi introduse toate elementele formularului# Tag-ul $L1AM% are doua atribute foarte importanteG ,.T-1K si M+TH1'# .u ajutorul atributului ,.T-1K ii spunem browser-ului ce se ;a intampla cu datele introduse in formular# ,stfel ;aloarea atributului ,.T-1K poate fi o adresa :AL a unui script scris intr-un limbaj de programare care ;a interpreta datele si le ;a introduce intr-o baza de date daca este cazul sau poate fi o adresa de email caz in care datele introduse in formular ;or fi trimise prin email la adresa respecti;a# ,tributul M+TH1' asa cum ii spune si numele precizeaza metoda de trimitere a datelor si poate a;ea doua ;alori# @aloarea implicita a acestui atribut este 4+T cu ajutorul acestei metode putand fi trimise cantitati mici de date cea mai folosita metoda fiind ?1HT# Ku trebuie sa intelegi acum totul ;ei ;edea cat de simplu este sa realizezi formulare pentru paginile tale web# La sfarsitul acestei lectii ;om face impreuna un formular mai complex dar mai intai sa ne familiarizam cu elementele formularelor# +lementele unui formular

+lementele unui formular trebuie introduse in majoritatea cazurilor cu ajutorul tag-ului $-K?:T%# ,tributele cele mai importante ale acestui tag sunt urmatoareleG - T2?+ - tipul elementului - K,M+ - numele elementului - @,L:+ - ;aloarea elementului +lementele ale unui formular pot fiG - campurile de editare - butoanele radio - casetele de ;alidare - casetele de fisiere - listele de selectie - butoanele submit si reset -n continuare ;om ;edea cum se poate realiza fiecare element al unui formular HTML .ampurile de editare ?entru a introduce in cadrul unui formular un camp de editare trebuie sa folosim pentru atributul T2?+ al tagului $-K?:T% ;aloarea text# +xempluG
Camp de editare

,tributele cele mai folosite pentru tagul $-K?:T% de tipul camp de editare suntG I H-Q+ care reprezinta latimea campului de editare I M,UL+K4TH specifica numarul maxim de caractere care pot fi introduse in campul de editare I @,L:+ ;aloarea initiala a campului de editare 'e exemplu pentru campul de editare de mai sus s-a folosit urmatoarea linie de codG
$-K?:T K,M+PJexempluJ T2?+PJtextJ @,L:+PJ.amp de editareJ H-Q+PJ5OJ M,UL+K4THPJ6OJ%

'aca ;rei sa introduci un camp de editare de tip JparolaJ atributul T2?+ ;a a;ea ;aloarea JpasswordJ# -n acest caz caracterele introduse in campul de editare nu ;or fi ;izibile # Ha ;edem un exempluG

Hcrie cate;a caractere in campul de editare de mai sus pentru a ;edea diferenta fata de un camp de editare de tip JtextJ# ,tunci cand ;rem sa adaugam in cadrul formularului nostru un camp de editare in care sa poata fi introduse mai multe randuri folosim campurile de editare de tip multilinie# ?entru a folosi un astfel de camp de editare a;em ne;oie de tag-urile $T+UT,A+,% si $&T+UT,A+,%# Ha ;edem cum arata linia de cod HTML care introduce un camp de editare multilinieG
$T+UT,A+, .1LHPJ8OJ A1"H PJ8J K,M+PJexempluJ%$&T+UT,A+,%

,m folosit atributul .1LH pentru a stabili numarul de caractere al fiecarui rand atributul A1"H pentru numarul de randuri al campului de editare iar atributul K,M+ pentru numele campului de editare# -ata rezultatulG

0utoanele radio 'aca a;em o intrebare cu mai multe ;ariante de raspuns ;om folosi butoanele radio# ?entru a introduce un buton radio folosim tag-ul $-K?:T% iar la atributul T2?+ ;aloarea JradioJ# Ha luam un exempluG \n ce categorie de ;*rstB ;B )ncadra/iD sub 38 ani 38-5O ani 5O-58 ani 58-68 ani 68-78 ani peste 78 ani .odul HTML care ;a afisa in cadrul browser-ului intrebarea de mai sus si ;ariantele de raspuns este urmatorulG =M5O9n ce categorie de ;=M559rst=M58N ;=M58N =M56Wncadra=M688>iD $0A% $-K?:T T2?+PJradioJ K,M+PJraspunsJ @,L:+PJaJ .H+.X+' %sub 38 ani$0A% $-K?:T T2?+PJradioJ K,M+PJraspunsJ @,L:+PJbJ% 38-5O ani$0A% $-K?:T T2?+PJradioJ K,M+PJraspunsJ @,L:+PJcJ% 5O-58 ani$0A% $-K?:T T2?+PJradioJ K,M+PJraspunsJ @,L:+PJdJ% 58-68 ani$0A% $-K?:T T2?+PJradioJ K,M+PJraspunsJ @,L:+PJeJ% 68-78 ani$0A% $-K?:T T2?+PJradioJ K,M+PJraspunsJ @,L:+PJfJ% peste 78 ani .u ajutorul atributului .H+.X+' fara alte ;alori putem selecta un buton radio in mod prestabilit# Ku pot fi selectate mai multe butoane radio dintr-un grup in acelasi timp# .asetele de ;alidare ?entru a introduce o caseta de ;alidare (c!eckbox) se utilizeaza etic!eta $-K?:T% cu atributul T2?+ a;and ;aloarea Jc!eckboxJ# .asetele de ;alidare permit selectarea sau deselectarea uneia sau mai multor optiuni# +xempluG :nde ;B petrece/i concediul de obiceiD La mare La munte \n strBinBtate La /arB ,casB ,sa cum se poate obser;a in cazul casetelor de ;alidare spre deosebire de butoanele radio pot fi selectate mai multe optiuni# .odul casetelor de ;alidare de mai sus este urmatorulG

:nde ;=M58N petrece/i concediul de obiceiD$0A% $-K?:T T2?+PJc!eckboxJ K,M+PJoptiunea3J%La mare$0A% $-K?:T T2?+PJc!eckboxJ K,M+PJoptiunea5J%La munte$0A% $-K?:T T2?+PJc!eckboxJ K,M+PJoptiunea6J%=M5O9n str=M58Nin=M58Ntate$0A% $-K?:T T2?+PJc!eckboxJ K,M+PJoptiunea7J%La =M688>ar=M58N$0A% $-K?:T T2?+PJc!eckboxJ K,M+PJoptiunea8J%,cas=M58N .asetele de fisiere ?entru a trimite un fisier prin intermediul unui formular folosim pentru atributul T2?+ al tag-ului $-K?:T% ;aloarea JfileJ# Ha ;edem un exempluG

.odul HTML este urmatorulG

$-K?:T T2?+PJfileJ K,M+PJfileJ%

Listele de selectie 1 lista de selectie asa cum ii spune si numele permite utilizatorului sa aleaga una sau mai multe optiuni dintr-o lista# Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-urilor $H+L+.T% si $&H+L+.T%# ,tributele cele mai folosite pentru tag-ul $H+L+.T% suntG I K,M+ atribuie listei de selectie un nume I H-Q+ specifica numarul de elemente din cadrul listei de selectie I @,L:+ atribuie o ;aloare de tip text care ;a fi expediata ser;erului sub forma de perec!i Jname P ;alueJ I H+L+.T+' (fara alte ;alori) selecteaza in mod prestabilit un element al listei Ha ;edem cum arata o lista de selectieG ,lege un judet din AomaniaG ?entru a selecta in mod implicit ;aloarea 0ucuresti am folosit in dreptul acesteia atributul selected# .odul listei de selectie de mai sus este urmatorulG

$H+L+.T% $1?T-1K ;alueP,lba%,lba$&1?T-1K% $1?T-1K ;alueP,rad%,rad$&1?T-1K% $1?T-1K ;alueP,rges%,rges$&1?T-1K% $1?T-1K ;alueP0acau%0acau$&1?T-1K% $1?T-1K ;alueP0i!or%0i!or$&1?T-1K% $1?T-1K ;alueP0istrita-Kasaud%0istrita-Kasaud$&1?T-1K% $1?T-1K ;alueP0otosani%0otosani$&1?T-1K% $1?T-1K ;alueP0raso;%0raso;$&1?T-1K% $1?T-1K ;alueP0raila%0raila$&1?T-1K% $1?T-1K ;alueP0ucuresti selected%0ucuresti$&1?T-1K% $1?T-1K ;alueP0uzau%0uzau$&1?T-1K% $1?T-1K ;alueP.aras-He;erin%.aras-He;erin$&1?T-1K% $1?T-1K ;alueP.alarasi%.alarasi$&1?T-1K% $1?T-1K ;alueP.luj%.luj$&1?T-1K% $1?T-1K ;alueP.onstanta%.onstanta$&1?T-1K% $1?T-1K ;alueP.o;asna%.o;asna$&1?T-1K% $1?T-1K ;alueP'ambo;ita%'ambo;ita$&1?T-1K% $1?T-1K ;alueP'olj%'olj$&1?T-1K% $1?T-1K ;alueP4alati%4alati$&1?T-1K% $1?T-1K ;alueP4iurgiu%4iurgiu$&1?T-1K% $1?T-1K ;alueP4orj%4orj$&1?T-1K% $1?T-1K ;aluePHarg!ita%Harg!ita$&1?T-1K% $1?T-1K ;aluePHunedoara%Hunedoara$&1?T-1K% $1?T-1K ;alueP-alomita%-alomita$&1?T-1K% $1?T-1K ;alueP-asi%-asi$&1?T-1K% $1?T-1K ;alueP-lfo;%-lfo;$&1?T-1K% $1?T-1K ;aluePMaramures%Maramures$&1?T-1K% $1?T-1K ;aluePMe!edinti%Me!edinti$&1?T-1K% $1?T-1K ;aluePMures%Mures$&1?T-1K% $1?T-1K ;aluePKeamt%Keamt$&1?T-1K% $1?T-1K ;alueP1lt%1lt$&1?T-1K% $1?T-1K ;alueP?ra!o;a%?ra!o;a$&1?T-1K% $1?T-1K ;aluePHatu-Mare%Hatu-Mare$&1?T-1K% $1?T-1K ;aluePHalaj%Halaj$&1?T-1K% $1?T-1K ;aluePHibiu%Hibiu$&1?T-1K% $1?T-1K ;aluePHucea;a%Hucea;a$&1?T-1K% $1?T-1K ;aluePTeleorman% Teleorman$&1?T-1K% $1?T-1K ;aluePTimis%Timis$&1?T-1K% $1?T-1K ;aluePTulcea%Tulcea$&1?T-1K% $1?T-1K ;alueP@aslui%@aslui$&1?T-1K% $1?T-1K ;alueP@alcea%@alcea$$&1?T-1K% $1?T-1K ;alueP@rancea%@rancea$&1?T-1K% $&H+L+.T%

?entru a putea selecta mai multe ;alori din cadrul unei liste de selectie trebuie sa folosim pentru tag-ul $H+L+.T% atributul M:LT-?L+ fara alte ;alori# 0utoanele de tip Hubmit si Aeset

?entru a putea expedia datele introduse in cadrul unui formular fie prin e-mail fie catre un script scris intr-un limbaj de programare care ;a interpreta aceste date trebuie sa folosim un buton de trimitere# ?entru a introduce un asemenea buton folosim tag-ul $-K?:T% cu atributul T2?+ a;and ;aloarea JsubmitJ# ?utem modifica si ;aloarea butonului care in mod implicit este Hubmit cu ajutorul atributului @,L:+# ,stfel linia de cod pentru un buton de tip submit ;a fi urmatoareaG
$-K?:T T2?+PJsubmitJ @,L:+PJTrimiteJ%

,laturi de butonul de tip Hubmit putem folosi si un buton de tip Aeset# ?rin apasarea acestui buton toate elementele formularului ;or re;eni la ;aloarea lor prestabilita indiferent de ;alorile introduse de utilizator# ?entru a introduce un buton de tip Aeset se procedeaza la fel ca si la butonul de tip Hubmit singura deosebire fiind ca atributul T2?+ ;a a;ea ;aloarea JresetJ# Ha ;edem cum arata linia de cod care introduce in cadrul unui formular un buton de tip AesetG
$-K?:T T2?+PJresetJ @,L:+PJHtergeJ%

Trimiterea datelor dintr-un formular prin e-mail ?entru ca datele introduse intr-un formular sa fie trimise prin e-mail trebuie sa folosim pentru atributul ,.T-1K al tag-ului $L1AM% ;aloarea JmailtoGemail[domeniu#roJ# in felul acesta datele introduse in formular ;or fi trimise la adresa de e-mail specificata# 'e exemplu pentru a trimite datele dintr-un formular la adresa cursuri[ecursuri#ro ;om folosi urmatoarea linie de codG
$L1AM ,.T-1KPJmailtoGcursuri[ecursuri#roJ M+TH1'PJ?1HTJ%

+xercitiuG realizarea unui formular 'upa ce am in;atat cum sa introducem di;erse elemente in cadrul unui formular este timpul sa realizam unul# ,stfel folosind notiunile in;atate incearca sa realizezi urmatorul formularG click aici# ?entru a ;edea codul acestui formular alege din meniul @iew optiunea Hource# ?entru a imbunatati calitatea cursurilor ;iitoare iti ;om fi recunoscatori daca o sa completezi formularul si o sa ne trimiti astfel parerea ta despre site-ul www#ecursuri#ro in general si despre cursul JHTML pe intelesul tuturorJ in special# Multumim<

Aealizarea unui site in HTML

.uprins

-n aceasta ultima lectie a cursului JHTML pe intelesul tuturorJ ;om realiza impreuna site-ul unei gradinite de copii# Koi i-am dat numele gradinita ,becedar#

Lectia 3 Lectia 5

-nainte de a trece la realizarea efecti;a a site-ului ;a trebui sa faci un nou director pe care sal numesti ,becedar iar in cadru acestuia doua subdirectoareG ?agini si ?oze# ,poi copiaza Lectia 6 imaginile de mai jos (click dreapta - Ha;e ?icture ,s) cu denumirea de sub fiecare in subdirectorul ?oze din directorul ,becedarG Lectia 7
Lectia 8 Lectia 9

!ome#jpg

calculator#jpg

limbistraine#jpg

muzica#jpg
Lectia T

excursii#jpg

desprenoi#jpg

Lectia W Lectia N Lectia 3O

logo#jpg

meniu#jpg

copil#jpg

welcome#jpg

calculator6#jpg

calculator5#jpg

learn#jpg

straine#jpg

muzica6#jpg

muzica5#jpg

excursii6#jpg

excursii5#jpg

desprenoi6#jpg

desprenoi5#jpg ,cum dupa ce ai copiat pozele in subdirectorul ?oze din directorul ,becedar si le-ai denumit corespunzator sa continuam realizarea site-ului# Hite-ul nostru ;a a;ea urmatoarea structuraG

@om folosi asadar cadrele pe care le-am in;atat in lectia 3O# @om realiza mai intai pagina din partea de sus top#!tml care ;a a;ea urmatorul cod HTMLG
$HTML% $H+,'% $T-TL+%Top$&T-TL+% $&H+,'% $01'2 bgcolorPJMOO..LLJ% $img srcPJ##&?oze&logo#jpgJ alignPJleftJ !spacePJ8OJ% $0%$L1KT colorPJredJ%$0A%$0A%$0A% +-mailG$a !refPJmailtoGabecedar[ya!oo#comJ% abecedar[ya!oo#com$&a%$0A% "ebG$a !refPJ!ttpG&&www#gradinitaabecedar#roJ%www#gradinitaabecedar#ro$&a%$0A% $&L1KT%$&0% $&01'2% $&HTML%

.opiaza codul intr-un fisier text apoi sal;eaza pagina (Lile&Ha;e ,s) cu numele de top#!tml in folderul ?agini# ?agina top#!tml ar trebui sa arate astfelG click aici# -n continuare ;om scrie codul pentru pagina !tml care ;a contine meniul din partea stanga a site-ului#
$HTML% $H+,'%

$T-TL+%,becedar$&T-TL+% $&H+,'% $01'2 bgcolorPJMLLNN66J% $img srcPJ##&?oze&meniu#jpgJ%$0A%$0A%$0A%$0A%$0A% $a !refPJ##&!ome#!tmlJ targetPJSparentJ%$img srcPJ##&?oze&!ome#jpgJ borderPJOJ%$&a%$0A% $a !refPJ##&?agini&calculator#!tmlJ targetPJSparentJ%$img srcPJ##&?oze&calculator#jpgJ borderPJOJ%$&a%$0A% $a !refPJ##&?agini&limbistraine#!tmlJ targetPJSparentJ%$img srcPJ##&?oze&limbistraine#jpgJ borderPJOJ%$&a%$0A% $a !refPJ##&?agini&muzica#!tmlJ targetPJSparentJ%$img srcPJ##&?oze&muzica#jpgJ borderPJOJ%$&a%$0A% $a !refPJ##&?agini&excursii#!tmlJ targetPJSparentJ%$img srcPJ##&?oze&excursii#jpgJ borderPJOJ%$&a%$0A% $a !refPJ##&?agini&desprenoi#!tmlJ targetPJSparentJ%$img srcPJ##&?oze&desprenoi#jpgJ borderPJOJ%$&a%$0A% $&01'2% $&HTML%

.opiaza codul intr-un fisier text apoi sal;eaza pagina in folderul ?agini cu numele de meniu#!tml# 'aca totul a mers cum trebuie pagina ar trebui sa arate astfelG click aici# 'upa ce am facut meniul si partea de sus a site-ului care se ;or repeta in fiecare pagina ;om scrie codul pentru prima pagina a site-ului unde ;om folosi cadrele#
$HTML% $H+,'% $T-TL+%Home page$&T-TL+% $&H+,'% $frameset colsPJ55R ]J frameborderPJOJ% $frame srcPJ?agini&meniu#!tmlJ% $frameset rowsPJ59R ]J frameborderPJOJ% $frame srcPJ?agini&top#!tmlJ% $frame srcPJ?agini&index#!tmlJ% $&frameset% $&frameset% $01'2% $&01'2% $&HTML%

?agina ;a trebui sal;ata cu numele !ome#!tml in directorul ,becedar alaturi de subdirectoarele ?agini si ?oze insa nu ;a fi functionala pentru ca nu a fost creata pagina index#!tml al carei cod este urmatorulG
$HTML% $H+,'% $T-TL+%Home$&T-TL+% $&H+,'% $01'2 backgroundPJ##&?oze&background#jpgJ% $.+KT+A%$img srcPJ##&?oze&welcome#jpgJ$&.+KT+A%$0A%$br%$0A% $img srcPJ##&?oze&copil#jpgJ !spacePJ58J ;spacePJ3OJ alignPJleftJ%$0A%$0A% $L1KT colorPJMOONNLLJ alignPJleftJ%$H6%'e ce gr=M58Ndini=M688>a ,0+.+',A pentru copilul dumnea;oastr=M58ND$0A%$0A% 'eoarece iubim copiii =M683>i le oferim foarte multe oportunit=M58N=M688>iG$&H6% $0A%$0A% $H7 alignPJleftJ% $:L alignPJleftJ% $L-%=M56Wi ajut=M58Nm s=M58N =M56W=M683>i dez;olte mult mai bine anumite aptitudini> $L-%punem foarte mult accent pe sport oferind =M56Wn acest sens condi=M688>ii moderne de preg=M58Ntire> $L-%personalul didactic este format numai din persoane care iubesc copiii> $L-%le oferim o preg=M58Ntire bazat=M58N mai mult pe partea practic=M58N =M683>i nu pe partea

teoretic=M58N> $L-%copiii au posibilitatea de a se =M56Wmprieteni unii cu al=M688>ii =M683>i s=M58N-=M683>i dez;olte spiritul de ec!ip=M58N#

$&:L% $&H7% $&L1KT% $&01'2% $&HTML%

Hal;eaza pagina in folderul ?agini cu numele de index#!tml# 'aca totul a mers cum trebuie pagina ar trebui sa arate astfelG click aici# ?rima pagina a site-ului este gata# -ata rezultatulG click aici# Ke ;om ocupa in continuare si de restul paginilor# -n primul rand realizeaza o pagina calculator#!tml in folderul ?agini care sa aiba acelasi cod HTML cu pagina !ome#!tml numai ca in loc de index#!tml ;om folosi icalculator#!tml# -n mod asemanator facem si paginile limbistraine#!tml (in loc de index#!tml folosim istraine#!tml) muzica#!tml (in loc de index#!tml folosim imuzica#!tml) excursii#!tml (in loc de index#!tml folosim iexcursii#!tml) desprenoi#!tml (in loc de index#!tml folosim idesprenoi#!tml)# Mai a;em de realizat paginile icalculator#!tml istraine#!tml imuzica#!tml iexcursii#!tml si idesprenoi#!tml# ,ceste pagini ;or fi formate din continutul fiecarei rubrici a site-ului# .odul HTML pentru fiecare pagina ;a fi prezentat in continuare# Ku uita sa sal;ezi fiecare pagina in folderul ?agini# - pentru pagina icalculator#!tml codul HTML este urmatorulG
$HTML% $H+,'% $T-TL+%Home$&T-TL+% $&H+,'% $01'2% $.+KT+A%$img srcPJ##&?oze&calculator5#jpgJ%$&.+KT+A%$0A%$0A% $img srcPJ##&?oze&calculator6#jpgJ !spacePJ58J ;spacePJ58J alignPJleftJ%$0A% $L1KT colorPJMOONNLLJ alignPJleftJ% $0A%$H7%

.alculatorul a de;enit ce;a foarte obi=M683>nuit =M56Wn ;ia=M688>a tuturor# 'e aici rezult=M58N =M683>i necesitatea de a =M56Wn;=M58N=M688>a cum se utilizeaz=M58N un calculator# 4r=M58Ndini=M688>a ,0+.+',A are ca obiecti; principal =M56Wn domeniul implement=M58Nrii =M56Wn procesul educa=M688>ional a cuno=M683>tin=M688>elor de calculator ini=M688>ierea =M683>i familiarizarea copiilor pre=M683>colari =M56Wn acest domeniu# He ;a =M688>ine cont de particularit=M58N=M688>ile de ;=M559rst=M58N ale celor mici# ,stfel copii ;or =M56Wn;=M58N=M688>a no=M688>iunile de baz=M58N =M56Wnso=M688>ite de numeroase exemple#
$&H7% $&L1KT% $&01'2% $&HTML%

- pentru pagina istraine#!tml codul HTML este urmatorulG

$HTML% $H+,'% $T-TL+%Home$&T-TL+% $&H+,'% $01'2% $.+KT+A%$img srcPJ##&?oze&straine#jpgJ%$&.+KT+A%$0A%$0A%$0A% $img srcPJ##&?oze&learn#jpgJ alignPJleftJ !spacePJ58J ;spacePJ8J% $L1KT colorPJMOONNLLJ alignPJleftJ% $H7%

=M5O9n cadrul cursurilor de limbi str=M58Nine copiii =M56Wn;a=M688>=M58N s=M58N pronun=M688>e corect

cu;inte =M683>i propozi=M688>ii =M56Wn di;erse limbi str=M58Nine# Huntem preg=M58Nti=M688>i s=M58N oferim cursuri de un =M56Wnalt ni;el calitati; pentru urm=M58Ntoarele limbi str=M58NineG
$:L% $L-%limba englez=M58N> $L-%limba italian=M58N> $L-%limba german=M58N> $L-%limba francez=M58N# $&:L% $&H7% $&L1KT% $&01'2% $&HTML%

- pentru pagina imuzica#!tml codul HTML este urmatorulG

$HTML% $H+,'% $T-TL+%Home$&T-TL+% $&H+,'% $01'2% $.+KT+A%$img srcPJ##&?oze&muzica5#jpgJ%$&.+KT+A%$0A%$0A% $img srcPJ##&?oze&muzica6#jpgJ !spacePJ58J ;spacePJ5OJ alignPJleftJ%$0A%$0A% $L1KT colorPJMOONNLLJ alignPJleftJ% $H7%

?entru copii este minunat s=M58N poat=M58N asculta muzic=M58N =M683>i s=M58N poat=M58N dansa mai ales dac=M58N acestea se =M56Wnt=M559mpl=M58N =M56Wntr-un cadru organizat# .ursurile de muzic=M58N =M683>i dans de la gr=M58Ndini=M688>a noastr=M58N acoper=M58N o gam=M58N foarte di;ers=M58N de la muzica popular=M58N p=M559n=M58N la muzica latino# =M5O9n fiecare s=M58Npt=M58Nm=M559n=M58N sunt organizate concursuri de dans iar perec!ile c=M559=M683>tig=M58Ntoare primesc premii din partea gr=M58Ndini=M688>ei#
$&H7% $&L1KT% $&01'2% $&HTML%

- pentru pagina iexcursii#!tml codul HTML este urmatorulG

$HTML% $H+,'% $T-TL+%Home$&T-TL+% $&H+,'% $01'2% $.+KT+A%$img srcPJ##&?oze&excursii5#jpgJ%$&.+KT+A%$0A%$0A% $img srcPJ##&?oze&excursii6#jpgJ !spacePJ58J ;spacePJ5OJ alignPJleftJ%$0A%$0A% $L1KT colorPJMOONNLLJ alignPJleftJ% $H7%

4r=M58Ndini=M688>a ,0+.+',A organizeaz=M58N excursii =M56Wn 0ucure=M683>ti dar nu numai cu scopul ;izit=M58Nrii a c=M559t mai multe obiecti;e culturale =M683>i turistice# 'e asemenea =M56Wn ;acan=M688>ele de ;ar=M58N se ;or organiza tabere educa=M688>ionale =M56Wn care lec=M688>iile se ;or desf=M58N=M683>ura =M56Wn di;erse loca=M688>ii =M56Wn mijlocul naturii#
$&H7% $&L1KT% $&01'2% $&HTML%

- pentru pagina idesprenoi#!tml codul HTML este urmatorulG

$HTML% $H+,'% $T-TL+%Home$&T-TL+% $&H+,'% $01'2% $.+KT+A%$img srcPJ##&?oze&desprenoi5#jpgJ%$&.+KT+A%$0A%$0A% $img srcPJ##&?oze&desprenoi6#jpgJ !spacePJ58J ;spacePJ3OJ alignPJleftJ%$0A% $L1KT colorPJMOONNLLJ alignPJleftJ% $H7%

4r=M58Ndini=M688>a ,0+.+',A este o gr=M58Ndini=M688>=M58N particular=M58N care =M56Wncearc=M58N s=M58N ofere o alternati;=M58N la =M56Wn;=M58N=M688>=M58Nm=M559>ntul de stat care nu ofer=M58N condi=M688>iile optime pentru preg=M58Ntirea copiilor# Koi oferim condi=M688>ii moderne de =M56Wn;=M58N=M688>are profesori specializa=M688>i pentru lucrul cu copii materiale =M683>i ec!ipamente de ultim=M58N or=M58N toate acestea la pre=M688>uri atracti;e#
$&H7% $&L1KT% $&01'2% $&HTML%

'aca totul a mers cum trebuie si ai respectat toate indicatiile din cadrul lectiei site-ul este gata si ar trebui sa arate asaG click aici# 'aca site-ul tau nu functioneaza cum trebuie incearca sa ;ezi codurile pe care le-am folosit noi (@iew & Hource) si compara-le cu cele folosite de tine# ,cum ajunsi la finalul acestui curs nu uita sa exersezi cat mai mult notiunile in;atate# -ncearca sa faci singur di;erse site-uri scriind codul HTML# Mult succes< Hper ca ti-a placut cursul si te mai asteptam in cadrul paginilor site-ului www#ecursuri#ro sa in;atam impreuna#