Capitolul 2 Limbaje de programare şi tehnologii web

2.1. Introducere
Tehnologiile web reprezintă de fapt tehnologiile folosite pentru crearea site-urilor web complexe, al căror concept presupune cunoşterea unor limbaje de programare şi baze de date. În această categorie se pot include limbaje de programare cum ar fi PHP, JavaScript, ASP, iar ca baze de date pot fi utilizate Acces, MySQL, MsSQL, etc. Dintre tehnologiile folosite mai des în programarea aplicaţiilor dinamice fac parte: − − − − − − HTML – limbaj universal, apărut la începutul anilor ’90, a contribuit la dezvoltarea spectaculoasă a Internetului; XHTML (Extensible Hyper Text MarkUp Language) - un înlocuitor modern al limbajului HTML; CSS (Cascading Style Sheet) – utilizat pentru a defini stiluri pentru paginile HTML; CGI (Common Gateway Interface) – scripturi scrise în orice limbaj de programare, care sunt executate de server; ISAPI (Internet Server API)- alternativa Microsoft la CGI rulabilă pe platforme Windows; JavaScript – limbaj de scripting dezvoltat iniţial de NetScape, care permite scrierea de secvenţe de program ce se execută la apariţia unui eveniment utilizator; Flash – mediu de lucru dezvoltat de Macromedia, cu ajutorul căruia pot fi realizate pagini web cu conţinut interactiv, animaţii profesionale, design de calitate; MySQL - sistem de gestiune a bazelor de date relaţionale, fiind o componentă importantă a limbajului PHP; PHP şi ASP – limbaje apărute în 1994, respectiv 1996, care oferă suport şi pentru lucrul cu baze de date (MySQL, Oracle, etc.) generând script-uri care pot fi combinate cu HTML, date de tip text, etc.; principalul dezavantaj îl constituie viteza;

− −

1

JSP (Java Server Pages) –tehnologie de design a aplicaţiilor web care se bazează pe limbajul de programare Java şi marcatori XML, permiţând crearea de aplicaţii independente de platformă; ASP.NET - o nouă tehnologie pentru aplicaţii web elaborată de Microsoft, care păstrează compatibilitatea cu ASP.

2.2. HTML
2.2.1. Introducere HTML (Hyper Text Markup Language) nu este un limbaj de programare propriu-zis, ci unul de descriere, care conţine elemente ce permit crearea paginilor web. Limbajul HTML, creat în 1990 de către Tim Berners –Lee şi Daniel Connoly provine din limbajul standard internaţional SGML (Standard Generalized Markup Language), aprobat în 1986. De aceea, HTML prezintă următoarele caracteristici specifice limbajelor descriptive: - documentele HTML sunt exclusiv de tip text (cod ASCII – American Standard Code for Information Interchange), ele putând fi editate direct, prin programe specifice sistemului de operare instalat (Wordpad, Notepad, sau orice alt editor de texte); - documentele descrise în HTML sunt independente de platforma de lucru, putând fi vizualizate cu ajutorul browser-elor care lucrează pe diferite sisteme de calcul; - HTML utilizează pentru pentru descrierea documentelor web etichete marcaje (tag-uri), care stabilesc atât structura cât şi aspectul acestuia. Deşi HTML este un format text uşor de citit şi editat de utilizatori, scrierea şi modificarea paginilor în acest mod necesită cunoştinţe solide de HTML. Diferite editoare grafice (Macromedia Dreamweaver, Microsoft FrontPage, etc.) permit tratarea paginilor web asemănător documentelor Word, în schimb, codul HTML generat este adesea de slabă calitate. HTML poate fi generat direct utilizând tehnologii de codare din partea serverului, cum ar fi PHP, JSP sau ASP. De asemenea, aplicaţii ca sistemele de gestionare a conţinutului, wiki-uri şi forumuri web generează pagini HTML. Structura unui document HTML are trei nivele de bază: 1. Primul se referă la structurarea documentului în secţiuni mari, în funcţie de scop, de exemplu: antet, corp, script (scriptul reprezintă o metodă de a interacţiona cu utilizatorul prin folosirea unui limbaj de programare simplificat);

2

2. Al doilea nivel se referă la divizarea în cadrul secţiunilor mari şi se aplică antetului şi corpului documentului, fiecare dintre acestea având propriul conţinut (de exemplu titluri, metadate, diviziuni, paragrafe, formulare); 3. Al treilea nivel se regăseşte în corpul documentului, referindu-se la infrastructura elementelor cum ar fi liste şi liste de obiecte, formulare şi elemente de formular şi tabele de date. Un document HTML este delimitat de perechea de etichete <html> şi </html>. O etichetă (marcaj, tag) este un identificator care furnizează browser-ului instrucţiuni de formatare a documentului. Termenul tehnic pentru textul marcat este element, acesta fiind componenta structurală a unui document. Fiecare element trebuie specificat explicit, prin inserarea unui marcaj la începutul elementului (tag de început) şi a unuia la sfârşitul lui (tag de sfârşit), ambele purtând numele asignat elementului. Un element poate fi vid, când nu conţine decât tag-urile de început şi de sfârşit, sau poate conţine text şi/sau alte elemente. Mai multe elemente de acelaşi tip pot fi imbricate. Unele elemente HTML admit atribute care specifică informaţii suplimentare despre conţinutul elementului. Atributele unui element se precizează în cadrul tag-ului de început şi se aplică doar elementului curent. Atributele sunt separate prin spaţiu, iar specificarea lor presupune precizarea numelui atributului şi a valorii acestuia, sub forma:

atribut =

valoare

Unele atribute admit orice valoare numerică sau şiruri de caractere, în concordanţă cu semnificaţia atributului, altele admit doar valori predefinite (de exemplu atributul align admite doar valori predefinite: top, middle, bottom). Un document HTML este constituit din: • Antetul documentului, delimitat de etichetele <head> respectiv </head>, care conţine informaţii generale cum ar fi: titlul documentului, autorul, etc. • Corpul documentului, care conţine textul propriu-zis al documentului precum şi elemente specifice de descriere a formatului acestuia. Astfel, un document HTML marcat de tag-uri are următoarea formă generală:
<html> începutul documentului html început antet antetul documentului sfârşit antet

<head> ....... </head>

3

De exemplu.. În cadrul acestei etichete se specifică o proprietate a documentului căreia i se asociază o valoare. data la care a fost efectuată ultima modificare... cum ar fi titlul... formatul fişierului. prin intermediul etichetei <meta>. din care pot extrage informaţii de bază despre pagină. </body> </html> început corp document corpul documentului sfârşit corp document sfârşitul documentului html Titlul documentului. Proprietăţile care se pot defini pentru un document nu sunt standard.... Corp document </body> </html> În antet pot fi specificate şi alte informaţii suplimentare (autorul documentului. setul de caractere utilizat implicit). pentru specificarea autorului unui document sintaxa folosită este de forma: <meta name=”author” content = ”student architect”> Se observă că eticheta meta admite atributele: name – care conţine un şir de caractere ce reprezintă numele proprietăţii content – care conţine valoarea asociată proprietăţii respective Cuvintele cheie şi descrierea pot fi specificate astfel: <meta name=”keywords” content=”html document”> <meta name=”description” content=”proiectare pagini web”> 4 . Acestea pot descărca numai antetul documentului.... între tag-urile <title> şi </title> va fi afişat în bara de titlu a ferestrei browserului... data creării...<body> . Exemplul următor ilustrează modul în care se specifică titlul documentului: <html> <head> <title> Titlul paginii web </title> </head> <body> .... dar specificarea autorului şi a cuvintelor cheie poate fi utilă motoarelor de căutare.. fără a consuma timp suplimentar cu încărcarea şi citirea întregului document. dar el va fi trunchiat la lungimea barei de titlu a browser-ului... Titlul poate fi oricât de lung. care se recomandă a fi precizat în antet.

