P. 1
WEB html

WEB html

|Views: 40|Likes:
Published by Flavius Vicu

More info:

Published by: Flavius Vicu on Apr 07, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

06/03/2013

pdf

text

original

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

cum ar fi titlul..<body> ... din care pot extrage informaţii de bază despre pagină.... 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 . între tag-urile <title> şi </title> va fi afişat în bara de titlu a ferestrei browserului. care se recomandă a fi precizat în antet.... Titlul poate fi oricât de lung.. În cadrul acestei etichete se specifică o proprietate a documentului căreia i se asociază o valoare. fără a consuma timp suplimentar cu încărcarea şi citirea întregului document. De exemplu.. data la care a fost efectuată ultima modificare.. Exemplul următor ilustrează modul în care se specifică titlul documentului: <html> <head> <title> Titlul paginii web </title> </head> <body> .. prin intermediul etichetei <meta>.... Acestea pot descărca numai antetul documentului. dar specificarea autorului şi a cuvintelor cheie poate fi utilă motoarelor de căutare. 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... data creării.. setul de caractere utilizat implicit). </body> </html> început corp document corpul documentului sfârşit corp document sfârşitul documentului html Titlul documentului... dar el va fi trunchiat la lungimea barei de titlu a browser-ului. formatul fişierului.

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

Gruparea e utilă deoarece permite aplicarea aceluiaşi stil de formatare a textului elementelor din grupurile de nivel bloc sau caracter. Gruparea mai multor elemente html într-un bloc se realizează cu marcatorii <div> şi </div>. De obicei. în timp ce elementele de formatare la nivel de caracter conţin doar text sau alte elemente de formatare la nivel de caracter.se termină cu --> şi pot fi inserate oriunde în document. Mai multe elemente dintr-un bloc pot fi grupate la nivel de caracter prin etichetele <span> şi </span>. de exemplu: lang=”en” Atributul dir specifică direcţia de scriere a textului. Elementele de formatare la nivel de bloc pot conţine la rândul lor alte elemente de formatare (la nivel de bloc sau caracter). 6 . Comentariile html încep cu caracterele <!-. Specificarea explicită a limbii poate fi utilă motoarelor de căutare. programelor de verificare gramaticală şi lexicală şi nu influenţează modul de vizualizare a documentului. ele fiind utile celor care citesc sau editează documentul.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. Valoarea asociată atributului lang e un cod de limbă. Formatarea textului Formatarea textului inclus în corpul unui document html se poate face la nivel de bloc sau la nivel de caracter. Comentariile html nu vor fi afişate. 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ă.

ce reprezintă distanţa în pixeli. 2.numere întregi pozitive. ”tab”. sau . ”CR/LF” (Carriage Return/Line Feed) ce apar în cadrul unui text.un procent din lăţimea. rightmargin – stabileşte distanţa dintre marginea din dreapta a ferestrei browser-ului şi marginea din dreapta a conţinutului paginii. acest text trebuie inclus într-un bloc marcat de etichetele <pre> şi </pre>. sau cu ajutorul etichetei <br> (break). leftmargin – stabileşte distanţa dintre marginea din stânga a ferestrei browser-ului şi marginea din stânga a conţinutului paginii. În limbajul HTML delimitarea paragrafelor se realizează cu ajutorul etichetei <p> (eticheta </p> fiind opţională). <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 paragrafe </title> 7 .Stabilirea marginilor paginii web Amplasarea marginilor paginii web faţă de marginile ferestrei browserului se face prin intermediul atributelor etichetei <body> : 1. Ambele atribute admit ca valori: . <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). respectiv înălţimea ferestrei browser-ului.

care admite valorile predefinite: .left – când textul e aliniat la marginea din stânga . <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.right – când textul e aliniat la marginea din dreapta . De obicei. 8 .dacă textul este scris de la stânga la dreapta. Valoarea implicită a modului de aliniere a textului depinde de direcţia acestuia. .</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. se realizează în limbajul HTML cu ajutorul etichetelor <blockquote> şi </blockquote>. înainte şi după această etichetă browser-ul adaugă o linie suplimentară. deplasarea marginiii din stânga a textului spre dreapta.center – când textul e centrat. • inserarea unui spaţiu suplimentar după blocul paragraf atunci când se foloseşte eticheta opţională </p>. Pentru a insera o linie vidă într-un document html se recomandă utilizarea etichetei <br>. la o anumită distanţă faţă de marginea paginii. valoarea implicită a modului de aliniere e left.dacă textul este scris de la dreapta la stânga. astfel: . • alinierea textului cu ajutorul atributului align. valoarea implicită a modului de aliniere e right.

