Limbajul HTML

Limbajul HTML

Pag 1

Limbajul HTML

World Wide Web (WWW)

Serviciul World-Wide Web (W3 sau simpul Web) s-a nascut in martie 1 ! la initiativa lui Tim "erners-Lee care l-a propus ca sistem de comunicare de in#ormatii pentru comunitatea #i$icienilor de la %&'() *e#initia o#iciala pentru World-Wide Web este + Wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents) Sistemul este ba$at pe e,tinderea te-nicii hypertext (-.perte,t)la nivel de retele) /n document hypertext este un #isier normal de te,t care are insa particularitatea urmatoare + contine legaturi la alte parti ale documentului sau la alte documente. *escrierea unui document Web se #ace prin HyperText Markup Language (HTML) %ontinutul sau il constituie te,tul documentului impreuna cu diverse comen$i de #ormatare) Sistemul WWW utili$ea$a modelul client0server + un server WWW - este un program care rulea$a in permanenta pe un calculator (demonul http) si are sarcina de tratata cererile sosiste de la componenta client a sistemului care rulea$a pe alt calculator un client WWW (&,plorer1 (etscape1 Mosaic) - este un program care permite util$atorului transmisia de cereri catre un server WWW si vi$uali$area re$ultatului

Protocolul utili$at pentru comunicare intre client si server se numeste HTT! (HyperText Transmission !rotocol) "mportant # $u exista o sesiune permanenta intre client si server

Limba%ul HTML
%rearea unui document WWW sta la indemina oricui1 indi#erent daca are sau nu notiuni de administrare a unui server WWW) 2n scurt timp se prevede ca1 asa cum o adresa de e-mail este un lucru obisnuit pentru multa lume1 tot asa vor deveni ceva banal si -ome-page-urile1 documente HTML care o#era in#ormatii despre persoane1 institutii1 diverse grupuri1 etc) Tot ce trebuie sa se stie pentru a accesa aceste in#ormatii este /'L-ul respectiv) HTML nu este de #apt un limbaj de programare) Speci#icattile lui de#inesc un set de 3tag4-uri (comen$i) si regulile de scriere ale ascestora) 2ntr-un cuvint1 cu ajutorl limbajului HTML #ormatam un document pentru a putea #i accesat prin 2nternet) %u ajutorul HTML putem reali$a urmatoarele+ documente independente de plat#orma (sistemul de operare) legaturi la alte documente de pe 2nternet introducerea de imagini1 sunet si video interactivitate intre cititorul documentului si document

*ocumentele WWW sint de #apt te,te 5S%22 care contin di#erite elemente ale acestui limbaj de #ormatare (HTML)) *e regula documentele HTML au e,tensia .html1 dar si .htm in ca$ul serverelor WWW ce rulea$a pe MS-Windo6s) *ocumentele HTML pot #i create manual #olosind un editor de te,te 5S%22 (de e,emplu 3(otepad4 din Windo6s)1 poate #i convertit din alte #ormate #olosind diverse editoare HTML sau pot #i create dinamic de un server WWW sau de un script) /n document HTML lucrea$a e,trem de simplu) &l 3spune4 programului de navigare prin 2nternet pe care-l #olosim (bro6ser)1 prin intermediul 3tag4-urilor1 ce sa #aca cu te,tul1 imaginile1 sunetul1 sau celellate elemente cuprinse in document) Pag 7

Limbajul HTML Limbajul HTML este utili$at pentru a descrie structura documentului si re#erintele continute de acesta) Standardul actual acceptat pe plan mondial pentru HTML este versiunea 3)8) Se ba$ea$a pe concepte ale S9ML (Standard Generalized Markup Language) care este un standard 2S: #olosit pentru #ormatarea documentelor din cadrul publicatiilor tiparite sau electronice (on-line)) *eja e,ista numeroase e,tensii ale limbajului HTML promovate in special de catre diversii creatori de programe de navigare WWW (de e,) (etscape)1 in scopul cistigarii a cit mai multi utili$atori)

&intaxa limba%ului HTML

HTML nu tine cont de #orma originala a te,tului) (u contea$a cum arata te,tul cind este scris1 ci cum va arata pe ecran in #ata unui privitor) (u contea$a tab-urile1 spatiile multiple1 nu se tine cont de s#irsitul de linie1 etc) Pentru reali$area aspectului obtinut de regula cu ajutorul acestor caractere se #olosesc tag-uri) Toate tag-urile (comen$i) sint scrise intre parante$e ung-iulare+ ;nume-tag< 5ceste tag-uri sint de doua #eluri+ de inceput ;nume-tag< si de s#irsit ;0nume-tag< si au e#ect asupra obiectului descris intre ele (paragra# de te,t1 imagine1 etc)) *upa numele tag-ului de inceput mai pot #i scrise si o serie de atribute1 ast#el+ ;nume-tag =lista atribute><obiectul a#ectat de tag;0nume-tag< unde lista atribute? nume-atribut?4valoare-atribut4 =nume-atribut?4valoare-atribut4 @> *eci daca intr-un tag e,ista mai multe atribute1 acestea trebuie separate prin spatiu) :bs) [] semni#ica #aptul ca obiectul incadrat de parante$ele patrate poate lipsi) /neori valorile atributelor pot #i date si #ara 3 4 ) '('M!L)# ;2<Aceste text va fi afisat italic;02< ;"<*cest text va fi afisat ingrosat;0"< ;#ont #ace?5rial color?'ed<Scris rosu cu fontul Arial;0#ont<

&tructura unui document HTML

2ntreaga de$voltare a limbajului HTML s-a #acut in ideea cresterii calitatii #ara sacri#icarea simplitatii) Aiecare document HTML este structurat in doua parti+ antetul B 3-ead4 si continutul B 3bod.4) Structura unui document HTML arata ast#el+ ;-tml< ;-ead< ;bod.< ;0-tml< ;title<Titlul *ocumentului;0title< %ontinutul documentului ;0-ead< ;0bod.<

T*+-ul ,HTMLMarc-ea$a inceputul respectiv s#irsitul unui document HTML) 5cest tag poate include tag-urile ;H&5*< si ;":*C<)
Sintaxa: <HTML> documentul html </HTML>

T*+-ul ,H'*.2nclude antetul (-eader-ul) document HTML) 5cest tag poate include tag-urile ;T2TL&< si ;M&T5<) Pag 3

Limbajul HTML
Sintaxa: <HEAD> antetul documentului </HEAD>

T*+-ul ,T"TL'%uprinde titlul documentului)

Sintaxa: <TITLE> titlul documentului </TITLE>

T*+-ul ,M'T*%uprinde in#ormatia suplimentara despre acest document) *e e,emplu1 acest tag poate contine cuvintele c-eie pentru acest document1 deosebit de importante pentru #acili$area accesibilitatii acestuia pe 2nternet) Mai poate contine numele autorului documentului1 descrierea documentului HTML etc)
Sintaxa: <META NAME !nume! "#NTENT !continut!>

*tributele# $*M' / speci#ica numele in#ormatiei suplimentare 01$T'$T / de#ineste continutul in#ormatiei suplimentare '('M!L)# ;M&T5 name?DAacult. Histor.D content?D 2n 1 1-1 71 t-e Section o# %omputer Science (Aacult. o# Mat-ematics) became t-e Aacult. o# %omputer Science) T-is #acult. -as - #or t-e beginning - t6o sections+ %omputer Science (long duration education1 E or F .ears) and T-e %ollege o# 2n#ormation Tec-nolog. (s-ort duration education1 3 .ears)) Since 1 E1 t-e %ollege o# "irotics1 #ounded previousl. (as a part o# anot-er #acult.)1 -as been integrated into t-e Aacult. o# %omputer Science)D<;M&T5 name?DGe.6ordsD content?D &ducation2 Aacult.1 %omputer Science1 SectionsD<;M&T5 name?Daut-orD content?DWeb5dmin4< Precum observam1 acest tag nu are corespondent un tag de inc-idere ;0M&T5<1 el #iind inc-is normal prin parante$a ung-iulara) T*+-ul ,31.4*e#ineste atributele 3corpului4 documentului)
Sintaxa: <$#D% [$A"&'(#)ND !ima*ine+,undal!] [$'"#L#( culoa-e+,undal] [LIN& culoa-e+lin/] [ALIN& culoa-e+alin/] [0LIN& culoa-e+1lin/] > continutul documentului </$#D%> [TE.T culoa-e+text]

*tributele# 3*05+61)$. - de#ineste o imagine utili$ata ca #undalH &,+ "5%I9':/(*?4#ond)jpg4 2maginea 3#ond)jpg4 utili$ata ca #undalH 3+01L16 - de#ineste culoarea #ondului documentului &,+ "9%:L:'?JAA8888 #ondul paginii va #i de culoare rosu pur (culoare scrisa in -e,a)H "9%:L:'?Cello6 #ondul paginii va #i de culoare galben pur (culoare scrisa in clar)H %ulori in -e,a+ J"A8888 rosu inc-is J88AAAA albastru desc-is JAA8888 rosu J8888"A albastru inc-is J"A"A88 galben inc-is J8888AA albastru JAAAA88 galben J"A88"A magenta inc-is J88"A88 verde inc-is JAA88AA magenta J88AA88 verde J!8!8!8 gri inc-is J88"A"A albastru mediu J%8%8%8 gri Pag E