gray. asociate unor culori (red. Pentru a specifica html-ului că urmează o valoarea hexazecimală şi nu un nume. utilizând denumiri predefinite. blue. maroon. valoarea completă devenind #rrggbb. Dacă imaginea specificată nu ocupă întreaga zonă din fereastra broser-ului destinată vizualizării paginii respective. yellow. silver. navy. care e folosită de motoarele de căutare pentru a clasifica documentul în vederea unei regăsiri mai rapide. green. câte una pentru fiecare culoare de bază.Keywords sunt specificate sub forma unei liste de cuvinte separate prin spaţii. purple. Ea admite următoarele atribute: background=”url” URL (Uniform Resource Locator) este formatul standard în care se specifică locaţia documentelor sau surselor de informaţie într-o reţea. corpul acestuia. Alt atribut des utilizat este copyright. Atributul bgcolor (BackGroundColor) stabileşte culoarea fundalului. white. el reprezentând avertismentul oficial al copyright-ului pentru pagina creată. când afişează rezultatele căutării unui utilizator. a zonei din fereastra browser-ului în care e vizualizat documentul. indicând în ordinea roşu. albastru. ea va fi multiplicată sub forma unui mozaic. trei valori hexazecimale cuprinse între 00 şi FF. De exemplu. olive. Eticheta body Scopul principal al etichetei <body> este de a determina partea principală a documentului. este adăugat caracterul # la început. 2. El include tipul protocolului şi numele resursei solicitate. se pot specifica culori în cele două moduri astfel: roşu – bgcolor=”red” sau bgcolor=”#FF0000” alb– bgcolor=”white” sau bgcolor=”#FFFFFF” negru – bgcolor=”black” sau bgcolor=”#000000” 5 . Aceste valori precizează contribuţia fiecărei culori de bază la culoarea creată. verde. Description oferă o explicaţie relativ la pagină şi la utilizarea sa şi este folosit de motoarele de căutare pentru a furniza un sumar al paginii. etc). Ca valoare a atributului background. url indică imaginea care va fi utilizată de către browser ca fundal pentru document. În limbajul html culorile pot fi specificate folosind sintaxa bgcolor = ”culoare” în două moduri: 1. recunoscute de html. black.

ele fiind utile celor care citesc sau editează documentul. El poate avea valorile ltr (left to right) sau rtl (right to left). elementele de formatare la nivel de bloc sunt afişate pe o linie nouă. în timp ce elementele de formatare la nivel de caracter conţin doar text sau alte elemente de formatare la nivel de caracter. Mai multe elemente dintr-un bloc pot fi grupate la nivel de caracter prin etichetele <span> şi </span>.Atributul text stabileşte culoarea textului text=”culoare” Atributul link determină culoarea cu care vor fi marcate în text link-urile nevizitate link=”culoare” Atributul vlink determină culoarea cu care vor fi marcate în text link-urile vizitate vlink=”culoare” Atributul alink determină culoarea cu care va fi marcat în text link-ul activ alink=”culoare” Atributul lang specifică limba în care a fost redactat documentul. 6 . De obicei. Elementele de formatare la nivel de bloc pot conţine la rândul lor alte elemente de formatare (la nivel de bloc sau caracter). Comentariile html încep cu caracterele <!-. programelor de verificare gramaticală şi lexicală şi nu influenţează modul de vizualizare a documentului. Gruparea mai multor elemente html într-un bloc se realizează cu marcatorii <div> şi </div>. Formatarea textului Formatarea textului inclus în corpul unui document html se poate face la nivel de bloc sau la nivel de caracter. Valoarea asociată atributului lang e un cod de limbă. Gruparea e utilă deoarece permite aplicarea aceluiaşi stil de formatare a textului elementelor din grupurile de nivel bloc sau caracter.se termină cu --> şi pot fi inserate oriunde în document. de exemplu: lang=”en” Atributul dir specifică direcţia de scriere a textului. Comentariile html nu vor fi afişate. Specificarea explicită a limbii poate fi utilă motoarelor de căutare.

sau .un procent din lăţimea. ”tab”. respectiv înălţimea ferestrei browser-ului. <html> <head> <title> Exemplu stabilire margini document </title> </head> <body leftmargin="150" topmargin="50%"> text incadrat in pag </body> </html> Blocuri de text preformatate Pentru ca browser-ul să interpreteze corect caracterele ”spaţiu”. <html> <head> <title> Exemplu blocuri preformatate </title> </head> <body> <pre> Marginea stanga a documentului O pozitie indentare Doua pozitii indentare </pre> </body> </html> Formatarea paragrafelor Prin paragraph desemnăm o zonă de text cuprinsă între două caractere de trecere la linie nouă (Enter – CR/LF).numere întregi pozitive. rightmargin – stabileşte distanţa dintre marginea din dreapta a ferestrei browser-ului şi marginea din dreapta a conţinutului paginii. În limbajul HTML delimitarea paragrafelor se realizează cu ajutorul etichetei <p> (eticheta </p> fiind opţională). sau cu ajutorul etichetei <br> (break).Stabilirea marginilor paginii web Amplasarea marginilor paginii web faţă de marginile ferestrei browserului se face prin intermediul atributelor etichetei <body> : 1. acest text trebuie inclus într-un bloc marcat de etichetele <pre> şi </pre>. <html> <head> <title> Exemplu paragrafe </title> 7 . 2. Ambele atribute admit ca valori: . ”CR/LF” (Carriage Return/Line Feed) ce apar în cadrul unui text. ce reprezintă distanţa în pixeli. leftmargin – stabileşte distanţa dintre marginea din stânga a ferestrei browser-ului şi marginea din stânga a conţinutului paginii.

valoarea implicită a modului de aliniere e left.dacă textul este scris de la dreapta la stânga. care admite valorile predefinite: . înainte şi după această etichetă browser-ul adaugă o linie suplimentară. 8 . la o anumită distanţă faţă de marginea paginii.left – când textul e aliniat la marginea din stânga . • inserarea unui spaţiu suplimentar după blocul paragraf atunci când se foloseşte eticheta opţională </p>. se realizează în limbajul HTML cu ajutorul etichetelor <blockquote> şi </blockquote>. Valoarea implicită a modului de aliniere a textului depinde de direcţia acestuia.dacă textul este scris de la stânga la dreapta. De obicei.</head> <body> Paragraf 1 <br> Paragraf 2 <br> Paragraf 3 </body> </html> Utilizarea etichetei <p> permite în plus faţă de <br> următoarele: • inserarea unui spaţiu suplimentar înainte de blocul paragraf.center – când textul e centrat. astfel: . . valoarea implicită a modului de aliniere e right. <html> <head> <title> Exemplu utilizare paragrafe </title> </head> <body> Paragraful 1 <br> Paragraful 2 <p>Paragraful 3 aliniat implicit <p align="center"> Paragraful 4 centrat </p> <p align="right"> Paragraful 5 aliniat la dreapta </p> </body> </html> Indentarea unui bloc Indentarea. Pentru a insera o linie vidă într-un document html se recomandă utilizarea etichetei <br>. deplasarea marginiii din stânga a textului spre dreapta. • alinierea textului cu ajutorul atributului align.right – când textul e aliniat la marginea din dreapta .

Acestea pot fi introduse cu ajutorul etichetelor <h1>. <h3>. </h3>. fiecare browser respectă regula de bază de a atribui stilul cu caracterele cele mai mari şi mai îngroşate pentru <h1> şi caracterele cele mai mici pentru </h6>. Deşi programele de navigare în Internet folosesc diferite mărimi şi stiluri de caractere pentru cele 6 nivele de titluri. <html> <head> <title> Exemplu blocuri titlu </title> </head> <body> <h1 align="center"> Titlu centrat. </h6>. marimea 2 </h2> <h3> Titlu marimea 3 </h3> <h4> Titlu marimea 4 </h4> <h5> Titlu marimea 5 </h5> <h6> Titlu marimea 6 </h6> </body> </html> Culoarea fondului unei pagini web <html> <head> <title> Exemplu culoare de fond </title> </head> <body bgcolor="#000000"> Pagina web cu fond negru </body> </html> 9 . Toate browserele introduc un spaţiu suplimentar înainte de a afişa un titlu. <h6>. </h5>. <h2>. </h4>. Etichetele pentru paragrafele titlu admit atributele: align. dir. marimea 1 </h1> <h2 align="left"> Titlu aliniat la stanga. <h4>. </h2>.<html> <head> <title> Exemplu indentare </title> </head> <body> Text aliniat la stanga <blockquote> Text indentat </blockquote> </body> </html> Blocuri de titlu – Utilizarea paragrafelor de tip titlu Limbajul HTML permite utilizarea a şase stiluri de titluri (de capitole) de diferite dimensiuni. <h5>. lang. însoţite de către o etichetă de incheiere similară </h1>.

număr poate lua valori între 1 şi 7. folosind sintaxa: <basefont size=”număr” color=”culoare” style=”font”> în care . . Arial. font se stabilesc cu atributele etichetei basefont. folosind sintaxa: <body text="culoare" > unde culoarea textului se specifică în acelaşi mod ca şi culoarea de fond. <html> <head> <title> Exemplu atribute multiple </title> </head> <body bgcolor="black" text="red"> Pagina web cu fondul negru si textul rosu </body> </html> Caracteristicile de bază ale textului. 1 pentru fontul cel mai mic şi 7 pentru fontul cel mai mare. <html> <head> <title> Exemplu caracteristici de baza text </title> </head> <body> <basefont size="5" color="red"> 10 . etc). <html> <head> <title> Exemplu culoare text </title> </head> <body text="violet"> Text culoare mov </body> </html> Atribute multiple O etichetă poate avea mai multe atribute. culoarea negru şi fontul Times New Roman.culoarea este specificată prin nume sau specificaţie RGB.Culoarea textului unei pagini web e definită de atributul text al etichetei body. de exemplu mărime. culoare.fontul poate fi unul generic (serif. monospace). Valorile implicite ale atributelor sunt: mărimea 3. sau un font specific instalat pe calculatorul client (Times New Roman. .

strike </title> </head> <body> Text cu caractere normale<br> <b> Caractere aldine (bold)</b><br> <i> Caractere inclinate (italic)</i><br> <u> Caractere subliniate (underline)</u><br> <strike> Caractere strike </strike><br> </body> </html> Etichetele corespondente <big> </big> şi <small> </small> măresc. putând fi specificată în două moduri: . sau . cursive (încadrate între etichetele <i> şi </i>). <html> <head> <title> Exemplu marime font </title> </head> <body> Text cu caractere normale<br> <basefont size="4"> Text marime 4<br> <font size="-2">Text marime 2<br> <font size="+3">Text marime 7<br> </body> </html> Textul poate fi scris cu caractere aldine (încadrate între etichetele <b> şi </b>). Mărimea fontului este stabilită de atributul size. italic.Text marime 5 culoare rosu <basefont color="black" size="6"> Text marime 6 culoare negru </body> </html> Configurarea fonturilor Un font este caracterizat de culoare (atributul color).absolut. subliniate (încadrate între etichetele <u> şi </u>). underline. mărime (atributul size).relativ la dimensiunea curentă a caracterelor: +n măreşte fontul cu n mărimi. sau secţionate cu o linie (încadrate între etichetele <strike> şi </strike>). folosind un număr cuprins între 1 şi 7. faţă de mărimea curentă. tip sau stil (atributul face). iar -n micşorează fontul cu n mărimi. <html> 11 . <html> <head> <title> Exemplu caractere bold. respectiv micşorează cu o unitate caracterele specificate.

prin utilizarea etichetei <hr>. marite </b></u></i></big> </body> </html> Centrarea unui bloc de text poate fi realizată cu etichetele <center> şi </center>. subliniate. prin procedeul denumit imbricarea etichetelor.. inclinate. <html> <head> <title> Exemplu imbricare etichete </title> </head> <body> Text cu caractere normale <br> <b> bold <br> <i> bold si italic <br> <u><big> Caractere ingrosate. reprezintă lungimea liniei în pixeli. . care admite următoarele atribute: . 12 .width. center şi right. sau în procente din lăţimea paginii. <html> <head> <title> Exemplu indici si exponenti </title> </head> <body> Text cu caractere normale <sub> Caractere indici </sub> <sup> Caractere exponent </sup><br> Exemplu formula f<sub>x</sub>=(x<sub>1</sub>+x<sub>2</sub>)<sup>2</sup> </body> </html> Mai multe stiluri pot fi folosite în acelaşi timp. Afişarea pe o singură linie a unui text este posibilă dacă acesta e inclus între <nobr> şi </nobr>. Liniile orizontale pot fi folosite în pagini web.<head> <title> Exemplu caractere marite si micsorate </title> </head> <body> Text cu caractere normale<br> <big> Caractere marite cu o unitate </big><br> <small> Caractere micsorate cu o unitate </small><br> </body> </html> Indicii sunt marcaţi în html cu delimitatorii <sub> şi </sub> iar exponenţii cu <sup> şi </sup>.align. aliniază linia în modul indicat: left.

latime 100%.domeniu Internet). Xbp (X BitMap). Folosită pentru o singură imagine inline. 2.). cu umbra <hr align="right" width="400" size="20" noshade> <hr align="center" color="red" width="50%" size="10"> </body> </html> Inserarea imaginilor în documente html Soluţia generală pentru inserarea imaginilor. care poate fi de la o mică pictogramă până la o hartă de imagine ce ocupă fereastra browser-ului. Dintre formatele de fişiere grafice care pot fi utilizate fac parte: gif (Graphic Interchange Format). atunci adresa URL a imaginii e formată doar din numele şi extensia fişierului. dib (Device Independent Bitmap). color. etc. specificatorul fişierului (numele fişierului şi structura de directoare corespunzătoare). bmp (Bit Map). pcx (PC Paintbrush). png (Portable Network Graphics). URL (Uniform Resource Locator) reprezintă un standard de identificare şi accesare a resurselor din Internet. Dacă imaginea se află în acelaşi director cu fişierul html care face referire la aceasta. tiff (Tagged Image File Format). adresa calculatorului care stochează resursa (nume_calculator. 3. grosime 2. aliniata stanga. noshade. etc. O adresa URL este compusă din trei părţi: 1.- size. <html> <head> <title> Exemplu linii orizontale </title> </head> <body> <center>Linii orizontale</center> <hr> linie implicita. Atributul src (source) stabileşte adresa URL a fişierului care conţine imaginea. ftp. defineşte o linie fără umbră. Specificarea imaginilor şi formatarea acestora se face prin intermediul atributelor. protocolul utilizat pentru accesarea resursei (http. xmp (X PixMap). reprezintă grosimea liniei prin valori numere întregi pozitive (valoarea implicită este 2). jpg (Joint Photographic Experts Group). 13 . <img> nu necesită etichetă de sfârşit. defineşte culoarea liniei. dar şi a informaţiilor multimedia în documente html o constituie eticheta <img>.

ce conţin imagini cu rezoluţie înaltă. deoarece browser-ul rezervă spaţiul în pagină şi continuă afişarea celorlalte elemente ale acesteia. 2. nu prin decupare. la mărirea unei imagini calitatea poate fi deficitară. care reprezintă numărul de pixeli. .right – imaginea e aliniată la marginea din dreapta a paginii. lowsrc admite ca valoare adresa URL a unei imagini cu rezoluţie mică. care poate avea următoarele valori: . pe perioada încărcării acesteia.numere de la 1 la 100 urmate de %. şi a conexiunilor client server ce nu oferă viteze adecvate. 14 .wikimedia. în timp ce la micşorarea unei imagini va creşte timpul de descărcare. care poate fi descărcată şi afişată. timpul de încărcare a paginii web creşte semnificativ. respectiv înălţimea spaţiului disponibil pe orizontală şi verticală din pagina web. datorită mărimii ineficiente a fişierului. care pot avea ca valori: . atunci cănd mouse-ul e poziţionat pe suprafaţa alocată imaginii. în paralel cu încărcarea imaginii.numere întregi pozitive. .top – marginea de sus a imaginii e aliniată în raport cu linia superioată a rândului curent.JPG" alt="cap de coloana" height="600" width="50%"> </body> </html> Alinierea unei imagini este stabilită de atributul align.org/wikipedia/ro/6/61/Vestigii_Cap_de_coloa na. Specificarea dimensiunilor spaţiului destinat unei imagini într-o pagină web conduce la creşterea vitezei de încărcare a paginii. chiar în condiţiile unor conexiuni de viteză insuficientă. Redimensionarea imaginii se realizează prin scalare. <html> <head> <title> Exemplu inserare imagini </title> </head> <body> <img src="http://upload. Dimensiunile unei imagini pot fi modificate prin intermediul atributelor width şi height ale etichetei <img>. care reprezintă procente din lăţimea.În cazul fişierelor de dimensiuni mari.left – imaginea e aliniată la marginea din stânga a paginii. alt admite ca valoare textul care va fi afişat în locul imaginii. Astfel. În aceste situaţii se pot utiliza două atribute care înlocuiesc imaginea pe perioada încărcării: 1. sau .

care fac posibilă conexiunea cu alte resurse (pagini web. imagini. pentru care timpul de încărcare creşte considerabil. vlink şi alink.- bottom– marginea de jos a imaginii e aliniată în raport cu linia de bază a textului. care determină spaţiul liber inserat. secvenţe video sau audio. Textul cuprins între eticheta de început <a> şi cea de sfârşit </a> va fi evidenţiat în fereastra browser-ului în funcţie de valorile atributelor link.o pagină aflată pe acelaşi calculator. este formată din textul cuprins între cele două etichete.wikimedia. soluţie utilă în cazul paginilor mari. Dacă legătura se face către: . Atributul border permite încadrarea imaginii într-un chenar cu grosimea specificată în număr de pixeli. inclusiv calea de directoare. ancoră). Inserarea link-urilor în documente html Link-urile sunt definite ca zone active într-o pagină web. atunci atributul href are ca valoare specificatorul complet al fişierului html. Link-urile sunt folosite adesea pentru a împărţi un site web în mai multe pagini html. cu legături între ele. programe. . cea care activează link-ul la selecţie. atunci atributul href are ca valoare numele fişierului html care va înlocui pagina curentă.JPG" alt="cap de coloana" align="right" height="500" width="30%"> </body> </html> Alinierea textului în jurul unei imagini Distanţa dintre o imagine şi elementele din pagină este stabilită de atributele hspace şi vspace.o pagină aflată în acelaşi director. Legăturile se inserează prin intermediul etichetei <a> (anchor. Valorile acestora reprezintă numărul de pixeli pe orizontală respectiv pe verticală. Legături către alte pagini web Pentru a preciza pagina indicată de link se utilizează atributul href al etichetei <a>. etc). <html> <head> <title> Exemplu inserare imagini </title> </head> <body> <img src="http://upload.org/wikipedia/ro/6/61/Vestigii_Cap_de_coloa na. 15 . Zona activă.

care are ca valoare numele atribuit ancorei.html#nume_ancora”. eticheta <a> . <html> <head> <title> Exemplu inserare ancore </title> </head> 16 . cu atributul href are sintaxa: <a href=”#ancora1”> Pentru a insera o legătură către o ancoră definită în alt document aflat în acelaşi folder.jpg"> </a><br> </body> </html> Se observă că ambele fişiere specificate în exemplul anterior se găsesc în directorul curent. Ancore În cazul paginilor web mari pot exista puncte de reper.html">Link catre o pagina web/fisier html din acelasi folder </a><br> <a href="http://www. Pentru a insera o legătură către ”ancora1”. <html> <head> <title> Exemplu inserare link </title> </head> <body> <a href="ex18. atributul href are valoarea de forma „numefisier.com"> Link catre site-ul Microsoft </a> </body> </html> Utilizarea unei imagini ca zonă activă Rolul de zonă activă poate fi preluat de o imagine specificată între etichetele <a> şi </a>. <html> <head> <title> Exemplu zona activa imagine </title> </head> <body> <a href="ex23.html"> <img src="alfa1. Revenirea la pagina anterioară se face cu butonul Back al browswer-ului.microsoft.- un alt site web. atunci atributul href are ca valoare adresa URL care încarcă pagina nouă. definită în aceeaşi pagină. Pentru a identifica ancora se utilizează atributul name al etichetei <a>. către care se pot defini legături numite ancore.

care va avea ca valoare un nume pentru fereastra în care se va încărca noua pagină. Pentru afişarea într-o fereastră nouă se poate folosi atributul target al etichetei <a>. paginile indicate de acestea se vor încărca în aceeaşi fereastră a browser-ului. 17 . <html> <head> <title> Exemplu instante multiple </title> </head> <body> <a href="ex8. Acestea sunt: • link – pentru link-urile nevizitate • vlink – pentru link-urile vizitate • alink – pentru link-urile active Instanţe multiple pentru un browser La realizarea unei legături către o pagină nouă aceasta va fi încărcată în mod implicit în fereastra curentă a browser-ului.html" target="fereastra2"> Incarca pagina din ex9 in alta fereastra noua </a><br> <a href="ex10.html" target="fereastra1"> Incarca pagina din ex8 in fereastra noua </a><br> <a href="ex9.html" target="fereastra1"> Incarca pagina din ex10 in prima fereastra </a><br> </body> </html> În cazul în care mai multe link-uri folosesc aceeaşi valoare pentru atributul target.<body> <a href="#ancora1"> Link catre ancora1 </a><br> <a href="#ancora2"> Link catre ancora2 </a><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <a name="#ancora1"> Prima ancora <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <a name="#ancora2"> A doua ancora </body> </html> Alegerea culorii pentru afişarea link-urilor se face cu ajutorul a trei atribute ale etichetei body.

sunetul se va repeta la nesfârşit. pentru ”-1” sau ” infinite”. Pe redarea acestora.ro"> Trimite mesaj </a><br> </body> </html> Inserarea sunetelor şi a video clipurilor Legăturile către fişiere de sunet sau videoclipuri se realizează cu eticheta <a>.mp3" loop="2"> <a href="mailto:student@tuiasi. src precizează adresa fişierului care conţine sunetul. loop indică numărul de repetiţii. 2.Expedierea mesajelor e-mail Pentru a insera un link care permite lansarea în execuţie a aplicaţiei de expediere a mesajelor se utilizează serviciul Internet mailto: urmat de o adresă de mail. Fondul sonor al unei pagini web Fondul sonor pentru o pagină web se stabileşte cu jutorul etichetei <bgsound>. În acest caz e necesar ca un program de expediere a mesajelor electronice să fie instalat pe calculatorul utilizatorului. <html> <head> <title> Exemplu expediere mesaj </title> </head> <body> <a href="mailto:student@tuiasi. Aceasta admite două atribute: 1.ro"> Trimite mesaj </a><br> </body> </html> Videoclipuri in-line 18 . e necesar ca pe calculatorul clientului să fie instalat software-ul capabil să interpreteze corect fişierul indicat. al cărei atribut href trebuie să indice adresa URL a fişierului de sunet sau a clip-ului. <html> <head> <title> Exemplu fond sonor </title> </head> <body> <bgsound src="Sleep Away.

printr-o valoare întreagă pozitivă.loopdelay permite specificarea intervalului de timp (în număr de milisecunde) între două reluări succesive ale clipului.jpg"> <a href="mailto:student@yahoo. 19 . Atributul src permite specificarea unei imagini alternative ca primă imagine afişată. în fereastra destinată clipului este afişată implicit prima imagine din videoclip. de exemplu: − ”circle” pentru ο − ”disc” pentru ● − ”square” pentru Lista va fi indentată faţă de restul paginii web şi fiecare element e afişat pe un rând nou. . Listele neordonate pot fi imbricate pe mai multe nivele. <html> <head> <title> Exemplu videoclip </title> </head> <body> <img dynsrc="Wildlife.com">Trimite mesaj </a></br> </body> </html> Utilizarea listelor în html Liste neordonate Un bloc de text delimitat de perechea de etichete <ul> şi </ul> (unordered list) formează o listă neordonată. nelimitată în timp a clipului. Atributul type al etichetelor <ul> şi <li> specifică forma caracterului afişat în faţa elementelor listei. iar atributul alt permite specificarea unui text alternativ. Fiecare element al listei e iniţiat de eticheta <li> (list item).start stabileşte momentul în care începe redarea clipului: odată cu încărcarea paginii web de către browser (start=”fileopen”). sau la deplasarea cursorului mouse-ului peste imaginea iniţială a clipului (start=”mouseover”). . se foloseşte o extensie a etichetei <img>. ”-1” şi ”infinite” au ca efect repetiţia continuă.loop indică numărul de repetiţii ale clipului.Pentru inserarea in-line a videoclipurilor într-o pagină web. Când nu se află în rulare. pentru care se pot utiliza următoarele atribute: .dynsrc (dynamic source) specifică adresa URL a fişierului care conţine clipul.wmv" start="mouseover" src="alfa1. .

III.b.B.C.II. Listele ordonate pot fi imbricate între ele sau cu liste neordonate.D… − ”a” pentru ordonarea de tipul a. Valoarea afişată pentru un element al listei poate fi indicată de atributul value (al etichetei <li>).3.4… Stabilirea valorii iniţiale a secvenţei de ordonare e realizată de atributul start al etichetei <ol>. care trebuie să fie un număr întreg pozitiv. <html> <head> <title> Exemplu liste ordonate </title> </head> <body> <ol type="A"> Textul e caracterizat de:<br> <li> marime <li> culoare 20 . Atributul type al etichetelor <ol> şi <li> stabileşte tipul de ordonare a listei.IV… − ”i” pentru ordonarea de tipul i. Fiecare element al listei e precedat de eticheta etichete <li> şi e afişat pe un rând nou.iii.<html> <head> <title> Exemplu liste neordonate </title> </head> <body> Culorile pot fi specificate prin: <ul> <li>nume de culori <ul type="square"> <li> white <li> red <li> blue </ul> <li>numere hexazecimale <ul type="square"> <li> #FF0000 <li> #FFFFFF </ul> </ul> </body> </html> Liste ordonate Un bloc de text delimitat de perechea de etichete <ol> şi </ol> (ordered list) constituie o listă ordonată. Lista este indentată faţă de marginea stângă a paginii web.iv… − ”1” pentru numerotarea 1.ii. Valorile posibile sunt: − ”A” pentru ordonarea de tipul A.2.d… − ”I” pentru ordonarea de tipul I.c. a cărui valoare trebuie să fie un număr întreg pozitiv.

Liste de imagini şi texte <html> <head> <title> Exemplu liste imagini si texte </title> </head> <body> <ul>Elemente combinate de grafica si text <br> <img src="alfa1. <html> <head> <title> Exemplu lista de definitii </title> </head> <body> <dl>Atributele ce definesc culoarea:<br><br> <dt>color <dd>culoarea textului <dt>bgcolor <dd>culoarea de fond </dl> </body> </html> Utilizări speciale ale listelor A.jpg"> elementul 2 <br> <img src="alfa3.jpg"> elementul 3 <br> 21 .</ol> <li> font <ol type="1" start=3> Fonturile pot fi: <li> Arial <li> Courier </ol> </body> </html> Liste de definiţii O listă de definiţii e formată dintr-o succesiune de termeni.jpg"> elementul 1 <br> <img src="alfa2. fiecare urmat de definiţia sa. iar definiţia termenului e iniţiată de eticheta <dd> (definition description). Un termen al listei e iniţiat de eticheta <dt> (definition term). Lista de definiţii se încadrează între perechea de etichete <dl>. </dl> (definition list). Definiţia unui termen începe pe o linie nouă şi e indentată.

Fiecare din domeniile definite poate avea setări proprii relativ la culoarea fondului. aliniere. Eticheta <tr> (table row) inserează o linie în reţeaua rectangulară (</tr> fiind opţională). a textului. <html> <head> <title> Exemplu inserare tabel </title> </head> <body> <h3> tabel cu 2 linii si 3 coloane </h3> <table> <tr> <td>celula11 <td>celula12 <td>celula13 <td>celula21 <tr> 22 . Liste de definiţii cu termeni multipli <html> <head> <title> Liste cu termeni multipli </title> </head> <body> <dl> <dt><b>termen1 </b> <dt><b>termen2 </b> <dt><b>ter men3 </b> <dd><i>definitia1 </i> <dd><i>definitia2 </i> <dd><i>definitia3 </i> </dl> </body> </html> Reţele rectangulare de domenii (tabele) Introducerea într-o pagină web a unui tabel format din rânduri care conţin mai multe celule este posibilă prin intermediul etichetelor <table> şi </table>. iar eticheta <td> (table data) adaugă o celulă. B.</ul> </body> </html> Observaţie: fişierele de tip jpg specificate în exemplul de mai sus se găsesc în acelaşi folder cu fişierul html al paginii web. etc.

care stabilesc lăţimea respectiv înâlţimea tabelului. Atributele hspace şi vspace controlează distanţele dintre tabel şi restul elementelor din pagina web. pe orizontală. Dacă în tabel sunt definite mai multe atribute bgcolor. reprezentând pixeli. Distanţa dintre celulele alăturate se stabileşte cu atributul cellspacing. <tr> sau <td>. atunci prioritatea este <td>. care printr-un număr întreg pozitiv stabileşte grosimea în pixeli a chenarului. valorile sunt numere întregi pozitive ce reprezintă pixeli (implicit cellspacing=”2” şi cellpadding=”1”). ataşat etichetelor <table>. respectiv verticală. care poate lua valorile left. reprezentând fracţiuni din lăţimea respectiv înălţimea totală a paginii. Definirea culorii de fond a tabelului sau a celulelor componente este permisă de atributul bgcolor. <html> 23 . Valorile permise sunt numere întregi pozitive. right sau center. cu un aspect tridimensional. <tr>. <table>. Alinierea tabelului în pagina web este controlată de atributul align. <html> <head> <title> Tabel centrat cu chenar si diferite culori</title> </head> <body> <table align="center" border="7" bgcolor="yellow"> <tr> <td>celula11 <td>celula12 <tr bgcolor="red"> <td>celula21 <td bgcolor="cyan">celula22 </table> </body> </html> Dimensiunea unui tabel e determinată de valorile atributelor width şi height ale etichetei <table>. sau numere din intervalul 1-100 urmate de %. iar distanţa dintre marginea şi conţinutul unei celule cu cellpadding.<td>celula22 <td>celula23 </table> </body> </html> Chenarul reţelei rectangulare este determinat de atributul border al etichetei <table>.

la stânga tabelului. astfel: . atunci tabelul va fi ajustat la dimensiunile necesare. dacă align=”bottom”. de data aceasta pentru etichetele <td> şi <th>. Conţinutul celulelor definite în acest mod e scris implicit cu caractere aldine şi centrat. Dimensionarea exactă a celulelor unui tabel foloseşte aceleaşi atribute width şi heigh. Conţinutul unei celule poate fi aliniat pe orizontală şi verticală cu atributele align respectiv valign. dacă align=”top” . care pot fi ataşate etichetelor <tr>. în loc de <td>. <html> <head> <title> Exemplu tabel 2 </title> </head> <body> <table border="3" width="80%" height="50%" > <caption align="top"> <b> Orar </b> <tr> <th width="20%">interval orar <th width="40%">luni <th width="40%">marti 24 . dar nu interiorul etichetelor <tr> sau <td>.<head> <title> Exemplu tabel </title> </head> <body> <table border="2" bgcolor="yellow" width="500" height="50%" cellspacing="5" cellpadding="10%"> <tr> <td>celula11 <td>celula12 <tr > <td>celula21 <td >celula22 </table> </body> </html> Titlul tabelului poate fi ataşat cu marcatorul <caption> plasat în interiorul etichetelor <table> şi </table>. <td> şi <th>.sub tabel. În cazul în care dimensiunile precizate sunt mai mici decât cele necesare afişării informaţiilor în tabel. în funcţie de valoarea atributului align. atributele permise de <td> putând fi folosite şi de <th>. dacă align=”left” . dacă align=”right” Capul de tabel e format de celulele introduse de eticheta <th> (table header).deasupra tabelului.la dreapta tabelului. . Titlul poate fi aliniat diferit.

Valoarea acestui atribut este adresa URL a unui script aflat pe serverul www care primeşte datele completate în formular. câmpuri de editare. pentru a afişa chenarul unei celule goale se foloseşte structura <td><br>.<tr > <td width="20%">8-10 <td width="40%"> matematica <td width="40%"> informatica </table> </body> </html> Într-o reţea rectangulară unirea celulelor pe orizontală şi verticală e realizată de atributele colspan respectiv rawspan ale etichetelor <td> şi <th>. analizează formularul completat. datele sunt adăugate la adresa URL precizată de atributul „action”. care prin valori numere întregi pozitive definesc celulele ce se unesc. Elementele unui formular sunt definite în general de eticheta <input>. value permite atribuirea unei valori iniţiale unui element şi type precizează tipul elementului. operaţiile de citire. action – precizează ce se va întâmpla cu datele completate în formular când au ajuns la destinaţie. În cazul câmpurilor de editare type are valoarea ”text”. 25 . casete de selecţie. fiind recomandată în cazul transferului volumelor mari de date. iar pentru un buton de expediere al formularului are valoarea ”submit”. O altă metodă. stochează datele într-o bază de date dacă e cazul. care executând o aplicaţie dedicată. La expedierea unui formular se trimit către server perechi de forma nume=valoare pentru fiecare câmp. „post”. Atributul name ataşează un nume fiecărui element al formularului. Deoarece celulele fără conţinut nu au în mod implicit chenar. Într-o pagină web formularele pot fi create cu ajutorul etichetelor <form> şi </form>. Utilizatorul completează formularul şi îl expediază unui server. expediază datele separat. Dacă metoda este „get” (care e valoarea implicită). datele sunt expediate la adresa specificată. care au două atribute esenţiale: 1. 2. şi poate genera un răspuns utilizatorului. method – indică metoda utilizată de browser pentru expedierea datelor din formular. verificare. Numele elementului este stabilit de atributul value. efectuează prelucrarea şi eventual expediază un răspuns utilizatorului. Pe buton va fi afişat ”submit query” sau valoarea indicată de atributul value. etc. Dacă atributul action include de asemenea şi o adresă de e-mail. Formulare Formularul este un ansamblu de zone active alcătuit din butoane. prelucrare nefiind efectuate de serverul www.

b) Casetele de validare (checkboxes) permit selecţia unei singure opţiuni sau a mai multor opţiuni. se consideră implicit un câmp de tip text.care specifică lăţimea câmpului de editare. Toate butoanele ce aparţin unei familii de butoane radio au acelaşi nume. . la depăşirea valorii indicate se realizează derularea în câmpul respectiv. În cazul în care atributul type nu e specificat în eticheta <input>. Fiecare casetă poate avea un nume definit de atributul name şi o valoare prestabilită selectată. .10 caractere <br> Numar maxim caractere admise .30 <br> <form action="mailto:adresa@yahoo. definită de atributul checked. 26 . stabilit de atributul name.reset – care resetează formularul.push – care execută o acţiune definită de autorul formularului. caracterele introduse după depăşirea acestui număr sunt ignorate. Textul ce va fi expediat serverului împreună cu numele familiei de butoane e indicat de atributul value.size . <html> <head> <title> Exemplu formulare </title> </head> <body> <h1> Formular cu un camp de editare</h1><hr> Latime camp .submit – care transmit informaţiile completate în formular către server. c) Butoanele radio (cu excludere) permit alegerea unei singure variante din mai multe posibile. Atributul checked permite selecţia prestabilită a unui buton dintr-o familie de butoane. câmpurile revenind la valorile iniţiale. .com" method="post"> <input type="text" name="numele" value="Numele si prenumele" size="10" maxlength="30" <br> <input type="submit" value="expediaza"> </form> </body> </html> Elemente de control a) Butoanele de comandă pot fi de diferite tipuri: .Pentru câmpurile de editare eticheta input poate folosi atributele: .maxlength – care specifică numărul maxim de caractere pe care le poate primi un câmp de editare.

