APLICAŢII ÎN HTML

GHID PENTRU LUCRĂRI DE LABORATOR

Luminiţa Şerbănescu

3

CUPRINS

1. INTRODUCERE ÎN HTML...............................................................................4

2. STRUCTURA UNUI DOCUMENT HTML.....................................................6

3. SCRIEREA DE TEXT CU FORMATE ÎN HTML.........................................9

3.1 FORMATAREA TEXTULUI..................................................................................93.2 FORMATAREA CARACTERELOR.......................................................................113.3 EXEMPLE........................................................................................................19

4. INSERAREA DE IMAGINI ÎN PAGINILE WWW......................................28

4.1 AMPLASAREA IMAGINILOR ÎNTR-O PAGINĂ WEB............................................284.2 ALINIEREA IMAGINILOR..................................................................................294.3 DIMENSIUNILE UNEI IMAGINI..........................................................................324.4 EXEMPLU........................................................................................................34

5. LEGĂTURI........................................................................................................35

5.1 ALEGEREA CULORILOR PENTRU LEGĂTURI....................................................385.2 EXEMPLE........................................................................................................39

6. LISTE ÎN HTML...............................................................................................44

6.1 LISTE DE DEFINIŢII..........................................................................................456.2 LISTE NEORDONATE........................................................................................466.3 LISTE ORDONATE............................................................................................476.4 EXEMPLE........................................................................................................49

7. CREAREA TABELELOR................................................................................57

7.1 ATRIBUTELE TABELELOR................................................................................597.2 ATRIBUTELE CELULELOR................................................................................677.3 EXEMPLE........................................................................................................77

8. FERESTRE ÎN HTML......................................................................................85

8.1 DEFINIREA STRUCTURII DE CADRE (FRAMES).................................................868.2 EXEMPLE........................................................................................................92

9. CREAREA FORMULARELOR FOLOSIND HTML.................................100

9.1 CONTROALELE FORMULARULUI...................................................................1009.2 EXEMPLE......................................................................................................115

10. MODELE DE CONSTRUIRE A SITE-URILOR WEB............................124

Bibliografie............................................................................................................136

4

1. Introducere în HTML

HTML e limbajul în care sunt scrise paginile web. Paginile web sunt fişiere cu extensia .html sau .htm care rezidă, de obicei, pe serverele de Internet, dar care pot rezida şi pe calculatorul dumneavoastră. HTML e acronimul de la HyperText Markup Language, care e numele unui limbaj de marcare ce a înlocuit SGML-ul şi a fost conceput în 1989 de Tim Berners-Lee. Fiind şi expert în software, Berners-Lee e acum director al World Wide WEb Consortium (pe scurt, W3C), adică al organizaţiei care coordonează dezvoltarea web-ului (în principal, prin impunerea de standarde pentru limbaje etc.). HTML-ul a cunoscut o popularitate rapidă, aproape toate paginile web fiind scrise în acest limbaj.

Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni (ca Pascal-ul sau C-ul) ori comenzi (ca Fox-ul), ci etichete, acestea fiind numite şi elemente sau tag-uri. Sintaxa oricărui tag este:

<TAG atribut1="val" atribut2="val">Text</TAG>

În unele cazuri, atributele pot lipsi. În altele, poate lipsi tag-ul de închidere: </TAG>. O pagină web poate conţine:

text imagini fişiere audio fişiere video

Paginile web se vizualizează în browsere, care sunt nişte programe de vizitare. Cele mai populare browsere sunt:

Netscape Navigator, care a cunoscut mai multe versiuni, cele mai reuşite fiind 4.75 si 4.76 care aveau, totuşi, defectul ca nu suportau diacriticele. Acestora le-a urmat versiunea 8.0 care suportă diacriticele.

Microsoft Internet Explorer, care a ajuns la versiunea 7.Orice browser prezintă, în partea de sus, o fereastră îngustă în care se

tastează adresa paginii web căutate. Un exemplu de adresa ar fi: http://www.upit.ro. După tastarea adresei şi apăsarea tastei "Enter", browserul dumneavoastră îi trimite serverului upit.ro cererea de a i se furniza pagina web proprie.

Într-un fisier html, se pot include: programe în JavaScript scripturi CSS tag-uri care să seteze parametrii unui applet (program scris în Java şi

care rezidă pe reţea) Un fişier html se poate realiza:

- manual, scriind tag după tag în Notepad - cu ajutorul editoarelor HTML precum Homesite, Adobe Golive,

Microsoft Frontpage '98 sau 2000, Macromedia Dreamweaver (aplicaţia cea mai apreciată de profesionişti ), CoffeeCup HTML Editor , Netscape Composer

5

(recomandat doar începătorilor). Ultimele două sunt distribuite freeware (gratuit). Dealtfel, de pe site-urile de download puteţi descărca un mare număr de editoare HTML, unele în regim freeware, altele în regim shareware. Editoarele vă uşurează munca, dar nu vă învaţă HTML, aşa că e de dorit să le evitaţi la începutul activităţii dumneavoastră de webdesigner.

Cum realizăm prima pagină web ? Alocaţi un director site-ului pe care intentionaţi să-l realizaţi. Click pe butonul Start, apoi pe Programs, Accessories, Notepad. Introduceţi textul şi etichetele. Salvaţi fişierul cu extensia .htm sau .html în directorul dedicat.

Fişierul va apărea ca, să zicem, index.htm. Deschideţi fişierul index.htm în Microsoft Internet Explorer. Pentru

a aduce modificări fişierului, executaţi click-dreapta pe suprafaţa acestuia şi veţi obţine codul-sursă. După modificarea fişierului, salvaţi-l.

Observaţii: 1. HTML-ul e independent de platformă. 2. HTML-ul nu e un limbaj case-sensitive, aşa că putem scrie la fel de bine

<BODY>, <body>, <BOdy> sau <boDy> etc., pentru că în HTML nu se face distincţia între literele mari şi cele mici.

2. Structura unui document HTML

Codul HTML este stocat în fişiere cu extensia .html sau .htm. Un document HTML este un fişier text obişnuit (cunoscut şi sub denumirea de fişier ASCII) care conţine, pe lângă informaţiile textuale propriu-zise, marcaje pentru utilizarea opţiunilor de formatare şi de conectare. Un asemenea marcaj se numeşte TAG. Un tag se introduce in text sub forma: <nume_tag>, unde parantezele unghiulare sunt elementele care indică prezenta unui tag. Numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la litere mari / litere mici.

Orice document HTML are două componente principale: HEAD (antetul documentului), care conţine titlul documentului; BODY (corpul documentului), care conţine textul propriu-zis sub

formă de paragrafe, liste şi alte elemente. Ce mai simplu document HTML începe cu tag-ul <HTML> şi se termină

cu tag-ul </HTML>. Între acestea se află cela două elemente esenţiale: head şi body.

<HTML> <HEAD> </HEAD>  <BODY> </BODY> </HTML>

Tag-urile de marcare:6

HTML. Acest element transmite browserului că documentul conţine informaţii în cod HTML. Extensia fişierului .html indică, de asemenea, un document HTML. Extensia .htm se foloseşte în cazul în care fişierele au nume de DOS (8 caractere, iar extensia 3 caractere).

HEAD. Elementul HEAD identifică prima parte a documentului HTML. Marcajele din această secţiune au doar rolul să descrie documentul curent pentru programe (cum ar fi browsere), pentru alte documente HTML sau pentru documentare. Informaţiile prezentate în această secţiune nu vor fi vizibile în pagina afişată de browser, cu excepţia titlului ce va apărea pe linia titlu a browserului. Nici vizionarea codului sursă al documentului nu va arăta, în general, informaţiile din această secţiune. Tagurile care pot fi imbricate în această secţiune sunt: <TITLE>, <META> <ISINDEX>, <BASE>, <STYLE>, <SCRIPT> şi <LINK>. Dintre acestea: <TITLE> este cel mai des întâlnit.

Elementul TITLE conţine titlul documentului şi identifică conţinutul său în contextul general El este afişat undeva în fereastra browserului (de obicei în partea de sus, pe bara de titlu), dar nu în interiorul ariei de text. De asemenea, titlul poate apărea într-o listă a unui utilizator sau ca bookmark, de aceea el trebuie să reprezinte ceva descriptiv, unic şi relativ scurt. Titlul documentului poate apărea numai în secţiune HEAD. Elementul TITLE are următoarea sintaxă:

<TITLE> Textul titlului </TITLE>

BODY. A doua - şi cea mai cuprinzătoare - parte a unui document HTML este BODY, care reprezintă conţinutul documentului (afişat în interiorul ariei de text a ferestrei browserului). Secţiunea BODY începe cu tagul <BODY> şi se încheie cu tagul </BODY>. Între acestea se pot introduce anumiţi parametri ca: imagine de fundal, culoare de fundal, linkuri, alinieri.

<BODY [ BACKGROUND="adresa_imagine"] [BGCOLOR="#rrggbb"|"culoare"] [TEXT="#rrggbb"|"culoare"]

[ LINK="#rrggbb"|"culoare"] [VLINK="#rrggbb"|"culoare"] [ ALINK="#rrggbb"|"culoare"]

[LEFTMARGIN=marg_st] [ TOPMARGIN=marg_top] [BGPROPERTIES="fixed"]>Conţinut document </BODY>

BACKGROUND se referă la imaginea de fundal a paginilor web şi primeşte ca valoare calea către fişierul imagine respectiv.

BGCOLOR se referă la culoarea de fundal având ca valoare numele sau codul culorii RGB în hexazecimal.

TEXT se referă la culoarea textului. LEFTMARGIN precizează, în pixeli, marginea stângă a

documentului (distanţa dintre fereastră şi conţinutul documentului);

7

TOPMARGIN precizează, în pixeli, marginea de sus a documentului (distanţa dintre fereastră şi conţinutul documentului).

În documentele HTML se mai pot introduce linii de comentariu. Acest lucru se poate realiza cu ajutorul tagului <!>:

<! Textul comentariului>

Funcţionalitatea lui principală este cea uzuală în orice limbaj de programare. Apare însă şi o funcţie nouă, oarecum improprie unei linii de comentariu, aceea de a "ascunde" anumite porţiuni ale textului. Porţiunile respective vor fi interpretate doar de unele browsere. Comentariile în cod HTML nu au tag de închidere.

Exemplul 1:

<body bgcolor="#C0C0C0" link="red" alink="blue" vlink="green" text="black">

Culoarea paginii va fi gri ( stabilită prin bgcolor="#C0C0C0" ), link-urile vor fi rosii, link-ul activ albastru iar link-urile vizitate verzi. Textul va fi afisat cu negru. De multe ori , nu se precizează culoarea fundalului/textului/link-urilor, ceea ce conduce la afisarea u nui fundal alb, a unor fonturi negre si a unor link-uri albastre. Aceasta e setarea implicită. Se observă că orice culoare poate fi exprimată atât printr-un cuvânt, cât si printr-un set de 6 caractere precedate de diez ( # ). Această notatie se datorează existentei unui sistem bazat pe rosu, verde si albastru ( Red, Green, Blue ). Sistemul se numeste RGB. In acest sistem, fiecare componentă are o valoare cuprinsă între 00 si FF. Impreună, valorile celor trei componente alcătuiesc un sistem de 6 caractere. Tag-ul de sus poate fi scris si ca:

<body bgcolor="#C0C0C0" link="#FF0000" alink="#0000FF" vlink="#008000" text="#000000">

Exemplul 2:

<body background="imagini/poza1.jpg">

Fundalul paginii e o imagine ( poza1.jpg din directorul imagini ).

Exemplul 3:

Dacă, în plus, dorim ca imaginea de fundal să nu se deplaseze când navigăm de-a lungul paginii, vom scrie:

<body background="imagini/poza1.jpg" bgproperties="fixed"> 8

Exemplul 4: Pentru a seta marginile de sus si din stânga ale paginii la valorile de 10, respectiv 15 pixeli, vom scrie:

<body topmargin="10" leftmargin="15">

3. Scrierea de text cu formate în HTML

Documentul HTML conţine, pe lângă informaţiile textuale propriu-zise, marcaje pentru utilizarea opţiunilor de formatare. Aceste opţiuni se referă atât la formatarea textului din interiorul documentului, cât şi la formatarea caracterelor, care poate avea loc pe trei nivele: fizic, logic, de comunicare.

3.1 Formatarea textului

O proprietate care diferenţiază editoarele de text de procesoarele de text este modul în care apare textul în forma finală: se pot schimba fonturile, se poate varia mărimea caracterelor, se poate opera asupra alinierii orizontale sau / şi verticale.

În continuare sunt prezentate câteva taguri de formatare a textului:

TAGUL PARAGRAPH. Unitatea principală de text este paragraful, care se remarcă prin lăsarea unui spaţiu vertical suplimentar după el. Textul este aliniat, implicit, la stânga. Spre deosebire de alte procesoare de text, în HTML caracterul CR (carriage return) nu are nici o semnificaţie. De aceea pentru a indica paragrafele, codul HTML utilizează tag-ul <p>.

Iată un exemplu simplu de folosire a paragrafelor într-un document HTML:

<p> Bine ati venit in lumea HTML!Acesta este primul paragraf. </p>

Deşi în fişierul sursă a doua propoziţie este scrisă pe rândul următor, browserul web va ignora acest lucru şi va afişa cele două afirmaţii pe o singură linie, începând un paragraf nou doar dacă întâlneşte un alt tag <p>.

Aşadar, paragrafele trebuiesc indicate prin tag-ul <p> deoarece browserul ignoră orice indentare sau linie goală din sursa HTML.

Un exemplu de text cu paragrafe este prezentat mai jos:

9

<H1>Primul nivel de heading </H1><P>Bine ati venit in lumea HTML. Acesta este primul paragraf.</P><P>Şi acesta este cel de al doilea paragraf.</P>

Pentru a păstra uşurinţa de citire a codului în fişierele HTML, este bine ca paragrafele să fie puse pe linii separate şi să se folosească linii goale pentru a indica începutul unei noi secţiuni. Aceste spaţii în plus ajută la editarea fişierelor HTML, dar browserul le va ignora pentru că el are stabilit propriul set de reguli cu privire la spaţiere, care nu depind de spaţiile puse de cel ce editează codul sursă.

NOTĂ: Tag-ul de închidere </p> poate fi omis. Acest lucru este posibil datorită faptului că browserele înţeleg că atunci când întâlnesc un tag <p>, aceasta implică sfârşitul paragrafului anterior.

Tagul paragraf poate avea mai mulţi parametri. Unul dintre aceştia este parametrul ALIGN care aliniază textul în funcţie de valoarea pe care o primeşte: left, center, right. Sintaxa este următoarea:

< P ALIGN=CENTER|LEFT|RIGHT >

TAGUL DIV. Marchează începutul unei noi diviziuni (secţiuni) a documentului. Sintaxa poate fi următoarea:

< DIV [ ALIGN=LEFT|RIGHT|CENTER]> Text </DIV>

Parametrul ALIGN indică alinierea textului pentru întreaga diviziune. În lipsa opţiunii ALIGN nu se produce absolut nimic în prezentarea documentului.DIV marchează doar locul unde începe o noua secţiune în document, ca un simplu comentariu, sau cu posibilitatea de a schimba alinierea textului.Tagul DIV nu produce trecerea pe un rând nou.

Deoarece caracterele albe sunt ignorate de browserul care afişează pagina Web, există comenzi speciale pentru a trece la o linie nouă şi anume:

TAGUL BR care nu face altceva decât să informeze browserul că textul care urmează va fi afişat pe o linie nouă, indiferent dacă urmează text sau imagine.

TAGUL HR. Sintaxa completă a tag-ului <HR> este următoarea:

<HR [SIZE=n] [WIDTH=n] [ALIGN=left|right|center] [NOSHADE]>

10

Această comandă are ca efect trasarea unei linii orizontale de separare, care poate avea următoarele caracteristici: grosime (SIZE), lungime (WIDTH), aliniere (ALIGN) şi fără umbră (NOSHADE).

Diferenţa dintre aceste două tag-uri este că cea de-a doua desenează în plus o linie între cele două linii de text despărţite de <HR>.

3.2 Formatarea caracterelor

Deşi există multe taguri dedicate formatării caracterelor, această formatare nu este la nivelul celei produse de un procesor de text. Multe taguri sunt lăsate la interpretarea browserelor sau constituie rezerva pentru dezvoltări ulterioare. Este de aşteptat ca următoarele versiuni de HTML să accepte definirea de stiluri, ceea ar facilita formatarea unitară a unui document.

Formatarea caracterelor se poate efectua: A. la nivel fizic, B. la nivel logic, C. la nivel de comunicare.

A. Formatarea la nivel fizicFormatarea la nivel fizic se efectuează atunci când se indică direct fontul,

culoarea şi/sau stilul în care se afişează anumite porţiuni de text. Tagurile de formatare la nivel fizic sunt:

TAGUL B. Aplică stilul bold textului. Are sintaxa: <B>text</B> Este utilizat pentru evidenţierea anumitor cuvinte, propoziţii etc. Nu produce

o rupere de rând.

TAGUL BASEFONT. Este o etichetă singulară(fără delimitator de sfârşit de bloc). Are sintaxa:

<BASEFONT SIZE = număr COLOR = culoare STYLE = font>

unde: - număr - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic şi 7

pentru fontul cel mai mare); - culoare - este o culoare precizată prin nume sau printr-o construcţie