Limbajul HTML J888888 negru JAAAAAA alb T'(T - indica culoarea te,tului normal &,+ T&KT?JAA8888 te,tul pe pagina va #i de culoare rosu pur (culoare scrisa in -e,a)H T&KT?Cello6 te,tul pe pagina va #i de culoare galben pur (culoare scrisa in clar)H L"$5 - indica culoarea te,tului corespun$ator unei -.perlegaturi nevi$itate &,+ L2(I?JAA8888 te,tul corespun$ator unei -.perlegaturi nevi$itate va #i de culoare rosu pur (culoare scrisa in -e,a)H L2(I?Cello6 te,tul de -.perlegatura nevi$itata va #i de culoare galben pur (culoare scrisa in clar)H *L"$5 - indica culoarea te,tului corespun$ator unei -.perlegaturi active (in curs de procesare) &,+ 5L2(I?JAA8888 te,tul corespun$ator unei -.perlegaturi active va #i de culoare rosu pur (culoare scrisa in -e,a)H 5L2(I?Cello6 te,tul de -.perlegatura activa va #i de culoare galben pur (culoare scrisa in clar)H 7L"$5 - indica culoarea te,tului corespun$ator unei -.perlegaturi vi$itate &,+ LL2(I?JAA8888 te,tul corespun$ator unei -.perlegaturi vi$itate va #i de culoare rosu pur (culoare scrisa in -e,a)H LL2(I?Cello6 te,tul corespun$ator unei -.perlegaturi vi$itate va #i de culoare galben pur (culoare scrisa in clar)H '('M!L)# ;bod. bgcolor?J###### te,t?J888888 linG?blue alinG?red vlinG?J%8%8%8< 5cest tag va de#ini #undalul paginii de culoare alba1 scrisul pe pagina de culoare neagra1 te,tul de legatura albastru1 te,tul de legatura activa rosu si te,tul pentru legatura vi$itata de culoare gri)

*ntete (headings)
Tag-urile ,Hn5ntetele sunt utili$ate pentru ierar-i$area di#eritelor sectiuni de te,t) HTML de#ineste sase nivele pentru antete) La a#isare1 antetele nu sunt numerotate1 diversele navigatoare a#isind te,tul dintre tagurile ;Hn< si ;0Hn< (unde n?1@M) ast#el incit sa iasa in evidenta (centrat1 marit1 subliniat1 marit1 etc))) &le nu trebuie indentate in document1 indentarile #iind ignorate de navigatoare) 2n ordine1 antetul de nivel 11 descris de tag-urile ;H1< si ;0H1< este de dimensiunea cea mai mare1 aceasta sca$ind proportional pina la antetul de nivel M1 descris de tag-urile ;HM< si ;0HM<)
Sintaxa: <Hn> antetul de ni1el n </Hn> n 23

'('M!L)# ;H1<2nceput de document;0H1< continutul documentului ;H7<Titlu de capitol;0H7< continutul capitolului ;H3<Titlu de sectiune;0H3< continutul sectiunii ;HE<Titlu de subsectiune;0HE< continutul subsectiunii Pag F

Limbajul HTML ;HF<Titlu de paragra#;0HF< continutul paragra#ului ;HM<Titlu de subparagra#;0HM< continutul subparagra#ului

8ormatarea textului
Aormatarea te,tului se reali$ea$a e,trem de simplu1 #olosind citeva tag-uri si atributele lor)

6uperea rindurior
T*+-ul ,! (avigatoarele (bro6ser-ele)1 cind intilnesc un tag ;P< incep un nou rind1 lasind citeva spatii verticale (rinduri) libere intre paragra#ul care tocmai s-a terminat si cel care tocmai incepe) Tag-ul de s#irsit ;0P< este optional+ nu se intimpla nimic daca nu este pus)
Sintaxa: <4 [ALI'N le,t5cente-5-i*ht] 6a-a*-a, [</4>]

*tributele# *L"+$ - de#ineste alinierea paragra#ului 5L29(?center Paragra# aliniat pe centruH 5L29(?le#t Paragra# aliniat la stingaH 5L29(?rig-t Paragra# aliniat la dreapta) '('M!L)# ;H7<5ntetul unui capitol;0H7< ;P<5cesta este te,tul primului paragra# ;P<5ici incepe al doilea paragra#) *esi nu este obligatoriu ca un paragra# sa inceapa la o linie noua intr-un document HTML1 acest lucru ajuta la intelegerea documentului;0P< ;P<Te,tul celui de-al treilea paragra#);0P< T*+-ul ,365cest tag (3"raGe4) #ortea$a terminarea rindului) %ind navigatorul (bro6ser-ul) intilneste acest tag1 a#isea$a te,tul care urmea$a incepind de la marginea din stinga1 indi#erent unde anume este aceasta margine)
Sintaxa: <$(>

Texte fara ruperi de rind

T*+-ul ,$136Speci#ica un te,t in care nu sint permise ruperilie de rind)
Sintaxa: <N#$(> text </N#$(>

Linii ori9ontale
T*+-ul ,H6Tagul ;H'< are ca e#ect crearea unei linii ori$ontale pe pagina) Liniile ori$ontale pot #i utili$ate pentru separarea di#eritelor sectiuni ale unei pagini Web sau pentru punerea in evidenta a unor portiuni de document cum ar #i liste1 meniuri1 in#ormatii de contact)
Sintaxa: <H( [7IDTH latime] [SI8E *-o9ime] [ALI'N le,t5cente-5-i*ht["#L#( culoa-e]>

*tributele# W".TH - indica latimea liniei ori$ontale in pi,eli) Pag M

Limbajul HTML &,+ W2*TH?M38 &":' - de#ineste inaltimea liniei ori$ontale in pi,eli) &,+ S2N&?F *L"+$ - de#ineste alinierea liniei ori$ontale 5L29(?le#t 5linierea la stinga a liniei ori$ontaleH 5L29(?center 5linierea pe centru a liniei ori$ontaleH 5L29(?rig-t 5linierea la dreapta a liniei ori$ontaleH 01L16 - de#ineste culoarea liniei ori$ontale) &,+ %:L:'?red '('M!L)# ;H'< T-e Aacult. o# %omputer Science B 2asi

0entrarea textului
T*+-ul ,0'$T'6*e#ineste centrarea unei portiuni de document (te,t1 tabele1 imagini)1 #ata de dimensiunile curente ale #erestrei)
Sintaxa: <"ENTE(> text </"ENTE(>

'('M!L'# ;%&(T&'<5cest te,t va #i centrat;0%&(T&'< ;%&(T&'<5mble rinduri ;"'< vor #i centrate;0%&(T&'< ;%&(T&'<;2M9 S'%?4imagine)gi#4<;0%&(T&'<

8onturi
T*+-ul ,81$T*e#ineste aspectul te,tului cuprins intre tag-urile de inceput si cel de s#irsit)
Sintaxa: <:#NT ["#L#( culoa-e] [:A"E ,ont] SI8E dime9iune> text </:#NT>

*tributele# 01L16 B speci#ica culoarea te,tului &,+ %:L:'?JAA8888 %:L:'?Cello6 8*0' B de#ineste tipul de caractere &,+ A5%&?5rial

te,tul va #i de culoare rosu pur (culoare scrisa in -e,a)H te,tul va #i de culoare galben pur (culoare scrisa in clar)H tipul de caracter #olosit (#ont)H

:bs) %ele mai #olosite #onturi pentru document HTML sint 5rial1 Times (e6 'oman1 Lerdana1 Helvetica1 %ourier1 etc) &":' - de#ineste dimensiunea te,tuluiH &,+ S2N&?7 :bs) *imensiunile varia$a intre 1 si O si pot #i pre#i,ate cu P sau - ca$ in care speci#ica distanta dintre dimensiunea #ontului curent si #ontul de ba$a '('M!L)# ;#ont #ace?5rial si$e?7 color?red< Te,tul va #i a#isat pe monitor de dimensiunea 18 puncte cu caractere 5rial de culoare rosie) ;0#ont< T*+-ul ,3*&'81$TPag O

Limbajul HTML Permite sc-imbarea dimensiunii #ontului de ba$a)

Sintaxa: <$ASE:#NT SI8E dimen9iune> text </$ASE:#NT>

*tributele# &":' - de#ineste dimensiunea #ontului de ba$a :bs) *imensiunile #onturilor de ba$a varia$a si ele intre 1 si O dar nu pot #i pre#i,ate cu P sau -

&tiluri
T*+-ul ,3*e#ineste te,t ingrosat (bold))
Sintaxa: <$> text </$>

T*+-ul ,"*e#ineste te,t inclinat (italic))

Sintaxa: <I> text </I>

T*+-ul ,)*e#ineste te,t subliniat (underline))

Sintaxa: <)> text </)>

Tagul ;A:(T< poate include printre alte tag-uri si tag-urile ;"<1 ;2< si ;/<)

Texte preformatate
T*+-ul ,!6'*e#ineste te,t pre#ormatat) Majoritatea documentelor HTML contin te,t #ormat cu tag-uri) 5sta inseamna ca te,tul respectiv este a#ectat de restrictiile HTML1 in sensul ca toate spatiile suplimentare1 taburi1 etc sa #ie ignorate de catre navigator) 5#isarea te,telor1 e,act asa cum sint ele se poate #ace cu ajutorul acestui tag1 ;P'&<1 care ne permite c-iar a#isarea unei gra#ici rudimentare obtinuta cu caractere 5S%22)
Sintaxa: <4(E> text </4(E>

'('M!L)# ;P'&< ,//, /_^_\ ( o o ) -------------oOOO--(_)--OOOo-----------------

.oooO ( ) Oooo. ---------------\ (----( )-----------------\_) ) / (_/ ;0P'&<

"nserarea de comentarii si citate

T*+-ul ,;-

Pag !

Limbajul HTML Permite inserarea de adnotari in documente HTML) %omentariile sunt ignorate de navigator si se pot e,tinde pe mai multe rinduri)
Sintaxa: <; text+comenta-iu>

'('M!L)# ;Q 5ici este un comentariu pe mai multe rinduri) Se introduce te,tul comentariului si la s#irsitul acestuia se scrie marca de s#irsit de tag < T*+-ul ,3L105<)1T'*e#ineste un citat) Punerea in evidenta a citatelor se #ace de regula prin indentare di#erita #ata de restul te,tului din documentul HTML)
Sintaxa <$L#"&<)#TE> textul citatului <$L#"&<)#TE>

'('M!L)# ;"L:%IR/:T&< %e e val ca valul trece ;"L:%IR/:T&<