</h6>. <h2>. </h2>. Deşi programele de navigare în Internet folosesc diferite mărimi şi stiluri de caractere pentru cele 6 nivele de titluri. <h3>. Acestea pot fi introduse cu ajutorul etichetelor <h1>. <h4>. dir. Etichetele pentru paragrafele titlu admit atributele: align. Toate browserele introduc un spaţiu suplimentar înainte de a afişa un titlu. însoţite de către o etichetă de incheiere similară </h1>. lang. 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>. </h5>. 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 . <h5>. <h6>. <html> <head> <title> Exemplu blocuri titlu </title> </head> <body> <h1 align="center"> Titlu centrat. </h4>. marimea 1 </h1> <h2 align="left"> Titlu aliniat la stanga.<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. </h3>.

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

cursive (încadrate între etichetele <i> şi </i>). putând fi specificată în două moduri: . <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>). <html> <head> <title> Exemplu caractere bold. underline. Mărimea fontului este stabilită de atributul size. tip sau stil (atributul face). sau . mărime (atributul size). respectiv micşorează cu o unitate caracterele specificate. sau secţionate cu o linie (încadrate între etichetele <strike> şi </strike>).absolut. subliniate (încadrate între etichetele <u> şi </u>). 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. iar -n micşorează fontul cu n mărimi.relativ la dimensiunea curentă a caracterelor: +n măreşte fontul cu n mărimi. faţă de mărimea curentă.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). <html> 11 . italic. folosind un număr cuprins între 1 şi 7.

prin procedeul denumit imbricarea etichetelor. marite </b></u></i></big> </body> </html> Centrarea unui bloc de text poate fi realizată cu etichetele <center> şi </center>. reprezintă lungimea liniei în pixeli. Liniile orizontale pot fi folosite în pagini web. <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. .align. center şi right. inclinate. care admite următoarele atribute: . subliniate.width.. Afişarea pe o singură linie a unui text este posibilă dacă acesta e inclus între <nobr> şi </nobr>. aliniază linia în modul indicat: left. <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. prin utilizarea etichetei <hr>. sau în procente din lăţimea paginii.<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>. 12 .

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

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

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

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

html" target="fereastra1"> Incarca pagina din ex8 in fereastra noua </a><br> <a href="ex9. care va avea ca valoare un nume pentru fereastra în care se va încărca noua pagină.<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. 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. paginile indicate de acestea se vor încărca în aceeaşi fereastră a browser-ului. Pentru afişarea într-o fereastră nouă se poate folosi atributul target al etichetei <a>.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.html" target="fereastra2"> Incarca pagina din ex9 in alta fereastra noua </a><br> <a href="ex10. <html> <head> <title> Exemplu instante multiple </title> </head> <body> <a href="ex8. 17 .

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. Î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. Pe redarea acestora. al cărei atribut href trebuie să indice adresa URL a fişierului de sunet sau a clip-ului. 2.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>. Aceasta admite două atribute: 1. Fondul sonor al unei pagini web Fondul sonor pentru o pagină web se stabileşte cu jutorul etichetei <bgsound>. e necesar ca pe calculatorul clientului să fie instalat software-ul capabil să interpreteze corect fişierul indicat. loop indică numărul de repetiţii. pentru ”-1” sau ” infinite”. sunetul se va repeta la nesfârşit. <html> <head> <title> Exemplu fond sonor </title> </head> <body> <bgsound src="Sleep Away.mp3" loop="2"> <a href="mailto:student@tuiasi.ro"> Trimite mesaj </a><br> </body> </html> Videoclipuri in-line 18 . src precizează adresa fişierului care conţine sunetul.

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

d… − ”I” pentru ordonarea de tipul I.IV… − ”i” pentru ordonarea de tipul i.4… Stabilirea valorii iniţiale a secvenţei de ordonare e realizată de atributul start al etichetei <ol>.D… − ”a” pentru ordonarea de tipul a.ii. a cărui valoare trebuie să fie un număr întreg pozitiv. Listele ordonate pot fi imbricate între ele sau cu liste neordonate. Atributul type al etichetelor <ol> şi <li> stabileşte tipul de ordonare a listei. <html> <head> <title> Exemplu liste ordonate </title> </head> <body> <ol type="A"> Textul e caracterizat de:<br> <li> marime <li> culoare 20 .c.B.<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ă.2.II. Valoarea afişată pentru un element al listei poate fi indicată de atributul value (al etichetei <li>).b.iii. care trebuie să fie un număr întreg pozitiv.C. Fiecare element al listei e precedat de eticheta etichete <li> şi e afişat pe un rând nou.3. Lista este indentată faţă de marginea stângă a paginii web.iv… − ”1” pentru numerotarea 1.III. Valorile posibile sunt: − ”A” pentru ordonarea de tipul A.