RGB; - font - poate fi un font generic ca "serif", "san serif", "cursive",

"monospace", "fantasy" sau un font specific instalat pe calculatorului clientului, ca

11

"Times New Roman", "Helvetica" sau "Arial". Se acceptă ca valoare şi o listă de fonturi separate prin virgulă, de exemplu: "Times New Roman, serif,monospace".

Domeniul de valabilitate al caracteristicelor precizate de această etichetă se întinde de la locul în care apare eticheta până la sfârşitul paginii sau până la următoarea etichetă <basefont>.

Dacă acest atribut lipseşte atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul utilizat. Atributele prestabilite sunt: size = 3, color = black, şi style = " Times New Roman " .

TAGUL FONT. Se referă la mărimea sau culoarea fontului şi acceptă ca parametri:

SIZE: arată o modificare relativă a dimensiunii fontului în cazul când apare + sau -. Setarea poate fi absolută prin indicarea numărului dintre 1 şi 7. Mărimea implicită de font este 3.

COLOR: indică noua culoare pe care o va avea textul. Codul culorii este dat în formatul hexazecimal RGB: rr reprezintă roşu (de la 00 la FF); gg reprezintă verde (de la 00 la FF); bb reprezintă albastru (de la 00 la FF). Color este unul dintre numele acceptate pentru culori. Cele mai uzuale sunt: red, maroon, yellow, green, lime, teal, olive, aqua, blue, navy, purple, fuchsia, black (este culoarea implicită), gray, silver, white.

FACE: specifică un nou font dintre cele suportate. În cazul în care se selectează un font care nu este accesibil pe calculatorul client, browserul va substitui fontul implicit (posibil Times Roman).

Sintaxa acestui tag este:

<FONT [ SIZE=[+|-]1|2|3|4|5|6|7] [COLOR="#rrggbb"|"color"][FACE="font"]>text</FONT>

Iată un exemplu de utilizare a tagului FONT cu cei trei parametri ai săi:

<html><head><title>Untitled Document</title></head><body>Normal, <FONT SIZE=-1> Mai mic, </FONT> <FONT SIZE=-2> Si mai mic.</FONT> <P><FONT SIZE=1>Cel mai mic text</FONT><BR><FONT SIZE=7>Cel mai mare text</FONT> <P><FONT SIZE=4 COLOR="blue"> Acesta este un text albastru, demarime 4.</FONT><BR>

12

<FONT SIZE=4 COLOR="green" FACE="Courier"> Acesta este un text verde, de marime 4, în Courier. </FONT> </body></html>

Rezultatul execuţiei acestor linii de cod de către browser este următorul:

Figura 3.2.1 - Utilizarea tagului FONT cu cei trei parametri: size, color şi face

TAGUL PRE. Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>.

TAGUL I. Aplică textului stilul italic (înclinat). Este utilizat pentru evidenţierea anumitor cuvinte, propoziţii etc. Nu produce o rupere de rând.

Are următoarea sintaxă: I>text</I>

TAGUL STRIKE. Sintaxa tagului STRIKE este următoarea: <STRIKE>text</STRIKE>. Acest tag produce "tăierea" cu o linie a textului conţinut (utilizat de obicei pentru producerea unor exemple negative: aşa nu se

13

face). Nu are loc rupere de rând. Fiind un tag nou (HTML 3.2) nu este recunoscut de toate browserele.

TAGUL TT. Tagul TT afişează textul în fontul teletype (neproporţional). Este utilizat, în general, pentru prezentarea unei ieşiri de tip listing (clasic) de calculator. Nu produce o rupere de rând. Sintaxa lui este: <TT>text</TT>

TAGUL U. Subliniază textul conţinut. Nu provoacă trecerea pe un rând nou. Sintaxa tagului este: <U>text</U>

Sublinierea cu tagul U poate produce, împreună cu utilizarea unor culori, confuzii cu legăturile utilizate într-un hipertext, de aceea, se va preferă evidenţierea textului prin alte mijloace.

B. Formatarea la nivel logicFormatarea la nivel logic se efectuează atunci când se indică doar faptul că o

anumită porţiune de text trebuie evidenţiată faţă de textul din jur şi se lasă la latitudinea browserului să efectueze această evidenţiere. Multe dintre tagurile care realizează acest lucru produc acelaşi efect vizibil, diferenţierea lor fiind lăsată browserelor de generaţii viitoare.

Tagurile formatării la nivel logic sunt:

TAGUL BIG: <BIG>text</BIG> Afişează textul din container cu dimensiune mai mare decât fontul de bază.

Tagul nu produce o rupere de rând. Unele editoare HTML (inclusiv Netscape Editor) convertesc tagul BIG în:

<FONT SIZE=+1>text</FONT>

TAGUL DFN: <DFN>text</DFN>Identifică un termen de definiţie şi-l scrie cu caractere diferite de textul

înconjurător. Este un tag HTML 3.2 şi unele browsere nu-l recunosc. Nu produce o rupere de rând.

TAGUL EM: <EM>text</EM>Evidenţiază textul specificat, de obicei prin scrierea italică.

Nu produce rupere de rând. TAGUL Hn: <Hn>text</Hn>

14

Aplică unul dintre cele şase formate predefinite de antet. Fiecare browser are formate proprii pentru stilurile logice: H1…H6. Este de preferat ca stilurile să se specifice în ordine, deci să nu se utilizeze, de exemplu, H3 fără a fi utilizat H2 etc. Vor fi rezervate, în general, pentru diverse niveluri de titluri.

Cele 6 nivele de stiluri sunt prezentate în exemplul de mai jos:

<html><head><title>Antete</title></head><body><H1>Antet 1</H1><H2>Antet 2</H2><H3>Antet 3</H3><H4>Antet 4</H4><H5>Antet 5</H5><H6>Antet 6</H6></body></html>

Figura 3.2.2 - Utilizarea tagului Hn pentru crearea antetelor

15

Tagurile Hn provoacă o rupere de rând şi, implicit, au câte un rând gol înainte şi după.

TAGUL BLOCKQUOTE. Pentru ca un bloc de text sa fie indentat (marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de marginea paginii ), acesta trebuie inclus intre etichetele <blockquote>...</blockquote>.

<html><head><title>Text indentat</title></head><body>Textul ce urmeaza este indentat:<blockquote> Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. </blockquote></body></html>

Figura 3.2.3 Text indentat

16

TAGUL CENTER. Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele pe care le conţine.

TAGUL NOBR. Blocul de text cuprins între etichetele <nobr>...</nobr> va fi afişat pe o singură linie.

TAGUL KBD: <KBD>text</KBD>Aplică textului menţionat un font similar intrării de la tastatură, deci un font

neproporţional. Multe browsere aplică acelaşi font pentru KBD, TT şi altele asemenea (de exemplu, Netscape Navigator utilizează Courier). Tagul KBD nu provoacă o rupere de rând automată.

TAGUL SMALL: <SMALL>text</SMALL>Afişează textul cu o dimensiune mai mică decât textul înconjurător.

Netscape Editor utilizează conversia în: <FONT SIZE=-1>text</FONT>. Nu produce rupere automată de rând.

TAGUL STRONG: <STRONG>text</STRONG>Produce o evidenţiere pronunţată a textului, uzual prin trecerea în aldine. Nu

produce rupere automată de rând. Efectul vizibil este acelaşi ca şi la tagul B (prezentat la formatarea logică), care aplică textului stilul bold.

TAGUL SUB: <SUB>text</SUB>Mută textul selectat mai jos decât linia de baza a textului precedent şi aplică

un font mai mic (face trecerea în indice inferior). Nu produce rupere automată de rând. TAGUL SUP: <SUP>text</SUP>

Mută textul selectat mai sus decât linia de bază a textului precedent şi aplică un font mai mic. Nu produce rupere automată de rând.

Exemplul următor arată cum se vizualizează texte care fac obiectul unora dintre tagurile prezentate anterior:

<html><head><title>Formatare la nivel logic</title></head>

17

<body><KBD> Acesta este un text scris cu KBD </KBD><BR><SAMP> Acesta este un text scris cu SAMP </SAMP><BR><SMALL>A cesta este un text SMALL </SMALL> <BR><STRONG> Acesta este un text STRONG </STRONG> <BR>Formula apei este H<SUB>2</SUB>O,<BR> iar X<SUP>2</SUP> este X*X</body></html>

Figura 3.2.4 - Tagurile formatării logice a caracterelor

C. Formatare la nivel de comunicareÎn această secţiune se prezintă taguri dedicate formatărilor specifice pentru

anumite tipuri de informaţii. Formatările respective intră tot în categoria formatărilor logice, deci forma de vizualizare depinde de browserul utilizat.

TAGUL ADDRESS. Cu ajutorul acestui tag se vizualizează o informaţie de adresă, uzual o adresă de e-mail. Are următoarea structură:

<ADDRESS [ ALIGN=left|center|right]> text</ADDRESS>Parametrul ALIGN indică modul de aliniere. Acest tag provoacă trecerea la

un paragraf nou.

18

TAGUL CITE: <CITE>text</CITE>. Indică o referinţă, cum ar fi un nume de carte, articol, numele unui autor. Referinţa este diferenţiată faţă de textul curent. Formatarea este logică, deci diferenţierea este dependentă de browserul utilizat. Nu se produce rupere de rând.

TAGUL CODE: <CODE>text</CODE> Aplică textului un font neproporţional precum cel de calculator (clasic).

Forma efectivă de afişaj depinde de browser. Multe browsere utilizează acelaşi font pentru CODE, KBD, SAMP şi TT.

TAGUL LISTING: <LISTING>text</LISTING>

Aplică textului un font similar ieşirilor de calculator. Este un tag păstrat doar pentru compatibilitate cu versiuni mai vechi. Provoacă trecerea la un nou paragraf.

TAGUL VAR: <VAR>text</VAR> Produce o evidenţiere a textului, uzual prin trecerea în italice. Este o

formatare logică, depinde deci de browser, dar este dedicată evidenţierii termenilor noi introduşi într-un document. Nu produce schimbări în curgerea textului.

3.3 Exemple

Exemplul 1.

<html> <head> <title>Aceasta este prima mea pagina de Web</title> </head> <body> Bine ati venit in pagina mea de Web! <br> Inceput</body></htlm>

19

Exemplul 2.

<html><head><title>bloc preformatat </title></head><body><pre> Prima linie A doua linie A treia linie</pre></body></html>

20

Exemplul 3.

<html><head><title>culoare de fond </title></head><body bgcolor= „lightblue" text=red>O pagina Web cu fondul albastru si culoarea textului rosie! </body></html>

Exemplul 4.

<html><head><title>Blocuri de caractere monospatiate si clipitoare </title></head><body>Aceasta linie este formata din text normal.<br>Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code><br>Tastati urmatoarea comanda comanda DOS: <kbd> copy c:\My Documents\Dana\* c:\Nicolae<kbd><br><tt>Asa scrie un teleprinter</tt><br>Acest cuvant clipeste <blink>Blink</blink> </body></html>

21

Exemplul 5.

<html><head><title> Linii orizontale</title></head><body><center> <hr width=10% size=4 noshade> <hr width=40%> <hr width=70%> <hr width=100%> <hr width=70%> <hr width=40%> <hr width=10%> </center> </body></html>

22

Exemplul 6.

html><head><title> Blocul <div></title></head><body>Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta. <div align="right">O singura linie.O singura linie.O singura linie.O singura linie.<br>O singura linie.O singura linie.O singura linie.O singura linie.<br>O singura linie.O singura linie.O singura linie.O singura linie.<br></div><div align="center">Bloc aliniat pe centru.Bloc aliniat pe centru.<br>Bloc aliniat pe centru.Bloc aliniat pe centru.<br>Bloc aliniat pe centru.Bloc aliniat pe centru.<br></div> </body></html>

Exemplul 7.

<html><head><title>Exemplu 7</title></head><body>

23

<HTML><HEAD><TITLE> A patra pagina Web </TITLE></HEAD><BODY><STRONG> BOLD </STRONG><BR><EM> ITALIC </EM><BR><TT> COURIER NEW </TT><BR><SMALL> MIC </SMALL> MEDIU <BIG> MARE </BIG><BR><U> SUBLINIAT </U><BR><PRE>SPATIILE NUSUNT IGNORATEDE BROWSER</PRE>a <SUB> n </SUB> =2 <SUP> n </SUP></BODY></HTML></body></html>

Exemplul 8.24

<html><head><title> SEMINAR 1 </title><body bgcolor=lightyellow text=red leftmargin=50 topmargin=10>PAGINA NR.1<br> UN TEXT SIMPLUCE SE SCRIE PE UN SINGUR RAND<br> <b> Text ingrosat </b> <i>Text italic </i> <u> Text subliniat </u><br> text cu indici superiori si inferiori ² ₃<br> text imbricat: <b> Primul <i> seminar este </i> <u> usor </u> </b> <br>functia <code> f(x) = x+1 </code><br><basefont size=7 color=blue style=Arial>Am schimbat atributele textului.<br> Bloc preformatat<pre><basefont size=5 color= gray style=Times New Roman>Matricea

1 2 34 5 6

are 2 linii si 3coloane</pre><br> Se partreaza atributele de la ultima eticheta basefont</body></html>

25

Exemplul 9.

<html><head><title> SEMINAR 2 </title><body bgcolor=lightblue><h1 align=center> <font color= red > CIG ANUL III <BR> ORAR </font></h1><pre> <b><font size=5 color=blue> <center> ORA/ZIUA LUNI MARTI MIERCURI</b> </font></center><hr align=center width = 800 size=4 color= blue><font color=navy size=5> <I> <CODE> 8-10 </code> <font face="arial"> SIAD </font>

26

