Crearea şi programarea paginilor WEB.ppt

7/25/2019 Crearea şi programarea paginilor WEB.ppt

http://slidepdf.com/reader/full/crearea-si-programarea-paginilor-webppt 1/44

CreareaCrearea şişi

programarea paginilorprogramarea paginilorWEBWEB



TerminologieTerminologie

Internet-Internet- reţeauareţeaua mondială unică demondială unică de computerecomputere interconectate prininterconectate prinprotocoalele (regulile) de comunicareprotocoalele (regulile) de comunicare World Wide WebWorld Wide Web (abreviat(abreviat WWWWWW, sau pur şi simplu, sau pur şi simplu Web-ulWeb-ul))

defineşte un spaţiu informaţional, desfăşurat cu ajutoruldefineşte un spaţiu informaţional, desfăşurat cu ajutorul InternetuluiInternetului ProviderProvider- firmă specializată ce distribuie servicii Internet- firmă specializată ce distribuie servicii Internet ServerServer -- aplicaţie peaplicaţie pe computercomputer, uneori chiar un computer întreg,, uneori chiar un computer întreg,

care operează continuu în reţeaua sa şi aşteaptă solicitări din parteacare operează continuu în reţeaua sa şi aşteaptă solicitări din partea

altor calculatoare din reţeaaltor calculatoare din reţea,, numite clientnumite client BrowserBrowser- soft, ansamblu de programe pentru manevrarea- soft, ansamblu de programe pentru manevrareainformaţiilor bazate pe grafică şi tet (Internet !plorer, "ozillainformaţiilor bazate pe grafică şi tet (Internet !plorer, "ozilla#irefo)#irefo)

URLURL ($niform %esourse &ocator)- adresa unică a unei pagini '!-($niform %esourse &ocator)- adresa unică a unei pagini '!-alcătuită din identificator de conţinut (http** +per et ransferalcătuită din identificator de conţinut (http** +per et ransfer.rotocol sau ftp** #ile ransfer .rotocol) şi localizare (formată din.rotocol sau ftp** #ile ransfer .rotocol) şi localizare (formată din

numele domeniului şi numele unei anumite resurse)/numele domeniului şi numele unei anumite resurse)/!emple !emple http**000/google/rohttp**000/google/ro ,,

http**000/01schools/comhttp**000/01schools/com SiteSite- ansamblul spaţiu pe hard2fişierele pe care le conţine2adresa/- ansamblul spaţiu pe hard2fişierele pe care le conţine2adresa/

http://www.google.ro/


http://www.w3schools.com/






HTMLHTML

HyperText Markup LanguageHyperText Markup Language$n fişier$n fişier +"&+"& este un fişiereste un fişier tettet

care conţinecare conţine markup tagsmarkup tags 3ceste mar4up3ceste mar4up tagstags spun bro0ser-spun bro0ser-

uluiului cum să afie!ecum să afie!e paginapagina $n fişier$n fişier +"&+"& trebuie să aibătrebuie să aibă

etensiaetensia "tm"tm sausau "tml"tml$n fişier$n fişier +"&+"& poate fi creat utiliz5ndpoate fi creat utiliz5nd

unun simplsimpluu te#t editorte#t editor$$ 6otepad6otepad



Introduceţi următorul text:Introduceţi următorul text:7html87html87head87head87title8itle of page7*title87title8itle of page7*title87*head87*head87bod8 his is m first7bod8 his is m first

homepage/ 7b8his tet ishomepage/ 7b8his tet is

bold7*b8 7*bod8bold7*b8 7*bod87*html87*html8 9alvaţi fişierul cu numele9alvaţi fişierul cu numele

pagina:/htmpagina:/htm 3tenţie la etensia htm sau3tenţie la etensia htm sau

htmlhtml !ecutaţi!ecutaţi

etul dintre tag-urileetul dintre tag-urile7head87head8 şişi 7*head87*head8 reprezintă informaţia header-reprezintă informaţia header-uluiului// 3ceasta nu este afişată3ceasta nu este afişată î înn fereastrafereastra bro0serbro0ser-ului-ului//

etul dintre tag-urileetul dintre tag-urile 7title87title8este titluleste titluldocumentului şi este afişatădocumentului şi este afişată în bara de titlu în bara de titlu//

etul dintre tag-urileetul dintre tag-urile7bod87bod8 este tetul care seeste tetul care se

va afişa în fereastrava afişa în fereastra bro0serbro0ser--uluiului// etul dintre tag-urileetul dintre tag-urile 7b87b8 şişi

7*b8 tags7*b8 tags va afişa tetul cuva afişa tetul culitere îngroşate (old)litere îngroşate (old)



!"er#aţie!"er#aţie

.utem edita un fişier.utem edita un fişier +"&+"& cucuuşurinţă, folosind un editoruşurinţă, folosind un editor ';9I';<';9I';<(0hat ou see is 0hat ou get)(0hat ou see is 0hat ou get) cumcum

ar fiar fi #ront.age#ront.age sausau =ream0eaver=ream0eaver//=acă dorim, totuşi, să devenim=acă dorim, totuşi, să devenim

adevăraţi programatori de pagini 'eb,adevăraţi programatori de pagini 'eb,

este recomandabil să utilizăm uneste recomandabil să utilizăm uneditor de tet pentru a învăţaeditor de tet pentru a învăţaabecedarulabecedarul +"&/+"&/



AtributeleAtributele TagTag-urilor -urilor

agag-urile pot avea-urile pot avea atributeatribute// 3tribute3tributele oferă informaţiile oferă informaţiisuplimentare unui elementsuplimentare unui element +"&/+"&/ $rmătorul t$rmătorul tag defineag defineşteşte unun tabtabeel 7table8/l 7table8/ 3cestuia îi putem adăuga un chenar3cestuia îi putem adăuga un chenaradăug5nd un atribuladăug5nd un atribul 7table border>?@?87table border>?@?8/ #ără acesta,/ #ără acesta,tabelul nu are chenar/tabelul nu are chenar/

3tribute3tributelele apar întotdeauna în perechiapar întotdeauna în perechi name*valuename*value dedeformaforma name>?value?/ name>?value?/ 3tribute3tributelele sunt întotdeauna specificate îsunt întotdeauna specificate înn tag-ul detag-ul de startstart alal

elementuluielementului +"&/+"&/ 3tribute3tributelele sunt de cele mai multe orisunt de cele mai multe ori case-insensitive/case-insensitive/ AalorileAalorile atributeatributelor trebuie cuprinse între ghilimele (dublelor trebuie cuprinse între ghilimele (duble

sau simple)sau simple) BBn rare situan rare situaţţiiii,, ca în cazul în care valoarea atribului în sineca în cazul în care valoarea atribului în sineconţine ghilimele, este necesară folosirea apostrconţine ghilimele, este necesară folosirea apostroofurilor, cafurilor, ca în eemplu în eemplu name>CDohn ?9hot<un? 6elsonCname>CDohn ?9hot<un? 6elsonC



Titluri$ paragra%e$ comentariiTitluri$ paragra%e$ comentarii

%eadings%eadings &'itluri(&'itluri( +eadings+eadings sunt definite cu tag-urisunt definite cu tag-uri

7h:87h:8 EE 7hF8/ 7h:87hF8/ 7h:8 defineştedefineştecel mai marecel mai mare headingheading iariar 7hF87hF8definedefineşteşte headingheading-ul cel mai mic-ul cel mai mic//

7h:8his is a heading7*h:87h:8his is a heading7*h:87hG8his is a heading7*hG87hG8his is a heading7*hG87h18his is a heading7*h187h18his is a heading7*h187hH8his is a heading7*hH87hH8his is a heading7*hH87h8his is a heading7*h87h8his is a heading7*h87hF8his is a heading7*hF87hF8his is a heading7*hF8

+"&+"& adaugă automat linii goaleadaugă automat linii goale înainte şi după înainte şi după heading/heading/

)omments in %'*L)omments in %'*L$n comentariu va fi ignorat de$n comentariu va fi ignorat debro0ser/bro0ser/

+,+,-- his is a comment ---- his is a comment --

ParagraParagrafurifuri .aragra.aragrafurilefurile sunt dsunt definefinititee cu tag-cu tag-

ulul 7p87p8 7p8his is a paragraph7*p87p8his is a paragraph7*p8

7p8his is another7p8his is anotherparagraph7*p8paragraph7*p8

+"&+"&

adaugă automat linii goaleadaugă automat linii goale

înainte şi după paragraf/ înainte şi după paragraf/

Sf.rit de lSf.rit de lininiiee ag-ulag-ul 7br87br8 este folosit c5nd seeste folosit c5nd se

doreşte salt la linia următoaredoreşte salt la linia următoare(enter)(enter)

7p8his 7br8 is a7p8his 7br8 is apara7br8graph 0ith linepara7br8graph 0ith linebrea4s7*p8brea4s7*p8

ag-ulag-ul 7br87br8 este folosit singur, nueste folosit singur, nutrebuie închistrebuie închis//



&ormatarea textului 'n&ormatarea textului 'n HTMLHTML7html87html87bod87bod87b8his tet is bold7*b87br87b8his tet is bold7*b87br87strong87strong8his tet is stronghis tet is strong7*strong87br87*strong87br87big87big8his tet is bighis tet is big7*big87br87*big87br87em87em8his tet is emphasizedhis tet is emphasized

7*em87br87*em87br87i87i8his tet is italichis tet is italic7*i87br87*i87br87small87small8his tet is smallhis tet is small7*small87br87*small87br8his tet containshis tet contains7sub87sub8

subscriptsubscript7*sub87br87*sub87br8his tet containshis tet contains7sup87sup8superscriptsuperscript7*sup87*sup87*bod87*bod87*html87*html8

7html87html8

7bod87bod8

7pre87pre8his ishis ispreformatted tet/preformatted tet/It preserves both spacesIt preserves both spacesand line brea4s/and line brea4s/7*pre87*pre8

7p8he pre tag is good for displaing7p8he pre tag is good for displaingcomputer code7*p8computer code7*p8

7pre87pre8for i > : to :@for i > : to :@ print iprint inet inet i7*pre87*pre8

7*bod87*bod87*html87*html8



Tag(uri )Computer output*Tag(uri )Computer output*

7html87html87bod87bod8

7code8Jomputer code7*code87code8Jomputer code7*code87br87br874bd8Keboard input7*4bd874bd8Keboard input7*4bd87br87br87tt8eletpe tet7*tt87tt8eletpe tet7*tt8

7br87br87samp89ample tet7*samp87samp89ample tet7*samp87br87br87var8Jomputer variable7*var87var8Jomputer variable7*var87br87br8

7p87p87b86ote7*b8 hese tags are often used7b86ote7*b8 hese tags are often used

to displa computer*programming code/to displa computer*programming code/7*p87*p8


Jomputer codeJomputer codeKeboard inputKeboard inputeletpe teteletpe tet

9ample tet9ample tetComputer variableComputer variable /ot/otăă$$ 3ceste3cestetag-uri sunt folositetag-uri sunt folosite

pentru a afişa liniipentru a afişa liniide program/de program/



Basic %'*L 'agsBasic %'*L 'ags

7html87html8=efines an +"&=efines an +"&documentdocument

7bod87bod8=efines the=efines thedocumentCs boddocumentCs bod

7h:8 to 7hF87h:8 to 7hF8=efines header=efines header: to header F: to header F

7p87p8=efines a paragraph=efines a paragraph7br87br8Inserts a single lineInserts a single line

brea4brea47hr87hr8=efines a horizontal rule=efines a horizontal rule7L--87L--8=efines a comment=efines a comment

'e#t 0ormatting 'ags'e#t 0ormatting 'ags7b87b8=efines bold tet=efines bold tet7big87big8=efines big tet=efines big tet7em87em8=efines emphasized tet=efines emphasized tet

7i87i8=efines italic tet=efines italic tet7small87small8=efines small tet=efines small tet7strong87strong8=efines strong tet=efines strong tet7sub87sub8=efines subscripted tet=efines subscripted tet7sup87sup8=efines superscripted tet=efines superscripted tet7ins87ins8=efines inserted tet=efines inserted tet

7del87del8=efines deleted tet=efines deleted tet7s87s8=eprecated/ $se 7del8=eprecated/ $se 7del8

insteadinstead7stri4e87stri4e8=eprecated/ $se 7del8=eprecated/ $se 7del8

insteadinstead7u87u8=eprecated/ $se stles=eprecated/ $se stles

insteadinstead

http://www.w3schools.com/tags/tag_html.asp


http://www.w3schools.com/tags/tag_body.asp


http://www.w3schools.com/tags/tag_hn.asp


http://www.w3schools.com/tags/tag_p.asp


http://www.w3schools.com/tags/tag_br.asp


http://www.w3schools.com/tags/tag_hr.asp


http://www.w3schools.com/tags/tag_comment.asp


http://www.w3schools.com/tags/tag_font_style.asp




http://www.w3schools.com/tags/tag_phrase_elements.asp








http://www.w3schools.com/tags/tag_sup.asp




http://www.w3schools.com/tags/tag_ins.asp


http://www.w3schools.com/tags/tag_del.asp


http://www.w3schools.com/tags/tag_strike.asp




http://www.w3schools.com/tags/tag_u.asp
























)itations1 2uotations1)itations1 2uotations1and 3efinition 'agsand 3efinition 'ags