Adresa URL a fişierului poate fi specificată în atributul value. .com" method="post"> Nume:<input type="text" name="nume" value="Numele si prenumele" <br><br> student la: <br> <select name="universitate" size="2"> <option value="B"> Universitatea din Bucuresti <option value="IS"> Universitatea din Iasi <option value="Tm"> Universitatea din Timisoara </select> <br><br> Limbi straine cunoscute: <br> <select name="limbi straine" multiple size="3"> <option value="f"> Franceza <option value="e"> Engleza <option value="i"> Italiana </select> <input type="reset" > <input type="submit" > </form> </body> 27 .name – ataşează un nume listei. Spre deosebire de câmpurile de tip text. <html> <head> <title> Exemplu liste selectie </title> </head> <body> <h3> Completati formularul </h3><hr> <form action="mailto:adresa@yahoo.value – determină textul care va fi expediat în perechea nume=value. Liste de selecţie Listele de selecţie permit alegerea unor elemente dintr-o listă finită. Atributele permise sunt: . poate fi tastată într-un câmp de editare al formularului. restul fiind afişate prin intermediul barei de derulare ataşate automat. .Câmpurile destinate introducerii parolelor într-un formular sunt definite de tipul password. Tipul file permite transmiterea unui fişier prin intermediul formularului. . Selecţia multiplă e posibilă prin folosirea atributului multiple. parolele sunt afişate sub forma caracterelor *.size – stabileşte numărul de elemente din listă vizibile pe ecran la un moment dat. inclusă în formular de etichetele corespondente <select> şi </select>. sau poate fi selectată prin intermediul unei casete de selecţie care e afişată la apăsarea butonului „browse” din formular.selected – permite selectarea prestabilită a unui element al listei. Tipul image e utilizat pentru a afişa o imagine pe butonul Submit.