<code> 10-12 </code> <font face="arial"> Contab.fin </font><code> 12-14 </code> <font face="arial"> Limbaje </font></i></font></pre><blockquote> <font size=4 color=blue> Orarul se gaseste pe site-ul Universitatii din Pitesti si este pus la dispozitia studentilor dim data de 1.03.2005. </BLOCKQUoTE></font> <font color=navy size=5 weight = 900>Adresa Universitatii este : <address> Universitatea Pitesti <br> Str. Targul din Vale <br> Arges </address> </font><p><u> <font size=2> Nota</u> : <i> Prezenta la cursuri si seminarii este obligatorie </i> </font></body></html>

27

4. Inserarea de imagini în paginile WWW

În crearea unei pagini de web profesionale, sunt relevante atât informaţiile ce vor fi afişate, cât şi modul în care acestea sunt prezentate. Pentru ca o pagină de web să fie atractivă se folosesc diferite imagini pentru fundal, butoane de navigare, etc.

Deşi au o importanţă mare, imaginile conţinute în paginile de web constituie o problemă din cauza timpului mare necesar încărcării lor în timpul navigării pe Internet. Majoritatea browserelor conţin o opţiune de tipul Show Picture (arată imaginea). Prin deselectarea acestei opţiuni, browserul va fi informat că nu se doreşte încărcarea automată a imaginilor în acelaşi timp cu textul. În locul imaginii va apărea un icon, însoţit eventual de un text.

4.1 Amplasarea imaginilor într-o pagină web

Tag-ul HTML cu ajutorul căruia se afişează o imagine este <IMG>. Cei mai importanţi parametrii ai săi sunt: SRC şi ALT. Cu ajutorul parametrului SRC(source) se precizează fişierul în care este conţinută imaginea, iar cu ajutorul parametrului ALT se precizează un text alternativ care va apărea în cazul în care imaginea nu va putea fi încărcată din diferite motive, cum ar fi:

formatul nu este suportat de browser; fişierul respectiv lipseşte sau este corupt; este deselectată orice opţiune de tipul Show Picture;

Sintaxa este următoarea:

<IMG SRC= “cale/fisier.jpg” ALT = “Ce se va afisa daca imaginea nu se incarca!”>

Imaginile sunt stocate în fişiere cu diverse formate. Formatele acceptat de browsere pentru fişierele imagine sunt:

GIF (Graphics Interchange Format) cu extensia .gif; JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; XPM (X PixMap) cu extensia .xpm; XBM (X BitMap) cu extensia .xbm; BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Pentru a cere afişarea unei imagini, comenzile diferă de la un browser la altul. Pentru Internet Explorer trebuie efectuat un right-click pe icon-ul corespunzător şi din meniul pop-up care va apărea trebuie selectată opţiunea Show Picture.

Următorul exemplu HTML prezintă modul de folosire a tag-ului <img>:

<html><head>

28

<title>Imagini</title></head><body><DIV align = "center"><IMG SRC = "img1.jpg" ALT = "Prima imagine"><BR><BR> Aceasta este pagina WEB care contine două imagini. <BR><BR><IMG SRC = "img2.jpg" ALT = "A doua imagine"></DIV></body></html>

Figura 4.1.1- Inserarea imaginilor in paginile web

4.2 Alinierea imaginilor

Tag-ul html <IMG> mai are un parametru important şi anume ALIGN cu ajutorul căruia pot fi aliniate imaginile. O imagine poate fi aliniată atât orizontal, cât şi vertical. Pentru alinierea orizontală, valorile parametrului ALIGN pot fi: left, right, center. Pentru alinierea verticală, valorile pot fi: top, bottom sau middle.

<html><head><title>Alinierea imaginilor</title></head><body>

29

Alinieri:<br> Pe verticala:<img src="img1.jpg" align="top">La mijloc: <img src="img2.jpg" align="middle">Jos: <img src="img1.jpg" align="bottom"> Text dupa imagine.</body></html>

Figura 4.1.2-Alinierea imaginilor pe verticală

În cazul alinierii orizontale, imaginea va fi aliniată la dreapta, la stânga sau va fi centrată. Trebuie observat faptul că parametrul ALIGN al comenzii IMG diferă de la acelaşi parametru al comenzii DIV. De exemplu <IMG ALIGN = “RIGHT”> va alinia o imagine la dreapta şi textul care urmează va “înfăşura” imaginea, ca în exemplul de mai jos:

<html><head><title>Papusi</title></head><body><DIV ALIGN = "CENTER">In aceasta pagina vor fi prezentate cele mai frumoase jucarii produse de firma noasta.<img src = "img3.jpg" alt = "Papusi" align = "left">Firma noastra este una cu o deosebita experienta in domeniul fabricarii de jucarii si acestea reprezinta rezultatul a zeci de ani de munca.

30

<img src="img3.jpg" alt = "Papusi" align = "right">Puteti cumpara chiar acum aceasta papusa de vis contactanddistribuitorul nostru autorizat in orasul dvs!</div></body></html>

Figura 4.1.3-Înfăşurarea imaginilor

Atributele HSPACE si VSPACE precizează distanţa în pixeli pe orizontală, respectiv pe verticală, dintre imagine şi restul elementelor din pagină.

<html><head><title> Alinierea textului in jurul imaginii</title></head><body><h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.</h4><p> Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de

31

imagine.Text inainte de imagine.Text inainte de imagine.<img src="img1.jpg" align="left" hspace="30" vspace="30" alt="Imagine">Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.</body></html>

Figura 4.1.4- Alinierea textului in jurul imaginii

4.3 Dimensiunile unei imagini

Deoarece textul se încarcă mult mai repede decât imaginile, cele mai multe browsere web vor afişa textul înaintea imaginilor. La început, browserul nu cunoaşte dimensiunile imaginilor şi, de aceea, nu va lăsa loc liber pentru ele. Din această cauză, textul se va deplasa pe ecran în timp ce imaginile sunt încărcate.

32

Pentru a evita acest lucru, tag-ul <IMG> are doi parametri prin care se poate preciza lungimea şi înălţimea unei imagini. De exemplu, comanda:

<IMG SRC = “myimage.gif” WIDTH = 200 HEIGHT = 100>

va rezerva un dreptunghi de dimensiuni 200x100 pentru imaginea din fişierul myimage.gif.. Pentru a adăuga un chenar în jurul imaginii, se foloseşte atributul BORDER al etichetei <IMG>. Valorile acestor atribute sunt numere întregi pozitive.

Dimensiunile transmise ca parametri nu trebuie neapărat să fie egale cu dimensiunile reale ale imaginii, browserul mărind sau micşorând imaginea astfel încât ea să ocupe întreg dreptunghiul precizat. Folosirea eronată a acestor parametri poate avea rezultate neplăcute deoarece imaginea ar putea fi deformată prin mărirea sau micşorarea disproporţionată a celor două dimensiuni.

<html><head><title>Dimensiunea imaginii</title></head><body>O imagine cu chenar si dimensiune de 120 pixeli X 50 %<img src="img1.jpg" border="5" width="120" height="50%"> Text dupa imagine.</body></html>

Figura 4.1.5- Redimensionarea unei imagini

33

O imagine poate fi utilizată pentru a stabili fondul unei pagini Web. În acest scop se foloseşte atributul BACKGROUND al etichetei <BODY> , având ca valoare adresa URL a imaginii. Imaginea se multiplică pe orizontală şi pe verticală până umple întregul ecran.

Imaginile pot fi utilizate pentru a obţine efecte deosebite într-o pagină web. Printre aceste utilizări speciale putem enumera:

Linii orizontale formate cu ajutorul imaginilor. Simboluri speciale pentru elementele unei liste neordonate. Elementele unei liste ordonate sau neordonate Legături (efectuând click cu butonul mouse-ului pe aceasta zonă în

browser se va încărca o altă pagină.)

4.4 Exemplu

<HTML><HEAD><TITLE> Imagini </TITLE></HEAD><BODY background="Blue hills.jpg"><H2 align=center> <FONT COLOR=BLUE> PAGINA CU IMAGINI </FONT> </H2><IMG SRc ="img1.jpg" border= "3" align=middle> Peisaj<br>A doua imagine <img src="img2.jpg" align =top hspace=30 vspace=50 alt="Casa"> aliniata la o anumita distanta fata de text <br><font size="+2" color="#333366">Pozele sunt frumoase</font></BODY></HTML>

34

5. Legături

Legăturile (link-urile) reprezintă partea cea mai importanta a unei pagini Web. Ele transformă un text obişnuit în hypertext sau hyperlegătură, care premite trecerea rapidă de la o informaţie aflată pe un anumit server la altă informaţie memorată pe un alt server aflat oriunde în lume.

Legăturile sunt zone active într-o pagină Web, adică zone de pe ecran sensibile la apăsarea butonului stâng al mouse-ului.

Pentru a realiza o legătură hypertext se utilizează tag-ul ancoră: <A> … </A>, care include şi atribute. Unul dintre aceste atribute este: HREF (Hypertext REFerence), utilizat pentru a specifica URL-ul documentului ţintă. Sintaxa este:

<A HREF= “localizarea documentului”> text de legătură </A>

unde: HREF este un atribut având ca valoare “localizarea documentului”.

<A HREF= “localizarea documentului”> este tagul de început, </A> este tagul de sfârşit, textul dintre taguri (,,text de legătură”) este textul pe care se apasă click, afişat diferit.

Legăturile se pot realiza:- intern, în acelaşi document;- local, către un document situat pe acelaşi server;- extern, către un document aflat pe alt server.

a) Legătura locală. Are următoarea sintaxă:

<A HREF=”fişier_local”> text de legătură </A>

unde “FIŞIER_LOCAL” reprezintă adresa fişierului local către care se

face legătura, acesta fiind încărcat. Fişierul local se precizează folosind:- calea relativă, serverul va căuta documentul începând din acelaşi director

ca şi documentul de la care a fost apelată legătura;- calea absolută, când documentul va fi identificat începând cu directorul

rădăcină.

b) Legătura internă se realizează între elemente ale aceluiaşi document sau către un anumit punct ţintă al altui document. Aceasta implică:

b1) crearea unei ancore în punctul ţintă:

<A NAME=”cuvânt_cheie”> Paragraf ţintă </A>

35

Ancorele din punctul ţintă nu sunt afişate diferit faţă de restul documentului.

b2) realizarea unei legături prin care se specifică numele fişierului (dacă legătura se face într-un punct al altui fişier) şi paragraful:

<A HREF=”[nume fişier]#cuvânt_cheie”> text de legătură </A>

Se utilizează acest tip de legătură în cadrul unui document organizat pe secţiuni. La începutul documentului poate fi prezentat conţinutul.

c) Legătura externă. Are următoarea sintaxă:

<A HREF= “http://www.yahoo.com”> text de legătură </A>

unde “http://www.yahoo.com” este URL-ul documentului. Ţinta unei legături hypertext poate fi un fişier HTML, o imagine externă

(GIF, JPEG sau PostScript), un film sau text (căruia i s-a marcat o ancoră).Este posibilă definirea unor legături către celelalte servicii Internet: FTP,

TELNET, NEWS, MAILTO, JavaScript. Spre exemplu, o legătură de forma:

mailto: adresă e-mail

va apela un program de scriere şi expediere a scrisorilor electronice, către destinatarul a cărui adresă a fost specificată.

Pentru ca exemplul următor să funcţioneze trebuie ca: pe calculator să fie instalată o aplicaţie de expediere a mesajelor

electronice (Outlook Express pe calc. Windows , Pine pe calc. Unix); adresa să fie validă şi calculatorul să fie conectat la Internet.

<html><head><title> Expediere de mesaje electronice</title></head> <body><h3>Expediere de mesaje electronice</h3><br> <a href="mailto:luminitaserbanescu@yahoo.com"> Mesaje catre autorul paginii </body></html>

36

Figura 5.1 - Trimitere de mesaje electronice

Imaginile introduse într-o pagină de web pot avea doar un rol decorativ, de îmbunătăţire a aspectului site-ului, sau pot conţine trimiteri către alte pagini sau servicii web. Dacă se doreşte ca un link să conţină şi o imagine grafică, acest lucru poate fi realizat prin includerea unei comenzi <IMG> între tag-ul de început şi cel de sfârşit al comenzii <A>.

<A HREF = “pagina.html”> <IMG SRC = “fotografie.gif”> </A>

<html><HEAD><TITLE> Exemplu imagini cu link-uri </TITLE></HEAD><BODY>Apasati pe imaginea de mai jos pentru a deschide o noua pagina:<a href = "ex12.htm"> <img src ="img1.jpg"> </a></BODY></html>

37

Figura 5.2 - Imagini folosite ca legături

O pagină Web poate conţine legături către orice tip de fişiere aflate pe orice servere din Internet. Pentru aceasta se utilizează eticheta <a> având valoarea atributului href egală cu adresa URL a fişierului destinatie.

Atunci cand se efectueaza clic pe legătură. se deschide o casetă de dialog - File download - care permite:

să salvaţi pe discul local fişierul să lansaţi în execuţie aplicaţia capabilă să interpreteze corect fişierele

de tipul respectiv.

5.1 Alegerea culorilor pentru legături

In mod prestabilit se utilizează trei culori pentru legături: culoare pentru legăturile nevizitate (nu s-a efectuat nici un click pe

ele) culoare pentru legăturile vizitate (s-a efectuat cel puţin un click pe ele) culoare pentru legăturile active (deasupra cărora se află mouse-ul la

un moment dat). Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei

<BODY>: LINK pentru legăturile nevizitate; VLINK pentru legăturile vizitate; ALINK pentru legăturile active.

38

<html><head><title>Untitled Document</title></head><body><body link="blue" vlink="green" alink="red"><h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3><a href="leg_ex1.html">Link catre pagina 1 <br> <a href="leg_ex2.html">Link catre pagina 2 <br> <a href="leg_ex11.html">Link catre pagina 3 </a></body></html>

Figura 5.1.1 Setarea culorilor pentru legături

5.2 Exemple

1. Acest exemplu este format din patru fişiere cu legături între ele.

39

a. Sem5_1.html

<html><head><title> Legaturi </title></head><body BGCOLOR=YELLOW LINK="BLUE" VLINK="GREEN" ALINK="RED"><H2 ALIGN=CENTER>SEMINAR TEORETIC </H2><CENTER>PAGINA1<A HREF=SEM5_2.HTML> PAGINA2 <A HREF=SEM5_3.HTML> PAGINA 3</A></CENTER><BR><FONT SIZE=4 COLOR=BLUE> FONT DE DIMENSIUNE 4 SI CULOARE ALBASTRU </FONT><A HREF=SEM5_4.HTML><img src="img1.jpg" align =RIGHT hspace=30 vspace=50 alt="Peisaj"></A></BODY></HTML>

40

b. Sem5_2.html

<html><head><title> Legaturi </title></head><body BGCOLOR=PINK LINK="BLUE" VLINK="GREEN" ALINK="RED"><H1>SEMINAR TEORETIC </H1><CENTER><A HREF=SEM5_1.HTML> PAGINA1 </A>PAGINA2<A HREF=SEM5_3.HTML> PAGINA 3</A></CENTER><BR><FONT SIZE=4 COLOR=BLUE> EXEMPLU </FONT></BODY></HTML>

c. Sem5_3.html

<html><head><title> Legaturi </title>

41

</head><body LINK="BLUE" VLINK="GREEN" ALINK="RED"><H1 ALIGN=CENTER>SEMINAR TEORETIC </H1><CENTER><A HREF=SEM5_1.HTML> PAGINA1 </A><A HREF=SEM5_2.HTML> PAGINA 2</A>PAGINA3</CENTER><BR><FONT SIZE=4 COLOR=BLUE> TEXT </FONT></BODY></HTML>