6eferinte (legaturi)
: caracteristica majora a HTML-ului o repre$inta abilitatea lui de legare a unei portiuni de te,t de alte documente1 de a purta cu el re#erinte) 5cest lucru este reali$at cu -.perlinG-uri) "ro6serul a#isea$a te,tele care #ac legaturi sau re#erinte cu alte culori si0sau subliniate pentru a evidentia #aptul ca sint legaturi -.perte,t) Pentru a naviga printr-un document Web1 care deci este un -.perte,t1 utili$atorul activea$a de regula o legatura (-.perlinG) cu ajutorul tastaturii sau a mouse-ului) Puterea WWW consta in #aptul ca aceste re#erinte pot lega alte documente in acelasi director1 oriunde in alta parte pe acelasi server WWW sau oriunde in alta parte pe alte servere de tip WWW sau oarecare locali$ate oriunde in lume) Aiecare re#erinta (hyperlink) intr-un document HTML este de#inita de doua componente+ - elementul de activare1 de tip te,t sau de tip gra#ic1 prin intermediul caruia (cu ajutorul mouse-ului sau a tastaturii) se activea$a legaturaH - elementul /'L care descrie adresa documentului adresat si eventual a punctului de intrare in document (ancora)1 dupa ce -.perlinG-ul este activat) :rice document (pagina Web1 imagine1 te,t1 sunet1 video) din 2nternet este unic adresabil de un /'L ()ni#orm 6essource Locator)) %onceptul de /'L suporta de asemenea si alte tipuri de protocoale+ gop-er1 #tp1 telnet) /'L-ul poate #i absolut sau relativ /'L-ul relativ este utili$at pentru adresarea unor #isiere de pe acelasi server pe care se gaseste documentul HTML curent) *e asemenea /'L-urile relative permit unui bro6ser WWW sa accese$e direct documente HTML din #isiere de pe acelasi sistem1 #ara sa #ie necesara utili$area vreunui server) Structura unui /'L relativ este urmatoarea+
[cale -elati1a],i9ie-[=anco-a]

'('M!L'# doc7Jancora7 ))0doc3 subdir0docEJancoraE /'L-ul absolut descrie calea completa spre un anumit document) Structura unui /'L absolut este urmatoarea+
6-otocol://ma9ina[:6o-t][/cale/,i9ie-][=anco-a][>li9ta de 6a-amet-i]

Protocolul poate #i + #ile1 #tp1 -ttp1 telnet1 gop-er1 6ais1 ne6s '('M!L'# -ttp+00666)in#oiasi)ro0inde,)-tml telnet+00sigma)tuiasi)ro #tp+00#tp)dntis)ro0pub gop-er+00gop-er)uaic)ro Pag

Limbajul HTML 6ais+006ais)librar.)tuiasi)ro T*+-ul ,*Marcarea te,tului activ (sau a imaginii active) in documentul HTML initial (de la care porneste legatura) se #ace cu ajutorul acestiu tag)
Sintaxa: <A H(E: !)(L+document!> text acti1a-e hi6e-le*atu-a </A>

*tributele# H6'8 H.perte,t 'e#erence1 este util$at pentru speci#icarea /'L-ului documentului tinta) &ste de #apt modul de locali$are a documentului care va #i adus la selectarea te,tului activ) '('M!L)# ;5 H'&A?4locali$area #isierului care trebuie incarcat4<Te,tul activ care selectat determina incarcarea ;05<

Legaturi interne si intre sectiuni

&,ista posibilitatea de a reali$a o legatura intre un anumit punct al unui document si un alt anumit punct al aceluiasi sau al altui document) 5cest lucru se reali$ea$a prin crearea unei ancore in locul din document unde dorim sa ne conduca legatura si apoi in reali$area unei legaturi care va indica atit documentul re#erit cit si paragra#ul (sau sectiunea de document) la care #acem re#erire) %rearea unei ancore se #ace in aproape acelasi #el ca si crearea unei legaturi1 utili$ind tag-ul ;5< numai ca de aceasta data ii este asociat un alt atribut+ $*M' 5tributul va avea ca valoare un anumit cuvint (sau grup de cuvinte) care vor #i #olosite pentru a #ace re#erinta la aceasta anumita sectiune) Spre deosebire de legaturi1 ancorele nu sint a#isate di#erit #ata de restul documentului in documentul tinta) '('M!L)# ;5 (5M&?4top4<Top o# page;05< H.perlinG-ul cu numele 3top4 apare in alta po$itie in cadrul aceluiasi document) '('M!L)# 'eturn to t-e ;5 H'&A?4Jtop4<top o# page;05< "n mod analog se pot face si linkuri cu nume declarate in alte fisiere '('M!L)# Sa presupunem ca dorim o legatura dintr-o po$itie po$1 in documentul doc= la o po$itie po$7 in documentul doc># 2n doc7 vom avea in po$itia po$7+ ;5 (5M&?4po$74<2nput in t-e second document;05< 2n doc1 pe po$itia po$1 vom avea -.perlinG-ul+ 9o to t-e ;5 H'&A?4doc7Jpo$74<input in t-e second document ;05<

Legaturi locale
%ea mai simpla legatura locala se reali$ea$a preci$ind calea relativa a documentului (un )6L relativ) Selectarea unei legaturi ca cea pre$entata mai jos determina serverul sa caute documentul solicitat in acelasi #older ca si documentul in care a inceput legatura) Aisierul local care va #i incarcat Pag 18 Te,tul care poate #i selectat

Limbajul HTML

,* H6'8?@pagina html@-!rima pagina,A*Tag de inceput Tag de s#irsit

%aile relative indica calea care trebuie urmata pentru a naviga la documentul tinta1 pornind de la documentul pointer (de start)) Speci#icarea cailor relative in legaturi se va #ace ca in /(2K1 indi#erent de sistemul pe care se lucrea$a) 5sta inseamna ca numele de directoare sau #oldere sint separate de slas--uri (0) si re#erirea la directorul de mai jos se #ace cu doua puncte ()))) 'e#erirea relativa a documentelor locale se #ace con#orm tabelului urmator+ 0ale H'&A?4doc)-tml4 H'&A?4dir0doc)-tml4 H'&A?4dir0subdir0doc)-tml4 H'&A?4))0doc)-tml H'&A?4))0))0subdir0doc)-tml4 &emnificatie doc)-tml se gaseste in directorul curent doc)-tml este locali$at in #olderul (directorul) dir doc)-tml se a#la in directorul dir1 subdirectorul subdir doc)-tml se gaseste intr-un director a#lat cu un nivel mai sus decit directorul curent doc)-tml se gaseste intr-un director a#lat cu doua nivele mai sus in directorul dir &emnificatie doc)-tml este locali$at pe discul %+1 in directorul 0documente (*:S)

Legaturile locale pot utili$a si referirea absoluta ()6L-uri absolute) 0ale H'&A?40c+0documente0doc)-tm4