7abbr87abbr8=efines an=efines an

abbreviationabbreviation7acronm8=efines an7acronm8=efines anacronmacronm

7address8=efines an7address8=efines anaddress elementaddress element

7bdo8=efines the tet7bdo8=efines the tetdirectiondirection7bloc4Muote8=efines a7bloc4Muote8=efines a

long Muotationlong Muotation7M8=efines a short7M8=efines a short

MuotationMuotation7cite8=efines a citation7cite8=efines a citation7dfn8=efines a definition7dfn8=efines a definition

termterm

4)omputer 5utput4 'ags4)omputer 5utput4 'ags

7code8=efines computer7code8=efines computercode tetcode tet

74bd8=efines 4eboard tet74bd8=efines 4eboard tet7samp8=efines sample7samp8=efines samplecomputer codecomputer code

7tt8=efines teletpe tet7tt8=efines teletpe tet7var8=efines a variable7var8=efines a variable

7pre8=efines preformatted7pre8=efines preformattedtet7listing8=eprecated/tet7listing8=eprecated/$se 7pre8 instead$se 7pre8 instead7plaintet8=eprecated/7plaintet8=eprecated/$se 7pre8$se 7pre8instead7mp8=eprecated/instead7mp8=eprecated/

$se 7pre8 instead$se 7pre8 instead