poziţia şi conţinutul fiecărui cadru. Definirea cadrelor se face prin împărţirea ferestrelor în linii şi coloane. Elementele pot fi: o un număr întreg de pixeli. trebuie creat un document special. care descrie modul în care e organizată fereastra browser-ului.numărul de subferestre de tip coloană în cadrul unei ferestre e stabilit de atributul cols al etichetei frameset care descrie fereastra.specifică numărul de linii afişate simultan. Se pot utiliza următoarele atribute: . prin eticheta <frame>. fiind înlocuită de <frameset>. </head> <frameset> …… </frameset> </html> Se observă că secţiunea <body> lipseşte. dimensiunea.</html> Câmpuri de editare multilinie Inserarea textului pe mai multe linii este permisă de eticheta <textarea>. Pentru atributele cols şi rows se admite o listă de elemente separate prin virgulă. astfel: .rows . sau poate fi considerată un cadru în care se va încărca 28 .specifică numărul de caractere afişate pe o linie.cols . Pentru aceasta.name – permite ataşarea unui nume câmpului de editare multilinie. denumit frameset. Între etichete de început şi sfârşit frameset sunt descrise cadrele din document. o n părţi din spaţiul rămas liber (n*). .wrap – permite gestionarea modului în care textul este tratat la trecerea pe linia următoare. Cadre sau subferestre Fereastra browser-ului poate fi împărţită în mai multe cadre dreptunghiulare (frame). care defineşte împărţirea în cadre a ferestrei browser-ului. Structura acestui document este: <html> <head> ……. care oferă posibilitatea de a structura în pagină informaţii diverse şi de a afişa simultan mai multe pagini web. . .numărul de subferestre de tip linie în cadrul unei ferestre e stabilit de atributul rows. . o procente din dimensiunea ferestrei (1-99%). O subfereastră poate fi împărţită la rândul ei în alte subferestre (folosind frameset).

