3.Bazele limbajului HTML Ce este limbajul HTML ? HTML nu este un limbaj de programare.

HTML s-a dezvoltat ca un subdomeniu al SGML(Standard Generalized Markup Language) care este un limbaj de marcare mai avansat si a fost mult timp favoritul DoD(Department of Defense).Problema schimbului de informatie intre doua sau mai multe calculatoare este o problema extrem de complexa. Rezolvarea acestei probleme implica existenta unor "reguli de comunicare" pe care calculatoarele sa le respecte. O comunicare reala intre doua parti - fie ele calculatoare sau nu - se bazeaza pe faptul ca informatia oferita de una dintre parti poate fi preluata si mai apoi inteleasa de catre cealalta. Regulile dupa care doua calculatoare care ruleaza sub diferite sisteme de operare comunica sunt stabilite de catre protocoale. Despre acestea am vorbit pe scurt in capitolul precedent. Dar in afara acestor reguli mai apare nevoia existentei unui "limbaj" pe care ambele calculatoare sa-l inteleaga. In WWW acesta este limbajul HTML.Redus la esenta, HTML (Limbajul de Marcare HiperText) este alcatuit dintr-un set de marcaje, coduri speciale inserate in continutul unui text, care ofera unui program numit interpretor de HTML informatii despre modul de formatare a continutului unui document si despre legaturile acestuia cu alte fisiere. Elemente de marcare Elementele de marcare sunt principalele componente ale limbajului HTML. Ele apar in document sub forma de etichete (tag-uri) sau controale HTML. Numele elementului apare in controlul de inceput (sub forma <nume-element>) si in cel de sfarsit (sub forma </nume-element>). Exemplu: <BODY> si </BODY> Portiunea din document incadrata de controalele HTML se mai numeste continutul elementului marcat si este partea de document asupra caruia actioneaza respectivul mod de formatare.Anumite elemente nu necesita etichete de sfarsit (Ex: P), iar altele nu au etichete de sfarsit, in general pentru ca nu au un continut pe care sa-l incadreze (Ex: BR). Exista, de asemenea, elemente prezente in document care pot sa nu fie marcate cu ajutorul etichetelor, prezenta lor in cadrul documentului fiind implicita (Ex: BODY).Limbajul HTML nu face distinctie intre literele mari si literele mici ale alfabetului. De aceea formularile <BR>, <br> sau <Br> desemneaza acelasi control. Atribute Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor perechi de nume si valori in interiorul etichetei de inceput, dupa numele elementului referit. Exemplu: <H1 id = "Paragraful 1" color = "blue"> Prezenta ghilimelelor la valorile atributelor este optionala. Fiecare control HTML are anumite atribute cu valori presetate care pot fi modificate de catre creatorul documentului conform dorintei acestuia. Ele pot fi, de asemenea, modificate dinamic, in timpul interactiunii cu utilizatorul, cu ajutorul scripturilor. Dar despre ele, mai tarziu... Atributele ale caror valori sunt de tip boolean (adica adevarat sau fals) sunt setate in felul urmator: - absenta lor in eticheta de inceput a marcajului echivaleaza cu valoarea false presetata - prezenta lor echivaleaza cu setarea valorii true Exemplu: Formularea <option selected = "selected"> sau <option selected> marcheaza atribuirea valorii true atributului selected, atribut al elementului option. Daca valoarea unui atribut nu este una valida ea va fi ignorata. Referinte de entitati

1

Pentru a introduce in continutul documentelor HTML unele caractere care nu fac parte din alfabetul limbii engleze, numite si caractere speciale, (cum ar fi è, ß sau ®) se folosesc marcaje speciale numite referinte de entitati sau referinte de caracter. Spre deosebire de controalele de marcaj despre care am vorbit in sectiunile anterioare, referintele de entitate nu sunt incadrate de caracterele "<" si ">". Ele incep intotdeauna cu caracterul ampresand "&" urmat de un text in stransa legatura cu caracterul pe care il reprezinta sau un cod numeric si se termina cu caracterul ";".De asemenea, caracterele folosite in marcajele HTML (<, >, &) se pot insera in cadrul documentului numai cu ajutorul referintelor de entitate. Iata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta: &amp; sau &#32 = & &lt; sau &#60 = < &gt; sau &#62 = > &quot; sau &@34 = " &reg; = ® Comentarii Reprezinta texte care apar in fisierul sursa HTML, dar care nu vor fi afisate de catre browser catre utilizator. Ele au rolul de a expune diferite aspecte legate de document in vederea realizarii unui fisier sursa cat mai clar si mai usor de inteles si corectat. Comentariile sunt incadrate de marcajele "<!--" si "-->". E foarte important ca in interiorul comentariului sa nu existe secventa de caractere "--" deoarece aceasta genereaza confuzie. Exemplu: <!-- Acesta este un comentariu care ocupa doua linii de text. --> Alinierea Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat pe orizontala relativ la elementul "container " care il contine se foloseste atributul align. Valorile acordate acestui atribut pot fi: left - pentru alinierea la stanga center - pentru pentru pozitionarea centrata right - pentru alinierea la dreapta Implicit, alinierea se realizeaza la stanga, cu exceptia cazului in care elementul de pozitionat contine text a carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea in interiorul controlului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz alinierea implicita este la dreapta. Pentru a determina alinierea pe verticala a unui element in cadrul elementului container se foloseste atributul valign cu urmatoarele valori posibile: middle - pentru pozitionarea centrata top - pentru alinierea la partea de sus a containerului bottom - pentru alinierea la partea de jos a containerului Culorile Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele uneia dintre cele 16 culori "sigure", adica acele culori care vor fi recunoscute si afisate de majoritatea calculatoarelor.Exprimarea numerica se realizeaza prin codul RGB ( adica RED-GREEN-BLUE ) al culorii.Codul este alcatuit din 3 numere cuprinse intre 0 si 255 scrise in baza 16, fiecare exprimand prezenta cantitativa a uneia dintre cele trei nuante care definesc codul culorii respective. Exemplu:

2

Iata cateva exemple: en = limba engleza 3 .. 20 pixeli si.Dimensiunea absoluta este referita in pixeli. Decembrie = 11) DD . TZD .reprezinta minutele cu valori intre 00 si 59. Iata un tabel cu numele si codul lor: Aqua #00ffff Navy #000080 Black #000000 Olive #808000 Blue #0000ff Purple #800080 Fuchsia #ff00ff Red #ff0000 Gray #808080 Silver #c0c0c0 Green #00ff00 Teal #008080 Lime #008000 White #ffffff Maroon #800000 Yellow #ffff00 Dimensiunile Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei moduri: a.ramane caracter scris cu litera mare pentru a marca inceputul scrierii orei hh . respectiv. Fiecare unitate contine 10 pixeli. 2*. pe un spatiu de 60 de pixeli disponibili. de la 00 la 23.reprezinta anul scris cu 4 cifre MM . -hh:mm pentru un fus orar in devans cu hh ore si mm minute fata de UTC. Astfel textul "width = 50%" exprima faptul ca elementul referit va avea ca latime jumatate din latimea disponibila a elementului in care este incadrat.<P style="color:#ff00cc"> Este de preferat ca atunci cand utilizati culori sa apelati la una din cele 16 culori numite "sigure".specifica o versiune a limbajului respectiv Cele doua componente vor fi separate de cracterul "-". Codul de limbaj este alcatuit din doua parti: Cod principal . Valori data-ora Formatul pentru scrierea acestor valori este : YYYY-MM-DDThh:mm:ssTZD unde YYYY .Dimensiunea relativa (procentuala) este referita in procente. De exemplu.reprezinta ziua din luna. dimensiunile notate 1*. Ea se exprima sub forma "i*". . Nu se admit formulari care contin AM sau PM. cu valori de la 01 la 31 T . Astfel ca cele trei dimensiuni exprimate mai sus reprezinta 10 pixeli. unde i este un numar care arata cate "parti" din total sunt revendicate. 30 pixeli.cu ajutorul caruia se identifica tara in care limbaujul este folosit Subcod (optional) .reprezinta secundele cu valori intre 00 si 59. Exemplu: 1994-11-05T08:15:30-05:00 Coduri de limbaje Pentru a specifica limba in care un anumit text este scris se foloseste atributul lang a carui valoare este codul de limbaj al tarii respective. c. De exemplu o exprimare de forma "width = 300" denota ca un anumit element are latimea de 300 pixeli b.repreinta ora scrisa cu doua cifre.reprezinta luna (Ianuarie = 01. ss .reprezinta precizarea fusului orar si poate lua urmatoarele valori: "Z" pentru Coordinated Universal Time (UTC) +hh:mm pentru un fus orar in avans cu hh ore si mm minute fata de UTC.Dimensiunea proportionala (multidimensiunea) este folosita atunci cand doua sau mai multe elemente impart un anumit numar de pixeli disponibili. 3* insumeaza 6 unitati in care spatiul disponibil va fi impartit. mm ..

cuvinte-cheie care folosesc motoarelor de cautare de documente.Corpul documentului Controalele <HTML> si <HTML> incadreaza antetul si corpul documentului .Sectiunea de informatii HTML b. Informatiile folosite in aceasta sectiune nu sunt afisate de catre browser. insa ea ajuta la o impartire mai clara a documentului pe sectiuni.Structura explicata a unui document HTML: <html> <head> <!--Sectiunea de antet a documentului cuprinde titlul documentului si definirea tipului si a setului de caractere folosit --> <title>Structura Documentului HTML</title> <META http-equiv="Content-Type" content="text/html. Prezenta acestor etichete in document este optionala.Ele comunica interpretorului HTML ca blocul de text cuprins intre ele este scris si formatat in limbajul HTML standard. Aici va fi plasat continutul paginii pe care o creati--> Salut. Aceasta este o pagina Web cat se poate de simpla. </body> </html> Sectiunea de informatii Sectiunea de informatii HTML ofera informatii asupra versiunii limbajului HTML folosit.afisat pe bara de titlu al programului de exporare sau va putea fi folosit de utilizatori pentru pastrarea documentului in listele 4 .en-US = limba engleza -varianta americana fr = limba franceza de = limba germana it = limba italiana es = limba spaniola pt = limba portugheza 4. in general.0 Transitional//EN"> Antetul documentului Sectiunea de antet a documentului este incadrata de controalele <HEAD> si </HEAD>.de obicei.Structura unui document Sectiunile unui document HTML Un document HTML este impartit in trei sectiuni: a. charset=iso-8859-1"> </head> <body> <!--Acesta este corpul documentului. ele avand doar rol informativ. Prezenta celor doua controale in document este optionala.Antetul documentului cuprinde.Sectiunea de antet a documentului c. informatii precum titlul documentului (pentru a fi afisat pa baza de sus a a ferestrei programului de navigare sau pentru ca documentul sa poata fi mai usor identificat de catre utilizator). precum si alte informatii legate de documentul creat. Textul aflat aici va fi . Multe editoare de HTML insereaza automat textul necesar la inceputul documentului Exemplu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Astfel: <TITLE> indica titlul documentului.