http://www.w3schools.com/tags/tag_abbr.asp





Caractere "peciale 'nCaractere "peciale 'n HTMLHTML $nele caractere au o semnificaţie aparte în$nele caractere au o semnificaţie aparte în +"&,+"&, cum ar fi semnulcum ar fi semnul (7)(7)

care defineşte începutul unui tag/ =acă vreţi să afişaţi un astfel decare defineşte începutul unui tag/ =acă vreţi să afişaţi un astfel decaracter, trebuie să inseraţi o entitate caracter în sursacaracter, trebuie să inseraţi o entitate caracter în sursa +"&/+"&/ N entitate caracter are trei părţi unN entitate caracter are trei părţi un ampersand (O),ampersand (O), un nume de entitateun nume de entitate

sau semnulsau semnul PP şi un număr al entităţii, construcţie terminată prinşi un număr al entităţii, construcţie terminată prin (Q)/(Q)/ .entru a afişa semnul de Rmai micS trebuie să scrieţi.entru a afişa semnul de Rmai micS trebuie să scrieţi 6lt76lt7 oror 689:7689:7 3vantajul folosirii unui nume în locul unui număr este faptul că poate fi3vantajul folosirii unui nume în locul unui număr este faptul că poate fi

mai uşor de amintit şi identificat/ =ezavantajul este că nu orice bro0sermai uşor de amintit şi identificat/ =ezavantajul este că nu orice bro0serrecunoaşte cele mai noi nume de entităţi, în timp ce entităţile numererecunoaşte cele mai noi nume de entităţi, în timp ce entităţile numeresunt foarte bine suportate de orice bro0ser/sunt foarte bine suportate de orice bro0ser/

/umele entită;ilor sunt/umele entită;ilor sunt case sensitive/case sensitive/





Crearea link(urilor 'n HTMLCrearea link(urilor 'n HTML

'ag-ul <ancoră= i atributul'ag-ul <ancoră= i atributul %ref%ref%'*L%'*L folosete tag-ulfolosete tag-ul +a &anc"or(+a &anc"or( pentru a crea un link sprepentru a crea un link spre

un alt documentun alt document>> N ancoră poate direcţiona spreN ancoră poate direcţiona spre un alt produsun alt produs o paginăo pagină +"&,+"&, oo

imagimaginine,e, un fişier sunetun fişier sunet,, un filmun film, etc/, etc/ 9intaa9intaa+a "ref?4url4'e#t to be displa@ed+Aa+a "ref?4url4'e#t to be displa@ed+Aa

3tributul3tributul "ref "ref este utilizat pentru a specifica adresa documentuluieste utilizat pentru a specifica adresa documentuluispre care se facespre care se face lin4lin4-ul-ul,, şi cuvintele care vor apărea între tag-ul deşi cuvintele care vor apărea între tag-ul de început si cel de sf5rşit vor fi afişate ca început si cel de sf5rşit vor fi afişate ca hperlin4/hperlin4/

3ceastă ancoră defineşte un lin4 spre3ceastă ancoră defineşte un lin4 spre '19chools'19chools

+a "ref?4"ttp$AAwww>wsc"ools>comA4Cisit WSc"ools,+a "ref?4"ttp$AAwww>wsc"ools>comA4Cisit WSc"ools,+Aa+Aa

3fişarea se va face de către bro0ser în felul următor3fişarea se va face de către bro0ser în felul următorAisit '19choolsLAisit '19choolsL



Dtributul 'argetJu acest atribut poţi defini locul în care fişierul spre care se face lin4 va fi deschis/ !emplul demai jos va deschide un document într-o fereastră nouă a bro0ser-ului

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools</a></a>

Tag-ul Anchor şi atributul Name

+tri!utul name e"te utili,at pentru a "e identi%ica o ancoră- C.nd %olo"eşti numeleancorei poţi crea un link cu "alt direct la o "ecţiune "peci%icată din pagină$ 'm loc "ă%olo"eşti !ara de "croll pentru a de%ila p.nă la "ecţiunea căutată-

/intaxa pentru denumirea unei ancore:0a name12la!el23Text to !e di"played04a3 +tri!utul name denumeşte ancora- +ce"ta poate %i orice text$ ca de exemplu:0a name12tip"235"e%ul Tip" /ection04a3/e poate "e"i,a că numele ancorei nu e"te a%işat 'ntr(un mod "pecial-6entru a crea link direct la "ecţiunea )tip"* adăugaţi caracterul 7 şi numele ancorei la"%.rşitul 58L(ului$ ca 'n exemplu:0a 9re%129ttp:44-;"c9ool"-com49tml<link"-a"p7tip"23 =ump to t9e 5"e%ul Tip"/ection04a35n 9yperlink "pre /ecţiunea 5"e%ul Tip" %ără a mai %olo"i %işierul 29tml<link"-a"p2 #aarăta aşa:

0a 9re%127tip"23=ump to t9e 5"e%ul Tip" /ection04a3



ExempluExemplu


7p87p87a href>?PJH?89ee also Jhapter H/7*a87a href>?PJH?89ee also Jhapter H/7*a87*p87*p8

7hG8Jhapter :7*hG87hG8Jhapter :7*hG87p8his chapter eplains ba bla bla7*p87p8his chapter eplains ba bla bla7*p8

7hG8Jhapter G7*hG87hG8Jhapter G7*hG87p8his chapter eplains ba bla bla7*p87p8his chapter eplains ba bla bla7*p8

7hG8Jhapter 17*hG87hG8Jhapter 17*hG87p8his chapter eplains ba bla bla7*p87p8his chapter eplains ba bla bla7*p8

7hG87a name>?JH?8Jhapter7hG87a name>?JH?8JhapterH7*a87*hG8H7*a87*hG8

7p8his chapter eplains ba bla bla7*p87p8his chapter eplains ba bla bla7*p87*bod87*bod87*html87*html8

9ee also Jhapter H/9ee also Jhapter H/)"apter E)"apter E

his chapter eplains ba blahis chapter eplains ba bla

blabla

)"apter F)"apter F