500"> <frame src="ex40.html"> </frameset> </html> <html> <head> <title> Exemplul 3/cadre </title> </head> <frameset rows="*.html"> <frame src="ex42.html"> </frameset> </html> src specifică adresa <html> <head> <title> Exemplul 2/cadre </title> </head> <frameset cols="*.*"> <frame src="ex39.20%.*"> <frame src="ex40.html"> <frame src="ex41.html"> <frame src="ex40.html"> </frameset> </html> <html> <head> <title> Exemplul 4/cadre </title> </head> <frameset cols="20%.html"> <frame src="ex42.html"> </frameset> </frameset> </html> 29 .*.un document html (folosind frame). Atributul documentului html care va fi iniţial afişat în cadru.html"> <frame src="ex42.*"> <frame src="ex40.html"> <frame src="ex42.html"> <frame src="ex41.*"> <frame src="ex41.html"> <frame src="ex41.*" cols="*.html"> <frameset rows="*. <html> <head> <title> Exemplul 1/cadre </title> </head> <frameset rows="200.

barele de derulare sunt întotdeauna adăugate.no . .frameborder – dezactivează pentru valoarea ”0” sau ”no” afişarea chenarului.barele de derulare nu sunt utilizate.auto . .Aspectul chenarului cadrelor poate fi personalizat prin intermediul atributelor: . Acesta poate avea valorile: . . Adăugarea unei bare de derulare care permite navigarea în interiorul documentului afişat într-un cadru e determinată de atributul scrolling al etichetei frame.barele de derulare sunt vizibile numai atunci când e necesar. .bordercolor – stabileşte culoarea. care indică prin valorile introduse în pixeli sau în procente distanţa dintre conţinutul unui cadru şi marginile verticale respectiv orizontale ale cadrului. 30 . Poziţionarea documentului în suprafaţa alocată unui cadru se realizează cu atributele marginheight şi marginwidth aplicate etichetei frame.border – stabileşte grosimea (valoarea implicită fiind de 5 pixeli).yes .