d. Sem5_4.html

<html><head><title> Legaturi DIN IMAGINE </title></head><body BGCOLOR=”LIGHTYELLOW” LINK="BLUE" VLINK="GREEN" ALINK="RED"><H1 ALIGN=CENTER>SEMINAR TEORETIC </H1><FONT SIZE=4 COLOR=RED> PEISAJ </FONT><BR><A HREF=SEM5_1.HTML> REVENIRE LA PAGINA1 </A></BODY></HTML>

42

2.

<html><head><title>Legaturi</title></head><body bgcolor="#FFFFCC"><img src ="img1.jpg"width="200" height="200" align="left" hspace="30" vspace="15"><BR><p align = "center"><font size="5" face ="verdana" color="#6633CC"><strong> Peisaj </strong></font></p><p align="center"><b><font size="3" face="Verdana"><strong><font color="#6633CC">Aceasta pagina contine o imagine inserata, textul fiind scris in dreapta imaginii. De asemene se poate observa ca la pozitionatre mouse-ului pe imagine este vizibil un text. </font></strong></b></p><br><br><p align="left"><b><font size="3" face="Verdana"><strong><font color="#6633CC"> Acesta este un text scris sub imagine.<a href = "Informatii.html"><img src = "i.bmp" alt="apasati pentru a afla mai multe despre turism"> </a></font></strong></b></p></body></html>

43

6. Liste în HTML

Listele HTML reprezintă un mod eficient de a comunica o mare cantitate de informaţii folosind o cantitate relativ redusă de spaţiu. HTML oferă autorilor de pagini de web câteva mecanisme specifice pentru afişarea listelor cu informaţii. Listele HTML sunt de trei tipuri:

liste de definiţii. liste neordonate (liste cu buline); liste ordonate (liste numerotate);

În paginile web se folosesc mai ales listele neordonate şi ordonate, ceea ce nu înseamnă că listele de definiţii au o importanţă mai mică. Acestea din urmă sunt unice prin faptul că dau posibilitatea definirii a două tipuri diferite de elemente ale listei, cu numele termenului de definit şi cu definiţiile pentru acel termen.

Listele neordonate sunt similare listelor cu buline (bulleted lists) din MS Word, în timp ce listele ordonate sunt liste numerotate (numbered lists).

6.1 Liste de definiţii

44

Unul din cele mai obişnuite elemente din documentele cu mai multe pagini este un set de definiţii, referinţe sau indexuri. Lista de definiţii este indicată de tagul <DL> (definition list = listă de definiţii), fiecare element care trebuie definit este precedat de de tagul <DT> (definition term = termen de definiţie), iar fiecare definiţie pentru termeni este precedată de tagul <DD>.

Sintaxa unei liste de definiţii este:

<DL> <DT><B> Termen1 pentru definit </B>

<DD> Definirea termenului <DT><B> Termen2 pentru definit </B>

<DD> Definirea termenului</DL>

Exemplu:

<html><head><title>Liste de definitii</title></head><body><DL> <DT><B> Server </B>

<DD> un calculator care ofera servicii într-o retea; <DT><B> Client </B>

<DD> un calculator care solicita servicii într-o retea; </DL></body></html>

Figura 6.1.1 – Liste de definiţii6.2 Liste neordonate

45

O listă neordonată este un bloc de text delimitat de etichetele corespondente <UL>...</UL> ("UL" vine de la " unordered list " = lista neordonată). Fiecare element al listei este iniţiat de eticheta <LI> (list item).

Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei începe pe un rând nou.

Sintaxa este următoarea:

<UL TYPE=t> <LI> Text1

<LI> Text2

</UL>

unde atributul TYPE defineşte semnul care va precede elementele listei: t = "circle" (cerc) t = "disc" (disc plin) (valoarea prestabilită);t = "square" (pătrat)

Exemplu

<html><head><title>Liste neordonate</title></head><body><h1 align=center>O lista neordonata de liste neordonate</h1><hr> <ul>Elemente si atribute a unei pagini HTML <li>Font <ul type="square">Atribute: <li>size <li>color <li>face </ul> <li>Img <ul type="square">Atribute: <li>src <li>alt <li>border <li> height <li> width </ul> </ul> </body></html>

46

Figura 6.2.1 – Liste neordonate

6.3 Liste ordonate

O listă ordonată de elemente este un bloc de text delimitat de etichetele corespondente <OL>...</OL> ("OL" vine de la " ordered list " = listă ordonată). Fiecare element al listei este iniţiat de eticheta <LI> (list item).

Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei începe pe un rând nou. Sintaxa este:

<OL TYPE=t START=s><LI> Text1

<LI> Text2

<LI> Text3

</OL>

47

unde atributul TYPE defineşte tipul numerotării elementelor listei, care poate fi: "A" pentru ordonare de tipul A , B , C , D etc. (litere mari); "a" pentru ordonare de tipul a , b , c , d etc. (litere mici); "I" pentru ordonare de tipul I , II , III , IV etc. (cifre romane mari); "i" pentru ordonare de tipul i , ii , iii , iv etc. (cifre romane mici); "1" pentru ordonare de tipul 1 , 2 , 3 , 4 etc. (cifre arabe - opţiune

prestabilită);Atributul START defineşte valoarea de început.

Exemplu

<html><head><title>Liste ordonate</title></head><body><OL><B> <LI> Analiza economica <LI> Contabilitate financiara <LI> Proiectarea sistemelor informatice</B></OL><OL TYPE="a"> <LI> Curs <LI> Seminar</OL></body></html>

Figura 6.3.1 – Liste ordonate

48

Dacă într-o listă, în loc de elementele acesteia introduse prin <LI>, se inserează un bloc de text, aceasta va fi indentat ( întocmai ca elementele unei liste).

Toate aceste liste pot fi folosite împreună printr-un procedeu de imbricare (crearea de liste în interiorul altor liste). Listele de definiţii sunt în acest caz de un deosebit folos deoarece se pot adăuga diferite tipuri de liste (cum ar fi liste cu buline sau liste numerotate) în interiorul descrierii din lista de definiţii. Pentru a crea liste imbricate nu trebuie decât să introducem o listă în interiorul alteia. Browserul le va afişa automat imbricate. În cazul listelor neordonate, browserul va schimba şi tipul caracterului afişat la începutul rândului. Astfel, pentru primul nivel, textul va fi precedat de o bulină plină, al doilea de un cerc, iar pentru celelalte niveluri de imbricare de un pătrat plin.

În concluzie, folosirea listelor oferă o modalitate simplă de grupare şi afişare a informaţiilor în paginile de web.

6.4 Exemple

1.<html><head><title>Liste</title></head><b> Exemplu de lista ordonata: </b><BR> Cele trei tipuri de liste HTML sunt:<OL> <LI> ordonata (aceasta lista) <LI> neordonata <LI> de definitii</OL><b> Exemplu de lista neordonata: </b><BR> Tag-urile corespunzatoare acestor liste sunt:<UL>

<LI>OL<LI>UL (aceasta lista)<LI>DL

</UL><b> Lista de defintii arata astfel: </b><DL>

<DT> Primul termen

49

<DD> Prima definitie pentru primul termen<DD> A doua definitie pentru primul termen

<DT> Al doilea termen<DD> Prima definitie pentru al doilea termen<DD> A doua definitie pentru al doilea termen

</DL></BODY></html>

2. 50

<html><head><title>Liste</title></head><body><h1 align=center>O lista ordonata de liste ordonate si neordonate </h1><hr> <ol>Un sistem informatic include: <li>Hardware: <ol> <li>placa de baza <li>procesor <li>memorie <li>harddisk </ol> <li>Software: <ul> <li>Linux <li>Windows <li>OS/2 <li>Unix </ul> <li>Software de aplicatie: <ul type="disc"> <li>VisualC++ <li>Java <li>SQL <li>CorelDraw </ul> </ol> </body></html>

51

3. <HTML><HEAD> <TITLE> LISTE </TITLE> </HEAD><BODY BGCOLOR=LIGHTYELLOW><DL> <B> <U>LISTA DE DEFINITII </U> </B><DT> <B>OBIECT </B> <DD> <I> ENTITATE BINE DEFINITA </I><DT> <B> BAZA DE DATE </B>

52

<DD> <I> COLECTIE DE DATE STOCATE </I><DT> <B> SIAD </B> <DD> <I> SISTEM INFORMATIC DE ADMINISTRARE A DATELOR </I></DL><B><U>LISTE NEORDONATE</U></B><UL> BAZE DE DATE <LI > TABELE <UL> CARACTERISTICI: <LI TYPE=CIRCLE> CAMPURI <LI> INREGISTRARI </UL> <LI> RELATII <UL TYPE=CIRCLE> CARACTERISTICI : <LI> ONE TO ONE <LI> ONE TO MANY <LI> MANY TO ONE </UL> </UL><OL TYPE ="A"> <B><U>LISTA ORDONATA</U></B> <LI> CULORI <OL TYPE="1"> <LI > NEGRU <LI> ALB <LI> ROSU </OL> <LI> MASINI <OL TYPE="I"> <LI > RENAULT <LI> LOGAN <LI > BMW </OL> <LI> FLORI <OL TYPE="a"> <LI> GAROAFE <UL> CULORI DISPONIBILE <LI> ALB <LI> ROSU <LI> GALBEN </UL> <LI> TRANDAFIRI <UL> CULORI DISPONIBILE <LI> ALB <LI> ROSU <IMG SRC="img1.JPG" WIDTH=200 HEIGHT=100 HSPACE=150> <LI> ORANGE </UL> <LI> CRIZANTEME <UL> CULORI DISPONIBILE <LI> ALB <LI> GALBEN </UL> <LI> ZAMBILE <UL> CULORI DISPONIBILE <LI> ALB <LI> VIOLET </UL></OL></BODY></HTML>

53

54

4. <html><head><title>Liste si legaturi</title></head><BODY><H1 ALIGN=center> EXEMPLU DE PAGINA WEB </H1><P> Prin continutul acestui document se exemplifica legatura catre un paragraf al documentului.<P> <P><A NAME="CCC"></A><OL> <H1> <LI> <A HREF="#AAA"> Materiile anului I </A> <LI> <A HREF="#BBB"> Materiile anului II </A> <LI> <A HREF="#DDD"> Materiile anului III </A> </H1></OL><HR> <P><H2> <A NAME="AAA"> Materiile anului I </A> </H2> <BR><UL>

<LI> Statistica economica<LI> Bazele contabilitatii<LI> Informatica economica<LI> Matematica aplicata in economie<LI> Limba straina</UL>

<HR> <A HREF="#CCC"> Revenire început </A> <HR><P> <H2> <A NAME="BBB"> Materiile anului II </A> </H2> <BR><UL>

<LI> Evaluarea intreprinderii<LI> Contabilitate financiara 1 si 2<LI> Econometrie<LI> Contabilitatea institutiilor de credit<LI> Bazele de date si limbaje de programare<LI> Proiectarea sistemelor informatice de gestiune<LI> Contabilitate in CTS</UL>

<HR> <A HREF="#CCC"> Revenire început </A> <HR><P> <H2> <A NAME="DDD"> Materiile anului III </A> </H2> <BR><UL>

<LI> Contabilitate de gestiune<LI> Analiza economica financiara 1 si 2<LI> Contabilitate internationala<LI> Programarea calculatoarelor<LI> Expertiza contabila<LI> Contabilitate aprofundata</UL>

<HR> <A HREF="#CCC"> Revenire început </A> <HR></BODY></html>

55

56

7. Crearea tabelelor

Prezentarea datelor sub formă de tabele are importante avantaje atât prin claritate şi sistematizare cât şi prin posibilităţile de comparare oferite. Deşi tabelele pot fi construite în HTML şi prin aranjarea directă a datelor, din tastatură şi utilizarea unui font neproportional (sau formatul PRE), există taguri dedicate cu ajutorul cărora tabelele pot fi formatate aproape la nivelul similar din procesoarele de texte.

Una din cele mai puternice unelte folosite în proiectarea paginilor de web este tabelul. Utilizarea tabelelor permite aranjarea textului şi a imaginilor pe mai multe linii şi coloane.

La crearea unui tabel, tagul HTML corespunzător este <TABLE>. Pentru ca celulele tabelului să aibă chenare se foloseşte parametrul BORDER, cu ajutorul căruia se precizează grosimea în pixeli a liniilor care formează chenarele.

O nouă linie în tabel se creează cu ajutorul tag-ului <TR>. O linie conţine una sau mai multe “celule”, care trebuie specificate prin tag-ul <TD>. Acest tag se poate înlocui cu antetul de linie stabilit prin tag-ul <TH>. Conţinutul celulelor definite cu <th> este scris cu caractere aldine şi centrat. O celulă este o regiune dreptunghiulară a ecranului care poate conţine text, imagini şi aproape orice altceva.

De exemplu un tabel se contruieste astfel:

<html><head><title>Tabel</title></head><body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr> <table border =”1”> <tr> <td>cell 11 <td>cell 11 <tr> <td>cell 21 <td>cell 22 <tr> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td>cell 42 </table></body></html>

57

Figura 7.1 - Tabel format din 4 linii şi 2 coloane

Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <CAPTION> (de la "table caption" =titlu tabel )

Această etichetă trebuie plasată în interiorul etichetelor <TABLE>...</TABLE>, dar nu în interiorul etichetelor <TR> sau <TD>. Titlul unui tabel poate fi aliniat cu ajutorul atributului ALIGN al etichetei <CAPTION> care poate lua una dintre valorile prezentate în tabelul de mai jos:

Valoare Efecte

“bottom” Afişează titlul sub tabel

“Top” Afişează titlul deasupra tabelului

“left” Afişează titlul la stânga tabelului

“Right” Afişează titlul la dreapta tabelului

Exemplu:

<html><head><title>Titlul unui tabel</title></head><body><TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#ADEADA" ALIGN=center><CAPTION ALIGN=top>Tabelul I </CAPTION>

58

<TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR><TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR><TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR></TABLE></body></html>

Figura 7.2 – Titlul unui tabel

7.1 Atributele tabelelor

Sintaxa completă a tag-ului <TABLE> este:

<TABLE [ BORDER] [ FRAME] [ RULES] [ WIDTH] [ HEIGHT][BGCOLOR] [ BORDERCOLOR] [ BORDERCOLORLIGHT]

[ BORDERCOLORDARK] [ BACKGROUND] [ CELLSPACING] [ CELLPADDING] [ ALIGN] [ VALIGN]>

continut-tabel</TABLE>

Atributul BORDER. In mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează un atribut al etichetei <TABEL> numit BORDER.

59

Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezintă grosimea în pixeli a chenarului tabelului.

Dacă atributul BORDER nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absenţa chenarului. Cand atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional.

Atributul FRAME specifică afişarea bordurilor exterioare. Atributul BORDER trebuie să fie prezent. Aceasta este o extensie Microsoft.. Acest atribut poate lua următoarele valori:

void - fără bordură exterioară; above - chenar sus; below - chenar jos; hsides - chenar sus si jos; vsides - chenar stânga si dreapta; lhs - chenar stânga; rhs - chenar dreapta; box - chenar complet.

Atributul RULES controlează afişarea liniilor interioare în cazul când se utilizează TBODY, TFOOT şi THEAD (vezi în continuare). Atributul BORDER trebuie să fie prezent. Aceasta este o extensie Microsoft. Atributul RULES poate lua valorile:

none - nu se afişează linii interioare; groups - afişează linii între grupurile tabelului; rows - afişează linii între linii; cols - afişează linii între coloane; all - afişează toate liniile interioare.

Exemplu:

<html><head><title>Untitled Document</title></head><body><h1 align=center>Atributele frame si rules</h1> <table width="400" frame=box rules=rows cellspacing=10> <tr> <td>cell 11 <td>cell 12<td>cell 13 <tr> <td>cell 21 <td>cell 22<td>cell 23 </table></body></html>

60

Figura 7.1.1 – Atributele FRAME şi RULES ale tabelelor

Atributete WIDTH şi HEIGHT comandă lăţimea respectiv înăţimea tabelului. Valorile acestor atribute pot fi:

numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;

numere întregi între 1 şi 100, urmate de semnul %, reprezentând fracţiunea din lăţimea şi înălţimea totală a paginii.

Exemplu:

<html><head><title>Dimensiunile tabelului</title></head><body><h1 align=center>Un tabel de de 200 pixeli X 50 %</h1><hr> <table border width="200" height="50%"> <tr> <td>cell 11 <td>cell 12 <tr> <td>cell 21 <td>cell 22

61

</table></body></html>

Figura 7.1.2 – Stabilirea dimensiunilor unui tabel

Atributul BGCOLOR este culoarea pentru fundalul tabelului. Culoarea de fundal este acoperită, evident, de culoarea declarată ca fundal pentru linii (vezi TR), care este acoperită de culoarea declarată ca fundal pentru celule (vezi TH şi TD). Deci, dacă în tabel sunt definite mai multe atribute BGCOLOR, atunci prioritatea este următoarea: <TD>, <TR>, <TABLE> ( cu prioritate cea mai mică).

Atributul BORDERCOLOR este culoarea bordurii tabelului. Aceasta este o extensie Microsoft;

Atributul BORDERCOLORLIGHT este culoarea liniei luminoase dintr-o bordură umbrită. Aceasta este o extensie Microsoft;

Atributul BORDERCOLORDARK este culoarea umbrei dintr-o bordură umbrită. Aceasta este o extensie Microsoft;

62

Atributul BACKGROUND specifică adresa URL a fişierului imagine utilizat drept fundal pentru fiecare celulă a tabelului. Aceasta este o extensie Microsoft;

Atributul CELLSPACING arată spaţierea, în pixeli, dintre celule. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în pixeli dintre două celule vecine.

Valorea prestabilită a atributului cellspacing este 2.

Exemplu:

<html><head><title>Spatiu dintre celule</title></head><BODY><TABLE BORDER=5 CELLSPACING=6><TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR><TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR><TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR></TABLE></BODY></html>

Figura 7.1.3 - Spaţierea între celule

63

Atributul CELLPADDING arată spaţierea, în pixeli, dintre marginile celulei şi conţinutul ei. Valorile acestui atribut pot fi numere întregi pozitive, şi reprezintă distanţa în pixeli dintre celule şi conţinutul ei.

Valorea prestabilită a atributului cellpadding este 1.

Exemplu:

<html><head><title>Spatiu intre margini si continut</title></head><BODY><TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10><TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR><TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR><TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR></TABLE></BODY></html>

Figura 7.1.4 – Distanţa dintre continut şi marginile celulelor

64

Atributul ALIGN. Se foloseşte pentru a alinia un tabel într-o pagină Web şi are următoarele valori posibile: " left " ( valoarea prestabilită ), " center " şi "right ".

Alinierea este importantă pentru textul ce înconjoară tabelul. Astfel : dacă tabelul este aliniat stânga (<table align="left">), atunci

textul care urmează după punctul de inserare al tabelului va fi dispus în partea dreaptă a tabelului.

dacă tabelul este aliniat dreapta (<table align="right">), atunci textul care urmează după punctul de inserare al tabelului va fi dispus în partea stângă a tabelului.

dacă tabelul este aliniat pe centru (<table align="center">), atunci textul care urmează după punctul de inserare al tabelului va fi afişat pe toată lăţimea paginii, imediat sub tabel.

Exemplu:

<html><head><title>Alinierea tabelelor</title></head><body><h1 align=center>Un tabel aliniat la dreapta</h1><hr> Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. <table border align="right"> <tr> <td>cell 11 <td>cell 11 <tr> <td>cell 21 <td>cell 22 </table>Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. </body></html>

65

Figura 7.1.5 - Alinierea tabelelor pe orizontală

Atributul VALIGN arată alinierea verticală a tabelului. Alinierea pe verticală a conţinutului unei celule se face cu ajutorul atributului VALIGN care poate lua valorile:

" baseline " (la bază); " bottom " (jos); " middle " (la mijloc, valoarea prestabilită); " top " (sus).

Aceste atribute pot fi ataşate atât etichetei <tr> pentru a defini alinierea tuturor elementelor celulelor unui rănd, cât şi etichetelor <td> şi <th> pentru a stabili alinierea textului într-o singură celulă.

Exemplu:

<html><head><title>Alinierea pe verticala a unui tabel</title></head><BODY><TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 ALIGN=center BORDERCOLOR=green VALIGN=bottomBORDERCOLORDARK=maroon ><TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR><TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR><TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR></TABLE></BODY></html>

66

Figura 7.1.6 - Alinierea tabelelor pe verticală

7.2 Atributele celulelor

a) Linii în tabele. Sintaxa tag-ului <TR> este următoarea:

<TR [ALIGN] [VALIGN] [BGCOLOR] [BORDERCOLOR] [BORDERCOLORLIGHT] [BORDERCOLORDARK]

[ BACKGROUND "]>["continut-linie"]

[</TR>]

Acest tag trebuie să fie scufundat în tagul <TABLE> şi anume fiecare linie a tabelului care se vrea marcat trebuie să aibă corespondent un tag <TR>.

Atributul ALIGN precizează modul în care conţinutul celulelor liniei se va alinia orizontal în interiorul celulelor;

Atributul VALIGN precizează modul în care conţinutul celulelor se va alinia vertical în interiorul celulelor;

67

Atributul BGCOLOR indică fondul colorat al liniei;

Atributul BORDERCOLOR este culoarea bordurii celulelor;.

Atributul BORDERCOLORLIGHT este culoarea liniei luminoase dintr-o bordură umbrită a celulelor;

Atributul BORDERCOLORDARK este culoarea umbrei dintr-o bordură umbrită a celulelor;

Atributul BACKGROUND specifică adresa URL a fişierului imagine utilizat drept fundal pentru fiecare celulă a liniei.

În exemplul următor se vede cum setările generale de aliniere şi culoare, pentru întregul tabel, sunt înlocuite de cele precizate pentru o linie (cea de antet).

<html><head><title>Formatarea liniilor tabelelor</title></head><body><TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#CCFFFF" ALIGN=center> <CAPTION ALIGN=bottom>Tabel</CAPTION> <TR BGCOLOR="#3399FF" ALIGN=right> <TH>Coloana 1</TH> <TH>Coloana 2</TH> </TR> <TR> <TD>Celula 1.1</TD> <TD>Celula 1.2</TD> </TR> <TR bordercolor="#0033FF" align=center> <TD>Celula 2.1</TD> <TD>Celula 2.2</TD> </TR></TABLE></body></html>

68

Figura 7.2.1 Formatarea liniilor unui tabel

b) Coloane şi capete de coloane. Sintaxa tag-urilor <TD> respectiv <TH> este:

<TH sau TD [ALIGN] [VALIGN] [BACKGROUND] [COLSPAN] [ ROWSPAN] [BGCOLOR] [BORDERCOLOR] [BORDERCOLORLIGHT]

[BORDERCOLORDARK] [ NOWRAP] [WIDTH][HEIGHT]["continut-celula"][</TH sau /TD>]

Conţinutul celulei va fi evidenţiat, în general, prin scriere şi centrare.

Atributele BGCOLOR, BACKGROUND, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK precizează fundalul şi culorile bordurilor celulei (vezi TABLE, TR).

Atributele ALIGN, VALIGN indică alinierea orizontală şi verticală, în celulă, a conţinuului celulei;

69

Rxemplu:

<html><head><title>Scrierea in celule</title></head><body><TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#FFFFCC" ALIGN=center width="300" height="100"><CAPTION ALIGN=top>Tabel </CAPTION><TR> <TH align="center">Coloana 1</TH> <TH align="center">Coloana 2</TH></TR><TR> <TD align="right" valign="bottom">Celula 1.1</TD> <TD align="right" valign="top">Celula 1.2</TD></TR><TR> <TD align="center" valign="middle">Celula 2.1</TD> <TD align="left" valign="top">Celula 2.2</TD></TR></TABLE></body></html>

Figura 7.2.2 – Alinierea textului în celulele tabelelor70

Atributul COLSPAN specifică numărul de coloane peste care se întinde celula spre dreapta (operaţiunea de unificare a celulelor pe orizontală din procesoarele de texte);

Exemplu:

<html><head><title>Coloane unite</title></head><body><TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#FFCCFF"><TR BGCOLOR=lightyellow> <TH COLSPAN=2 ALIGN=right> TABEL</TH></TR><TR BGCOLOR="#FF9933" ALIGN=right> <TH>Coloana 1</TH> <TH>Coloana 2</TH></TR><TR> <TD>Celula 1.1</TD> <TD>Celula 1.2</TD></TR><TR> <TD>Celula 2.1</TD> <TD>Celula 2.2</TD></TR></TABLE></body></html>

Figura 7.2.3 - Coloane unite

71

Atributul ROWSPAN specifică numărul de linii peste care se întinde celula în jos (operaţiunea de unificare a celulelor pe verticală din procesoarele de texte);

În coloanele/liniile peste care s-au extins alte celule, extensiile nu se mai declară. Pentru aceste coloane/linii se vor declara doar celulele care apar aici pentru prima dată (este ca si cum unele celule se obţin prin moştenirea unor linii/coloane anterioare).

Sunt posibile extinderi simultane ale unei celule pe orizontală şi pe verticală. În acest caz , în etichetele <TD> şi <TH> vor fi prezente ambele atribute COLSPAN şi ROWSPAN.

Exemplu:

<html><head><title>Unirea liniilor</title></head><body><TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#FFFFCC"> <TR> <TH ROWSPAN=2>TABEL<BR> cu linii unite</TH> <TH>Linia 1</TH><TD>Celula 1.1</TD></TR> <TR> <TH>Linia 2</TH> <TD>Celula 2.1</TD></TR></TABLE></body></html>

Figura 7.2.4 – Unirea liniilor unui tabel

72

Atributele WIDTH şi HEIGHT stabilesc lăţimea respectiv înălţimea unei celule.

Valorile posibile ale acestor atribute sunt: numere întregi pozitive (inclusiv 0) reprezentând dimensiunea în

pixeli a lăţimii, respectiv a înălţimii unei celule; procente din lăţimea , respectiv înălţimea tabelului.

Exemplu:

<html><head><title>Dimensiunea celulelor</title></head><body><h1 align=center>Un tabel cu celule de diferite dimensiuni</h1><hr> <table border> <tr> <td width="100" height="50">cell 11 <td width="150" height="50">cell 11 <tr> <td width="100" height="100">cell 21 <td width="150" height="100">cell 22 </table></body></html>

Figura 7.2.5 – Stabilirea dimensiunilor celulelor unui tabel

73

Atributul NOWRAP anulează defilarea textului din celulă pe mai multe linii.

Exemplu:

<html><head><title>Tabel cu celule de latime mare</title></head><body><h1 align=center>Un tabel cu celule de latime mare</h1><hr> <table border> <tr> <td>cell 11 <td>cell 12 <tr> <td nowrap>cell 21 <td>cell 22 este foarte lata,aceasta celula este foarte lata. </table></body></html>

Figura 7.2.6 – Anularea defilării textului dintr-o celulă pe mai multe linii

74

Dacă un tabel are celule vide, atunci aceste celule vor apărea în tabel fără un chenar de delimitare.

În scopul de a afişa un chenar pentru celule vide se utilizează următoarele trucuri:

după <TD> se pune &nbsp;; după <TD> se pune <BR>.

Caracterul &nbsp; (no break space) este de fapt caracterul spaţiu. Un spaţiu introdus prin intermediul acestui caracter nu va fi ignorat de browser.

Exemplu:

<html><head><title>Celule vide</title></head><body><h1 align=center>Un tabel cu celule vide</h1><hr> <table border> <tr> <td>cell 11 <td>cell 12 <td>cell 13 <tr> <td>&nbsp; <td> <td> </table></body></html>

Figura 7.2.7 – Celule vide

75

Conţinutul unui tabel poate fi împărţit în subblocuri prin elementele: <THEAD><TR><TD>...</THEAD> ( un singur rând ); <TFOOT><TR><TD>...</TFOOT> ( un singur rând ); <TBODY><TR><TD>...</TBODY> ( oricâte rânduri );

Într-un tabel există un singur subbloc de tipul <THEAD> şi un singur subbloc de tipul <TFOOT>, dar pot exista mai multe subblocuri de tip <TBODY>.

c) Grupuri de coloane. Blocul <COLGROUP>...</COLGROUP> permite definirea unui grup de coloane. Atributele acceptate de <COLGROUP> sunt:

SPAN determină numarul de coloane dintr-un grup; WIDTH determină o lăţime unică pentru coloanele din grup; ALIGN determină un tip unic de aliniere pentru coloanele din grup.

Într-un bloc <COLGROUP>, coloanele pot avea configurări diferite dacă se utilizează elementul <COL>, care admite atributele:

SPAN identifică acea coloană din grup pentru care se face configurarea. Dacă lipseşte, atunci coloanele sunt configurate în ordine;

WIDTH determină o lăţime pentru coloana identificată prin SPAN; ALIGN determină o aliniere pentru coloana identificată prin SPAN.

Exemplu:

<html><head><title>Grupuri de coloane</title></head><body><h1 align=center>Grupuri de coloane</h1><hr> <table width="400" cellspacing=10 border> <colgroup> <col width="100" align=right> <col width="100" align=center> <col width="200" align=right> </colgroup> <tr> <td valign=top>Text in prima coloana.Text in prima coloana.Text in prima coloana. Text in prima coloana. <td valign=middle>Text in coloana doua.Text in coloana doua.Text in coloana doua.Text in coloana doua. <td valign=bottom>Text in coloana a treia.Text in coloana a treia.Text in coloana a treia.Text in coloana a treia. </table></body></html>

76

Figura 7.2.8 – Grupuri de coloane

7.3 Exemple1.

<html><head><title>Tabele</title></head><body><table border=2><tr> <th>Titlu 1</th> <th>Titlu 2</th> <th>Titlu 3</th></tr><tr> <td>Casuta A</td> <td>Casuta B</td> <td>Casuta C</td>

77

</tr><tr> <td>Casuta D</td> <td>Casuta E</td> <td>Casuta F</td></tr></table></body></html>

2.<html><head><title>Tabele</title></head><body><table border=2><tr> <th>Titlu 1</th> <th>Titlu 2</th> <th>Titlu 3</th></tr><tr> <td rowspan=2>Casuta A & D</td> <td>Casuta B</td> <td>Casuta C</td></tr><tr>

78

<td>Casuta E</td> <td>Casuta F</td</tr></table></body></html>