his chapter eplains ba blahis chapter eplains ba blablabla

)"apter )"apter

his chapter eplains ba blahis chapter eplains ba bla

blabla)"apter G)"apter G

his chapter eplains ba blahis chapter eplains ba blablabla



C9enareC9enare HTMLHTML#olosind cadre (chenare) se pot#olosind cadre (chenare) se pot

afişa mai multe documenteafişa mai multe documente

+"&+"& în aceeaşi fereastră a în aceeaşi fereastră abro0ser-ului/ #iecarebro0ser-ului/ #iecaredocument +"& se numeştedocument +"& se numeştecadru şi fiecare cadru estecadru şi fiecare cadru esteindependent unul faţă deindependent unul faţă decelălalt/celălalt/

=ezavantaje=ezavantaje

- %ealizatorul paginii- %ealizatorul paginii 00ebeb trebuie să ţină cont de maitrebuie să ţină cont de maimulte documente +"&multe documente +"&

!ste mai dificil să listezi la!ste mai dificil să listezi laimprimantă întreaga pagină/imprimantă întreaga pagină/

''ag-ulag-ul 0rameset0rameset=efineşte modul în care se divide=efineşte modul în care se divide

fereastra în chenare/fereastra în chenare/#iecare frameset defineşte un număr#iecare frameset defineşte un numărde rînduri şi un număr dede rînduri şi un număr decoloane/coloane/

3ceste valori indică cantitatea de3ceste valori indică cantitatea despaţiu de pe ecran ocupată despaţiu de pe ecran ocupată defiecare r5nd şi coloană/fiecare r5nd şi coloană/

''ag-ulag-ul 0rame0rame

=efineşte ce document=efineşte ce document +"&+"& se punese pune în fiecare chenar/ în fiecare chenar/

H#emplu$H#emplu$7frameset cols>?GT,UT?87frameset cols>?GT,UT?87frame src>?frameVa/htm?87frame src>?frameVa/htm?87frame src>?frameVb/htm?87frame src>?frameVb/htm?8

7*frameset87*frameset8

/ot/otăă$$ &ăţimea unui chenar poate fi&ăţimea unui chenar poate fieprimată şi în pielieprimată şi în pieli (cols>?G@@,@@?)/(cols>?G@@,@@?)/



ExempluExemplu

7html87html8

7frameset7framesetcols>?GT,@T,GT?cols>?GT,@T,GT?88

7frame7framesrc>?frameVa/htm?8src>?frameVa/htm?8 7frame7frame

src>?frameVb/htm?8src>?frameVb/htm?8 7frame7frame

src>?frameVc/htm?8src>?frameVc/htm?8

7*frameset87*frameset8

7*html87*html8



+ce"t exemplu demon"trea,ă cum "ă 'mparţi pagina 'n trei +ce"t exemplu demon"trea,ă cum "ă 'mparţi pagina 'n trei

c9enare "tructurate pe linii şi coloane-c9enare "tructurate pe linii şi coloane-

7html87html8

7frameset7framesetro0s>?@T,@T?8ro0s>?@T,@T?8

7frame src>?frameVa/htm?87frame src>?frameVa/htm?8 7frameset7frameset

cols>?GT,UT?8cols>?GT,UT?8 7frame src>?frameVb/htm?87frame src>?frameVb/htm?8 7frame src>?frameVc/htm?87frame src>?frameVc/htm?8

7*frameset87*frameset8 7*frameset87*frameset8

7*html87*html8



Navigarea între chenareNavigarea între chenare +ce"t exemplu arată cum "ă na#igaţi printre c9enare- C9enarul de na#igare conţine o +ce"t exemplu arată cum "ă na#igaţi printre c9enare- C9enarul de na#igare conţine o

li"tă de link(uri cu al doilea c9enar ca tintă- &işierul cu numele )li"tă de link(uri cu al doilea c9enar ca tintă- &işierul cu numele )try9tml<content"-9tm2try9tml<content"-9tm2

conţine trei link(uri-conţine trei link(uri- Codul "ur"ă al ace"tor link(uri e"te:Codul "ur"ă al ace"tor link(uri e"te:

0a 9re% 12%rame<a-9tm2 target 12"9o%rame23&rame a04a30!r30a 9re% 12%rame<a-9tm2 target 12"9o%rame23&rame a04a30!r3

0a 9re% 12%rame<!-9tm2 target 12"9o%rame23&rame !04a30!r30a 9re% 12%rame<!-9tm2 target 12"9o%rame23&rame !04a30!r3

0a 9re% 12%rame<c-9tm2 target 12"9o%rame23&rame c04a30a 9re% 12%rame<c-9tm2 target 12"9o%rame23&rame c04a3

+l doilea c9enar #a arăta documentul "pre care "e %ace link- +l doilea c9enar #a arăta documentul "pre care "e %ace link-09tml3

0%rame"et col"12>?@$A23

0%rame"rc12try9tml<content"-9tm230%rame "rc12%rame<a-9tm2

name12"9o%rame23

04%rame"et3

049tml3



Ta!eleTa!ele HTMLHTML

'abe'abelele

ababeelelele sunt definite cule sunt definite cutag-ultag-ul 7table8/7table8/ $n$ntabel este împărţit întabel este împărţit în

r5nduri (cu tag-ulr5nduri (cu tag-ul 7tr87tr8)şi fiecare r5nd în)şi fiecare r5nd încelule ce conţin date(cucelule ce conţin date(cutag-ultag-ul 7td87td8)/ N astfel)/ N astfelde celulă poate conţinede celulă poate conţine

tet, imagini, liste,tet, imagini, liste,paragrafe, form-uri,paragrafe, form-uri,tabele, rigle orizontale,tabele, rigle orizontale,etc/etc/

7table border>?:?87table border>?:?87tr87tr8

7td8ro0 :, cell :7*td87td8ro0 :, cell :7*td87td8ro0 :, cell G7*td87td8ro0 :, cell G7*td8

7*tr8 7tr8 7td8ro0 G,7*tr8 7tr8 7td8ro0 G,cell :7*td8 7td8ro0 G,cell :7*td8 7td8ro0 G,cell G7*td8cell G7*td8

7*tr87*tr87*table87*table8

$n astfel de tabel va arăta$n astfel de tabel va arăta



Atributul Border

acă nu e"te "peci%icat atri!utul!order$ ta!elul #a %i a%işat %ărămargine- C.teodată ace"t lucru e"te

util dar uneori #rem ca marginile "ă%ie #i,i!ile-6entru a a%işa un ta!el cu !ordură$"e poate %olo"i atri!utul !order :0ta!le !order12>230tr3

0td38o >$ cell >04td30td38o >$ cell ?04td304tr304ta!le3

Capete de tabel

/unt de%inite cu tag(ul 0t93-0ta!le !order12>230tr30t93Heading04t93

0t93+not9er Heading04t9304tr30tr30td3ro >$ cell >04td30td3ro >$ cell ?04td304tr3

0tr30td3ro ?$ cell >04td30td3ro ?$ cell ?04td304tr304ta!le3



%'*L%'*L permite definireapermite definirea

listelor ordonate saulistelor ordonate sauneordonate>neordonate>

H#H#eemplempleListă neordonată foloseteListă neordonată folosete

tag-ultag-ul +ul+ul

+ul+ul+li)offee+Ali+li)offee+Ali+li*ilk+Ali+li*ilk+Ali +Aul+Aul Listă ordonatăListă ordonată folosefolosetete

tagAul +oltagAul +ol

+ol+ol+li)offee+Ali+li)offee+Ali+li*ilk+Ali+li*ilk+Ali+Aol+Aol