De aceea. Chiar daca marcarea corpului documentului cu cele doua etichete este optionala. adica informatii specifice protocolului HTTP si pe care browserul le "citeste" pentru a pregati afisarea documentului. In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza: -tipul documentului -setul de caractere folosit Tipul documentului pentru un document HTML este . iar daca valoarea va fi luata dintr-o locatie oarecare din exterior se va folosi controlul <LINK>. Corpul documentului Corpul documentului este locul unde se plaseaza continutul efectiv al documentului si este incadrat de controalele <BODY> si </BODY>. folosirea lor va determina o mai mare claritate in impartirea documentului pe sectiuni. fotbal. Astfel: 5 . -ISO 8859-6 .alfabetul arab. Printre cele mai folosite astfel de seturi aminitim: -ISO 8859-1 -(sau ISO Latin-1) reprezinta setul care contine cele mai raspandite extensii ale alfabetului latinsi este cel mai des intalnit. adica 128 de caractere) Exemplu: <META http-equiv="Content-Type" content="text/html.Se folosesc formularile: http-equiv= pentru numele informatiei meta content= pentru continutul (valoarea) informatiei respective. Exemplu: <META name="author" content="Superman"> <META name="keywords" content="Sport. charset=iso-8859-1"> Pentru alte tipuri de informatii meta cuprinse in antet se va utiliza formularea <META name="[nume proprietate]" content="[valoare proprietate]"> In acest mod se pot specifica informnatii privind autorul paginii respective.alfabetul chirilic. FIFA"> Despre elementul LINK vom vorbi intr-unul din capitolele urmatoare. -ISO 8859-5 . Setul de caractere reprezinta o multime de caractere folosite in alfabetul diferitelor limbi. <META> si <LINK> ofera asa-numitele meta-informatii despre document declarand anumite proprietati impreuna cu valorile acelor proprietati.codificarea ASCII restransa (pe 7 biti. Daca valoarea unei proprietati este definita intern se va folosi controlul <META>. Seturile de caractere sunt niste standarde stabilite de catre ISO (Organizatia Internationala pentru Standardizare) si reprezinta reguli de codificare a caracterelor. -ISO 646 .specifice ale acestui program. cu ajutorul elementului META se pot preciza informatiile care vor fi trimise in "header-ul" documentului. Controlul <BODY> poate sa contina atribute referitoare la fondul si marginile documentului sau culoarea textului. Succesul folosirii acestor doua controale depinde in mare masura de interpretorul de HTML utilizat de catre utilizator."text/html". pentru ca browserul sa poata descifra corect informatia pe care o primeste este recomandabil ca acest atribut sa fie specificat in antetul fiecarui document. caractere identificate printr-un numar de cod. sau informatii in scopuri de indexare a paginii de catre paianjeni sau motoare de cautare Web. De exemplu.

culoarea de fond fiind vizibila numai daca fondul imagini este transparent. el va fi afisat si multiplicat pentru a acoperi intreaga suprafata a documentului. bgcolor = "#0000ff" seteaza culoare fondului documentului (Aqua). charset=iso-8859-1"> </head> <body bgcolor="#00FFFF" text="#000080" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0> Aceasta pagina are culoarea de fond "aqua". Pentru a seta dimensiunile marginilor din stanga si de sus ale documentului se folosesc atributele: Pentru Internet Explorer: topmargin .pentru marginea din stanga Pentru Internet Explorer exista posibilitatea de a atasa unui document un fond sonor. tiparind doar eventualul continut marcat de eticheta respectiva. In cazul in care ambele sunt prezente.background = "imagine. Doua dintre atributele acestuia sunt foarte importante: src . Daca nu.pentru marginea de sus leftmargin . Insa aceste etichete "scapate" in corpul documentului pot provoca diferente semnificative 6 . fondul documentului va fi dat de culoarea setata de catre bgcolor. inexistenta sau o eticheta de sfarsit care nu are eticheta de inceput corespunzatoare) el nu o va lua in considerare.0 Transitional//EN"> <html> <head> <title>Document cu culoare de fond</title> <META http-equiv="Content-Type" content="text/html.pentru marginea din stanga Pentru Netscape Navigator: marginheight .pentru marginea de sus marginwidth .0 Transitional//EN"> <html> <head> <title>Document cu imagine si sunet de fundal</title> <meta http-equiv=”content-type” content=”text/html.jpeg" seteaza imaginea de fond a documentului. charset=iso-8859-1”> <bgsound src=”muzica. Daca acesta exista. O valoare egala cu -1 determina repetarea continua a sunetului Exemplu: Document cu imagine de fundal <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. browserul cauta fisierul mentionat ca imagine de fond.jpg” bgcolor=”#ff0000” text=”#800080”> Acest document are o imagine in fundal </body> </html> Exemplu: Document cu setarea culorii fundalului si a dimensiunii marginilor <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.determina fisierul audio care va fi rulat de catre browser la incarcarea documentului in fereastra loop .determina de cate ori va fi repetata secventa de sunet respectiva.mp3” loop=”-1”> </head> <body background=”pozamea. Aceasta se poate realiza prin folosirea in antetul documentului a elementului BGSOUND. Textul va fi tiparit cu culoare albastra <br> Marginile documentului au fost fixate la <b>"0"</b> prin setari care vor fi acceptate si de Internet Explorer si de Netscape Navigator </body> </html> In cazul in care in corpul documentului interpretorul HTML gasete o eticheta pe care nu o recunoaste (o eticheta scrisa gresit. text = "#ff0000" seteaza culoarea textului existent in document.

<p>&nbsp. Nu toate browserele recunosc aceste controale. (NonBreakingSpace). <p>Paragraf3:<br> .exista&nbsp. suficient&nbsp. aspectul documentului afisat utilizatorului nu coincide cu aspectul fisierului sursa.dupa 4 linii libere. Pentru a forta afisarea unei parti de text mai lunga pe o singura linie se mai pot folosi controalele <NOBR> si </NOBR> cu rolul de a marca inceputul si sfarsitul sectiunii de text care va fi afisata pe o singura linie.&nbsp..&nbsp.daca se poate . Spatiile astfel inserate au proprietatea de a nu permite browserului trecerea la linie noua.&nbsp.&nbsp.&nbsp.&nbsp. Astfel. asa ca . Pentru a obtine asezarea dorita a componentelor documentului in fereastra programului de navigare.&nbsp. Aceste doua controale nu necesita marcaj de inchidere (terminare). pentru a marca trecerea la un nou paragraf folositi controlul <P>. <p> Paragraf4:<br> Intre&nbsp.bla-bla. taburile si spatiile multiple.&nbsp.Despre aspectul unui document Generalitati In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a elementelor care constitue documentul HTML.cuvinte &nbsp.&nbsp.&nbsp. Impartirea documentului in linii si paragrafe Programele de explorare Web ignora caracterele Enter.bla-bla-bla.&nbsp. <p> Paragraf2:<br> O linie de text<br> Alta linie de text <p>&nbsp.bla-bla. <p>&nbsp.blabla.&nbsp.&nbsp.&nbsp. se folosesc controalele de separare <BR> si <P> care determina desfasurarea continutului pe linii si paragrafe.&nbsp.evitati sa le folositi! Exemplu: Folosirea paragrafelor a liniilor de text si a spatiilor libere <html> <head> <title>Linii si paragrafe</title> </head> <body> <p> Paragraf1: Acest text va fi afisat pe o singura linie.. iar pentru a marca trecerea la o linie noua folositi controlul <BR>.&nbsp. Pentru a insera in document un numar oarecare de spatii libere se foloseste caracterul special &nbsp.spatiu <p>Paragraf5:<br> <nobr>bla-bla-bla-bla bla-bla bla bla bla-bla-bla bla-bla-bla-bla bla-bla bla-bla-bla-bla bla-bla-bla. <p>&nbsp.&nbsp.&nbsp. Trebuie subliniat faptul ca aspectul cat mai atragator al materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit.&nbsp.bla pe o singura linie</nobr> </body> </html> 7 ..&nbsp. Astfel.intre forma dorita si cea obtinuta a continutului afectat! 5.&nbsp.

8 . Exemplu: rigle orizontale <hr noshade> <hr align="center" width="30%"> <hr align="center" width="50%"> <hr align="center" width="70%"> <hr align="center" width="90%"> <p>&nbsp. Prezenta acestui control produce desenarea unei linii orizontale subtiri pe toata latimea documentului. La afisare. dimensiunea fontului folosit descrescand si ea.. <p>Bla-bla-bla. respectiv. programul de navigare va lasa linii goale inainte si dupa fiecare marcaj pentru titlu si subtitlu. <p>&nbsp.Antetele de sectiune In cazul in care informatia prezentata trebuie impartita in sectiuni si sub-sectiuni.. in ordine descrescatoare a importantei. care seteaza dimensiunile pe orizontala si.. <p>Bla-bla-bla..</H1> <p>Bla-bla-bla.Titlurile si subtitlurile sectiunilor documentului se vor marca folosind elementele de la H1 la H6. Exemplu: Folosirea elementului Address <H1 align="center">Draga cititorule. alegerea cea mai naturala este folosirea marcajelor de formatare a subtitlurilor. Exemplu: Antete de sectiune <h1>Element H1</h1> <H2>Element H2</H2> <H3>Element H3</H3> <h4>Element H4</h4> <h5>Element H5</h5> <H6>Element H6</H6> Rigla orizontala Pentru o mai vizibila impartire a corpului documentului se voloseste rigla orizontala marcata cu controlul <HR>.. <p> <hr align="left" width="50%" size="20" color="#0000FF"></p> <hr align="right" width="50%" size="20" color="#0000FF" ></p> Controlul <Address> Acest control este folosit de obicei la sfarsitul documentului pentru a plasa informatii utile utilizatorului pentru a contacta autorul paginii sau informatii de copyright. Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size. pe vericala a liniei in pagina.. Pentru a elimina aspectul tridimensiunal al riglei se poate utiliza optiunea noshade care elimina efectul de "umbrire" a riglei.

sau pentru a identifica respectivul bloc de continut in vederea utilizarii lui de catre scripturile prezente in document. Informatii tool-tip Cea mai simpla forma de interactiune a documentului cu utilizatorul o reprezinta 9 . Utilizarea acestuia in interiorul unui control HTML .pentru a o identifica sau apentru a-i oferi un format de afisare diferit de restul blocului din care face parte. <b>Seful</b>!</p> <hr> <address> Pentru recalmatii contactati-ne la<br> invizibilii@nicaieri. sau prin gruparea proprietatilor legate de forma de prezentare in cadrul unui singur atribut: style. nici marcajul STYLE si nici referintele catre modelele de stil. Folosirea atributului style Ultimele versiuni ale limbajului HTML au optat in mod categorig pentru despartirea continutului unui document HTML de forma in care este el prezentat. Controlul <SPAN>are rolul de a "extrage" o portiune de document ..Table) -proprietate este numele unei proprietati de stil.&nbsp. insa. cu putine exceptii (<Script> sau <Basefont>) se face respectand urmatorul tipar de scriere: <element style ="proprietate:valoare . Ea trebuie sa corespunda valorilor posibile ale acestei proprietati. Trebuie stiut. suprapuse.fermier. ca versiunile mai vechi ale programelor de explorare Web nu recunosc nici atributul style. are specificate un anumit numar de atribute . Daca ar fi fost numai atat.De asemenea acest controle se mai poate folosi alaturi de proprietatile de stil pentru pozitionare pentru a creea in cadrul documentului "straturi" de dimensiuni variabile ce pot fi pozitionate in diferite locatii ale documentului.color:blue. Creatorii de documente HTML sunt puternic incurajati sa foloseasca proprietatile de stil in locul setarii individuale a fiecarii proprietati in cadrul marcajelor. eventual. De aceea. Aceste nume nu coincid in totalitate cu numele proprietatilor marcajelor HTML.Div</div> <hr align="right" color="#0000ff" width="50%"> <div style="color:red"> Certificatul de deces consemneaza la rubrica "Profesia" . Exemplu: identificarea blocurilor de text cu ajutorul elementelor Div si Span <div style="font-size:14. Browserul va trece la line noua inainte si dupa terminarea acestui marcaj. a stilurilor definite in antetele documentului. Cele mai utilizate proprietati de stil vor fi prezentate in lectia consacrata modelelor de stil.com </address> Controalele <DIV> si <SPAN> Controlul <DIV> este folosit in document pentru a grupa intr-un bloc "logic" o parte din continutul documentului in vederea atribuirii unitare a caracteristicilor legate de stilul de prezentare. in functie de necesitatile designer-ului. ascunse sau expuse..<p align="right"> Cu drag. Img. Acest lucru este posibil prin utilizarea foilor de stil.aproape toate care se pot gasi in interiorul corpului documentului.de obicei inclusa intr-un bloc marcat de controale HTML si care. proprietate:valoare. azi nu s-ar mai vorbi nimic de <span style = "color:navy">Elementul Span</span>. De exemplu proprietatea face a morcajului Font devine fontfamily ca proprietate de stil. -valoare este valoarea acordata proprietatii respective. inainte de a folosi una sau alta dintre variante trebuie sa faceti un calcul exact al avantajelor si dezavantajelor pe care fiecare le implica.." unde : -element este numele elementului folosit (ex: H1.background color:yellow">Elementul&nbsp.

