Sunteți pe pagina 1din 41

http://www.notiuni.html.go.ro/l/stil.

htm

Modul de lucru :
* Porniti un editor de texte simplu (Notepad, nu Word) pentru a edita codul sursa. * Tastati doar ceea ce este pe fondul gri: <html> NU trebuie tastat nici un spatiu in interiorul parantezelor unghiulare. Textul dorit de d&s. Instructiunile T!" sunt intotdeauna incadrate intre parante#ele unghiulare < si <'html> >$ intre parante#e nu tre%uie sa a&em spatii decat daca separa numele instructiunii de atri%utele ei sau atri%utele intre ele, dar nu este ca#ul aici. ) marca2ul T!" de deschidere ) indica faptul ca informatia care <html> urmea#a este scrisa in lim%a2ul T!" <head> )marca2ul .34 de deschidere ) de aici incepe antetul paginii ) marca2ele pereche TIT". ) aici se scriu cate&a cu&inte sugesti&e despre continutul paginii ) aceste cu&inte &or apare pe %ara de titlu <title>Titlul paginii<'title> a %ro+serului$ daca pagina este adaugata intr)o lista fa&orita, ele apar ca nume al paginii. <meta name 5 6*e7+ords6 ) a2uta motoarele de cautare la gasirea paginii, etc. ) ne &om ocupa content 5 6... o lista de cu&inte ...6> mai tar#iu de ele$ <meta name 5 6description6 999 ) &alorile unor atri%ute, de exemplu 6*e7+ords6, tre%uie content 5 6... o fra#a sugesti&a ...6> incadrate cu ghilimele du%le, drepte ( 6 ) o%tinute cu (hift : tasta ... alte instructiuni: 8a&a(cript, de langa .nter, nu ( ; ) sau ( < ). 0((, etc. ... ) marca2ul .34 de inchidere ) aici se termina antetul paginii$ tot <'head> ce este in antet nu apare in fereastra %ro+serului <%od7> ) marca2ul =14> de deschidere ) incepe corpul documentului ... ) tot ceea ce apare aici &a fi afisat in fereastra %ro+serului, dar ... tre%uie formatat cu T!" ) marca2ul =14> de inchidere ) indica sfarsitul corpului <'%od7> documentului <'html> ) marca2ul T!" de inchidere * (al&am fisierul cu FILE - SAVE AS... : Save in : alegem directorul de pe hard ) dis* in care sal&am fisierul. File na e : tastam pagina si pla.ht sau pagina si pla.ht l (atentie la extensie cand le apelati: desi %ro+serul le afisea#a la fel, ele sunt fisiere diferite) Save as t!pe : Text documents * Pentru a &edea re#ultatul ,- este ne&oie sa fim conectati la Internet: ) lansam Windo+s .xplorer, mergem in directorul unde l ) am sal&at si il deschidem cu du%lu ) clic*. /a porni %ro+serul care este setat ca %ro+ser implicit (daca a&em instalate mai multe). SAU ) pornim %ro+serul$ daca incearca sta%ilirea conexiunii la retea dati 0ancel ) FILE - "#EN din meniul %ro+serului (sau 1pen Page pentru ,etscape si %ifati %utonul radio ,a&igator)

) $%"&SE (sau 0hoose ?ile pentru ,etscape) ) deschideti directorul in care l ) ati sal&at si selectati fisierul ) "#EN - "' (sau 1pen pentru ,etscape) * Tre%uie sa &a apara o pagina al%a$ in coltul din stanga sus se gaseste textul: Textul dorit de d&s. * 4aca &om face modificari in codul sursa, pentru a le putea &edea in %ro+ser tre%uie sal&at fisierul .html (FILE - SAVE), apoi folosim %utonul %e(resh (%eload pentru ,etscape. )oar uneori, pentru a afisa ultima &ersiune sal&ata a codului sursa si a e&ita afisarea unei copii aflate in memoria cache, folosim Shi(t * %eload sau "ption * %eload). 3cesta este modul de lucru$ dupa cum &edeti nu este foarte complicat. Putem continua sa de#&oltam aceasta pagina si sa introducem imagini, text de di&erse marimi, culori, legaturi spre alte pagini, ta%ele, etc. 3laturi de marca2ele necesare &eti gasi si foarte multe exemple (aproape fiecare atri%ut al fiecarui marca2 : com%inatii ale atri%utelor si comentarii)$ lista nu este completa, dar cuprinde mai mult decat cate&a notiuni de %a#a$ o sa continui de#&oltarea ei. a) ?orma generala a unui fisier T!" este: 4upa cum puteti o%ser&a, instructiunile T!" (numite si controale, marca2e sau tag)uri) incep cu o parante#a unghiulara deschisa < urmata imediat de numele instructiunii, unul sau mai multe atri%ute ale instructiunii (optional), apoi de o parante#a unghiulara inchisa >. !a2oritatea instructiunilor sunt perechi$ cea de inceput se numeste marca2 de deschidere si este de forma: +nu e,instructiune atribut - valoare,atribut. iar cea de sfarsit marca2 de inchidere si nu contine atri%ute sau spatii$ este de forma: +/nu e,instructiune.. NU sunt permise spatii decat intre nume@instructiune si atri%ut. Tot ce se gaseste intre marca2ul de deschidere si cel de inchidere &a a&ea caracteristicile marca2ului respecti&. $ro0serul ignora arca1ele pe care nu le intelege si pe cele scrise gresit. E2e ple : daca sim%oli#am spatiul prin @ atunci: 3resit <@hA>text<'hA> <@font@si#e 5 B @ color@5@%lue> text <@'@font@> %ezultat < hA>text < font si#e 5 B color 5 %lue> text < ' font > $ine <hA> text <'hA> <font@si#e 5 B @ color 5 %lue> text <'font> %ezultat

te2t

text

b1) Formatarea textului si a caracterelor


Instructiunea <9)) comentariu ))> <%><'%> <i><'i> <u><'u> Atribute ) ) ) ) )escriere / E2e ple 0omentariu in codul sursa$ nu este afisat de %ro+ser afisea#a textul cu litere aldine 4ingrosate5 afisea#a textul cu litere italice (inclinate) afisea#a textul su%liniat

< sup > < ' sup > < su% > < ' su% > < tt > < ' tt > < %ig > < ' %ig > < pre atribute > < ' pre >

) ) ) )

afisea#a textul ca indice superior afisea#a textul ca indice inferior text cu font monospatiu text cu font marit : %old afisea#a pe linie noua textul preformatat, ca in codul sursa, dar ia in considerare instructiunile html
t e x t u l p r e f o r m a t a t , < b >adica asa cum arata el in< /b > codul sursa din Notepad

latimea liniilor cu text preformatat (numar caractere)$ se pare ca este ignorata$ pentru +idth 5 CD o%tinem: +idth 5
e l r r a t x t u p e f o m a t t

latimea liniilor cu text preformatat (cols5coloane5numar caractere)$ se pare ca este ignorata$ pentru cols 5 CD o%tinem: cols 5
t e x t u l p r e f o r m a t a t

+rap < xmp > < ' xmp > )

atri%utul +rap se pare ca este ignorat de unele %ro+sere (ex. I.B.B) afisea#a pe linie noua textul preformatat, ca in codul sursa, dar nu ia in considerare instructiunile html
t e x t u l p r e f o r m a t a t , adica asa cum arata el in codul sursa din Notepad

0ele de mai 2os, pe fond gri, nu ne sunt de prea mult folos si ' sau le putem o%tine folosind instructiunile de mai sus < stri*e > < ' stri*e > ) afisea#a textul taiat < strong > < ' strong > ) e&identiere logica puternica < em > < ' em> ) stil logic de evidentiere < address > informatii ) < ' address > despre adresa si autor < cite > < ' cite > ) citare bibliografica < dfn > < ' dfn > ) definitie de cuvant < &ar > < ' &ar > ) program sau variabila listing de program < code > < ' code > ) < *%d > < ' *%d > ) text de la tastatura < samp > < ' samp > ) exemplu de date introduse de utili#ator ar fi tre%uit sa ai%a un efect asemanator instructiunii <E><'E> ) ="10FG-1T.

H Ialte marca2eJ : font, paragraf, rigle, etc. H

b2) Formatarea textului si a caracterelor


Instructiunea I< font atri%ute > < ' font >J 3tri%ute si#e 5 i color 5 4escriere ' .xemple marimea fontului: i 5 C, K, ... , L$ C 5 mic, L 5 mare culoarea poate fi data prin numele ei sau prin &aloarea MN=