</dl> (definition list).jpg"> elementul 2 <br> <img src="alfa3. fiecare urmat de definiţia sa. iar definiţia termenului e iniţiată de eticheta <dd> (definition description).</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. 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. Lista de definiţii se încadrează între perechea de etichete <dl>. Definiţia unui termen începe pe o linie nouă şi e indentată. Un termen al listei e iniţiat de eticheta <dt> (definition term). <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 3 <br> 21 .

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>. aliniere. 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. Eticheta <tr> (table row) inserează o linie în reţeaua rectangulară (</tr> fiind opţională). etc. Fiecare din domeniile definite poate avea setări proprii relativ la culoarea fondului. <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 . iar eticheta <td> (table data) adaugă o celulă. a textului.

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

<td> şi <th>. dacă align=”right” Capul de tabel e format de celulele introduse de eticheta <th> (table header).<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>. dacă align=”left” .la stânga tabelului. în loc de <td>. atributele permise de <td> putând fi folosite şi de <th>.la dreapta tabelului. în funcţie de valoarea atributului align. Dimensionarea exactă a celulelor unui tabel foloseşte aceleaşi atribute width şi heigh. astfel: . <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 . În cazul în care dimensiunile precizate sunt mai mici decât cele necesare afişării informaţiilor în tabel. dacă align=”top” . dar nu interiorul etichetelor <tr> sau <td>. . Conţinutul unei celule poate fi aliniat pe orizontală şi verticală cu atributele align respectiv valign. care pot fi ataşate etichetelor <tr>. Titlul poate fi aliniat diferit.deasupra tabelului. de data aceasta pentru etichetele <td> şi <th>. atunci tabelul va fi ajustat la dimensiunile necesare.sub tabel. Conţinutul celulelor definite în acest mod e scris implicit cu caractere aldine şi centrat. dacă align=”bottom”.

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

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

Selecţia multiplă e posibilă prin folosirea atributului multiple.name – ataşează un nume listei.selected – permite selectarea prestabilită a unui element al listei.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 . sau poate fi selectată prin intermediul unei casete de selecţie care e afişată la apăsarea butonului „browse” din formular.Câmpurile destinate introducerii parolelor într-un formular sunt definite de tipul password.value – determină textul care va fi expediat în perechea nume=value. Atributele permise sunt: . Liste de selecţie Listele de selecţie permit alegerea unor elemente dintr-o listă finită. restul fiind afişate prin intermediul barei de derulare ataşate automat. . <html> <head> <title> Exemplu liste selectie </title> </head> <body> <h3> Completati formularul </h3><hr> <form action="mailto:adresa@yahoo. parolele sunt afişate sub forma caracterelor *. . . Tipul image e utilizat pentru a afişa o imagine pe butonul Submit.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>. Adresa URL a fişierului poate fi specificată în atributul value. poate fi tastată într-un câmp de editare al formularului. Tipul file permite transmiterea unui fişier prin intermediul formularului. Spre deosebire de câmpurile de tip text.

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

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

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

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

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

În etapele iniţiale ale proiectării unui site trebuie luate în considerarea navigarea şi machetarea. curate şi de mare calitate. iar textul trebuie întotdeauna să contrasteze cu orice culoare a fundalului. apar restricţii impuse de browser-e asupra spaţiului folosibil. împreună cu interfaţa utilizator. nuanţele de pastel. deoarece pentru a vedea mai multe informaţii se foloseşte în mod natural defilarea în jos.trebuie să fie clar. textului. Contactul – posibilitatea de a lua legătura cu proprietarul sau o persoană de contact prin crearea unei legături mailto pe fiecare pagină. element esenţial al designului. Schemele mai sofisticate necesită de obicei intevenţia unui grafician. se utilizează pentru accentuarea unor zone. Pentru fundal şi pentru elementele minore. Î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. Navigarea – se face prin intermediul butoanelor. concis. 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. Culorile primare roşu. adecvat subiectului. Culorile şi grafica în paginile web Folosirea culorii. Un rol important în focalizarea atenţiei îl reprezintă alegerea culorilor. galben sau albastru – saturate. cu diferite plăci video şi monitoare. constituie o provocare pentru proiectanţii de pagini web. scopul e de a accesa orice informaţie prin maximum 3 click-uri de mouse. Proiectarea pe verticală este ceva mai flexibilă. Conţinutul mesajului (textul) . astfel încât să nu fie forţată apariţia unei bare orizontale pentru defilare. mate. 4. 5. mai există şi problema proiectării pe verticală şi orizontală.2. sunt cea mai bună alegere. parte a 33 . Una din regulile de bază pentru machetarea pe orizontală este să se lucreze cu 600 pixeli pentru lăţimea site-ului. care se găsesc de obicei în natură. 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. imaginilor. De asemenea. 3. Uneori se scanează obiecte reale. Materialele sursă trebuie să fie clare.

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

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

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

37 .

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->