Legaturile relative locali$ea$a deci un document tinta speci#icind po$itia acestuia (calea relativa) in raport cu documentul pointer (de la care porneste legatura)) 'e#erintele absolute locali$ea$a documentele speci#icind directorul de cel mai inalt nivel si toata calea pina la document) Legaturile absolute incep intotdeauna cu un 3slas-4 (0) urmat de succesiunea directoarelor pina la documentul la care se #ace re#erinta) :ri de cite ori este posibil trebuie #olosite re#erintele relative deoarece cele absolute nu sint portabile) Speci#icarea relativa a locali$arii documentelor va permite mentinerea usoara si mutarea documentelor HTML de pe un sistem pe altul (sau dintr-un loc in altul c-iar pe acelasi sistem) #ara modi#icari majore in surse)

Legaturi indepartate
2nserarea intr-un document HTML a unei legaturi indepartate se #ace asemanator in ca$ul re#erintelor la documente locale) Tag-ul de inceput este ;5< si cel de s#irsit ;05<) Te,tul dintre taguri va #i a#isat di#erit #ata de restul documentului pentru a arata ca este selectabil) Legatura -.perte,t (H'&A) va contine insa /'L-ul tintei1 de #orma Legatura care se va stabili Protocol (ume sistem ga$da (Metoda)

,* H6'8?@http#AABBB infoiasi roA@-8aculty of 0omputer

Tag de inceput

&cience - Home !age,A*Te,t care poate #i selectat Tag de s#irsit Pag 11

Limbajul HTML *lte exemple# ;5 H'&A?Dtelnet+00sigma)tuiasi)roD< telnet Tec-nical /niversit. ;05< ;5 H'&A?D#tp+00#tp)dntis)roD<#tp *(T 2asi;05< ;5 H'&A?Dgop-er+00gop-er)uaic)roD<gop-er /niversit. D5l)2)%u$aD 2asi;05< Pentru legarea directa la un document indepartat se utili$ea$a un /'L absolut de #orma+

http#AABBB infoiasi roAfcsAenAnoB html

Protocol (ume sistem ga$da %ale (ume #isier

"magini2 sunete2 animatie in documentele HTML

Se spune ca o imagine valorea$a cit o mie de cuvinte) 2ntr-adevar1 imaginile imbogatesc paginile Web atit sub aspect decorativ1 cit si prin sporirea nivelului de in#ormatii) : conditie pentru ca imaginile sa poata #i parte componenta a unei pagini Web1 este ca acestea sa #ie salvate intr-unul din #ormatele 92A sau SP9) *ar cum putem insera o imagine in documentul HTML T T*+-ul ,"M+5cest tag inserea$a o imagine (#ormat 92A sau SP9)) 5cest tag (ca si tag-ul M&T5) nu are corespondent un tag de inc-idere ;02M9<1 el #iind inc-is normal prin parante$a ung-iulara)
Sintaxa: <IM' 9-c !)(L+ima*ine! [lo?9-c !)(L+ima*ine+9im6la!] [alt !text+alte-nati1!] [?idth latime+ ima*ine] [hei*ht inaltime+ima*ine] [@o-de- *-o9ime+chena-]>

*tributele# &60 - speci#ica calea catre imagine1 respectiv #isierul care contine imaginea (/'L-ul imaginii)H &,+ S'%?42n#o-color)gi#4 L1W&60 - speci#ica calea si #isierul care contine o imagine care va #i incarcata inainte de a se incarca imaginea speci#icata in atributul S'%) 5ceasta este de regula aceeasi imagine1 dar de o re$olutie mai slaba sau c-iar aceeasi imagine1 dar in tonuri de gri sau numai in alb-negruH &,+ L:WS'%?42n#o-simplu)gi#4 *LT - te,tul care va #i a#isat de navigatoarele care nu lucrea$a-n modul gra#icH &,+ 5LT?4Aacultatea de 2n#ormatica4 W".TH B de#ineste latimea imaginii in pi,eli) *aca imaginea este de alta latime1 ea va #i scalata sa incapa in spatiul re$ervatH &,+ W2*TH?788 H'"+HT B de#ineste inaltimea imaginii in pi,eli) *aca imaginea este de alta inaltime1 ea va #i scalata sa incapa in spatiul re$ervatH &,+ H&29HT?F8 316.'6 B speci#ica dimensiunea in pi,eli a unui c-enar in jurul imaginiiH &,+ ":'*&'?7 '('M!L)# ;img src?4#oto3)gi#4 lo6src?4#oto3b)gi#4 6idt-?388 -eig-t?FM border?7< 5cest tag va avea ca e#ect a#isarea intai a imaginii #oto3b)gi# si apoi a imaginii #oto3)gi#1 intr-un dreptung-i cu dimensiunile de 388,FM pi,eli si cu un c-enar de 7 pi,eli)

Liste
Listele pot #i nenumerotate1 ordonate sau descriptive Pag 17

Limbajul HTML

Liste nenumerotate
Sintaxa: <)L at-i@ute > <LI at-i@ute> element li9ta </LI> [ <LI at-i@ute> element li9ta </LI> AA ] </)L>

T*+-ul ,)LTagu-ul ;/L< de#ineste o lista nenumerotata)

Sintaxa: <)L [T%4E di9/5ci-cle59Bua-e] > li9ta </)L>

5tributul T4!' permite inserarea de buline de tip disc1 cerc sau patrat-umplut in #ata elementelor liste cu e,ceptia celor care au atributul TCP& in linia de de#initie a elementului (tag-ul ;L2<)) Laloarea implicita este disG) *aca atributul TCP& lipseste1 bulina inserata in #ata va #i un disG T*+-ul ,L"*e#ineste un element de lista nenumerotate)
Sintaxa:<LI [T%4E di9/5ci-cle59Bua-e]> element+li9ta <LI>

5tributul T4!' are aceeasi semni#icatie ca la tag-ul ;/L< insa a#ectea$a doar elementul listei de#init de tag-ul ;L2< curent) '('M!L'# ;/L< ;L2<primul element are bulina disc ;0L2< ;L2<al doilea element are bulina disc ;0L2< ;L2<al treilea element are bulina disc;0L2< ;0/L< 2nterpretarea de catre navigator este urmatoarea+ primul element are bulina disc al doilea element are bulina disc al treilea element are bulina disc ;/L TCP&?sUuare< ;L2<primul element are bulina patrat;0L2< ;L2 TCP&?circle<al doilea element are bulina cerc;0L2< ;L2<al treilea element are bulina patrat;0L2< ;0/L< 2nterpretarea de catre navigator este urmatoarea+ primul element are bulina patrat o al doilea element are bulina cerc al treilea element are bulina patrat

Liste ordonate
Sintaxa: <#L at-i@ute > <LI> element li9ta </LI> [ <LI> element li9ta </LI> ] </#L>

Pag 13

Limbajul HTML T*+-ul ,1L*e#ineste o lista numerotata)

Sintaxa: <#L [T%4E A5a525I STA(T numa-]> li9ta </#L>

*tributele# T4!' / permite generarea de tipuri diverse de liste numerotate TCP&?5 B elementele vor #i notate cu litere majuscule (51"1%1@) TCP&?a B elementele vor #i notate cu litere mici (a1b1c1@) TCP&?1 B elementele vor #i numerotate cu ci#re arabe (117131@) TCP&?2 B elementele vor #i numerotate cu ci#re romane (212212221@) &T*6T B de#ineste valoarea de start (litera sau numar) T*+-ul ,L"*e#ineste un element de lista ordonata
Sintaxa:<LI> element+li9ta <LI>

'('M!L'# ;:L< ;L2<primul element;0L2< ;L2<al doilea element;0L2< ;L2<al treilea element;0L2< ;0:L< 2nterpretarea de catre navigator + 1) primul element 7) al doilea element 3) al treilea element ;:L ST5'T?18< ;L2<primul element;0L2< ;L2<al doilea element ;0L2< ;L2<al treilea element;0L2< ;0:L< 2nterpretarea de catre navigator + 18) primul element 11) al doilea element 17) al treilea element ;:L TCP&?a ST5'T?c< ;L2<primul element ? c ;0L2< ;L2<al doilea element ? d ;0L2< ;L2<al treilea element ? e;0L2< ;0:L< 2nterpretarea de catre navigator + a) primul element ? c b) al doilea element ? d c) al treilea element ? e

Liste descriptive
&lementele unor ast#el de liste sunt aliniate cu ajutorul caracterelor de tabulare)
Sintaxa: <DL at-i@ute > <DT> antet 2</LI>

Pag 1E