o lista de minim K fonturi: fontC 5 un font specific sistemelor Windo+s, fontK 5 un font specific echi&alent sistemelor !acintosh$ face 5 daca nu gaseste instalat nici unul din ele, &a afisa textul cu 6 fontC , fontK , ...6 fontul proportional predefinit (fonturile proportionale sunt cele in care spatiul dintre litere este acelasi: ex. imimimmm$ fonturile monospatiu sunt fonturile in care spatiul ocupat de fiecare litera este acelasi: ex. imimimmm) < %asefont atri%ute > < ' %asefont > si#e 5 i marimea fontului implicit al intregii pagini: i 5 C, K, ... , L$ C 5 mic, L 5 mare$ fontul implicit are marimea A$ nu are influenta asupra textului din interiorul ta%elelor culoarea poate fi data prin numele ei sau prin &aloarea MN= are influenta si asupra instructiunii <hi> <'hi> dar nu in interiorul ta%elelor este folosit pentru titluri in document$ i 5 C, K, A, O, B, P$

color 5 <hi><'hi>

h1
h2
h6
)

h7
h5
h8

< center > < ' center > < %loc*Euote > < ' %loc*Euote >

) )

centrea#a in pagina (text, imagine, ta%el, etc.) textul este indentat cu un T3= fata de am%ele margini (stanga si dreapta) ale spatiului disponi%il (pagina, celula de ta%el,

< %r atri%ute >

etc.) fortea#a trecerea pe linie noua left, right sau all: trece la linie noua cand marginea din stanga (left), dreapta (right) sau am%ele margini (all) ale ecranului sunt li%ere, de ex. pentru a aduce un text su% o imagine care nu ocupa intreaga latime a spatiului disponi%il

clear 5 < p atri%ute > <'p>

paragraf nou (aliniat implicit la stanga daca nu este in interiorul unui marca2 care face o alta aliniere, de ex. 0.,T.M) aliniat la stanga (left), ) este alinierea implicita, deci nu este necesar decat in interiorul unui marca2 care face o alta aliniere, de ex. 0.,T.M aliniat pe centru (center),

align 5

aliniat la dreapta (right), pentru am%ele margini aliniate (2ustif7)$ o%ser&ati spatiul din dreapta dintre text si marginea ta%elului si distanta dintre cu&inte, care este reglata astfel incat marginea din dreapta a textului sa nu fie neregulata. (esi#ati diferenta fata de paragrafele cu align 5 left sau fara align de mai sus.

class 5 t7pe 5 6 text'css 6 st7le 5 ... < di& atri%ute > < ' di& > )