Pentru a realiza acest lucru se foloseste proprietatea de stil title. etc) nu recunosc aceleasi fonturi. <I> se folooseste pentru scrierea cu caractere inclinate (Italics).Chicago"> b. Face folosit pentru alegerea corpului de litera utilizat. <TT> indica folosirea fontului monospatiu. <STRIKE> este folosit pentru scriere unui text "taiat" cu o linie orizontala. <FONT Face="Arial. Valoare atribuita dimensiunii fontului poate fi de doua tipuri: 10 . etc). <U> este folosit atunci cand se doreste ca un anumit pasaj din text sa fie subliniat. Exemplu: <FONT Face="Arial"> Deoarece diferitele sisteme (Windows. Size folosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de la 1 la 7. <SUB> se foloseste pentru scrierea indicilor inferiori.afisarea unor informatii foarte scurte despre elementele documentului atunci cand utilizatorul pozitioneaza mouse-ul in spatiul ocupat de elementele respective. El se aplica pentru a formata un bloc de text in vedrea afisarii lui cu anumite caracteristici dorite de catre creatorul documentului. Valoarea atribuita acestei proprietati trebuie sa fie un nume de font valid. Este obligatorie prezenta etichetelor de sfarsit a controalelor mai sus mentionate pentru a putea delimita portiunea de text asaupra careia se aplica stilul de font dorit. Acest tip de font este asemanator cu cel utilizat se catre masinile de scris. Machintosh. Pentru aceasta veti specifica explicit valori pentru unele din atributele ale unui font: -corpul de litera -culoare fontului -stilul fontului -dimensiunea fontului Controale pentru stilul fontului Cel mai usor mod de a marca un anumit stil corespunzator unui text in documentul dumneavoastra este de a folosi controalele care modifica stilul fontului dupa cum urmeaza: <B> se foloseste pentru scrierea cu caractere ingrosate (Bold). Controlul <Font> Acest control permite specificare atributelor care privesc tipul caracterelor. 6. valoarea ecestei proprietati fiind textul informativ afisat in dreptul cursorului odata cu pozitionarea mouse-ului pe elementul care are setata aceasta proprietate. se pot atribui proprietatii Face una sau mai multe valori separate prin virgula. Astfel sistemul va alege primul font valid gasit in lista. Atributele pe care le avem la indemana sunt: a. dimensiunea si culoarea lor. Este recomandabil sa folositi fonturile "clasice" pentru a va asigura ca browserul va rcunoaste tipul de font specificat. nume. Exemplu: Utilizarea controalelor pentru stilul fontului <b>aceste cuvinte sunt ingrosate</b><br> <i>aceste cuvinte sunt inclinate</i><br> <u>aceste cuvinte sunt subliniate</u><br> etc…. adica acea forma de scriere in care fiecare caracter ocupa pe latime acelasi spatiu.Stiluri de text In documentele pe care la veti creea veti folosi diferite stiluri de text pentru a pune in evidenta anumite cuvinte sau pentru a le acorda o seminficatie dorita (citate. <SUP> se foloseste pentru scrierea indicilor superiori.

folosirea in exces culorilor poate da documentului un aspect neplacut si obositor Exemplu: Utilizarea atributelor fontului <font face="Arial" size = 4>scris cu arial marimea 4</font>. <Pre> folosit pentru afisarea textului "preformatat".. In cazul in care valoarea specificata este mai mica decat 1 sau mai mare decat 7. Exemplu: <FONT Size = +1> In exemplul de mai sus dimensiunea fontului este majorata cu o unitate. de obicei. Exemplu: <FONT Size = 5> -relativa : specifica dimensiunea fontului fata de cea a fontului actual. Mai trebuie sa amintim aici si posibilitatea de a marca modificarile aparute in versiunile ulterioare ale documentului cu ajutorul controalelor <Ins> si <Del>. Astfel. dar caracterele vor fi afisate cu font de tip monospatiu. Stiluri logice de formatare a textului Exista cateva stiluri predefinite de punere in evidenta a unui text: <Strong> pentru evidentiere puternica <Em> pentru scriere cu caractere italice <Cite> pentru inserare de citate <Code> pentru listing de program <Dfn> pentru definitie de cuvant <Blockquote> pentru a pune in evidenta un bloc de text. Color este atributul cu ajutorul caruia se poate stabili culoarea textului marcat. un text afisat cu culoare albastra va avea acelasi aspect cu cel al unei legaturi catre un alt fisier.. </body> Astfel textul continut in documentul de mai sus va fi afisat cu culoarea albastra si va avea dimensiunea de 5 unitati. fie cu ajutorul numelui celor 16 culori de baza. Textul marcat de etichetele de inceput si sfarsit ale acestui control va fi afisat de catre browser intr-o forma aproape identica cu aceea in care a fost scris in sursa documentului HTML. Blocul de textul va fi indentat spre dreapta fata de marginea stanga a elementului care il contine. Exceptie fac doar tabelele si acele pasaje de text care au controale HTML de formatare a textului care impun alte atribute de afisare. deoarece modalitatea in care acesta este afisat in fereastra programului de explorare Web difera foarte mult de la program la program. Astfel. se vor respecta spatiile libere si trecerea la linie noua. Valoarea imlicita a dimensiunii fontului este. Valorile acestei proprietati se pot scrie fie cu ajutorul codului hexazecimal al culorii. o anumita dimensiune sau culoare a fontului care sa fie valabile pe intreg continutul documentului. se va utiliza marcajul BASEFONT. De obicei aceste 11 . <font color="#ff0000"> red</font> <br><font face="Courier" color="#008000">scris cu courier culoarea lime </font>. Dar despre ele nu putem spune ca aplica un stil predefinit textului pe care il marcheaza. De asemenea. Exemplu: <Font Color = red> <Font Color = #ff0000> Utilizarea culorilor in text nu trebuie sa genereze situatii ambigue. Exemplu: <body> <basefont color=blue size=5> .-absoluta : specifica dimensiunea exacta a fontului. c. interpretorul HTML va va lua ca dimensiune valida pe 1. Controlul <Basefont> Daca dorim sa alegem un anumit tip de font. 3. respectiv 7.

&nbsp.&nbsp.Liste De multe ori.3</li> </ul> <li>element 2</li> 12 . Pentru aceasta se folosesc diferitele tipuri de liste.public class Exemplu<br> &nbsp. in redactarea unor documente ajungem in punctul in care trebuie sa enumeram un set de elemente care formeaza. Exemplu: folosirea stilurilor logice de formatare a textului <strong>Folosirea elementului STRONG</strong><br> <em>Folosirea elementului em</em><br> <cite>Folosirea elementului CITE</cite><br> <code>Folosirea elementului code &nbsp.out.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.2. prezenta unui item in cadrul unei liste marcandu-se cu ajutorul elementului LI.&nbsp. Liste neordonate Probabil cele mai intalnite liste in cadrul documentelor HTML sunt cele neordonate.&nbsp.i!=10.&nbsp.&nbsp.observati cum spatiile multiple nu mai sunt ignorate</pre> 7.1</li> <li>element 1.i++)<br> &nbsp.&nbsp. Pentru a marca inceputul si sfarsitul unei liste neordonate se foloseste elementul UL.&nbsp.<br> &nbsp. Exemplu: Prezentarea informatiei sub forma de lista neordonata <ul> <li>John Lennon</li> <li>Paul Mccartney <li>Ringo Star</li> <li>George Harrison</li> </ul> <p> <hr> <b>Liste imbricate:</b> <ul> <li>element 1</li> <ul> <li>element 1.2</li> <ul> <li>element 1.&nbsp.&nbsp. Fiecare lista contine un set de elemente numite "itemi".<br> &nbsp.marcaje contin atributul datetime pentru a informa despre data de la care sunt valabile modificarile pe care aceste controale le notifica.1</li> <li>element 1.&nbsp.2. sau dintre ele si eventualiele "subelemente" sa fie cat mai clar exprimate din punct de vedere vizual.public int i.println("Rezultat = " +2*i).{<br> &nbsp. o multime. din punct de vedere logic.&nbsp.2</li> </ul> <li>element 1.}</code> <pre>folosirea elementului pre. Prezentarea acestora trebuie realizata in asa fel incat relatiile dintre ele.&nbsp.System.for (i = 0.&nbsp.

pentru un cerculet gol square . Listele ordonate sunt marcate in interiorul documentului cu ajutorul elementului OL.. Elementul UL inlocuieste elementele DIR si MENU din versiunile mai vechi ale limbajului HTML...<li>element 3</li> <ul> <li>element 3.b.. corespunzator nivelului de subordonare al listei. circle pentru al doilea nivel si square pentru urmatoarele nivele.III. Pentru a stabili care va fi marcajul de ordonare in lista al fiecarui item se foloseste atributul Type. Exemplu: Folosirea listelor ordonate <h2>Lista ordonata implicita:</h2> <ol> <li>element 1</li> <li>element 2</li> <ol> <li>element 2. (valoare implicita) a pentru litere mici: a.. respectiv.. Acest marcaj poate fi ales cu ajutorul atributului Type.1</li> <li>element 2. prgramele de explorare Web folosesc tipul disc pentru primul nivel de subordonare (si. Eticheta de sfarsit a unui element al listei(</li>) nu este obligatorie. i pentru cifre romane tiparite cu litere mici: i..3. prezentarea ei devine foarte clara si atractiva. de indentare). elementul respectiv considerandu-se incheiat in momentul aparitiei unei noi etichete <li> sau a etichetei care incheie lista. litera) prin care se evidentiaza ordinea sa in cadrul listei.1</li> 13 . I pentru cifre romane tiparite cu litere mari: I..1 <ol> <li>element 3.IV. astfel. Mai mult..C.1.II..2</li> </ol> <li>element 3</li> <ol> <li>element 3.1</li> </ul> </ul> <p> <hr> <b>Folosirea atributului <i>"type"</i>:</b> <ul type="square"> <li>Ianuarie</li> <li>Februarie</li> <LI>Martie</LI> </ul> Fiecare element al listei este indentat fata de marginea din stanga (sau dreapta.iv... diferenta majora constand in faptul ca listele ordonate atribuie ca marcaj fiecarui item un element (numar.2. Liste ordonate Listele ordonate se aseamana foarte mult cu cele neordonate.B.. iar valorile posibile sunt: disc .ii. Valorile acestuia pot fi: 1 pentru cire arabe: 1.pentru un patratel plin Implicit.c.pentru un cerculet plin circle . daca directia de scriere este de la drapta la stanga) listei. A pentru litere mari: A. ficare item al listei va avea un marcaj in fata sa.iii...

celelalte continuand in mod normal. formularea 14 . Pentru a modifica valoarea de start a numerotarii elementelor listei se foloseste atributul Start asociat elementului OL.1</li> <li>element 2. Valoarea acordata acestui atribut va fi numarul (sau ordinea caracterului) scris in fata elementului respectiv.<li>element 3.etc). dar in felul acesta notiunea de "lista ordonata" isi pierde sensul. numerotarea facandu-se separat pe fiecare nivel de subordonare Liste de definitii Se pot folosi si marcajele aplicate itemilor listelor neordonate. formularea <OL start = "2" > are ca rezultat faptul ca primul element al listei va avea marcajul de ordine "2" ("b".1</li> <li>element 3.2</li> </ol> </ol> <hr> <P> <h2>Folosirea atributului "value"</h2> <ol> <li value="10">Element 1</li> <li value = "100">Element 2</li> <ol type="i"> <li value="5">Element 2.1</li> <li value = "10">Element 2.1. In mod implicit valoarea marcajului de ordine al elementelor listei incepe de la "1"(sau "a") si creste cu o unitate la fiecare item adaugat.1. Trebuie mentionat faptul ca numerotarea elementelor unei liste ordonate nu tine cont de prezenta itemilor din listele subordonate. prin adaugarea cate unei unitati.1 <ol type="a"> <li>element 3. In mod implicit valoarea marcajului de ordine al elementelor listei incepe de la "1"(sau "a") si creste cu o unitate la fiecare item adaugat.2</li> </ol> <li >Element 3</li> </ol> Se pot folosi si marcajele aplicate itemilor listelor neordonate.2</li> </ol> </ol> </ol> <hr> <p> <h2>Folosirea atributului <b>"type":</b></h2> <ol type="A"> <li>element 1</li> <li>element 2</li> <ol type = "i"> <li>element 2.1. Astfel. Pentru a modifica valoarea de start a numerotarii elementelor listei se foloseste atributul Start asociat elementului OL.2</li> </ol> <li>element 3. Astfel. "ii". dar in felul acesta notiunea de "lista ordonata" isi pierde sensul.2</li> </ol> <li>element 3</li> <ol type="i"> <li>element 3. Pentru a forta marcarea unei alte valoari in dreptul unui item se foloseste atributul Value asociat elementului LI.

numit atribut de referinta hipertext.etc). Valoarea acestuia este un URL care localizeaza documentul referit. prin adaugarea cate unei unitati. inainte de a trece la cateva exemple simple. Ancora sursa se numeste referinta si ea poate fi externa sau interna. Prin activarea acestor elemente cu ajutorul mouse-ului sau tastaturii se realizeaza trecerea instantanee de la documentul initial (documentul sursa) la cel vizat (documentul destinatie). Daca informatia respectiva prezinta interes pentru utilizator. atunci cand autorul face referire la un citat sa o informatie dintr-o alta carte sau un dintr-un alt document acesta insereaza intr-o paranteza numele lucrarii referite. El poate sa contina legaturi de tip "mail" sau legaturi catre fisiere de tip "program" care vor fi executate atunci cand utilizatorul activeaza referinta de legatura corespunzatoare. numerotarea facandu-se separat pe fiecare nivel de subordonare Exemplu: Lista de definitii <dl> <dt><b>mar</b></dt> <dd>fruct rosu</dd> </dl> 8. acesta trebuie sa contina atributul Href.<OL start = "2" > are ca rezultat faptul ca primul element al listei va avea marcajul de ordine "2" ("b". fiind oricand posibila revenirea la documentul initial. Exemplu: <A href = "http://www. acesta nu are decat sa caute in rafturile bibliotecii sale (in cazul cel mai fericit) sau ale altor biblioteci.Legaturi si referinte Aspectele prezentate pana acum certifica faptul ca un document HTML prezinta proprietati de formatare si structurare care sa permita prezentarea informatiei de tip text intr-o forma cat mai logica si reusita din punct de vedere vizual-estetic. Hiper-textul difera de textul obisnuit prin introducere in interiorul documentului a unor elemente de legatura cu alte documente existente in Web. dupa cum ancora destinatie se gaseste in afara sau in interiorul documentului care contine referinta. Trebuie mentionat faptul ca numerotarea elementelor unei liste ordonate nu tine cont de prezenta itemilor din listele subordonate. Aceasta maniera fragmentata de a primi informatia este singura posibila in cazul textelor obisnuite a caror expunere se realizeaza pe cele doua dimensiuni ale suprafetei plane reprezentate de foaia de hartie.msn. Mai mult. materialul amintit. URL-uri relative Despre URL-uri am vorbit in introducerea acestei documentatii. eventual pagina sau sectiunea referita. Referinte externe Sunt sigur ca ati intilnit situatii in care. Pentru a forta marcarea unei alte valoari in dreptul unui item se foloseste atributul Value asociat elementului LI. Limbajul HTML rezolva aceasta problema prin introducerea notiunii de hipertext. Pentru ca marcajul de referinta sa fie functional. iar al doilea capat (elementul referit) este ancora destinatie. Insa acum. Orice legatura are doua capete numite ancore si un sens.</A> Legaturile unui document nu sunt limitate la legaturi cu alte documente.Daca informatia pe care o puneti la 15 . Despre toate acestea in cele ce urmeaza. celelalte continuand in mod normal. intr-o carte.com/">Legatura cu. Valoarea acordata acestui atribut va fi numarul (sau ordinea caracterului) scris in fata elementului respectiv. Primul capat (elementul care refera) este ancora sursa. "ii".. Prezenta unei referinte in interiorul documentului se marcheaza cu ajutorul perechii de controale HTML <A> si </A>. e cazul sa vorbim despre URL-uri relative. exista posibilitatea ca un anumit element din continutul documentului sa contina o legatura catre un alt element din cadrul aceluiasi document.Insa caracteristica cea mai importanta a documentelor HTML este aceea de a putea contine in interiorul lor legaturi catre alte documente (sau programe) care se pot gasi pe acelasi calculator sau pe unul dintre calculatoarele din imensa retea a Web-ului.

html" Daca fisierul curent este "Carti.html". Exemplu: 16 . Exista posibilitatea de a fixa un URL de baza relativ la care sa se calculeze toate URLurile relative intr-un document.com/Radacina/index.". In interiorul documentului. iar in fereastra va fi afisata o pagina continand mesajul de eroare corespunzator.html" Daca fisierul curent este "Carti.. Pentru a alege culoarea de prezentare a referintelor intr-o pagina se folosesc urmatoarele atribute ale elementului Body: link . locatia sa pe server poate fi schimbata de catre administratorul calculatorului. ea trebuie structurata corespunzator intr-o formula de directoare si subdirectoare care sa va ofere o distribuire cat mai logica a materialelor.html". In momentul in care activam o referinta catre un document HTML. Sa presupunem ca directorul radacina al site-ului se numeste "Radacina"./Informatii/Preturi.html".folosita la cadre de ferestre _top . de asemenea..html". In interiorul directorului "Produse" se gasesc documentele "Carti.folosita.html" se fixeaza <Base href = "http://www. daca in in documentul "Carti. pentru a referi documentul "Preturi.html"Folosirea URL-urilor relative este foarte convenabila deoarece. al carui atribut href fixeaza baza de formare a documentului..dispozitia utilizatorilor in Web este alcatuita din mai multe documente corelate. In cazul trecerii catre directorul parinte se foloseste expresia ". Dar daca apare situatia in care din documentul referit ne intereseaza un anumit element si vrem ca acesta sa fie afisat incepand cu prima linie a ferestrei? In acest caz trebuie sa definim in acel document o ancora destinatie numit "tinta".pentru culoare textului referintelor nevizitate vlink . o referinta catre documentul "Preturi. O tinta se marcheaza cu ajutorul elementului ancora (A) caruia i se atribuie un nume de identificare cu ajutorul atributului Name sau Id.html". Referinte interne Activarea unei referinte catre un documet face ca acel document sa fie afisat in fereastra programului de explorare. acesta va fi afisat in fereastra programului de explorare Web.pentru a afisa documentul destinatie in fereastra documentului sursa (valoare implicita) _blank . El contine directoarele "Produse" si "Informatii" si documentul "index.. textul elementului referinta (interna sau externa) este scris de obicei cu culoare albastra si subliniat.html". Acest lucru este posibil prin folosirea in sectiunea de antet a documentului a controlului de marcaj <Base>. iar in directorul "Informatii" se gaseste documentul "Preturi. Valorile posibile ale acestui atribut sunt: _self .html".pentru a afisa documentul destinatie intr-o noua fereastra deschisa de programul de explorare _parent .html" de foloseste expresia "Muzica.html". Folosirea acestei optiuni trebuie facuta doar daca dumneavoastra controlati schimbarile efectuate in amplasarea site-ului pe server. in locul documentului initial. Altfel.html" si "Muzica.html"> inseamna ca toate URL-urile relative se calculeaza fata de documentul "index.pentru culoarea textului referintei in momentul in care aceasta care este activata.html". Daca fisierul curent este "Carti. la cadre de frestre. construind astfel URL-ul complet.html" de foloseste expresia ".CalculatorulMeu. pentru a referi documentul "index. Exemplu: Daca fisierul curent este "index. aceasta modificare afectand doar calea catre radacina site-ului.html">Preturile</A> sunt urmatoarele. Daca vrem sa controlam fereastra in care va fi afisat noul document putem sa folosim atributul target a elementului ancora. Aceasta structura formeaza un "site".html" de foloseste expresia "./index. pentru a referi documentul "Muzica. documentele referite nu vor mai fi gasite. De exemplu..html" avind forma: <A href = "Informatii/Preturi.html" se foloseste expresia "Produse/Carti. Calculatorul va completa automat calea catre documentul curent. si nicidecum relatiile si legaturile din interiorul site-ului. atunci cand site-ul este publicat. pentru a referii documentul "Carti.pentru culoarea textului referintelor care au fost deja vizitate alink . Un URL relativ este URL-ul in care nu se trece decat calea de la fisierul curent la fisierul destinatie.

Start defineste primul document dintr-o colectie de documente d. valoare ce defineste relatia cu documentul referit. Exemplu: <HEAD> <TITLE>Capitolul 4</TITLE> <LINK rel="Contents" href=". Specificarea unei relatii intre documente Elementul LINK este folosit in antetul documentului pentru a specifica o relatie intre documentul curent si alte documente sau programe din Web. Exemplu: <HEAD> <TITLE>The manual in English</TITLE> <LINK title="Manualul in limba engleza" type="text/html" rel="alternate" hreflang="fr" href="http://Calculator. Next si Previous definesc care sunt urmatorul si.html"> <LINK rel="Next" href="Capitolul5.Calculator. precedentul document intr-o ordonare liniara a colectiei de documente c.html"> <LINK rel="Prev" href="Capitolul3.html"> b. dar el este folosit de catre programele de navigare Web in diverse scopuri. Index.html"> </HEAD> Modul in care informatia oferita de elementul Link este folosita depinde foarte mult de programul de navigare si motoarele de cautare in Web.html"> <LINK rel="Index" href=". Elementul LINK nu are continut si nu va fi afisat in interiorul documentului. respectiv.com/Documente/Document1.Introducere </A> Este foarte important ca numele de identificare a unei tinte sa fie unic in cadrul unui document. Contents. Pentru a realiza acest lucru va trebui 17 .html#intro">Partea 1. depinzand de valoarea atributul rel. Exemplu: <A href = "#intro">Partea 1.Utilizarea imaginilor In lectia precedenta ati invatat cum sa folositi elementul esential al unui document HTML: legatura cu alte documente sau programe.<A name = "intro"><H2>Introducere</H2></A> Pentru a creea in acelasi document o referinta catre tinta definita mai sus nu ramane decat sa scriem corect atributul de referinta hipertext. "Index" si "Glosar". Exemplu: <A href = "www. despre care vom vorbi mai tarziu c. 9.com/manual/franceza..Introducere </A> Daca referinta este creata in alt document ea trebuie sa contina URL-ul documentului care contine tinta si numele de identificare a tintei./index./toc. Insa va lipseste posibilitatea de a da documentului un aspect cat mai atractiv pentru cei ce il viziteaza. si Glosary definsesc documente de tipul "Cuprins" . Iata cateva dintre valorile posibile ale acestui atribut: a. Stylesheet defineste o legatura cu un document de tip "foaie de stil". Alternate defineste o alternativa la documentul curent si este folosita de obicei impreuna cu atributul hreflang pentru a specifica limba in care este scris documentul.. In caz contrar destinatia referintei nu mai este valida.

si de aceea va trebui sa faceti o alegere echilibrata intre numarul si dimensiunea imaginilor -pe de o parte . In cazul ultimelor doua valori poate aparea situatia in care un bloc de text trebuie "fortat sa coboare" pe prima linie de sub imagine. Precizarea acestor atribute determina o mai rapida incarcare a documentului in fereastra programului de explorare. JPEG si PNG. Tipurile de fisiere-imagine compatibile cu HTML sunt GIF. Valorile posibile sunt: -bottom pentru alinierea textului la baza inferioara a imaginii (valoare implicita) -middle sau center pentru alinierea textului pe centrul imaginii -top pentru alinerea textului la baza superioara a imaginii -left pentru a plasa imaginea in extremitatea stanga a elementului container. valoarea atributului Alt va fi folosita ca mesaj "tool-tip" . -right pentru a plasa imaginea in extremitatea dreapta a elementului container. Daca imaginea este afisata. iar blocul de text eventual existent dupa marcajul imaginii respective ocupand spatiul liber din dreapta si de sub ea. Atunci cand utilizatorul va activa una dintre aceste legaturi in fereastra se va incarca fisierul imagine dorit. dar in cazul precizarii unor dimensiuni care nu corespund dimensiunilor reale ale imaginii aceasta va fi deformata pentu a acoperii exact suprafata precizata. Folosirea atributului border determina afisarea unui chenar care va incadra imaginea. iar blocul de text eventual existent dupa marcajul imaginii respective ocupand spatiul liber din stanga si de sub ea. Pentru a aranja imaginea in raport cu textul din vecinatatea sa se foloseste atributul align. Valoarea acestui atribut va reprezenta grosimea chenarului. Ar fi bine ca atunci cand inserati o imagine sa folositi si atributul Alt care specifica un text care va fi afisat in locul imaginii in cazul in care browser-ul nu lucreaza decat in mod text sau in cazul in care utilizatorul decide sa renunte la incarcarea imaginilor (optiune oferita de programele de navigare Web).sa "impodobiti" documentul cu imagini. fie ele statice sau dinamice. In acest caz se foloseste atributul clear al elementului BR care apare inaintea blocului de text pe care vrem sa il translatam. al carui atribut Src este URL-ul fisierului imagine.si timpul de incarcare a documentului . Trebuie stiut insa faptul ca incarcarea imaginilor in document este o operatiune care costa timp . Folosirea imaginilor ca elemente ancora 18 . Valorile atribuite desemneaza numarul de pixeli care vor distanta imaginea de elementele adiacente ei in cadrul documentului Atributele width si height stabilesc dimensiunile suprafetei din document care va fi ocupata de imagine.fara sa mai vorbim ca exista programe de explorare Web care nu lucreaza cu imagini! . o valoare egala cu 0 (valoare implicita) determinand afisarea imaginii fara chenar. Exemplu: <IMG src = "Imagini/Peisaj.gif"> Elementul IMG nu are eticheta de incheiere deoarece elementul nu are continut pe care sa-l includa.pe de-alta parte. Inserarea unei imagini Pentru a marca prezenta unei imagini in document se foloseste elementul IMG. Aceste copii vor fi incarcate in document si vor avea rolul unor legaturi catre fisierele ce contin imaginile in dimensiunea lor initiala.In cazul in care doriti sa prezentati in cadrul documentului un anumit numar de imagini a caror dimensiune ar afecta dramatic timpul de incarcare al documentului in fereastra programului de explorare se poate aplica urmatoarea tehnica: Se creeaza copii de dimensiuni mici ale acestor imagini. Valorile acestui atribut pot fi: -left pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din stanga este libera -right pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din dreapta este libera -all pentru ca textul sa fie deplasat in jos pana in pozitia in care ambele margini sunt libere Pentru a controla spatiul vertical sau orizontal din jurul imaginii inserate in document se folosesc atributele vspace si hspace .

Pentru a specifica principalele proprietati ale tabelului se folosesc urmatoarele atribute: 19 . height=200 > </embed> </object> 10. tabelele au si alte utilizari. De aceea apare necesitatea unui instrument care sa poata rezolva aceasta problema.pentru a determina de cate ori va fi rulat clipul respectiv. Marcarea unui tabel Un tabel este marcat in document de perechea de controale <TABLE> si </TABLE>.pentru a preciza sursa fisierului audio sau video folosit width si height . jucand un rol foarte important printre instrumentele pe care le au la indemana relizatorii paginilor Web. browserele adauga imaginii o bordura. Valoare implicita este "1". Acest lucru se poate realiza foarte usor prin plasarea imaginii in interiorul unui element ancora (A). sau "mouseover" pentru pornirea lui atunci cand cursorul mouse-ului este pozitionat deasupra sa.determina momentul de start al clipului.pentru a determina URL-ul fisierului imagine loop .mpg" width=200.html"><img src = "imaginea1. Reusita inserarii unui astfel de clip depinde ded extensia fisierului folosit si de versiunea browserului. O valoare egala cu 0 sau -1 determina rularea continua a clipului start . pentru elementul IMG se folosesc atributele: dynsrc . Pentru fisierele video e preferabil sa folositi extensiile "mpg" sau "mov" .Tabele In capitolul dedicat listelor am prezentat una dintre posibilitatile pe care le aveti de a prezenta in interiorul documentului informatia structurata.gif" alt = "pagina1"></a> Observati introducerea textului alternativ care devine obligatoriu in cazul in care imaginea nu poate fi afisata de catre browser. Astfel. Exemplu: folosirea a doua fisiere video <img border="0" dynsrc="film.pentru a preciza dimensiunea ocupata de obiectul respectiv in document. asa cum veti vedea in cadrul acestui capitol. Folosirea clipurilor video Internet Explorer permite inserarea foarte simpla a fisierelor de tip "imagine dinamica" (clipuri video) in acelasi mod in care se insereaza o imagine statica. iar pentru cele audio formatul "mp3". adica legaturi catre alte documente sau programe. Pentru a evita aparitia ei folositi atributul border cu o valoare atribuita egala cu 0. Acesta poate fi "fileopen" ( valoare implicita) pentru pornirea clipului odata cu incarcarea paginii in browser. Insa folosirea listelor este utila doar atunci cand structura informatiei nu prezinta un grad mare de complexitate. Pentru a insera in document un clip video sau audio care sa poata fi redat si de alte browsere se poate folosi elementul embed cu atributele: src .avi" loop="-1" start="fileopen" alt="acest videoclip poate fi vizualizat doar daca folositi Internet Explorer"> <h1>Folosirea elementului <b>OBJECT</b></h1> <object> <embed src="film. In momentul incadrarii elementului imagine intre controalele <a> si </a>. Insa.In documentele HTML se folosesc frecvent imaginile pe post de ancore. Exemplu: <a href = "pagina1.

Elementele care constitue un tabel sunt: -eticheta de tabel . align Determina pozitionarea pe orizontala a tabelului in cadrul documentului. el continand informatia propriu-zisa afisata in tabel. -corpul tabelului . -antetul tabelului .toate laturile rules Determina care dintre liniile de demarcare dintre celulele tabelului vor fi vizibile. -subsolul tabelului . In cazul in care s-a ales valoarea 0 tabelul nu va afisa nici chenar. Corpul tabelului Corpul tabelului este partea cea mai importanta.nici o latura above .liniile vericale all .latura de sus below .toate laturile border . acesta trebuie sa contina cel putin o linie din tabel. nici linii de demarcare in interiorul sau. Pentru a avea consistenta.liniile dintre grupurile definite ale tabelului. dar si de dimensiunile elementelor din interiorul tabelului in asa fel incat acestea sa fie vizibile.toate liniile cellspacing Stabileste spatiul (in pixeli) dintre doua celule vecine ale unui tabel precum si spatiul dintre marginile tabelului si celulele din apropiere. Marcarea corpului tabelului nu este obligatorie. Optiunile posibile sunt: none .laturile din stanga si din dreapta lhs . background Stabileste imaginea de fond a tabelului. Ea contine una sau mai mule celule marcate prin controalele <TD> si </TD>.width si height Stabilesc dimensiunile tabelului si pot fi exprimate in mod absolut sau in mod relativ.latura din dreapta box . Nu este obligatoriu ca toate liniile sa contina acelasi numar de 20 .latura de jos hsides . prezenta sa fiind implicita in cadrul tabelului in momentul marcarii primei linii a lui.latura din stanga rhs .laturile de sus si de jos vsides . bgcolor Stabileste culoarea de fond a tabelului. cellpading Stabileste spatiul dintre marginile unei celule si continutul acesteia. Optiunile posibile sunt: void . Se marcheaza cu ajutorul controalelor <TBODY> si </TBODY>.O linie in tabel se marcheaza cu ajutorul controalelor <TR> si </TR>. Cum de defineste un grup vom vedea putin mai tarziu. rows .nici o linie groups . Optiunile posibile au fost prezentate in capitolul al II-lea border Stabileste grosimea in pixeli a chenarului care inconjoara tabelul.liniile orizontale cols . frame Stabileste care laturi ale chenarului care incadreaza tabelul vor fi vizibile. Dimensiunile pe care tabelul le va avea in cadrul documentului vor fi calculate de catre programul de explorare Web tinand cont de optiunile specificate prin cele doua atribute.

7 a lui Netscape Navigator. Acest atribut nu este implementat in varianta 4.care comunica intre ele prin intermediul protocolului TCP/IP. mai mult de o suta de milioane de oameni au.alinierea se face la baza superioara a celulei. Pe o linie celulule sunt dispuse de la stanga la dreapta in ordinea in care au fost introduse in codul sursa al documentului. Numarul de coloane ale unui tabel se considera a fi numarul maxim de celule a liniilor tabelului. aceasta optiune putandu-se pune in practica atunci cand se doreste gruparea liniilor unui tabel conform unor regului stabilite. exceptie facand cazul in care directia de scriere in tabel a fost stabilita de la dreapta la stanga cu ajutorul atributului dir. Optiunile posibile sunt: top . acces la reteaua Internet si acest numar este in continua crestere. caz in care dispunerea lor se va face de la dreapta la stanga.pozitionare centrata in celula. </td> </tr> </tbody> </table> </p> Corpul unui tabel poata sa contina atribute care determina formatarea elementelor pe care acesta le contine: Bgcolor: seteaza culoarea de fond a celulelor din interiorul sau. Align: determina pozitionarea pe orizontala a continutului in cadrul unei celule Valign: determina pozitionarea pe vericala a continutului unei celule.celule. bottom . Intr-un tabel pot exista mai multe corpuri de tabel.alinierea se face la baza inferioara a celulei. Se estimeaza ca. 21 . in prezent. intr-un fel sau altul. Exemplu: Doua tabele simple <p> <table align="center" width="80%" cellspacing="2" cellpadding="2" border="1"> <tr> <td><b>Nume</b></td> <td><b>Prenume</b></td> <td><b>Varsta</b></td> <td><b>Telefon</b></td> </tr> <tr> <td>Popescu</td> <td>Ioana</td> <td>27</td> <td>176238</td> </tr> <tr> <td>Munteanu</td> <td>Cornel</td> <td>42</td> <td>220022</td> </tr> </table> <p> <hr> <p> <p> <table cellspacing="10" cellpadding="10" border="0"> <tbody valign="top"> <tr> <td >Internet</td> <td>Reprezinta totalitatea calculatoarelor si a retelelor de calculatoare de pe tot cuprinsul globului. middle .

Acesta determina pozitionarea etichetei fata de tabel si are urmatoarele valori posibile: top .(In Netscape 4.) In mod normal. cat si tinand seama de dimensiunile elementelor care constitue continutul acestor celule.determina pozitionarea etichetei deasupra tabelului. spre deosebire de corpul tabelului care contine respectivele date. in mare masura. Ecest element trebuie sa apara imediat dupa controlul de inceput care marcheaza tabelul.Cel mai important atribut al etichetei de tabel este align. Antetul si subsolul unui tabel trebuie sa contina cel putin o linie de tabel marcata cu ajutorul elementului TR. aliniata la dreapta Antetul si subsolul tabelului Antetul si subsolul tabelului sunt componente ale tabelului care contin in general informatii despre datele prezentate. Grupuri de coloane Antetul corpul si subsolul tabelului reprezinta modalitati de a grupa pe orizontala informatia prezentata intr-un tabel. Un tabel nu poate avea decat o singura eticheta. Rowspan: determina numarul de linii ocupate de celula. linii care. Atributele cele mai importante ale antetului si subsolului tabelului sunt cele legate de pozitionare. contin una sau mai multe celule. Antetul si subsolul sunt formate din una sau mai multe linii. Exista si posibilitatea de a grupa coloanele unui tabel prin definirea unuia sau mai multor grupuri de coloane. THEAD. imagini.determina pozitionarea etichetei sub tabel left .informeaza despre datele continute in tabel. Ea se marcheaza cu ajutorul controalelor <CAPTION> si </CAPTION>. Aceste controale trebuie sa apara inaintea controlului de inceput care marcheaza corpul tabelului. Celulele care intra in componenta antetului sau a subsolului tabelului se marcheaza de obicei cu controalele <TH> si </TH>. cele doua elemente sunt echivalente. marcajul de inchidere putand sa lipseasca. Celulele unui tabel pot sa contina in interiorul lor text. deasupra tabelului (valoare implicita) bottom . Valoarea implicita este "1". dimensionare sau fond si au fost prezentate in sectiunea dedicata corpului tabelului. Eticheta de tabel Eticheta de tabel este folosita pentru a afisa deasupra tabelului un text scurt care . Valoarea implicita este "1". TBODY si TFOOT contin acelasi numar de coloane.determina pozitionarea etichetei in centru. Un grup de coloane se marcheaza prin controalele <COLGROUP> si </COLGROUP> . sau chiar alte tabele. celulele au doua atribute foarte importante care permit formatarea si structurarea informatiei in interiorul tabelului: Colspan: determina numarul de coloane ocupate de celula.determina pozitionarea etichetei deasupra tabelului. ancore de legaturi. Lui i se pot atasa. Width si height: recomanda programului de explorare web dimensiunile celulei. la randul lor.de obicei . Pentru a specifica numarul de coloane incluse in grup se pot folosi doua modalitati: prin folosirea atributului span a carui valoare determina numarul de coloane continute de grup 22 .7 subsoloul tabelului trebuie pozitionat dupa corpul acelui tabel. atributele care se refera la culoarea de fond a celulelor pe care le contine sau la pozitionarea elementelor in interiorul acestor celule.Elementul TR marcheaza prezenta unei linii de date intr-un tabel si reprezinta elementul container al celulelor care contin informatia propriu-zisa a tabelului. In afara proprietatilor mentionate la liniile tabelului. aliniata la stanga right . de asemenea. Atunci cand intr-un tabel se fac extinderi ale celulelor pe linii si coloane trebuie avut in vedere ca nu cumva doua celule diferite sa pretinda spatiul unei aceleasi celule. Antetul este marcat de controalele <THEAD> si </THEAD>. deoarece. iar subsolul tabelului este marcat de controalele <TFOOT> si </TFOOT>. dar este posibila si folosirea marcajelor pentru celulele folosite in corpul tabelului. Nu uitati ca dimensiunile afisate ale celulelor se fac atat in functie de optiunile exprimate prin atributele specifice.

Elementele introduse in aceasta lectie rezolva in mod foarte elegant aceasta problema.*"> determina impartirea documentului pe vericala in doua cadre. Ambele optiuni prezinta neajunsul de a nu putea avea ambele documente deschise simultan in aceeasi fereastra pentru a putea avea acces cu usurinta la fiecare dintre ele. continutul paginii fiind marcat cu ajutorul controalelor <FRAMESET> si </FRAMESET>. Intr-o pagina de cadre lipseste elementul BODY. Astfel. astfel. in cazul in care grupul de coloane se construieste prin specificarea separata a elementului COL pentru fiecare coloana acest element poate sa contina atributele referitoare la dimensionarea fiecarei coloane in parte sau la pozitionarea continutului in interiorul celulelor. Exemplu: Cadre pe orizontala <!-. In cazul in care nici una dintre aceste doua optiuni nu este prezenta se considera ca grupul de coloane contine o singura coloana. Ficare cadru din interiorul documentului este marcat cu ajutorul controalelor <FRAME> si </FRAME>.prin specificarea explicita a coloanelor din grup cu ajutorul elementului COL. In cazul in care se specifica valori pentru ambele atribute documentul va fi impartit atat pe orizontala cat si pe verticala. primul avind inaltimea de 60% din spatiul vertical disponibil in fereastra. -cols determina spatiul pe orizontala pus la dispozitia fiecarui cadru si are forma unei liste de valori absolute. 11.frames --> <frameset rows="100%.Pagina de cadre si cadre in pagina In lectia dedicata referintelor si legaturilor am vazut ca atunci cand se activeaza o ancora de legatura cu un alt document. De exemplu.html" marginwidth="10" marginheight="10" 23 . iar al doilea de 40% din acelasi spatiu. Trebuie stiut ca.* "cols="30%.*"> <frame name="Stanga" src="IndexStanga. ordinea in care vor fi asezate cadrele in pagina fiind determinata de ordinea atributelor rows si cols si de ordinea elementelor FRAME in cadrul elementului FRAMESET. Grupurile de coloane se introduc in document inaintea antetului sau a corpului tabelului si ele pot contine atribute referitoare la pozitionarea continutului in interiorul celulelor sau la dimensiunea coloanelor pe care acestea le contin. Caracterul "*" in cadrul listei acorda cadrului corespunzator spatiul liber ramas. Numarul valorilor separate de virgula trebuie sa fie acelasi cu numarul cadrelor care impart pe verticala sau pe orizontala documentul. programul de explorare calculeaza dimensiunile coloanelor la valori minime necesare pentru ca elementele din interiorul celulelor sa fie vizibile. relative sau proportionale ale inaltimii fiecarui cadru. cadru care este de fapt o fereastra de sine-statatoare si care permite derularea documentului sau incarcarea unui alt document. Valoarea "0*" determina alocarea fiecarei coloane a grupului a unui spatiu minim pe orizontala astfel incat continutul celulelor sa fie vizibil. Pagina de cadre O pagina de cadre este un document HTML care va permite sa vizualizati in ceeasi fereastra mai multe documente. formularea <FRAMESET rows = "60%. numarul de coloane al grupului va fi egal cu nmarul de elemente COL care urmeaza unui element COLGROUP. De asemenea. Pozitionarea si dimensionarea cadrelor Pentru a da informatii despre asezarea si dimensiunea cadrelor continute se folosesc urmatoarele atribute ale elementului FRAMESET: -rows determina spatiul pe verticala pus la dispozitia fiecarui cadru si are forma unei liste de valori absolute. atributul width recomanda latimea pe care ar trebui sa o aiba toate coloanele grupului. relative sau proportionale ale latimii fiecarui cadru. in mod implicit. acesta din urma (documentul destinatie) este incarcat de catre programul de explorare Web in fereastra documentului sursa sau intr-o fereastra noua. fiecare asezat in propriul cadru.

.. Atributele care specifica modul de afisare a unui cadru sunt: -name : identifica un cadru pentru a putea fi folosit ca valoare a atributului target a unei ancore sursa.scrolling="auto" frameborder="1"> <frame name="Dreapta" src="Pagina3.html" marginwidth="0" scrolling="auto" frameborder="0"> <frame name="Jos" src="Pagina3.*"> <frame src="Titlu. Din pacate. </noframes> Elementul cadru Pentru a marca un cadru intr-o pagina de cadre se folosesc controalele <FRAME> si </FRAME>.html"> </frameset> </frameset> <noframes> Acest document contine cadre..html" name="contents" id="contents" scrolling="Auto"> <frame name="main" src="Blank. </noframes> Exemplu: Cadre pe orizontala si verticala <!-.html" marginwidth="0" scrolling="auto" frameborder="0"> </frameset> <noframes> Aceasta este o pagina de cadre.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1"> <frame name="a2" src="Blank...html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="b2" src="Blank. Din pacate. </noframes> Exemplu: Cadre pe verticala <!-.. </noframes> Exemplu: Pagina cu cadre imbricate <frameset rows="64. cu exceptia celor care specifica ele insele o alta tinta.. Din pacate.*"> <frame name="a1" src="IndexSusStanga..html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="b1" src="Blank. Exista si posibilitatea de a predefini tintele referintelor la nivel de document cu ajutorul aceluiasi atribut aplicat elementului BASE. Pentru a afisa un document in fereastra mare.*" cols="50%.frames --> <frameset rows="10%. -src : specifica URL-ul documentului care va fi afisat in cadru la incarcarea paginii de cadre in fereastra. dar. folositi valorile "_parent" sau _top pentru atributul target al elementului ancora.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> </frameset> <noframes> Aceasta este o pagina de cadre.*"> <frame name="Sus" src="IndexSus.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1"> </frameset> <noframes> Acesta este un document de cadre. Astfel.frames --> <frameset rows="50%.*"> <frame src="IndexStangaImbri.. 24 .html" name="banner" id="banner" scrolling="No" noresize> <frameset cols="150. o formulare de genul: <BASE target = "cadruA"> face ca toate ancorele prezente in documentul respectiv sa aiba ca tinta cadrul "cadruA". nedivizata in cadre.

-marginwidth si marginheight : stabilesc spatiul pe orizontala si. exemplele prezentate nu sunt functionale.In afara atributelor prezentate in paragraful precedent. iar width si height determina dimensiunile alocate obiectului in pagina. pe verticala lasat liber intre marginile cadrului si continutul sau. Deoarece folosirea acestui tip de comunicare necesita publicarea documentelor pe un server Web si folosirea unor tipuri de programe care depasesc scopul acestei documentatii. Formulare HTML Formularele reprezint un "container" in interiorul caruia se gasesc elemente numite controale. Optiunile posibile sunt: 1 : determina afisarea bordurii (valoare implicita). Toate aceste date erau "colectionate" de catre un calculator numit "server" si mai apoi procesate.in general . Valorile aproape unanim folosite sunt "get" si "post". Ele prezinta doua atribute esentiale pentru comunicarea cu serverul: -action : reprezinta un URL al unui fisier ce urmeaza a procesa informatia trimisa de utilizator. varsta. elemente cu ajutorul caruia utilizatorul specifica informatia care urmeaza a fi trimisa serverulului. impune imposibilitatea de a redimensiona cadrul.o pagina de confirmare sau una care semnaleaza prezenta erorilor in receptionarea acestor date sau erori legate de valorile introduse de utilizator. -align : determina pozitionarea ferestrei in document in raport cu elementele adiacente . elementul IFRAME mai dispune de cateva specifice: -width si height : determina dimensiunile pe orizontala si verticala ale ferestrei. -method : reprezinta metoda HTTP prin care se realizeaza trimiterea datelor catre programele de procesare. o imagine sau un applet intr-o pagina Web este folosirea elementului OBJECT. Ele se pot folosi doar pentru studierea documentului sursa si pentru a avea o imagine generala asupra folosirii formularelor. Pagini in care ati fost rugati politicos sa va introduceti numele. Acesta poate fi un program de tip CGI (programe care creeaza dinamic pagini HTML) sau asa numitele programe de script pe server cum sunt fisierele de tip asp sau jsp. 0 : determina neafisarea bordurii. utilizatorul primind ca raspuns . Ferestrele interne nu pot fi redimensionate si de aceea ele nu poseda atributul noresize. Valorile si modul de pozitionare sunt analoage celor descrise la alinierea imaginilor. respectiv. indiferent de dimensiune documentului continut -frameborder : determina afisrea sau neafisarea unei borduri de demarcare intre cadre adiacente. indiferent de dimensiune documentului continut no : determina afisarea cadrului fara bare de defilare. Acest lucru se realizeaza prin folosirea elementului numit "fereastra interna" si marcat cu ajutorul controalelor <IFRAME> si </IFRAME>. O alta modalitate de a insera un document HTML sau un alt tip de document. adresa sau o parola. Trebuie stiut ca 25 . prin prezenta sa. Formularele sunt marcate cu ajutorul controalelor <FORM> si </FORM>.Formularele HTML Sunt sigur ca ati intalnit in Web pagini in care nu vi se ofera ci vi se cere informatie. -scrolling : determina afisarea sau nefisarea barelor de defilare pe mariginea cadrului. Atributul data reprezinta URL-ul fisierului de incarcat in cazul documentelor sau al imaginilor. 12. Cadre in interiorul unui document obisnuit Exista si posibilitatea de a afisa in interiorul unei pagini HTML uzuale o fereastra care sa contina un alt document. Urmatoarele optiuni sunt posibile: auto : determina aparitia barelor de defilare doar in momentul in care o parte din document nu este vizibila in cadru (optiune implicita) yes : determina afisarea cadrului cu bare de defilare.-noresize : reprezinta un atribut e tip boolean care.

In cazul in care informatia trimisa este de tipul "file" valoarea acestui atribut ar trebui sa fie "multipart/form-data". Meniuri derulante Reprezinta liste de valori din care utilizatorul poate selecta una sau mai multe valori. diferente constand in faptul ca datele introduse de utilizator vor fi afisate printr-un caracter "masca" (ex: "*") pentru a oferi un anumit grad de confidentialitate. Aceste amanunte sunt necesare celor care scriu programele ce urmeaza a primi datele utilizatorului pentru a sti in ce mod sa extraga din "pachetul" receptionat aceste date. despartite de acesta prin caracterul "?".este butonul a carui activare readuce controalele din formular la valorile lor initiale BUTTON (buton fara actiune predefinita) .este butonul a carui activare declansaza operatiunea de trimitere a datelor catre server RESET (buton de resetare) . title. insa sunt grupate in mod logic cu ajutorul numelui. -name sau id : identifica formularul in vederea folosirii lui in scripturi. Alte atribute folosite sunt: -enctype : specifica metoda de compactare utilizata pentru informatiiile continute in corpul formularului (daca metoda aleasa e "post"). ea prezentand avatajul posibilitatii folosirii formularului in eventualele scripturi prezente in document.este butonul folosit de catre designer pentru a declansa operatiuni controlate de catre acesta. Imagini Imaginile folosite pe post de controale in formular sunt folosite ca alternativa mai atragatoare din punct de vedere estetic pentru butonul de tip "SUBMIT". Butoane Exista trei tipuri de butoane care pot aparea intr-un formular: SUBMIT (buton de transmitere) . numarul perechilor fiind egal cu numarul datelor din formular trimise spre procesare. Diferenta intre cele doua metode este urmatoarea : metoda get adauga aceste perechi la sfarsitul URL-ului de destinatie. Este folosit de obicei la introducerea unor parole TEXTAREA . Iata lista controalelor pe care le puteti folosi in interiorul unui formular: a. iar intr-un asemenea grup doar un singur buton poate fi selectat la un moment dat.este caseta de introducere a textului pe linii multiple Casute de validare Sunt controalele prin care se confirma sau se infirma o optiune prezentata utilizatorului Butoane radio Sunt asemanatoare casutelor de validare. pe cand metoda post lasa URL-ul de destinatie intact. de obicei cu ajutorul scripturilor b. Este de preferat folosirea celei de-a doua variante. informatia trimisa fiind inglobata in asa numitul "corp al formularului". Toate butoanele radio avand acelasi nume apartin unui aceluiasi grup.este similara controlului TEXT. style. lang si dir : aceste atribute au fost prezentate mai sus. Valoarea implicita e "application/x-wwwform-urlencoded". Controalele unui formular Exista mai multe tipuri de controale cu ajutorul carora utilizatorul introduce date sau alege variante ale unor valori oferite.datele introduse in formular sunt "expediate" ca perechi de forma nume=valoare. in functie de tipul meniului Selectoare de fisiere Sunt controalele care dau posibilitatea utilizatorului sa selecteze un fisier care urmeaza a fi trimis serverului Controale ascunse Reprezinta posibilitatea de a transmite serverului date utile. target. fara ca utilizatorul sa le vada pe ecran 26 .este caseta care permite introducerea textului pe o singura linie PASSWORD . Campuri de introducere a textului : Exista trei tipuri de casete de introducere a textului: TEXT .

Transmisia valorilor catre programul de procesare de pe server se face conform urmatoarelor reguli: -campurile de editare de text transmit ca valoare textul continut . Numele controlului va fi trimis impreuna cu valoarea introdusa de utilizator catre programul de procesare a datelor de pe server. fiecare buton al unui grup trebuie sa aiba aceeasi valoare pentru acest atribut. text/plain"). Valoarea finala a controalelor este valoarea pe care acestea o au in momentul in care s-a actionat butonul de tip "SUBMIT". iar metoda formularului trebuie sa fie post.Elementul INPUT Cea mai mare parte a controalelor unui formular se poate marca cu ajutorul unui singur element de marcare HTML: INPUT. -butoanele radio si casutele de validare transmit doar valorile controalelor selectate . -selectorul de fisiere transmite ca valoare continutul fisierului codificat conform metodei de compactare specificate de atributul enctypes -controalele dezactivate nu transmit valori . De aceea numarul atributelor acestui element este destul de mare. -disabled : atribut de tip "marcaj" a carui aparitie duce la aparitia dezactivata a controlului in formular. Iata cateva dintre ele: -type : specifica tipul controlului folosit. -maxlength : determina numarul maxim de caractere pe care utilizatorul le poate introduce intr-o casuta de text. Valorile posibile sunt: text password checkbox radio submit reset button image hidden file -name : specifica numele controlului respectiv. -accept : specifica tipul de fisiere acceptate pentru incarcare de catre un control input de tip file. oferindu-se vizibilitate pozitiei curente a cursorului. deci utilizatorul nu va avea posibilitatea interactiunii cu controlul respectiv. Valorea acestui atribut este o lista de tipuri MIME separate prin virgula(Ex:"image/jpg. -value : specifica valoarea initiala a controlului respectiv. -src : este folosit pentru a localiza fisierul sursa a unei imagini atunci cand controlul este de tip "image". exceptie facand butoanele radio si casutele de validare pentru care setarea acestui atribut este obligatorie. Acest atribut este optional. -checked :determina selectarea implicita a unui control de tip buton radio sau casuta de validare. Mai trebuie specificat faptul ca pentru a utiliza un contrrol de tip file. In cazul butoanelor ea reprezinta eticheta butonului respectiv. In cazul butoanelor radio. In cazul in care utilizatorul introduce un numar mai mare de caractere are loc o delpasare a textului spre stanga. -tabindex : determina numarul de ordine al unui control in parcurgerea controalelor formularului cu ajutorul tastei "tab". formularul container trebuie sa aiba valoarea proprietatii enctype egala cu "multipart/form-date". id class style title Aceste atribute au fost analizate precedent 27 . -size : determina numarul de caractere ocupat ca dimensiune pe orizontala de casetele de introducere a textului. iar semnificatia lor poate sa varieze de la un control la altul.

spre deosebire de elementul INPUT. Marcarea acestui element necesita atat eticheta de inceput cat si eticheta de sfarsit a controlului corespunzator. acesta are un continut care poate sa cuprinda text sau imagine. Exemplu: Folosirea elementului BUTTON <form action="program2.exe" name="Formular1" id="Formular1" enctype="application/x-www-formurlencoded" > <table cellspacing="2" cellpadding="2" border="0" bgcolor="#8678AB"> <colgroup align="right"> <tr> <td width = 100>Nume</td> <td width = 200><input type="text" name="TextNume" size="20"></td> </tr> <tr> <td>Parola</td> <td><input type="password" name="TextParola" size="10" maxlength="20"></td> </tr> <tr> <td>Sex:</td> <td><input type="radio" name="OptionSex" value="fem">Feminin</td> </tr> <tr> <td></td> <td><input type="radio" name="OptionSex" value="masc">Masculin</td> </tr> <tr> <td>Pensionar</td> <td><input type="checkbox" name="CheckPensi" value="pensionar"></td> </tr> <tr> <td align = "center"><input type="submit" name="SubButon" value="Terminat" ></td> <td align = "center"><input type="reset" value="Sterge"></td> </tr> </table> </form> Elementul BUTTON Elementul BUTTON este folosit pentru a introduce in formular un buton care ofera posibilitati de a fi afisat intr-o maniera ceva mai pretentioasa.exe" name="form2" id="form2"> <table cellspacing="2" cellpadding="2" border="0"> <tr> <td>Introduceti numele cautat</td> <td><input type="Text" size= "40"></td> <td><button name="Cauta" value="cauta" type="submit">Cauta</button></td> </tr> 28 . E bine ca imaginile sa fie insotite de un text alternativ pentru ca afisarea butoanelor in fereastra programului de explorare Web sa poat fi concludenta si in cazul in care imaginile nu vor fi afisate.Exemplu: Folosirea elementului INPUT in formulare <h1>Formular de inregistrare:</h1> <form action="script. Si asta deoarece.

</table> </form> 29 .