destinaţia site-ului (vanzare.) . asistenţă tehnică.Claritatea este obligatorie pentru o comunicare precisă.Consecvenţa în proiectarea elementelor permite coeziunea în prezentare. 31 . Principiile fundamentale ale proiectării interfeţei cu utilizatorul au la bază câteva concepte simple: metafora. Ea trebuie să utilizeze concepte comune. artă. a interfeţelor cele mai adecvate. adresa URL a unor site-uri cu informaţii din acelaşi domeniu de interes) . . a tipurilor de tehnologii utilizate la proiectare. pe care oricare vizitator al siteului sa le poată înţelege imediat. . . plecând de la cerinţele imediate) La stabilirea publicului e necesar să se ţină cont de caracteristicile demografice şi de experienţa sau informaţiile dobândite în urma accesării site-ului.Navigarea este o parte integrală a proiectării interfeţei. reproduceri de ştiri.Metafora e folosită pentru reprezentarea simbolică a structurii unei pagini web.informaţii curente şi conţinut disponibil care merită să fie incluse în site (fotografii de produse şi ilustraţii. etc. claritatea. documentaţii tehnice.scopurile site -ului pe termen scurt şi lung (stabilirea unei strategii pe termen lung. cotidiene. informaţii şi educaţie. . un element critic care trebuie să asigure tranziţia logică. consecvenţa. rapidă şi uşoară în site. .Capitolul 3 Proiectarea paginilor web Analiza scopului unui site şi definirea publicului căruia se adresează constituie etape de început în proiectarea paginilor web. ca un mijloc vizual familiar utilizatorilor. Elementele trebuie să fie simple şi clare la navigarea în site. Pentru a stabili cât mai corect scopul proiectului e necesar să se ţină cont de următoarele considerente: .Orientarea poate fi realizată prin dotarea fiecărui site cu un antet care defineşte scopul paginii sau cu orice element familiar care identifică poziţia în site. la localizarea informaţiei sau întoarcerea la alte domenii importante din site. orientarea şi navigarea. conferind un aspect unitar al site-ului. Detalierea scopului va permite identificarea direcţiilor de urmat pe termen scurt sau lung. publicitate şi promovare produse.

Unii proiectanţi preferă o pagină preponderent grafică. O pagină de întâmpinare poate să difere foarte mult de o pagină plină de conţinut. în ceea ce priveşte aspectul şi impresia pe care o produce. cum ar fi culoarea. Ceea ce se doreşte este asigurarea unui echilibru potrivit menit a atrage ochiul prin intermediul unui contrast vizual corespunzător. deoarece utilizatorii vor să ajungă rapid la informaţie. un document dominat de un design slab al elementelor grafice şi al textelor nu va captiva utilizatorii sofisticaţi care caută un conţinut plin de substanţă şi eleganţă. Alţii preferă o pagină cu caracter funcţional. De asemnea. iar componentele noi pot fi adăugate folosind o diversitate de machete. O a treia categorie de proiectanţi sunt de părere că pagina de deschidere e o pierdere de timp.declară numele sau scopul paginii şi poate conţine text dar şi elemente de grafică. introducând elemente de proiectare ale acestuia. Antetul . determinând astfel un aspect curat şi ordonat. grafică şi alte opţiuni multimedia. Consecvenţa poate fi asigurată de particularităţi cum ar fi paletele de culori şi fonturile. iar paginile de conţinut sunt diferite de cele necesare pentru informarea inline. considerate şi ele parte a proiectului trebuie să păstreze aceleaşi culori. • pagina de cuprins. dar şi cu opţiuni de navigare.Concepţia proiectului Paginile des întâlnite într-un site web sunt: • pagina de întâmpinare. Prima pagină trebuie să reprezinte identitatea site -ului. Elementele unei pagini standard sunt: 1. 32 . asemnea unei mase de gri nediferenţiat. Echilibrul grafic de ansamblu şi organizarea paginii sunt foarte importante pentru a capta atenţia utilizatorilor asupra prezentării conţinutului. cum e de exemplu o prezentare video a unui produs. tipografia şi textura. Claritatea poate fi îmbunătăţită prin alinierea marginii din dreapta a câmpurilor de răspuns. forma. asemănătoare cu coperta tradiţională a revistelor. Paginile de conţinut trebuie să ofere o combinaţie de consecvenţă şi caracteristici noi. Formularele de reacţie. Tendinţa actuală este de a include elementele comune şi aspectele specifice într-un singur format integrat. O pagină anostă abundând de text masiv va conduce la respingere. fonturi şi machete. cu grafică. • pagina de reacţie.

trebuie să fie clar. apar restricţii impuse de browser-e asupra spaţiului folosibil. Prin combinaţia reuşită a acestora se creează premiza pentru obţinerea celor mai eficiente site-uri. Scanarea graficii inserate în site trebuie să ţină cont de calitatea materialului de scanat şi de rezoluţia de scanare. Una din regulile de bază pentru machetarea pe orizontală este să se lucreze cu 600 pixeli pentru lăţimea site-ului. galben sau albastru – saturate. concis. element esenţial al designului. Pentru fundal şi pentru elementele minore. De asemenea. sunt cea mai bună alegere. Conţinutul mesajului (textul) . Uneori se scanează obiecte reale. nuanţele de pastel. În etapele iniţiale ale proiectării unui site trebuie luate în considerarea navigarea şi machetarea. parte a 33 . curate şi de mare calitate. imaginilor. Culorile şi grafica în paginile web Folosirea culorii. 5. Schemele mai sofisticate necesită de obicei intevenţia unui grafician. cu diferite plăci video şi monitoare. 4. care se găsesc de obicei în natură. se utilizează pentru accentuarea unor zone. mate. Navigarea – se face prin intermediul butoanelor. deoarece pentru a vedea mai multe informaţii se foloseşte în mod natural defilarea în jos. Contactul – posibilitatea de a lua legătura cu proprietarul sau o persoană de contact prin crearea unei legături mailto pe fiecare pagină. iar textul trebuie întotdeauna să contrasteze cu orice culoare a fundalului. constituie o provocare pentru proiectanţii de pagini web. 3. Culorile primare roşu. textului. Identificarea sitului – se poate face în partea de sus a paginii (eticheta title) sau prin furnizarea de informaţii privind drepturile de autor. Datorită existenţei unei multitudini de platforme de calculatoare. în josul paginii. Materialele sursă trebuie să fie clare.2. Un rol important în focalizarea atenţiei îl reprezintă alegerea culorilor. mai există şi problema proiectării pe verticală şi orizontală. astfel încât să nu fie forţată apariţia unei bare orizontale pentru defilare. scopul e de a accesa orice informaţie prin maximum 3 click-uri de mouse. În acest ultim caz trebuie totuşi ca numărul de ecrane pe care e permisă defilarea să nu fie prea mare (mai mare de trei) iar imaginile sa nu depăşească mărimea unei pagini. împreună cu interfaţa utilizator. Proiectarea pe verticală este ceva mai flexibilă. adecvat subiectului.

Aceasta facilitează încărcarea rapidă a paginii în condiţiile în care impactul vizual este substanţial (de exemplu principalele motoare de căutare: google. care pesupune copierea elementelor care există în realitate şi folosirea lor pentru a inspira grafica pe calculator. Photoshop). fără a întrerupe modelul fundalului. dar în final trebuie să fie de 72 dpi (puncte pe inches). Păstrarea proporţiilor faţă de alte elemente ale paginii are o importanţă deosebită. O altă metodă este folosirea fişierelor GIF progresive. designul unei pagini trebuie să utilizeze interfeţe având preponderent informaţii text şi elemente grafice de dimensiuni reduse. Dimensionarea paginii trebuie să ţină cont de valorile uzuale afişabile pe ecranele calculatoarelor. pe durata încărcării. Ea este potrivită pentru grafica cu mai puţine culori. Tehnologia GIF creată pentru elementele grafice de dimensiuni mici. conferindu-i un aspect profesional. reduce numărul culorilor folosind intercalarea pentru cele care nu se găsesc în paleta GIF standard de 256 de culori . 34 . Se recomandă folosirea formatului GIF pentru grafica simplă şi a formatului JPEG pentru fotografii şi grafică în care este nevoie de rezoluţie mare şi fişiere mici. Acelaşi lucru e valabil dacă se doreşte printarea informaţiilor. Cea mai populară şi mai eficientă metodă de randare progresivă o constituie folosirea fişierelor GIF întreţesute.designului organic. o metodă utilizată pentru a păstra atenţia utilizatorului. Imaginea apare mai întâi înceţoşată. pentru a produce fişiere de dimensiuni mai mici. suporturi sau efecte de margine pot da viaţă şi dimensiune graficii unei pagini. Pentru a fi eficient. umbre proiectate. pentru a reduce pe cât posibil defilarea pe orizontală şi verticală în scopul vizualizării paginii. sau mai puţine variaţii de lumină. în mod progresiv devine mai clară. Trebuie să se realizeze un echilibru agreabil între text. generate cu diferite programe (de ex. filtre speciale. yahoo). Transparenţa permite crearea unor fundaluri cu texturi şi imprimarea unui element grafic peste acestea. Rezoluţia de scanare pentru web poate fi mai mare iniţial. formatul JPEG permite obţinerea unei culori cât mai apropiată de realitate pentru o dimensiune mai mică fişierului. Modul de salvare a fişierelor grafice utilizate într-o pagină web are efect asupra mărimii sale şi asupra aspectului. Randarea progresivă reprezintă apariţia gradată a graficii. Randarea progresivă şi transparenţa sunt procedee care realizează maximizarea graficii simultan cu minimizarea fişierelor şi a problemelor inerente pentru ecranul calculatorului. iar apoi. alte imagini şi imaginea respectivă. Prelucrări grafice cum ar fi adăugarea de surse de lumină. Folosind comprimarea cu pierderi. o gradare mai mică a culorii.

în funcţie de scopul acestuia şi de beneficiari. de exemplu GIF animate – utilizate de obicei în cadrul afişelor publicitare.unul dintre cele mai populare formate actuale poate fi utilizat pentru stocare de melodii de dimensiuni mai mari. spre deosebire de cazul anterior în care se percep după terminarea transferului. etc Secvenţele video. Creşterea vitezei conexiunilor la Internet a permis adăugarea de facilităţi multimedia avansate pentru paginile web. stocând informaţie audio fără nici o compresie.un format specific Apple. prin stabilirea unor margini suficient de mari şi generoase între anteturi şi subsoluri şi textul adiacent. 35 . − WAV . Sunetele sunt percepute concomitent cu încărcarea paginii.un format destinat difuzării de conţinut audio în timp real (streaming audio).un format simplu.Designul unui site de web trebuie să fie cât mai personalizat.animaţii Flash. O pagină realizată profesional are de obicei un aspect aerisit. Zonele de pagină ce trebuie evidenţiate pot fi încadrate în diverse chenare (borders). fiind adecvate pentru fundaluri sonore pentru o pagină web. − Real Audio . Paginile trebuie să aibă acelaşi şablon (layout). format folosit mai ales de posturile de radio care emit pe web. − MP3 .un format specific Windows. fişierele de acest tip având dimensiuni reduse. la calitate suficient de bună. Real video sau Quick Time. imagini statice. fişierele rezultate fiind de mărime apreciabilă. AVI. iar designul paginilor trebuie să fie identic. Pentru textele mai lungi e preferabilă o afişare pe mai multe coloane spaţiate corespunzător. Animaţiile sunt prezente în paginile web prin intermediul diferitelor fişiere. conţinut audio şi video. animaţii. utilizează fişiere de diferite formate: MPEG. Cele mai cunoscute formate audio care pot fi utilizate sunt: − MIDI (Musical Instrument Digital Interface) . Multimedia presupune o combinaţie de mai multe medii. asemănător în multe privinţe formatului Real Audio. script-uri Java . − QuickTime . dintre care text.

pentru fiecare limbă trebuie să fie documente separate. iar informaţiile de conţinut. la fel ca şi alinierea la dreapta sau centrată. a animaţiei. Actualizarea informaţiilor trebuie făcută regulat. S-a constat că în vederea îmbunătăţirii lizibilităţii cea mai bună soluţie este fundal alb pentru text negru. alb pe fond verde. roşu pe fond negru. Evaluarea a unui site web se face după următoarele criterii: -scop -continut -formă şi accesibilitate -cost • • • • • • • • 36 . etc. datorită dificultăţilor de parcurgere.Consideraţii generale asupra realizării unui site web • • • Navigarea trebuie să fie facilă şi structurată. alb pe fond roşu. alb pe fond negru. La elaborarea prezentărilor pe web informaţiile esenţiale ar trebui să utilizeze contraste mai puternice. în fiecare pagină trebuie să existe meniuri şi arbori de parcurgere a legăturilor. contraste cromatice mai reduse. verificându-se integritatea legăturilor. Liniile de comentarii sunt utile pentru explicarea modului de marcare şi furnizarea unor detalii utile. Nu se recomandă utilizarea unor imagini de fundal încărcate. evitându-se pe cât posibil folosirea caracterelor specifice unei limbi. Trebuie evitate liniile lungi de text. verde pe fond roşu. Marcatorul META poate specifica informaţii referitoare la autor . Dimensiunile paginii trebuie să minimizeze utilizarea tastelor scroll. Dacă site -ul e în mai multe limbi. verde pe fond alb. albastru pe fond alb. în scopul evitării link-urilor eronate. roşu pe fond alb. a imaginilor de dimensiuni mari. Fiecare document HTML trebuie să aiba un titlu adecvat (precizat prin intermediul etichetei title). alb pe fond albastru. În ordine descrescătoare de intensitae a contrastelor cromatice pentru text. diferite studii recomandă: negru pe fond galben. galben pe fond negru. Se recomandă utilizarea unui număr minim de fonturi. pentru a permite unui număr cât mai mare de calculatoare să vizualizeze pagina. cuvinte cheie . a fundalurilor sonore.

37 .

Sign up to vote on this title
UsefulNot useful