3. <html><head><title>Exemplul 1</title></head><body><TABLE align="center" BORDER=2 bordercolor="#000000"><CAPTION ALIGN=top>CULORI</CAPTION><TR> <TD BGCOLOR=blue COLSPAN=2>albastru</TD> <TD>&nbsp; </TD> <TD>&nbsp;</TD></TR><TR> <TD>&nbsp; </TD> <TD BGCOLOR=yellow COLSPAN=2>galben</TD> <TD>&nbsp;</TD></TR><TR> <TD> &nbsp;</TD> <TD>&nbsp; </TD> <TD BGCOLOR=red COLSPAN=2>rosu</TD>

79

</TR></TABLE></body></html>

4.<html><head><title>Exemplul 2</title></head><body><table border = 2><tr> <td bgcolor="#FFFFCC"><div align = "center"> Celula aceasta contine numai text. Celula urmatoare contine numai o imagine. </div> </td> <td><img src = "img1.jpg" height = 111 width = 199></td> <td><div align = "center"> Aceasta celula contine si text <br> si o imagine. <br> <img src="img2.jpg" height=138 width = 100> </div> </td></tr></table></body></html>

80

5. <html><head><title>Dimensionarea celulelor</title></head><BODY bgcolor="#FFCCCC" text="#CC0000"><TABLE border = 1 width = 200 height = 50><tr><td width = 25%> Celula mica </td> <td width = 75%> Celula mare </td></tr></BODY></html>

81

6. <html><head><title>Unire linii si coloane</title></head><body><TABLE BORDER = 5 ALIGN = CENTER WIDTH = 300 HEIGHT = 30%><CAPTION ALIGN=TOP> <b> TABEL 1 </b><TR> <TH> COL1 <TH> COL2 <TH> COL3 <TH> COL4<TR HEIGHT = 40> <TD ALIGN = RIGHT VALIGN = TOP> 1.1 <TD ALIGN = CENTER VALIGN = BOTTOM> 1.2 <TD>&nbsp <TD> 1.4<TR> <TD ALIGN = CENTER COLSPAN = 3 ROWSPAN = 3 bgcolor = #C6D5E6> am unit 3 coloane si 3 randuri <TD ALIGN = LEFT VALIGN = BOTTOM> 2.4</TABLE></body></html>

82

7. <html><head><title>Formatare tabel</title></head><body><TABLE border = 2><tr> <td rowspan = 5 align = "center" valign = "middle" width = 50> <b>L<br>U<br>C<br>E<br>A<br>F<br>A<br>R<br>U<br>L</b> <td clospan = 2><div align = "center"> <font size = 6><b> Luceafarul </b></font></div> </td></tr><tr> <td><I> A fost odata ca-n povesti <br> A fost ca niciodata<br> Din rude mari imparatesti <br> O prea frumoasa fata.</I> </td> <td><I> Si era una la parinti <br> Si mandra-n toate cele<br> Cum e fecioara intre sfinti <br> Si luna intre stele.</I> </td></tr></TABLE></body></html>

83

8.<html><head> <title> TABELE </title><head><body bgcolor=lightblue><h1 align=center> <font color=blue>TABEL </font></h1><font size=2 color=red> Un tabel ce cuprinde mai multe elemente</font><table border=5 align=center bgcolor=yellow width=300 height=30%><caption align=top> TABEL 1<tr> <th> COL.1 <th> COL.2 <th> COL.3 <th> COL.4<tr height=40> <td align=right valign=top> 1.1 <td align=center valign=bottom> 1.2 <td>&nbsp; <td> 1.4<tr> <td align=center colspan=3 rowspan=2 bgcolor=red> 2.1<br>3.1 <td align=left valign=bottom> 2.4 <br><br></table>Un alt tabel<hr align=center width=800 ><br><table align=right frame=box rules=cols cellspacing=10 ><caption align=bottom> TABEL 2<colgroup span=3 width=100 align=center><tr> <td> Aici <td align=right valign=top> textul este <td align=left valign=bottom> scris diferit<tr> <td rowsspan=3 ><font color=red size=5> Avem trei randuri unite </font> <td>&nbsp; <td>&nbsp; <tr bgcolor=pink> <td align=left> 1.1 <td align=center> 1.2 <td> 1.3<tr bgcolor=orange height=60> <td valign=bottom> 2.1 <td align=left valign=baseline> 2.2 <td align=left> 2.3</table></body></html>

84

8. Ferestre în HTML

Ferestrele sau cadrele ne permit să definim în fereastra browserului subferestre în care să fie încărcate documente HTML diferite.

Folosirea cadrelor prezintă atât avantaje cât şi dezavantaje. Printre avantaje se numară uşurinţa în navigare, reducerea timpilor de încarcare a paginilor HTML.

De partea cealaltă se situează problemele pe care le au motoarele de căutare în indexarea site-urilor ce conţin frame-uri, precum ţi unele probleme de securitate.

Structura documentului HTML care introduce structura de cadre este

85

diferită de structura unui document ce nu conţine cadre (tagul <FRAMESET> înlocuieşte marcajul <BODY>).

Un document care conţine cadre (frame-uri) se defineşte astfel:

<HTML>   <HEAD>     ...   </HEAD>   <FRAMESET>       ...   </FRAMESET></HTML>

Marcajul <FRAMESET> poate să includă alte marcaje <frameset>, putându-se astfel diviza un cadru în două sau mai multe cadre.

8.1 Definirea structurii de cadre (frames)

O structură de cadre se defineşte similar unui tabel. Marcajul principal este frameset (introduce o structură de cadre pentru documentul curent):

Definirea cadrelor se face prin împărţirea ferstrelor (şi a subferestrelor) în linii şi coloane:

împărţirea unei ferstre într-un număr de subferestre de tip coloană se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastră;

împărţirea unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastră;

valoarea atributelor cols şi rows este o listă de elmente separate prin virgulă , care descriu modul în care se face împărţirea.

Elementele listei pot fi: un număr întreg de pixeli; procente din dimensiunea ferestrei (număr între 1 şi 99 terminat cu

%); n* care înseamnă n părţi din spaţiul ramas;

Exemplu 1: cols=200,*,50%,* înseamnă o împărţire în 4 subferestre , dintre care prima are 200 pixeli , a treia ocupă jumătate din spaţiul total disponibil ,iar a doua şi a patra ocupa în mod egal restul de spaţiu rămas disponibil.

Exemplu 2: cols=200,1*,50%,2* înseamnă o împărţire în 4 subferestre , dintre care prima are 200 pixeli , a treia ocupă jumătate din spaţiul total disponibil iar a doua şi a patra ocupă în mod egal restul de spaţiu rămas disponibil, care se împarte în trei părţi egale , a doua fereastra ocupând o parte , iar a patra ocupând 2 părţi.

<FRAMESET [ROWS] [COLS] [FRAMEBORDER]

86

[FRAMESPACING] [BORDER] [STYLE][BORDERCOLOR]>....

</FRAMESET>

Atributele ROWS, COLS definesc structura de cadre. Dimensiunile pot fi exprimate ca o valoare sau ca o succesiune de valori. Valorile pot fi exprimate absolut (pixeli) sau relativ (procente). În cazul în care se utilizează întreg spaţiul disponibil, se foloseşte (*).

Nu este obligatorie prezenţa ambelor atribute.Valorile absolute se utilizează atunci când dimensiunea unui cadru trebuie

păstrată indiferent de dimensiunea ferestrei browserului. Valorile relative se utilizează atunci când trebuie păstrate proporţiile cadrelor indiferent de acţiunea (resize) realizată de utilizator asupra ferestrei browser-ului.

Atributul FRAMEBORDER specifica prezenta sau absenta chenarului: YES = chenarul este activat; NO = chenarul este dezactivat. Internet Explorer 4.0 accepta atat varianta "YES|NO", cat si "1|0". Netscape Navigator recunoaste doar combinatia "YES|NO".

Atributul FRAMESPACING este o versiune mai veche a atributului BORDER. Spre deosebire de atributul BORDER, utilizarea valorii 0, nu va elimina chenarul. Este o extensie Microsoft.

Atributul BORDER. Cadrele afişează în mod standard un chenar 3D. Lăţimea este definită de valoarea acestui atribut.

Atributul STYLE permite alocarea uneia sau mai multor proprietăţi CSS elementului curent. Este o extensie Microsoft.

Atributul BORDERCOLOR stabileşte culoarea tuturor chenarelor cadrelor incluse.

Marcajul "FRAME" defineşte conţinutul şi atributele unui cadru şi are următoarea sintaxă:

<FRAME [SRC] [NAME] [NORESIZE] [SCROLLING] [MARGINWIDTH] [MARGINHEIGHT] [FRAMEBORDER][BORDERCOLOR][TARGET]>

Atributul SRC reprezintă adresa (absolută sau relativă) a documentului HTML care va fi inserat în cadrul respectiv.

Atributul NAME. În cazul în care un formular sau un link trebuie să returneze un document într-un alt cadru decât cel curent, este necesară cunoaşterea numelui (name) cadrului respectiv.

87

De exemplu, urmarea link-ului <a href="x.html" target="_nume">Link</a>, va încarca documentul "x.html" în cadrul "_nume".

Atributul NORESIZE. În cazul în care se specifică atributul "noresize", utilizatorul nu va putea redimensiona cadrele.

Atributul SCROLLING specifică dacă barele de defilare (scroll) orizontale/verticale vor fi afişate. Poate lua următoarele valori:

YES - bare de defilare inserate; NO - fără bare de defilare; AUTO - barele de defilare se insereaza doar dacă este nevoie.

Atributele MARGINWIDTH, MARGINHEIGHT specifică dimensiunile (pixeli) dintre marginile cadrului şi conţinutul acestuia (distanţele textului la marginile frame-ului).

Atributul FRAMEBORDER specifică dacă fereastra are chenar (1) sau nu are chenar (0). Netscape Navigator înlocuieste perechea (0|1) cu (YES|NO). Internet Explorer recunoaşte ambele seturi de valori.

Atributul BORDERCOLOR stabileşte culoarea chenarului pentru un cadru individual

Atributul TARGET acceptă anumite valori predefinite de o valoare deosebită pentru creatorii de pagini Web.Aceste valori sunt:

"_SELF" (încărcarea noii pagini are loc în cadrul curent); "_BLANK" (încărcarea noii pagini are loc într-o fereastră nouă

anonimă); "_PARENT" (încărcarea noii pagini are loc în cadrul părinte al

cadrului curent dacă acesta există, altfel are loc în fereastra browserului curent);

"_TOP" (încărcarea noii pagini are loc în fereastra browserului ce conţine cadrul curent);

Exemplul 1: Se construieşte o pagină cu două cadre orizontale în proportia 20% şi 80% din înălţimea totală. Pagina de sus are chenarul roşu iar cea de jos are scroll.

<html><head><title>Cadre</title></head><frameset rows="20%,80%"><frame src="exemplu_1.html" bordercolor="#ff0000"><frame src="exemplu_2.html" scrolling="yes"></frameset><noframes></noframes>

88

</html>

Exemplu1_1.html:

<html><head><title>Exemplu1_1</title></head><body>Pagina de sus(20% din fereastra)</body></html>

Exemplu1_2.html:

<html><head><title>Exemplu1_2</title></head><body>Pagina de jos(80% din fereastra)</body></html>

Figura 8.1.1 – Construirea a două cadre orizontale

89

Exemplul 2: Se construieşte o pagină cu două cadre verticale în proporţia 40% şi 60% din lăţimea totală, fără posibilitatea de redimensionare a cadrelor.

<html><head><title>Cadre verticale</title></head><frameset cols="40%,60%"><frame src="exemplu2_1.html"><frame src="exemplu2_2.html" noresize></frameset></html>

Exemplu2_1:<html><head><title>Exemplu2_1</title></head><body>Pagina din stanga(40% din fereastra)</body></html>

Exemplu2_2:<html><head><title>Exemplu2_2</title></head><body>Pagina din dreapta(60% din fereastra)</body></html>

Figura 8.1.2 – Construirea a două cadre verticale

90

Cadrele in-line(interne) sunt blocuri care se introduc în pagina prin perechea de etichete <IFRAME> şi </IFRAME>, şi au atributele:

SRC fişierul sau adresa acestuia HEIGHT înălţimea cadrului WIDTH lăţimea cadrului FRAMEBORDER grosimea bordurii (chenarului) SCROLLING adaugă bare de defilare cu valorile YES, NO si AUTO ALIGN aliniază cadrul (LEFT, RIGHT, CENTER, TOP, BOTTOM,

MIDDLE) VSPACE distanţa peste şi sub cadru HSPACE distanţa în stânga şi în dreapta de cadru

Exemplu: Se construieşte o pagină în care este găzduit un cadru in-line. Şi aici se poate introduce un mesaj pentru browserele care nu suportă cadre in-line. Modul de afişare al exemplului poate diferi de la un browser la altul.

<html><head><title>Cadre interne</title></head>Mai jos este un cadru in-line cu urmatori parametrii:<br>width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br><iframe src="Exemplu3_1.htm" width="300" height="100" hspace="50" vspace="50" scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe></body></html>

Exemplu3_1:

<html><head><title>Exemplu3_1</title></head><body>Pagina introdusa printr-un cadru in-line</body></html>

91

Figura 8.1.3 – Cadre interne

8.2 Exemple

1. Frame.htm

<html><head><title>Cadre</title></head><frameset cols="25%, 75%">

<frame src="cadru1.htm" name="cadru1"><frame src="cadru2.htm" name="cadru2" scrolling="yes">

</frameset><noframes></noframes></html>

Cadru1.htm:

<html><head><title>Cadru 1</title></head><body link=blue vlink=green alink=red><b><font color="#330099"> CADRUL 1</font></b><br><br><a href="Pag1.htm" target="cadru2">Pagina 1</a><br><a href="Pag2.htm" target="cadru2">Pagina 2</a><br>

92

<a href="Pag3.htm" target="cadru2">Pagina 3</a><br><a href="frame.htm" target="_top">Revenire</a></body></html>

Cadru2.htm:

<html><head><title>Cadrul 2</title></head><body ><center><font size="+4" color="#330099"> CADRUL 2</font></center></body></html>

Pag1.htm:

<html><head><title>Pagina 1</title></head><body bgcolor="#FFFFCC"><b>PAGINA 1</b></body></html>

Pag2.htm:

<html><head><title>Pagina 2</title></head><body bgcolor="#FFCCFF"><i>PAGINA 2</i></body></html>

Pag3.htm:

<html><head><title>Pagina 3</title></head><body bgcolor="#CCFFFF"text="#000066"><u>PAGINA 3</u></body></html>

93

94

95

2. Se vor folosi fişierele pag1.htm, pag2.htm, pag3.htm din exemplul anterior.

Ferestre.html:

<html><head> <title> FERESTRE </title> </head><frameset cols="30%,*" BORDERCOLOR="RED" BORDER=15> <frame src="left.html" name="left" SCROLLING="NO"><frameset rows="100,*,50%" BORDERCOLOR=BLUE BORDER=10> <frame src="pag.htm" name="main" > <frame src="img1.jpg" SCROLLING="AUTO" ><frameset cols=200,* FRAMEBORDER="NO"> <frame src="pag2.htm" MARGINHEIGHT=40 MARGINWITHD=100> <frame src="pag3.htm"></frameset><noframes></noframes></html>

Left.html:

<html><head> <title> left1 </title></head><body><a href="pag1.htm" target="main"> Fisier1 </a> <br><a href="pag2.htm" target="main"> Fisier2 </a> <br><a href="pag3.htm" target="main"> Fisier3 </a> <br><a href="pag1.htm" target="_blank"> Fisier1 intr-o fereastra noua </a> <br><a href="pag2.htm" target="_self"> Fisier2 in fereastrea curenta </a> <br><a href="ferestre.html" target="_top"> home </a> <br></body></html>