Limbajul HTML
[ <DD>9u@antet 22 </LI> <DD>9u@antet 2C </LI>

CCCCCCCCCD
[ <DT> antet C </LI> <DD>9u@antet C2 </LI> <DD>9u@antet CC </LI> AAA] </DL>

T*+-ul ,.L*e#ineste o lista descriptiva)

Sintaxa: <DL> li9ta </DL>

T*+-ul ,.T*e#ineste un antet)

Sintaxa: <DT> antet </DT>

T*+-ul ,..*e#ineste un subantet)

Sintaxa: <DD> li9ta </DD>

'('M!L)# ;*L< ;*T< antet 1;0*T< ;**<subantet 11 ;0**< ;**<subantet 17 ;0**< ;**<subantet 17 ;0**< ;*T<antet 7;0*T< ;**<subantet 71 ;0**< ;0*L< 'e$ultatul interpretarii+ antet 1 subantet 11 subantet 17 subantet 17 antet 7 subantet 71

"mbricarea Listelor
Listele pot contine in interiorul lor alte liste+ '('M!L)# ;/L< ;L2<o sublista ordonata;0L2< ;:L< ;L2<primul element ;0L2< ;L2<al doilea element ;0L2< ;L2<al treilea element ;0L2< ;0:L< ;L2<o sublista descriptiva;0L2< ;*L< ;*T< antet 1;0*T< ;**<subantet 11 ;0**< Pag 1F

Limbajul HTML ;**<subantet 17 ;0**< ;**<subantet 17 ;0**< ;*T<antet 7;0*T< ;**<subantet 71 ;0**< ;0*L< ;0/L< 'e$ultatul interpretarii este urmatorul o sublista ordonata 1) primul element 7) al doilea element 3) al treilea element o sublista descriptiva antet 1 subantet 11 subantet 17 subantet 17 antet 7 subantet 71

Tabele
Tabelele repre$inta in momentul actual una dintre cele mai bune modalitati de aranjare a te,tului1 imaginilor si altor elemente care compun documentul HTML) T*+-ul ,T*3L'/n tabel incepe cu tagul ;T5"L&< si se termina cu tagul ;0T5"L&<1 intre ele #iind continutul tabelului propriu-$is care poate avea un numar oarecare de rinduri si un numar oarecare de coloane)
Sintaxa: <TA$LE [@o-de- *-o9ime+chena-] [cell96acin* 96atiuDcelule] [cell6addin* 96atiu continutE>ma-*ine+celula] [?idth latime+ta@el]> ta@elul </TA$LE>

*tributele# 316.'6 B de#ineste c-enarul tabelului1 e,primat in pi,eli &,+ ":'*&'?7 0'LL&!*0"$+ B speci#ica spatiul dintre celulele tabelului1 e,primat in pi,eliH &,+ %&LLSP5%2(9?7 0'LL!*.."$+ Bspeci#ica spatiul dintre marginile celulelor si continutul lor1 e,primat in pi,eliH &,+ %&LLP5**2(9?7 W".TH - speci#ica latimea tabelului pe pagina1 in pi,eli sau in procente #ata de latimea totala a ecranului monitorului1 e,primata in pi,eli) &,+ W2*TH?F88 W2*TH?OFV Tabelele sint speci#icate in HTML rind cu rind1 #iecare rind continind de#initii pentru #iecare din celulele care il #ormea$a) Pentru a de#ini un tabel se incepe prin a de#ini primul rind din partea de sus1 celula cu celula1 apoi se de#ineste al doilea rind1 celula cu celula etc) %oloanele sint calculate automat pe ba$a numarului de celule care #ormea$a rindurile) *linierea datelor din tabel Pentru estetica continutului tabelului e,ista citeva atribute care permit alinierea datelor in interiorul celulelor1 atit pe ori$ontala1 cit si pe verticala) 2mplicit datele din celulele cap de tabel sint centrate atit ori$ontal cit si vertical1 iar in#ormatiile din celulele de date sint centrate vertical1 dar aliniate ori$ontal la stinga) Pag 1M

Limbajul HTML Tabele simple Tabelele simple sunt tabelele in care celulele unei linii au aceeasi inaltime iar celulele unei coloane au aceeasi latime) T*+-ul ,T63Table 'o64 de#ineste o linie din tabel)
Sintaxa: <T(> continut+linie </T(>

T*+-ul ,TH3Table Head4 speci#ica o celula de tip antet

Sintaxa: <TH> antet </TH>

T*+-ul ,T.3Table *ata4 de#ineste o celula normala din tabel)

Sintaxa: <TD [ALI'N le,t5cente-5-i*ht] [0ALI'N le,t5cente-5-i*ht]> continut+celula </TD>

*tributele# *L"+$ / sepci#ica alinierea ori$ontala 5L29(?le#t &ste utili$at pentru alinierea ori$ontala la stingaH 5L29(?center &ste utili$at pentru alinierea ori$ontala pe centruH 5L29(?rig-t &ste utili$at pentru alinierea ori$ontala la dreaptaH 7*L"+$ / speci#ica alinierea verticala L5L29(?top &ste utili$at pentru alinierea verticala in partea de sus a celuleiH L5L29(?middle &ste utili$at pentru alinierea verticala in partea de mijloc a celuleiH L5L29(?bottom &ste utili$at pentru alinierea verticala in partea de jos a celulei) '('M!L)# Se considera un tabel cu latimea de F88 pi,eli si cu un c-enar de 1 pi,el1 cu 7 linii si 3 coloane+ 2magine 1 Te,t normal 1 2magine 7

Te,t normal 7Te,t normal 3

Text normal 4

;T5"L& 6idt-?F88 border?1< ;T'< ;T*< Imagine1 inserata cu a!ut"rul tag#ului $IMG% astfel& ;2M9 src?4imagine1)gi#4 border?8 alt?4 te,tul ce numeste prima imagine4< ;0T*< ;T*<Te,t normal 1;0T*< ;T*< Imagine' inserata cu a!ut"rul tag#ului $IMG% astfel& ;2M9 src?4imagine7)gi#4 border?8 alt?4te,tul ce numeste imaginea a doua4< ;0T*< ;0T'< In acest m"ment am scris prima linie din tabel linie care c"ntine ( c"l"ane respectiv ( celule )table data) *umplute) fiecare cu ceea ce ne#am pr"pus respectiv imagini si text. +recem acum sa scriem ce#a de#a d"ua linie a tabelului. ;T'< Pag 1O

Limbajul HTML Acest text il d"rim aliniat catre dreapta si la baza celului tabelului deci in tag#ul $+,% v"m intr"duce atributele align-right si valign-b"tt"m astfel& ;T* align?rig-t valign?bottom<Te,t normal 7;0T*< ;T*<Te,t normal 3;0T*< ;T*< Spre de"sebire de celelalte texte din tabel care v"r fi afisate in m"dul *default) .implicit/ nefiind supuse vreunei f"rmataris speciale de data aceasta cel de#al patrulea text il d"rin cu caractere Arial de dimensiunea 10 puncte si de cul"are verde& ;A:(T #ace?5rial si$e?P7 color?green<Te,t normal E;0A:(T< ;0T*< ;0T'< Incheind si ce#a de#a d"ua linie a tabelului prin tag#ul $1+2% am terminat de fapt de scris tabelul in ansamblul sau. 3u ne mai ramine decit sa *c"mandam) navigat"rului sa deseneze pe m"nit"r tabelul prin tag#ul $1table%& ;0T5"L&< Pentru a avea un e,emplu clar de tabel1 din e,emplul de mai sus vom scoate comentariile marcate prin culoarea albastra1 si vom scrie corect tabelul si continutul sau ast#el+ ;T5"L& 6idt-?F88 border?1< ;T'< ;T*<;2M9 src?4imagine1)gi#4 border?8 alt?4 te,tul ce numeste prima imagine4<;0T*< ;T*<Te,t normal 1;0T*< ;T*<;2M9 src?4imagine7)gi#4 border?8 alt?4 te,tul ce numeste imaginea a doua4<;0T*< ;0T'< ;T'< ;T* align?rig-t valign?bottom<Te,t normal 7;0T*< ;T*<Te,t normal 3;0T*< ;T*<;A:(T #ace?5rial si$e?P7 color?green<Te,t normal E;0A:(T<;0T*< ;0T'< ;0T5"L&< Tabele cu celule extinse 2n scopul obtinerii unor tabele mai comple, organi$ate1 celulele pot #i e,tinse atit ori$ontal (pe mai multe coloane)1 cit si vertical (pe mai multe rinduri)) &,tinderea se obtine cu ajutorul atributelor 01L&!*$ si 61W&!*$ utili$ate in tag-ul ;T*<) %elulele se e,tind intotdeauna in jos si0sau spre dreapta) *eci pentru a crea o celula care se e,tinde peste citeva coloane se va utili$a atributul 01L&!*$ in conjunctie cu tag-ul de inceput a celei mai din stinga celule din rind1 iar pentru a obtine e,tinderea unei celule peste mai multe rinduri se va utili$a atributul 61W&!*$ in relatie cu tag-ul de inceput a celei mai de sus celule de pe coloana)) Lalorile atributelor repre$inta numarul de coloane1 respectiv rinduri peste care se doreste a #i e,tinsa celula) 2n continuare1 un e,emplu in care se utili$ea$a celule e,tinse+ '('M!L) de tabel e,tins cu o celula e,tinsa pe mai multe linii + te,t 1 2magine1 Te,t 7 imagine7

;T5"L& 6idt-?E88 border?7< ;T'< ;T*<te,t 1;0T*< ;T* ro6span?3<imagine7;0T*< ;0T'< ;T'<;T*<imagine1;0T*<;0T'< ;T' <;T*<te,t 7;0T*<;0T'< ;0T5"L&< Pag 1!

Limbajul HTML '('M!L) de tabel e,tins cu o celula e,tinsa pe mai multe coloane + te,t 1 te,t 7 imagine 1 imagine 7 te,t 3