Li"te HTML



DefinireaDefinirea ListListelor elor

=efinirea unei liste nu este o=efinirea unei liste nu este olistă de itemi/ !ste o listă delistă de itemi/ !ste o listă determeni şi eplicaţii aletermeni şi eplicaţii aleacestora/acestora/

=efiniţia listet începe cu tag-=efiniţia listet începe cu tag-

ulul 7dl8/7dl8/ #iecare termen#iecare termendefinit începe cu tag-uldefinit începe cu tag-ul 7dt8/7dt8/#iecare eplicaţie a termenilor#iecare eplicaţie a termenilor

începe cu tag-ul începe cu tag-ul 7dd8/7dd8/ 7dl87dl8 7dt8Joffee7*dt87dt8Joffee7*dt8

7dd8lac4 hot drin47*dd87dd8lac4 hot drin47*dd87dt8"il47*dt87dt8"il47*dt8

7dd8'hite cold drin47*dd87dd8'hite cold drin47*dd8 7*7*dldl88

3şa apare în bro0ser3şa apare în bro0serJoffeeJoffee

W lac4 hot drin4lac4 hot drin4"il4"il4

W 'hite cold drin4'hite cold drin4 Bn interiorul tag-uluiBn interiorul tag-ului 7dd87dd8

se pot defini paragrafe, liniise pot defini paragrafe, liniide la capăt, imagini, lin4-de la capăt, imagini, lin4-uri, alte liste,uri, alte liste, etc/etc/



FormeForme şi intrri înşi intrri în !T"L!T"L

0orm0ormee N formă este o zonă careN formă este o zonă care

conţine elemente formă/conţine elemente formă/ !lementele formă permit!lementele formă permit

utilizatorului să introducăutilizatorului să introducă

informaţii (cum ar fi tete,informaţii (cum ar fi tete,meniuri, butoane radio,meniuri, butoane radio,casuţe de verificarecasuţe de verificare(chec4boes), etc/(chec4boes), etc/)) într-o într-oformăformă//

N formă este definită cuN formă este definită cutag-ultag-ul 7form8/7form8/

7form87form87input87input87input87input87*form87*form8

IntrăriIntrări

Jea mai utilizată tag-formă esteJea mai utilizată tag-formă estetag-ultag-ul 7input87input8/ ipul datei/ ipul dateiintroduse este specificat de tipulintroduse este specificat de tipulatributului/ Aom eplica cele maiatributului/ Aom eplica cele maiutilizate tipuri de date/utilizate tipuri de date/

).mpuri).mpuri 'e#t'e#t

9unt utilizate pentru a introduce9unt utilizate pentru a introducetete, numere într-o formă/tete, numere într-o formă/7form87form8

#irst name#irst name 7input tpe>?tet?7input tpe>?tet?name>?firstname?8 7br8name>?firstname?8 7br8

&ast name 7input tpe>?tet?&ast name 7input tpe>?tet?name>?lastname?8name>?lastname?8

7*form87*form8

Lungimea implicită a unui c.mp text e"te de ?@ caractere

ButoaneButoane RadioRadio )ăsu;e de verificare)ăsu;e de verificare &c"eckbo#es(&c"eckbo#es(



ButoaneButoane RadioRadio 9unt folosite c5nd doreşti9unt folosite c5nd doreşti

ca utilizatorul să selectezeca utilizatorul să selectezeo opţiune dintr-un număro opţiune dintr-un numărlimitat de opţiuni/limitat de opţiuni/

7form87form87input tpe>?radio?7input tpe>?radio?

name>?se?name>?se?value>?male?8"ale 7br8value>?male?8"ale 7br8

7input tpe>?radio?7input tpe>?radio?

name>?se?name>?se?value>?female?8 #emalevalue>?female?8 #emale7*form87*form8

)ăsu;e de verificare)ăsu;e de verificare &c"eckbo#es(&c"eckbo#es( 9unt utilizate c5nd doreşti ca utilizatorul9unt utilizate c5nd doreşti ca utilizatorul

să selecteze una sau mai multe opţiunisă selecteze una sau mai multe opţiunidintr-un număr limitat de opţiuni/dintr-un număr limitat de opţiuni/

7form87form8I have a bi4e 7input tpe>?chec4bo?I have a bi4e 7input tpe>?chec4bo?

name>?vehicle? value>?i4e? *8 7br *8name>?vehicle? value>?i4e? *8 7br *8I have a car 7input tpe>?chec4bo?I have a car 7input tpe>?chec4bo?

name>?vehicle? value>?Jar? *8 7br *8name>?vehicle? value>?Jar? *8 7br *8I have an airplane 7inputI have an airplane 7input

tpe>?chec4bo? name>?vehicle?tpe>?chec4bo? name>?vehicle?value>?3irplane? *8value>?3irplane? *8

7*form87*form8



).mpuri Password).mpuri Password


7form action>??87form action>??8$sername$sername7input tpe>?tet?7input tpe>?tet?

name>?user?8name>?user?87br87br8.ass0ord.ass0ord7input tpe>?pass0ord?7input tpe>?pass0ord?

name>?pass0ord?8name>?pass0ord?87*form87*form87*bod87*bod87*html87*html8

!fect la bro0ser!fect la bro0ser