Pag.htm:<html><head><title>PAG</title></head><body><b>Fereastra main</b></body></html>

96

Când se alege link-ul „Fişier 1” se obţine:

La apăsarea link-ului „Fişier 2” obţinem:

97

În momentul alegerii obţiunii „Fisier 3” avem următorul rezultat:

Link-ul „Fişier într-o fereastră nouă” conduce la apariţia unei noi ferestre în care se deschide „Pag1.htm”

98

Link-ul „Fişier în fereastra curentă” realizează lansarea fişierului „Pag2.htm” în fereastra cu numele „main”

99

9. Crearea formularelor folosind HTML

Formularele sunt foarte des întâlnite pe Internet. Datele introduse în formular sunt de regulă trimise către server sau prin poşta electronică spre un cont de e-mail. Formularele pot varia de la o simplă caseta de text, pentru introducerea unui şir de caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor de căutare din Web - până la o structură complexă, cu multiple secţiuni, care oferă facilităţi puternice de transmisie a datelor.

O sesiune cu o pagină web ce conţine un formular cuprinde următoarele etape:

1. Utilizatorul completează formularul şi îl expediază unui server.2. O aplicaţie dedicată de pe server analizează formularul completat şi

(dacă este necesar) stochează datele într-o baza de date.3. Dacă este necesar serverul expediază un răspuns utilizatorului.Un formular este definit într-un bloc delimitat de etichetele corespondente

<FORM> şi </FORM>. Sintaxa unui formular este de forma:

<FORM METHOD="metoda" ACTION="url">

Atributul METHOD al etichetei FORM poate lua una din valorile GET (nu sunt permise cantităţi mari de date (maxim 1 Kb)) sau POST(datele sunt expediate separat, sunt permise cantităţi mari de date (ordinul MB)). Pentru moment, specificaţi întotdeauna valoarea POST.

Atributul ACTION specifică adresa URL a fişierului HTML care prelucrează datele adunate prin intermediul formularului. Adresa URL poate fi o adresă completă (de genul http://www.pagina_mea.ro/prelucrare_formular.html), respectiv o adresa parţială, care specifică o locaţie relativă la locaţia paginii curente (de genul prelucrare_formular.html). Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poşta electronică (e-mail). Pentru aceasta se foloseşte atributul ACTION care primeşte ca valoare " MAILTO: " concatenat cu o adresă validă de e-mail către care se va expedia formularul completat.

9.1 Controalele formularului

Între eticheta <FORM> şi eticheta de închidere </FORM> corespunzătoare, se plasează controalele formularului. Elementele unui formular trebuie introduse, în majoritatea cazurilor, cu ajutorul tagului <INPUT>. Atributele cele mai importante ale acestui tag sunt următoarele:

TYPE - tipul elementului NAME - numele elementului VALUE - valoarea elementului

100

Elementele ale unui formular pot fi: câmpurile de editare; butoanele radio; casetele de validare; casetele de fişiere; listele de selecţie; butoanele submit şi reset.

În continuare vom vedea cum se poate realiza fiecare element al unui formular HTML

a) Câmpurile de editarePentru a introduce în cadrul unui formular un câmp de editare(casete de

text), trebuie sa folosim pentru atributul TYPE, al tagului <INPUT>, valoarea TEXT. Atributele cele mai folosite pentru tagul <INPUT> de tipul câmp de editare sunt:

SIZE, care reprezintă lăţimea câmpului de editare MAXLENGTH, specifică numărul maxim de caractere care pot fi

introduse în câmpul de editare VALUE, valoarea iniţială a câmpului de editare

Exemplu:

<html><head><title>Caseta de text</title></head><body><form action="mailto:xxxxx@xxx.com" method="post"> <INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20" MAXLENGTH="30"></form></body></html>

Figura 9.1.1 – Construirea casetelor de text

101

Dacă se utilizează atributul TYPE configurat la valoarea "PASSWORD", atunci în formular se introduce un element asemănător cu un câmp de editare obişnuit (introdus prin type="text"). Toate atributele unui câmp de editare rămân valabile.

Singura deosebire constă în faptul că acest câmp de editare nu afişează caracterele în clar, ci numai caractere *, care ascund de privirile altui utilizator aflat în apropiere valoarea introdusă într-un asemenea câmp.

Exemplu:

<html><head><title>Parola</title></head><body><form action="mailto:xxxxx@xxx.com" method="post"> Nume:<input type="text" name="nume" value="Numele"><br>Prenume:<input type="text" name="prenume" value="Prenumele"><br>Password:<input type="password" name="parola" ><br></form></body></html>

Figura 9.1.2 – Construirea unui camp de editare de tip "password"

Atunci când vrem să adăugăm în cadrul formularului nostru un câmp de editare în care să poată fi introduse mai multe rânduri, folosim câmpurile de editare de tip multilinie. Pentru a folosi un astfel de câmp de editare, avem nevoie de tagurile <TEXTAREA> şi </TEXTAREA>. Eticheta are următoarele atribute:

COLS, care specifică numărul de caractere afişate într-o linie;

102

ROWS, care specifică numărul de linii afişate simultan;

NAME, care permite ataşarea unui nume câmpului de editare multilinie;

WRAP, (de la "word wrap"=trecerea cuvintelor pe rândul următor care determină comportamentul câmpului de editare faţă de sfârşitul de linie. Acest atribut poate primi următoarele valori:

" off "; în acest caz: - întreruperea cuvintelor la marginea dreaptă a editorului se

produce numai când doreşte utilizatorul; - caracterul de sfârşit de linie este inclus în textul transmis

serverului odată cu formularul; " hard "; în acest caz:

- se produce întreruperea cuvintelor la marginea dreaptă a editorului;

- caracterul de sfârşit de linie este inclus în textul transmis serverului odată cu formularul; " soft "; în acest caz:

- se produce întreruperea cuvintelor la marginea dreaptă a editorului ;

- nu se include caracterul de sfârşit de linie în textul transmis serverului odată cu formularul;

Exemplu:

<html><head><title>Camp multilinie</title></head><body><h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"><textarea name="text multilinie" cols="40" rows="5" wrap="off">Prima linie din textul initial.A doua linie din textul initial. </textarea></form></body></html>

103

Figura 9.1.3 – Construirea unui camp de editare multilinie

b) Butoanele radioDacă avem o întrebare cu mai multe variante de răspuns, vom folosi

butoanele radio. Pentru a introduce un buton radio, folosim tagul <INPUT>, iar la atributul TYPE, valoarea "RADIO". Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Cu ajutorul atributului CHECKED, putem selecta un buton radio în mod prestabilit.

Exemplu:

<html><head><title>Butoane radio</title></head><body>In ce categorie de varsta va incadrati?<form action="mailto:xxxxx@xxx.com" method="post"><INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED >sub 15 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani<BR>

104

<INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani<BR><INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 ani</form></body></html>

Figura 9.1.4 – Butoane radio

c) Casetele de validareCasetele de validare permit selectarea sau deselectarea uneia sau mai

multor opţiuni. Pentru a introduce o caseta de validare (checkbox) se utilizează eticheta <INPUT> cu atributul TYPE având valoarea "CHECKBOX". Atributele casetei de validare sunt:

NAME care stabileşte numele fiecărei casete dintr-un grup.

CHECKED care defineşte valoarea prestabilită "selectat" a fiecărei casete.

Exemplu:

<html><head><title>Casete de validare</title>

105

</head><body><form action="mailto:xxxxx@xxx.com" method="post"> Unde va petreceti concediul de obicei?<BR><INPUT TYPE="checkbox" NAME="optiunea1">La mare<BR><INPUT TYPE="checkbox" NAME="optiunea2">La munte<BR><INPUT TYPE="checkbox" NAME="optiunea3">In strainatate<BR><INPUT TYPE="checkbox" NAME="optiunea4">La tara<BR><INPUT TYPE="checkbox" NAME="optiunea5">Acasa</form></body></html>

Figura 9.1.5 – Casetele de validare

d) Castele de fişierePentru introducerea unde casete de fişiere se inserează un element

<INPUT> într-un formular , cu atributul TYPE având valoarea "FILE" (fişier).Atributele pentru un element de tip casetă de fişiere:

NAME permite ataşarea unui nume

VALUE primeşte ca valoare adresa URL a fişierului care va fi expediat o dată cu formularul. Această valoare poate fi atribuită direct atributului VALUE, sau poate fi tastată într-un câmp de editare ce apare odată cu formularul,

106

sau poate fi selectată prin intermediul unei casete de tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular;

ENCTYPE precizează metoda utilizată la criptarea fişierului de expediat. Valoarea acestui atribut este "multipart/form-data".

Exemplu:

<html><head><title>Caseta de fisiere</title></head><body><h1>Un formular cu caseta de fisiere</h1><hr> <form action="mailto:xxxxx@xxx.com" method="post"> Alegeti fisierul:<input type="file" name="fisier" value="c:\temp\proba.html" enctype="multipart/form-data"><br></body></html>

Figura 9.1.6 – Casete de fişiere

107

e) Listele de selecţieO listă de selecţie permite utilizatorului să aleagă unul sau mai multe

elemente dintr-o listă finită. Lista de selecţie este inclusă în formular cu ajutorul etichetelor corespondente <SELECT> şi </SELECT>.

O listă de selecţie poate avea următoarele atribute:

Atributul NAME, care ataşează listei un nume (utilizat în perechea "name=value" expediată serverului);

Atributul SIZE, care precizează (printr-un număr întreg pozitiv, valoarea prestabilită fiind 1) câte elemente din listă sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin acţionarea barei de derulare ataşate automat listei).

Elementele unei liste de selecţie sunt incluse în listă cu ajutorul etichetei <OPTION>. Două atribute ale etichetei OPTION se dovedesc utile:

Atributul VALUE primeşte ca valoare un text care va fi expediat serverului în perechea "name=value"; dacă acest atribut lipseşte, atunci către server va fi expediat textul ce urmează după <OPTION>;

Atributul SELECTED (fără alte valori) permite selectarea prestabilită a unui element al listei.

Exemplu: Pentru a selecta in mod implicit valoarea Bucureşti, am folosit în dreptul acesteia atributul SELECTED.

<html><head><title>Liste de selectie</title></head><body><h1>Un formular cu lista de selectie</h1><hr> <form action="mailto:xxxxx@xxx.com" method="post"> Alege un judet <SELECT><OPTION value=Arad>Arad</OPTION><OPTION value=Arges>Arges</OPTION><OPTION value=Bacau>Bacau</OPTION><OPTION value=Brasov>Brasov</OPTION><OPTION value=Bucuresti selected>Bucuresti</OPTION><OPTION value=Cluj>Cluj</OPTION> <OPTION value=Constanta>Constanta</OPTION>

108

<OPTION value=Galati>Galati</OPTION><OPTION value=Giurgiu>Giurgiu</OPTION><OPTION value=Harghita>Harghita</OPTION><OPTION value=Hunedoara>Hunedoara</OPTION><OPTION value=Iasi>Iasi</OPTION><OPTION value=Maramures>Maramures</OPTION><OPTION value=Mures>Mures</OPTION><OPTION value=Neamt>Neamt</OPTION><OPTION value=Olt>Olt</OPTION><OPTION value=Prahova>Prahova</OPTION><OPTION value=Satu-Mare>Satu-Mare</OPTION><OPTION value=Sibiu>Sibiu</OPTION><OPTION value=Suceava>Suceava</OPTION><OPTION value=Teleorman>Teleorman</OPTION><OPTION value=Timis>Timis</OPTION><OPTION value=Valcea>Valcea<</OPTION><OPTION value=Vaslui>Vaslui<</OPTION><OPTION value=Vrancea>Vrancea</OPTION></SELECT> </body></html>

Figura 9.1.7 – Liste de selecţie cu valoarea implicită

109

Figura 9.1.8.- Alegerea din lista de selecţie a unui element

O listă de selecţie ce permite selecţii multiple se creează întocmai ca o listă de selecţie obişnuită. În plus, eticheta <SELECT> are un atribut MULTIPLE (fără alte valori). Când formularul este expediat către server, pentru fiecare element selectat al listei se inserează câte o pereche "name=value", unde name este numele listei.

Exemplu:

<html><head><title>Lista cu selectii multiple</title></head>

110

<body><h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1><hr> <form action="mailto:xxxxx@xxx.com" method="post"> Limbi straine cunoscute:<br><br><select name="limbi straine" size="5" multiple> <option value="e"> Engleza<option value="f" selected> Franceza<option value="s"> Spaniola<option value="i"> Italiana<option value="r"> Rusa<option value="g"> Germana</select><br><br></form></body></html>

Figura 9.1.9 – Listă cu selecţie multiplă

111

f) Butoanele de tip Submit si ResetPentru a putea expedia datele introduse în cadrul unui formular, fie prin e-

mail, fie către un script scris într-un limbaj de programare care va interpreta aceste date, trebuie să folosim un buton de trimitere.

Un buton de expediere al unui formular se introduce cu ajutorul etichetei <INPUT>, în care atributul TYPE este configurat la valoarea "SUBMIT". Acest element poate primi un nume prin atributul NAME. Pe buton apare scris "SUBMIT QUERY" sau valoarea atributului VALUE, dacă această valoare a fost stabilită.

Exemplu:

<html><head><title>Buton de expediere</title></head><body><h1> Un formular cu un camp de editare si un buton de expediere</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> Numele:<input type="text" name="numele" value="Numele si prenumele"><br><br> <input type="submit" value="expedieaza"> </form></body> </html>

Figura 9.1.10 – Buton de expediere

112

Alături de butonul de tip SUBMIT, putem folosi şi un buton de tip RESET. Prin apăsarea acestui buton toate elementele formularului vor reveni la valoarea lor prestabilită, indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip RESET, se procedează la fel ca şi la butonul de tip SUBMIT, singura deosebire fiind că atributul TYPE va avea valoarea "RESET".

Exemplu:

<html><head><title>Butonul RESET</title></head><body><h1>Un formular cu un buton reset</h1><hr> <form action="mailto:xxxxx@xxx.com" method="post"> Introduceti numele:<input type="text" name="nume" value="Numele"><br> Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br><input type="reset" value="sterge"> <input type="submit"> </form></body></html>

Figura 9.1.11 – Formular cu butoanele “Submit” şi “Reset”

113

În urma apăsării pe butonul “Şterge” se vor schimba datele din casetele de text “Nume” şi “Prenume” cu valorile iniţiale.

Figura 9.1.12 – Rezultatul obţinut după acţionarea butonului “Sterge”

g) ButoaneÎntr-un formular pot fi afişate butoane.Când utilizatorul apasă un buton, se

lansează în execuţie o funcţie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcţii (acest lucru este posibil dacă se utilizează limbajele Javascript sau Java).

Pentru a insera un buton într-un formular , se utilizează eticheta <INPUT> având atributul TYPE configurat la valoarea "BUTTON".

Atribute ale elementului "BUTTON" sunt: NAME, care permite ataşarea unui nume butonului VALUE, care primeşte ca valoare textul ce va fi afişat pe buton.

Există o a doua modalitate de a introduce într-o pagină Web un buton de apăsat, şi anume prin intermediul blocului <BUTTON>...</BUTTON>.

Un astfel de buton poate fi inserat într-un formular, în acest caz declanşând acţiuni legate de acel formular, sau poate fi introdus oriunde în pagină pentru iniţierea unor acţiuni independente de formulare.

Atributele posibile ale etichetei <BUTTON> sunt: NAME acordă elementului un nume; VALUE precizează textul care va fi afişat pe buton;