;T5"L& 6idt-?M88 border?3< ;T'< ;T*<te,t 1;0T*< ;T*< imagine 1;0T*< ;0T'< ;T'<;T* colspan?7 align?center <imagine 7;0T*<;0T'< ;T' < ;T*<te,t 7;0T*< ;T*<te,t 3;0T*< ;0T'< ;0T5"L&< Tabele cu antete '('M!L) de tabel cu antete pe rinduri + *$T'T = %elula 11 %elula 71 *$T'T > %elula 17 %elula 77 *$T'T E %elula 13 %elula 73

;T5"L& border 6idt-?E88< ;T'< ;TH< 5(T&T 1 ;0TH< ;TH< 5(T&T 7 ;0TH< ;TH< 5(T&T 3 ;0TH< ;0T'< ;T'< ;T* align?center< %elula 11 ;0T*< ;T* align?center< %elula 17 ;0T*< ;T* align?center< %elula 13 ;0T*< ;0T'< ;T'< ;T* align?center< %elula 71 ;0T*< ;T* align?center< %elula 77 ;0T*< ;T* align?center< %elula 73 ;0T*< ;0T'< ;0T5"L&< '('M!L) de tabel cu antete pe coloane + *$T'T = *$T'T > *$T'T E ;T5"L& border 6idt-?MF8< ;T'< ;TH<5(T&T 1 ;0TH< ;T* align?rig-t< %elula 11 ;0T*< ;T* align?rig-t< %elula 17 ;0T*< ;0T'< ;T'< ;TH< 5(T&T 7 ;0TH< ;T* align?rig-t< %elula 71 ;0T*< Pag 1 %elula 11 %elula 71 %elula 31 %elula 17 %elula 77 %elula 37

Limbajul HTML ;T* align?rig-t< %elula 77 ;0T*< ;0T'< ;T'< ;TH< 5(T&T 3 ;0TH< ;T* align?rig-t< %elula 31 ;0T*< ;T* align?rig-t< %elula 37 ;0T*< ;0T'< ;0T5"L&< '('M!L) de tabel cu antete pe rinduri 1 antetele #iind e,tinde pe cite 7 coloane + *$T'T = %elula 11 %elula 71 %elula 17 %elula 77 *$T'T > %elula 13 %elula 73 %elula 1E %elula 7E

;T5"L& border < ;T'< ;TH colspan?7< 5(T&T 1 ;0TH< ;TH colspan?7< 5(T&T 7 ;0TH< ;0T'< ;T'< ;T* align?rig-t< %elula 11 ;0T*< ;T* align?rig-t< %elula 17 ;0T*< ;T* align?rig-t< %elula 13;0T*< ;T* align?rig-t< %elula 1E ;0T*< ;0T'< ;T'< ;T* align?rig-t< %elula 71 ;0T*< ;T* align?rig-t< %elula 77 ;0T*< ;T* align?rig-t< %elula 73 ;0T*< ;T* align?rig-t< %elula 7E ;0T*< ;0T'< ;0T5"L&< Tabele imbricate Tabelele pot #i incluse unul in altul prin simpla inserare a tag-ului ;T5"L&< in interiorul unei intrari ;T*< '('M!L)# %elula 1 %elula 7 %elula 3 %elula 3a %elula 3c %elula 3b %elula 3d

;T5"L& border < ;T'< ;T*< %elula 1 ;0T*< ;T*< %elula 7 ;0T*< ;T*< %elula 3 ;Q /rmea$a un tabel inclus in %elula 3< ;T5"L& border < ;T'< ;T*< %elula 3a ;0T*< ;T*< %elula 3b ;0T*< ;0T'< ;T'< ;T*< %elula 3c ;0T*< ;T*< %elula 3d ;0T*< Pag 78

Limbajul HTML ;0T'< ;0T5"L&< ;Q S#irsitul tabelului imbricat< ;0T*< ;0T'< ;0T5"L&<

8rame-uri (cadre)
*ocumentele HTML care contin cadre1 vi$uali$ate cu navigatoare potrivite1 #ac posibila impartirea #erestrei active a navigatorului (bro6ser-ului) in mai multe #erestre mai mici numite cadre sau #rame-uri( frames)) Lucrul cu #rame-uri permite reali$area unor documente HTML mai so#isticate1 care pot #acilita navigarea prin spatiul WWW) 2n pre$ent e,ista numeroase navigatoare care recunosc aceste e,tensii (cele mai populare #iind1 desigur1 (etscape si 2nternet &,plorer)) Aolosirea cadrelor permite navigarea simultana prin mai multe documente HTML in cadrul aceluiasi bro6ser) 5cest lucru se putea #ace si #ara #rame-uri prin desc-iderea succesiva a mai multor #erestre a unui bro6ser) Totusi puterea e,tensiilor (etscape in ceea ce priveste #rame-urile consta in #aptul ca permit activarea unor -.perlinG-uri intr-un #rame pentru incarcarea altor #rame-uri din cadrul aceleiasi #erestre a navigatorului) %ea mai buna cale pentru a invata si intelege tag-urile pentru cadre este de a le #olosi intr-un e,emplu) Aigura de mai jos indica structura de #rame-uri pe care dorim sa o cream) %adru de sus %adru Stinga jos

%adru *reapta jos

*upa cum se observa1 vom #olosi #rame-uri pentru a imparti1 pe directia ori$ontala1 #ereastra bro6serului in doua jumatati1 in continuare1 vom divide jumatatea de jos in s#ertul din stinga-jos si s#ertul din dreapta-jos) %odul HTML pre$entat in continuare produce prima injumatatire a #erestrei+ '('M!L)# ;HTML< ;H&5*< ;T2TL&<%adre;0T2TL&< ;0H&5*< ;A'5M&S&T ':WS?7881W< ;A'5M& S'%?4,)-tml4 (5M&?4sus4< ;A'5M& S'%?4.$)-tml4 (5M&?4jos4< ;0A'5M&S&T< ;0HTML< *aca anali$am putin codul de mai sus1 putem observa ca tagurile ;":*C< si ;0":*C< au #ost inlocuite de ;A'5M&S&T< si ;0A'5M&S&T<) 5ceste taguri de#inesc documentul de mai sus ca un document de tip #rame) *e asemenea observam #olosirea tagului ;A'5M&< si1 in plus1 #aptul ca nu apare nici un alt#el de tag cunoscut pina acum) 5st#el1 daca dorim sa vi$uali$am acest document cu un bro6ser care nu recunoaste stilul #rame1 vom obtine o #ereastra complet alba) 2n momentul in care este incarcat un document de tip #rame1 navigatorul intii imparte #ereastra in #rame-uri si apoi documentele speci#icate in ;A'5M&< vor #i incarcate si a#isate in interiorul cadrelor)

Pag 71

Limbajul HTML T*+-ul ,86*M'&'T5cest tag reali$ea$a declaratia unui impartiri in #rame-uri a #erestrei navigatorului (bro6ser-ului)) &l trebuie sa contina #ie o declaratie de cadre ori$ontale1 #ie o declaratie de cadre verticale)
Sintaxa: <:(AMESET "#LS !li9ta+dimen9iuni+2! (#7S !li9ta+dimen9iuni+C!></:(AMESET>

*tributele# 61W&?4*im11*im71@1W4 *etermina in cite cadre va #i impartita1 pe directia ori$ontala1 #ereastra navigatorului) 3*im14 respectiv 3*im74 repre$inta dimensiunea in pi,eli a primelor 7 cadre1 iar ultimul cadru va avea ca dimensiune di#erenta dintre dimensiunea totala a ecranului de monitor si suma celorlalte cadre1 respectiv ce-a mai ramas) : lista de linii este o lista de valori separate prin virgula (1)1 prin care se transmite navigatorului in cite linii va #i impartita #ereastra activa) (umarul de linii este dat de numarul de valori de dupa semnul 3egal41 iar inaltimea #iecarui rind e data de #iecare valoare 3*im4 in parte) 01L&?4dim11dim71@1W4 *etermina in cite cadre va #i impartita1 pe directia verticala1 #ereastra navigatorului) *imesiunile se calculea$a e,act la #el ca in ca$ul impartirii documentului HTML in cadre 3linii4) '('M!L)# *aca consideram de#initia ;A'5M&S&T ':WS?43817FV1W1W4< atunci documentul va #i impartit in linii dupa cum urmea$a+ 1) e,ista patru linii (rinduri)H 7) toate liniile au aceeasi latime1 latimea #erestrei active a navigatoruluiH 3) rindul de sus are inaltimea egala cu 38 de pi,eliH E) al doilea rind este 7FV din inaltimea totalaH F) restul de inaltime este impartit intre rindul 3 si E1 in mod egal) T*+-ul ,86*M'5cest tag indica navigatorului (bro6serului) ce sa puna in cadrele de#inite cu tag-ul ;A'5M&S&T<) Trebuie sa e,iste un singur tag ;A'5M&< si numai unul singur pentru #iecare cadru speci#icat in lista de coloane si de linii)
Sintaxa: <:(AME S(" !)L(+document! [NAME !nume!] N#(ESI8E S"(#LLIN' Fe95no5auto>

*tributele# &60 - *e#ineste calea catre documentul care va #i a#isat de navigator in cadrul respectivH $*M' - *etermina numele cadrului respectiv) Aolosirea numelor pentru #rame-uri #ace posibila re#erirea pentru actuali$areH $16'&":' - 2ndica #aptul ca #rame-ul nu poate #i redimensionatH &061LL"$+ / speci#ica e,istenta sau nu a barelor de rulare S%':LL2(9?.es Speci#ica e,istenta barelor de rulare (scr"ll#bars) la nivelul unui #rameH S%':LL2(9?no Speci#ica ine,istenta barelor de rulare (scr"ll#bars) la nivelul unui #rameH S%':LL2(9?auto Speci#ica e,istenta conditionata a barelor de rulare (scr"ll#bars) la nivelul unui #rame) 5cestea vor #i a#isate numai daca documentul nu poate #i a#isat in intregime in interiorul cadrului) '('M!L)# ,)-tml .)-tml Pag 77 $)-tml

Limbajul HTML ;A'5M&S&T ':WS?4W1W4< ;A'5M& S'%?4,)-tml4 (5M&?4*:%/M&(T/L K4< ;A'5M&S&T %:LS?4W1W4< ;A'5M& S'%?4.)-tml4 (5M&?4*:%/M&(T/L C4< ;A'5M& S'%?4$)-tml4 (5M&?4*:%/M&(T/L N4< ;0A'5M&S&T< ;0A'5M&S&T< Legaturi in frame-uri 2ntr-un document HTML normal1 cind este selectata o legatura (linG) navigatorul inlocuieste documentul curent cu un nou document) 2n ca$ul documentelor tip #rame1 cind un linG intr-un #rame este selectat1 bro6serul poate modi#ica #rame-ul continind acea legatura1 un alt #rame1 un grup de #rame-uri sau intreaga #ereastra) 5cest lucru poate #i speci#icat cu ajutorul unui nou atribut T5'9&T al tag-ului ;H'&A<) 5st#el pentru #iecare legatura1 este posibil a se speci#ica nu numai ce nou document sa se incarce1 dar1 de asemenea1 si unde sa #ie a#isat (incarcat) acel document) '('M!L)# ;5 H'&A?4/'LXdocument4 T5'9&T?4numeXtinta4<H.perlinG Te,t;05< unde 3numeXtinta4 poate #i un nume de #rame sau un nume implicit) %a nume implicite putem #olosi+ &'L8 - La #i actuali$at cadrul ce contine legatura selectata (implicit)H !*6'$T - La #i actuali$at cadrul parinte1 daca cadrul ce contine legatura este un cadru-#iu) 5lt#el are acelasi e#ect ca si sel#) T1!- La #i actuali$ata intreaga #ereastra activa a bro6ser-ului)

8ormulare
Aormularele (#orms) permit construirea de ecrane de comunicare (transmisie) de date catre un script (aplicatie1 program) prin intermediul unui server Web) %92 (%ommon 9ate6a. 2nter#ace) este standardul care permite inter#atarea de aplicatii e,terne si servere de in#ormatii (e,+ server WWW)) Script-urile (programele) apelate de catre un server Web prin intermediul #ormularelor pot #i de$voltate in %0%PP1 Aortran1 Perl1 Tcl1 s-ell /(2K1 Lisual "asic) /n #ormular poate apare oriunde intr-un document HTML) /n document HTML poate contine unul sau mai multe #ormulare) *upa validare (apasarea unui buton special) datele ce urmea$a a #i communicate serverului W3 sunt transmise catre acesta) Serverul WWW lansea$a aplicatia solicitata in #ormular si transmite acesteia datele din #ormular1 preia re$ultatele procesarilor activate de aplicatia destinatar si le transmite e,peditorului #ormularului) T*+-ul ,816M*e#ineste un #ormular+
Sintaxa: <:#(M A"TI#N !)(L! METH#D *et56o9t> continut ,o-mula- </:#(M>

*tributele# *0T"1$ B desemnea$a script-ul care va #i declansat dupa validarea cereriiH M'TH1. B indica maniera in care datele vor #i transmise script-ului destinatarH M&TH:* ? get B in#ormatiile sint transmise ca parametri ai script-ului destinatar Pag 73

Limbajul HTML Met"da get crea$a de #apt o variabila de mediu Ruer.-String in care sint memorate datele1 variabila care poate #i e,aminata de script-ul server) Inc"nvenient+ daca in#ormatiile sunt voluminoase se pot pierde portiuni din acestea M&TH:* ? post B in#ormatiile sunt transmise catre intrarea standard (stdin)) Pentru a le receptiona1 script-ul server trebuie sa aiba acces la #lu,ul datelor de intrare standard)

0impuri de intrare si butoane

%impurile de intrare sunt variabile ($one) care pot receptiona in#ormatii de tip te,t introduse de catre utili$atorul #ormularului) Aiecare cimp are asociata o #ereastra pe ecranul #ormularului) "utoanele sunt obiecte care permit setarea unor optiuni ce urmea$a a #i transmise script-ul server sau lansarea unor operatii speciale - transmisia datelor #ormularului (butonul de validare) sau reinitili$area datelor cu valorile lor implicite (butonul reset) 0impuri de intrare simple si butoane %impurile de intrare simple se caracteri$ea$a prin aceea ca in #ereastra asociata cu cimpul respectiv nu pot #i introduse mai multe linii de te,t) T*+-ul ,"$!)TSintaxa: <IN4)T T%4E !ti6! [NAME !nume!] [SI8E lun*ime+cim6] [0AL)E 1aloa-e] ["HE"&ED] [MA.LEN'TH] >

*tributele+ T4!' / de#ineste tipul datelor ce pot #i introduse in $ona (cimpul) de intrare sau tipul de buton Lalori+ TCP&?4te,t4 - desemnea$a un cimp in a carui #ereastra se va intoduce un sir normal de caractereH TCP&?4pass6ord4 B caracterele introduse sunt a#isate prin W-uri (#ormea$a o parola)H TCP&?4-idden4 B caracterele introduse nu sint vi$uali$ateH TCP&?4c-ecGo,4 - desemnea$a o bo,a ()de maracare ()) *aca #ormularul contine mai multe bo,e 3c-ecGbo,41 pot #i marcate la un moment dat mai multe ast#el de butoaneH TCP&?4radio4 B desemnea$a un buton () ce poate #i activat (apasat) ( )) *aca #ormularul contine mai multe butoane 3radio4 doar unul va #i activ la un moment datH TCP&?4submit4 B desemnea$a un buton de validareH TCP&?4reset4 B desemnea$a un buton care permite reinitiali$area tuturor variabilelor (atribute)1 de#inite in $ona #ormularelor cu valorile lor impliciteH $*M' - permite atribuirea unui nume simbolic cimpului de intrare) 5cest nume nu apare pe #ormular (a#isat) dar poate #i utili$at in script-ul server pentru reperarea cimpului de intrare sau a butonului) 5tributul (5M& nu poate #i utili$at in combinatie cu tipul 3submit4 sau 3reset4 H 7*L)' Pentru tipul 3te,t41 3pass6ord4 sau 3-idden4 de#ineste o valoare implicitaH Pentru tipul 3radio4 permite desemnarea valorii care va #i a#ectata cind butonul radio va #i activatH Pentru tipul 3c-ecGbo,4 permite desemnarea valorii care va #i a#ectata cind bo,a va #i marcataH e,+ L5L/&?D666)librar.)tuiasi)ro0cartiD< Pentru tipul 3submit4 sau 3reset4 permite denumirea butoanelor alt#el decit ;submit< sau ;reset<H permite indicarea lungimii cimpului de intrare de tip 3te,t41 3pass6ord4 sau 3-idden4) *aca S2N& nu este pre$ent1 valoarea implicita este 78 caractere) Si$e nu limitea$a de #apt lungimea te,tului sau parolei ci #ereastra de vi$uali$areH

&":' /

Pag 7E

Limbajul HTML 0H'05'. B este utili$at in combinatie cu butoane radio sau bo,e de marcare) Semni#ica #aptul ca aceste butoane sau bo,e sunt implicit active respectiv marcate) M*(L'$+TH / indica numarul ma,im de caractere ce pot #i continute de un cimp de tip 3te,t4 sau 3pass6ord4) Laloarea implicita este nelimitata) 0impuri de intrare multilinii %impurile de intrare multilinii se caracteri$ea$a prin aceea ca in #ereastra asociata cu cimpul respectiv pot #i introduse mai multe linii de te,t) Tastarea ;&(T&'< marc-ea$a s#irsitul unei linii de te,t) T*+-ul ,T'(T*6'*Sintaxa: <TE.TA(EA [NAME !nume!] (#7S n-Alinii "#LS n-Acoloane >

*tributele+ $*M' / permite atribuirea unui nume simbolic cimpului de intrare) 5cest nume nu apare pe #ormular (a#isat) dar poate #i utili$at in script-ul server pentru reperarea cimpului de intrare) 61W& / de#ineste numarul de linii ale #erestrei asociate cimpului (dimensiunea pe verticala) 01L& / de#ineste numarul de coloane ale #erestrei asociate cimpului (dimensiunea pe ori$ontala) :bs) Aereastra va #i dotata automat cu ascensoare verticale si ori$ontale) 5ceasta inseamna ca vor putea #i introduse mai multe linii de te,t decit cele ale #erestrei (dimensiunea verticala) iar lungimea unei linii poate depasi dimensiunea pe ori$ontala a #erestrei)

Liste de selectie
Permit operarea unei selectii intre mai multe optiuni)
Sintaxa: <SELE"T at-i@ute> <#4TI#N at-i@ute> o6tiune <#4TI#N at-i@ute> o6tiune [ <#4TI#N at-i@ute> o6tiune ] </SELE"T>

T*+-ul ,&'L'0T*e#ineste o lista de optiuni)

Sintaxa: <SELE"T NAME !nume! [SI8E 1aloa-e] [M)LTI4LE]> li9ta o6tiuni </SELE"T>

*tributele+ $*M' / &ste obligatoriu) 5signea$a un nume listei) &":' / indica numarul optiunilor vi$ibile in #ereastra asociata listei de optiuni Lalori+ S2N&?1 B lista are #orma unui meniu gra#ic S2N&?n<1 B optiunile listei apar intr-o #ereastra dotata cu ascensor vertical M)LT"!L' B permite selectionarea mai multor optiuni T*+-ul ,1!T"1$*e#ineste o optiune)
Sintaxa: <#4TI#N [SELE"TED]>

Pag 7F

Limbajul HTML 5tributul S&L&%T&* indica #aptul ca optiunea este cosiderata implicit selectata) '('M!L' <HTML> <HEAD> <TITLE>Exemplu de formular </TITLE> </HEAD> <BODY> <FORM METOD=GET ACTIO =!/"#$%&$'/(e)(!> <*TRO G>
C$mp )$mplu + <I ,-T TY,E=!(ex(! $'$($al !> <,> AME=!(ex(%)"ur(! *I.E=/0 1AL-E=!(ex(

C$mp mul($l$'$$ + <TE2TAREA AME=!(ex(%lu'#! RO3*=4 COL*=40>,r$ma l$'$e A doua l$'$e</TE2TAREA><,> ,a))5ord + <I ,-T TY,E=!pa))5ord! AME=!parola! *I.E=60 ></,>

Bu(oa'e rad$o + <I ,-T TY,E=!rad$o! AME=!&r! 1AL-E=!da! CHEC7ED> da <I ,-T TY,E=!rad$o! AME=!&r! 1AL-E=!'u!> 'u <,> Boxe de mar"are + <I ,-T TY,E=!"8e"9&ox! AME=!&m! *I.E=/0 1AL-E=!:! CHEC7ED > : <I ,-T TY,E=!"8e"9&ox! AME=!&m! *I.E=/0 1AL-E=!6!> 6 <I ,-T TY,E=!"8e"9&ox! AME=!&m! *I.E=/0 1AL-E=!;!> ; <I ,-T TY,E=!"8e"9&ox! AME=!&m! *I.E=/0 1AL-E=!/! CHEC7ED > / <I ,-T TY,E=!"8e"9&ox! AME=!&m! *I.E=/0 1AL-E=!4!> 4 <,> L$)(a de )ele"($e+ <*ELECT AME=!)ele"($e!> <O,TIO > Op($u'e : <O,TIO *ELECTED> Op($u'e 6 <O,TIO > Op($u'e ; </*ELECT> <,> <I ,-T TY,E=!re)e(! 1AL-E=!a'ulare!> <,>

Bu(o' re)e( +

Bu(o' <al$dare + <I ,-T TY,E=!)u&m$(! 1AL-E=!(ra'm$)$e!> <,>

<*TRO G> </FORM> <HR> </BODY> <HTML>

Pag 7M

Limbajul HTML

6e9ultatul procesarii documentului HTML de catre navigator#

0imp simplu #
Prima linie A doua linie

0imp multilinii # !assBord #

********

3utoane radio # 3oxe de marcare # Lista de selectie# 3uton reset #

anulare

da =

nu > E F G

3uton validare #

tranmisie

Pag 7O

Limbajul HTML
<HTML> <HEAD> <TITLE>L$&rar= of (8e Te"8'$"al -'$<er)$(= % da(a%&a)e) </TITLE> </HEAD> <BODY BAC7GRO- D=!e#=p(>?p#!> <FORM METOD=GET ACTIO =!/8(&$'/*F#a(e!> <CE TER> <TABLE> <TR> <TH "e'(er> <B><I><FO T COLOR=@FFFF00 *I.E =A;>T8e L$&rar= of (8e BCuo(DG8>A)a"8$BCuo(D Te"8'$"al -'$<er)$(= of Ia)$</FO T></I></B> </TH> </TR> </TABLE > <,RE> <FO T *I.E=A:>*ele"( o'e or more of (8e follo5$'# da(a &a)e)+ <I ,-T AME=!da(a&a)e! TY,E=!"8e"9&ox! 1AL-E=!555>l$&rar=>(u$a)$>ro/"ar($!></FO T> "ar($ + &oo9) E:FF;%:FFFG <I ,-T AME=!da(a&a)e! TY,E=!"8e"9&ox! 1AL-E=!555>l$&rar=>(u$a)$>ro/&re<!> &re<e(e + pa(e'() E:FF;%:FFHG <I ,-T AME=!da(a&a)e! TY,E=!"8e"9&ox! 1AL-E=!555>l$&rar=>(u$a)$>ro/)('d!> )(a'darde + )(a'dard) E:FF;%:FFHG <I ,-T AME=!da(a&a)e! TY,E=!"8e"9&ox! 1AL-E=!555>l$&rar=>(u$a)$>ro/ar($!> ar($"ole + ar($"le) E:FF;%:FFHG <I ,-T AME=!da(a&a)e! TY,E=!"8e"9&ox! 1AL-E=!555>l$&rar=>(u$a)$>ro/re<$!> re<$)(e + re<$e5) E:FF;%:FFHG </FO T> </,RE> </CE TER> <H6 ALIG =CE TER><FO T *I.E=A0>Cl$"9 <A HREF=!8((p+//555>l$&rar=>(u$a)$>ro/Cuer=%)='(ax>8(ml!>8ere</A>for (8e )ear"8$'# Cuer= )='(ax expla'a($o')</FO T></H6> <H6 ALIG =CE TER>E'(er =our Cuer=+</H6> <CE TER> <BR> <I ,-T TY,E=!(ex(! AME=!! *I.E=H0><BR> <I ,-T TY,E=!)u&m$(! 1AL-E=!)(ar( )ear"8!><I ,-T TY,E=!re)e(! 1AL-E=!re)e( Cuer=!> <BR><BR> <B> Max$mum 'um&er of re)po')e)+ <I ,-T AME=!max8$()! TY,E=!(ex(! 1AL-E=:00 *I.E=; > La'#ua#e for (8e 'ex( me))a#e)+ <*ELECT AME=!la'#ua#e!> <O,TIO >e'#l$)8 <O,TIO >fre'"8 </*ELECT> </B> </CE TER> </FORM> <BR> <CE TER>

Pag 7!

Limbajul HTML
<A HREF=!5el"ome>8(ml!><IMG *RC=!8ome>#$f! ALT=!8ome! HEIGHT=6/ 3IDTH=I/></A> </CE TER> </BODY> </HTML>

Pag 7

Limbajul HTML

"nterpretarea navigatorului#

The Library of the "Gh.Asachi" Technical University of asi

Select one or more o# t-e #ollo6ing data bases+
carti + booGs (1 3-1 3-1 3-1 !) !) ) !) !) brevete + patents (1 standarde + standards (1 articole + articles (1 reviste + revie6s (1

3-1 3-1

0lick herefor the searching Huery syntax explanations

'nter your Huery#

start search

reset query

Maximum number of responses#

Language for the next messages#

Pag 38