specifica un anume stil de text specifica un anume stil de text marca2 pentru %locuri de text (aliniat implicit la stanga daca nu este in interiorul unui marca2 care face o alta aliniere, de ex. 0.,T.M) aliniat la stanga (left), ) este alinierea implicita, deci nu este necesar decat in interiorul unui marca2 care face o alta aliniere, de ex. 0.,T.M aliniat pe centru (center), aliniat la dreapta (right), pentru am%ele margini aliniate (2ustif7)$ o%ser&ati spatiul din dreapta dintre text si marginea ta%elului si distanta dintre cu&inte, care este reglata astfel incat marginea din dreapta a textului sa nu fie neregulata. (esi#ati diferenta fata de paragrafele cu align 5 left sau fara align de mai sus. 4eose%irea dintre p si di& consta in faptul ca prima lasa un spatiu mai mare deasupra si dedesu%tul paragrafului, pe cand di& lasa spatiul egal cu cel dintre randuri. rigla ori#ontala$ fara atri%ute o%tinem:

align 5

< hr atribute >

noshade si#e 5 z +idth 5 x

elimina um%ra riglei: # 5 inaltimea riglei (in pixeli)$ pentru # 5 L: x 5 latimea riglei, in pixeli sau procente din spatiul disponi%il (pagina, celula de ta%el, etc.)$ alinia#a implicit pe centru$ pentru x 5 BD Q: alinierea riglei in pagina$ pentru +idth 5 BD Q o%tinem: left center right culoarea (data prin nume sau &aloarea MN=), pentru color 5 RDDffff o%tinem: defineste inceputul si sfarsitul corpului documentului T!" culoarea fondului paginii (data prin nume sau &aloarea MN=) url ) ul (adresa si numele) imaginii de fond a paginii culoarea textului (nume culoare sau &aloare MN=) culoarea legaturilor ne&i#itate din pagina (nume sau MN=) culoarea legaturilor &i#itate din pagina (nume sau MN=) culoarea legaturilor in timpul clic* ) ului (nume sau MN=) indentarea intregului material din pagina fata de marginea din stanga (pixeli) indentarea intregului material din pagina fata de marginea din dreapta (pixeli) deplasarea intregului material din pagina fata de marginea de sus (pixeli) primeste doar &aloarea 6fixed6$ daca derulam pagina, fondul ramane fix

align 5

color 5 < %od7 atribute > < ' %od7 > ) %gcolor 5 %ac*ground 5 text 5 lin* 5 &lin* 5 alin* 5 leftmargin 5 rightmargin 5 topmargin 5 %gproperties 5

E9E:#LE pt. F"N;U%I:

size =ro+serul afisea#a textul pentru care nu este specificata o alta dimensiune cu &aloarea implicita A(si#e5A). !arimea fontului se specifica cu atri%utul size - i, i 5 C, K, A, O, B, P, L: text < font si#e 5 C > text < ' font > text < font si#e 5 K > text < ' font > < font si#e 5 A > text < ' font > text < font > text de aceeasi marime cu cel de mai sus < ' font > text de aceeasi marime cu cel de mai sus < font si#e 5 O > text < ' font > text

< font si#e 5 B > text < ' font > < font si#e 5 P > text < ' font > < font si#e 5 L > text < ' font >

text

text

text

color <uloarea (ontului se speci(ica cu atributul color= si se poate e2pri a prin nu e sau prin valoarea %3$: + (ont color - red . te2t + / (ont .te2t+ (ont color - >66??cc . te2t + / (ont .te2t (ace Se (oloseste in general sub (or a unei liste de @ (onturi. Speci(icatiile <SS 4<ascading St!le Sheet5 per it si (olosirea unor nu e de (a ilii de (onturiA ast(el nu este nevoie sa cunoaste nu ele e2act al (ontului de pe alte siste e 4&indo0s= :acintosh5: seri((ont (ace-Bseri(Bte2t seri(sans-seri((ont (ace-Bsans-seri(Bte2t sansseri(cursive(ont (ace-BcursiveBte2t cursive(antas!(ont (ace-B(antas!Bte2t (antas! onospace(ont (ace-B onospaceBte2t onospace ----------------------------------------------------------------------------------------Se pot (olosi si nu ele e2acte ale (onturilor= separate prin virgula: font face = "Comic Sans MS,Comic Sans,Times New Roman" In aceeasi instructiune F"N; pute (olosi toate atributele:

font size=5 color=blue face = "Comic Sans MS,Comic Sans,Times New Roman"
----------------------------------------------------------------------------------------#ute (olosi ai ulte instructiuni F"N; i bricateA te2tul va (i (or atat con(or atributelor pana la arca1ul de incheiere /F"N;: | size color face |

| schimb doar size | C schi b (ace si color C | revin la vechea culoare si font |

| revin si la vechea marime | + (ont size-6 color-blue (ace-B<o ic Sans :S=<o ic Sans=;i es Ne0 %o anB . C size color (ace C + (ont size-D .C schi b doar size C + E-odi(ic ari ea= dar nu inchid ari ea D -- . arca1ulA

in continuare te2tul are

+ (ont color-red (ace-B onospaceB .C schi b (ace si color C+ /(ont . + E-- schi b culoarea si (ontul= dar inchid C revin la vechea culoare si (ont C + /(ont . + E-- inchid C revin si la vechea + /(ont . E2e plu: $")F si atributele sale: bgcolor= bacGground= te2t= linG= vlinG= alinG= bgproperties= le(t argin= right argin= top argin 0odul sursa al paginii este: ari e C arca1ul pentru size-D= deci revin la size-6 -- . arca1ul -- .

--------------------------------------------------------cu BonloadB de(inesc un te2t care apare pe bara de stare cand se incarca paginaA tot te2tul trebuie sa se a(le pe un

singur rand 4(ara Enter5 --------------------------------------------------------Exemplu: BODY si atributele sale: bgcolor, background, text, link, vlink, alink

0odul sursa al paginii este: + 2 p . ....... codul sursa ........ + /2 p .

Accesati legaturile pentru a observa cu

li se schi ba culoareaA

va intoarceti cu butonul B$acGB al bro0serului.

(text=black link=red vlink=gray alink=green): a) orma generala a unui

!isier "#$% b) ormatarea textului si a

caracterelor &&&&&& c, d, e, !, g, ', i, (, k &&&&&&& l) )tiluri de text *rmatoarele + legaturi sunt spre + !isiere care nu exista: nu,exista-&'tm nu,exista+&'tm body si atributele sale linie si te2t situate dupa

c5 %e(erinte 4 legaturi 5 Instructiune3tri%ute4escriere+ a atribute . + / a . - arca1 tip ancorahre( - B url Bre(erinta hiperte2t 4legaturi spre alte pagini (olosind un te2t sau o i agine5A intre 6 si 6 nu tre%uie sa existe spatii$ daca dori sa introduce legaturi spre (isiere sau directoare al caror nu e contine spatii 4adica sunt (or ate din cel putin @ cuvinte5 trebuie sa inlocuim spatiile cu QKDna e - B nume-ancora Bde(inirea unei ancorehre( - B # nume-ancora Bre(erinta catre o ancora interna 4din acelasi (isier5hre( - B url # nume-ancora Bre(erinta catre o ancora e2terna 4din alt (isier5target - B nume_cadru Bnu ele cadrului in care va (i a(isata sursa de(inita cu H%EF &alori speciale: ,top - incarca pagina intr - o (ereastra noua= deasupra altor (erestre de pe ecran ,sel( - incarca pagina in cadrul curentA este valoarea i plicita ,parent - incarca pagina in (ereastra parinte ,blanG - incarca pagina intr - o (ereastra noua= (ara nu e+ base atribute .hre( - B alt-URL BB alt_URL B - B http://www.alte_servere.com/alt_site/ B: pute speci(ica legaturi relative spre (isiere situate pe alt site de pe alt serverA este (olositor daca in (isier ave a1oritatea legaturilor relative spre celalalt site si site-ul este ad inistrat tot de dvs. 4alt(el se poate schi ba structura site-ului sau denu irea (isierelor sau directoarelor (ara sa stiti si legaturile vor deveni invalide5 #ute de(ini ancore si cu a1utorul instructiunii id - nume-ancora = care se poate atasa ca atribut aproape oricarei instructiuni. :ouse-ul plasat deasupra unei legaturi (ace sa apara pe bara de stare 4deasupra butonului BStartB5 adresa/ directorul/ (isierul accesat de acea legaturaA adesea nu ne (ace o idee (oarte clara despre subiectul acelei pagini. In (unctie de actiunea vizitatorului 4plaseaza ouse-ul deasupra sau il ia de pe legatura5 pute (ace sa apara altceva in acel loc 4de e2e plu subiectul sau titlul paginii5A atentie la te2tul ales sa apara in cazul cand se ia ouse-ul de pe legatura deoarece ra ane a(isat pana cand este plasat deasupra unei alte legaturi. E2e plu Atunci cand dori sa incarca pagina principala a unui site= in general nu tasta si nu ele unui (isierA serverul ne tri ite un (isier prede(initA de obicei nu ele lui este index.html 4ori de(ault.ht l sau 0elco e.ht lA cel ai sigur este sa intreba ad inistratorul serverului pentru a sti cu sa ne denu i (isierul paginii principale5. Sa presupune ca pe #<-ul de acasa= in directorul !7(ite= construi un site sau ca la adresa +++.nume@ser&er.com'nume@director' ave un site cu ur atoarea organizare: Ta%elul descrie imaginea din dreapta

ni&elul C ni&elul K ni&elul A (isierul : inde2.ht l

directorul : A directorul : AI (isiere : aII.ht aI@.ht

directorul : A@ (isiere : a@I.ht a@@.ht

(isierul : a.ht

directorul : $ (isierul : b.ht

#rintr-o legatura plasata intr-un (isier pute accesa un alt (isier= prin inter ediul re(erintelor. %e(erintele pot (i: interne 4spre o ancora din acelasi (isier5 sau e2terne 4spre un alt (isier5A in (unctie de odul cu speci(ica calea spre alt (isier pot (i absolute sau relative: a%solute : - legatura +a hre( - Bhttp: //000. alte,servere. co / alt,site/ nu e,(isier.ht lB.= plasata in orice (isier din site - ul nostru= indica o legatura e2terna. - legatura +a hre( - Bhttp: //000.nu e,server.co / nu e,director/ A/ AI/ aI@.ht B.= plasata in (isierul inde2.ht l= indica o legatura spre (isierul aI@.ht din site - ul nostru. relati&e : - legatura +a hre( - B.. / .. / inde2.ht lB.= plasata in orice (isier din directorul AI sau A@= indica o legatura spre (isierul inde2.ht l din site - ul nostru. - legatura +a hre( - B.. / A / a.ht B.= plasata in (isierul b.ht din directorul $= indica o legatura spre (isierul a.ht din directorul A. - legatura +a hre( - BA / AI / aI@.ht B.= plasata in (isierul inde2.ht l= indica o legatura spre (isierul aI@.ht din site - ul nostru. Meferintele relati&e au cate&a a&anta2e : - ave ai putin de tastat in codul sursa: nu ai tasta http: //000. nu e,server. co / nu e,director pentru (iecare legatura in parteA - legaturile vor (unctiona si in ti p ce construi site - ul intr - un director pe hard - disGA - daca vo dori sa uta site - ul pe un alt server= nu trebuie sa odi(ica ni icA daca a avea legaturi absolute= pentru (iecare ar trebui sa inlocui http://000. nu e,server.co cu http://000. nu e,nou,server.co In cazul unui site de di ensiuni ici= care contine doar cateva pagini

4(isiere5= nu ave nevoie de o organizare ai co plicata a site - ului 4cu ulte directoare5A a putea plasa toate (isierele in acelasi director 4pe hard - disG sau la adresa 000.nu e,server.co /nu e,director/5A o legatura relativa plasata in orice (isier= care apeleaza orice alt (isier= ar (i de (or a +a hre( Balt,(isier.ht B.. E9E:#LE I. hre(-url:

%e(erinte : te2t sau i agini #entru a a1unge la o alta pagina= vizitatorul trebuie sa acceseze 4clicG5 o legatura. Acea legatura poate (i un text sau o imagine. T.ST )e e2e plu= legatura: Ho e duce la pagina principala 4(isierul inde2.ht lA va intoarceti cu B$acGB din bro0ser5A ea este de(inita ast(el: + a hre(-B../inde2.ht lB .Ho e+ /a . I!3NI,. ;ot la pagina principala duce si

- aceasta este de(inita ast(el: + a hre(-B../inde2.ht lB .+ i g src-B../(oto/hello.gi(B .+ /a . <henarul din 1urul i aginii ne indica (aptul ca este o legaturaA de obicei nu dori sa apara acest chenar 4(olosi %order5D5A este bine sa (olosi si alt56Text afisat celor ce nu incarca imagini6 pentru a nu avea in pagina un chenar de di ensiunea i aginii (ara nici o e2plicatie despre tinta acelei legaturi. Aceeasi legatura ca ai sus este: deoarece este de(inita ast(el: + a hre(-B../inde2.ht lB .+ i g src-B../(oto/hello.gi(B alt-B#agina principalaB 0idth-IDJ border-J .+ /a .

@.

na e - nu e,ancora

%e(erinte interne - e2e plu : A - na e = hre( In cazul unui (isier 4pagina5 care trateaza subiecte relativ di(erite ave uneori nevoie sa introduce legaturi spre (iecare BsectiuneB ast(el incat la un si plu clicG partea superioara a sectiunii respective sa a1unga in partea superioara a bro0serului. #entru aceasta este nevoie sa de(ini ancore 4tinte5= adica sa de(ini inceputul (iecarei sectiuni. Este posibil ca inceputul ulti ei sectiuni spre care ave o legatura sa nu a1unga in partea superioara a bro0serului deoarece sectiunea este ai BscurtaB decat o lungi e de displa! 4vezi legatura Bs(arsitBA se poate re edia prin inserarea unor instructiuni +br.+br.+br. ... +br..5 Ur ariti de(inirea ancorelor 4 ai ulte oduri5 si a legaturilor.

Ur atoarele legaturi e(ectueaza BsalturiB in cadrul acestui (isier la : C un te2t C o i agine C un tabel C inceputul paginii C s(arsitul paginii C codul sursa C Acesta este te2tul. C o i agine C un tabel C inceputul paginii C s(arsitul paginii C hre(->nu e,ancora

%e(erinte interne - e2e plu : A - na e = hre( In cazul unui (isier 4pagina5 care trateaza subiecte relativ di(erite ave uneori nevoie sa introduce legaturi spre (iecare BsectiuneB ast(el incat la un si plu clicG partea superioara a sectiunii respective sa a1unga in partea superioara a bro0serului. #entru aceasta este nevoie sa de(ini ancore 4tinte5= adica sa de(ini inceputul (iecarei sectiuni. Este posibil ca inceputul ulti ei sectiuni spre care ave o legatura sa nu a1unga in partea superioara a bro0serului deoarece sectiunea este ai BscurtaB decat o lungi e de displa! 4vezi legatura Bs(arsitBA se poate re edia prin inserarea unor instructiuni +br.+br.+br. ... +br..5 Ur ariti de(inirea ancorelor 4 ai ulte oduri5 si a legaturilor.

Ur atoarele legaturi e(ectueaza BsalturiB in cadrul acestui (isier la : C un te2t C o i agine C un tabel C inceputul paginii C s(arsitul paginii C codul sursa C

Acesta este te2tul. C o i agine C un tabel C inceputul paginii C s(arsitul paginii C 7. hre(-url >nu e,ancora

%e(erinte e2terne - e2e plu : A - hre( In aceasta pagina vo realiza doua legaturi spre doua (isiere care au (iecare de(inita in interiorul lor o ancora nu ita BcodB 4duce la codul sursa al paginii respective5. In (isierul ex)ref)int)name:href.htm ancora este de(inita cu name= iar in (isierul ex)ref)int)id:href.htm ancora este de(inita cu id. <ele doua legaturi sunt de(inite ai 1osA va intoarceti aici cu butonul =ac* din bro0ser : + a hre( - Be2-re(-int-na e*hre(.ht >codB .un te2t sau o i agine+ /a . + a hre( - Be2-re(-int-id*hre(.ht >codB .un te2t sau o i agine+ /a . id-nu e,ancora

%e(erinte interne - e2e plu : A - id = hre( In cazul unui (isier 4pagina5 care trateaza subiecte relativ di(erite ave uneori nevoie sa introduce legaturi spre (iecare BsectiuneB ast(el incat la un si plu clicG partea superioara a sectiunii respective sa a1unga in partea superioara a bro0serului. #entru aceasta este nevoie sa de(ini ancore 4tinte5= adica sa de(ini inceputul (iecarei sectiuni. Este posibil ca inceputul ulti ei sectiuni spre care ave o legatura sa nu a1unga in partea superioara a bro0serului deoarece sectiunea este ai BscurtaB decat o lungi e de displa! 4vezi legatura Bs(arsitBA se poate re edia prin inserarea unor instructiuni +br.+br.+br. ... +br..5 Ur ariti de(inirea ancorelor 4 ai ulte oduri5 si a legaturilor.

Ur atoarele legaturi e(ectueaza BsalturiB in cadrul acestui (isier la : C un te2t C o i agine C un tabel C inceputul paginii C s(arsitul paginii C codul sursa C Acesta este te2tul. C o i agine C un tabel C inceputul paginii C s(arsitul paginii C ;e2t pe bara de stare

:odi(icarea te2tului de pe bara de stare : "n:ouse"ut = "n:ouse"ver <ele 6 legaturi de ai 1os duc spre pagina principalaA nu este nevoie sa le accesati= ci doar sa plasati ouse-ul deasupra lor si sa observati odi(icarile care apar pe bara de stare 4deasupra butonului BStartB5A pri ele doua sunt di(erite de BLinG 6B= care este o legatura obisnuita. LinG I LinG @ LinG 6 0odul sursa al legaturilor de mai sus este: + a hre(-B../inde2.ht lB "n:ouse"ut-Bsel(.status-Kdetalii linGI - cu "n:ouse"utKAreturn trueB "n:ouse"ver-Bsel(.status-Kdetalii linGI - cu "n:ouse"verKAreturn trueB .+ b .LinG I+ /b .+ /a .

+ a hre(-B../inde2.ht lB "n:ouse"ut-Bsel(.status-Kdetalii linG@ - cu "n:ouse"utKAreturn trueB "n:ouse"ver-Bsel(.status-Kdetalii linG@ - cu "n:ouse"verKAreturn trueB .+ b .LinG @+ /b .+ /a .

+ a hre(-B../inde2.ht lB .+ b .LinG 6+ /b .+ /a . ;e2tul care apare 1os cand plasati ouse-ul deasupra este cel de(init cu 1n!ouse1&er. Aici puteti alege un te2t care descrie subiectul paginii unde a1unge prin accesarea legaturii. ;e2tul care apare 1os cand luati ouse-ul de pe legatura este cel de(init cu 1n!ouse1utA el ra ane pe bara de stare pana cand plasati ouse-ul deasupra unei alte legaturi in care aveti "n:ouse"ut= de aceea te2tul trebuie ales ast(el incat sa se potriveasca oricarei situatii 4de e2e plu vizitatorul ra ane sa ur areasca in continuare pagina in care se a(la legatura - deci ra ane pe bara de stare cu un te2t (ara sens pentru el5. Aici puteti sa: - nu puneti ni ic 4"n:ouse"ut-Bsel(.status-KKAreturn trueB5 - bara de stare ra ane goala sau - puneti un te2t ce descrie subiectul paginii in care se afla legaturaA acelasi text sa apara si in celelalte legaturi 4"n:ouse"ut-Bsel(.status-KNu parasi pagina pana cand nu prinzi ideea EEEKAreturn trueB5 Legaturi cu e2plicatii ai bine alese sunt 4le puteti accesa - va intoarceti cu B$acGB din bro0ser5:

LinG I LinG @ LinG 6 0odul sursa al legaturilor de mai sus este: + a hre(-B../inde2.ht lB "n:ouse"ut-Bsel(.status-KNu parasi pagina pana cand nu prinzi ideea EEEKAreturn trueB "n:ouse"ver-Bsel(.status-K#agina principalaKAreturn trueB . + b .LinG I+ /b .+ /a .

+ a hre(-B../b/(or atare-te2t.ht B "n:ouse"ut-Bsel(.status-KNu parasi pagina pana cand nu prinzi ideea EEEKAreturn trueB "n:ouse"ver-Bsel(.status-KFor atarea te2tului= etcKAreturn trueB. + b .LinG @+ /b .+ /a .

+ a hre(-B../c/re(erinte.ht B "n:ouse"ut-Bsel(.status-KNu parasi pagina pana cand nu prinzi ideea EEEKAreturn trueB "n:ouse"ver-Bsel(.status-K<u trueB . + b .LinG 6+ /b .+ /a . d5 ;abele Instructiunile de ai 1os sunt (olosite aproape in orice site deoarece cu a1utorul lor: - pute crea tabele propriu - zise 4cu este cel de ai 1os5A - pute controla ult ai bine aran1area in pagina a ele entelor 4(olosind tabele (ara chenar= eventual introduce tabele in interiorul altui tabel5. Liniile de tabel sunt orizontaleA coloanele sunt cele verticaleA intersectia unei linii cu o coloana de(ineste o celula. Instructiune3tri%ute4escriere+ table atribute . + / table. -inceput de tabel H;:Lborder - chenarul tabelului 4in pi2eli sau se construiesc legaturi spre alte paginiKAreturn

L5bgcolor - culoarea (ondului pentru tabel 4valoare %3$ sau nu e culoare5bacGground - B url B i aginea de (ond pentru tabelA proble e: (ond inchis-te2t deschis sau (ond inadecvat 4ca ari e sau odel5cellpadding - spatiu intre continutul celulelor tabelului si continutul lor 4in pi2eli5cellspacing - spatiu intre celulele tabelului 4in pi2eli50idth - lati ea tabelului 4in pi2eli sau L din spatiul disponibil5bordercolor - culoarea chenarului 4nu e culoare sau valoare %3$5bordercolorlight - culoarea ai deschisa a chenarului 4stanga * sus5 4nu e culoare sau valoare %3$5bordercolordarG - culoarea ai inchisa a chenarului 4dreapta * 1os5 4nu e culoare sau valoare %3$5align - aliniaza tabelul in dreapta 4right5 sau stanga 4le(t5 paginiiA te2tul din 1urul tabelului curge pe partea opusahspace -spatiu pe orizontala in 1urul tabelului 4in pi2eli5vspace -spatiu pe verticala in 1urul tabelului 4in pi2eli5cols -nu arul de coloane ale unui tabel(ra e -a1ustarea cadrelor in tabel - doar in IErules -a1ustarea riglelor in tabel - doar in IE+ tr atribute . + / tr . -linie de tabelbgcolor -culoarea (ondului pentru intreaga linie 4valoare %3$ sau nu e culoare5align - alinierea continutului celulelor 4le(t= center= right5A i plicit le(theight -inalti ea liniei 4in pi2eli5A in unele bro0sere nu (unctioneaza= dar puteti (olosi height in ;)+ td atribute . + / td . -celula de tabelheight -inalti ea celuleiA daca pe aceeasi linie 4;%5 dati din greseala @ valori di(erite pentru height in ;)= va lua a2i ul pentru toate celulele liniei0idth -lati ea celuleibgcolor - culoarea (ondului pentru intreaga celula 4valoare %3$ sau nu e culoare5bacGground - B url B i aginea de (ond pentru celulaalign - alinierea continutului celulei pe orizontala 4le(t= center= right5A i plicit le(tvalign - alinierea continutului celulei pe verticala: top 4sus5= iddle 4 i1loc5= botto 41os5A i plicit iddlealign - baseline aliniaza celulele cu linia de baza a te2tului adiacentalign - caracter aliniaza coloana (ata de un anu it caracter 4i plicit caracterul B . B5align - 1usti(!aliniaza arginile din stg. si dr. ale te2tuluicolspan - nu arul de coloane pe care se intinde celularo0span - nu arul de linii pe care se intinde celulano0rap nu per ite despartirea te2tului pe linii in celula+ th . + / th .-poate (i (olosit : - in loc de ;)= dar continutul va (i centrat si ingrosat 4bold5A - i preuna cu ;) pe aceeasi linie 4;%5+ caption atribute . + / caption .-te2t e2plicativ asociat tabeluluialign -alinierea te2tului 4top i plicit= botto = le(t= right5+ colgroup . + / colgroup.-i preuna cu arca1ul + col . de(ineste un set de de(initii de coloanebgcolor -culoarea de (ond+ col atribute .-(ara atribute: aceeasi lati e pentru toate coloanele0idth -lati ea coloanei= in pi2eli= L sau B M Balign -alinierea te2tului pentru intreaga coloana 4se pare ca nu (unctioneaza in Netscape 7.DI5char -alinierea te2tului (ata de un anu it caracterbgcolor -culoarea de (ond+ thead .

+ / thead .-de(ineste titlul tabeluluibgcolor -culoarea de (ond+ tbod! . + / tbod! .-corpul tabeluluibgcolor -culoarea de (ond+ t(oot . + / t(oot .-pentru liniile de s(arsit ale tabeluluiA <"L3%"U#= ;HEA)= ;$")F= ;F""; nu sunt neaparat necesare intr-un tabel= dar uneori de arcarea (acuta de ele este (olosita de alte arca1e= de e2. +;A$LE %ULES - 3%"U#S.bgcolor -culoarea de (ond

e5 Harti de i agini Sunt i agini care sunt Bi partiteB in ai ulte zone= in (unctie de zona pe care se e2ecuta clicG= bro0serul a(iseaza o alta pagina. )e e2e plu= pe un site dedicat turis ului a putea avea pe pagina principala o i agine care reprezinta harta tarii 4in care de(ini zonele dupa conturul 1udetelor5A in cazul unui clicG in zona $rasov se incarca o pagina care descrie diverse obiective turistice din 1udet si/sau contine o i agine a hartii 1udetului= pe care de(ini alte zone in 1urul localitatilor= iar un clicG pe o localitate ar duce la alta pagina care descrie obiectivele turistice din localitate. " harta de i agini ar putea (i (olosita si pentru navigarea in cadrul unui site: daca ave ai ulte butoane de navigare grupate se poate (olosi o i agine care reprezinta toate butoanele - ai ulte i agini se incarca ai incet decat o i agine cu di ensiunea egala cu su a celorlalte 4Gb5 deoarece co unicarea cu serverul 4cand se cere i aginea5 se (ace o singura data. #ana aici nu ai avanta1eA dezavanta1ul a1or este ca un vizitator care are bro0serul setat sa nu incarce i agini pentru a naviga ai repede nu va intelege ai ni ic 4pute totusi (olosi arca1ul alt de speci(icare a te2tului alternativ pentru i agini5. Instructiune3tri%ute4escriere+ i g atribute .- arca1 de includere a i aginiloris apspeci(ica (aptul ca este o harta de i agine pe server 4se (oloseste ai rarA de obicei (olosi harti de i agine la client5use ap - B nume_harta Bspeci(ica harta de i agine la clientlo0scr - B url Bi aginea de rezolutie scazuta care se incarca pri a 4doar pentru Netscape5+ ap atribute . + / ap .-speci(ica regiunile unei harti de i agine la clientna e - B nume_harta Bnu ele hartii de i agine 4corespunzator atributului USE:A# al arca1ului +I:3.5+ area atribute .-de(ineste o regiune a unei harti de i agineshape - B orma B(or a regiunii: rect sau rectangle 4dreptunghi5= circle sau circ 4cerc5= point 4punct5= pol! sau pol!gon 4poligon5 EEE Netscape 7.DI nu a BintelesB decat circle= nu si circcoords - B coordonate Bcoordonatele unei regiuni 4in pi2eli5A se calculeaza in (unctie de coltul din stanga sus al i aginii 4care are coordonatele 4J= J5= adica 2 - J= ! - J5A variaza in (unctie de SHA#E - (or a regiunii:

- pentru rect 4dreptunghi5 se dau coordonatele colturilor din stg. sus si dr. 1os ale regiunii - pentru circ 4cerc5 se dau coordonatele centrului cercului si raza - pentru point 4punct5 se dau coordonatele punctului - pentru pol! 4poligon5 se dau coordonatele colturilor poligonuluihre( - B url BU%L - ul asociat regiunii speci(icate din cadrul i aginiiA in cazul unui clic pe acea regiune se incarca pagina speci(icata prin U%Lalt - B text Bte2tul alternativ asociat regiunii speci(icate din cadrul i aginiiA apare plasand ouseul deasupra regiunii respective sau celor cu bro0serul setat sa nu incarce i agini EEE Netscape 7.DI nu a a(isat decat pri ul te2t dat cu alt Harti de i agini - e2e plu : ap = use ap = area shape

<odul sursa al acestei pagini este:+ht l.- indica bro0serului ca incepe un docu ent H;:L+head.- inceputul antetului+title. Harti de i agini - e2e plu : ap = use ap = area shape+/title. - titlul de pe bara de titlu a bro0serului+/head.s(arsitul antetului+bod! bgcolor-0hite.- inceputul corpului docu entului+h@. Harti de i agini - e2e plu +/h@.- pri ul te2t din pagina+center.- aliniaza pe centru aterialul care ur eaza+i g src-B../(oto/i agine.gi(B use ap-B> apIB border-J 0idth-@JJ height-@JJ alt-Bcontine 6 zoneB.- include i aginea 4de di ensiuni @JJ2@JJ pi2eli5 si o de(ineste ca (iind o harta de i agini la client+/center.- s(arsitul alinierii pe centru+ ap na e-B apIB.- incepe sa de(ini regiunile hartii de i agini nu ita apI+area shape- BrectB coords- B6J=6J=NJ=NJB hre(- Brect.ht B alt-BdreptunghiB.- de(ineste o regiune dreptunghiularaA coltul din stg. sus are 2-6J= !-6JA coltul din dr. 1os are 2-NJ= !-NJA cu clicG a1unge la pagina 4(isierul5 rect.ht +area shape- BcircleB coords- BIDJ=DJ=7JB hre(- Bcirc.ht B alt-BcercB.- de(ineste o regiune circularaA centrul cercului are 2-IDJ= !-DJ= iar raza-7JA cu clicG a1unge la pagina 4(isierul5 circ.ht +area shape- Bpol!B hre(- Bpol!.ht B coords- BJ=IIJ=@JJ=IIJ=IJJ=@JJB

alt-Bpoligon 4triunghi in acest caz5B.- de(ineste o regiune de (or a unui poligon cu 6 colturiA pri ul colt are 2-J= !-IIJA al doilea are 2-@JJ= !-IIJA al treilea are 2-IJJ= !-@JJA cu clicG a1unge la pagina 4(isierul5 pol!.ht +E--inceput de co entariu in codul sursa+area shape- BrectB coords- BJ=J=@JJ=@JJB hre(- Brest.ht B.- este ase#ata ultima si de(ineste o regiune dreptunghiulara 4de(inita prin coltul din stg.sus 4J=J5 si dr.1os 4@JJ=@JJ55 de ari ea intregii i agini 4@JJ 2 @JJ pi2eli5A in cazul unui clicG pe i agine dar oriunde in a(ara regiunilor de(inite ai sus= ne duce la pagina 4(isierul5 rest.ht A in acest caz instructiunea nu este interpretata de bro0ser 4deoarece este inclusa in codul sursa ca un co entariu5 iar ouse-ul are (or a unei pal e 4indica legatura5 doar deasupra regiunilor de(inite ai sus--.- s(arsit de co entariu in codul sursa+/ ap.- ter ina de de(init regiunile hartii de i agini nu ita apI+/bod!.- s(arsitul corpului docu entului+/ht l.- s(arsitul docu entului H;:L In acest caz= atributul H%EF din cadrul instructiunilor A%EA indica legaturi spre pagini 4(isiere5 di(eriteA este posibil ca unele dintre ele sa indice legaturi spre acelasi (isier= in cadrul caruia sa ave de(inite ancore 4cu +a na e- nume_ancora. te2t,ancora I= @= ... +/a.5A atunci H%EF ar avea (or a: H%EF - B nu e,(isier.ht l > nu e,ancora B. (5 I agini Instructiunea3tri%ute4escriere+ i g atribute .- arca1ul de includere a i aginiisrc - B url Badresa (isierului gra(ic 4url absolut sau relativ5alt - B text Bte2tul alternativ care este a(isat celor care navigheaza (ara i aginialign -alinierea i aginii in pagina: right 4dreapta5= le(t 4stanga - i plicit5 alinierea ele entelor din 1urul i aginii: top 4sus5= iddle 4 i1loc5= botto 41os5height -inalti ea i aginii 4in pi2eli sau L50idth -lati ea i aginii 4in pi2eli sau L5border - ari ea chenarului din 1urul i aginii 4in pi2eli5hspace -spatiu pe orizontala in 1urul i aginii 4in pi2eli5vspace -spatiu pe verticala in 1urul i aginii 4in pi2eli5 ?olositi intotdeauna atri%utele +idth si height (exprimate in pixeli): ele re#er&a in pagina un spatiu cu latimea si inaltimea specificate si permit afisarea paginii si a textului inainte de receptionarea imaginii de la ser&er. I agini - e2e ple

I +i g src-B../(oto/i agine.gi(B.

obtine

i aginea 4src5 i agine.gi( nede(or ata= in

ari ea ei originala

@ +i g src-B../(oto/i agine.gi(B %order-IJ.

obtine i aginea i agine.gi( in chenar 4%order5 de IJ pi2eli

ari ea ei originala= nede(or ata= cu un

6 +i g +idth-@JL src-B../(oto/i agine.gi(B.

i aginea se obtine nede(or ata= pe @JL din lati ea 4+idth5 spatiului disponibil 4in acest caz intregul ecran5

7 +i g height-@JL src-B../(oto/i agine.gi(B.

i aginea se obtine nede(or ata= pe @JL din inalti ea 4height5 spatiului disponibil 4in acest caz intregul ecran5 D +i g +idth-?JL height-DJL src-B../(oto/i agine.gi(B.

i aginea se obtine de(or ata= pe o lati e 4+idth5 de ?JL si inalti e 4height5 DJL din spatiul disponibil 4in acest caz un tabel de 7JJ2@JJ pi2eli5 8 +i g src-B../(oto/i agine.gi(B +idth-NJ height-NJ.

i aginea se obtine nedeformata 4deoarece pentru a bele di ensiuni a pastrat proportia de N/@J (ata de original5= inalta 4height5 de NJ si lata 4+idth5 de NJ pixeli

N +i g src-B../(oto/i agine.gi(B +idth-NJ height-NJL.

i aginea se obtine de(or ata= inalta 4height5 de NJ L din inalti ea spatiului disponibil si lata 4+idth5 de NJ pi2eli O +i g alt-Bi agine...B 0idth-@JL src-B../(oto/i agine.gi(B.

i aginea se obtine nede(or ata= pe @JL din lati ea 40idth5 spatiului disponibil 4in acest caz intregul ecran5A alt - Bi agineB reprezinta te2tul alternativ 4apare daca lasa ouse-ul ne iscat deasupra i aginii sau la cei ce navigheaza (ara i agini5A este reco andata (olosirea atributului alt ? te2t+i g hspace-DJ height-DJ 0idth-IJJ src-B../(oto/i agine.gi(B.te2t

te2t

te2t i aginea se obtine de(or ata= cu o lati e 40idth5 de IJJ pi2eli si inalti e 4height5 de DJ pi2eliA in stanga si dreapta i aginii e2ista un spatiu pe orizontala 4hspace5 de DJ pi2eli

IJ te2t+br.+i g &space-DJ height-DJ 0idth-IJJ src-B../(oto/i agine.gi(B.+br.te2t te2t

te2t i aginea se obtine de(or ata= cu o lati e 40idth5 de IJJ pi2eli si inalti e 4height5 de DJ pi2eliA deasupra si dedesubtul i aginii e2ista un spatiu pe verticala 4&space5 de DJ pi2eli 3linierea imaginii in pagina II +i g src -B../(oto/i agine.gi(B align-right height-@JL.+br clear-all.te2t te2t . . . te2t te2t te2t . . . te2t i aginea se obtine nede(or ata= la @J L din lati ea spatiului disponibil= aliniata 4align5 la dreaptaA este necesar %r clear5all sau %r clear5right pentru ca te2tul sa apara sub i agine.

I@ <u : +i g src -B../(oto/i agine.gi(B align-right height-@JL.+br.te2t te2t . . . te2t te2t te2t . . . te2t te2tul nu ai apare sub i agine= ci in stanga ei

I6 <u : +i g src-B../(oto/i agine.gi(B align-le(t height-@JL.+br.te2t te2t . . . te2t te2t te2t . . . te2t te2tul nu ai apare sub i agine= ci in dreapta ei

I7 Fara BalignB : +i g src-B../(oto/i agine.gi(B height-@JL .+br.te2t te2t . . . te2t

te2t te2t . . . te2t te2tul apare sub i agine

ID )eoarece BalignB nu pri este valoarea BcenterB pute (olosi: te2tI te2tI . . . te2tI+center.+i g src-B../(oto/i agine.gi( B height-@JL.+/center.te2t te2t . . . te2t te2tI te2tI . . . te2tI @8@8@8@8@8P @8

@Nb1b1QRQR@N@N@N@N@N@N@N@N@N@N@N@N@N@N@N@N@N@N @NSs@NTU @NTU @NG

KTKTKTKTKTKTKTKTKTKTKTKTKTKTKTKTK TKTKTKTKTKTKTKTKTKTKTKTKTUUVKTKTK TKTKT@O@O@O@OVVW@O@O@O@O@O@O@O@O@ OVVW@O@O@O@O@O@O@O@O@O@O@O@O@O@O@ O@O@O X@O@O@O@O@OY@O@O@O@O@O@OY@O@OY@O@O@O@O@O@OYKTKTKTKT@O@OY@O@O@O@O@O@OY@ O@O@O@O@O@OY@O@OZ@O@O@O@O@O@O@O@O@O@O@OY@O@O@O@O@O@OY@O@O@O@O@O@OY@O@

O@O@O@O@O te2t te2t . . . te2t te2tul este aliniat la partea superioara a i aginii

IN <u : te2t te2t . . . te2t+i g src-B../(oto/i agine.gi(B align- iddle height-@JL.te2t te2t . . . te2t

te2t te2t . . . te2t te2t te2t . . . te2t te2tul este aliniat la 1u atatea i aginii

IO <u : te2t te2t . . . te2t+i g src-B../(oto/i agine.gi(B align-botto te2t . . . te2t

height-@JL.te2t

te2t te2t . . . te2t te2t te2t . . . te2t te2tul este aliniat la baza i aginii

I? Fara BalignB : te2t te2t . . . te2t+i g src-B../(oto/i agine.gi( B height-@JL.te2t te2t . . . te2t

te2t te2t . . . te2t te2t te2t . . . te2t te2tul este aliniat 4i plicit5 la baza i aginii @J +i g src-B../(oto/hello.gi(B border-I 0idth-IDJ height-8J.

E2ista (isiere .gi( ani ate si / sau transparenteA dupa cu vedeti hello.gi( le i bina pe a andoua. Aceeasi i agine este plasata in a bele celule ale unui tabel cu o linie si doua coloane: pentru pri a celula nu este speci(icata culoarea (ondului celulei 4deci ia culoarea paginii5A pentru a doua este dat un (ond galben= care se BvedeB prin i agine. @I #ute (ace sa apara un te2t pe bara de stare a bro0serului 4deasupra butonului BStartB5atunci cand ouse-ul este plasat deasupra unei i agini si un alt te2t care ramane 4aveti gri1a sa alegeti un te2t potrivit oricarei situatii - plasati ouse-ul pe i agine= apoi si pe legaturile BHo eB si BI aginiB de ai 1os si veti intelege la ce a re(erA acest subiect il gasiti tratat ai pe larg la c5 %e(erinte5 pe bara de stare cand lua ouse-ul de pe i agine:

<odul sursa este: +i g height-DJ 0idth-DJ src-B../(oto/i agine.gi(B alt-Bi aginea reprezinta ...B "n:ouse"ut-Bsel(.status-Kte2t ce ra ane pe bara de stare cand lua ouse-ul de pe i agineKAreturn trueB "n:ouse"ver-Bsel(.status-Kte2t ouse-ul este deasupra i aginiiKAreturn trueB.

ce apare pe bara de stare cand g5 <adre

<u a1utorul cadrelor pute i parti ecranul in ai ulte zone si alege ce (isier sa apara in (iecare zona. <el ai (olosita este i partirea in @ coloane: in coloana din stanga= ai ingusta= sunt legaturile= iar in zona din dreapta se a(iseaza (isierele accesate. Instructiune3tri%ute4escriere+ (ra eset atribute . + / (ra eset .-de(inirea i partirii paginii in cadrecols -nu arul si ari ea relativa a coloanelorro0s -nu arul si ari ea relativa a liniilorborder - ari ea chenarului 4pi2eli5A in general nu dori chenar si (olosi border -J i preuna cu (ra espacing -J si (ra eborder -no= pentru ca nu sti ce bro0ser 4cu ce valori setate ca i plicite5 (oloseste vizitatorul= deci ai bine le speci(icati dvs.(ra eborder -speci(ica daca cadrul de(init cu F%A:ESE; are sau nu chenar : !es sau noA i plicit !es(ra espacing - ari ea spatiului dintre cadre 4pi2eli5A daca il (olositi i preuna cu border= dar cu valori di(erite= pentru unele bro0sere pri eaza valoarea lui (ra espacing 4e2. IE.D5 iar pentru altele valoarea lui border 4e2. Netscape 7.DI5+ (ra e atribute .-de(initia unui cadrusrc - B url Bsursa cadruluina e -nu ele cadrului= utilizat de arca1ul + a hre( BurlB target - nu e . scrolling -optiuni pentru bara de derulare : !es 4da5= no 4nu5= auto 4daca este nevoie5A i plicit BautoBnoresizepentru a nu redi ensiona tragand de chenar 4doar daca are5 arginheight -spatiu deasupra si sub un cadru 4pi2eli5 argin0idth -spatiu la stanga si la dreapta unui cadru 4pi2eli5+ no(ra es . + / no(ra es .-sectiunea de pagina a(isata bro0serelor care nu pot interpreta cadre+ i(ra e atribute . + / i(ra e .-cadru intern 4doar IE5src - B url Bsursa cadruluina e -nu ele cadrului= utilizat de arca1ul + a hre( - BurlB target - nu e . height -inalti ea cadrului inglobat 4pi2eli sau L50idth -lati ea cadrului inglobat 4pi2eli sau L5(ra eborder -speci(ica daca cadrul de(init cu IF%A:E are sau nu chenar 4!es sau noA i plicit !es5scrolling -optiuni pentru bara de derulare : !es 4da5= no 4nu5= auto 4daca este nevoie5A i plicit BautoB <adre [ e2e plul I Acest tip de i partire in cadre 4redi ensionate dupa dorinta5 a intregului displa! poate (i (olosit ca pagina principala pentru un site= de aceea a denu it (isierul care o genereaza inde2.ht l. index.html - codul sursa :

+ht l.

+head. +title.<adre - e2e ple+/title. +/head. +(ra eset ro0s-B8DL=MB border-J (ra espacing-J (ra eborder-no. +E-- de(ini @ cadre orizontale 4ro0s5A

cel de sus ocupa 8D L din spatiul disponibil= cel de 1os ocupa M= adica restul. --. +(ra e src-Bsursa-inde2.ht B na e-BalbB scrolling-BautoB. +E-- cadrul de sus: are nu e 4alb5si va contine (isierul sursa-inde2.ht A nu ele il (olosesc pentru a apela cadrul cand voi dori sa inlocuiesc (isierul. --. +(ra eset cols-B@@J=MB border-J (ra espacing-J (ra eborder-no. +E-- cadrul de 1os: de(inesc alte @ cadre= verticale 4cols5: cel din stanga: lat de @@J pi2eli cel din dreapta: M= adica restul (erestrei--. +(ra e src-Bcuprins.ht B scrolling-BautoB argin0idth-@. 4cel gri5 --.

+E-- cadrul din stanga va contine (isierul cuprins.ht

+(ra e src-Bgeneral.ht B na e-BalbastruB scrolling-BautoB. +E-- cadrul din dreapta: initial contine (isierul general.ht A are nu e: albastru= pentru a putea re(eri cadrul cand doresc sa inlocuiesc (isierul --. +/(ra eset. +E-- incheierea de(inirii cadrelor verticale --. +/(ra eset. +E-- incheierea de(inirii cadrelor orizontale --.

+no(ra es. +bod!. ;%E$UIE F"L"SI; UN $%"&SE% <A%E IN;E%#%E;EA\A <A)%E +/bod!. +/no(ra es. +/ht l.

<adre [ e2e plul @ Acest tip de i partire in cadre 4redi ensionate dupa dorinta5 a intregului displa! poate (i (olosit ca pagina principala pentru un site = de aceea a denu it (isierul care o genereaza inde2.ht l .

index.html - codul sursa : +ht l. +head. +title.<adre - e2e ple+/title. +/head.

+(ra eset cols-B@@J=MB border-J (ra espacing-J (ra eborder-no. +E-a de(init @ cadre verticale 4cols5A

cel din stanga ocupa @@J pi2eli din spatiul disponibil= cel de 1os ocupa M = adica restul. --.

+(ra e src-Bcuprins.ht B scrolling-BautoB argin0idth-J. +E-in cadrul din stanga se a(la (isierul cuprins.ht 4cel gri5--.

+(ra eset ro0s-BNJL=MB border-J (ra espacing-J (ra eborder-no. +E-in cadrul din dreapta a de(init @ cadre orizontale

4ro0s5: cel de sus ocupa NJ L din spatiul disponibil= cel de 1os ocupa M = adica restul. --.

+(ra e src-Bsursa-inde2.ht B scrolling-BautoB na e-BalbB +E-cadrul de sus: are nu e 4alb5 si va contine (isierul sursa-inde2.ht A nu ele il (olosesc pentru a apela cadrul cand voi dori sa inlocuiesc (isierul. --. argin0idth-J.

+(ra e src-Bgeneral.ht B na e-BalbastruB scrolling-BautoB. +E-cadrul de 1os: initial contine (isierul general.ht A are nu e: albastru= pentru a putea re(eri cadrul

cand doresc sa inlocuiesc (isierul --.

+/(ra eset. +E-- incheierea de(inirii cadrelor orizontale --.

+/(ra eset. +E-- incheierea de(inirii cadrelor verticale --.

+no(ra es. +bod!. ;%E$UIE F"L"SI; UN $%"&SE% <A%E IN;E%#%E;EA\A <A)%E +/bod!. +/no(ra es. +/ht l.

3ENE%ALI;A;I nu ele cadrului - albastru nu e (isier - general.ht (unctie - ocupa intreg cadrul nu it BalbastruB

h5 <aractere speciale #entru a (ace s] apar] ^n bro0ser caracterul din coloana 0aracter= in codul surs] trebuie s] ave 0od T!" 0aracter0od T!"(emnificatie__a pAa pensand+_ltA ai ic 4less than5._gtA ai are 4greater than5#entru a obtine a1uscule= le (olosi in codul sursa in locul literelor ici . E2. : _AcircA - `a_aacuteA a ic cu accent ascutit 4acute5b_agraveAa ic cu accent gravc_acircAa ic cu accent

circu (le2]_atildeAa ic cu tild]d_au lAa ic cu doua puncte 4u blaut5e_aringAa ic cu inel 4ring5f_ccedilAc ic cu sedil]g_ntildeAn ic cu tild]h_oslashAo ic barat 4slash5i_szligAs-! ic ligaturatj_ikuestAse nul de ^ntrebare inversl_poundAlira sterlin]m_centAcentn_cop!Asi bolul de cop!righto_regAsi bolul de arc] ^nregistrat] _nbspA(orteaz] spatii ultipleA chiar dac] ^n codul surs] ave ai ulte spatii= bro0serul a(iseaz] unul singurA se poate (olosi pentru a scrie un paragra( cu aliniatB_kuotAghili ele_scedilA_scedilAnu a obtinut s cu sedil]A a(iseaz] e2act codul surs]_tcedilA_tcedilAnu a obtinut t cu sedil]A a(iseaz] codul surs] i5 <ulori : e2pri ate prin valoarea %3$ E2ista instructiuni care au atribute prin care se pot speci(ica culori 4e2.: <"L"%= $3<"L"%= $"%)E%<"L"%= etc.5. <ulorile se pot speci(ica prin nu ele lor 4in engleza= de e2.: red= 0hite= etc.5 sau prin valoarea %3$. <ulorile se obtin prin co binarea culorilor de baza %ed= 3reen= $lue si rezulta un grup de 8 ci(re he2azeci ale precedate de se nul > 4de e2.: $")F $3<"L"% - > FFJJJJ are ca rezultat un (ond al paginii de culoare rosie5. %= 3= $ sunt initialele culorilor de baza: % 4%ed - rosu5= 3 43reen - verde5= $ 4$lue albastru5. #ri ele @ ci(re din cele 8 reprezinta valoarea lui %= ur atoarele @ valoarea lui 3 iar ulti ele @ pentru $. #entru a obtine culori care sunt a(isate la (el pe orice siste 4&indo0s= :acintosh5 este bine sa (olosi asa - nu itele culori sigure Internet. $aza IJ are ca ci(re: J= I= @= 6= 7= D= 8= N= O= ?. $aza I8 are ca ci(re: J= I= @= 6= 7= D= 8= N= O= ?= a 4- IJ5= b 4- II5= c 4- I@5= d 4- I65= e 4- I75 ( 4- ID5. Ur atorul tabel nu cuprinde toate nuantele care se pot obtine pentru % - JJA deoarece ele sunt valori e2pri ate in baza I8= intre $ - JJ si $ - II e2ista valorile: JI= J@= J6= J7= JD= J8= JN= JO= J?= Ja= Jb= Jc= Jd= Je= J(= IJ. Ide pentru 3. M5DD= 5JJII@@6677DD88NNOO??aabbccddee (( N 5JJ II @@ 66 77 DD 88 NN OO ?? aa bb cc dd ee (( Se pot realiza si alte tabele cu nuantele culorilor obtinute pentru di(erite valori ale lui % deoarece intre % - JJ si % - 66 e2ista o ulti e de valori pe care le poate lua % 4JI= J@= ... = J(= IJ= II= I@= ... = I(= @J= @I= @@ = ... @(= 6J= 6I= 6@5 dar di(erentele sunt relativ iciA le puteti realiza singur inlocuind in codul sursa 4(olosind (unctia %E#LA<E a editorului de te2te: inlocuiti >99 4pri ele doua ci(re din toate sirurile >222222 ce apar in cadrul unui singur tabel5 cu valoarea

dorita 4de e2. >J(55A in continuare apar nu ai tabelele construite pentru % - 66= 88= ??= cc= ((. 15 Liste Instructiune3tri%ute4escriereliste de tip de(initie+dl. +/dl.-lista de tip de(initie+dt.-ter en de de(initie+dd.-descriere de de(initieliste neordonate 4 arcate 5+ul atribute. +/ul.-lista neordonata 4 arcata5t!pe-(or a arca1ului: circle= skuare= disc 4i plicit5+li.-ele ent de listaliste ordonate 4 nu erotate 5+ol atribute. +/ol.-lista ordonata 4nu erotata5t!pe-tipul nu erotarii: A= a= I= i= I 4i plicit5start-cu a cat-a valoare incepe 4i plicit cu pri a5+li.-ele ent de listaC co binatii de liste C G5 Facilitarea gasirii paginii de catre otoarele de cautare

Instructiune3tri%ute4escriere+title. +/title.-- arca1ele pereche ;I;LE - aici da titlul: cateva cuvinte sugestive despre continutul paginii - aceste cuvinte vor apare pe bara de titlu a bro0seruluiA daca pagina este adaugata intr-o lista (avorita sau listata ca rezultat al unei cautari= ele apar ca nu e al paginii.+ eta atribute.na e -Ge!0ords= description= author= ... content -descrie valoarea lui na e In general in antetul unei pagini 0eb= intre arca1ele +HEA). si +/HEA).= e2ista ai ulte arca1e :E;A= cu atribute na e - content perechi. E2e plu: +ht l.+head.+title.;itlul dorit+/title. + eta content-Bte2t/ht lA charset-0indo0sI@D@B http-ekuiv-<ontent-;!pe. indica bro0serului ca este un (isier H;:LA charset stabileste tipul de caractere 4in general 0indo0s-I@D@5= dar e2ista si altele + eta na e-Ge!0ords content-Bo lista de cuvinte= separate prin virgulaB. pagina va (i listata de un otor de cautare 4la care ati inscris de1a site-ul5 in cazul unei cautari in care s-au (olosit cuvinte din aceasta lista + eta na e-description content-B" (raza care descrie pe scurt continutul paginiiB. in cazul unei cautari dupa cuvinte-cheie= otorul de cautare ne da o lista de paginiA pentru (iecare pagina 4site5 din lista apare titlul ei 4dat cu arca1ul ;I;LE5 ur at de o (raza 4cea de la na e-description content-Bo (raza care descrie ...B5A daca nu ave in arca1ul :E;A acea (raza= otorul va inde2a dupa pri a (raza din paginaA tot ea va (i data la o eventuala cautare+ eta na e-author content-Bnu ele dvs.= e- ail= etcB. nu este neaparat necesara +/head.+bod!. .... +/bod!.+/ht l. l5 :odele de stiluri In speci(icatiile H;:L 7.J au aparut speci(icatiile pentru odele de stiluri= cunoscute ca :odele de Stiluri in <ascada 4<ascading St!le Sheets - <SS5. #ana la acea data (or a= culoarea si ari ea te2tului puteau (i date cu instructiunea

B(ontB si cu atributele sale: B(aceB= BcolorB= BsizeB. :odelele de stiluri pot (i aplicate aproape oricarei instructiuni= (olosind atributele din tabelul de ai 1os. :odelele de stiluri pot (i aplicate in ai ulte oduri: a) intern: atributele sunt speci(icate in interiorul arca1ului de deschidere al (iecarei instructiuniA este cel ai neecono ic od. %) speci(icate in antetul (isierului: speci(ica la inceputul unui (isier diverse atribute pentru ai ulte stiluri de te2tA acele stiluri le pute (olosi de ai ulte ori in corpul acelui (isier (ara a ai speci(ica si atributele. c) e2tern: atributele pentru diverse stiluri sunt speci(icate intr-un (isier special 4pe care il pute construi cu un editor de te2te 4Notepad5 si il salva ca (isier de tip te2t cu e2tensia .css 5 ast(el incat pot (i apelate de orice alt (isier de pe site. Este odul cel ai reco andat= ai ales pentru site-uri ari. #ute (ace chiar ca un anu it stil sa poata (i aplicat nu ai cu o anu ita instructiune= iar altele sa poata (i aplicate cu ai ulte instructiuni. Unele atribute din tabelul de ai 1os pot (i speci(icate si sub o (or a prescurtataA se poate inta pla ca unele caracteristici speci(icate de dvs. sub (or a prescurtata sa nu (unctioneze - (olositi (or a e2plicita= neprescurtata. 3tri%ut 4escriere/aloribacGgroundi agini sau culori de (undalU%L-ul 4i aginii5 sau culori date prin nu e sau valoare %3$colorculoarea te2tuluinu e sau valoare %3$(ont(a il!tipul (ontuluinu ele (ontului sau al (a iliei de (onturi(ont-sizedi ensiunea (ontuluidata in puncte4pt5= inch4in5= centi etri4c 5= pi2eli4p25(ont-st!lete2t cursivnor al= italic(ont0eightgrosi ea (ontuluie2tra-light= light= de i-light= ediu = de i-bold= bold= e2tra-boldline-heightdistanta dintre liniile de baza ale randurilordata in puncte4pt5= inch4in5= centi etri4c 5= pi2eli4p25= procent4L5 argin-le(tdistanta (ata de arginea din stanga a paginiidata in puncte4pt5= inch4in5= centi etri4c 5= pi2eli4p25 argin-rightdistanta (ata de arginea din dreapta a paginiidata in puncte4pt5= inch4in5= centi etri4c 5= pi2eli4p25 argin-topdistanta (ata de te2tul precedent sau (ata de arginea de sus a paginiidata in puncte4pt5= inch4in5= centi etri4c 5= pi2eli4p25te2t-alignalinierea te2tuluile(t4stanga5= center4centru5= right4dreapta5= 1usti(!te2t-decorationevidentierea te2tuluinone4ni ic5= underline4subliniat5= italic4cursiv5= line-through4taiat5te2tindentdistanta pri ului rand (ata de arginea din stangadata in puncte4pt5= inch4in5= centi etri4c 5= pi2eli4p25border-st!letipul chenaruluinone= groove= dotted= dashed= solid= double= ridge= inset= outsetborder-0idthgrosi ea chenaruluidaTpq6N36N 6N6Nj6N6N6N6N6N6N6N6N6N6N6N6N6NP 6N

6Ob1b1QRQR6O6O6O6O6O6O6O6O6O6O6O6O6O6O6O6O6O6O 6OSs6OTU 6OTU 6OP

6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?VVW6?6?6?6 ?6?6?6?6?6?VVW6?6?6?6?6?6?6?6?6?VVW6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6?6 ?X6?6?6?6?6?Y6?6?6?6?6?6?Y6?6?Y6?6?6?6?6?6?Y6?6?6?6?6?6?Y6?6?6?6?6?6?Y 6?6?6?6?6?6?Y6?6?Z6?6?6?6?6?6?6?6?6?6?6?Y6?6?6?6?6?6?Y6?6?6?6?6?6?Y6? 6?6?6?6?6?Y6?6?6?6?6?6?Y6?6?r6?Tpq6?36? 6?6?j6?6?6?6?AWAWAWAWAWAWAWAWAWG AW

OD%2%2XYXYODODODODOD7J7JODODODODODODODODODODOD

ODZsOD[\ OD[\ ODG

OCOC7I7 I7I7I7I 7I7I7I7 I7I7I7I 7I7I7I7 I7I7I7I7I7I7I7I7I7I7I7IVVW7I7I7I7I7I7I7I7I7IVVW7I7I7I7I7I7I7I7I7IVVW 7I7I7I7I7I7I7I7I7I7I7I7I7I7I7I7I7I X7I7I7I7I7IY7I7I7I7I7I7IY7I7IY7I7I7I7I7I7IY7I7I7I7I7I7IY7I7I7I7I7I7IY7 I7I7I7I7I7IY7I7IZ7I7I7I7I7I7I7I7I7I7I7IY7I7I7I7I7I7IY7I7I7I7I7I7IY7I7 I7I7I7I7IY7I7I7I7I7I7IY7I7Ir7Intru stiluriclass-speci(ica un anu it stilid-speci(ica un anu it stil