114

TYPE precizează acţiunea ce se va executa la apăsarea butonului dacă acesta este inclus într-un formular.Valorile posibile pentru acest atribut sunt:

- "BUTTON" , - "SUBMIT" ,- "RESET".

În corpul blocului <BUTTON>...</BUTTON> se poate afla un text sau un marcaj de inserare a unei imagini. Observaţii finale: - elementul <FORM> poate avea un atribut TARGET, care primeşte ca valoare numele unei ferestre a browserului în care va fi încarcat răspunsul trimis serverului WWW la expedierea unui formular. - toate elementele cuprinse într-un formular pot avea un atribut DISABLED care permite dezactivarea respectivului element. - toate elementele de tip text cuprinse într-un formular pot avea un atribut READONLY care interzice modificarea conţinutului acestor elemente.

9.2 Exemple

1.<html><head><title>Creare formular</title></head><body><form name="form1" method="post" action=""><input type="text" name="textfield">Textfield<br><br><textarea name="textarea"></textarea>Textarea<br><br><input type="password" name="textfield2">Textfield pentru parole <br> <br><input type="checkbox" name="checkbox" value="checkbox">Checkbox<br><br><input name="checkbox2" type="checkbox" value="checkbox" checked>Checkbox cu valoarea checked<br><br><input name="radiobutton" type="radio" value="radiobutton"> Radio buton<br><br><select name="select"> <option selected>optiunea 1</option> <option>optiunea 2</option> <option>alegerea 3</option></select>List / Menu<br><br><p><label><input name="RadioGroup1" type="radio" value="radio" checked>Radio</label>Group1<br><label><input type="radio" name="RadioGroup1" value="radio">Radio</label>Group1 </p></form></body></html>

115

2. <HTML><HEAD><TITLE>Realizarea unui formular</TITLE></HEAD><BODY><H2>Realizarea unui formular</H2><HR>Completeaza formularul urmator pentru a ne trimite parerea ta <br><br><FORM ACTION="mailto:luminitaserb@yahoo.com" METHOD="POST">Nume: <input name="textfield1" type="text" size="15" maxlength="30"><br><br>Prenume: <input name="textfield2" type="text" size="15" maxlength="30"><br><br>Sex: <input name="radiobutton" type="radio" value="radiobutton"> feminin <input name="radiobutton" type="radio" value="radiobutton"> masculin <br><br>

116

Varsta: <select name="varsta">

<option>sub 15 ani</option><option>15 - 20 ani</option><option>20 - 25 ani</option><option>25 - 30 ani</option><option>30 - 40 ani</option><option>peste 40 ani</option>

</select><br><br>Judetul: <SELECT>

<OPTION value=Arad>Arad</OPTION><OPTION value=Arges>Arges</OPTION><OPTION value=Bacau>Bacau</OPTION><OPTION value=Brasov>Brasov</OPTION><OPTION value=Braila>Braila</OPTION><OPTION value=Bucuresti selected>Bucuresti</OPTION><OPTION value=Buzau>Buzau</OPTION><OPTION value=Cluj>Cluj</OPTION><OPTION value=Constanta>Constanta</OPTION><OPTION value=Galati>Galati</OPTION><OPTION value=Giurgiu>Giurgiu</OPTION><OPTION value=Harghita>Harghita</OPTION><OPTION value=Hunedoara>Hunedoara</OPTION><OPTION value=Iasi>Iasi</OPTION><OPTION value=Maramures>Maramures</OPTION><OPTION value=Mures>Mures</OPTION><OPTION value=Neamt>Neamt</OPTION><OPTION value=Olt>Olt</OPTION><OPTION value=Prahova>Prahova</OPTION><OPTION value=Satu-Mare>Satu-Mare</OPTION><OPTION value=Sibiu>Sibiu</OPTION><OPTION value=Suceava>Suceava</OPTION><OPTION value=Timis>Timis</OPTION><OPTION value=Valcea>Valcea</OPTION><OPTION value=Vrancea>Vrancea</OPTION>

</SELECT><br><br>Parerea ta:<br><textarea name="textarea" cols="40" rows="5"></textarea><br><br>Trimite poza ta: <input type="file" name="poza"><br><br><INPUT TYPE="submit" VALUE="Trimite">&nbsp; &nbsp; <INPUT TYPE="reset" VALUE="Sterge"></FORM></BODY></HTML>

117

118

Prin completarea cu date a acestui formular se obţine:

119

3. <html> <head><title>Formular</title></head><body><center><table bgcolor="lightyellow"> <form action = "mailto:xxxxx@xxx.com" method="post"> <caption align= "top"> <B> FORMULAR COMPLEX </B></caption><tr align=left> <th>Numele: <td><input type="text" name="numele"><tr align=left> <th>Preumele: <td><input type="text"name="prenumele"><tr align=left> <th>Telefon <td><input type="text" name="telefonul"> <tr align=left> <th> Alegeti pizza: <td><input type="checkbox" name="ciuperci">cu ciuperci <input type="checkbox" name="mexicana">mexicana <input type="checkbox" name="europeana">europeana<tr align=left> <th>Alegeti plata: <td> <ul style="background-color:lightblue;"> <li><input type="radio" name="plata">cash

<li><input type="radio" name="plata">card </ul> <tr align=left> <th>Comentarii: <td> <textarea name="comentarii" cols="40" rows="5" wrap="off" > Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea><tr align=left valign=top> <td><input type="reset" value="Sterge"> <td> <input type="submit" value="Expedieaza"></form></table></body></html>

120

4. <html><head><title>Formular</title></head><body><form action="script.php" method="post"><table><tr>

<th>Nume:<td><input type="text" name="nume"><br>

<tr><th>Prenume:<td><input type="text" name="prenume"><br>

<tr>

121

<th>Telefon:<td><input type="text" name="telefon"><br>

<tr><th>Fax:<td><input type="text" name="fax"><br>

<tr><th>Email:<td><input type="text" name="email">

</table><br><b>Sexul: </b> Masculin<input type="radio" name="sex" value="m"> Feminin<input type="radio" name="sex" value="f"><br><br><b>Studii:</b> <select>

<option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate

</select><br><br><b>Accesati Internetul de la:</b><br>

<table><tr>

<td>Serviciu <td><input type="checkbox" name="serv">

<tr><td>Acasa<td><input type="checkbox" name="acasa">

<tr><td>Internet cafe<td><input type="checkbox" name="cafe">

</table><br><br><b>Fisier:</b> <input type="file" name="file"><br><br><b>Observatii:<b><br><textarea name="obs" rows="5" cols="30"></textarea><br><br><input type="submit" value="Trimite"> <input type="reset" value="Sterge"></form> </body></html>

122

123

10. Modele de construire a site-urilor web

1. Construirea unui site web personal.

Start.html

<html><head><title>Date personale</title></head><body bgcolor="lightyellow" text="#000000"><div align="center"> <table width="698" cellspacing="3"> <tr> <td align="left" height="20"> <center> <p><font size=4 face="arial,helvetica"><b><font color="#000000"> Date personale </font></b></font></p> </center> </td> </tr> <tr> <td align="center" height="15"> <font size=2 face="arial,helvetica"><b> Date personale | <a href="siteuri.html">Site-uri favorite</a> | <a href="contact.html">Contact</a> </b></font> </td> </tr> <tr> <td align="center" height="376"> <p> Aici se scriu datele personale (<b>evident se sterge acest text!</b>). se poate introduce chiar si o poza. </p> <p>Se observa ca pagina de date personale (in care ne aflam) nu are link </p> <p>deoarece nu are rost sa facem trimiteri dintr-o pagina catre ea insasi! </p> <p>Trimiterile le facem catre celelalte pagini din site.</p> </td> </tr> </table></div></body></html>

124

Siteuri.html

<html><head><title>Site-uri favorite</title></head><body bgcolor="lightyellow" text="#000000"><div align="center"> <table width="698" cellspacing="3"> <tr> <td align="left" height="20"> <center><p> <font size=4 face="arial,helvetica"> <b><font color="#000000"> Site-uri favorite </font></b> </font> </p> </center> </td> </tr> <tr> <td align="center" height="15"> <font size=2 face="arial,helvetica"> <b> <a href="start.html">Date personale</a>

125

| Site-uri favorite | <a href="contact.html">Contact</a> </b> </font> </td> </tr> <tr> <td align="center" height="376"> <p>Aici se scriu adresele catre paginile web sau site-urile preferate (<b>evident se sterge acest text!</b>). </p> <p>Se observa ca curenta (in care ne aflam) nu are link </p> <p>deoarece nu are rost sa facem trimiteri dintr-o pagina catre ea insasi! </p> <p>Trimiterile le facem catre celelalte pagini din site.</p> </td> </tr> </table></div></body></html>

126

Contact.html

<html><head><title>Contact</title></head><body bgcolor="lightyellow" text="#000000"><div align="center"> <table width="698" cellspacing="3"> <tr> <td align="left" height="20"> <center> <p><font size=4 face="arial,helvetica"> <b><font color="#000000">Contact</font></b> </font> </p> </center> </td> </tr> <tr> <td align="center" height="15"> <font size=2 face="arial,helvetica"><b> <a href="start.html">Date personale</a> | <a href="siteuri.html"> Site-uri favorite</a> | Contact </b> </font> </td> </tr> <tr> <td align="center" height="376"> <p>Aici se scriu datele de contact, cum ar fi: adresa de e-mail... </p> <p>Se observa ca pagina de date personale (in care ne aflam) nu are link </p> <p>deoarece nu are rost sa facem trimiteri dintr-o pagina catre ea insasi! </p> <p>Trimiterile le facem catre celelalte pagini din site.</p> </td> </tr> </table></div></body></html>

127

2. Model site pentru firme.

Profil.html

<html><head><title>*** PROFIL ***</title><body text="#0033FF" ><p align="center"><b>PROFIL COMPANIE</b> <p align="center">Profil | <a href="servicii.html">Sevicii</a> | <a href="produse.html">Produse</a> <p>Firma .............................. a luat nastere in anul............. <p>Pana in prezent, firma noastra a reusit sa-si atinga toate scopurile propuse la infiintare:............... <p>Structura actionariatului firmei .................... este urmatoarea: <p>&nbsp; <div align="center"> <table width="78%" border="1"> <tr> <td width="51%"> <div align="center">Manager General: .......................</div></td> <td width="49%"> <div align="center"> <img src="" width="136" height="117"></div> </td> </tr>

128

<tr> <td width="51%"> <div align="center"> <img src="" width="137" height="117"></div> </td> <td width="49%"> <div align="center"> Director vanzari......................................................................</div> </td> </tr> <tr> <td width="51%"> <p align="center">Sef productie:...........................................</p> <p align="center">...................................</p> </td> <td width="49%"> <div align="center"><img src="" width="136" height="117"></div> </td> </tr></table></div><p>&nbsp;</body></html>

129

Servicii.html

html><head><title>*** SERVICII ***</title><body text="#0033FF" ><p align="center"><b>SERVICII</b><p align="center"><a href="profil.html">Profil</a> | Servicii | <a href="produse.html">Produse</a> <p>Firma ...............ofera numeroase servicii in domeniul ...........................cum ar fi:<p>* .............................................<p>* ...........................................<p>* .........................................</body></html>

130

Produse.html

<html><head><title>*** PRODUSE ***</title><body text="#0033FF" ><p align="center"><b>PRODUSE</b> <p align="center"><a href="profil.html">Profil</a> | <a href="servicii.html">Servicii</a> | Produse <p>Firma ............. realizeaza produse in domaniul.................... <p>Produsele oferitye clientilor nostri sunt de o calitate exceptionala si la preturi extrem de avantajoase................... <p>Produsele nostre sunt:<ul> <li> ............... <li> ................ <li> .............. <li>................ </ul></body></html>

131

3. Site de prezentare pentru o firmă.

Index.html

<html><head><title> *** PAGINA DE START ***</title><body background="bg.jpg "text="#0033FF" ><p align="center"><b><font size="+2">Pagina de start</font></b><hr><p align="right"><a href="profil.html">Profil</a> | <a href="servicii.html">Servicii</a> | <a href="contact.html">Contact</a> <p>Bine ati venit pe site-ul firmei noastre........................................ <p>Firma ............. realizeaza produse in domaniul....................<p>De asemenea, firma presteaza servicii cu caracter ....................<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp; <p align="right">&nbsp;</body></html>

132

Profil.html

<html><head><title> *** Profil companie ***</title><body background="bg.jpg "text="#0033FF" ><p align="center"><b><font size="+2">Profil companie</font></b> <hr><p align="right">Profil | <a href="servicii.html">Servicii</a> | <a href="contact.html">Contact</a> <p>Firma .............................. a luat nastere in anul............. <p>Este o firma de prestari servicii in domeniul......................<p>Pana in prezent, firma noastra a reusit sa-si atinga toate scopurile propuse la infiintare:............... <p>Structura actionariatului firmei .................... este urmatoarea: .............. </body></html>

133

Servicii.html

<html><head><title> *** Servicii ***</title><body background="bg.jpg "text="#0033FF" ><p align="center"><b><font size="+2">Servicii</font></b><hr><p align="right"><a href="profil.html">Profil</a> | Servicii | <a href="contact.html">Contact</a> <p>Bine ati venit pe site-ul firmei noastre........................................ <p>Firma ............. presteaza servicii in domeniul.................... <p>........................................................................<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp; <p align="right">&nbsp;</body></html>

134

Contact.html

<html><head><title> *** PAGINA DE START ***</title></head><body background="bg.jpg "text="#0033FF" ><p align="center"><b><font size="+2">Contact</font></b> <hr><p align="right"><a href="profil.html">Profil</a> | <a href="servicii.html">Servicii</a> | Contact <p align="center">Contactati-ne la sediul firmei din: <p align="center"><div align="center"><address>............... <br> Pitesti, Arges <br> Romania </address></div><p align="center">E-mail: <a href="mailto:company@company.com">mailto:company@company.com</a> </body></html>

135

Bibliografie

1. Dan Neagu "Hypermedia", editura Matrix Rom, Bucuresti, Romania, 2001

2. Elizabeth Castro, HTML PENTRU WORLD WIDE WEB, editura Corint, 2003

3. http://thor.info.uaic.ro/~val/htmlearn.html4. http://www.emgos.autosite.ro/html.html5. http://www.teora.ro/descrieri/HTML-XHTML-CSS-si-XML-prin-

exemple.htm6. http://www.worklance.com/htmltutorial7. Margareta Dina Draghici, Situri Web In HTML 4, editura Tehnică, 20038. Marinescu Valentina, Pribeanu Costin, Situri web destinate comunităţilor

virtuale: principii, de proiectare şi criterii de evaluare în Revista Informatică Economică, nr. 3 (19)/2001

9. Rick Darnel, Totul despre HTML 4, editura Teora, 200010.Sabin Buruga “Situri Web la cheie. Soluţii profesionale de

implementare”, edituta Polirom, Bucureşti, 200211.Stamate Eugenia Lucia, CREAREA SI PUBLICAREA UNUI SITE

WEB. LIMBAJUL HTML SI ELEMENTE DE WEB DESIGN, editura Paralela 45, 2005

12.Teodoru Gugoiu, HTML, XHTML, CSS si XML prin exemple - ghid practic, editura Teora, 2005

13.Tim Evans, HTML...in lectii de 10 minute, editura Teora, 199614. Vlad Căprariu - Introducere în HTML, Ed. Microinformatica, Cluj, 199715.Web Design Group, "HTML 4.0 Reference", disponibil la

www.htmlhelp.com

136