=e reţinut că atunci=e reţinut că atuncic5nd scrieţi caracterec5nd scrieţi caractere în c5mpul pass0ord, în c5mpul pass0ord,bro0ser-ul afişeazăbro0ser-ul afişeazăasteriscuri sau bulletsasteriscuri sau bullets

în loc de caractere/ în loc de caractere/



Li"te a"cun"eLi"te a"cun"e


7form action>??87form action>??87select name>?cars?87select name>?cars?87option7option

value>?volvo?8Aolvo7*option8value>?volvo?8Aolvo7*option87option7optionvalue>?saab?89aab7*option8value>?saab?89aab7*option8

7option value>?fiat?7option value>?fiat?selected>?selected?8#iat7*optionselected>?selected?8#iat7*option88

7option7optionvalue>?audi?83udi7*option8value>?audi?83udi7*option8

7*select87*select87*form87*form8




+ce"t %orm trimite un e(mail la +ce"t %orm trimite un e(mail la W;/c9ool"W;/c9ool"

7html87html87bod87bod87form action>?"3I&NsomeoneX01schools/com?7form action>?"3I&NsomeoneX01schools/com?

method>?post? enctpe>?tet*plain?8method>?post? enctpe>?tet*plain?8

7h18his form sends an e-mail to7h18his form sends an e-mail to'19chools/7*h18'19chools/7*h18

6ame7br86ame7br87input tpe>?tet? name>?name?7input tpe>?tet? name>?name?

value>?ourname? size>?G@?8value>?ourname? size>?G@?87br87br8"ail7br8"ail7br87input tpe>?tet? name>?mail?7input tpe>?tet? name>?mail?value>?ourmail? size>?G@?8value>?ourmail? size>?G@?87br87br8Jomment7br8Jomment7br87input tpe>?tet? name>?comment?7input tpe>?tet? name>?comment?value>?ourcomment? size>?H@?8value>?ourcomment? size>?H@?8

7br87br87br87br87input tpe>?submit? value>?9end?87input tpe>?submit? value>?9end?87input tpe>?reset? value>?%eset?87input tpe>?reset? value>?%eset?8

7*form87*form87*bod87*bod87*html87*html8



In"erarea imaginilor In"erarea imaginilor 'n HTML 'n HTML

'ag-ul img i atributul'ag-ul img i atributul SrcSrc BBn +"&, imagn +"&, imaginile sunt definite cuinile sunt definite cu

tag-ultag-ul 7img87img8, care nu se închide/, care nu se închide/ .entru a afişa o imagine în pagină,.entru a afişa o imagine în pagină,

trebuie să utiizaţi atributultrebuie să utiizaţi atributul srcsrc ((sourcesource))// Aaloarea atributului srcAaloarea atributului srcesteeste $%&$%&-ul-ul imagimaginiiinii pe care doriţipe care doriţi

s-o afişaţi în paginăs-o afişaţi în pagină// 9inaa pentru definirea imaginii9inaa pentru definirea imaginii 7img src>?url?87img src>?url?8// $%&$%&-ul arată-ul arată

localocaţţiiaa unde imaginea esteunde imaginea estestocatăstocată// N imagine numităN imagine numită ?boat/gif? loca?boat/gif? localizalizattăă î în directorn directorulul ?images??images? didinn?000/01schools/com??000/01schools/com? areare $%&$%&-ul-ul

http**000/01schools/com*imagehttp**000/01schools/com*images*boat/gif/s*boat/gif/ =aca imaginea este=aca imaginea estestocată pe dis4, trebuie specificatăstocată pe dis4, trebuie specificatăcalea spre aceasta/calea spre aceasta/

DtributulDtributul DltDlt 3triburul3triburul altalt este utilizat pentru aeste utilizat pentru a

defini un tet alternativ uneidefini un tet alternativ uneiimagini/ Aaloarea atributului altimagini/ Aaloarea atributului alteste un tet definit de autoruleste un tet definit de autorulpaginiipaginii

7img src>?boat/gif? alt>?ig7img src>?boat/gif? alt>?ig

oat?8oat?8 3tributul3tributul ?alt??alt? spune cititorului cespune cititorului ce

lipseşte din pagină dacă bro0ser-lipseşte din pagină dacă bro0ser-ul nu poate încărca imaginea/ul nu poate încărca imaginea/ ro0ser-ul va afişa în acest cazro0ser-ul va afişa în acest caztetul în locul imaginii/ !ste otetul în locul imaginii/ !ste obună practică să includeţibună practică să includeţiatributul alt pentru fiecareatributul alt pentru fiecare

imagine din pagină, astfel înc5timagine din pagină, astfel înc5tcei ce folosesc doar un bro0sercei ce folosesc doar un bro0sertet-onl să poată folosi paginatet-onl să poată folosi paginacreată de voi/creată de voi/



Imagine ca linkImagine ca link

7html87html8 7bod87bod8 7p87p8 ;ou can also use an image;ou can also use an image

as a lin4as a lin4 7a href>?lastpage/htm?87a href>?lastpage/htm?8 7img border>?@?7img border>?@?

src>?buttonnet/gif?src>?buttonnet/gif?0idth>?F? height>?1Y?80idth>?F? height>?1Y?8

7*a87*a8 7*p87*p8

7*bod87*bod8 7*html87*html8



Imagine %olo"ită ca !ackground

7html87html8 7bod7bod

bac4ground>?bac4ground/jpg?8bac4ground>?bac4ground/jpg?8

7h18&oo4 3 bac4ground imageL7h18&oo4 3 bac4ground imageL7*h187*h18

7p8oth gif and jpg files can be7p8oth gif and jpg files can beused as +"& bac4grounds/7*p8used as +"& bac4grounds/7*p8

7p8If the image is smaller than7p8If the image is smaller thanthe page, the image 0ill repeatthe page, the image 0ill repeatitself/7*p8itself/7*p8

7*bod87*bod8 7*html87*html8



Background( &undalBackground( &undal

0undal0undal ag-ulag-ul 7bod87bod8 are douăare două

atribute prin care se poateatribute prin care se poatespecifica fundalul unei paginispecifica fundalul unei pagini//3cesta poate fi color sau o3cesta poate fi color sau oimagine/imagine/

BgcolorBgcolor 3tributul3tributul bgcolor atribubgcolor atribuiiee oo

culoare specificată pentruculoare specificată pentrufundalul paginii/ Aaloareafundalul paginii/ Aaloareaacestui atribut poate fi unacestui atribut poate fi unnumărnumăr heaheazzecimal,ecimal, o valoareo valoare%<,%<, sau un nume desau un nume de

ccuuloloaarree 7bod bgcolor>?P@@@@@@?87bod bgcolor>?P@@@@@@?87bod bgcolor>?rgb(@,@,@)?87bod bgcolor>?rgb(@,@,@)?87bod bgcolor>?blac4?87bod bgcolor>?blac4?8

BackgroundBackground 3tributul3tributul bac4groundbac4ground specificăspecifică

o imagine pentru fundalulo imagine pentru fundalulunei paginiunei pagini +"&/+"&/ AaloareaAaloareaacestuiacestui atributatribut esteeste $%&$%&-ul-ulimagimaginii pe care daoreşti s-oinii pe care daoreşti s-o

utilizeziutilizezi// =acă imaginea este=acă imaginea esteprea mică ea se va repetaprea mică ea se va repetap5nă c5nd se umple întreagap5nă c5nd se umple întreagafereastră afereastră a bro0serbro0ser-ului-ului//

7bod7bodbac4ground>?clouds/gif?8bac4ground>?clouds/gif?87bod7bod

bac4ground>?http**000/01sbac4ground>?http**000/01schools/com*clouds/gif?8chools/com*clouds/gif?8$%&$%&-ul-ul poate fi relativpoate fi relativ ((ccaa î înn

prima linie de mai susprima linie de mai sus)) sausau absolut (absolut (ccaa î înn a doua linie dina doua linie dineemplul de mai suseemplul de mai sus)/)/



Dten;ieDten;ie$$ =acă doreşti să foloseşti o imagine=acă doreşti să foloseşti o imagine

ca bac4ground, ar trebui să te g5ndeşti laca bac4ground, ar trebui să te g5ndeşti laurmătoareleurmătoarele

ac4ground-ul imagine va mări timpul deac4ground-ul imagine va mări timpul de încărcare prea multZ încărcare prea multZ ac4ground-ul imagine va arăta bine cuac4ground-ul imagine va arăta bine cu

alte imagini în paginăalte imagini în paginăZZ ac4ground-ul imagine va arăta bine cu unac4ground-ul imagine va arăta bine cu un

tet colorat pe paginătet colorat pe paginăZZ ac4ground-ul imagine va arăta bine cîndac4ground-ul imagine va arăta bine cînd

imaginea se repetă pe paginăimaginea se repetă pe paginăZZ ac4ground-ul imagine nu va distrageac4ground-ul imagine nu va distrage

atenţia de la tetatenţia de la tetZZ



Culori HTMLCulori HTML

/umele culorilor standard$%'*L validea!ă E9 nume pentru culori$ aua1 black1 blue1 fuc"sia1gra@1 green1 lime1 maroon1 nav@1 olive1 purple1 red1 silver1 teal1w"ite1 and @ellow>



erularea textului 'n controaleerularea textului 'n controale

marueemarueeJontrolul marMuee este un marcaj de efect ce determină animareaJontrolul marMuee este un marcaj de efect ce determină animarea

unui tet într-o pagină 'eb/unui tet într-o pagină 'eb/!emplu!emplu 7marMuee8 7h:8 et la plimbare7*h:8 7*marMuee87marMuee8 7h:8 et la plimbare7*h:8 7*marMuee8.entru a controla direc.entru a controla direcţţia de deplasare se foloseia de deplasare se foloseşştete atributul directionatributul direction

care poate lua următoarele valori left (implicit- de la st5nga lacare poate lua următoarele valori left (implicit- de la st5nga la

dreapa), right, do0n, up/dreapa), right, do0n, up/3tributul behavior are trei valori3tributul behavior are trei valori9croll (implicit- tetul se plimbă pe ecran, se pierde la st5nga şi9croll (implicit- tetul se plimbă pe ecran, se pierde la st5nga şi

reapare în dreapta)reapare în dreapta)9lide- tetul se opreşte la marginea opusă apariţiei9lide- tetul se opreşte la marginea opusă apariţiei3lternate- se deplasează alternativ, st5nga3lternate- se deplasează alternativ, st5nga,, dreapta, fără a părăsidreapta, fără a părăsi

ecranulecranul!emplu!emplu 7marMuee behavior>slide direction>right8 7h:8 tet plimbaret7marMuee behavior>slide direction>right8 7h:8 tet plimbaret

7*h:8 7*marMuee87*h:8 7*marMuee8



C//C//

CCa"cadinga"cading ##tyletyle ##9eet"9eet" J99 - limbaj prin care se poate realizaJ99 - limbaj prin care se poate realizaformatarea tetului, aplicarea unui stil asupraformatarea tetului, aplicarea unui stil asupraunor elemente de acelaunor elemente de acelaşi tip (paragraf, imagine,şi tip (paragraf, imagine,tabel, etc/)tabel, etc/)

9tilurile definesc9tilurile definesc "ow to displa@"ow to displa@ elementeleelementele+"&+"& 9tilurile sunt în mod normal stocate în9tilurile sunt în mod normal stocate în St@leSt@le

S"eetsS"eets 9tilurile sunt adăugate în9tilurile sunt adăugate în +"&+"& pentru apentru a

re!olva o problemăre!olva o problemă H#ternal St@le S"eetsH#ternal St@le S"eets te poate salva de la ote poate salva de la ogrămadă de muncăgrămadă de muncă

!ternal 9tle 9heets!ternal 9tle 9heets sunt stocate în fişieresunt stocate în fişiere )SS)SS



/intaxa/intaxa C//C//

9intaa9intaa J99J99 este formată din trei părţieste formată din trei părţi unun selector,selector, oo proprproprieiettateate şi o valoareşi o valoare

selector [propert value\selector [propert value\99electorelectorulul eesste în mod normalte în mod normal elementul*tag-ulelementul*tag-ul +"&+"& pe carepe care

doreşti să-l defineştidoreşti să-l defineşti, prop, propririetetatea esteatea este atributatributulul oe careoe care

doreşti să-l schimbidoreşti să-l schimbi,, şi fiecare proprietate poate lua oşi fiecare proprietate poate lua ovaloare/ .roprietatea şi valoarea sunt separate prin (Q) şivaloare/ .roprietatea şi valoarea sunt separate prin (Q) şicuprinse între acoladecuprinse între acolade

bod [color blac4\bod [color blac4\/ote$/ote$ =acă valoarea este formată din mai multe cuvinte,=acă valoarea este formată din mai multe cuvinte,

atunci aceasta trebuie cuprinsă între ghilimeleatunci aceasta trebuie cuprinsă între ghilimele

p [font-famil ?sans serif?\p [font-famil ?sans serif?\=acă doreşti să specifici mai mult dec5t o proprietate, trebuie=acă doreşti să specifici mai mult dec5t o proprietate, trebuiesă separi fiecare proprietate prin (Q)/ !emplul următor unsă separi fiecare proprietate prin (Q)/ !emplul următor unparagraf cu tet centrat şi colorat roşuparagraf cu tet centrat şi colorat roşu

p [tet-aligncenterQcolorred\p [tet-aligncenterQcolorred\



EDEM6L5L > %işier extern -c""F:EDEM6L5L > %işier extern -c""F:

%ezultatul este un chenar de forma demai jos



EDEM6L5L ? %işier extern -c""FEDEM6L5L ? %işier extern -c""F

7html87html87head87head87lin4 rel>?stlesheet?7lin4 rel>?stlesheet?

tpe>?tet*css?tpe>?tet*css?href>?eG/css? *8href>?eG/css? *87*head87*head87bod87bod8

7h:8his is a header :7*h:87h:8his is a header :7*h:87hr *87hr *87p8;ou can see that the stle7p8;ou can see that the stlesheet formats the tet7*p8sheet formats the tet7*p87p87a7p87a

href>?http**000/01schools/comhref>?http**000/01schools/com??

target>?Vblan4?8his is atarget>?Vblan4?8his is alin47*a87*p8lin47*a87*p8


bod [bac4ground-color tan\bod [bac4ground-color tan\h: [colormaroonQ font-sizeG@pt\h: [colormaroonQ font-sizeG@pt\hr [colornav\hr [colornav\p [font-size::ptQ margin-left :p\p [font-size::ptQ margin-left :p\alin4 [colorgreen\alin4 [colorgreen\avisited [colorello0\avisited [colorello0\

ahover [colorblac4\ahover [colorblac4\aactive [colorblue\aactive [colorblue\

0iierul pagina>"tml0iierul e#F>css

Re!ultatul



EDEM6L5L ;: %oaie internăFEDEM6L5L ;: %oaie internăF

7html87html87head87head8

7stle tpe>?tet*css?87stle tpe>?tet*css?8bod [bac4ground-color ello0\bod [bac4ground-color ello0\h: [bac4ground-color P@@ff@@\h: [bac4ground-color P@@ff@@\hG [bac4ground-color transparent\hG [bac4ground-color transparent\

p [bac4ground-color rgb(G@,@,G)\p [bac4ground-color rgb(G@,@,G)\7*stle87*stle8

7*head87*head8

7bod87bod8

7h:8his is header :7*h:87h:8his is header :7*h:87hG8his is header G7*hG87hG8his is header G7*hG87p8his is a paragraph7*p87p8his is a paragraph7*p8


&egătura dintre +"& şi J99 se face prinelementul 9;&! care utilizează tag-urile7stle8 şi 7*stle8/ Jele două tag-uri vorfi aşezate între 7head8 şi 7*head8



EDEM6L5L G: %oaie internăFEDEM6L5L G: %oaie internăF

7html87html8

7head87head87stle tpe>?tet*css?87stle tpe>?tet*css?8h: [color P@@ff@@\h: [color P@@ff@@\hG [color Pdda@dd\hG [color Pdda@dd\

p [color rgb(@,@,G)\p [color rgb(@,@,G)\7*stle87*stle87*head87*head8

7bod87bod87h:8his is header :7*h:87h:8his is header :7*h:87hG8his is header G7*hG87hG8his is header G7*hG87p8his is a paragraph7*p87p8his is a paragraph7*p87*bod87*bod8

7*html87*html8



EDEM6L5L ( Li"teEDEM6L5L ( Li"te7html87html87head87head87stle tpe>?tet*css?87stle tpe>?tet*css?8

ol/decimal [list-stle-tpe decimal\ol/decimal [list-stle-tpe decimal\ol/lroman [list-stle-tpe lo0er-roman\ol/lroman [list-stle-tpe lo0er-roman\ol/uroman [list-stle-tpe upper-roman\ol/uroman [list-stle-tpe upper-roman\ol/lalpha [list-stle-tpe lo0er-alpha\ol/lalpha [list-stle-tpe lo0er-alpha\ol/ualpha [list-stle-tpe upper-alpha\ol/ualpha [list-stle-tpe upper-alpha\7*stle87*stle87*head87*head8

7bod87bod87ol class>?decimal?87ol class>?decimal?87li8Joffee7*li87li8Joffee7*li87li8ea7*li87li8ea7*li87li8Joca Jola7*li87li8Joca Jola7*li87*ol87*ol8

7ol class>?lroman?87ol class>?lroman?87li8Joffee7*li87li8Joffee7*li87li8ea7*li87li8ea7*li87li8Joca Jola7*li87li8Joca Jola7*li87*ol87*ol8

7ol class>?uroman?87ol class>?uroman?87li8Joffee7*li87li8Joffee7*li8

7li8ea7*li87li8ea7*li87li8Joca Jola7*li87li8Joca Jola7*li87*ol87*ol8

7ol class>?lalpha?87ol class>?lalpha?87li8Joffee7*li87li8Joffee7*li87li8ea7*li87li8ea7*li8

7li8Joca Jola7*li87li8Joca Jola7*li87*ol87*ol8

7ol class>?ualpha?87ol class>?ualpha?87li8Joffee7*li87li8Joffee7*li87li8ea7*li87li8ea7*li87li8Joca Jola7*li87li8Joca Jola7*li87*ol87*ol87*bod87*bod8

7*html87*html8



Exemplul ( Ta!eleExemplul ( Ta!ele7html87html87head87head87stle tpe>?tet*css?87stle tpe>?tet*css?8

table/onetable/one[[table-laout automatictable-laout automatic\\table/t0otable/t0o[[table-laout fiedtable-laout fied\\7*stle87*stle87*head87*head87bod87bod8

7table class>?one? border>?:? 0idth>?:@@T?87table class>?one? border>?:? 0idth>?:@@T?87tr87tr87td7td

0idth>?G@T?8:@@@@@@@@@@@@@@@@@@@@@@@0idth>?G@T?8:@@@@@@@@@@@@@@@@@@@@@@@@@@@7*td8@@@@7*td8

7td 0idth>?H@T?8:@@@@@@@7*td87td 0idth>?H@T?8:@@@@@@@7*td8

7td 0idth>?H@T?8:@@7*td87td 0idth>?H@T?8:@@7*td87*tr87*tr87*table87*table8

7table class>?t0o? border>?:? 0idth>?:@@T?87table class>?t0o? border>?:? 0idth>?:@@T?87tr87tr87td7td

0idth>?G@T?8:@@@@@@@@@@@@@@@@@@@@@@@0idth>?G@T?8:@@@@@@@@@@@@@@@@@@@@@@@@@@@7*td8@@@@7*td8

7td 0idth>?H@T?8:@@@@@@@7*td87td 0idth>?H@T?8:@@@@@@@7*td87td 0idth>?H@T?8:@@7*td87td 0idth>?H@T?8:@@7*td87*tr87*tr87*table87*table8


Documents

Crearea şi programarea paginilor WEB.ppt