Capitolul 1 ..........................................................................................................................................4 1. Ce este HTML?............................................................................................................................4 2. Coninut i aspect ntr-un document HTML................................................................................4 3. Editorul.........................................................................................................................................5 1. DOCTYPE..................................................................................................................................12 2. . Etichete de structur ................................................................................................................

13 Capitolul 2........................................................................................................................................16 1. Culoarea fundalului....................................................................................................................16 2. Culoarea textului........................................................................................................................16 3. Culoarea legturilor....................................................................................................................17 4. Alegerea culorilor.......................................................................................................................17 Capitolul 3.........................................................................................................................................19 1. Formatarea caracterelor..............................................................................................................19 2. Accentuarea textului...................................................................................................................21 Capitolul 4.........................................................................................................................................25 1. Trecerea la un rnd nou..............................................................................................................25 2. Titlurile (Headings)....................................................................................................................26 3. Paragrafele..................................................................................................................................27 4. Preformatarea textului................................................................................................................28 5. Centrarea textului.......................................................................................................................29 6. Afiarea textului pe o singur linie.............................................................................................30 7. Blocul <DIV>.............................................................................................................................31 8. Linii orizontale...........................................................................................................................31 9. Inserarea unei adrese potale......................................................................................................33 10. Inserarea unui citat...................................................................................................................33 11. Inserarea caracterelor speciale..................................................................................................34 12. Sugestii privind aspectul textului.............................................................................................35 Capitolul 5.........................................................................................................................................37 1. Adresa URL................................................................................................................................37 2. Adrese absolute i adrese relative...............................................................................................37 3. Stabilirea legturilor...................................................................................................................38 4. Ancore - legturi n cadrul aceleiai pagini................................................................................38 5. Legtura ctre o pagin aflat n acelai director (folder)..........................................................40 6. Legtura ctre o pagin localizat n alt director (folder)..........................................................41 7. Legtura ctre pagini externe.....................................................................................................43 8. Alegerea culorilor pentru legturi..............................................................................................43 9. Utilizarea potei electronice (e-mail).........................................................................................44 10. Legturi ctre fiiere oarecare..................................................................................................45 11. Deschiderea paginilor referite printr-o legtur.......................................................................45 12. Crearea unei bare secundare de navigare.................................................................................46 Capitolul 6.........................................................................................................................................48 1. Formatele fiierelor grafice........................................................................................................48 2. Inserarea unei imagini................................................................................................................48 3. Dimensionarea imaginii..............................................................................................................50 4. Alinierea imaginii i a textului...................................................................................................50 5. Imagini folosite ca fond (background) al paginii.......................................................................52 6. Imagini folosite ca legturi.........................................................................................................53 7. Imaginile miniaturale (thumbnails)............................................................................................53 8. Imaginile video...........................................................................................................................54 9. Sunetele......................................................................................................................................56 10. Sugestii privind folosirea imaginilor i elementelor multimedia.............................................57 11. Imaginile i timpul de ncrcare al paginii...............................................................................58 Capitolul 7.........................................................................................................................................59 1. Liste neordonate.........................................................................................................................59

2. Liste ordonate.............................................................................................................................61 3. Imbricarea listelor.......................................................................................................................63 4. Liste de definiii..........................................................................................................................64 Capitolul 8 ......................................................................................................................................66 1. Crearea unui tabel.......................................................................................................................66 2. Alinierea tabelului n pagin......................................................................................................68 3. Dimensionarea unui tabel...........................................................................................................69 4. Spaierea celulelor unui tabel.....................................................................................................71 5. Dimensionarea celulelor unui tabel............................................................................................72 6. Alinierea coninutului unei celule..............................................................................................72 7. Definirea culorilor pentru un tabel.............................................................................................73 8. Titlul unui tabel..........................................................................................................................76 9. Capul de tabel.............................................................................................................................76 10. Tabele de forme oarecare ........................................................................................................77 11. Celule fr coninut..................................................................................................................79 12. Grupuri de coloane...................................................................................................................79 13. Atribute pentru aspectul chenarului unui tabel.........................................................................81 14. Tabele imbricate.......................................................................................................................82 15. Tabele complexe.......................................................................................................................83 16. Recomandri privind folosirea tabelelor..................................................................................86 Capitolul 9.........................................................................................................................................87 1. Documentul de definire a cadrelor ............................................................................................87 2. Cadre imbricate..........................................................................................................................90 3. Controlul aspectului unui cadru..................................................................................................90 4. Bare de derulare..........................................................................................................................91 5. Poziionarea documentului ntr-un cadru...................................................................................92 6. Cadre interne (in-line frames)....................................................................................................93 7. Deschiderea documentelor n alte cadre.....................................................................................94 8. Sugestii privind folosirea cadrelor..............................................................................................97 Capitolul 10.......................................................................................................................................97 1. Ce este un formular?...................................................................................................................97 2. Crearea unui formular.................................................................................................................98 3. Eticheta <INPUT>......................................................................................................................99 4. Etichetele <SELECT> i <OPTION>......................................................................................103 5. Eticheta <TEXTAREA>..........................................................................................................104 6. Validarea datelor......................................................................................................................105 Capitolul 11.....................................................................................................................................107 1. Ce este un stil?..........................................................................................................................107 Tipuri de foi de stiluri...................................................................................................................108 3. Efecte obinute cu ajutorul stilurilor.........................................................................................111 Capitolul 12.....................................................................................................................................115 1. Ce este JavaScript?...................................................................................................................115 2. Cum poate fi inclus un script n pagin?..................................................................................116 3. Modul de execuie al scriptului................................................................................................119 4. Ce se poate face cu JavaScript?................................................................................................120 Capitolul 13.....................................................................................................................................127 1. Ce este un motor de cutare?....................................................................................................127 2. Metatag-uri...............................................................................................................................128 Capitolul 14.....................................................................................................................................133 1. Factori care nu pot fi planificai...............................................................................................133 2. Etapele planificrii site-ului.....................................................................................................135 Capitolul 15.....................................................................................................................................138 1. Principiile designului web........................................................................................................138 2. Organizarea unui site................................................................................................................139

3. Metodologia de construire a site-ului.......................................................................................140 4. Tehnici de design web..............................................................................................................141 5. Greeli de design......................................................................................................................146 Capitolul 16.....................................................................................................................................149 1. Corectarea paginilor.................................................................................................................149 2. Testarea paginilor.....................................................................................................................150 Capitolul 17.....................................................................................................................................153 1. Numele de domeniu..................................................................................................................153 2. Serviciul de gzduire Web (Web hosting)................................................................................154 3. Organizarea i denumirea fiierelor..........................................................................................156 4. Transferul fiierelor..................................................................................................................156

Capitolul 1
1. Ce este HTML?
HTML este o abreviere de la Hypertext Markup Language i reprezint structura oricrei pagini de Web. HTML nu este un limbaj de programare. Nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML este modul n care i comunicam browserului ce elemente dorim s introducem n pagina Web i care este aspectul acestora. HTML nu este un limbaj case-sensitive, adic nu face distincia ntre literele mici i cele mari(majuscule). Aceasta nseamn c indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser. Din acest motiv pe parcursul acestei lucrri vom utiliza o convenie de notaie n care etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru o mai bun difereniere i evideniere a acestora. Desigur c n documentele pe care le scriei putei respecta aceast convenie sau putei scrie cu un singur tip de litere, dup cum v este mai uor. Peste tot n cadrul textului, unde apar etichete, atribute sau valori ale acestora am folosit caractere Courier New pentru a diferenia elementele de limbaj de restul textului. De asemenea, vei observa c, n exemplele prezentate, codul HTML este scris indentat, adic aliniat la diverse nivele. Ca i n cazul etichetelor, acest lucru nu are importan pentru browser. Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uor diversele elemente pe care le includei n document. Totui, dac n cazul etichetelor putei opta pentru orice variant dorii n privina scrierii lor, indentarea este recomandat chiar i programatorilor cu experien. Un cod neindentat este foarte greu de citit i de depanat, n cazul apariiei unor erori.

2. Coninut i aspect ntr-un document HTML

Pentru a realiza documente Web eficiente, cu impact asupra cititorului, i pentru a valorifica pe deplin puterea limbajului HTML, trebuie s inei seama de o idee fundamental: HTML este destinat structurrii documentele i nu doar formatrii n vederea afirii lor. HTML furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de fonturi (tipurile de caractere), de formatare a textului, de culori, etc. Desigur, aspectul formal este important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilor prezentate. Totui, nu aspectul formal, ci coninutul documentului primeaz. HTML conine numeroase ci de structurare a coninutului documentului fr a pune problema felului cum vor fi afiate elementele: titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite n limbajul HTML fr a impune browserului s le afieze ntr-un anumit mod. Browserului i se las astfel posibilitatea de a afia respectivele elemente n conformitate cu rolul pe care l au ele n structura documentului i nu respectnd regulile impuse de creatorul documentului HTML. Marele avantaj al abordrii bazate pe coninut fa de cea bazat pe aspect rezid n faptul c paginile dumneavoastr vor fi vizualizate cu tipuri diferite de browsere, fiecare avnd versiuni diferite.

n abordarea bazat pe aspect, dac browserul nu recunoate indicaiile de formatare specificate, fie nu le execut, fie le execut eronat, astfel c structurarea paginii va avea de suferit. n abordarea bazat pe coninut, indiferent cum va alege browserul s execute indicaiile de formatare, semnificaia elementelor din pagin va rmne neschimbat. De exemplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturi, caractere cu stiluri variate: aldine (bold, sau ngroate), cursive (italice, sau nclinate), subliniate, etc., un browser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care afieaz restul textului, astfel c semnificaia lor n pagin i-ar pierde relevana. Pe de alt parte, dac vei folosi etichetele speciale pentru titluri, chiar daca browserul nu le recunoate, are posibilitatea de a evidenia totui titlurile n cea mai bun manier pe care o are la dispoziie, astfel nct semnificaia lor pentru restul documentului se va pstra.

3. Editorul
Folosirea unui simplu editor de text. Cel mai cunoscut i accesibil este Notepad-ul din Windows. Important! Nu este recomandat s folosii un procesor de text complex cum este Microsoft Word, chiar dac acesta poate salva documentele n format HTML (cu extensia .htm), deoarece la salvarea documentelor Word-ul adaug automat la textul documentului dumneavoastr o mare cantitate de cod coninnd informaii lipsite de relevan care ncarc inutil documentul i mrete dimensiunile fiierului. Folosirea unui editor HTML. Acest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea documentului din punct de vedere sintactic i chiar scriu secvene de cod pentru anumite elemente pe care dorii s le inserai n document. Folosirea unui editor WYSIWYG (What You See Is What You Get, n traducere liber "ceea ce vezi la editare este ceea ce obii la vizualizare"). Un editor de tip WYSIWYG permite alegerea i formatarea, cu ajutorul mouse-ului, a elementelor pe care dorii s le includei n pagin: tabele, link-uri, formulare, putei stabili tipul fonturilor, culorile, aranjarea textului n pagina. Pe msur ce un anumit element este inserat, editorul scrie n mod automat codul HTML corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra lui. Totui, dac avei cunotine de HTML putei interveni la nivelul codului n orice manier dorii, orice schimbare pe care o facei n cod, reflectndu-se automat n aspectul paginii. Printre profesioniti persist o controvers n privina tipurilor de editoare care ar trebui folosite pentru a edita documentele HTML. n esen, problema este aceasta: este mai bine s-i construieti paginile folosind HTML "pur", adic scriind totul tu nsui, sau este de preferat s foloseti un editor de tipul WYSIWYG? Editoare deosebit de puternice de acest tip: Macromedia Dreamweaver, Microsoft Front Page, Coffe Cup ca s dm numai cteva exemple, par a nclina definitiv balana n favoarea acestui tip de editare. Ele ofer facilitai avansate de editare a paginii, inclusiv posibilitatea de a crea pagini dinamice i de a include script-uri JavaScript sau applet-uri Java. Cu ajutorul lor se pot construi site-uri extrem de complexe.

Elemente de baza (taguri). <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare ALINK=culoare BACKGROUND = url <P> <Hn> <Hn> <FONT> </FONT> SIZE=n FACE="a,b" COLOR=s <BR> <PRE> </PRE> <!-- --> Defineste un fisier in format Web Antetul documentului Tilul documentului Corpul paginii HTML Culoarea de fond a paginii Culoarea textului pe paginii Culoarea legaturiilor nevizitate din paginii Culoarea legaturiilor vizitate din paginii Culoarea legaturiilor pe durata clicului exacutat de utilizator Imaginea de fond pentru pagina Paragraf Nivel de subtitlu al documentului (n = 1-6) Specifica atribute ale textului incadrat Dimensiunea textului este 1-7 Specifica fontul: a, daca este disponibil, sau b Culoarea textului: fie un nume de culoare , fie o valoare RGB Linie noua Informatie preformatata Comenatriu HTML

<CENTER> </CENTER> Centreaza materialul in pagina <HR> SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x <A> </A> HREF=url HREF=#nume Name=nume Rigla orizontala Inaltimea riglei in pixeli Latimea riglei in pixeli sau in procente Dezactiveaza afisarea umbrei pentru rigla orizontala Alinierea riglei orizontala in pagina (left, center, right) Culoarea riglei orizontale(numai pentru IE) Marcaj de tip ancora Referinta hipertext Referinta catre o ancora interna Definitia unei ancore interne

Elemente pentru liste . <DD> <DL> </DL> <DT> <LI> <OL TYPE=tip START=x <UL TYPE=forma Descriere definitie Lista de tip definitie Termen de definitie Element de lista Lista ordonata (numerotata) Tipul numerotarii. Valori posibile: A, a, I, i, 1 Numarul de inceput al listei ordonate Lista neordonata (marcata) Forma marcajului. Valori posibile: circle, square, disc.

Elemente pentru formatarea caracterelor . <B> </B> <I> </I> <U> </U> <TT> </TT> <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> <STRONG> </STRONG> <VAR> </VAR> <BASEFONT SIZE = n> Elemente pentru cadre . <FRAMESET> </FRAMESET> COLS=x ROWS=x BORDER=x FRAMEBORDER = x FRAMESPACING = x <FRAME> Definirea redactarii paginii Numarul si marimea relativa a coloanelor Numarul si marimea relativa a liniilor Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0) Specifica marimea chenarului Marimea spatiului dintre doua cadre adiacente Definitia unui anumit cadru Afiseaza text cu caractere aldine Afiseaza text cu caractere cursive Afiseaza text subliniat Text cu font monospatiu Citare bibliogarfica Listing de program Stil logic de evidentiere Text de la tastatura Evidentiere logica puternica Program sau variabila Specifica dimensiunea implicita a fontului din pagina

SRC=url NAME=nume SCROLLING=scrl FRAMEBORDER=x MARGINHEIGHT=x MARGINWIDTH=x <NOFRAMES> </NOFRAMES> <IFRAME> SRC=url NAME=s HEIGHT=x WIDTH=x Elemente pentru tabele. <TABLE> </TABLE> BORDER=x CELLPADDING=x CELLSPACING=x WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR = culoare BORDERCOLORLIGHT = culoare BORDERCOLORDARK = culoare ALIGN=left ALIGN=right HSPACE=x VSPACE=x

URL-ul sursa pentru cadru Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a> Defineste optiunea barei de derulare.Valori posibile: on(activa), off(inactiva), auto (automat) Marimea chenarului din jurul cadrului Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru Spatiu suplimetar la stanga si la dreapta unui anumit cadru Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru Cadru intern (numai pentru (IE) Sursa cadrului Numele ferestrei (util pentru TARGET) Inaltimea cadrului inglobat Latimea cadrului inglobat

Tabel HTML Chenarul tabelului Spatiul suplimentar in cadrul celulelor tabelului Spatiul suplimentar intre celulele tabelului Latimea impusa tabelului Ajustarea fina a tabelului Ajustarea fina a riglelor tabelului Specifica culoarea chenarului tabelului Cea mai deschisa culoare din cele doua culori specificate Cea mai inchisa culoare din cele doua culori specificate Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga Spatiu suplimetar pe orizontala in jurul tabelului Spatiu suplimetar pe verticala in jurul tabelului

COLS=x <COLGROUP> </COLGROUP> <COL WIDTH=x> <THEAD> </THEAD> <BODY> </TBODY> <TR </TR> BGCOLOR=culoare ALIGN=aliniere <TD </TD> BGCOLOR=culoare COLSPAN=x ROWSPAN=x ALIGN=aliniere VALIGN=aliniere BACKGROUND=url NOWRAP ALIGN=baseline ALIGN=caracter ALIGN=justify

Specifica numarul de coloane ale unui tabel Defineste un set de definitii de coloane cu ajutorul marcajului <col> Defineste latimea unei coloane exprimata in pixeli Defineste titlul tabelului Defineste corpul tabelului Linie de tabel Specifica culoarea de fond pentru intreaga linie Alinierea celulelor de pe linia curenta (left, center, right) Celula de date a tabelului Specifica culoarea de fond pentru celula de date Numarul de coloane pe care se intinde celula curenta de date Numarul de linii pe care se intinde celula curenta de date Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) Specifica imaginea de fond pentru celula tabelului Nu permite despartirea textului pe linii in cadrul unei celule Aliniaza celule de date cu linia de baza a textului adiacent Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit este ".") Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text

Elemente pentru adaugarea imaginilor. <IMG SRC=url ALT=text ALIGN=aliniere HEIGHT=x WIDTH=x BORDER=x Marcajul de introducere a imaginilor Sursa fisierului grafic Textul alternativ de afisat, daca este necesar Alinierea imaginii in pagina. Valori posibile: top (sus), middle(in mijloc), bottom (jos), left (in stanga), right (la dreapta) Inaltimea imaginii (in pixeli) Latimea imaginii Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura 9

HSPACE=x VSPACE=x

Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli) Spatiul suplimentar pe verticala din jurul imaginii (in pixeli)

Elemente pentru formulare. <FORM> </FORM> ACTION=url METHOD=metoda <INPUT TYPE=optiune NAME=nume VALUE=valoare CHECKED= optiune SIZE=x SIZE=x <SELECT> </SELECT> NAME=nume SIZE=x MULTIPLE=x <OPTION VALUE=valoare <TEXTAREA> </TEXTAREA> NAME=nume ROWS=x COLS=x <FIELDSET> </FIELDSET> <LEGEND> </LEGEND> ALIGN=s TABINDEX=x Formular HTML activ Programul CGI de pe serverul care receptioneaza datele Modul in care datele sunt transmise serverului(GET sau POST) Camp de text sau alte date de intrare Tipul campului de intrare <INPUT>. Valori posibile: text,password,checkbox,hidden,file, radio,submit,reset,image. Numele simbolic al valorii campului Continutul prestabilit al campului de text Buton/caseta marcata in mod prestabilit Numarul de caractere al unui camp de text Numarul maxim de caractere acceptate Grup de casete de validare Numele simbolic al valorii campului Numarul de articole de meniu care se afiseaza odata (prestabilit=1) Permite selectia unor articole de meniu multiple Alegerea particulara intr-un domeniu <SELECT> Valoarea rezultanta a acestei selectii din meniu Camp de intare de tip text pe linii multiple Numele simbolic al valorii campului Numarul de linii al casetei de text Numarul de coloane (caractere) pe linie al casetei de text Imparte formularul in parti logice Numele asociat setului de campuri (fieldset) Specifica alinierea legendei (explicatiei) afisate (top,bottom,left,right) Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab 10

ACCESKEY=c DISABLED READONLY Elemente avansate. <STYLE> </STYLE> TYPE=val

Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element Elementul este inactiv, dar este afisat pe ecran Elementul este afisat pe ecran dar nu poate fi editat

Specifica informatii referitoare modelul de stiluri Tipul modelului de stiluri. De regula "text/css"

<SCRIPT> </SCRIPT> Include un script de regula Javascript, in pagina Web LANGUAGE=limbaj EVENT=eveniment FOR=numeobiect Caractere speciale romneti Limbajul utilizat Eveniment care declanseaza executia unor scripturi specifice Numele obiectului din pagina asupra caruia actioneaza scriptul

&#259 &#351; &#355 &#238 &#226; &#258 &#350 &#354 &#206 &#194

11

Structura unui document HTML

1. DOCTYPE
Un DOCTYPE descrie un DTD ( document type definition). Pentru ca browserele sa nu aiba probleme la afisarea paginilor s-a introdus declaratia tipului de document care specifica browserului si validatoarelor ce grupe de etichete si atribute foloseste acea pagina si cum trebuie ele interpretate. Tipul de document se declara la inceputul paginii inainte de tag-ul head. Deoarece foarte multa lume nu da atentie acestei declaratii (din diferite motive: unii sunt invatati cu un fel de exprimare, altii nu pot integra un cod care il folosesc incontinuu, etc) pot aparea (si sigur apar) probleme si/sau diferente de afisare a paginii intre diferite browsere.

Versiune HTML 2.0 HTML 3.2

DTD DTD DTD

declaratia DOCTYPE
!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01

Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0

Strict, Transitional, Frameset

XHTML 1.1

DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

12

Pentru a verifica corectitudinea site-ului vostru puteti accesa http://validator.w3.org/. In cazul in care apar erori in raport ori aveti erori de sintaxa ori a-ti folosit tag-uri care nu sunt compatibile cu declaratia de document.

Important !
Introduceti n fiecare pagina instructiunea standard care este recunoscuta de browsere: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

2. . Etichete de structur
Structura general a unui document HTML este urmtoarea: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Documentul este delimitat de etichetele <HTML> </HTML> i este format din : antet (head) - este delimitat de etichetele <HEAD> </HEAD> i conine titlul documentului precum i alte informaii privind documentul. n antetul documentului se mai insereaz i anumite secvene de program (script-uri), care se execut la ncrcarea documentului n browser. corp (body) - care delimiteaz coninutul propriu-zis al documentului i este inclus ntre etichetele <BODY> </BODY> Semnificaia etichetelor care fac parte din structura oricrui document HTML: <HTML> </HTML> ntre aceste etichete este inclus ntregul document HTML. Ele comunic browserului unde ncepe i unde se termin documentul. <HEAD> </HEAD> ntre aceste etichete sunt incluse titlul, precum i alte informaii despre documentul HTML. Aceste elemente, numite metatag-uri sunt deosebit de importante pentru ca pagina s fie ct mai bine cotat de ctre motoarele de cutare. Metatag-urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina Web. Totui, la fel ca ntreg codul HTML al paginii, antetul poate fi vizualizat selectnd din meniul browserului opiunea View > Source. <TITLE> </TITLE> Stabilete titlul documentului HTML. Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de motoarele de cutare pentru indexarea paginii. Prin urmare, strduii-v s gsii un titlu care s descrie ct mai corect i complet coninutul paginii dumneavoastr. 13

Exemplul 1.1 <HTML> <HEAD> <TITLE>Pagina mea Web</TITLE> </HEAD> <BODY> Salut Cneazule! Aici voi pune mai tarziu continutul! </BODY> </HTML> Dac dorii s scriei un text pe mai multe linii n pagin, va trebui s folosii eticheta <BR> (de la line break), care face trecerea pe o linie noua. Eticheta <BR> este de tip empty, deci nu are etichet de nchidere. ncercai exemplul de mai jos, n care afiarea textului documentului se va face pe dou rnduri. Exemplul 1.2 <HTML> <HEAD> <TITLE>Pagina mea Web</TITLE> </HEAD> <BODY> Salut Cneazule! Aici voi pune mai tarziu continutul!.<BR>Urmatoarea va fi cu mult mai cool. </BODY> </HTML>

Important !
Structura documentelor HTML este n realitate mult mai complex, este recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n text pentru a face aceast structur ct mai explicit. Comentariile nu sunt vizibile pentru browser, ele servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului HTML. Comentariile constau n scurte informaii, explicaii la elementele de cod utilizate, etc., fiind deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului. Comentariile se introduc prin includerea textului ntre etichetele de mai jos. <!-- --> Iat dou exemple: <!- - Acesta este un comentariu introdus in pagina Web - -> <!Acesta este un comentariu pe mai multe randuri care ia sfarsit aici --> 3. Folosirea corect a etichetelor

14

Etichetele container se compun, aa cum am vzut mai devreme, din perechi de etichete: etichet de deschidere <TAG> i de nchidere </TAG>. La construirea unei pagini Web complexe vei fi pus adesea n situaia de a folosi mai multe etichete pentru aceeai secven de text. De pild, vei dori s atribuii unui text dou proprieti: litere aldine sau ngroate (bold) i text centrat n pagin. Pentru aceasta va trebui s utilizai dou perechi de etichete, care descriu cele dou proprieti, n mod simultan, metod numit imbricarea etichetelor (nested tags), ca n exemplul de mai jos: <CENTER><B>Text cu aldine si centrat</B></CENTER> Este foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie plasate n mod corect. n aceast situaie, principiul de utilizare este: "Last In - First Out" (LIFO). Acest lucru nseamn c ultima etichet deschis trebuie s fie prima care se nchide.

Important !
Trebuie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul LIFO. n caz contrar, secvena de cod din pagin nu va funciona corect. Iat un exemplu generic de folosire corect a dou etichete: <TAG1><TAG2>Etichete utilizate corect</TAG2></TAG1> i un altul de folosire incorect: <TAG1><TAG2>Etichete utilizate incorect</TAG1></TAG2>

15

Capitolul 2
Culori Culoarea reprezint un caracteristic extrem de important a unei pagini Web. Utilizat cu grij i msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i mai atractiv, iar textul mai uor de parcurs. Pe de alt parte, utilizarea excesiv sau inadecvat a culorilor poate transforma un text de calitate ntr-un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune la a-l mai parcurge. Atributele etichetei <BODY> Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor: bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilor vlink - culoarea linkurilor vizitate alink - culoarea linkului activ

1. Culoarea fundalului
Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei <BODY>, cruia i atribuim o valoare astfel: <BODY bgcolor="#RGB sau nume_culoare"> Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei.

Exemplul 2.1 <HTML> <HEAD> <TITLE>Culoare fundalului</TITLE> </HEAD> <BODY bgcolor="#00FF00"> <H1 align="center">Pagina cu fundal verde</H1><HR> </BODY> </HTML>

2. Culoarea textului
Exemplul 2.2 <HTML> 16

<HEAD> <TITLE>Culoare textului</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#0000FF"> <H1 align="center">Text albastru si rosu</H1> <HR> Textul din aceasta pagina este albastru cu mici <FONT color="#FF0000"> exceptii</FONT> </BODY> </HTML>

3. Culoarea legturilor
Pentru a schimba culorea se folosesc urmtoarele atribute ale etichetei <BODY>: link pentru legturi alink pentru legturile active vlink pentru legturile vizitate conform sintaxei: sintaxei: <BODY link="#RGB sau nume_culoare" alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare"> Documentul din Exemplul 2.3 creeaz o pagin n care textul este negru iar legturile au culoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n exemplu este folosit eticheta <A> i atributul sau href, care vor fi prezentate pe larg n capitolul despre legturi.

Exemplul 2. 3 <HTML> <HEAD> <TITLE>Culoarea legaturilor</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00" vlink="#FF0000"> <H1 align="center">Legaturi colorate</H1> <HR> <A href="culori1.html">Legatura catre primul exemplu</A> </BODY> </HTML>

alink="#0000FF"

4. Alegerea culorilor
Sunt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin Web. Primul i cel mai important este acela de a face coninutul uor de citit. (Litere negre pe fond alb)

17

Dei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr-o pagin Web literele roii pe fond albastru nu arat bine i sunt greu de citit. O alt combinaie nefericit este cea cu fondul negru sau de culoare foarte nchis i textul de culoare alb. n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei. Iat cteva dintre sentimentele pe care le sugereaz culorile: Rou - agresivitate, pasiune, putere, vitalitate Roz - feminitate, inocen, moliciune Portocaliu - amuzament, veselie, cldur, exuberan Galben - sentimente pozitive i cordialitate Verde - linite, sntate, prospeime Albastru - autoritate, demnitate, securitate, ncredere Violet - sofisticare, spiritualitate, mister Maro - utilitate, legtura cu pmntul, bogie Alb - puritate, ncredere, modernitate, rafinament Gri - sobrietate, autoritate, sim practic Negru - seriozitate, distincie, hotrre Alegerea culorilor pentru site trebuie s fie n concordan cu tema site-ului i s sublinieze mesajul su. Astfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele i luminoase, n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sunt potrivite culori sobre i care sugereaz seriozitate i ncredere.

18

Capitolul 3
Fonturi Un font este caracterizat de urmtoarele atribute: culoare (stabilit prin atributul color); tipul sau stilul (stabilit prin atributul face); mrimea (definit prin atributul size); mrimea n puncte tipografice (stabilit prin atributul point-size); grosime (definit prin atributul weight). Toate aceste atribute aprin etichetei, care permite inserarea de blocuri de texte personalizate.

1. Formatarea caracterelor
Eticheta care se folosete pentru a da unui caracter sau unui ir de caractere (unui text) aspectul dorit este eticheta container <FONT> </FONT>. ntre eticheta de nceput i cea de sfrit se insereaz textul sau caracterul ale crui caracteristici dorim s le stabilim.

Tag-uri pentru formate de text :

<b>text</b> <i>text</i> <u>text</u> _text ^text <blink>text</blink> <strike>text</strike> <tt>text<tt

<pre>text</pre>
<em>text</em> <strong>text<strong>

<cite> Citatie </cite> <q> ... </q> <blockquote> ... </blockquote>

Text ingrosat Text inclinat Text subliniat Afisaza textul in pozitia subscript Afiseaza textul in pozitia superscript blink Text taiat Text classic (browser-ul prezinta textul intr-un singur tip de font, indiferent de fontul ales cu atributul FACE, in interiorul elementului FONT Afiseaza textul exact aa cum este, inclusiv spaii Afiseaza de obicei text italic Text accentuat (Browser-ul de obicei arata acest element ca bold) Reprezinta o citatie din document Folosit pentru citate scurte Folosit pentru incadrarea de citate mai lungi, creaza spatiu pentru text

19

Exemplul 3.1 <FONT size="2" color="red" face="arial"> Niciodat nu spune niciodat </FONT> S analizm cele trei atribute ale etichetei <FONT>: size - dimensiunea textului - poate fi un numr ntre 1 i 7 (dimensiuni absolute), ntre -1 i -3 sau ntre +1 i +4 (dimensiuni relative, adic raportate la dimensiunea deja existent a fontului). Dimensiunea prestabilit (default) a fonturilor este 3. Dac dimensiunile menionate depesc intervalul 1-7, browserul rotunjete automat valorile pentru a le ncadra n acest interval. color - culoarea textului - este culoarea cu care va fi afiat textul prezent ntre etichete (n exemplul nostru, " Lumea nu este a celor modeti, ci a celor energici" ). face - tipul de font - determin tipul de font care va fi utilizat la afiarea textului. Tipurile cele mai uzuale sunt: Arial Tahoma Helvetica Times New Roman Courier Verdana Atributul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin virgul. Precizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe calculatorul celui care viziteaz pagina, i se face ca n exemplul de mai jos. <FONT face="arial, verdana, times new roman"> n aceast situaie browserul va alege singur din list primul tip de font pe care l recunoate, ignorndu-le pe urmtoarele. Important! La stabilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au instalate pe computerele lor acelai set de caractere ca i dumneavoastr. Din acest motiv, folosirea unor caractere exotice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalat acel font. Din acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt cele menionate mai sus. n Exemplul 3.2 vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui text. Exemplul 3. 2 <HTML> <HEAD> <TITLE>fonturi1</TITLE> </HEAD> <BODY bgcolor="yellow"> <FONT size="5" face="tahoma" color="green">Manual HTML </FONT><BR> <FONT size="+3" face="arial" color="red">Manual HTML </FONT><BR> <FONT size="-1" face="courier new" color="blue">Manual HTML </FONT>

20

</BODY> </HTML> Exemplul 3. 3 <HTML> <HEAD> <TITLE>fonturi2</TITLE> </HEAD> <BODY bgcolor="white"> <BASEFONT face="arial" color="blue" size="2"> Am ajuns la lectia despre fonturi a <FONT size="4">Manualului HTML</FONT> </BODY> </HTML>

face="arial

black"

color="red"

Caracteristicile textului din pagin au fost setate cu ajutorul etichetei <BASEFONT>. Pentru a afia simultan o parte din text ntr-un mod diferit am folosit eticheta <FONT>. Dei eticheta <BASEFONT> face parte din standardul HTML 3.2, atributele sale nu sunt recunoscute de browserele Netscape. Ca urmare, acesta va afia textul utiliznd propriile setri prestabilite (default), ignornd atributele menionate n eticheta <BASEFONT>. Urmtorul exemplu (Exemplul 3.4) afieaz un cuvnt avnd literele de mrimi diferite Exemplul 3.4 <HTML> <HEAD> <TITLE>fonturi3</TITLE> </HEAD> <BODY bgcolor="white"> <BASEFONT face="arial black" color="red"> <FONT size="4">G</FONT> <FONT size="5">R</FONT> <FONT size="6">A</FONT> <FONT size="7">T</FONT> <FONT size="6">U</FONT> <FONT size="5">I</FONT> <FONT size="4">T</FONT> </BODY> </HTML>

2. Accentuarea textului
a) Eticheta <BIG> </BIG> face fonturile mai mari dect dimensiunea curent. <BIG>Text cu caractere mari</BIG> Text cu caractere mari b) Eticheta <SMALL> </SMALL> face fonturile mai mici dect dimensiunea curent. <SMALL>Text cu caractere mici</SMALL>

21

Text cu caractere mici c) Etichetele <B> </B> (bold) i <STRONG> </STRONG> realizeaz scrierea cu caractere aldine, sau ngroate (bold). <B>Text ingrosat 1</B> Text ingrosat 1 <STRONG>Text ingrosat 2</STRONG> Text ingrosat 2 d) Etichetele <I> </I> (italic) i <EM> </EM> (emphasized) realizeaz scrierea cu caractere italice. <I>Text inclinat 1</I> Text inclinat 1 <EM> Text inclinat 2</EM> Text inclinat 2 e) Etichetele <S> </S> i <STRIKE> </STRIKE> realizeaz scrierea textului tiat de o linie orizontal. <S>Text taiat 1</S> Text taiat 1 <STRIKE>Text taiat 2</STRIKE> Text taiat 2 f) Eticheta <U> </U> (underlined) realizeaz sublinierea textului. <U>Text subliniat</U> Text subliniat

Important !
Utilizarea textului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un link. g) Eticheta <SUP> </SUP> (superscript). Prin intermediul ei se pot insera n document caractere/texte plasate deasupra nivelului liniei de scriere. Apa ingheata la 0 <SUP>0</SUP>C Apa ingheata la 0 0C h) Eticheta <SUB> </SUB> (subscript). Prin intermediul ei se insereaz texte plasate sub nivelul liniei de scriere. Coordonatele X<SUB>1</SUB>, Y<SUB>2</SUB> Coordonatele X1, Y2 22

Este de remarcat faptul c etichetele <BIG> i <SMALL> sunt executate diferit n diverse browsere. Astfel, n Netscape <BIG> face textul mai mare cu un punct iar <SMALL> mai mic cu un punct dect dimensiunea curenta. n Internet Explorer, <BIG> afieaz textul cu fonturi de dimensiune 4 iar <SMALL> cu fonturi de dimensiune 2. Etichetele <BIG> i <SMALL> pot fi repetate pentru a obine un efect mai accentuat. Exemplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete. Exemplul 3. 5 <HTML> <HEAD> <TITLE>fonturi4</TITLE> </HEAD> <BODY> <BASEFONT face="arial" color="blue"> <BIG>Etichete</BIG> care <EM>schimba</EM> aspectul <SMALL>textului</SMALL> </BODY> </HTML> Exemplul 3. 6 <HTML> <HEAD> <TITLE>fonturi 5</TITLE> </HEAD> <BODY> <FONT face="arial" size="5">Acesta este font Arial </FONT><BR> <FONT face="algerian" size="4" color="green">Acesta este font Algerian </FONT><BR> <FONT face="courier" color="blue"><STRONG>Acesta este font Courier </STRONG></FONT><BR> <FONT FACE="vivaldi" size="5" color="gray"><U>Acesta este font Vivaldi </U></FONT><BR> <FONT FACE="garamond"><EM>Acesta este font Garamond </EM></FONT><BR> <FONT FACE="modern" size="7" color="brown"><STRIKE>Acesta este font Modern </STRIKE></FONT><BR> </BODY> </HTML> Exemplul 3. 7 <HTML> <HEAD> <TITLE>Titlu documentului</title> </HEAD> <BODY> <P> < STRIKE > Text taiat </ STRIKE ><BR> <BIG> Prezinta textul intr-un font mare </big><br>

23

<SMALL> Prezinta textul intr-un font mic </SMALLl><BR> <SUB> Afiseaza textul in pozitia subscript </SUP> normal <SUP> Afiseaza textul in pozitia superscript </sup><br> </P> </BODY> </HTML>

Exemplul 3. 8 <HTML> <HEAD> <TITLE>Titlu documentului</title> </HEAD> <BODY> <P><FONT SIZE="+1">O singura marire</FONT>- normal <FORNT SIZE="-1">O singura micsorare</FONT><BR> <B>Bold</B>- <i> Italic </i> - <u> Subliniat </u> <FONT COLORr="#ff0000"> Colorat </FONT><br> <EM>Accentut</em> - <STRONG> Strong </STRONG> <TT>Tele type</TT><br> <CITE>&#169; 1996, Mihnea GEORGESCU</CITE> </BODY> </HTML> Exemplul 3. 9 <HTML> <HEAD> <TITLE>Prietenie</TITLE> </HEAD> <BODY> <P> <Q>Prietenia e un cuvant pe care multi il rostesc,dar putini il inteleg..</Q> <BLOCKQUOTE> Prietenie inseamna sa fii alaturi de prieteni nu cand au dreptate, ci cand gresesc. <BR> Prietenia nu o poti lega in lanturi,insa ea te leaga. <BR> Valoarea unui prieten nu o cunosti decat atunci cand il pierzi!! </BLOCKQUOTE> <CENTER> <ADDRESS>CNEAZU <BR> Romania <BR> Telefon </ADDRESS> </CENTER> </P> </BODY> </HTML>

24

Capitolul 4
Formatarea textului

Etichetele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la felul n care poate fi amplasat un text n cadrul paginii. nainte de a discuta n amnunt despre etichetele care permit formatarea textului, s facem cteva precizri privind felul cum sunt afiate textele. Dup cum tii, fiierele HTML sunt fiiere text. Aceasta nseamn c atunci cnd salvai fiierul respectiv, el este salvat numai ca text, deci browserul nu poate recunoate i executa dect strict acele comenzi prevzute de etichetele HTML. Din acest motiv, trecerea la un rnd nou, care n editorul de text se realizeaz prin apsarea tastei ENTER, nu este recunoscut de browser. Un alt aspect este plasarea n text a spaiilor. Chiar dac vei introduce spaii suplimentare ntre cuvinte atunci cnd scriei documentul HTML n editorul de text, browserul va afia invariabil un singur spaiu ntre dou cuvinte. Acesta este motivul pentru care fiecare dintre aceste elemente de formatare a textului are o etichet proprie care indic browserului cum anume s fac afiarea.

1. Trecerea la un rnd nou

Trecerea la un rnd nou se realizeaz cu ajutorul etichetei <BR> (de la line break). Eticheta <BR> nu este o etichet container. Ea are rolul de a comunica browserului c texul care urmeaz dup etichet va fi afiat pe un rnd nou aa cum rezult din Exemplul 4.1.

Exemplul 4. 1 <HTML> <HEAD> <TITLE>Formatarea textului</TITLE> </HEAD> <BODY> Salut<BR>Ma numesc Mihnea<BR>Invat sa construiesc o pagina Web<BR> </BODY> </HTML>

25

Eticheta <BR> admite atributul clear care poate lua valorile left, right sau all. n mod normal, la ntlnirea etichetei <BR> linia curent de text este ntrerupt i se face trecerea la o linie nou, ca i la acionarea tastei Enter ntr-un editor de text. Exist ns situaii cnd dorim ca linia s fie afiat lng un anumit element (o imagine, sau un tabel, de exemplu) care blocheaz partea din stnga sau din dreapta a liniei. n aceste cazuri putem folosi atributul clear al etichetei <BR> ca n Exemplul 4.2

Exemplul 4. 2 <HTML> <HEAD> <TITLE>text2</TITLE> </HEAD> <BODY> <IMG src="../Imagini/imagine.jpg" align="left"> Acest text va fi afisat intre imagine si marginea dreapta a documentului. <BR clear="left">Acest text va fi afisat sub imagine, aliniat stanga. Intre acest text si dreapta imaginii va exista un spatiu gol. </BODY> </HTML>

2. Titlurile (Headings)
Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Ele sunt etichete container, deci necesit eticheta corespunztoare de nchidere. Eticheta <H1> definete titlul de dimensiunea maxim, iar <H6> pe cel de dimensiune minim.

Important !
Dei standardul HTML nu interzice utilizarea n orice ordine a titlurilor, este de preferat ca acestea s fie folosite n ordinea "normal", progresiv, fr a sri peste vreun nivel (de pild de la H1 direct la H5), pentru a evita eventualele probleme la convertirea textului n alte tipuri de fiiere. n Exemplul 4.3 vom folosi toate cele ase etichete pentru titluri pentru a face o comparaie cu dimensiunea standard a textului.

Exemplul 4. 3

<HTML> <HEAD> <TITLE>Titluri</TITLE> </HEAD>

26

<BODY> <H1>Titlu H1</H1>Text normal <H2>Titlu H2</H2>Text normal <H3>Titlu H3</H3>Text normal <H4>Titlu H4</H4>Text normal <H5>Titlu H5</H5>Text normal <H6>Titlu H6</H6>Text normal </BODY> </HTML>

Exemplul 4. 4 <HTML> <HEAD> <TITLE>Titluri</TITLE> </HEAD> <BODY> <H1 align="center">Titluri</H1><HR> <H1 align="center"> Titlu de marime 1 aliniat in centru </H1> <H2 align="right"> Titlu de marime 2 aliniat la dreapta </H2> <H4> Titlu de marime 4 aliniat la stanga </H4> </BODY> </HTML>

3. Paragrafele
Trecerea la un nou paragraf n cadrul textului se realizeaz cu ajutorul etichetei <P> </P>. Aceast etichet comunic browserului s insereze o linie liber n text i s nceap o nou linie. Eticheta <P> este o etichet container dar prezena etichetei de nchidere </P> este opional n anumite situaii. Dac ea este prezent, indic browserului s insereze o linie liber i dup blocul de text cuprins ntre cele dou etichete. Eticheta <P> admite atributul align cu cele trei valori ale acestuia: left, center i right, care permit alinierea textului la stnga, centrat respectiv la dreapta. Exemplul 4.5 ilustreaz cele trei modaliti de aliniere a textului.

Exemplul 4. 5

<HTML> <HEAD> <TITLE>Paragrafele</TITLE> </HEAD> <BODY>

27

<H1 align="center">Paragrafe</H1><HR> <P> Acesta este un paragraf aliniat la stanga. <P align="right"> Acesta este un paragraf aliniat la dreapta. <P align="center"> Acesta este un paragraf aliniat la centru. </BODY> </HTML> Din Exemplul 4.5 care red aspectul paginii descrise n exemplu se poate observa c alinierea la stnga este implicit (nu mai trebuie specificat align="left"). Se mai poate observa c nu a fost folosit eticheta de nchidere a paragrafelor, deoarece la ntlnirea unei noi etichete <P> vechiul paragraf se consider nchis. Totui, prezena sau absena etichetei de nchidere a paragrafului atunci cnd este prezent atributul align trebuie stabilit cu grij, pentru a nu obine rezultate neconforme cu dorinele dumneavoastr. n Exemplul 4.6 dorim s aliniem un nou paragraf n dreapta paginii, iar textul de pe rndul urmtor paragrafului, care este introdus prin eticheta <BR>, s fie scris normal, de la captul din stnga al paginii Exemplul 4. 6 <HTML> <HEAD> <TITLE>Paragrafele</TITLE> </HEAD> <BODY> <H1 align="center">Paragrafe</H1><HR> Acest text este scris normal, incepand e la marginea din stanga. <P align="right">Acest text este aliniat la dreapta <BR>Unde este afisat acest text? </BODY> <HTML> Din Exemplul 4.6 se poate observa c afiarea nu s-a fcut conform inteniilor noastre. Motivul este faptul c eticheta <P align=right> nu are eticheta de nchidere </P>, i prin urmare efectul su se prelungete pn la ntlnirea unei alte etichete <P>. Dac vei nchide paragraful n mod explicit cu ajutorul etichetei de nchidere, nainte de trecerea la o linie nou, efectul asupra textului va fi cel dorit. Dei aparent etichetele <BR> i <P> au un efect asemntor, i anume trecerea la o linie nou, ele nu sunt executate la fel. <BR> comunic browserului unde se ncheie o linie, n vreme ce <P> i impune s lase o linie liber i s treac la un nou paragraf. Dac folosim atributul align al etichetei <P> n situaiile cnd dup paragraf este introdus un alt element n pagin este recomandat nchiderea n mod explicit a etichetei respective.

4. Preformatarea textului
Aa cum am precizat la nceputul capitolului, atunci cnd editai documentul HTML cu ajutorul unui editor de text, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de text, browserul va afia textul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor n funcie de mrimea ferestrei. Cu alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignorate de ctre browser. Aa cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etichetei <BR> iar inserarea unei linii libere se face cu ajutorul etichetei <P>. 28

Exist, ns, i o etichet care impune browserului s afieze textul ntocmai cum a fost el formatat n documentul HTML. Este vorba despre eticheta <PRE> </PRE>. Eticheta <PRE> permite preformatarea textului i menine spaierea i alinierea textului aa cum a fost fcut n documentul surs HTML. Eticheta de nchidere </PRE> este obligatorie. Exemplul 4.7 ilustreaz modul cum poate fi folosit eticheta <PRE> Testai exemplul folosind eticheta <PRE> iar apoi eliminai-o, pentru a observa mai bine efectul su. Exemplul 4. 7

<HTML> <HEAD> <TITLE>Preformatarea textului</TITLE> </HEAD> <BODY> <H1 align="center">Textul preformatat</H1><HR> Acesta este un text normal <P> Orar: Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 Fizica<P> Acesta este textul de mai sus preformatat <PRE> Orar: Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 Fizica </PRE> </BODY> </HTML>

5. Centrarea textului

29

Aa cum am vzut mai sus, afiarea textului centrat n pagin se poate face cu ajutorul etichetei <P> avnd atributul align setat la valoarea "center". O alt posibilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluznd textul ntre etichetele <CENTER> </CENTER>. Eticheta <CENTER> este o etichet container, prezena etichetei de nchidere fiind obligatorie. Exemplul 4.8 realizeaz centrarea unui text.

Exemplul 4. 8 <HTML> <HEAD> <TITLE>text8</TITLE> </HEAD> <BODY> <H1 align="center">Centrarea textului </H1><HR> <CENTER> Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. </CENTER> </BODY> </HTML>

6. Afiarea textului pe o singur linie

n cazul cnd se dorete afiarea unui text pe o singur linie, chiar dac acest lucru nseamn depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de text ntre etichetele <NOBR> </NOBR>. Aceast etichet mpiedic browserul s limiteze lungimea liniei la dimensiunea ferestrei. Exemplul 4.9 ilustreaz folosirea etichetei <NOBR> Exemplul 4. 9 <HTML> <HEAD> <TITLE>text9</TITLE> </HEAD> <BODY> <H1 align="center">Textul pe o singura linie </H1><HR> <NOBR> Acesta este un text care va fi afisat pe o singura linie, chiar daca depaseste dimensiunile unei ferestre obisnuite. Puteti verifica acest fapt prin reducerea dimensiunilor ferestrei browserului. </NOBR> </BODY> </HTML>

30

7. Blocul <DIV>
O alt modalitate de delimitare i de formatare a unui bloc de text este folosirea etichetei container <DIV> </DIV>. Prezena etichetei de nchidere este obligatorie. Eticheta <DIV> realizeaz divizarea unui document HTML n seciuni distincte, diviziune n care pot fi incluse, pe lng text, i alte elemente: legturi, imagini, formulare. Ca i n cazul etichetei pentru introducerea paragrafelor, eticheta <DIV> admite atributul align, pentru alinierea textului. Valorile posibile ale acestui atribut, deja cunoscute, sunt: left - aliniere la stnga center - aliniere la centru right - aliniere la dreapta Alinierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n blocul <DIV>. Blocul <DIV> admite i atributul nowrap, care interzice ntreruperea rndurilor de ctre browser.

n documentul descris n Exemplul 4.10 este ilustrat utilizarea acestei etichete.

Exemplul 4. 10 <HTML> <HEAD> <TITLE>Blocul DIV</TITLE> </HEAD> <BODY> <H1 align="center">Blocul div</H1><HR> Aceasta linie este o linie de text normala. <DIV align="right"> Aceasta este prima sectiune a textului, aliniata dreapta.<BR> </DIV> <DIV align="center"> Aceasta este a doua sectiune a textului, aliniata central.<BR> </DIV> <DIV align="left"> Aceasta este a treia sectiune a textului, aliniata stanga.<BR> </DIV> </BODY> </HTML>

8. Linii orizontale

31

ntr-o pagina Web pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale paginii sau de a mbunti aspectul ei estetic. Acest lucru se face cu ajutorul etichetei <HR>. Eticheta <HR> nu este o etichet container deci nu exist o etichet de nchidere. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <HR>: align - permite alinierea liniei orizontale. Valorile posibile sunt left, center i right width - specific lungimea liniei - lungimea poate fi stabilit n pixeli sau n procente din limea ecranului. size - specific grosimea liniei, exprimat n pixeli color - permite definirea culorii liniei Atributele etichetei <HR> sunt ilustrate n Exemplul 4.11. Exemplul 4. 11 <HTML> <HEAD> <TITLE>Linii orizontale</TITLE> </HEAD> <BODY> <H1 align="center"> Linii orizontale </H1> Linie aliniata la stanga, lungime 100%, grosime 2 <HR> Linie aliniata in centru , lungime 50%, grosime 5 pixeli. <HR align="center" width="50%" size="5" color="black"> Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12 pixeli , de culoare rosie. <HR align="right" width=150 size=12 color="red"> </BODY> </HTML> n exemplul anterior se poate observa c simpla prezen a etichetei <HR> fr nici un fel de atribute duce la afiarea unei linii predefinite, de lungime egal cu 100% din pagin i grosimea egal cu 2 pixeli. n exemplul 4.12 vom ilustra modul n care eticheta <DIV> aliniaz elementele coninute n interiorul su, n cazul nostru text i linii orizontale.

Exemplul 4. 12 <HTML> <HEAD> <TITLE>Lini orizontale</TITLE> </HEAD> <BODY> <H1 align="center">Linii orizontale</H1><HR> Linia de mai jos este aliniata la stanga <HR size="3" color="blue" width="40%" align="left"> Liniile de mai jos sunt aliniate la centru cu ajutorul blocului DIV <DIV align="center"> Linii aliniate la centru <HR size="10" color="cyan" width="50%"> <HR size="5" color="navy" width="400"> </DIV> 32

</BODY> <HTML>

9. Inserarea unei adrese potale

Dac ntr-o pagin Web trebuie inclus o adres potal, atunci putem folosi eticheta urmtoare: <ADDRESS> </ADDRESS>. Eticheta <ADDRESS> este o etichet logic i are drept efect, n cele mai multe browsere, afiarea textului cu caractere italice. n Exemplul 4.13 este inserat n pagin o adres. Exemplul 4. 13 <HTML> <HEAD> <TITLE>Adresa postala</TITLE> </HEAD> <BODY> <H1 align="center"> Adresa </H1><HR> Adresa firmei noastre este <ADDRESS> GoldenWeb Consult <BR> Str. Paradisului, Nr. 1<BR> Bucuresti </ADDRESS> </BODY> </HTML>

10. Inserarea unui citat

Pentru a insera un citat ntr-un text se pot folosi dou etichete, n funcie de dimensiunea citatului. Astfel, dac citatul depete cteva linii, se folosete eticheta <BLOCKQUOTE> </BLOCKQUOTE>. Efectul acestei etichete este afiarea indentat a textului cuprins ntre eticheta de nceput i cea de sfrit (n majoritatea browserelor) sau afiarea acestuia cu caractere italice (rareori). Dac dorim ca ntr-un text s citam un termen, titlul unei lucrri sau s dm o referin, putem include textul respectiv ntre etichetele <CITE> </CITE>. n cele mai multe dintre browsere, textul inclus ntre etichetele <CITE> va fi afiat cu caractere italice. Exemplul 4.14 ilustreaz modul de folosire al celor dou etichete.

Exemplul 4. 14 <HTML> <HEAD>

33

<TITLE>Inserarea unui citat</TITLE> </HEAD> <BODY> <H1 align="center">Inserarea unui citat</H1><HR> Textul de mai jos este un citat <BLOCKQUOTE> Probabilitatea ca o felie de paine unsa cu unt sa cada pe covor cu fata unsa in jos este direct proportionala cu valoarea covorului </BLOCKQUOTE> Citatul de mai sus face parte din <CITE>Legile lui Murphy</CITE> </BODY> </HTML>

11. Inserarea caracterelor speciale

Dei este impropriu s numim caracterul "blank" sau space un caracter special, avnd n vedere frecvena cu care este folosit, totui acesta, ca i alte caractere, este inserat n pagin cu ajutorul unei comenzi speciale: comanda & (comanda ampersand). Aa cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentul HTML, browserul le va ignora i va afia cuvintele cu un singur spaiu ntre ele. Pentru a fora introducerea spaiilor suplimentare se folosete comanda &nbsp; (no break space).

Important !
Comanda ncepe cu simbolul & (ampersand) i se termin cu ; (punct i virgul). n Exemplul 4.15 este ilustrat modul cum pot fi spaiate cuvintele folosind comanda &nbsp;

Exemplul 4. 15 <HTML> <HEAD> <TITLE>text15</TITLE> </HEAD> <BODY> <H1 align="center">Inserarea caracterelor speciale</H1><HR> <FONT size="2" face="arial"> Cuvintele&nbsp; &nbsp; &nbsp; din&nbsp; &nbsp; &nbsp; acest&nbsp; &nbsp; &nbsp; text&nbsp; &nbsp; &nbsp; sunt&nbsp; &nbsp; &nbsp; despartite&nbsp; &nbsp; &nbsp; de&nbsp; &nbsp; &nbsp; grupuri&nbsp; &nbsp; &nbsp; de&nbsp; &nbsp; &nbsp; trei&nbsp; &nbsp; &nbsp; spatii. </FONT> </BODY> </HTML>

Dup cum observai din Exemplul 4.15 cuvintele sunt desprite prin trei spaii n loc de unul singur. Putei aduga oricte spaii dorii n acest mod. De asemenea, pentru a indenta un text,

34

putei insera la nceputul fiecrei linii numrul de comenzi &nbsp; egal cu numrul de spaii cu care vrei s indentai textul.

Tabel cu comenzile necesare pentru a insera n text cele mai cunoscute caractere:

Denumire caracter Spaiu liber Copyright Trademark Registered Mai dect Mai dect Ampersand Ghilimele Cent Un sfert O jumtate Trei sferturi Grade mare mic

Reprezentarea Comanda grafic HTML &nbsp; < > & " &copy; &#153; &reg; sau &#174; &lt; &gt; &amp; &quot; &#162 &#188 &#189 &#190 &#176

12. Sugestii privind aspectul textului

Aspectul textului ntr-o pagin Web este esenial pentru calitatea acesteia. Un text lizibil, scris cu caractere de dimensiune potrivit, bine organizat i aezat n pagin va face din pagina dumneavoastr un mediu accesibil i prietenos care l va stimula pe vizitatorul acesteia s parcurg cu plcere informaiile oferite. Iat cteva sfaturi referitoare la aspectul paginilor Web, menite s v ajute la crearea unor texte lizibile, ct mai uor de parcurs de ctre cititori.

35

 Nu folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este Times New Roman. Dei este tipul cel mai utilizat pentru publicaiile tiprite, textele scrise cu Times New Roman sunt mai greu de citit de pe monitor. Preferai tipurile Arial, Verdana, Helvetica. Nu folosii numai litere mari (majuscule). Textele scrise cu majuscule sunt mai greu de citit. Nu facei exces de caractere aldine (ngroate, bold). Limitai-v la a accentua cuvinte sau poriuni reduse din text. De asemenea, nu folosii caractere cursive (nclinate, sau italice) n exces. Nu folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. Folosirea unui mare numr de fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu de citit. Folosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aib instalate pe computerul propriu, astfel c textul va fi afiat de browser cu fonturile prestabilite. Nu aranjai textul n pagin pe dou coloane. Aceasta este o practic obinuit n ziare i reviste dar nu este potrivit ntr-o pagin Web deoarece foreaz vizitatorul ca odat ajuns la baza paginii s o deruleze din nou pentru a citi ce-a de-a dou coloan. Este bine s folosii fiecare etichet n scopul pentru care a fost ea definit. Nu folosii etichetele de titlu pentru a accentua anumite pri ale textului care nu sunt titluri. Nu folosii eticheta <ADDRESS> pentru a insera alte texte dect adrese sau eticheta <CITE> pentru a realiza scrierea cu caractere italice a textului. Motoarele de cutare indexeaz paginile Web i n funcie de elementele (etichetele) care sunt incluse n ele iar folosirea lor neadecvat conduce la o indexare eronat a paginii dumneavoastr. Multe motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc o schi a paginii. Dac vei folosi etichetele de titlu pentru a accentua anumite pri ale textului (operaie pe care o putei realiza n mod corect folosind eticheta <FONT>) vei oferi informaii eronate motoarelor de cutare. n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de cei interesai.

Important!
Nu uitai c paginile vor fi publicate pe Web, unde, pentru a-i atinge scopul, adic pentru a fi citite, trebuie mai nti descoperite de cititori, cel mai frecvent prin intermediul motoarelor de cutare.

36

Capitolul 5
Legturi (link-uri) Legturile (link-urile) reprezint, poate, partea cea mai important a unei pagini Web. Ele transform un text obinuit n hypertext - un nou tip de text, diferit de cel din clasicele pagini de carte, care permite trecerea rapid de la o informaie aflat pe un anumit computer la alt informaie memorat pe un alt computer localizat oriunde n lume.

1. Adresa URL
Pentru a stabili o legtur cu o alt pagin (un alt fiier) trebuie s specificm adresa URL a acestuia. URL este un acronim, de la Uniform Resource Locator, i reprezint adresa de identificare a unei resurse (a unui fiier) aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la Internet. O adres URL const dintr-un ir de caractere care identific n mod unic o anumit resurs, oferind informaii despre numele serverului pe care este stocat acea resurs precum i despre localizarea ei. Exist mai multe etichete HTML care folosesc adresa URL drept valoare pentru anumite atribute: etichetele care introduc legturi, imagini sau formulare. Toate acestea folosesc aceeai sintax a adresei URL pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia. Sintaxa general a unei adrese URL este: schema://server_gazda:port/calea_catre_fisier unde: schema - reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi HTTP, FTP, Gopher, Telnet, etc. server_gazda - reprezint identificatorul serverului pe care este gzduit fiierul respectiv. Acest identificator poate fi adresa IP a serverului sau numele su. port - reprezint numrul portului de comunicaie prin intermediul cruia browserul se conecteaz la server. Serverele dein mai multe astfel de porturi, fiecare servind unui alt tip de comunicaie: HTTP, FTP, pot electronic, etc. Portul prestabilit n cazul transferului prin HTTP are numrul 80. Numrul portului trebuie precizat numai n cazul cnd acesta este diferit de 80. calea_catre_fisier - reprezint localizarea ierarhic a fiierului n sistemul de directoare de pe server. Aceasta const ntr-unul sau mai multe nume desprite prin caracterul "/" (slash)

2. Adrese absolute i adrese relative

37

Pentru a putea localiza un fiier n structura ierarhic de directoare, n scopul de a stabili o legtur ctre el, se poate folosi adresarea absolut sau adresarea relativ. Adresa absolut a unui fiier conine calea precis i complet ctre fiierul respectiv pornind de la vrful ierarhiei de directoare: C:/WEBROOT/CULORI/culori.html Fiierul culori.html se afl plasat pe discul C:, n directorul WEBROOT, subdirectorul CULORI. Adresa relativ a unui fiier precizeaz poziia acestuia n raport cu documentul HTML din care este apelat. Vom reveni ceva mai jos asupra acestui subiect.

3. Stabilirea legturilor
Pentru a insera legturi ntr-un document HTML folosim eticheta <A> </A>. Eticheta <A> este o etichet container, prezena etichetei de nchidere fiind obligatorie. Atributul obligatoriu al etichetei <A> este href (Hypertext Reference) care primete ca valoare adresa URL a fiierului cu care dorim s stabilim legtura. Acest fiier poate fi un document HTML, o imagine sau un fiier de alt tip. Documentul HTML n care este prezent legtura se numete surs iar fiierul ctre care este fcut legtura se numete int. Sintaxa etichetei <A> este urmtoarea: <A href="adresa_URL">text sau imagine</A> ntre etichetele <A> i </A> poate fi plasat un text obinuit sau o imagine. n mod prestabilit textul inclus ntre etichetele <A> este afiat subliniat i de culoare albastr iar imaginile au un chenar de culoare albastr. Folosirea etichetei <A> imbricat cu etichete de formatare a textului, fonturi, liste sau tabele se face plasnd eticheta <A> n interiorul acestora. n acest sens, standardul HTML consider incorect o construcie ca aceasta: n funcie de localizarea intei (a resursei referite de legtur) putem clasifica legturile astfel: legturi n cadrul aceleiai pagini (ancore) legturi ctre o pagin aflat n acelai folder legturi ctre o pagin aflat n alt folder legturi ctre pagini externe

4. Ancore - legturi n cadrul aceleiai pagini

Pentru a plasa o ancor sunt necesare dou elemente: 1. Punctul spre care dorim s facem legtura. Acesta se definete insernd n punctul din pagin dorit (de obicei n dreptul unui anumit element din pagin: un titlu, o imagine, o alt legtur, un tabel, etc.) eticheta <A>, nsoit de atributul name care primete ca valoare un nume de identificare atribuit ancorei (de exemplu "nume_ancora" ). Prin urmare, identificarea punctului spre care se face legtura se realizeaz astfel: <A name="nume_ancora"> </A>

38

2. Legtura propriu-zis, care se definete folosind atributul href al etichetei <A>. n exemplul de mai sus, acesta primete ca valoare "#nume_ancora". Stabilirea legturii se realizeaz dup urmtoarea sintax: <A href="#nume_ancora">text explicativ</A> Textul explicativ va fi afiat n mod diferit, n format hyperlink, subliniat i de culoare prestabilit albastr.

Atenie!
Prezena semnului #, plasat naintea numelui ancorei, este obligatorie. Acesta indic browserului faptul c este vorba despre o legtur intern, n cadrul paginii. n cazul n care semnul este omis, browserul va cuta acest nume n afara paginii, unde, evident, nu l va gsi. Pentru a introduce o legtur ctre o ancor definit n alt document (alt pagin) aflat n acelai director, atributul href primete o valoare de forma: href="nume_fisier.html#nume_ancora". Exemplul 5.1 ilustreaz cele dou situaii. Pentru a exemplifica modul n care poate fi inserat o ancor ntr-un alt document i cum poate fi ea referit, am inserat n documentul text14.html ancora <A name="citat">. Exemplul 5. 1 <HTML> <HEAD> <TITLE>legatura1</TITLE> </HEAD> <BODY> <A name="ancora1"></A> <H1 align="center">Ancore definite in acelasi document</H1><HR> <BR>A<BR>B<BR>C<BR>D<BR>E <BR>F<BR>G<BR>H<BR>I<BR>J <BR>K<BR>L<BR>M<BR>N<BR>O <BR>P<BR>R<BR>S<BR>T<BR>U <BR>V<BR>W<BR>Z<BR>X<BR> <A href="#ancora1">Sus</A> <BR><BR> <H1 align="center" >Ancore definite in alt document</H1><HR><P> Click <A href="text1.html#citat">AICI </A> pentru a deschide un document situat in alta pagina </BODY> </HTML> Observaie Construciile de mai jos au acelai rol, i anume inserarea unei ancore denumit "ancora1" n punctul din pagin care conine elementul "ELEMENT".

39

<A name="ancora1">ELEMENT</A> <A name="ancora1"></A>ELEMENT n mod normal, eticheta <A> fiind o etichet container, ntre etichetele de deschidere i de nchidere trebuie s figureze un text. Totui, n exemplul de mai sus, dorind s inserm o ancor n dreptul titlului, am folosit cea de-a doua construcie: <A name="ancora1"></A> <H1 align="center">Ancore definite in acelasi document</H1> Motivul este acela c este considerat o practic incorect includerea etichetelor de titlu ntre etichetele <A> i </A>. Se poate utiliza i construcia urmtoare: <H1 align="center"><A name="ancora1">Ancore definite in acelasi document</A></H1>

5. Legtura ctre o pagin aflat n acelai director (folder)

Pentru a realiza o legtur ctre o pagin aflat n acelai director se procedeaz astfel: <A href="nume_fisier.html">text explicativ</A> unde: href reprezint atributul care stabilete calea ctre inta cu care se face legtura. Dac fiierul int este n acelai director, atributul primete ca valoare chiar numele fiierului. text explicativ - reprezint textul pe care se face click cu mouse-ul pentru a activa legtura. (De exemplu "Click aici" ). Acest text este afiat diferit fa de restul textului - n general, subliniat i de culoare albastr. n Exemplul 6.2 este realizat o legtur reciproc ntre dou pagini aflate n folderul de lucru (webroot). Exemplul 5. 2 <HTML> <HEAD> <TITLE>legatura2</TITLE> </HEAD> <BODY> <H1>Pagina 1 </H1><HR> <A href="legatura3.html">Link catre pagina 2 </A> </BODY> </HTML> Salvai acest exemplu cu numele legatura2.html iar exemplul urmtor (Exemplul 6.3) cu numele legatura3.html. Exemplul 6. 3 <HTML> <HEAD> <TITLE>legatura3</TITLE> </HEAD> <BODY>

40

<H1>Pagina 2 </H1><HR> <A href="legatura2.html">Link catre pagina 1 </A> </BODY> </HTML> La fel cum ai procedat i pn acum, deschidei una dintre cele dou pagini cu browserul i testai funcionarea legturii dintre ele. Ambele documente HTML trebuie salvate n acelai folder. Vei observa c atunci cnd v aflai n Pagina 1 i facei click cu mouse-ul pe textul Link catre Pagina 2 se va deschide cel de-al doilea document HTML i invers, legtura dintre cele dou pagini fiind astfel reciproc.

Atenie!
Numele fiierelor care reprezint valori ale atributului href sunt case sensitive. Acelai lucru se ntmpl i cu textul care desemneaz valorile atributului name. Aceasta nseamn c fiierul legatura5.html este diferit de fiierul legatura5.html, iar ancora <A name="ancora1"> este diferit de <A name="Ancora1"> Pentru a evita greelile, este recomandat s v denumii toate fiierele sau numele pentru ancore cu litere mici.

6. Legtura ctre o pagin localizat n alt director (folder)

Dac pagina cu care vrem s facem legtura se afl pe acelai calculator, dar ntr-un alt folder, atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ sau adresarea absolut. Adresarea absolut se realizeaz preciznd calea (path) complet, pornind de la directorul rdcin, prin care se poate ajunge la fiierul de care vrem s legm pagina. De exemplu, dac fiierul culori1.html se afl pe discul C:,n folderul WEBROOT, n folderul Legaturi, o legtur ctre el se va face n modul urmtor: <A href="C:/WEBROOT/Legaturi/culori1.html>Link</A> Adresarea relativ precizeaz calea ctre documentul cu care facem legtura pornind de la documentul n care ne aflm. Pentru a urca un nivel n structura de directoare se folosete irul de caractere "../ " Schema 5.1

C:
WEBROOT Legaturi Legatura2.html

Imagini Img1.gif

41

Dorim s realizm o legtur cu un fiier numit Img1.gif din folderul Imagini. n acest caz, eticheta <A>, plasat n documentul legaturi2.html, va avea urmtoarea form: <A href="../Imagini/Img1.gif">Deschide imaginea</A> Prin folosirea irului de caractere "../" (punct punct slash) se urc un nivel n ierarhia de directoare, n raport cu directorul curent. Prin urmare, ntruct folderul curent, n care se afl pagina de pornire. C:/WEBROOT /Legaturi, prin utilizarea irului de caractere "../" se ajunge n folderul printe, care este C:/WEBROOT. De aici se continu calea n folderul Imagini, dup care se specific numele fiierului din acest folder cu care vrem s stabilim legtura. Schema 5.2 C:
WEBROOT

HTML

EXEMPLE

LEGATURI

Text2.html

Dorim s stabilim o legtur cu un fiier numit text2.html care se afl n directorul EXEMPLE (directorul printe al folderului nostru, LAGATURI). Atunci referirea se va face astfel: <A href="../text2.html">Link la text</A> Am urcat un nivel n ierarhie ajungnd n directorul EXEMPLE i am specificat numele fiierului cu care dorim s facem legtura. Dac fiierul text2.html se afl cu dou nivele mai sus fa de folderul n care lucrm, adic dac se afl n folderol HTML, atunci adresarea se face astfel: <A href="../../text2.html">Link la text</A> n general, de cte ori este posibil, este de preferat s folosii adresarea relativ, pentru ca documentele HTML s fie portabile (mutarea lor s nu invalideze legturile stabilite ntre diverse documente).

42

7. Legtura ctre pagini externe

O legtur ctre o pagina extern se realizeaz simplu, prin utilizarea etichetei <A> </A>, specificnd adresa URL a paginii ca valoare a atributului href astfel: href="http://URL_pagina" Reamintim c specificarea adresei URL se poate face fie folosind numele serverului pe care este stocat pagina fie adresa IP a acestuia. Evident, pentru ca link-ul s funcioneze, trebuie ca utilizatorul s fie conectat la Internet (lucru valabil pentru toate legturile externe). n Exemplul 6.4 este stabilit o legtur ctre pagina de start Yahoo. Exemplul 5. 4 <HTML> <HEAD> <TITLE>legatura4</TITLE> </HEAD> <BODY> <H1 align="center">Link catre Yahoo.com</H1><HR> <A href="http://www.yahoo.com"> Yahoo!</A> </BODY> </HTML> Un atribut util al etichetei <A> este title. Acesta determin apariia unei mici ferestre (tool tip) n pagina Web cnd mouse-ul se afla pe o legtur, fereastr n care este afiat valoarea dat acestui atribut, care are astfel menirea de a furniza informaii suplimentare despre semnificaia unei legturi Exemplul 5. 5 <HTML> <HEAD> <TITLE>legatura5</TITLE> </HEAD> <BODY> <H1 align="center">Atributul title</H1><HR> <A href="http://www.google.com" title="Legatura catre Google.com">Google</A> </BODY> </HTML>

8. Alegerea culorilor pentru legturi

Am mai discutat despre acest subiect i la capitolul despre culori. n mod prestabilit (default) se utilizeaz trei culori pentru legturi: culoare pentru legturile nevizitate (nu s-a efectuat nici un click pe ele) - albastru culoare pentru legturile vizitate (s-a efectuat cel puin un click pe ele) - violet culoare pentru legturile active (deasupra crora se afl mouse-ul la un moment dat, dar nc nu s-a efectuat click) - rou Pentru a modifica dup preferine aceste culori se folosesc cele trei atribute ale etichetei <BODY>: 43

link pentru legturile nevizitate; vlink pentru legturile vizitate; alink pentru legturile active. Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform codului hexazecimal. Exemplul 5.6 ilustreaz modul cum pot fi modificate culorile legturilor Exemplul 5. 6 <HTML> <HEAD> <TITLE>legatura6</TITLE> </HEAD> <BODY link="yellow" vlink="green" alink="magenta"> <H1 align="center">Setarea culorilor pentru link-uri</H1><HR> <BR>galben pentru legaturi, verde pentru legaturi vizitate si magenta pentru legaturi active<BR> <A href="legatura2.html">Link catre pagina 1 </A><BR> <A href="legatura3.html">Link catre pagina 2 </A> </BODY> </HTML>

9. Utilizarea potei electronice (e-mail)

ntr-o pagin Web se pot afla legturi care permit lansarea n execuie a aplicaiei de expediere a mesajelor electronice a celui care viziteaz pagina. Fcnd click pe textul care nsoete legtura, programul de pota electronic al vizitatorului paginii se va deschide automat, avnd cmpul adresei destinatarului, "To:" deja completat cu adresa de mail specificat n pagin. Pentru a realiza acest lucru se folosete comanda mailto: atributul href primind o valoare ca mai jos: <A href="mailto:adresa_e-mail"> Dac pagina este vizualizat cu browserul Internet Explorer iar vizitatorul are instalat un email manager, cum sunt de pild aplicaiile Microsoft Outlook sau Outlook Expres, activarea legturii va determina deschiderea unuia dintre aceste programe. n cazul n care managerul de email default este de alt tip dect aplicaia Microsoft, (Eudora, de exemplu) aceasta va porni de asemenea automat, cu o nou pagin Send i cu adresa destinatarului pre-completat. Dac pagina este vizualizat n Netscape, se va deschide programul de pot electronic ncorporat n browser. n exemplul urmtor (Exemplul 5.7), n momentul cnd vizitatorul paginii face click pe textul "Trimitei un mesaj", aplicaia de pot electronic este lansat automat, prin intermediul serviciului mailto:, iar cmpul care trebuie completat cu adresa de mail a destinatarului mesajului este de asemenea completat automat cu adresa autor@domeniu.com . Exemplul 5. 7 <HTML> <HEAD> <TITLE>legatura7</TITLE> </HEAD> <BODY>

44

<H1 align="center">Expediere de mesaje electronice </H1><HR> <A href="mailto:autor@domeniu.com" title="adresa mea de mail"> Trimiteti un mesaj </A> </BODY> </HTML>

10. Legturi ctre fiiere oarecare

O pagin Web poate conine legturi nu doar ctre alte fiiere HTML, dar i ctre fiiere de orice alt tip, aflate pe calculatorul propriu sau oriunde pe Web. Ca i n cazul legturilor cu alte pagini (documente HTML) vom folosi eticheta <A> </A>, astfel: <A href="URL_fisier_destinatie">text explicativ<A> Nefiind vorba despre un fiier HTML, browserul nu va putea s l proceseze, astfel c va activa procesul de transfer sau de descrcare (download), urmnd ca, dup transferul integral al fiierului, utilizatorul s l deschid cu un program adecvat. n Exemplul 5.8, atunci cnd se efectueaz click pe legtur se deschide caseta de dialog File download care permite: salvarea fiierului pe disc sau deschiderea fiierului n locaia curent Exemplul 5. 8 <HTML> <HEAD> <TITLE>legatura8</TITLE> </HEAD> <BODY> <H1 align="center">Legaturi catre fisiere oarecare</H1><HR> <A href="html.zip"> Link catre fisierul download.zip </A> </BODY> </HTML>

11. Deschiderea paginilor referite printr-o legtur

Pagina nou, apelat prin activarea unei legturi se poate deschide n dou moduri, n raport cu pagina surs: n aceeai fereastr ntr-o fereastr nou n mod prestabilit, legturile deschid pagina pe care o refer n fereastra curent. Aceasta nseamn c dac vei face click pe un link, noua pagin se va ncrca n locul paginii deja deschise (n aceeai instan a browserului). Pentru a reveni la pagina anterioar trebuie s apsai butonul Back al browserului. Acest comportament se poate schimba cu ajutorul valorilor atributului target, asupra cruia vom reveni la capitolul Cadre.

45

Vom meniona aici doar dou dintre aceste valori, corespunztoare celor dou situaii amintite. Pentru ca pagina apelat s se deschid ntr-o fereastr nou, se utilizeaz sintaxa generic de mai jos, n care atributul target are valoarea "_blank": <A href="adresa_URL" target="_ blank">text explicativ</A> Pentru ca pagina referit s se deschid n aceeai fereastr cu pagina surs, atributului i se asociaz valoarea "_self": <A href="adresa_URL" target="_self">text explicativ</A> Exemplul 5. 9 <HTML> <HEAD> <TITLE>legatura9</TITLE> </HEAD> <BODY> <H1 align="center">Deschiderea paginii in alta fereastra</H1> <HR> Pagina de mai jos se va deschide intr-o fereastra noua <P> <A href="tabel culori.html" target="_blank">Tabelul culorilor</A> </BODY> </HTML>

12. Crearea unei bare secundare de navigare

n foarte multe site-uri ai observat, probabil, existena, n partea de jos a paginii, a unui bloc de text care conine legturi ctre paginile care compun site-ul, legturile fiind delimitate de mici linii verticale, ca n exemplul de mai jos: |Culori| |Fonturi| |Blocuri de text| Utilitatea acestei bare este evident legat de facilitarea navigrii n site, mai ales n cazurile cnd dimensiunea paginii depete un ecran. n acest caz, utilizatorul trebuie s deruleze la citire paginile pe vertical, astfel c link-urile de pe bara de navigare superioar nu mai sunt accesibile. O astfel de bar secundar de navigare se poate realiza procednd ca n Exemplul 5.10. Evident, legturile vor face referire la fiierele HTML dorite de dumneavoastr. Exemplul 5. 10 <HTML> <HEAD> <TITLE>legatura10</TITLE> </HEAD> <BODY> <H1 align="center">Bara de navigare</H1><HR>

46

<H4 align="center"> <A href="culori1.html">|Culori|</A> <A href="fonturi1.html">|Fonturi|</A> <A href="text1.html">|Formatarea textului|</A> </H4> </BODY> </HTML> Bara vertical inserat ntre textele care trimit la paginile respective este de obicei plasat pe tastatur pe aceeai tast cu caracterul "\" (backslash). Dac dorii ca bara s fac parte din textul activ, o vei insera ntre etichetele <A> i </A>, altminteri ea trebuie plasat n afara acestora, astfel: |<A href="culori1.html">Culori</A>|

47

Capitolul 6
Imagini i elemente multimedia Imaginile i elementele multimedia constituie, fr ndoial, o latur interesant i spectaculoas a oricrei pagini de Web. Putei include n paginile dumneavoastr fotografii, imagini animate, sunete sau imagini video. Atunci cnd sunt folosite n mod judicios, aceste elemente pot mbogi coninutul paginilor Web, oferindu-le un aspect atractiv i profesional. Pe de alt parte, folosirea lor n exces poate da paginilor un aspect ncrcat i confuz i poate conduce la mrirea considerabil a timpului de ncrcare al paginii.

1. Formatele fiierelor grafice

Imaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe Web fiind, aa cum era firesc, cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului. Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint Photographic Experts Group) i GIF (Graphics Interchange Format). Formatul GIF Formatul GIF (.gif) este ideal pentru icon-uri, ilustraii i animaie. Acest format utilizeaz o tehnologie special de comprimare care reduce semnificativ dimensiunile fiierelor grafice pentru un transfer mai rapid prin reea Imaginile GIF suport efecte de transparen, ntreesere i animaie, asupra crora vom reveni pe larg n capitolul Elemente avansate de grafic. Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat n paginile Web. Poate fi folosit pentru a include imagini direct n pagini (imagini in-line) precum i pentru a referi imaginile prin intermediul unor legturi externe.Totui, datorit numrului redus de culori, formatul GIF nu este potrivit pentru fotografii sau imagini de calitate nalt. Pentru acest tip de imagini, cel mai adecvat este formatul JPEG. Formatul JPEG Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraii, desene sau imagini de dimensiuni reduse. Algoritmii folosii pentru comprimarea i decomprimarea imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singur nuan. Din acest motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie care folosete un numr redus de culori, formatul GIF este cel mai potrivit.

2. Inserarea unei imagini

Pentru a insera o imagine n cadrul unei pagini (o imagine in-line), se utilizeaz eticheta <IMG> (de la image). Eticheta <IMG> nu este o etichet container, prin urmare nu necesit o etichet corespunztoare de nchidere.

48

Pentru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src (source) al etichetei <IMG>. Atributul src i comunica browserului numele i locaia imaginii care urmeaz s fie inserat. Valoarea acestui atribut este adresa URL a imaginii respective. Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fiierului, inclusiv extensia. <IMG src="imagine.extensie"> Dac imaginea se afla ntr-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absolut fie, preferabil, prin cea relativ. Exemplul 6.1 ilustreaz modul n care se pot insera ntr-o pagin dou imagini, una dintre ele aflndu-se n acelai folder ca i pagina surs, iar cealalt n folderul Imagini. Exemplul 6. 1 <HTML> <HEAD> <TITLE>imagini1</TITLE> </HEAD> <BODY> <H1 align="center">Imagini in pagina</H1><HR> Imagine aflata in acelasi folder<P> <IMG src="imagine1.gif" border="5"><P> Imagine aflata in folderul Imagini<P> <IMG src="../Imagini/omagine2.jpg" border="1" > </BODY> </HTML> n exemplul de mai sus este prezent i atributul border al etichetei <IMG>. Acesta este folosit pentru a plasa un chenar n jurul imaginii. Valoarea atributului border este numrul de pixeli care reprezint grosimea chenarului din jurul imaginii. Absena atributului sau setarea la valoarea "0" face ca acest chenar s nu fie prezent. Un alt atribut util asociat etichetei <IMG> este alt. Acest atribut permite afiarea unui text explicativ n spaiul n care va fi afiat imaginea n pagin. Exemplul 6. 2 <HTML> <HEAD> <TITLE>imagini2</TITLE> </HEAD> <BODY> <H1 align="center"> Atributul alt </H1><HR> Acesta este un...<BR> <IMG src="../Imagini/imagine " alt="JPG"> </BODY> </HTML> Dup cum putei observa din Exemplul 6. 2 imaginea pe care am inclus-o n document nu este afiat. Motivul este c am omis intenionat extensia .gif a fiierului pentru a exemplifica utilitatea atributului alt. Prin urmare, dac dintr-un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai greu, sau este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii va fi afiat textul specificat ca valoare a atributului alt. De asemenea, textul

49

specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici ferestre care se deschide n momentul cnd cursorul mouse-ului este meninut deasupra imaginii. Un alt motiv pentru care este indicat folosirea atributului alt este acela c vizitatorul paginii are posibilitatea de a vedea nc nainte de ncrcarea complet a imaginii ce anume se va afia n zona respectiv. Astfel, el are posibilitatea de a atepta ncrcarea complet a imaginii sau de a trece la alt pagin.

3. Dimensionarea imaginii
Dimensionarea imaginii se realizeaz cu ajutorul atributelor width - prin care se stabilete limea imaginii i height - prin care se stabilete nlimea imaginii. n Exemplul 6.3 sunt precizate i dimensiunile imaginii incluse n document. Se observ c dimensionarea imaginilor se face n pixeli. Este, desigur, posibil, ca dimensionarea s se fac n procente, ca i la liniile orizontale, de exemplu. Totui, n afara unor cazuri speciale, aceasta este considerat o practic greit, deoarece browserul va redimensiona imaginea iar rezultatele vor fi de calitate slab. n Exemplul 6.3 se observ c dimensionarea imaginilor se face n pixeli. Este, desigur, posibil, ca dimensionarea s se fac n procente, ca i la liniile orizontale, de exemplu. Totui, n afara unor cazuri speciale, aceasta este considerat o practic greit, deoarece browserul va redimensiona imaginea iar rezultatele vor fi de calitate slab. Exemplul 6. 3 <HTML> <HEAD> <TITLE>imagini3</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea imaginilor</H1><HR> <IMG src="imagine.gif" width="???" height="???"><P> </BODY> </HTML>

4. Alinierea imaginii i a textului

Alinierea unei imagini n raport cu textul din pagin se realizeaz prin intermediul atributului align, care poate lua urmtoarele valori: left - aliniere la stnga; textul este dispus n partea dreapt a imaginii ncadrnd imaginea right - aliniere la dreapta; textul este dispus n partea stnga a imaginii ncadrnd imaginea top - aliniere deasupra; partea de sus a imaginii se aliniaz cu prima linie a textului ce precede imaginea middle - aliniere la mijloc; mijlocul imaginii se aliniaz cu prima linie a textului ce precede imaginea.

50

 bottom - aliniere dedesubt, la baz; partea de jos a imaginii se aliniaz cu prima linie a textului. Valorile left, right, i bottom ale atributului align permit ca textul s fie dispus n jurul imaginii, n vreme ce top i middle nu permit acest lucru.

Exemplul 6. 4 <HTML> <HEAD> <TITLE>imagini4</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea imaginii si textului (bottom)</H1><HR> <IMG src="../Imagini/imagine.gif" align="bottom" width="100" height="66" alt="???"> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML> ???? numele imaginii Alte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin, sunt atributele hspace i vspace. Ele precizeaz distana, n pixeli, pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagin. n Exemplul 6. 4 vom schimba modul de aliniere n cadrul etichetei <IMG> i vom aduga atributele hspace, respectiv vspace, astfel: <IMG src="../Imagini/imagine.gif" align="left" width="100" height="66" alt="???" vspace="10" hspace="10"> ???? numele imaginii Ai observat, probabil, c dintre valorile pe care le poate lua atributul align lipsete valoarea center. ntr-adevr, alinierea unei imagini la centrul paginii nu se poate face prin intermediul atributului align. Centrarea unei imagini se poate realiza numai dac este izolat de textul care o nconjoar. Pentru aceasta se poate folosi eticheta <CENTER> sau se poate include imaginea ntrun bloc paragraf sau ntr-un bloc <DIV> avnd atributul align setat la valoarea center. Exemplul 6. 5 <HTML> <HEAD> <TITLE>imagini5</TITLE> </HEAD> <BODY> <H1 align="center">Centrarea unui imagini</H1><HR>

51

Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. <DIV align="center"> <IMG src="../Imagini/imagine.gif" width="64" height="64" alt="???"> </DIV> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML> ???? numele imaginii Exemplul 6.6 ilustreaz modul n care pot fi aliniate dou imagini fa de textul din pagin. Putei observa c, dac alinierea la stnga a imaginii mpreun cu folosirea atributelor hspace i vspace conduce la un aspect ordonat al elementelor, aspectul textului n raport cu imaginea aliniat la dreapta depinde de dimensiunea ferestrei browserului. Exemplul 6. 6 <HTML> <HEAD> <TITLE>imagini6</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea a doua imagini</H1><HR> <IMG src="../Imagini/imagine.jpg" align="left" width="200" height="144" align="left" hspace="10" vspace="10"> Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text. <IMG src="../Imagini/imagine.jpg" align="right" width="202" height="132" hspace="10" vspace="10"> Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text. </BODY> </HTML>

5. Imagini folosite ca fond (background) al paginii

O imagine poate fi utilizat i pentru a stabili fondul unei pagini Web. n acest scop se folosete atributul background al etichetei <BODY>, avnd ca valoare adresa URL a imaginii. Imaginea se multiplic aliniat (tiling) pe orizontal i pe vertical pn umple ntregul ecran. Exemplul 6. 7 <HTML> <HEAD> <TITLE>imagini7</TITLE> </HEAD> <BODY background="../Imagini/ silk.jpg"> <H1 align="center">Imaginea ca fond al paginii</H1><HR> Fond de . </BODY> </HTML>

52

6. Imagini folosite ca legturi

Pentru a folosi o imagine drept legtura se procedeaz ca n urmtorul exemplu: <A href=" tabel_culori.html.html"> <IMG src="prism.gif" width="100" height="80" alt="culori"> </A> S-a folosit eticheta <A> prin intermediul creia am creat legtura cu fiierul tabel_culori.html. ntre etichetele <A> i </A> am inclus o imagine care nlocuiete textul explicativ pe care vizitatorul urmeaz s fac click cu mouse-ul. Imaginea servete, deci, ca legtur ctre o anumit pagin. Imaginea folosit ca legtura este prism.gif iar pagina spre care este fcut legtura este tabel_culori.html. n mod prestabilit imaginea utilizat pe post de zon activ este nconjurat de un chenar avnd culoarea unei legturi (albastru). Dac stabilim pentru atributul border al etichetei valoarea "0" acest chenar dispare. Exemplul 6. 8 <HTML> <HEAD> <TITLE>imagini8</TITLE> </HEAD> <BODY> <H1 align="center"> Imagini cu legaturi </H1><HR> <BR>Am pus o imagine cu legatura pe pagina<P> <A href="tabel culori.html"> <IMG src="../Imagini/imagine.gif" width="100" height="80" alt="culori"> </A> </BODY> </HTML>

7. Imaginile miniaturale (thumbnails)

Dac ntr-o pagin Web este necesar afiarea unui numr mare de imagini, ncrcarea paginii se va face destul de greu. De multe ori, vizitatorii paginii nu vor avea rbdarea necesar pentru a atepta ncrcarea integral a paginii. O imagine thumbnail este o versiune de dimensiuni reduse a unei imagini mai mari, care se ncarc mult mai rapid i care, dei este de dimensiuni mici i de calitate sczut, permite vizitatorului s afle ce anume reprezint i s decid dac este interesat sau nu s deschid versiunea integral.. Imaginea miniatural reprezint o legtur spre fiierul cu imaginea original din care provine. n cazul n care vizitatorul paginii dorete s vad imaginea original, o poate deschide efectund click imaginea thumbnail. Realizarea imaginilor miniaturale se poate face fie prin micorarea proporional a imaginilor, fie prin reducerea lor la o dimensiune prestabilit (strech) chiar dac imaginea se distorsioneaz, n cazul n care se dorete, de pild, ca toate thumbnail-urile dintr-o pagin s aib aceleai dimensiuni. Exist dou metode pentru a plasa o imagine thumbnail n pagin: folosind dou imagini, una fiind imaginea thumbnail iar cealalt, imaginea original folosind o singur imagine, redimensionat (micorat) direct n pagin

53

n Exemplul 6.9 este plasat o imagine thumbnail n pagin, folosind prima metod Exemplul 6. 9 <HTML> <HEAD> <TITLE>imagini9</TITLE> </HEAD> <BODY> <H1 align="center">Thumbnails - doua imagini</H1><HR> <P> <A href="../Imagini/zdog.gif"> <IMG src="../Imagini/zdog_th.gif"></A> </BODY> <HTML> Fiierul zdog_th.gif conine imaginea thumbnail care este folosit ca legtur, pentru a referi imaginea original, zdog.gif. Deoarece imaginea thumbnail este folosit ca o legtura ctre imaginea original, n jurul ei este afiat un chenar prestabilit albastru. Dac dorii ca acest chenar s nu mai fie afiat, putei folosi atributul border al etichetei <IMG> setat la valoarea "0". Imaginea original se va deschide n aceeai fereastr cu pagina n care este plasat imaginea thumbnail. Pentru a reveni n pagin, trebuie s apsai butonul Back al browserului. Folosirea unei singure imagini Aceast metod este adesea preferat, deoarece folosete un singur fiier, cel care conine imaginea original, miniaturizarea ei fcndu-se chiar n pagin, cu ajutorul atributelor width i height. Este o metoda mai eficient i mai rapid, deoarece imaginea de dimensiuni mari care urmeaz a fi afiat este deja ncrcat n memoria cache a browserului i este imediat disponibil pentru afiare. n exemplul urmtor Exemplul 6.10 am folosit o singur imagine pentru a ncrca att imaginea thumbnail ct i pe cea cu dimensiunile originale. Exemplul 6. 10 <HTML> <HEAD> <TITLE>imagini10</TITLE> </HEAD> <BODY> <H1 align="center">Thumbnails - o singura imagine</H1><HR> <P> <A href="../Imagini/zdog.gif"> <IMG src="../Imagini/zdog.gif" width="70" height="76"></A> </BODY> <HTML> Dup cum se poate observa, am creat un link (cu ajutorul etichetei <A>) la fiierul zdog.gif care conine imaginea original. Am folosit drept legtur aceeai imagine, dar redimensionat, folosind atributele width i height.

8. Imaginile video

54

Pentru a insera o imagine video ntr-un document HTML se folosesc atributele dynsrc, controls, loop i start ale etichetei <IMG>. Atributul dynsrc nlocuiete atributul src i permite inserarea n documentul HTML a unei imagini video n acelai mod n care este inserat o imagine static. Valoarea atributului dynsrc este adresa URL a fiierului video care va fi inclus n pagin conform sintaxei: <IMG dynsrc="URL_fisier_video"> Acest atribut este o extensie Internet Explorer i nu este recunoscut de browserele Netscape. Pentru a vizualiza o imagine video in-line ntr-un browser Netscape, vizitatorul paginii trebuie s instaleze un program auxiliar de tip plug-in. Dac programul plug-in nu este disponibil pe computerul vizitatorului, imaginea video nu va putea fi afiat. Singurul format de fiiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus n browser. Construcia de mai jos include ntr-un document HTML fiierul video nasa.avi care se afl n folderul Video: <IMG dynsrc="../Video/nasa.avi"> Efectul acestei etichete este deschiderea de ctre browser a unei ferestre de vizualizare n interiorul paginii Web, fereastr n care va rula clipul video nasa.avi, inclusiv sunetul, dac acesta face parte din clip i computerul vizitatorului este setat s redea sunetele. Ca i imaginile obinuite, imaginea video este afiat pe msur ce este ncrcat. Deoarece nici un alt browser n afar de Internet Explorer nu recunoate aceast extensie, este recomandat s includei n cadrul etichetei <IMG> i atributul src prin care s furnizai o imagine static ce va fi afiat n acelai cadru. Browserele care nu recunosc extensia dynsrc vor afia imaginea static pe cnd Internet Explorer va afia imaginea video. Ordinea n care apar cele dou atribute nu are importan. De exemplu: <IMG dynsrc="../Video/nasa.avi" src="../Imagini/avi.jpg"> n mod normal, Internet Explorer red clipul video ntr-o fereastr n care nu sunt afiate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectund click dreapta cu mouse-ul n interiorul ferestrei. Pentru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etichetei <IMG>. Atributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga butoanele de control asemntoare celor de la aparatele video. De exemplu: <IMG dynsrc="../Video/nasa.avi" src="../Imagini/avi.jpg" controls> Clipul video inclus n pagin este redat de browser o singur dat, de la nceput pn la sfrit. Pentru a repeta redarea clipului de un anumit numr de ori este folosit atributul loop. Valorile posibile ale atributului sunt: un numr ntreg care reprezint numrul de reluri ale clipului infinite, caz n care clipul este redat pn cnd utilizatorul stopeaz derularea sa apsnd butonul stop al ferestrei de vizualizare (n cazul cnd fereastra conine butoanele de control) sau efectueaz click dreapta cu mouse-ul n fereastra de vizualizare. Exemplul de mai jos ilustreaz modul n care poate fi setat atributul loop: <IMG dynsrc="../Video/nasa.avi" src="../Imagini/avi.jpgf" controls loop="infinite">

55

Aa cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n pagin. Pentru a schimba acest comportament se folosete atributul start care poate avea valorile: mouseover, situaie n care derularea imaginii video ncepe n momentul cnd mouse-ul este plasat deasupra imaginii fileopen, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup ncrcarea n pagin Cele dou valori pot fi combinate pentru a se realiza redarea imaginii mai nti imediat dup ncrcarea n pagin i apoi de fiecare dat cnd mouse-ul este plasat deasupra ei, ca n exemplul urmtor: <IMG dynsrc="../Video/nasa.avi" start="fileopen, mouseover"> src="../Imagini/avi.jpgf" controls loop="infinite"

Imaginile video in-line pot fi tratate ca i imaginile statice. O astfel de imagine poate fi aliniat folosind atributul align, sau poate fi spaiat fa de textul care o nconjoar. Exemplul 6. 11 <HTML> <HEAD> <TITLE>imagini11</TITLE> </HEAD> <BODY> <H1 align="center">Imagini video</H1><HR> <FONT size="4" color="blue">Clipul video de mai jos face parte din colectia NASA 3</FONT><P> <CENTER> <IMG dynsrc="../Video/nasa.avi" src="../Imagini/avi.jpg" controls start="fileopen, mouseover" loop="infinite"> </CENTER> </BODY> </HTML>

9. Sunetele
Dac eticheta <IMG> permite afiarea unei imagini de fundal, exist i o etichet care realizeaz includerea n pagina Web a unei muzici de fundal i anume eticheta <BGSOUND>. Aceast etichet este, de asemenea, o extensie Internet Explorer deci nu este recunoscut i executat n alte browsere. Browserul Internet Explorer conine un decodor de sunet ncorporat i permite integrarea prin eticheta <BGSOUND> a sunetului de fundal pentru o pagin. Sintaxa etichetei <BGSOUND> este urmtoarea: <BGSOUND src="URL_fisier_sunet" loop="valoare"> Atributul src are drept valoare adresa URL a fiierului de sunet care este folosit ca fundal sonor al paginii. n mod curent, Internet Explorer recunoate trei tipuri de fiiere de sunet: fiiere cu extensia .wav care este formatul nativ pentru PC fiiere cu extensia .au, formatul nativ pentru sistemele UNIX fiiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor 56

Pentru a include ntr-o pagin un fiier de sunet se procedeaz ca n exemplul urmtor: <BGSOUND src="../Sunet/wellcome.wav> Ca i n cazul imaginilor video in-line, fiierul de sunet este redat o singur dat, la ncrcarea paginii. Pentru redarea sa repetat se folosete atributul loop al etichetei <BGSOUND> care poate avea ca valori: un numr ntreg, care reprezint numrul de reluri ale piesei infinite, caz n care piesa muzical este reluat pn cnd utilizatorul prsete pagina sau nchide fereastra browserului. Executai Exemplul 6.12 cu un browser Internet Explorer pentru a observa efectul etichetei <BGSOUND>. Desigur, este necesar s schimbai adresa URL a fiierului de sunet specificnd un fiier existent pe hard-disk-ul dumneavoastr. Exemplul 6. 12 <HTML> <HEAD> <TITLE>Sunete</TITLE> </HEAD> <BODY> <H1 align="center">Muzica de fundal</H1><HR> <P> <FONT size="4" color="red">Muzica se va auzi pana cand veti inchide pagina</FONT> <BGSOUND src="../Sunet/ WindowsXP Start.wav" loop="infinite"> </BODY> </HTML>

10. Sugestii privind folosirea imaginilor i elementelor multimedia

Cnd folosii imagini ntr-o pagin Web, trebuie s v punei ntrebarea: "Este necesar aceast imagine sau ar fi suficient s folosesc text?". Chiar dac se spune c o imagine face ct o mie de cuvinte, acest lucru nu este ntotdeauna adevrat pe Web. nlocuirea textului care conine informaiile eseniale dintr-o pagin Web cu imagini este adesea o greeal. Un prim motiv este c nc mai exist browsere non-grafice cum este Lynx, care nu afieaz dect textul. Apoi, chiar i n browserele grafice, anumii utilizatori ar putea opta, din varii motive, pentru dezactivarea afirii imaginilor. Un alt motiv ar fi acela c, din cauza duratei mari de ncrcare a fiierelor cu imagini de mari dimensiuni, unii utilizatori ar putea renuna pur i simplu la deschiderea paginii. i nu n ultimul rnd, deoarece, spre deosebire de text, imaginile pot ntmpina diverse dificulti tehnice la afiare. Muzica de fundal este de cele mai multe ori nerecomandat. Foarte muli vizitatori pot vizualiza paginile dumneavoastr avnd sunetul dezactivat. Folosirea unei muzici de fundal ncetinete ncrcarea paginii i, n plus, este foarte posibil ca muzica pe care ai ales-o s nu fie pe gustul celor care v viziteaz pagina, ba chiar s i determine s o prseasc nainte de a citi coninutul acesteia. Dac este necesar, totui, s introducei muzic sau sunet n paginile dumneavoastr, este o prevedere neleapt s plasai fiierele de sunet separat i s asigurai legturi ctre acestea astfel nct vizitatorul s le poat audia, dac dorete.

57

11. Imaginile i timpul de ncrcare al paginii

Unul dintre cele mai importante aspecte care trebuie luate n considerare la includerea imaginilor ntr-un document este timpul de ncrcare a documentului. Durata de ncrcare a paginilor depinde de muli factori. Depinde de modemul i conexiunea vizitatorului, de performanele serverului gazd, de trafic, de limea de band, etc. Cum nu putei avea control asupra acestora, singurul lucru care v rmne de fcut este s v construii paginile astfel nct s aib o bun vitez de ncrcare chiar i n cazul unui vizitator care deine o conexiune modest ca performane. Pe lng alegerea cu foarte mult grij a imaginilor care vor fi incluse n document, mai exist cteva modaliti prin care poate fi ameliorat durata de ncrcare a paginii: Optimizarea imaginilor. Folosii-v n mod judicios de instrumentele de control al imaginilor puse la dispoziie de editorul grafic folosit, optimizai dimensiunile imaginii i numrul de culori la ct mai puine posibil. ncercai s gsii un raport optim ntre dimensiunea fiierului i calitatea imaginii. Evitai fotografiile sau imaginile de fundal de dimensiuni foarte mari. Reutilizarea imaginilor. Aceast metod este eficient mai ales n cazul icon-urilor sau elementelor grafice de navigaie care sunt prezente n mai multe pagini pe parcursul unui site. Cele mai multe browsere rein n memoria cache elementele documentelor care urmeaz a fi afiate. Astfel, dac o imagine este utilizat n mai multe pagini aceasta nu trebuie ncrcat de fiecare dat n memorie ci este disponibil pentru a fi afiat oricnd se face referirea la ea. Divizarea documentelor de dimensiuni mari n mai multe documente de dimensiuni reduse. Aceast regul general include i paginile care conin imagini in-line. Mai multe documente de dimensiuni mai mici legate ntre ele prin legturi sunt mai bine acceptate de vizitatori dect un singur document foarte mare care necesit un timp de ncrcare ndelungat. Regula general acceptat este meninerea dimensiunilor unui document Web n jurul valorii de 50Kb, incluznd aici i imaginile, desigur. Folosirea imaginilor thumbnail. Dac pagina conine un mare numr de imagini, folosii imagini miniaturale care s refere imaginile originale. n plus, ntruct imaginea original referit prin imaginea thumbnail se poate deschide ntr-o nou fereastr, nefiind asociat cu restul elementelor din pagin, este mai comod pentru vizitator s o salveze pe computerul propriu pentru o vizualizare ulterioar. Specificarea dimensiunile imaginilor. n acest mod este evitat etapa calculrii de ctre browser a spaiului necesar pentru afiarea imaginii, mbuntindu-se viteza de ncrcare a paginii.

58

Capitolul 7
Listele reprezint unele dintre cele mai obinuite elemente dintr-o pagin Web. Acestea sunt deseori folosite pentru a prezenta informaiile n mod organizat, ntr-o manier accesibil i uor de parcurs. Ele pot fi de trei tipuri: a) liste ordonate (marcate prin numere sau litere), b) liste neordonate (marcate prin cratime, buline sau alte simboluri) c) liste de definiii, afiate fr nici un fel de marcaj. n interiorul etichetelor care delimiteaz o list pot fi folosite orice alte etichete HTML, cum ar fi etichete de formatare a textului, legturi, imagini, etc.

1. Liste neordonate
Exemplul 7. 1 <HTML> <HEAD> <TITLE>Lista 7.1</TITLE> </HEAD> <BODY> <UL>Firma noastr v ofer urmtoarele servicii: <LI>printare <LI>laminare <LI>ndosariere <LI>xerox <LI>tehnoredactare </UL> </BODY> </HTML> Etichetele <UL> i <LI> pot avea definit atributul type care stabilete caracterul afiat n faa fiecrui element al listei. Valorile posibile al acestui atribut sunt: a) circle (cerc) b) disc (disc plin) - valoarea prestabilit c) square (patrat) Lista din Exemplul 7.2 are atributul type setat la valoarea "square". Exemplul 7. 2 59

<HTML> <HEAD> <TITLE>Lista 7.2</TITLE> </HEAD> <BODY> <H1 align="center">Atributul type la liste neordonate</H1><HR> <UL type="square">Limbaje de programare <LI>C <LI>C++ <LI>Pascal <LI> Basic <LI>Perl </UL> </BODY> </HTML> Setarea atributului type pentru un item al listei nlocuiete tipul de marcaj cu tipul specificat pentru acel item. n Figura 7.3 se poate observa efectul setrii atributului type pentru un item individual la listei. Exemplul 7. 3 <HTML> <HEAD> <TITLE>Lista 7.3</TITLE> </HEAD> <BODY> <H1 align="center">Atributul type la itemul unei liste </H1><HR> <UL type="square">Limbaje de programare <LI>C <LI>C++ <LI>Pascal <LI type="circle">Basic <LI>Perl </UL> </BODY> </HTML> Forme particulare de liste neordonate d) Lista de directoare - este o list introdus prin eticheta <DIR> </DIR>. Eticheta a fost iniial utilizat pentru alctuirea listelor de fiiere. Multe browsere nu fac nici o diferen ntre etichetele <DIR> i <UL>, efectul lor fiind acelai. e) Lista de meniuri - utilizeaz eticheta <MENU>. Unele browsere afieaz lista doar n format uor diferit fa de listele neordonate, altele ns folosesc chiar un fel de meniu grafic de tip pull-down pentru afiarea acestor liste.

60

2. Liste ordonate
O list ordonat este un bloc de text delimitat de etichetele <OL> </OL> (ordered list - list ordonat), eticheta de nchidere fiind obligatorie. Fiecare element al listei este iniiat de eticheta <LI> (list item). Ca i n cazul listelor neordonate, lista va fi indentat fa de restul paginii Web i fiecare element al listei va ncepe pe o linie nou. Diferena fa de listele neordonate este aceea c n acest caz marcarea elementelor se face prin cifre, nu prin simboluri. Exemplul 7. 4 <HTML> <HEAD> <TITLE>Lista 7.4</TITLE> </HEAD> <BODY> <OL>Firma noastr v ofer urmtoarele servicii: <LI>printare <LI>laminare <LI>ndosariere <LI>xerox <LI>tehnoredactare </OL> </BODY> </HTML> Pentru a folosi aceste caractere este de ajuns sa utilizam atributul TYPE cu valoarea potrivita. pentru litere mari: <OL TYPE=A>Firma noastr v ofer urmtoarele servicii: Exemplul 7. 5 <HTML> <HEAD> <TITLE>Lista 7.5</TITLE> </HEAD> <BODY> <OL TYPE=A >Firma noastr v ofer urmtoarele servicii: <LI>printare <LI>laminare <LI>ndosariere <LI>xerox <LI>tehnoredactare </OL> </BODY> </HTML> pentru litere mici : <OL TYPE=a>Firma noastr v ofer urmtoarele servicii:

61

Exemplul 7. 6 <HTML> <HEAD> <TITLE>Lista 7.6</TITLE> </HEAD> <BODY> <OL TYPE=a >Firma noastr v ofer urmtoarele servicii: <LI>printare <LI>laminare <LI>ndosariere <LI>xerox <LI>tehnoredactare </OL> </BODY> </HTML> pentru cifre romane mici: <OL TYPE=i>Firma noastr v ofer urmtoarele servicii: Exemplul 7. 7 <HTML> <HEAD> <TITLE>Lista 7.7</TITLE> </HEAD> <BODY> <OL TYPE=i >Firma noastr v ofer urmtoarele servicii: <LI>printare <LI>laminare <LI>ndosariere <LI>xerox <LI>tehnoredactare </OL> </BODY> </HTML> pentru cifre romane mari: <OL TYPE=I>Firma noastr v ofer urmtoarele servicii: Exemplul 7. 8 <HTML> <HEAD> <TITLE>Lista 7.8</TITLE> </HEAD> <BODY> <OL TYPE=I >Firma noastr v ofer urmtoarele servicii: <LI>printare <LI>laminare <LI>ndosariere <LI>xerox <LI>tehnoredactare </OL>

62

</BODY> </HTML> Pe lng atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START. Acest atribut este folosit atunci cand vrem sa schimbam valoarea initiala, de exemplu daca vrem sa incepem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc. Forma generala a acestui atribut este START=n, unde n este un numar natural.

Exemplul 7. 9 <HTML> <HEAD> <TITLE>Lista 7.9</TITLE> </HEAD> <BODY> <OL TYPE=A START=4>n vacana de var am vizitat urmtoarele orae: <LI>Roma <LI>Viena <LI>Londra <LI>Paris <LI>Praga </OL> </BODY> </HTML>

3. Imbricarea listelor
n cadrul unei liste, fie ea ordonat sau neordonat, se pot include alte liste, procedeu numit imbricare. Exemplul 7. 10 <HTML> <HEAD> <TITLE>Lista 7.10</TITLE> </HEAD> <BODY> <H1 align="center">Liste imbricate</H1><HR> <UL> <LI>Bulina 1 <OL> <LI>Numarul 1 <LI>Numarul 2 </OL> <LI>Bulina 2 <LI>Bulina 3 <UL type="square"> <LI>Patrat 1 <LI>Patrat 2 <LI>Patrat 3 </UL> <LI>Bulina 4 </UL>

63

</BODY> </HTML>

4. Liste de definiii
Listele de definiii reprezint un tip special de liste n care elementele listei nu sunt nici numerotate (ca n listele ordonate), nici marcate prin buline (ca n listele neordonate) i care prezint dou nivele de indentare. Listele de definiii sunt blocuri de text incluse ntre etichetele <DL> </DL> (definition list), eticheta de nchidere fiind obligatorie. Fiecare element al listei este introdus prin eticheta <DT> (definition term). Fiecare element introdus prin eticheta <DT> conine la rndul su un numr de elemente care l definesc, introduse prin eticheta <DD> (definition description). Ca i n cazul etichetei <LI>, etichetele de nchidere </DT> i </DD> sunt opionale. Exemplul 7. 11 <HTML> <HEAD> <TITLE>Lista 7.11</TITLE> </HEAD> <BODY> <H1 align="center">Liste de definiii</H1><HR> <DL> <DT>Iarna <DD>Ninge <DD>E frig <DD>Ziua e mai scurt dect noaptea <DT>Primvara <DD>Natura se trezete la via <DD>Infloresc pomii <DD>Se intorc psrile cltoare <DT>Vara <DD>Totul e verde <DD>E foarte cald <DD>Ziua e mai lung dect noaptea <DT>Toamna <DD>Se coc fructele <DD>Se strnge recolta <DD>Cad frunzele </DL> </BODY> </HTML> Etichetele <DL> i </DL> marcheaz nceputul i sfritul listei, termenii care fac parte din list (Iarna, Primvara, Vara, Toamna ) sunt introdui prin eticheta <DT> iar definiiile termenilor, prin etichetele <DD>. Se pot realiza liste ale cror elemente s fie link-uri, imagini sau blocuri de text

64

Exemplul 7.12 <HTML> <HEAD> <TITLE>Lista 7.12</TITLE> </HEAD> <BODY> <H1 align="center">Liste de imagini</H1><HR> <DL> <DT>Flori <DD> <IMG src="../Imagini/rose1.jpg" width="120" height="120"> <DD> <IMG src="../Imagini/orangerose.gif" width="120" height="120"> <DT>Texturi <DD> <IMG src="../Imagini/silk.jpg" width="120" height="120"> <DD> <IMG src="../Imagini/lace.gif" width="120" height="120"> </DL> </BODY> </HTML> Exemplul 7.13 creeaz dou liste imbricate de legturi Exemplul 7.13 <HTML> <HEAD> <TITLE>Lista 7.13</TITLE> </HEAD> <BODY> <H1 align="center">Liste de legaturi</H1><HR> <OL type="I"> <LI>Culori <OL> <LI><A href="culori1.html">Culoarea fundalului</A> <LI><A href="culori2.html">Culoarea textului</A> <LI><A href="culori3.html">Culoarea legaturilor</A> </OL> <LI>Fonturi <OL> <LI><A href="fonturi1.html">Eticheta FONT</A> <LI><A href="fonturi2.html">Eticheta BASEFONT</A> <LI><A href="fonturi4.html">Etichete de accentuare a textului</A> </OL> </OL> </BODY> </HTML>

65

Capitolul 8
Tabelul este un element structural de baz n alctuirea unei pagini Web. Un tabel este o gril dreptunghiular format din linii i coloane. Caseta format la intersecia unei linii cu o coloan se numete celul. Un tabel este o gril dreptunghiular format din linii i coloane. Caseta format la intersecia unei linii cu o coloan se numete celul. O linie a tabelului este format dintr-un ir de celule aliniate pe orizontal, iar o coloan este format dintr-un ir de celule aliniate pe vertical. Celulele tabelului conin date (text, imagini, link-uri), fiecare celul avnd propriile opiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.

1. Crearea unui tabel

Pentru a insera un tabel ntr-un document HTML se folosesc etichetele corespondente
<TABLE> </TABLE>. Eticheta <TABLE> este o etichet container, deci eticheta de final este

obligatorie. Absena ei face ca tabelul s nu fie afiat corect. Pentru a insera o linie ntr-un tabel se folosesc etichetele <TR> </TR> (table row). Folosirea etichetei de nchidere </TR> este opional. Aa cum spuneam, fiecare linie de tabel este format din mai multe celule ce conin date. O celul de date se introduce cu eticheta <TD> </TD> (table data). Eticheta de nchidere </TD> este de asemenea opional. Exemplul 8.1 <HTML> <HEAD> <TITLE>Tabel 8.1</TITLE> </HEAD> <BODY> <H1 align="center">Crearea unui tabel</H1><HR> <TABLE> <TR> <TD>celula 11 <TD>celula 11 <TR> <TD>celula 21 <TD>celula 22 <TR> <TD>celula 31 <TD>celula 32

66

<TR> <TD>celula 41 <TD>celula 42 </TABLE> </BODY> </HTML> n mod prestabilit, un tabel nu are chenar vizibil. Pentru a aduga un chenar unui tabel, se utilizeaz atributul border al etichetei <TABLE>. Acest atribut poate primi ca valoare orice numr ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului. Daca atributul border nu este urmat de o valoare atunci chenarul tabelului va avea o grosime prestabilit egal cu 1 pixel, iar o valoare egal cu 0 a atributului border semnific absena chenarului. Cnd atributul border are o valoare nenul chenarul tabelului are un aspect tridimensional. n Exemplul 8.2 este construit un tabel cu chenar. Pentru a testa funcionarea atributului border, nlocuii n exemplul de mai jos valoarea "4" i cu alte valori. Nu uitai ca dup fiecare modificare s salvai fiierul i s apsai butonul Refresh/Reload al browserului.. Exemplul 8.2 <HTML> <HEAD> <TITLE>Tabel 8.2</TITLE> </HEAD> <BODY> <H1 align="center">Chenarul unui tabel</H1><HR> <TABLE border="4"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 <TR> <TD>celula 31 <TD>celula 32 <TR> <TD>celula 41 <TD>celula 42 </TABLE> </BODY>
</HTML>

Celulele unui tabel pot conine i alte elemente n afar de text: imagini, legturi, formulare, etc. Exemplul 8.3 construiete un tabel cu dou linii i dou coloane, celulele tabelului avnd drept coninut imagini. Exemplul 8.3 <HTML> <HEAD> <TITLE>Tabel 8.3</TITLE>

67

</HEAD> <BODY> <H1 align="center">Tabel care contine imagini</H1><HR> <TABLE border="4"> <TR> <TD><IMG src="../Imagini/donut.gif"> <TD><IMG src="../Imagini/gift.gif"> <TR> <TD><IMG src="../Imagini/invest.gif"> <TD><IMG src="../Imagini/globe.gif"> </TABLE> </BODY> </HTML>

2. Alinierea tabelului n pagin

Pentru a alinia un tabel ntr-o pagina Web se utilizeaz atributul align al etichetei <TABLE>, cu urmtoarele valori posibile:
left (valoarea prestabilit) - textul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea dreapt a tabelului. center - textul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toat limea paginii, imediat sub tabel. right - textul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea stng a tabelului.

Exemplul 8.4 <HTML> <HEAD> <TITLE>Tabel 9.4</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea tabelului in pagina</H1><HR> <TABLE border="3" align="right"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> Acest text este plasat in stanga tabelului </BODY> </HTML> Distana dintre tabel i celelalte elemente din pagina Web poate fi stabilit cu ajutorul atributelor hspace i vspace al etichetei <TABLE>. Valoarea atributului hspace poate fi orice numr pozitiv, inclusiv 0, i reprezint distana pe orizontal dintre tabel i celelalte elemente ale paginii Web. 68

Analog, valoarea atributului vspace reprezint distana pe vertical dintre tabel i celelalte elemente ale paginii. Atributele hspace i vspace sunt recunoscute numai de browserele Netscape.

Exemplul 8.5 ilustreaz utilitatea celor dou atribute.

Exemplul 8.5 <HTML> <HEAD> <TITLE>Tabel 8.5</TITLE> </HEAD> <BODY> <H1 align="center">Spatierea tabelului fata de restul textului </H1><HR> Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli<BR> <TABLE border align="left" vspace="15" hspace="10"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. </BODY>

</HTML>

3. Dimensionarea unui tabel

Dimensiunile unui tabel - limea i nlimea - pot fi stabilite exact prin intermediul atributelor width i height ale etichetei <TABLE>. Valorile acestor atribute pot fi: numere ntregi pozitive reprezentnd limea respectiv nlimea n pixeli a tabelului numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd procente din limea i nlimea total a paginii.

69

Iat un exemplu de tabel cu nlimea de 200 de pixeli i limea egal cu 50% din limea paginii Exemplul 8.6 Exemplul 8.6 <HTML> <HEAD> <TITLE>Tabel 8.6</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea unui tabel</H1><HR> Tabel cu lungimea de 50% din pagina si inaltimea de 200 de pixeli<P> <TABLE border width="50%" height="200"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> </BODY> </HTML> Dimensiunile unui tabel includ i valoarea dat atributului border. De exemplu, un tabel cu o singur linie i o singur coloan, cu dimensiunile width="100", height="50" i avnd atributul border setat la valoarea 10, va avea drept spaiu util 80 de pixeli pe lime i 30 de pixeli pe nlime. Una dintre cele mai frecvente utilizri a tabelelor este poziionarea unui text ntr-o anumit zon a paginii, prin realizarea unui tabel fr chenar (border="0") cu o singur linie i o singur coloan, ca n Exemplul 8.7. Exemplul 8.7 <HTML> <HEAD> <TITLE>Tabel 8.7</TITLE> </HEAD> <BODY> <H1 align="center">Pozitionarea unui text</H1> <TABLE border="0" width="60%" height="100%" align="center"> <TR> <TD> Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. 70

</TABLE> </BODY> </HTML>

4. Spaierea celulelor unui tabel

Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint distana n pixeli dintre dou celule vecine. Valoarea prestabilit a atributului cellspacing este de 2 pixeli. Exemplul 8.8 ilustreaz funcionarea atributului cellspacing. Putei modifica valoarea atributului cellspacing pentru a observa cum se spaiaz celulele n funcie de valorile pe care le dai. Exemplul 8.8 <HTML> <HEAD> <TITLE>Tabel 8.8</TITLE> </HEAD> <BODY> <H1 align="center">Spatierea celulelor</H1><HR> <TABLE border="3" cellspacing="10"> <TR> <TD>Maria <TD>Bogdan <TR> <TD>Alexandru <TD>Irina </TABLE> </BODY> </HTML> Distana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului
cellpadding al etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive, i

reprezint distana n pixeli dintre marginile celulei i coninutul ei. Valoarea prestabilit a atributului cellpadding este 1 pixel. Exemplul 8.9 construiete un tabel n care distana dintre marginea celulelor i coninutul lor este de 20 de pixeli. Exemplul 8.9 <HTML> <HEAD> <TITLE>Tabel 8.9</TITLE> </HEAD> <BODY> <H1 align="center"> Spatierea textului in celule</H1><HR> <TABLE border cellpadding="20"> <TR> 71

<TD>Mihnea <TD>Randu <TR> <TD>Alexandru <TD>Angelo </TABLE> </BODY> </HTML>

5. Dimensionarea celulelor unui tabel.

Dimensiunile unei celule de tip <TD> sau de tip <TH> (vezi mai jos eticheta <TH>) pot fi stabilite exact cu ajutorul a dou atribute ale acestor etichete: width pentru lime i height pentru nlime. Valorile posibile ale acestor atribute sunt:
numere ntregi pozitive (inclusiv 0) reprezentnd dimensiunea n pixeli a limii, respectiv a nlimii unei celule procente din limea , respectiv nlimea tabelului.

n Exemplul 8.10 am dimensionat celula 11 la limea de 20% din limea tabelului i nlimea egal cu 75% din nlimea lui. Dimensionarea individual a unei celule va afecta dimensionarea tuturor celulelor din linia i coloana din care face parte celula respectiv. Se observ c celula 12 are limea egal cu restul de 80% din limea tabelului. Celula 21 aflat pe aceeai coloana cu celula dimensionat are aceleai dimensiuni. Exemplul 8.10 <HTML> <HEAD> <TITLE>Tabel 8.10</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea celulelor</H1><HR> Tabel cu celule dimensionate individual<P> <TABLE border> <TR> <TD width="20%" height="75%">celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> </BODY> </HTML>

6. Alinierea coninutului unei celule

Alinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului align care poate lua valorile:

left - la stnga center - centrat , valoarea prestabilit right - la dreapta

72

Alinierea pe vertical a coninutului unei celule se face cu ajutorul atributului valign care poate lua valorile:

baseline - la baz bottom - jos middle - la mijloc, valoarea prestabilit top - sus

Aceste atribute pot fi ataate att etichetei <TR> pentru a defini alinierea tuturor celulelor unei linii, ct i etichetelor <TD> i <TH> (vezi mai jos eticheta <TH>) pentru a stabili alinierea textului ntr-o singur celul. n Exemplul 8.11 este ilustrat funcionarea atributelor align i valign. Textul din celulele primei, celei de-a doua i celei de-a patra linii a fost aliniat prin atributul align asociat liniei, iar textul din celulele liniei a treia a fost aliniat prin atributul align asociat fiecrei celule n parte. Exemplul 8.11 <HTML> <HEAD> <TITLE>Tabel 8.11</TITLE> </HEAD> <BODY> <H1 align="center"> Alinierea continutului celulelor</H1><HR> <TABLE border width="50%" height="80%"> <TR align="right"> <TD>dreapta <TD>dreapta <TR align="center"> <TD>centru <TD>centru <TR> <TD valign="top">sus <TD valign="bottom">jos <TR align="left"> <TD>stanga <TD>stanga </TABLE> </BODY> </HTML> Dac este prezent un atribut de aliniere ataat etichetei <TR> i pe linia respectiv o anumit celul are propriul su atribut de aliniere, atributul de aliniere asociat etichetei <TD> are prioritate fa de cel asociat etichetei <TR>.

7. Definirea culorilor pentru un tabel

Culoarea de fond a unui tabel se stabilete cu ajutorul atributului bgcolor, care poate fi ataat dup cum urmeaz:
ntregului tabel prin eticheta <TABLE>, unei linii prin eticheta <TR> unei celule de date prin eticheta <TD>

73

Valorile pe care le poate primi atributul bgcolor sunt cele cunoscute pentru culori. Dac ntr-un tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este, n ordine descresctoare, urmtoarea: 1. <TD> 2. <TR> 3. <TABLE> (prioritatea cea mai mica) n Exemplul 8.12 este ilustrat folosirea atributului bgcolor. Exemplul 8.12 <HTML> <HEAD> <TITLE>Tabel 9.12</TITLE> </HEAD> <BODY> <H1 align="center">Culori in tabel</H1><HR> <TABLE border="5" bgcolor="lime"> <TR> <TD>celula 11 verde <TD bgcolor="red">celula 12 rosu <TR bgcolor="blue"> <TD>celula 21 albastru <TD bgcolor="yellow">celula 22 galben <TR bgcolor="cyan"> <TD>celula 31 cyan <TD>celula 32 cyan <TR> <TD>celula 41 verde <TD bgcolor="white">celula 42 alb </TABLE> </BODY> </HTML> Un tabel poate avea drept fundal nu numai o culoare, ci i o imagine. Acest efect se obine folosind atributul background al etichetei <TABLE>, atributul primind ca valoare adresa URL a imaginii. Atributul background poate fi ataat i unei linii, stabilind fundalul tuturor celulelor din linia respectiv precum i unei celule individuale, n acest caz stabilind fundalul acelei celule. Exemplul 8.13 <HTML> <HEAD> <TITLE>Tabel 8.13</TITLE> </HEAD> <BODY> <H1 align="center">Fundalul unui tabel</H1><HR> <TABLE border="5" width="200" height="120" background="../Imagini/lace.gif> <TR> <TD>celula 11 <TD>celula 12 <TR> 74

<TD>celula 21 <TD>celula 22 </TABLE> </BODY> </HTML>

Culorile chenarului unui tabel se pot stabili folosind atributele:

bordercolor - permite stabilirea culorii pentru chenarul unui tabel bordercolorlight - permite stabilirea culorii marginilor din stnga i de sus ale tabelului bordercolordark - permite stabilirea culorii marginilor din dreapta i de jos ale tabelului

Culoarea textului din fiecare celul se poate stabili cu ajutorul expresiei:

<FONT color="#RGB sau nume_culoare">text</FONT>.

Exemplul 8.14 <HTML> <HEAD> <TITLE>Tabel 9.14</TITLE> </HEAD> <BODY> <H1 align="center">Culorile chenarului unui tabel</H1><HR> <TABLE border="10" bordercolordark="blue" bordercolorlight="cyan"> <TR> <TD><FONT color="green">celula 11</FONT> <TD><FONT color="blue">celula 12</FONT> <TD><FONT color="red">celula 13</FONT> <TR> <TD><FONT color="teal">celula 21</FONT> <TD><FONT color="magenta">celula 22</FONT> <TD><FONT color="lime">celula 23</FONT> </TABLE> </BODY> </HTML> Am setat grosimea chenarului tabelului la valoarea de 10 pixeli, pentru a avea un aspect tridimensional mai pronunat. Cu ajutorul atributului bordercolordark am stabilit culoarea prii "umbrite" a chenarului (marginile de jos i din dreapta) iar cu ajutorul atributului bordercolorlight, culoarea prii "luminate" a acestuia (marginile de sus i din stnga) iar textul din celule l-am scris cu culori diferite, folosind eticheta <FONT>. Culorile stabilite pentru chenarul exterior al tabelului sunt folosite i pentru a colora liniile despritoare dintre celulele tabelului. Pentru acestea partea "umbrit" este format din muchiile de sus i din stnga iar partea "luminat" este format din muchiile de jos i din dreapta. Dac dorim s colorm separat muchiile care despart liniile sau celulele tabelului putem asocia atributele bordercolor, bordercolordark i bordercolorlight etichetelor <TR> i <TD>. 75

Atenie! Atributele bordercolor, bordercolordark i bordercolorlight nu sunt recunoscute de browserul Nescape

8. Titlul unui tabel.

Unui tabel i se poate ataa un titlu cu ajutorul etichetei <CAPTION> (table caption=titlu tabel). Aceast etichet trebuie plasat n interiorul etichetelor <TABLE> </TABLE>, dar nu n interiorul etichetelor <TR> sau <TD>. Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <CAPTION> care poate lua una dintre valorile:

bottom - sub tabel top - deasupra tabelului left - deasupra, la stnga tabelului right - deasupra, la dreapta tabelului

Exemplul 8.15 <HTML> <HEAD> <TITLE>Tabel 9.15</TITLE> </HEAD> <BODY> <H1 align="center">Titlul unui tabel</H1><HR> <TABLE border><CAPTION align="top">Masini <TR> <TD>Mercedes <TD>Citroen <TD>Jaguar <TR> <TD>BMW <TD>Volvo <TD>Renault </TABLE> </BODY> </HTML>

9. Capul de tabel.

Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt introduse de eticheta <TH> (tabel header=cap de tabel) n loc de <TD>. Toate atributele care pot fi ataate etichetei <TD> pot fi de asemenea ataate i etichetei <TH>. Coninutul celulelor definite cu <TH> este scris cu caractere aldine i centrat.

76

Exemplul 8.16 ilustreaz modul n care se pot insera celule cu rol de cap de tabel. Putei observa din exemplu c elementele cu rol de cap de tabel pot fi plasate att pe orizontal ct i pe vertical.

Exemplul 8.16 <HTML> <HEAD> <TITLE>Tabel 9.16</TITLE> </HEAD> <BODY> <H1 align="center">Capul de tabel</H1><HR><P> <TABLE border><CAPTION align="bottom">Preturi masini <TR> <TH>Pret <TH>Citroen <TH>Jaguar <TH>BMW <TH>Volvo <TR> <TH>n dolari <TD>5000 <TD>100000 <TD>50000 <TD>80000 <TR> <TH>n lei <TD>5 <TD>100 <TD>50 <TD>80 </TABLE> </BODY> </HTML>

10. Tabele de forme oarecare

Exist situaii cnd dorim ca o celul s se extind peste celulele vecine, pe orizontal sau pe vertical. n acest mod se obine o singur celul cu suprafaa egal cu suma suprafeelor celulelor iniiale. Acest lucru se poate realiza cu ajutorul atributelor colspan i rowspan ale etichetelor <TD> i <TH>. Astfel:
colspan - realizeaz extinderea unei celule peste celulele din dreapta ei. Valoarea atributului

determin numrul de celule care se unific. rowspan - realizeaz extinderea unei celule peste celulele de sub ea. Valoarea atributului determin numrul de celule care se unific.

77

Sunt posibile extinderi simultane ale unei celule pe orizontal i pe vertical. n acest caz, n etichetele <TD> sau <TH> vor fi prezente ambele atribute colspan i rowspan. Exemplul 8.17 ilustreaz modul cum se realizeaz un tabel cu celule unificate.

Exemplul 8.17 <HTML> <HEAD> <TITLE>Tabel 9.17</TITLE> </HEAD> <BODY> <H1 align="center">Tabele cu forma oarecare</H1><HR> <TABLE border> <TR> <TD rowspan="3">celula 11<BR>celula 21<BR>celula 31 <TD>celula 12 <TD colspan="2" rowspan="3">celula 13 , celula 14<BR>celula 23, celula 24<BR>celula 33, celula 34 <TR> <TD>celula 22 <TR> <TD>celula 32 <TR> <TD>celula 41 <TD colspan="3">celula 42, celula 43, celula 44 </TABLE> </BODY> </HTML> Tabelul construit n acest exemplu are 4 linii i 4 coloane. Aa cum se vede n Exemplul 8.17, prin folosirea atributelor colspan i rowspan configuraia tabelului s-a modificat astfel: celula 11 s-a extins n jos peste celulele 21 i 31 (<TD rowspan="3">), celula 12 a rmas nemodificat, celula 13 s-a extins att spre dreapta peste celula 14 ct i n jos, peste celulele 23 i 24 (<TD colspan="2" rowspan="3">). Celulele 22, 32 i 41 au rmas nemodificate iar celula 42 s-a extins spre dreapta peste celulele 43 i 44 (<TD colspan="3">. Etichetelor <TD> i <TH> li se poate ataa atributul nowrap. El interzice ajustarea automat a lungimii unei linii de text, astfel nct n tabel pot aprea coloane cu o lime orict de mare. Un tabel n care este folosit atributul nowrap este cel construit n Exemplul 8.18 Exemplul 8.18 <HTML> <HEAD> <TITLE>Tabel 9.18</TITLE> </HEAD> <BODY> <H1 align="center"> Atributul nowrap</H1><HR> <TABLE border> <TR> 78

<TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD nowrap>celula 22 Textul din aceasta celula este foarte lung </TABLE> </BODY> </HTML>

11. Celule fr coninut

Dac un tabel are celule fr coninut (celule vide), atunci aceste celule vor aprea n tabel fr un chenar de delimitare. n scopul de a afia un chenar pentru celulele vide se poate proceda astfel:
dup eticheta <TD> se adaug &nbsp; dup eticheta <TD> se adaug <BR>

Caracterul &nbsp; (no break space) este, aa cum am vzut la capitolul Formatarea textului, caracterul spaiu. Un spaiu introdus prin intermediul acestui caracter nu va fi ignorat de browser. n Exemplul 8.19 este ilustrat modul n care pot fi create celule fr coninut care s aib totui chenar de delimitare. Dup cum observai din exemplu, celula 23 nu are chenar de delimitare. Celulele de pe a doua linie a tabelului sunt vide dar au chenar deoarece am folosit &nbsp i <BR>. Exemplul 8.19 <HTML> <HEAD> <TITLE>Tabel 9.19</TITLE> </HEAD> <BODY> <H1 align="center">Celule fara continut</H1><HR> <TABLE border> <TR> <TD>celula 11 <TD>celula 12 <TD>celula 13 <TR> <TD>&nbsp; <TD><BR> <TD> </TABLE> </BODY> </HTML>

12. Grupuri de coloane

Etichetele <COLGROUP> </COLGROUP> permit definirea unui grup de coloane n cadrul unui tabel. Atributele acceptate de <COLGROUP> sunt:
span - determin numrul de coloane dintr-un grup width - determin o lime unic pentru coloanele din grup

79

align - determin un tip unic de aliniere pentru coloanele din grup

De exemplu:
<COLGROUP span="3" width="100"></COLGROUP>

Am definit astfel un grup de trei coloane, fiecare avnd limea de 100 de pixeli. ntr-un bloc <COLGROUP>, coloanele pot avea configurri diferite dac se utilizeaz eticheta <COL>, care admite atributele:
span - identific acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci coloanele sunt configurate n ordine. width - determin limea coloanei identificate prin span. align - determin alinierea coninutului coloanei identificate prin span.

Cel mai bine putei nelege funcionarea acestei etichete din Exemplul 8.20. Tabelul din acest exemplu are dimensiunile de 420 de pixeli lime i 200 de pixeli nlime i este format din dou linii i patru coloane. n tabel a fost delimitat un grup de trei coloane (primele trei coloane) prin eticheta <COLGROUP> iar n cadrul acestui grup au fost definite limea i alinierea textului din fiecare coloane n parte. Cea de-a patra coloan a tabelului nu face parte din grupul de coloane. Dup nchiderea etichetei <COLGROUP>, celulele de date au fost introduse n mod normal, cu ajutorul etichetei <TD>. Exemplul 8.20 <HTML> <HEAD> <TITLE>Tabel 9.20</TITLE> </HEAD> <BODY> <H1 align="center">Grupuri de coloane</H1><HR> <TABLE border width="420" height="200"> <COLGROUP> <COL width="60" align="left"> <COL width="120" align="center"> <COL width="180" align="right"> </COLGROUP> <TR> <TD valign="top">celula 11 <TD>celula 12 <TD valign="bottom">celula 13 <TD>celula 14 <TR> <TD>celula 21 <TD>celula 22 <TD>celula 33 <TD>celula 34 </TABLE> </BODY> </HTML>

80

Din exemplu de mai sus se poate observa c n cadrul celulei 11 este respectat alinierea la stnga a textului, deoarece ea a fost setata ca atare prin construcia <COL width="60" align="left">. n plus, n cadrul etichetei <TD> a fost stabilita i alinierea pe verticala a textului din celul, atributul valign primind valoarea "top". n celula 12 nu este setat atributul valign astfel nct textul respect alinierea stabilit prin construcia <COL width="120" align="center">. n celula 13 alinierea pe orizontal a textului este stabilit prin construcia <COL width="180" align="right"> iar alinierea pe vertical este setat n cadrul etichetei <TD> la valoarea "bottom". Din figur se mai observ c toate celulele care fac parte din coloanele incluse n blocul <COLGROUP> respect setrile fcute n cadrul acestui bloc (celulele 21, 22 i 23). Celulele 14 i 24 care formeaz coloana a patra a tabelului neinclus n grupul de coloane, respect atributele de aliniere specificate n cadrul etichetei <TD>, dac exist. Eticheta <COLGROUP> nu este recunoscut de browserele Netscape i prin urmare nici atributele legate de dimensionarea coloanelor i alinierea textului n interiorul lor.

13. Atribute pentru aspectul chenarului unui tabel

Atributul frame Atributul frame al etichetei <TABLE> permite specificarea laturilor din chenarul unui tabel care vor fi vizibile. Valorile posibile ale acestui atribut sunt: void - elimin toate muchiile exterioare ale tabelului above - afieaz o muchie n partea superioar a cadrului tabelului below - afieaz o muchie n partea inferioar a cadrului tabelului hsides - afieaz cte o muchie n partea superioar i inferioar cadrului tabelului vsides - afieaz o muchie n partea din stnga i din dreapta a cadrului tabelului lhs - afieaz o muchie n partea din stnga a cadrului tabelului rhs - afieaz o muchie n partea din dreapta a cadrului tabelului box - afieaz o muchie pe toate laturile cadrului tabelului

Atributul rules Atributul rules al etichetei <TABLE> permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt:

none - elimin toate muchiile interioare ale tabelului rows - afieaz muchii orizontale ntre toate liniile tabelului cols - afieaz muchii verticale ntre toate coloanele tabelului all - afieaz muchii ntre toate liniile i coloanele

Exemplul 8.21 ilustreaz aceste atribute. Atributele frame i rules pot fi combinate i cu atributele de colorare a chenarului i se pot folosi pentru a crea efecte interesante de aliniere n pagin 81

Exemplul 8.21 <HTML> <HEAD> <TITLE>Tabel 9.21</TITLE> </HEAD> <BODY> <H1 align="center">Atributele frame si rules</H1><HR> <TABLE bordercolor="red" width="400" frame="lhs" rules="cols"> <TR> <TD>celula 11 <TD>celula 12 <TD>celula 13 <TR> <TD>celula 21 <TD>celula 22 <TD>celula 23 <TR> <TD>celula 21 <TD>celula 22 <TD>celula 23 </TABLE> </BODY> </HTML>

14. Tabele imbricate

Un tabel poate conine n celulele sale i alte elemente n afar de text, inclusiv un alt tabel, formnd astfel un ansamblu de tabele imbricate. n Exemplul 8.22 vom ilustra modul n care se pot imbrica dou tabele. Exemplul 8.22 <HTML> <HEAD> <TITLE>Tabel 9.22</TITLE> </HEAD> <BODY> <H1 align="center">Imbricarea tabelelor</H1><HR> <TABLE border="5"> <TR> <TD>celula 11 tabelul 1 <TD> <TABLE border> <TR> <TD>celula 11 tabelul 2 <TD>celula 12 tabelul 2 <TR> <TD>celula 21 tabelul 2 <TD>celula 22 tabelul 2 <TR> <TD>celula 31 tabelul 2

82

<TD>celula 32 tabelul 2 </TABLE> <TR> <TD>celula 21 tabelul 1 <TD>celula 22 tabelul 1 </TABLE> </BODY> </HTML> Aa cum se vede din exemplul de mai sustabelul este format din dou linii i dou coloane. n celula 21 a tabelului am inclus un alt tabel, format din trei linii i dou coloane.

15. Tabele complexe

n acest caz trebuie s folosim atributele colspan i rowspan ale elementelor <td>. Celula A a tabelului 1 din imaginea de mai sus este pe prima linie i ocup dou coloane. Celulele B i C se afl pe a doua linie i ocup fiecare cte o coloan (sunt celule de dimensiune normal). n tabelul 2 celula A ocup dou linii i o coloan i se consider c se afl pe prima linie mpreun cu celula B. Celula C, de dimensiune normal, se afl pe a doua linie a tabelului. Pentru a decide cte linii i cte coloane are de fapt un tabel i cte dintre ele sunt ocupate de fiecare celul vom prelungi toate liniile orizontale i verticale din tabel aa cum se vede n imaginea de mai jos:

83

Exemplul 8.23

<HTML> <HEAD> <TITLE>Tabel 8.23</TITLE> </HEAD> <table border="1"> <tr> <!-- linia 1 --> <td rowspan="5"> rowspan 5 </td> <td rowspan="2" colspan="2"> rowspan 2 colspan 2</td> <td> &nbsp; </td> <td rowspan="2" colspan="3"> rowspan 2 colspan 3</td> </tr> <tr> <!-- linia 2 --> <td> &nbsp; </td> </tr> <tr> <!-- linia 3 --> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td> <td colspan="2"> colspan 2 </td> 84

</tr> <tr> <!-- linia 4 --> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp;&nbsp;&nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td> </tr> <tr> <!-- linia 5 --> <td colspan="3"> colspan 3 </td> <td colspan="2"> colspan 2 </td> <td> &nbsp; </td> </tr> <tr> <!-- linia 6 --> <td colspan="7"> colspan 7 </td> </tr> </table> </BODY> </HTML> Exemplul 8.24

<HTML> <HEAD> <TITLE>Tabel 8.24</TITLE> </HEAD> <table border="1" rules="groups" summary="Centralizator al vnzrilor pe semestrele 1 i 2"> <caption>Centralizator vnzri</caption> <colgroup span="2"></colgroup> <colgroup span="3"></colgroup> <colgroup span="3"></colgroup> <thead> <!-- antetul tabelului --> <tr> <th colspan="2">Trimestre</th> <th colspan="3">Trimestrul 1</th> <th colspan="3">Trimestrul 2</th> </tr> <tr> <th colspan="2">Luni</th> <th> Ian </th> <th> Feb </th> <th> Mar </th> <th> Apr </th> <th> Mai </th> <th> Iun </th> </tr> </thead>

85

<tfoot> <!-- subsolul tabelului --> <tr> <th colspan="2"> Total </th> <th> 220 </th> <th> 36 </th> <th> 1041 </th> <th> 31 </th> <th> 54 </th> <th> 455 </th> </tr> </tfoot> <tbody> <!-- primul grup de linii --> <tr> <td rowspan="3">Cat. 1</td> <td>Produs 1</td> <td> 10 </td> <td> 20 </td> <td> 30 </td> <td> 10 </td> <td> 20 </td> <td> 30 </td> </tr> <tr> <td>Produs 2</td> <td> 5 </td> <td> 7 </td> <td> 2 </td> <td> 4 </td> <td> 9 </td> <td> 8 </td> </tr> <tr> <td>Produs 3</td> <td> 200 </td> <td> 2 </td> <td> 1000 </td> <td> 4 </td> <td> 10 </td> <td> 400 </td> </tr> </tbody> <tbody> <!-- al doilea grup de linii --> <tr> <td rowspan="2">Cat. 2</td> <td>Produs 4</td> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> </tr> <tr> <td>Produs 5</td> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 8 </td> <td> 9 </td> <td> 10 </td> </tr> </tbody> </table> </BODY> </HTML>

16. Recomandri privind folosirea tabelelor

Tabelele se numr printre cele mai folosite elemente ntr-o pagin Web. Ele reprezint un instrument practic indispensabil pentru definirea aspectului paginii, ntruct permit alinierea corect a elementelor din pagin: text, imagini, legturi, etc. n interiorul unui tabel se pot include i alte tabele, n funcie de necesiti, formnd o reea de tabele imbricate. Singura precauie pe care trebuie s o avei n vedere cnd folosii tabele n paginile dumneavoastr este cea legat de etichetele i atributele specifice unui anumit tip de browser. Aa dup cum ai observat din exemplele prezentate, aspectul paginilor poate s difere simitor de la un tip de browser la altul, atunci cnd un anumit element nu este recunoscut. Dac vei considera c aspectul tabelelor

86

este esenial pentru paginile site-ului, este recomandat s v limitai la etichetele standard, recunoscute de toate browserele.

Capitolul 9
Cadre (frames)
O modalitate de structurare avansat a unui document HTML este mprirea ferestrei browserului n mai multe ferestre distincte, denumite cadre (frames). Aceast facilitate permite afiarea simultan, n aceeai fereastr a browserului, a dou sau mai multe documente HTML diferite, cte unul n fiecare cadru. Pentru a realiza acest lucru sunt necesare urmtoarele: un document de definire a cadrelor care conine etichetele care stabilesc numrul, dimensiunile i aezarea cadrelor n pagin cte un fiier HTML pentru fiecare cadru n parte, prin care se stabilete coninutul cadrului respectiv. De exemplu, o pagin Web care conine dou cadre va fi definit prin trei documente HTML: documentul de definire a cadrelor, care specific dimensiunile i aezarea cadrelor n pagin; cele dou documente care descriu coninutul fiecrui cadru n parte. n esen, cadrele fac posibil afiarea n fereastra browserului a mai multe pagini, simultan.

1. Documentul de definire a cadrelor

n cadrul documentului de definire a cadrelor, blocul <BODY> </BODY> este nlocuit de blocul <FRAMESET> </FRAMESET>. n acest tip de document blocul <BODY> nu mai este folosit. n interiorul blocului <FRAMESET>, fiecare cadru este introdus prin eticheta <FRAME>. Definirea documentului ce va fi afiat ntr-un cadru se face prin atributul src (source). Acesta este un atribut obligatoriu al etichetei <FRAME>, i primete ca valoare adresa URL a documentului HTML care va fi ncrcat n acel cadru.

87

Definirea cadrelor se face prin mprirea ferestrelor n linii i coloane: mprirea unei ferestre ntr-un numr de cadre de tip coloan se face cu ajutorul atributului cols al etichetei <FRAMESET> ce descrie acea fereastr; mprirea unei ferestre n cadre de tip linie se face cu ajutorul atributului rows al etichetei <FRAMESET> care descrie fereastra. Valorile atributelor cols si rows sunt liste de elemente separate prin virgul care descriu modul n care se face mprirea ferestrei. Valorile acestor atribute pot fi exprimate n mai multe moduri: n pixeli n care caz valoarea este un numr ntreg n procente din dimensiunea ferestrei (un numr cuprins ntre 1 i 99, urmat de simbolul %) n dimensiuni relative, n*. Simbolul n* semnific faptul c linia sau coloana astfel definit ocup a n-a parte din spaiul rmas dup dispunerea n fereastr a liniilor, respectiv coloanelor precedente (vezi exemplele de mai jos).

Exemplul 1: cols="200 , * , 50% , * Aceast construcie descrie o mprire n patru cadre de tip coloan, dintre care prima are 200 pixeli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a patra ocup n mod egal restul de spaiu rmas disponibil. Exemplul 2: rows="200 , 50% , 1* , 2* " n acest exemplu, pagina este mprit n patru cadre de tip linie, dintre care prima are 200 pixeli, a doua ocup jumtate din spaiul total disponibil iar a treia i a patra ocup restul de spaiu rmas disponibil, care se mparte n trei pri egale, al treilea cadru ocupnd o parte, iar al patrulea ocupnd dou pri. Observaii dac mai multe elemente din list sunt configurate cu * , atunci spaiul disponibil rmas pentru ele se va mpri n mod egal. n cadrul unui bloc <FRAMESET> poate fi inclus un cadru prin eticheta <FRAME> sau un alt bloc <FRAMESET> obinndu-se astfel cadre imbricate. n majoritatea exemplelor care vor urma am folosit ca URL-uri pentru documentele pe care le conin cadrele, pagini deja construite n capitolele anterioare. Dac ai salvat documentele HTML cu numele specificate n eticheta <TITLE> putei verifica direct exemplele care vor urma. Dac preferai s ncrcai n cadrele descrise n exemplele urmtoare alte documente, va trebui s facei modificrile necesare specificnd numele acestor fiiere.

88

Exemplul 9.1 mparte pagina n dou cadre verticale, fiecare ocupnd jumtate din pagin. Exemplul 9. 1 <HTML> <HEAD> <TITLE>Cadre 9.1</TITLE> </HEAD> <FRAMESET cols="*, *"> <FRAME src="liste1.html"> <FRAME src="liste4.html"> </FRAMESET> </HTML>

n Exemplul 9.2 este creat o pagina Web cu trei cadre orizontale. Primul cadru are 100 de pixeli, al treilea ocup 30% din fereastra browserului, iar al doilea ocup restul spaiului. Exemplul 9. 2 <HTML> <HEAD> <TITLE>Cadre 9.2</TITLE> </HEAD> <FRAMESET rows="100 , * , 30%"> <FRAME src="liste1.html"> <FRAME src="liste2.html"> <FRAME src="liste3.html"> </FRAMESET> </HTML> Exemplul 9.3 creaz o matrice ptrat de 4 cadre (2 x 2). Pentru a realiza acest lucru, se folosesc simultan cele dou atribute cols i rows. Exemplul 9. 3 <HTML> <HEAD> <TITLE>Cadre 10.3</TITLE> </HEAD> <FRAMESET rows="*, *" cols="*, *"> <FRAME src="tabele1.html"> <FRAME src="tabele2.html"> <FRAME src="tabele4.html"> <FRAME src="tabele6.html"> </FRAMESET> </HTML>

89

2. Cadre imbricate
Cadrele, ca i alte elemente ale paginii Web (liste, tabele), se pot imbrica, adic pot fi incluse cadre n interiorul altor cadre. n Exemplul 9.4 este creat o pagin cu trei cadre mixte. Pentru a construi pagina se procedeaz din aproape n aproape. Mai nti, pagina este mprit n dou cadre de tip coloan, dup care al doilea cadru este mprit n dou cadre de tip linie. Exemplul 9. 4 <HTML> <HEAD> <TITLE>Cadre 10.4</TITLE> </HEAD> <FRAMESET cols="30%, *"> <FRAME src="tabele1.html"> <FRAMESET rows="*, *"> <FRAME src="tabele2.html"> <FRAME src="tabele4.html"> </FRAMESET> </FRAMESET> </HTML>

3. Controlul aspectului unui cadru

Culoarea marginii cadrului Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul bordercolor. Acest atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul RGB. Atributul bordercolor poate fi ataat att etichetei <FRAMESET> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, ct i etichetei <FRAME>, pentru a stabili culoarea chenarului pentru un cadru individual. Exemplul 9.5 ilustreaz atributul bordercolor. Exemplul 9. 5 <HTML> <HEAD> <TITLE>Cadre 9.5</TITLE> </HEAD> <FRAMESET cols="20%, *" bordercolor="green" border="15"> <FRAME src="text3.html"> <FRAMESET rows="*, *"> <FRAME src="text4.html" bordercolor="blue"> <FRAME src="text5.html"> </FRAMESET> </FRAMESET> </HTML>

90

Limea marginii cadrului Atributul border al etichetei <FRAMESET> permite configurarea limii chenarelor tuturor cadrelor la un numr dorit de pixeli. Valoarea atributului border este un numr ntreg, ce reprezint numrul de pixeli, valoarea prestabilit fiind de 5 pixeli. n mod prestabilit, chenarul unui cadru este afiat i are aspect tridimensional. Pentru a obine cadre fr chenar se utilizeaz setarea border="0". Afiarea chenarului unui cadru se mai poate dezactiva i dac se utilizeaz atributul frameborder cu valoarea "no". Acest atribut poate fi ataat att etichetei <FRAMESET> (dezactivarea fiind valabil pentru toate cadrele incluse) ct i etichetei <FRAME> (dezactivarea fiind valabila numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt: yes - echivalent cu 1 no - echivalent cu 0 Cadrele din Exemplul 9.6 nu au chenar. Dup cum putei observa din figura crearea unor cadre fr chenar poate duce la apariia unor ambiguiti n pagin aa nct acest efect trebuie folosit cu atenie. Exemplul 9. 6 <HTML> <HEAD> <TITLE>Cadre 9.6</TITLE> </HEAD> <FRAMESET rows="*, *" border="0"> <FRAME src="tabele1.html"> <FRAME src="tabele2.html"> </FRAMESET> </HTML> Dimensiunea cadrului Chiar dac dimensiunile unui cadru au fost stabilite n mod explicit prin valorile atributelor etichetei <FRAMESET>, utilizatorul are posibilitatea de a altera aceste dimensiuni cu ajutorul mouse-ului. n scopul prevenirii acestei situaii se poate utiliza atributul noresize, ataat etichetei <FRAME>, al crui efect este cel de blocare a posibilitii de redimensionare a cadrului.

4. Bare de derulare
Atributul scrolling al etichetei <FRAME> este utilizat pentru a aduga unui cadru o bar de derulare sau de defilare (scrolling bar), care permite navigarea n interiorul documentului afiat n cadru. Valorile posibile ale atributului scrolling sunt: yes - bara de derulare este prezent ntotdeauna; no - bara de derulare nu este disponibil;

91

auto - bara de derulare este vizibil atunci cnd este necesar. Aceasta opiune las browserului posibilitatea de a aduga sau nu bara, n funcie de dimensiunea textului din cadru. Exemplul 9.7 ilustreaz funcionarea atributului scrolling n cele trei situaii. Exemplul 9. 7 <HTML> <HEAD> <TITLE>Cadre 9.7</TITLE> </HEAD> <FRAMESET rows="*, *, *"> <FRAME src="text1.html" scrolling="yes" noresize> <FRAME src="text7.html" scrolling="no" noresize> <FRAME src="text8.html" scrolling="auto" noresize> </FRAMESET> </HTML> Din Figura 9.7 se observ c, deoarece la primul cadru textul nu depete dimensiunea ferestrei, bara de derulare nu este afiat dei atributul scrolling are valoarea "yes". n cel de-al doilea cadru bara de derulare nu este afiat, indiferent de dimensiunea textului din cadru. La cel de-al treilea cadru, prezena sau absena barei de derulare este condiionat de dimensiunea textului. Aici, deoarece textul depete dimensiunea ferestrei, bara este afiata.

5. Poziionarea documentului ntr-un cadru

Atributele marginheight i marginwidth ale etichetei <FRAME> permit stabilirea distanei n pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului. Valorile posibile ale acestor atribute sunt: un numr de pixeli procente din nlimea, respectiv din limea cadrului n Exemplul 9.8 fereastra browserului este mprit n trei cadre de tip coloan de dimensiuni egale. n toate cele trei cadre este afiat acelai document, ceea ce difer este poziionarea documentului n fiecare cadru. Astfel, n cadrul din stnga, nu este specificat nici o valoare pentru atributele marginheight i marginwidth. n cadrul din mijloc, se stabilete distana de 50 de pixeli ntre marginea superioar i cea inferioar a cadrului i text. n cadrul din dreapta se stabilete o distan de 30 de pixeli ntre marginea din stnga i cea din dreapta a cadrului i text. Exemplul 9. 8 <HTML> <HEAD> <TITLE>Cadre 9.8</TITLE> </HEAD> <FRAMESET cols="* , * , *"> <FRAME src="text1.html"> <FRAME src="text1.html" marginheight="60">

92

<FRAME src="text1.html" marginwidth="40"> </FRAMESET> </HTML>

Atenie!
Exist browsere care nu suport cadre. Pentru acestea se utilizeaz n interiorul blocului <FRAMESET> eticheta <NOFRAMES> </NOFRAMES>. Dac browserul poate s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona <NOFRAMES> </NOFRAMES> va fi singurul care va fi recunoscut i afiat. Este de precizat i faptul c ntre <NOFRAMES> </NOFRAMES> se pot introduce orice alte etichete HTML (inclusiv imagini, hyperlink-uri, tabele).

6. Cadre interne (in-line frames)

Un cadru intern este specificat prin intermediul etichetei <IFRAME> </IFRAME>. Ea definete o arie rectangular n interiorul documentului, arie n care browserul va afia un alt document HTML, complet, inclusiv marginile i barele de derulare. Un cadru intern se insereaz ntr-o pagina Web n mod asemntor cu o imagine, n interiorul blocului <BODY>, aa cum rezult din urmtorul exemplu: <IFRAME src="tabele10.html" height=40% width=50%> </IFRAME> n acest caz, am specificat c dorim un cadru intern care are 40% din nlimea i 50% din limea paginii curente. Atributele acceptate de eticheta <IFRAME> sunt n parte preluate de la etichetele <FRAME> i <FRAMESET>, cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name. O parte din atributele <FRAME> sunt comune cu cele ale etichetei <IMG>: vspace, hspace, align, width, height. n Exemplul 9.9 am construit un cadru intern n care se deschide unul dintre documentele HTML create la capitolul Tabele. Exemplul 9. 9 <HTML> <HEAD> <TITLE>Cadre 9.9</TITLE> </HEAD> <BODY> <H1 align="center">Cadre interne</H1><HR> <CENTER> <IFRAME width="60%" height="50%" name="icad" src="tabele4.html"> Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta cadre interne. <P><A href="cadre10.html">Pagina fara cadre interne</A> </IFRAME> </CENTER> </BODY> </HTML>

93

Din Figura 9.9 putei observa c aspectul unui cadru intern este ntructva similar cu cel al unei imagini in-line. Eticheta <IFRAME> se introduce n cadrul blocului <BODY> i n cazul folosirii ei nu mai este necesar un document de definire a cadrelor. Pentru situaia cnd browserul nu accept cadre interne, am asigurat o versiune a paginii care nu conine astfel de cadre (cadre10.html) introdus prin eticheta <A>. Coninutul acestei pagini este foarte simplu, servind doar la ilustrarea modului n care poate fi construit o alternativ la pagina cu cadre interne Exemplul 9.10) Exemplul 9. 10 <HTML> <HEAD> <TITLE>Cadre 9.10</TITLE> </HEAD> <BODY> <H1 align="center">Pagina fara cadre interne</H1><HR> </BODY> </HTML> Iat un alt exemplu (Exemplul 9.11) n care am creat o pagin care conine trei link-uri iar acestea deschid paginile referite de ele n cadrul intern din centrul paginii. Exemplul 9. 11 <HTML> <HEAD> <TITLE>Cadre 9.11</TITLE> </HEAD> <BODY> <A href="tabele4.html" target="icad">Fisierul1</A><BR> <A href="tabele5.html" target="icad">Fisierul2</A><BR> <A href="tabele6.html" target="icad">Fisierul3</A><BR> <CENTER> <IFRAME width="60%" height="50%" name="icad" src="cadre11.html"> Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta cadre interne. <P><A href="cadre10.html">Pagina fara cadre interne</A> </IFRAME> </CENTER> </BODY> </HTML> n exemplu am folosit atributul name al etichetei <IFRAME> cu ajutorul cruia am atribuit un nume acestui cadru i anume "icad". Acest lucru a fost necesar pentru a specifica, prin intermediul atributului target al etichetei <A>, faptul c link-urile se vor deschide n cadrul intern.

7. Deschiderea documentelor n alte cadre

Dac ntr-unul dintre documentele deschise n cadru exist link-uri, acestea vor deschide paginile referite de ele n cadrul curent. Acest comportament se poate schimba prin plasarea n eticheta <A> a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei:

94

<A href="URL" target="nume_frame"> </A> Numele unui cadru este stabilit prin atributul name al etichetei <FRAME> conform sintaxei: <FRAME name="nume_frame"> n Exemplul 9.12 este prezentat o pagina Web cu dou cadre. Exemplul 9. 12 <HTML> <HEAD> <TITLE>Cadre 10.12</TITLE> </HEAD> <FRAMESET cols="20%, *"> <FRAME src="cadre13.html"> <FRAME src="cadre14.html" name="cadru_dreapta"> </FRAMESET> </HTML> n Exemplul 9.13 este creat un document ce conine, dup cum observai, patru link-uri. Prin intermediul atributului target am specificat cadrul n care se vor deschide acestea. Toate aceste legturi deschid paginile referite de ele n cadrul drept. Exemplul 9. 13 <HTML> <HEAD> <TITLE>Cadre v10.13</TITLE> </HEAD> <BODY> <A href="tabele6.html" target="cadru_dreapta"> Legatura 1 </A><BR> <A href="tabele7.html" target="cadru_dreapta"> Legatura 2 </A><BR> <A href="tabele8.html" target="cadru_dreapta"> Legatura 3 </A><BR> <A href="cadre14.html" target="cadru_dreapta"> Home </A><BR> </BODY> </HTML> Exemplul 9. 14 <HTML> <HEAD> <TITLE>Cadre 10.14</TITLE> </HEAD> <BODY>

95

<H3>Aici se vor deschide paginile referite de legaturile din cadrul stang</H3><HR> </BODY> </HTML> Exemplul 9. 15 <HTML> <HEAD> <TITLE>Cadre 10.15</TITLE> </HEAD> <FRAMESET rows="30%, *"> <FRAME src="cadre17.html"> <FRAME src="cadre16.html"> </FRAMESET> </HTML> Exemplul 9.16 construiete documentul care conine trei legturi ctre fiiere HTML create la capitolul Formatarea textului. Fiecare dintre aceste legaturi are specificat atributul target pentru a ilustra modul n care funcioneaz acesta. Exemplul 9. 16 <HTML> <HEAD> <TITLE>cadre 9.16</TITLE> </HEAD> <BODY> <A href="text4.html" target="_blank"> Aceasta legatura se deschide in alta fereastra </A><BR> <A href="text5.html" target="_self"> Aceasta legatura se deschide in fereastra curenta </A><BR> <A href="text6.html" target="_parent"> Aceasta legatura se deschide in fereastra parinte </A><BR> </BODY> </HTML> Exemplul 9.17 este o pagin Web foarte simpl care se va deschide n cadrul de sus. Exemplul 9. 17 <HTML> <HEAD> <TITLE>cadre 9.17</TITLE> </HEAD> <BODY> <H1 align="center">Atributul target</H1> </BODY> </HTML>

96

8. Sugestii privind folosirea cadrelor

Dei cadrele reprezint o maniera destul de spectaculoas de a structura o pagin Web, ele prezint o mulime de dezavantaje. ncrcarea unei pagini care conine cadre se face mai greu, indexarea paginii de ctre motoarele de cutare este mai dificil. De asemenea, deoarece documentul din fiecare cadru are propriul URL , este mai greu pentru vizitator s rein adresa paginii n Favorites. i, nu n ultimul rnd, deoarece exist browsere care nu suport cadrele, este indicat s asigurai pentru fiecare pagin astfel structurat i o versiune fr cadre, ceea ce implic un efort suplimentar. Avnd n vedere toate aceste aspecte, este bine s limitai folosirea cadrelor n paginile dumneavoastr doar la situaiile n care nu putei proceda altfel.

Capitolul 10
Formulare Cu siguran ai vzut cum arat un formular ntr-o pagin Web. De exemplu, atunci cnd completai o carte de oaspei (guestbook) avei de-a face cu un formular. Atunci cnd selectai mai multe opiuni dintr-o list sau introducei un cuvnt ntr-un motor de cutare, folosii, de asemenea, un formular. Formularul reprezint unul dintre cele puternice elemente ale unei pagini Web. Prin intermediul formularelor se realizeaz interactivitatea cu vizitatorul paginii, acestea permindu-v s obinei informaii despre cei care viziteaz paginile dumneavoastr.

1. Ce este un formular?
Un formular este un ansamblu de zone active alctuit din mai multe tipuri de elemente: butoane, casete de selecie, cmpuri de editare, etc., ce permit utilizatorilor s introduc efectiv informaii. Aceste informaii sunt ulterior transmise serverului pe care este gzduit pagina dumneavoastr, unde vor putea fi prelucrate. O sesiune cu o pagina Web ce conine un formular cuprinde dou etape: Utilizatorul completeaz formularul i, prin apsarea butonului de expediere, trimite serverului datele nscrise n formular. O aplicaie dedicat de pe server (un script) analizeaz informaiile transmise i, n funcie de configuraia scriptului, fie stocheaz datele ntr-o baz de date, fie le transmite la o adres de mail indicat de dumneavoastr. Dac este necesar, serverul poate expedia i un mesaj de rspuns utilizatorului. Cel mai important lucru pe care trebuie s-l nelegei n legtur cu formularele este c aici apar dou probleme distincte i care necesit instrumente diferite pentru a le gestiona.

97

Prima dintre ele este plasarea formularului n pagin i asigurarea bunei lui funcionri. Acest lucru se realizeaz prin HTML i de el ne ocupm n acest capitol. Cea de-a doua este gestionarea i prelucrarea informaiilor pe care vizitatorul le introduce prin intermediul formularului. Aceast problem este rezolvat cu ajutorul scripturilor CGI stocate pe server, subiect despre care vom vorbi n capitolul urmtor. Structura formularele poate varia, de la o simpl caset de text pentru introducerea unui ir de caractere, pn la un ansamblu complex, cu multiple seciuni i care ofer faciliti puternice de transmitere/prelucrare a datelor.

2. Crearea unui formular

Un formular este definit ntr-un bloc delimitat de etichetele <FORM> </FORM>. Eticheta </FORM>, de nchidere, este obligatorie. n interiorul blocului sunt incluse: elementele formularului, n care vizitatorul urmeaz s introduc informaii un buton de expediere (submit), la apsarea cruia, datele sunt transmise ctre server opional, un buton de anulare (reset, cancel), prin care utilizatorul poate anula datele nscrise n formular Tot ceea ce este inclus ntre eticheta de deschidere i cea de nchidere face parte din formular. Eticheta <FORM> are dou atribute eseniale: action comunic browserului unde s trimit datele introduse n formular. n general valoarea atributului action este adresa URL a scriptului aflat pe serverul care primete datele formularului. De exemplu: <FORM action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">. method - precizeaz metoda utilizat de browser pentru expedierea datelor formularului. Atributul method poate avea dou valori: post - folosit n cele mai multe cazuri. Indic serverului s furnizeze datele direct scriptului ca date de intrare standard. get (valoarea implicit) - datele din formular sunt adugate la adresa URL precizat de atributul action, ntre adresa URL i date fiind inserat un "?". Datele sunt adugate conform sintaxei: nume_camp=valoare_camp. ntre diferite seturi de date este introdus un "&". De exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi? nume1=valoare1&nume2=valoare2" Cea mai facil cale prin care informaiile introduse ntr-un formular pot parveni creatorului paginii este folosirea comenzii mailto: Am mai ntlnit aceast comand la capitolul Legturi n contextul urmtor: <A href="mailto:autor@domeniu.com"> De data aceasta nu mai este vorba de crearea unei legturi care s lanseze n execuie aplicaia de mail a utilizatorului, ci de transmiterea datelor introduse n formular la o adres de mail specificat de dumneavoastr.

98

Acest lucru se poate realiza preciznd ca valoare a atributului action urmtoarea secven: "mailto:adresa_mail", ca n exemplul urmtor: <FORM action=mailto:autor@domeniu.com method="post"> Aa cum spuneam, atributul action comunic browserului unde s trimit datele introduse n formular. Folosind comanda mailto: browserului i se indic s trimit datele la adresa de mail specificat n comand. Din pcate, aceast comand nu este executat n acest mod dect de browserele Netscape. Browserele Internet Explorer nu recunosc comanda mailto: prezent n cadrul formularelor. Acestea o execut la fel cum este ea executat atunci cnd face parte din eticheta <A> ca valoare a atributului href adic lanseaz aplicaia de mail a utilizatorului. Din acest motiv, inclusiv pentru trimiterea datelor la o adres specificat de mail, se folosesc scripturi CGI. Pentru a nu intra nc n amnunte privind scripturile, vom folosi totui n exemplele urmtoare comanda mailto: Reinei totui c afiarea corect a unui formular n pagin nu este dect prima etap a utilizrii formularului. Pentru a face o testare complet trebuie s avei un script instalat pe server care s prelucreze datele din formular i s le transmit la adresa de mail specificat. Pentru a defini elementele care fac parte din formular se utilizeaz etichetele <INPUT>, <SELECT>, <OPTION> i <TEXTAREA>.

3. Eticheta <INPUT>
Prin intermediul etichetei <INPUT> se pot introduce n formular cmpuri de editare (casete de text), cmpuri de tip password, butoane de expediere i anulare, butoane radio i casete de validare. Eticheta <INPUT> are urmtoarele atribute: type - prin care se precizeaz tipul elementului. name - permite ataarea unui nume fiecrui element al formularului. value - permite atribuirea unei valori iniiale unui element al formularului. Perechea de atribute name/value (nume/valoare) este deosebit de important pentru buna funcionare a formularului. Fiecare element introdus prin eticheta <INPUT> reprezint o variabil. Informaia introdus de utilizator n cmpul elementului respectiv reprezint valoarea pe care o primete aceast variabil. Din acest motiv, toate elementele introduse prin eticheta <INPUT> trebuie s aib atribuit un nume. Acest lucru este obligatoriu deoarece, n caz contrar, variabila reprezentat de acel element nu va avea un identificator. n plus, este indicat s atribuii nume distincte diferitelor elemente care fac parte din formular. Altminteri, scriptul CGI care prelucreaz datele nu va ti s fac distincia ntre variabile avnd acelai nume i valori diferite. Atributul type poate avea urmtoarele valori: text - se folosete pentru a introduce un cmp de editare pe o singur linie password se folosete pentru a insera un cmp de editare n care caracterele introduse sunt nlocuite cu asteriscuri (*)

99

radio folosit pentru a insera un ir de butoane radio (elemente care se folosesc pentru a selecta dintr-o list de opiuni una i numai una dintre ele) checkbox folosit pentru a introduce un ir de casete de validare (elemente care se folosesc cnd dintr-o list de opiuni se poate alege mai mult de o singur variant) submit se folosete pentru a introduce un buton de expediere reset se folosete pentru a introduce un buton de anulare a informaiilor introduse n formular button - se folosete pentru a introduce n formular un buton obinuit hidden - se folosete pentru a introduce n formular un cmp ascuns Fiecare dintre valorile atributului type genereaz un anumit tip de element n cadrul formularului. Exemplul 10.1 creeaz un formular foarte simplu care conine un cmp de editare i un buton de expediere

Exemplul 10. 1 <HTML> <HEAD> <TITLE>formulare 10.1</TITLE> </HEAD> <BODY> <H1 align="center"> Caseta de text si buton de expediere</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Introduceti adresa dvs. de mail: <INPUT type="text" name="adresa" value="adresa mail"><BR> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Dup cum observai, numele atribuit cmpului de editare este "adresa" iar atributul value a primit ca valoare irul de caractere "adresa mail". Acest text va fi afiat n interiorul cmpului de editare, nainte ca utilizatorul s nceap introducerea informaiilor. Dac atributul value nu era prezent sau era iniializat cu stringul vid ( "" ), caseta de text ar fi fost goal. n cadrul formularului este prezent i un buton de expediere, inserat de asemenea prin intermediul etichetei <INPUT> avnd atributul type setat cu valoarea "submit". Aa cum se observ din figur, pe buton este afiat textul "expediaza", deoarece pentru acest element, atributului value i-a fost atribuit ca valoare textul respectiv. Casete de text n Exemplul 10.2 am creat un formular care conine trei casete de text (cmpuri de editare) n care utilizatorul este rugat s introduc numele, prenumele i adresa de mail, precum i o caset de tip password, care cere introducerea unei parole. Aa cum vei observa din Figura 11.2, o caset de

100

tip password este asemntoare cu un cmp de editare, singura diferen fiind aceea c aici caracterele nu sunt afiate n clar ci sunt nlocuite cu asteriscuri. n plus, formularul conine un buton de expediere i unul de anulare a datelor introduse. Exemplul 10. 2 <HTML> <HEAD> <TITLE>formulare 10.2</TITLE> </HEAD> <BODY> <H1 align="center">Casete de text</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Introduceti numele: <INPUT type="text" name="nume" value=""><BR> Introduceti prenumele: <INPUT type="text" name="prenume" value=""><BR> Introduceti adresa de mail: <INPUT type="text" name="mail" value=""><BR> Introduceti parola: <INPUT type="password" name="parola"><BR> <INPUT type="reset" value="sterge"> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Pentru elementele de tip caset de text i password sunt utile i atributele: maxlength care stabilete numrul maxim de caractere care poate fi introdus n cmpul de editare size care stabilete limea acestui cmp. Butoane radio n Exemplul 10.3 am creat un formular care conine un ir de butoane radio, prin care se cere prerea vizitatorului despre o pagin Web. Dup cum observai, fiecare element de tip buton radio are acelai nume i anume "opinie" deoarece nu se poate selecta dect un singur element, astfel nct orice ambiguitate este exclus. Fiecare buton radio trebuie s aib o valoare. Din acest motiv pentru fiecare buton atributul value a fost setat la o alt valoare. Alegerea uneia dintre opiuni, de exemplu "buna", face ca variabila "opinie" s primeasc valoarea "buna". Prin urmare, serverului i va fi transmis perechea "opinie=buna". n plus, observai prezena atributului checked, care are rolul de a prestabili o anumit opiune, pe care ns utilizatorul o poate schimba, dac dorete Exemplul 10. 3 <HTML> <HEAD> <TITLE>formulare 10.3</TITLE> </HEAD> <BODY> <H1 align="center">Butoane radio</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post">

101

Ce parere aveti despre aceasta pagina?<BR> <INPUT type="radio" name="opinie" value="foarte buna" checked>Foarte buna<BR> <INPUT type="radio" name="opinie" value="buna">Buna<BR> <INPUT type="radio" name="opinie" value="destul de buna">Destul de buna<BR> <INPUT type="radio" name="opinie" value="proasta">Proasta<BR> <INPUT type="reset" value="anuleaza"> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Casete de validare Exemplul 10.4 creeaz un ir de casete de validare, care se deosebesc de butoanele radio prin faptul c se pot selecta mai multe opiuni dintre cele prezentate Exemplul 10. 4 <HTML> <HEAD> <TITLE>formulare 10.4</TITLE> </HEAD> <BODY> <H1 align="center">Casete de validare</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Care sunt hobby-urile dumneavoastra?<BR> <INPUT type="checkbox" name="hobby" value="sport">Sport<BR> <INPUT type="checkbox" name="hobby" value="film">Film<BR> <INPUT type="checkbox" name="hobby" value="lectura">Lectura<BR> <INPUT type="checkbox" name="hobby" value="jocuri">Jocuri pe computer<BR> <INPUT type="checkbox" name="hobby" value="internet">Surfing pe net<BR> <INPUT type="checkbox" name="hobby" value="alpinism">Alpinism<BR> <INPUT type="submit" name="submit" value="expediaza"> </FORM> </BODY> </HTML> O caset de validare are dou stri: marcat sau nemarcat (on sau off). Ca i la butoanele radio, atributul name are n exemplul considerat o singur valoare, "hobby", iar atributul value are, pentru fiecare caset, valori distincte. Serverului i sunt transmise numai acele valori care au fost marcate n casetele de validare corespunztoare. i n cazul casetelor de validare este posibil prezena atributului checked care preselecteaz o anumit opiune sau mai multe. Butoane n cadrul unui formular se pot introduce i butoane obinuite (altele dect butoanele Submit i Reset). Rolul acestora este de a iniia anumite aciuni n momentul cnd utilizatorul face click cu mouse-ul pe ele. Limbajul HTML nu ofer instrumentele necesare pentru a specifica ce anume se ntmpl cnd butonul este apsat. Pentru aceasta este necesar s includei n documentul HTML scripturi JavaScript care s trateze aceste evenimente.

102

Ca i butoanele Submit i Reset, butoanele obinuite sunt incluse n formular cu ajutorul etichetei <INPUT> avnd atributul type setat la valoarea button: <INPUT type="button" name="buton" value="text">. Textul specificat ca valoare a atributului value va fi afiat pe buton. Butoanele pot fi folosite pentru a valida informaiile introduse n formular, pentru a deschide documente i a iniia diverse alte aciuni din partea browserului. Cmpuri ascunse (hidden fields) Cmpurile ascunse sunt elemente care fac parte dintr-un formular dar nu sunt vizibile n cadrul paginii. Prin intermediul acestora se pot include n formular informaii care nu pot fi alterate de browser sau de utilizator. Introducerea unui astfel de cmp n formular se face prin eticheta <INPUT type="hidden">. Ca i n cazul celorlalte elemente ale formularului este necesar prezena atributelor name i value, ca n exemplul urmtor: <INPUT type="hidden" name="ascuns" value="modifica"> Cmpurile ascunse pot servi la o gestionare mai bun a datelor transmise la server. De exemplu, s presupunem c avem un formular care cere utilizatorului cteva informaii iniiale: numele i adresa. Pe baza acestora, aplicaia de pe server iniiaz afiarea unui nou formular care solicit introducerea unor informaii mai detaliate. Deoarece este plictisitor pentru vizitator s reia introducerea informaiilor iniiale, scriptul poate fi configurat s depun primele informaii n cmpurile ascunse ale celui de-al doilea formular. n aceast situaie este util folosirea cmpurilor ascunse deoarece serverul proceseaz un singur formular la un moment dat i nu are cum s tie c cel de-al doilea formular a fost completat de aceeai persoan.

4. Etichetele <SELECT> i <OPTION>

Cu ajutorul etichetei <SELECT> </SELECT> se poate introduce ntr-un formular un meniu derulant. Crearea unui meniu pentru vizitatorii paginii i ajut la selectarea unor opiuni dintr-o list predefinit. Fiecare opiune care face parte din blocul <SELECT> se introduce prin eticheta <OPTION>. n Exemplul 10.5 este construit un meniu derulant, din care vizitatorul poate selecta opiunea dorit. Atributul name are acelai rol ca i n eticheta <INPUT>. Dac vizitatorul selecteaz din meniu zodia Taur, de exemplu, la apsarea butonului de expediere, serverului i este transmis perechea: "zodia=taur". Atributul size este setat la valoarea "1". Setarea atributului size la valoarea "1" creeaz o un meniu derulant cu o singur opiune vizibil iniial aa cum se poate observa din Figura 10.5. Exemplul 10. 5 <HTML> <HEAD> <TITLE>formulare 10.5</TITLE> </HEAD> <BODY> <H1 align="center">Meniu derulant</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post">

103

Care este zodia dumneavoastra?<BR> <SELECT name="zodia" size="1"> <OPTION>Berbec <OPTION>Taur <OPTION>Gemeni <OPTION>Rac <OPTION>Leu <OPTION>Fecioara <OPTION>Balanta <OPTION>Scorpion <OPTION>Sagetator <OPTION>Capricorn <OPTION>Varsator <OPTION>Pesti </SELECT> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Dac atributul size este setat la o valoare mai mare dect 1 meniul va afia un numr de opiuni egal cu aceast valoare i va conine o bar de derulare pentru a face accesibile i celelalte opiuni.

5. Eticheta <TEXTAREA>
Cu ajutorul etichetei <TEXTAREA> </TEXTAREA> putei insera n pagin o caset de text multi-linie care permite vizitatorului s introduc un text mai lung, care se poate ntinde pe mai multe linii. Aceast etichet se folosete atunci cnd dorim s cerem vizitatorului o opinie despre un anumit subiect, care necesit introducerea unui text mai lung dect o singur linie (acest element se mai numete i caset de comentarii). <TEXTAREA> este o etichet container, deci necesit eticheta de nchidere </TEXTAREA>. Atributele rows i cols stabilesc numrul de linii, respectiv de coloane rezervate pentru introducerea textului. Exemplul 10. 6 <HTML> <HEAD> <TITLE>formulare 10.6</TITLE> </HEAD> <BODY> <H1 align="center">Caseta de comentarii</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Care este opinia dumneavoastra despre acest film?<BR> <TEXTAREA name="comentariu" rows="10" cols="40"></TEXTAREA><BR> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Toate elementele prezentate pot fi reunite ntr-un singur formular sau putei crea formulare diferite, n funcie de informaiile pe care dorii s le obinei de la vizitatorii paginii.

104

Dac dorii s introducei n pagin mai multe formulare, sau elemente de tipuri diferite n cadrul aceluiai formular, trebuie s avei n vedere aspectele care in de alinierea acestora. O posibilitate de a alinia elementele coninute ntr-un formular este folosirea tabelelor. Exemplul 10.7 conine elemente de mai multe tipuri ncadrate ntr-un formular unic. Pentru alinierea unora dintre ele am folosit un tabel. Exemplul 10. 7 <HTML> <HEAD> <TITLE>formulare 10.7</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea elementelor</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> <H3>Comandati Pizza</H3><P> <P>Cate pizza doriti? <INPUT name="nrpizza" value="0" size=3 maxlength=3><P> <INPUT type="radio" name="marime" value="mare" checked>Mare<BR> <INPUT type="radio" name="marime" value="medie">Medie<BR> <INPUT type="radio" name="marime" value="normala">Normala <P>Topping-uri<P> <INPUT type="checkbox" name="topping" value="salam">Salam<BR> <INPUT type="checkbox" name="topping" value="carnati">Carnati<BR> <INPUT type="checkbox" name="topping" value="sunca">Sunca<BR> <INPUT type="checkbox" name="topping" value="ciuperci">Ciuperci<BR> <INPUT type="checkbox" name="topping" value="ceapa">Ceapa<BR> <INPUT type="checkbox" name="topping" value="masline">Masline <P> <TABLE width="60%"> <TR> <TD width="20%">Numele <TD><INPUT type="text" name="nume"> <TR> <TD width="20%">Telefonul <TD><INPUT type="text" name="telefon"> <TR> <TD width="20%">Adresa <TD><TEXTAREA name="adresa" rows=6 cols=50></TEXTAREA> <TR> <TD width="20%">Numrul cartii de credit <TD><INPUT type="password" name="creditcard" size=20> </TABLE> <P> <CENTER> <INPUT type="submit" value="Trimite comanda"> </CENTER> </FORM> </BODY> </HTML>

6. Validarea datelor

105

Unul dintre aspectele importante pe care trebuie s le avei n vedere atunci cnd folosii formulare n paginile dumneavoastr este validarea datelor introduse de vizitatorii lor. Limbajul HTML ofer relativ puine instrumente pentru ndeplinirea acestei sarcini. Totui, avei la dispoziie cteva posibiliti. Folosii atributul maxlength atunci cnd introducei un cmp de editare, pentru a mpiedica vizitatorul s introduc un numr eronat de caractere. De exemplu, dac cerei introducerea ntr-o caset de text a codului numeric personal, acea caset nu trebuie s permit introducerea a mai mult de 13 caractere, un cmp de editare care cere introducerea codului potal nu trebuie s permit introducerea a mai mult de 4 caractere, etc. Pentru a v asigura c vizitatorul introduce date corecte ntr-un cmp de editare (de exemplu o adres de mail valid trebuie s conin obligatoriu caracterul "@") nu exist instrumente HTML. Pentru a realiza astfel de sarcini sunt necesare scripturi JavaScript. n capitolul JavaScript vei gsi scripuri utile care fac posibile validrile datelor, nc din momentul introducerii lor. Folosii de cte ori este posibil butoanele radio, casetele de validare i meniurile, pentru a simplifica procesul de introducere a datelor. Fii ct mai explicit, asigurai indicaiile necesare pentru completarea formularelor, preciznd, unde este cazul, dac pot fi selectate mai multe opiuni sau numai una singur.

Atenie!
Asigurai-v c scriptul care prelucreaz informaiile din formular are faciliti de gestionare a erorilor. Dac este semnalat o eroare, furnizai vizitatorului un mesaj de eroare explicit i, eventual, cteva corecii posibile.

Una dintre cele mai frustrante situaii este ca dup completarea unui formular complex, la apariia unei erori, vizitatorul s fie nevoit s reia completarea integral a formularului. Evitai acest lucru utiliznd scripturi care returneaz utilizatorului formularul completat, avnd cmpurile greite marcate pentru corectare. Nu uitai un amnunt foarte important: informaiile introduse de vizitatori n formulare v sunt necesare dumneavoastr, pentru a mbunti eficiena i calitatea site-ului sau chiar pentru a derula afaceri prin intermediul su. De aceea corectitudinea acestor date este esenial. Facei n aa fel nct vizitatorii site-ului dumneavoastr s completeze uor i cu plcere formularele prezente n pagini.

106

Capitolul 11
Foi de stiluri (CSS) Foile de stiluri HTML (Cascading Style Sheets) reprezint o inovaie n dezvoltarea World Wide Web, n ciuda faptului c ideea gruprii elementelor de formatare a documentelor a aprut ceva mai demult. Aplicarea stilurilor reprezint o extindere important a posibilitilor de design, evitnd utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i manipularea lor greoaie. Folosind stilurile HTML putei fi sigur c cititorii vor vedea textul din pagin exact aa cum a fost el proiectat. Textul i proprietile acestuia, care au fost iniial controlate de browsere, se rentorc la autor, acolo unde le este, de fapt, locul.

1. Ce este un stil?
Un stil reprezint o colecie de atribute ale textului i ale modului de aranjare a documentului care pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. Aceste atribute pot fi tipul de font, mrimea i grosimea acestuia, marginile, paragrafele i orice altceva ce poate influena aspectul textului n pagin. Gruparea lor n stiluri permite autorului s aplice aceeai colecie de atribute la diferite pri ale unui document. Stilurile aplicate unui document HTML au multe avantaje pentru creatorii de pagini Web: Ofer control crescut asupra aspectului i plasrii textului n pagin Reduc "nvlmeala" produs de multitudinea de deschideri i nchideri ale etichetelor care descriu elementele individuale ale textului Procesul de modificare a diferitelor elemente din pagin se simplific. De exemplu, dac dorii ca titlurile dumneavoastr s aib un alt tip de font dect textul obinuit, s fie de dimensiune mai mare i scrise cu caractere ngroate i italice, ar trebui s definii 107

aceste atribute de formatare pentru fiecare titlu n parte. Folosind stilurile nu avei nevoie dect s creai o singur definiie de stil care s conin atributele de formatare dorite, pe care s o aplicai la fiecare titlu. n plus, folosirea stilurilor reduce considerabil efortul depus atunci cnd dorii s aducei modificri aspectului i aranjrii elementelor din paginile dumneavoastr. n loc s parcurgei fiecare document n parte i s facei modificri asupra fiecrui element, nu mai este necesar s operai modificri dect asupra foii de stiluri care controleaz aceste elemente.

Tipuri de foi de stiluri

Stilurile HTML pot fi aplicate ntr-o pagin Web n trei moduri: ncapsulate (embedded): stilurile sunt incluse n documentul asupra cruia se aplic, i anume n seciunea <HEAD> a documentului. Prin includerea lor n antetul documentului, stilurile rmn invizibile pentru vizitatorul paginii. Legate (linked): stilurile sunt definite n fiiere separate de documentul HTML. Documentul face apel la foaia de stiluri prin intermediul etichetei <LINK>. Folosirea acestui tip de stiluri face posibil utilizarea aceleiai foi de stil pentru documente diferite. De asemenea, este posibil aplicarea mai multor foi de stiluri pentru acelai document. In-line: stilurile sunt incluse ca atribute n cadrul etichetelor HTML din document. Aceasta nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate. Este o modalitate mai puin utilizat deoarece contrazice principiul general al stilurilor, acela de a simplifica i de a face mai lizibil codul documentului HTML. Sintaxa definiiilor de stil este, n general, aceeai, indiferent de modul cum sunt ele aplicate. Cele trei tipuri de stiluri pot fi, de asemenea, combinate n cadrul aceluiai document. Relaiile dintre diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode. Stiluri ncapsulate Crearea unui astfel de stil se realizeaz folosind eticheta <STYLE> </STYLE>. Eticheta <STYLE> este o etichet container, deci este obligatorie prezena etichetei de nchidere </STYLE>. ntre cele dou etichete se introduc definiiile de stil. Eticheta de stil este plasat n antetul documentului adic n seciunea <HEAD>. n Exemplul 11.1 este prezentat o definiie de stil care realizeaz afiarea tuturor titlurilor de nivel 1 (adic a textelor cuprinse ntre etichetele <H1> </H1>) cu caractere bold i de culoare verde. n plus, textele incluse ntre etichetele <P> </P> vor fi afiate cu fonturi arial, de mrime 2 i culoare violet. De asemenea, este creat un stil "normal" care poate fi aplicat asupra oricrui text. Prin intermediul su, textul este afiat cu caractere mai mari i de culoare oranj. Exemplul 11. 1 <HTML> <HEAD> <TITLE>Stiluri 11.1</TITLE> <STYLE> <!-H1 {color: #008000; font-weight: bold} P {font-family: Arial; color: #800080; font-size: 14px}

108

.normal {font-size: large; color: #FF8000} --> </STYLE> </HEAD> <BODY> <H1 align="center">Stiluri</H1><HR> <P>Textul din acest paragraf este formatat cu ajutorul stilurilor</P> Acesta este un text neformatat <H1>Titlu</H1> <SPAN class="normal">Acesta este stilul normal</SPAN> </BODY> </HTML> Observai c definiia stilurilor a fost plasat ntre etichetele HTML de comentariu, n aceeai manier ca i la scripturile JavaScript. Motivul este acelai: dac browserul cu care este vizualizat pagina nu suport foi de stiluri, se evit astfel afiarea n pagin a codului HTML. Stiluri legate foi de stiluri externe Stilurile incluse n pagin se aplic elementelor prezente n respectivul document HTML, reducnd dimensiunea codului i efortul de a defini fiecare element n parte. Aceast idee se poate extinde la nivelul mai multor documente care pot beneficia, toate, de aceleai stiluri, reunite ntr-o foaie de stiluri extern. Avantajul folosirii foilor de stiluri externe este dublu. Pe de-o parte ele se pot aplica la nivelul mai multor documente HTML, realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la construirea unui site. Pe de alt parte, acelai document poate folosi foi de stiluri diferite, oferind vizitatorului posibilitatea de a opta pentru unul sau altul dintre ele, n funcie de propriile preferine. O foaie de stiluri este un fiier text care conine regulile de stil definite n aceeai manier folosit la stilurile incluse n pagin. Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css. Foile de stiluri pot fi stocate ntr-un folder separat sau n acelai folder n care sunt plasate i documentele HTML. Apelul foilor de stiluri se poate realiza n dou moduri: folosind eticheta <LINK> folosind funcia @import Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei <LINK> conform urmtoarei sintaxe: <LINK rel="stylesheet" href="nume_foaie_stiluri.css"> n Exemplul 11.2 este construit o foaie de stiluri extern care va fi apelat cu ajutorul etichetei <LINK>. Salvati foaia de stiluri cu numele stiluri2.css Exemplul 11. 2 BODY {background-color: #CCFFCC; font-family: Arial, sans-serif; color: #330066; padding: 50px, 70px}

109

A:link {color: #CC9900} A:visited {color: #660000} A:hover {color: #FFCC00} A:active {color: #FF0000} H1 {color: #996633; background-color: #FFFFCC} Documentul HTML care urmeaz apeleaz foaia de stiluri de mai sus este prezentat n Exemplul 11.3. Dup cum observai, foaia stiluri2.css a fost apelat n antetul documentului, prin intermediul etichetei <LINK> cu atributul rel="stylesheet". Atributul href al etichetei are ca valoare numele (i adresa relativ, dac este necesar) al foii de stiluri apelate. n documentul HTML am inclus i o legtur, pentru a exemplifica modul n care foaia de stiluri schimb culorile legturii. Atributul hover se refer la proprietatea ca legtura s i schimbe culoarea la trecerea cu mouse-ul peste ea, fr a face click. Exemplul 11. 3 <HTML> <HEAD> <TITLE>Stiluri 11.3</TITLE> <LINK rel="stylesheet" href="stiluri2.css"> </HEAD> <BODY> <H1 align="center">Foi de stiluri externe</H1> Acest exemplu ilustreaza modul in care este inclusa in pagina o foaie de stiluri externa <P>Mai multe exemple in <A href="anexa1.html">anexa2</A> </BODY> </HTML> Stiluri in-line Spre deosebire de stilurile ncapsulate i de foile de stiluri externe, stilurile in-line fac parte chiar din corpul documentului HTML. Ele se aplic prin folosirea atributului style n asociere cu etichetele HTML standard. Reinei, deci, c style poate fi att etichet n sine ct i atribut al altor etichete. Definiiile de stil in-line se aplic numai asupra elementelor incluse ntre etichetele care au asociat atributul style. Din acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului aceleai definiii de stil, ele vor trebui repetate, ncrcnd astfel documentul HTML. Totui, utilitatea stilurilor in-line este aceea c fiind definite chiar n cuprinsul documentului, definiiile lor sunt mai puternice dect cele din stilurile ncapsulate sau externe. Dac, de exemplu, am creat o foaie de stiluri pe care dorim s o aplicm unui document, i dac n cadrul acestui document avem un anumit element particular cruia dorim s-i dm un alt aspect dect cel prevzut n foaia extern, putem aplica acelui element un stil in-line care se va referi strict la el. Iat un exemplu de aplicare a unui stil in-line asociat etichetei <P>: <P style="color: red; font-family: arial; font-weight: bold">Textul din acest paragraf este scris cu fonturi arial, ingrosate, de culoare rosu</P> Observai c la stilurile in-line definiiile de stil sunt incluse ntre apostrofuri i nu ntre acolade, ca la celelalte tipuri de stiluri.

110

Atunci cnd lucrai cu documente HTML deja existente crora dorii s le aplicai stiluri in-line, este recomandat s folosii etichetele <DIV> i <SPAN>. Acestea v permit s aplicai stilurile fr a afecta codul HTML deja existent sau aspectul paginii n browserele care nu suport stiluri. Exemplul 11.4 ilustreaz folosirea etichetei <SPAN> Exemplul 11. 4 <HTML> <HEAD> <TITLE>Stiluri 11.4</TITLE> </HEAD> <BODY> <H1 style="color:red;font-famyly:arial">Stiluri in-line</H1><HR> <P>Textul din acest paragraf este divizat folosind eticheta span</P> <SPAN style="font-family:arial; color: blue">Text scris cu albastru si fonturi arial</SPAN><BR> <SPAN style="font-family: courier; size: medium; color:green">Text scris cu verde si fonturi courier medium</SPAN> </BODY> </HTML> La fel ca i la capitolele anterioare, nu vom intra n amnunte privind programarea cu ajutorul stilurilor. Dei stilurile sunt intuitive i uor de aplicat, totui o abordare exhaustiv a acestui subiect depete obiectul acestei cri. Prezentm, totui, n continuare, cteva exemple care v pot fi utile n paginile dumneavoastr.

3. Efecte obinute cu ajutorul stilurilor

Aspectul textului Iat cteva atribute care se pot asocia cu diverse etichete HTML permind schimbarea aspectului textului. Iat cteva atribute care se pot asocia cu diverse etichete HTML permind schimbarea aspectului textului. Tabel 11. 1 Atributul color backgroundcolor font-family font-size font-weight font-style letter-spacing Efectul Seteaz culoarea textului. Seteaz culoarea fundalului unui obiect. Seteaz tipul de font. Seteaz dimensiunea fonturilor. Valorile pot fi exprimate n pixeli (px) sau puncte (pt). Seteaz grosimea fonturilor. Valorile posibile pot fi: normal, bold, bolder, lighter. Seteaz stilul de font. Valorile pot fi: normal, italic, oblique. Seteaz spaierea literelor. Valorile pot fi:

111

pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri (mm). word-spacing text-transform text-decoration hover link active visited first-letter first-line Seteaz spaierea cuvintelor. Valorile pot fi: pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri. Valorile posibile pot fi: capitalize, uppercase, lowercase, none. Valorile pot fi: underline, overline, linethrough, blink. Schimb aspectul unei legturi cnd mouse-ul se afl deasupra ei. Definete aspectul unei legturi. Definete aspectul legturii active. Definete aspectul legturii vizitate. Schimb aspectul primei litere dintr-un cuvnt. Schimb aspectul primei linii dintr-un text.

n exemplele urmtoare sunt ilustrate cteva din aceste atribute. Exemplul 11.5 include o definiie de stil n care sunt definii aa numiii selectori de clas, n acest exemplu B.titlu i B.subtitlu. n corpul documentului apelul acestora a fost fcut prin construcia: <B class="titlu">Titlu</B> Atributul class care se poate asocia etichetei <B> ca n acest exemplu sau altor etichete de formatare a textului are ca valoare un identificator care a fost definit n prealabil n cadrul definiiei de stil. Exemplul 11. 5 <HTML> <HEAD> <TITLE>Stiluri 11.5</TITLE> <STYLE> <!-B.titlu {font-size: 20 pt; font-weight: bolder; letter-spacing:5px} B.subtitlu {font/size: 15 pt; letter-spacing: 5px} --> </STYLE> </HEAD> <BODY> <H1 align="center">Aspectul textului</H1><HR> <P> Text normal<BR> <B>Text ingrosat</B><BR> <B class="titlu">Titlu</B><BR> <B class="subtitlu">Subtitlu</B> </P> </BODY> </HTML>

112

Exemplul 11.6 folosete stiluri la formatarea titlului de nivel H1 i a textului din cadrul paragrafului, folosind atributul first-letter care schimb aspectul primei litere din paragraf. i n acest exemplu a fost folosit un selector de clas i anume P.primalit. Exemplul 11. 6 <HTML> <HEAD> <TITLE>Stiluri 11.6</TITLE> <STYLE> <!-P.primalit:first-letter {font-weight: bolder; font-style: italic; font-size:50 pt; color:red} H1 {color:blue; letter-spacing:5 px} --> </STYLE> </HEAD> <BODY> <H1 align="center">Efecte asupra textului</H1><HR> <P class="primalit">Textul din acest paragraf foloseste atributul first-letter</P> </BODY> </HTML> Bare de derulare colorate Unul dintre efectele des ntlnite n paginile Web este prezena barelor de derulare colorate. Acest efect se poate, de asemenea, obine prin aplicarea stilurilor. Pentru a defini culoarea barelor de derulare se folosesc cteva atribute, pe care le definim mai jos. Tabel 11. 2 Atributul scrollbar-base-color Efectul Definete culoarea de baz a barei, a butoanelor cu sgei i a fundalului pe care se deplaseaz bara. Dac dorii s realizai rapid o bar de derulare nu este necesar s setai dect acest atribut i pe cel urmtor. Setarea celorlalte atribute se suprapune i anuleaz efectele acestuia. Definete culoarea sgeilor de pe bar Definete culoarea suprafeei barei de derulare i a butoanelor pe care sunt sgeile. De asemenea, stabilete culoarea fundalului pe care se deplaseaz bara. Definete culoarea prilor "iluminate" ale barei i butoanelor cu sgei (marginile de sus i din stnga) i a fundalului pe care se deplaseaz bara Definete culoarea prilor "ntunecate" ale barei i butoanelor cu sgei (marginile de jos i din dreapta) Definete culoarea marginilor de jos i 113

scrollbar-arrowcolor scrollbar-face-color

scrollbar-highlightcolor

scrollbardarkshadow-color scrollbar-shadow-

color scrollbar-3dlightcolor scrollbar-track-color

din dreapta ale barei i butoanelor cu sgei Definete culoarea marginilor de sus i din stnga ale barei i butoanelor cu sgei Definete culoarea fundalului barei

Dup cum observai, unele dintre aceste atribute i suprapun efectele. Exist anumite reguli care stabilesc prioritile atributelor pe care nu le vom aborda aici. Ca nceptor, este recomandat s nu folosii atribute care se suprapun pentru a nu obine rezultate neconforme cu inteniile dumneavoastr. Exemplul urmtor ilustreaz modul de construire a barelor de derulare colorate. n Exemplul 11.7 am construit o foaie de stiluri extern salvat sub numele stiluri7.css. Exemplul 11. 7 BODY { scrollbar-face-color:blue; scrollbar-arrow-color:yellow; scrollbar-shadow-color:red; scrollbar-3dlight-color:yellow; scrollbar-track-color:cyan; } Documentul HTML care apeleaz foaia de stiluri este construit n Exemplul 14.8. Exemplul 11. 8 <HTML> <HEAD> <TITLE>Stiluri 11.8</TITLE> <LINK rel="stylesheet" href="stiluri7.css"> </HEAD> <BODY> <H1 align="center">Bare de derulare colorate</H1> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR> </BODY> </HTML> Desigur, culorile pe care le alegei pentru bara de derulare trebuie selectate cu grij, astfel nct s se armonizeze cu restul paginii. Folosirea unei foi de stiluri externe este util deoarece putei stabili astfel culoarea barei pentru toate paginile site-ului dumneavoastr. Browserele Netscape nu suport schimbarea culorilor barei de derulare. Formulare colorate Exemplul care urmeaz (Exemplul 11.9) folosete stiluri in-line pentru a crea formulare colorate care pot da paginii un aspect mai atractiv. Ca i la barele de derulare, culorile formularelor trebuie alese cu grij pentru a nu da paginii un aspect ncrcat i lipsit de bun-gust.

114

Exemplul 11. 9 <HTML> <HEAD> <TITLE>Stiluri 11.9</TITLE> </HEAD> <BODY> <H1 align="center">Formulare colorate</H1><HR> <FORM> <INPUT name="text" style="background-color: #00CCFF; color: #FFFFFF; font-weight: bold" value="Salut!"> <P> <TEXTAREA rows="5" cols="20" style="color: #0066CC; background-color: #CCCCCC; scrollbar-base-color:red;">Care sunt impresiile tale?</TEXTAREA> <P> <INPUT type="submit" value="trimite" style="background-color: #0066CC"> </FORM> </BODY> </HTML> Vizualizate n Netscape formularele din exemplul de mai sus vor avea aspectul normal, necolorat.

Capitolul 12
JavaScript

1. Ce este JavaScript?
JavaScript este un limbaj de programare orientat pe obiecte, care v permite s oferii paginilor dumneavoastr un caracter mai dinamic i interactiv. Dac ai parcurs prima parte a crii i avei cunotine minime de programare, nu vei avea dificulti n nelegerea modului n care funcioneaz acest limbaj. Atenie! JavaScript nu este acelai lucru cu limbajul Java. De fapt, dei numele sunt asemntoare, sunt dou limbaje foarte diferite. Spre deosebire de Java, care este un limbaj orientat pe obiecte, complex, asemntor cu limbajul C++, JavaScript este mult mai simplu i mai uor de folosit. n timp ce Java este un limbaj pentru programatori, JavaScript este destinat neprofesionitilor care doresc s mbunteasc aspectul i funcionalitatea paginilor de Web. JavaScript a fost dezvoltat de Netscape Corporation pentru a fi utilizat n browserul Netscape Navigator. Un script JavaScript poate fi plasat direct n pagina Web, fiind executat de browser mpreun cu documentul Web care-l conine. Browserul Internet Explorer (versiunile mai noi dect IE 3.0) execut i el corect scripturile JavaScript. JavaScript este un limbaj interpretat, ca i Perl, dar n cazul su nu trebuie s v mai facei griji n privina instalrii unui interpretor deoarece acesta este inclus n browser. Codul surs poate fi inclus n pagina Web sau poate fi pus ntr-un fiier separat care este referit din pagin. Ca i n cazul scripturilor CGI, nici n acest caz nu este absolut necesar cunoaterea limbajului JavaScript pentru a putea insera i utiliza cu succes astfel de scripturi. Exist un numr impresionant de scripturi gata de utilizare, care se pot integra cu uurin n codul surs al documentelor dumneavoastr.

115

2. Cum poate fi inclus un script n pagin?

Scripturile JavaScript pot fi incluse n pagina Web n dou moduri: prin intermediul etichetei <SCRIPT> </SCRIPT> prin intermediul unei proceduri eveniment Iat un exemplu foarte simplu n care n document este inclus un script care afieaz n pagin textul "Buna ziua!" prin intermediul etichetei <SCRIPT>. Exemplul 12. 1 <HTML> <HEAD> <TITLE>JavaScript 12.1</TITLE> </HEAD> <BODY> <H1>Primul exemplu JavaScript</H1><HR> <SCRIPT language="JavaScript"> document.write("Buna ziua!") </SCRIPT> </BODY> </HTML> Unul dintre atributele etichetei <SCRIPT> este language prin care este specificat limbajul n care este scris scriptul, n cazul acesta valoarea atributului fiind "JavaScript". O alt modalitate de a include de a include un script n pagin este salvarea acestuia ca un fiier extern i apelarea sa prin intermediul atributului src al etichetei <SCRIPT>. n exemplele de scripturi care vor urma vei observa diverse moduri n care pot fi incluse n paginile Web scripturi JavaScript. Nu vom intra n amnunte privind sintaxa limbajului, deoarece aceasta depete subiectul acestei cri. Totui, pentru a putea folosi judicios un script JavaScript trebuie s avei o imagine despre elementele eseniale cu care lucreaz JavaScript, obiectele i evenimentele. Obiecte Un obiect este un nou tip de date, care reunete sub aceeai denumire att datele ct i funciile care le prelucreaz. Datele se numesc proprietile obiectului iar funciile se numesc metodele obiectului. Pentru a exemplifica aceste concepte, s presupunem c dorim s construim un obiect care s reprezinte o carte de vizit, pe care l vom numi Card. Acest obiect va avea urmtoarele proprieti: - nume - adres - telefon Pentru a defini un obiect se folosete o funcie numit constructor. n exemplul nostru, funcia constructor a obiectului Card va arata astfel: function Card(num, adr, tel) { this.nume=num;

116

this.adresa=adr; this.telefon=tel; } n acest moment, constructorul obiectului Card nc nu este complet, el conine numai proprietile obiectului. Acum s construim i o metod care s lucreze cu acest obiect. Deoarece dorim s tiprim crile de vizit pe care le vom realiza cu ajutorul acestui obiect, vom crea o funcie care va tipri proprietile obiectului, numit PrintCard(). function PrintCard() { document.write("Numele: ", this.nume, "\n"); document.write("Adresa: ", this.adresa, "\n"); document.write("Telefonul: ", this.telefon, "\n"); } Acum putem scrie definiia complet a obiectului nostru: function Card(num, adr, tel) { this.nume=num; this.adresa=adr; this.telefon=tel; this.PrintCard=PrintCard; } S trecem, acum, la folosirea unui obiect. Pentru a crea un obiect concret, adic o instan a obiectului Card, se folosete cuvntul cheie new. Urmtoarea instruciune construiete o instan a obiectului Card, care se numete ana: ana=new Card ("Ana Munteanu", "Str. Apusului, nr.2, Bucuresti", "6162345") Odat ce a fost creat o nou instan a obiectului Card, metoda PrintCard poate fi folosit astfel: ana.PrintCard() i acum, s punem toate aceste secvene de cod laolalt i s folosim obiectul ntr-o pagin Web, pentru a afia mai multe cri de vizit. Exemplul 12. 2 <HTML> <HEAD> <TITLE>JavaScript 12.2</TITLE> <SCRIPT language="JavaScript"> function PrintCard() { document.write("<B>Numele:</B> ", this.nume, "<BR>"); document.write("<B>Adresa:</B> ", this.adresa, "<BR>"); document.write("<B>Telefonul:</B> ", this.telefon, "<HR>"); }

117

function Card(num, adr, tel) { this.nume=num; this.adresa=adr; this.telefon=tel; this.PrintCard=PrintCard; } </SCRIPT> </HEAD> <BODY> <H1 align="center">Crearea obiectelor</H1> Inceputul scriptului<HR> <SCRIPT language="JavaScript"> // Crearea a trei obiecte noi ana=new Card ("Ana Munteanu", "Str. Apusului, nr.2, Bucuresti", "6162345") ion=new Card("Ion Popescu", "Str. Zorilor nr.1, Ploiesti", "456789"); radu=new Card("Radu Ionescu", "Str. Noptii, nr.3, Pitesti", "201202"); // Afisarea lor ana.PrintCard(); ion.PrintCard(); radu.PrintCard(); </SCRIPT> Sfarsitul scriptului </BODY> </HTML> Putei observa modul n care a fost inclus scriptul n pagina Web. Astfel, definiia scriptului este plasat n antetul documentului HTML, iar apelul scriptului este fcut n corpul documentului. n cadrul scriptului apar dou linii precedate de irul de caractere "//". Acesta este modul n care se introduc comentariile n cadrul scripturilor JavaScript. Evenimente n continuare vom discuta despre un alt concept fundamental cu care lucreaz JavaScript, i anume evenimentul. Un eveniment este o aciune care survine la un moment dat i n urma creia este declanat execuia unei anumite pri din program. Ori de cte ori vizitatorul face click pe o legtur, de exemplu, cnd introduce un text sau chiar cnd trece cu mouse-ul deasupra unei zone a paginii, survine un eveniment la care scriptul reacioneaz genernd un rspuns. Iat care sunt tipurile de evenimente cu care lucreaz JavaScript: Tabel 12. 1 Eveniment onAbort onBlur onChange onClick Descriere Apare cnd utilizatorul renun la ncrcarea unei imagini Apare cnd un obiect din pagin pierde focusul Apare cnd un cmp de editare este modificat de utilizator (cnd se introduce un text) Apare cnd utilizatorul face click pe un 118

element onError onFocus onLoad onMouseOver onMouseOut onSelect onSubmit onUnload Apare cnd un document sau o imagine nu se ncarc corect Apare cnd un element primete focusul Apare cnd o pagin sau o imagine i termin ncrcarea Apare cnd cursorul mouse-ului se plimb deasupra unui element Apare cnd cursorul mouse-ului prsete elementul Apare cnd utilizatorul selecteaz un text Apare cnd este apsat un buton de tip Submit Apare cnd utilizatorul prsete documentul sau sesiunea curent.

Dup cum vedei, prin intermediul JavaScript se poate rspunde unui mare numr de evenimente. Acest lucru se realizeaz prin crearea unei proceduri eveniment. Procedurile eveniment nu sunt definite cu ajutorul etichetei <SCRIPT> ci ele sunt atribute ale celorlalte etichete. De exemplu, iat o legtur care include o procedur eveniment: <A href="http://www.amazon.com" onMouseOver=" window.status=Cea mai mare librarie virtuala; return true"> Click aici</A> Observai c ntreaga procedur eveniment care rspunde la evenimentul MouseOver este inclus n eticheta <A>. Sunt specificate dou instruciuni care se execut n momentul cnd cursorul mouse-ului este plasat deasupra legturii. Prima afieaz un mesaj n bara de status a ferestrei, urmtoarea returneaz valoarea true, pentru a mpiedica tergerea mesajului. Mai observai c mesajul care va fi afiat este delimitat de apostrofuri. Dac procedura eveniment este mai extins, includerea ei n ntregime ntr-o eticheta devine nepractic. n aceast situaie, este mai avantajos s construim o funcie care s trateze evenimentul. Funcia este definit n seciunea <HEAD> a documentului, iar n corpul documentului este apelat ca procedur eveniment. De exemplu, s presupunem c am construit o funcie eveniment numit Citeste(). Atunci ea poate fi apelat astfel: <A href="#cuprins" onMouseOver="Citeste();">Mergi la Cuprins</A> n momentul cnd mouse-ul se afl deasupra legturii, funcia este lansat n execuie.

3. Modul de execuie al scriptului

Scripturile integrate n cadrul paginilor sunt evaluate dup ce ncrcarea paginii s-a ncheiat dar nainte ca aceasta s fie afiat. Pe de alt parte, scripturile stocate ca fiiere separate sunt evaluate naintea tuturor scripturilor in-line (adic a celor incluse n pagin). Funciile definite n cadrul scripturilor nu sunt executate automat la ncrcarea paginilor ci abia atunci cnd acestea sunt apelate, fie prin eticheta <SCRIPT> fie printr-o procedur eveniment.

119

Dac ai vzut vreodat un script JavaScript ntr-o pagin Web, poate ai remarcat un lucru aparent ciudat: ntregul script este inclus ntre etichetele HTML de comentariu: <!- - comentariu - ->. Motivul este faptul c exist browsere care nu recunosc i nu pot executa scripturile JavaScript. Dac un document Web care conine cod JavaScript este ncrcat ntr-un asemenea browser, n loc ca scriptul s fie executat, este afiat n pagin ntregul cod, ceea ce nu este de dorit. Aa dup cum tii, comentariile sunt ignorate de browser, astfel c includerea codului JavaScript ntre etichetele de comentariu va duce la ignorarea acestei pri a documentului. Excepie fac browserele care recunosc JavaScript i care vor identifica prezena JavaScript i vor executa scriptul. n concluzie, maniera recomandat pentru introducerea n pagin a unui script este urmtoarea: <SCRIPT language="JavaScript"> <! - Cod JavaScript // - -> </SCRIPT> Am nvat pn acum cum poate fi inclus codul JavaScript ntr-un document HTML. S vedem, mai departe, cum putem folosi scripturile JavaScript pentru a face paginile mai atractive i a le mbunti funcionalitatea.

4. Ce se poate face cu JavaScript?

n continuare sunt prezentate cteva exemple de scripturi cu ajutorul crora se pot realiza lucruri care depesc posibilitile limbajului HTML, cum ar fi afiarea datei curente n pagina dumneavoastr, deschiderea unei ferestre pop-up, afiarea unui mesaj n bara de status a ferestrei browserului, afiarea aleatoare a unor mesaje n pagin, imagini care i schimb aspectul la trecerea mouse-ului, i, una dintre cele mai utile aplicaii JavaScript, validarea formularelor. Afiarea unui mesaj n bara de status Acest exemplu ilustreaz modul cum se poate afia un mesaj n bara de status (aflat la baza ferestrei browserului) la trecerea cu mouse-ul peste un anumit element din pagin. De obicei, acest element este un link sau o imagine. n Exemplul 12.3, elementul este o imagine Exemplul 12. 3 <HTML> <HEAD> <TITLE>JavaScript 12.3</TITLE> </HEAD> <BODY> <H1 align="center">Mesaj in status bar</H1><HR> <H3>Mesajul apare la plasarea mouse-ului pe imagine</H3> <IMG src="../Imagini/tiger.gif" onMouseOver="window.status='Acesta este un tigru'; return true" onMouseOut="window.status=' ';return true"> </BODY> </HTML>

120

Afiarea datei curente n pagin Scriptul urmtor preia data sistemului de operare al utilizatorului i o afieaz n pagin. Evident, dac data sistemului este setat incorect, ea va aprea n pagin ca atare. Exemplul 12.4 construiete o pagin Web care conine un astfel de script Exemplul 12. 4 <HTML> <HEAD> <TITLE>JavaScript 12.4</TITLE> <SCRIPT language="javascript"> <!-var zi, data, luna azi=new Date() if(azi.getDay(==0){ zi="Duminica, " } else if(azi.getDay()==1){ zi="Luni, " } else if(azi.getDay()==2){zi="Marti, "} else if(azi.getDay()==3){zi="Miercuri, "} else if(azi.getDay()==4){zi="Joi, "} else if(azi.getDay()==5){zi="Vineri, "} else if(azi.getDay()==6){zi="Sambata, "} if(azi.getMonth()==0){luna="Ianuarie "} else if(azi.getMonth()==1){luna="Februarie"} else if(azi.getMonth()==2){luna="Martie"} else if(azi.getMonth()==3){luna="Aprilie"} else if(azi.getMonth()==4){luna="Mai"} else if(azi.getMonth()==5){luna="Iunie"} else if(azi.getMonth()==6){luna="Iulie"} else if(azi.getMonth()==7){luna="August"} else if(azi.getMonth()==8){luna="Septembrie"} else if(azi.getMonth()==9){luna="Octombrie"} else if(azi.getMonth()==10){luna="Noiembrie"} else if(azi.getMonth()==11){luna="Decembrie"} data=azi.getDate() //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Data calendaristica</H1><HR> <FONT size="3" color="black" face="arial">Azi suntem in data de: <SCRIPT language="JavaScript"> <!-<FONT size="4" color="red" face="arial"> document.write(zi+' '+data+' '+luna) //--> </SCRIPT></FONT> </BODY> </HTML> Ferestre pop-up

121

Unul din lucrurile care nu se pot realiza folosind doar HTML este afiarea mesajelor pop-up. Aceste mesaje apar ntr-o mic fereastr care se nchide atunci cnd executai o anumit aciune, de obicei click pe un buton, sau pe un link. n Exemplul 12.5 este construit pagina principal din care este apelat fereastra pop-up. Exemplul 12. 5 <HTML> <HEAD> <TITLE>JavaScript 12.5</TITLE> <SCRIPT language="JavaScript"> <!-function deschide() {iwin=window.open("JavaScript 12.6.html", "IWIN", "status=no, toolbar=no, location=no, menu=no, width=200, height=200");} //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Fereastra pop-up</H1><HR> Aceasta pagina demonstreaza cum poate fi creata o fereastra pop-up<BR> Fereastra se deschide la apasarea pe legatura de mai jos si se inchide<BR> cand este apasat butonul OK<BR> Deschide fereastra <A href="#" onClick="deschide();">aici</A>. </BODY> </HTML> Firete c trebuie creat un document separat, care va fi afiat n fereastra pop-up. n Exemplul 12.6 este construit documentul HTML (JavaScript6.html) care va fi afiat n fereastra pop-up definit n exemplul anterior. Exemplul 12. 6 <HTML> <HEAD> <TITLE>JavaScript 12.6</TITLE> </HEAD> <BODY> <H3 align="center">Test pop-up</H3> <FONT color="green" face=arial>Ati invatat sa creati o fereastra pop-up<BR> Apasati OK ca sa reveniti in fereastra initiala <P> <FORM name="form1"> <INPUT type="button" value="OK" onClick="window.close();"> </FORM> </BODY> </HTML> Putei modifica documentul HTML care se va deschide n fereastra pop-up dup dorin i l putei salva sub alt nume. Nu uitai, ns, s facei modificarea corespunztoare n funcia deschide() din script.

122

Afiarea aleatoare a unor mesaje n pagin Unul dintre lucrurile care i fac pe vizitatorii paginii dumneavoastr s revin la ea cu regularitate este varietatea, fie n aspect, fie, mai ales, n coninut. Un mod de a face paginile mai variate este de a afia diverse mesaje, citate sau imagini care s se schimbe de fiecare dat cnd este accesat pagina. n Exemplul 12.7 este prezentat un script care realizeaz afiarea aleatoare a unui citat, ales dintr-un ir predefinit. Exemplul 13. 7 <HTML> <HEAD> <TITLE>JavaScript 12.7</TITLE> </HEAD> <BODY> <H1 align="center">Citate</H1><HR> <SCRIPT language="JavaScript"> <!-citat=new Array(5); autor=new Array(5); citat[0]="Omul care-si cunoaste limitele este singurul care are sanse sa obtina ce vrea."; autor[0]="Goethe"; citat[1]="Pe stancile cele mai inalte ajung numai vulturii si reptilele."; autor[1]="Montesquieu"; citat[2]="Putine lucruri sunt atat de greu de suportat ca un exemplu bun."; autor[2]="Mark Twain"; citat[3]="Adevarul pur si simplu este rareori pur si niciodata simplu."; autor[3]="Oscar Wilde"; citat[4]="Omul a inventat limbajul pentru a-si satisface nevoia profunda de a se plange."; autor[4]="Lily Tomlin"; index=Math.floor(Math.random() * citat.length); document.write("<DL>\n"); document.write("<DT>" + "\"" + citat[index] + "\"\n"); document.write("<DD>" + "- " + autor[index] + "\n"); document.write("</DL>\n"); //--> </SCRIPT> <HR> Citatul de mai sus este generat aleator la incarcarea paginii. </BODY> </HTML> Dac dorii s inserai acest script n pagina dumneavoastr i s adugai i alte citate, nu uitai s redimensionai vectorii citat i autor la valoarea n-1, unde n este numrul de citate. Pentru a observa funcionarea scriptului, rencrcai pagina de mai multe ori. Imagini care se schimb (rollover images) Un efect interesant pe care l putei introduce n pagin sunt imaginile care i schimb aspectul la trecerea cu mouse-ul pe suprafaa lor Exemplul 12. 8

123

<HTML> <HEAD> <TITLE>JavaScript 12.8</TITLE> <SCRIPT language="JavaScript"> <!-if (document.images) { pic1on=new Image(); pic1on.src="../Imagini/dovleac1.jpg"; pic1off=new Image(); pic1off.src="../Imagini/dovleac2.jpg"; } function deschide(imgName) { if (document.images) { imgOn=eval(imgName + "on.src"); document[imgName].src=imgOn; } } function inchide(imgName) { if (document.images) { imgOff=eval(imgName + "off.src"); document[imgName].src=imgOff; } } //---> </SCRIPT> </HEAD> <BODY> <H1 align="center">Imagini care se schimba</H1><HR> <CENTER> <A href="#" onMouseover="deschide('pic1')" onMouseout="inchide('pic1')"> <IMG src="../Imagini/dovleac2.jpg" width="100" height="100" border="1" name="pic1"> </A> </CENTER> </BODY> </HTML> Validarea formularelor Dac exemplele prezentate pn acum au avut rolul de a face pagina dumneavoastr mai atractiv, urmtorul exemplu este de natur s i mbunteasc funcionalitatea. O problem cu care v vei confrunta fr ndoial dac folosii formulare n pagin, este validarea datelor introduse de utilizator. Vom crea o pagin foarte simpl care conine dou casete de text n care utilizatorul trebuie s introduc numele i adresa de mail. Deoarece dup completarea formularului informaiile introduse vor fi supuse procesului de validare realizat de scriptul JavaScript, eticheta <FORM> va avea un coninut diferit de cel pe care l cunoatei de la capitolul Formulare.

124

Scriptul de mai jos verific dac toate cmpurile de editare au fost completate. Dac se apas pe butonul Submit nainte de a completa ambele cmpuri, este transmis un mesaj de eroare. Datele din formular sunt transmise unui script CGI fictiv, numit myscript.cgi aflat n directorul cgi-bin. Observai c atributele action i method ale etichetei <FORM> pe care le cunoatei de la Formulare sunt, de data aceasta folosite ca proprieti ale obiectului predefinit n JavaScript, form. Documentul construit n Exemplul 12.9 conine un formular i scriptul care realizeaz validarea datelor introduse n cmpurile formularului. Exemplul 12. 9 <HTML> <HEAD> <TITLE>JavaScript 12.9</TITLE> <SCRIPT language="javascript"> <!-function verifica(form) { if (form.nume.value== "") { alert("Va rog, introduceti numele!"); form.nume.select(); } else if (form.email.value== "") { alert("Va rog, introduceti adresa de mail!"); form.email.select(); } else { form.method="post"; form.target="_self"; form.action="cgi-bin/myscript.cgi"; form.submit(); } } //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Validarea formularelor</H1> <H3 align="center">(completarea tuturor campurilor)</H3><HR> <FORM onSubmit="verifica(this); return false;"> Nume: <INPUT type="text" name="nume" size="30"><BR> Adresa mail: <INPUT type="text" name="email"><BR> <INPUT type="submit" name="button" value="Submit"> </FORM> </BODY> <HTML> O alt verificare deosebit de util este dac utilizatorul a introdus o adres de mail valid. Scriptul din exemplul urmtor realizeaz trei verificri:

125

dac n irul de caractere introdus exist caracterul @ dac este prezent caracterul "." urmat de trei caractere (.com, de exemplu), dac este prezent caracterul "." urmat de dou caractere (.ro, de exemplu) Formularul din Exemplul 12.10 conine un cmp de editare i un buton Submit. Dac adresa de mail introdus n cmpul de editare este incorect se va afia un mesaj de eroare. Exemplul 12. 10 <HTML> <HEAD> <TITLE>javascript10</TITLE> <SCRIPT language="javascript"> <!-function verifica_mail(form) { verif=form.email.value if ((verif.indexOf('@') < 0) || ((verif.charAt(verif.length-4) (verif.charAt(verif.length-3) !='.'))) { alert("Nu ati introdus o adresa de mail valida. Va rog, incercati din nou!"); form.email.select(); return false; } else { form.method="post"; form.target="_self"; form.action="cgi-bin/myscript.cgi"; form.submit(); } } //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Validarea formularelor</H1> <H3 align="center">(adresa de mail corecta)</H3><HR> <FORM onSubmit="verifica_mail(this);return false;"> Adresa mail: <INPUT type="text" name="email"><BR> <INPUT type="submit" name="button" value="Submit"> </FORM> </BODY> <HTML>

!='.')

&&

Putei folosi n paginile dumneavoastr oricare dintre aceste scripturi, desigur, fcnd modificrile necesare legate de structura site-ului dumneavoastr. De exemplu, n scripturile care realizeaz validarea formularelor, pentru ca acestea s fie funcionale, trebuie s precizai localizarea corect a scriptului CGI care face prelucrarea lor. Din exemplele prezentate probabil c v-ai putut crea o imagine despre modul n care pot fi utilizate scripturile JavaScript ntr-o pagin Web. Dac suntei entuziasmat nc de pe acum, vei fi

126

i mai mult dac vei depune puin efort pentru a nva limbajul i vei putea crea scripturi mult mai complexe dect acestea. Avei ns grij la aspectele legate de viteza de ncrcare a paginii: aplicaiile complexe i de mari dimensiuni ncetinesc ncrcarea paginii unde sunt folosite. Ca i n cazul imaginilor, nu folosii scripturi de care nu este nevoie, doar pentru a arata cu orice pre c suntei un bun programator. Una dintre regulile de aur ale unei pagini Web bune, regul att de adesea nclcat, este simplitatea.

Capitolul 13
1. Ce este un motor de cutare?
Dac avei o minim experien n navigarea pe Web v-ai ntlnit, fr ndoial cu motoarele de cutare. Motoarele de cutare sunt aplicaii plasate pe servere deosebit de puternice, care conin baze de date imense i care au drept scop cercetarea i indexarea sutelor de milioane de pagini Web existente. Utilitatea motoarelor de cutare este evident: fr ele ar fi aproape imposibil s gsim informaiile care ne intereseaz n oceanul de informaii care este Web-ul. Motoarele de cutare conin un formular de tip cmp de editare n care utilizatorul introduce unul sau mai multe cuvinte folosite drept cheie de cutare. Rezultatele sunt furnizate sub forma unei liste de pagini Web care conin cuvintele cheie introduse. Indexarea unei pagini de ctre un motor de cutare nseamn asocierea cuvintelor cheie cu coninutul informaional al acesteia. Cele mai folosite motoare de cutare sunt, n acest moment, Google, Yahoo!, Lycos, Go.com i Excite. Motoarele de cutare au drept scop indexarea tuturor paginilor existente pe Web, dar, evident, acest lucru este imposibil. Orict de performante ar fi programele cu care lucreaz, numrul de siteuri care sunt publicate n permanen pe Web depete posibilitile acestora. Acesta este motivul pentru care simpla postare a unui site pe Web nu garanteaz ctui de puin c acesta va avea vizitatori. Descoperirea lui de ctre motoarele de cutare poate dura ntre ase luni i un an. Tocmai de aceea nu trebuie s ateptai ca site-ul dumneavoastr s fie descoperit, ci trebuie s-l promovai activ, una dintre metode fiind nscrierea lui n bazele de date ale motoarelor de cutare. Exist dou tipuri principale de motoare de cutare, care se bazeaz pe moduri diferite de a face indexarea paginilor: Motoarele de cutare de tip "pianjen" care realizeaz indexarea automat, pe baza cuvintelor cheie prezente n antetul documentelor HTML (de exemplu Google). Acest tip de motoare folosesc algoritmi extrem de performani, care cerceteaz i indexeaz milioane de pagini pe zi.

127

Motoarele de cutare care fac indexarea pe baza cuvintelor cheie furnizate de creatorul paginii, la nscrierea acesteia n baza de date a aplicaiei (de exemplu Yahoo!). nscrierea n baza de date se face personal, de ctre autorul site-ului, iar evaluarea site-ului se face de ctre personal uman. Pentru a face mai eficient indexarea paginilor de ctre motoarele de tip "pianjen" limbajul HTML include o categorie special de etichete numite metatag-uri.

2. Metatag-uri
Metatag-urile sunt o categorie special de etichete care sunt plasate n antetul documentului HTML (n blocul <HEAD>). Ca i celelalte elemente incluse n antetul documentului, cu excepia titlului documentului, metatag-urile nu sunt vizibile pentru vizitatorul paginii. Primul metatag despre care vom vorbi este deja cunoscut i l-ai folosit de foarte multe ori pn acum: este metatagul <TITLE>. Se utilizeaz conform sintaxei: <TITLE>Titlul paginii Web</TITLE>. Dup cum ai observat din exemplele de pn acum, titlul paginii apare n bara de titlu a ferestrei browserului. Multe dintre motoarele de cutare afieaz n lista de rezultate i titlul paginilor pe lng adresele URL. Titlul paginii este informaia care l determin pe vizitator s intre sau nu pe pagina dumneavoastr. Titlul trebuie s fie o propoziie care s atrag atenia i n acelai timp s conin informaiile eseniale privind subiectul i coninutul paginii. Celelalte metatag-uri se introduc prin intermediul etichetei <META> care nu este o etichet container. Eticheta <META> admite o serie de atribute care ofer motoarelor de cutare diverse informaii care s ajute la indexarea paginii. Alte atribute ofer informaii browserului privind data de expirare a documentului sau specific perioada de timp dup care documentul este rencrcat n mod automat. Exist dou categorii de metatag-uri: 1. metatag-urile name 2. metatag-urile http-equiv Metatag-urile "name" Cele mai folosite metatag-uri sunt cele care se refer la cuvintele cheie care caracterizeaz pagina i coninutul ei, oferind astfel informaii motoarelor de cutare. Acestea sunt: "keywords" "description" "robots" Metatag-ul "keywords" Metatag-ul "keywords" se introduce conform urmtoarei sintaxe: <META name="keywords" content="lista cuvinte cheie"> Lista cuvintelor cheie trebuie s includ toate cuvintele pe care considerai c le-ar putea introduce un vizitator ca cheie de cutare pentru a descoperi pagina dumneavoastr. Cuvintele se scriu desprite prin virgul, fr spaii intre ele. Pe lng cuvintele cheie, putei folosi i combinaii

128

de cuvinte. De exemplu ntr-o pagin care ofer informaii despre crearea de pagini Web i web design, cuvintele cheie ar putea fi urmtoarele: <META name="keywords" content="Web design, creare pagini Web, construire site, Web site design"> Gsirea cuvintelor i combinaiilor de cuvinte cheie este o etap care trebuie tratat cu atenie. Pentru a aduce pagina dumneavoastr n atenia acelor vizitatori pentru care este ea conceput, cuvintele cheie trebuie alese cu atenie i ele trebuie s reflecte exact elementele de coninut definitorii ale paginii. Unii dintre creatorii de pagini Web care doresc s obin o poziionare mai bun n lista de rezultate furnizate de motoarele de cutare folosesc n mod abuziv cuvintele cheie, repetnd acelai cuvnt sau combinaii de cuvinte de un numr foarte mare de ori sau folosind cuvinte cheie care nu au legtur cu subiectul paginii. Ca urmare a acestor ncercri de "pclire" a motoarelor de cutare, au fost dezvoltai algoritmi performani care identific tentativele de fraud i care se soldeaz fie cu scderea cotaiei paginilor respective, fie chiar cu eliminarea lor din baza de date a motorului de cutare. Metatag-ul "description" Metatag-ul n cadrul cruia se realizeaz descrierea paginii este, de asemenea foarte important pentru succesul acesteia. Ca i cel anterior, se introduce n antetul documentului conform urmtoarei sintaxe: <META name="description" content="descrierea subiectului paginii"> Multe motoare de cutare includ n lista de rezultate pe lng URL-ul i titlul paginii i descrierea ei. Pentru a face descrierea paginii dumneavoastr este bine s folosii combinaii de cuvinte cheie, reunite n fraze atractive i convingtoare. Fii concis n descriere i plasai informaiile eseniale la nceput deoarece este posibil ca descrierile prea lungi s fie trunchiate. Ca i n cazul alegerii cuvintelor cheie, acordai o atenie deosebit formulrii unei descrieri ct mai potrivite i inei seama c aceasta poate fi singura dumneavoastr ans de a-l convinge pe utilizator s deschid pagina pe care ai creat-o. Descrierea unei pagini poate arta astfel: <META name="description" content="Tutorial de Web design care va initiaza pas cu pas in procesul de construire al unui site Web. Invatati sa concepeti, sa creati si sa promovati propriul dumneavoastra site."> Pe lng metatag-ul care face descrierea paginii este recomandat introducerea, la nceputul paginii, a unui comentariu n cadrul cruia s inserai descrierea. Acest lucru este util deoarece exist motoare de cutare care ignor metatag-urile i preiau primele cuvinte pe care le gsesc n pagin. Dac ai reuit s formulai o descriere sugestiv i convingtoare, o putei folosi chiar ca fraz de nceput n partea vizibil a paginii. Metatag-ul "robots" Sunt situaii cnd creatorul paginii Web dorete ca anumite pagini s fie excluse de la indexarea de ctre motoarele de cutare. De exemplu dac ai publicat site-ul pe Web nainte de a fi terminat (dei acest lucru este nerecomandat) sau dac dorii s reactualizai coninutul anumitor pagini i dorii ca pn la finalizarea modificrilor paginile s nu fie accesate de motoarele de cutare, putei folosi n antetul paginilor respective metatag-ul "robots" astfel: <META name="robots" content="noindex, nofollow">

129

Aceast construcie comunic motoarelor de cutare s nu indexeze pagina i n acelai timp s nu urmeze nici una dintre legturile incluse n ea. Atributul content poate lua urmtoarele valori: all - permite indexarea tuturor paginilor none - nu permite indexarea nici unei pagini i nici urmarea legturilor din cadrul lor index - permite indexarea paginii follow - permite urmarea legturilor din pagin noindex - nu permite indexarea paginii nofollow - nu permite urmarea legturilor din cadrul paginii Alte metatag-uri name utilizate sunt: <META name="author" content="nume_autor"> Permite specificarea numelui autorului paginii <META name="copyright" content="drepturi copyright"> Permite specificarea drepturilor de autor <META name="generator" content="nume_ aplicatie"> Specific aplicaia cu care a fost creat pagina. Exemplu: <META name="generator" content="Microsoft FrontPage 3.0"> Metatag-urile "http-equiv" Pe lng metatag-urile name care ofer informaii motoarelor de cutare, exist metatag-urile http-equiv care ofer informaii browserului privind documentul pe care urmeaz s-l deschid. Iat n continuare o list a acestor metatag-uri mpreun cu funciile fiecruia dintre ele. Tabel 13. 1 Eticheta Funcia

Acest tip de metatag-uri sunt <META httpechivalente cu headerele HTTP. Ele equiv="Content-Type" comunic browserului care este tipul content="text/html; charset=isopaginii i cum s o afieze precum i 8859-1"> setul de caractere folosit (opional) <META httpSpecific limbajul de script equiv="Content-Script-Type" folosit n document content="text/javascript"> <META httpSpecific limbajul de foi de equiv="Content-Style-Type" stiluri folosit n document content="text/css"> <META equiv="expires" expirarii> <META equiv="refresh" secunde"> httpPermite precizarea datei la care content="data_ documentul poate fi considerat expirat

httpSpecific numrul de secunde content="nr_ dup care pagina este rencrcat automat de ctre browser. Atributul content poate conine, opional, i <META http- adresa URL a altei pagini care se va equiv="refresh" content="nr ncrca n locul paginii curente. secunde; url=adresa_noua"> Aceast opiune este util cnd dorii

130

redirectarea vizitatorului ctre alt pagin. Exemplu: <META http-equiv="refresh" content="5; url=http://www.nouapagina.com"> Dup cum observai, metatag-urile de tip http-equiv sunt folosite pentru a transmite browserului diverse informaii privind documentul HTML. Din aceast categorie face parte i metatag-ul care permite specificarea modului de tranziie ntre pagini: <META http-equiv="Page-Enter" Transition=cod_tranzitie)"> <META http-equiv="Page-Exit" Transition=cod_tranzitie)"> content="RevealTrans(Duration=nr_secunde, content="RevealTrans(Duration=nr_secunde,

unde: nr_secunde reprezint durata tranziiei n secunde iar cod_tranzitie poate fi unul dintre codurile de mai jos. Fiecare dintre ele realizeaz tranziia paginii n alt mod. Tabel 13. 2 Cod tranziie 0 1 2 3 4 5 6 7 8 9 10 11 12 13 de Cum se face tranziia Dreptunghi nchide Dreptunghi deschide care care se se

Cerc care se nchide Cerc care se deschide De jos n sus De sus n jos De la stnga la dreapta De la dreapta la stnga Dungi care deplaseaz spre dreapta Dungi care deplaseaz n jos se se

Dreptunghiuri care se deplaseaz spre dreapta Dreptunghiuri care se deplaseaz n jos Pixeli care "dizolv" pagina Cortin care se nchide

131

orizontal 14 15 Cortin care deschide orizontal se

Cortin care se nchide vertical

Exemplul 13. 1 <HTML> <HEAD> <TITLE>Meta 13.1</TITLE> <META http-equiv="page-enter" content="RevealTrans(duration=5, transition=0"> <META http-equiv="page-exit" content="RevealTrans(duration=5, transition=1"> </HEAD> <BODY bgcolor="red"> <H1 align="center">Tranzitia intre pagini</H1><HR> Pentru a observa modul de tranzitie apasati <A href="meta2.html">aici</A> </BODY> </HTML> Putei schimba codurile dup cum dorii pentru a observa i alte moduri de tranziie. Documentul meta 13.2.html creat n Exemplul 13.2 servete doar pentru a exemplifica modul n care se face tranziia pentru intrarea n pagin. Exemplul 13. 2 <HTML> <HEAD> <TITLE>Meta 13,2</TITLE> </HEAD> <BODY bgcolor="yellow"> <H3>Pentru a reveni la pagina anterioara apasati butonul Back al browserului</H3> </BODY> </HTML> Atenie! Am precizat c metatag-urile sunt incluse n antetul documentului HTML. Atunci cnd folosii cadre n paginile dumneavoastr nu uitai s plasai metatag-urile n blocul <HEAD> al tuturor documentelor care se deschid n cadre i nu numai n documentul de definire a cadrelor <FRAMESET>. Crearea i publicarea unui site web Am studiat pn acum elementele fundamentale ale limbajului HTML inclusiv modul n care acesta poate fi extins prin folosirea scripturilor CGI, a scripturilor JavaScript i a foilor de stiluri. Avei la ndemn acum instrumentele necesare pentru a crea propriul dumneavoastr site Web. Dar este oare suficient? Rspunsul este nu. Pentru a crea un site Web de calitate, care s comunice informaiile n mod logic i atractiv i care s atrag vizitatori permaneni, cunoaterea limbajului HTML nu este suficient. nainte de a ncepe scrierea codului HTML pentru paginile dumneavoastr trebuie s parcurgei alte dou etape importante: planificarea site-ului i stabilirea elementelor de Web design. Dup ce ai finalizat documentele HTML care vor face parte din site trebuie s testai funcionarea link-urilor i aspectul 132

paginilor n diferite browsere. i, n fine, dup ce toate aceste etape au fost parcurse, urmeaz publicarea site-ului pe un server Web care s-l fac accesibil tuturor celor care navigheaz pe Web. n cele ce urmeaz vom discuta despre etapele care preced construirea documentelor HTML care vor forma site-ul i despre cele care urmeaz dup ce codul HTML al paginilor a fost definitivat.

Capitolul 14
Planificarea site-ului Planificarea este un aspect crucial n procesul de creare a unui site Web, deoarece este etapa n care se iau decizii care vor influena designul, implementarea i, mai trziu, promovarea site-ului. World Wide Web fiind un mediu deschis i dinamic, planificarea este mai degrab un proces continuu n care intervin schimbri determinate de nnoirea permanent a informaiilor i de apariia altora noi. Atunci cnd creai un site Web trebuie s fii contient c exist o serie de factori asupra crora creatorul site-ului nu are nici un control. Primul pas n procesul de planificare este identificarea acestor factori i determinarea modului n care acetia pot afecta structura viitoare a site-ului dumneavoastr.

1. Factori care nu pot fi planificai

Factorii pe care creatorul site-ului nu i poate controla i prin urmare nu pot face obiectul unei planificri riguroase sunt urmtorii: Comportamentul utilizatorului. Acest factor implic faptul c nu putei controla cum va accesa utilizatorul informaiile din site-ul dumneavoastr. Web-ul este un sistem permeabil, aceasta nsemnnd c un vizitator poate intra n interiorul site-ului nu numai prin pagina de nceput (pagina home) ci i printr-o pagin oarecare. Vizitatorul site-ului poate ajunge la el parcurgnd o list de rezultate furnizat de un motor de cutare, sau prin intermediul unui link aflat pe un alt site, sau parcurgnd o list de resurse. Oricare dintre aceste metode l poate conduce pe vizitator la o alt pagin din interiorul site-ului, i nu la cea destinat de dumneavoastr a fi pagina Home. n general, creatorul site-ului este tentat s structureze site-ul avnd n minte un anumit tip de acces, cel mai adesea cel care pleac de la pagina de start, ceea ce conduce la alegerea unei anumite structuri, la o anumit organizare a legturilor ntre pagini, etc. Trebuie s avei permanent n vedere 133

faptul c vizitatorul site-ului poate avea un cu totul alt mod de a parcurge site-ul dect cel gndit de dumneavoastr i s-i furnizai de-a lungul ntregului site elemente de navigaie clare care s-l ajute s se orienteze. Browserul utilizatorului. Aa cum am mai discutat, exist o mare varietate de browsere folosite pentru a vizualiza paginile Web. Prin urmare, vizitatorii site-ului vor percepe o imagine diferit a site-ului dumneavoastr, n funcie de tipul de browser folosit. Creatorul site-ului nu poate ti ce tip de browser folosete un anumit vizitator i deci nu are control asupra modului n care va fi afiat coninutul paginilor sale. De exemplu, mai exist nc utilizatori care folosesc versiuni vechi de Netscape sau Explorer, care nu suport anumite extensii HTML. Exist de asemenea nc n uz browsere text, cum este Lynx, care nu suport grafica. Dac vei plasa informaii eseniale n fiiere grafice, de exemplu, aceti utilizatori nu vor avea acces la ele. Din acest motiv este bine s stabilii de la nceput care dorii s fie nivelul de accesibilitate al siteului dumneavoastr din acest punct de vedere. Un alt aspect este nelegerea faptului c HTML este un limbaj care este destinat definirii structurii documentului i nu al modului su de afiare. Este recomandat s evitai specificarea n detaliu a aspectului paginilor sau optimizarea paginilor pentru un anumit tip de browser. Legturile cu pagini externe. ntr-un site Web exist de obicei legturi ctre resurse exterioare site-ului care sunt i ele n afara controlului dumneavoastr. Paginile referite prin aceste legturi i pot schimba adresele, fcnd astfel ca legtura s nu mai fie valabil (legturi perimate). De asemenea pot exista legturi rupte, n cazul cnd serverul pe care este gzduit pagina respectiv are anumite dificulti tehnice. innd seama de imposibilitatea de a controla acest aspect, pot fi adoptate mai multe metode de abordare: Site-ul s nu conin nici o legtur extern sau care s se afle n afara controlului direct al designerului. Este metoda cea mai sigur. Din pcate, aceast strategie anuleaz posibilitatea ca vizitatorul s beneficieze de informaii conexe cu subiectul site-ului dumneavoastr aflate n exteriorul su. Centralizarea resurselor. Este o practic des ntlnit pe Web, aceea de a include toate legturile externe ntr-o pagin special destinat acestora. Beneficiul acestei strategii este c n cazul cnd una dintre aceste legturi externe nu mai funcioneaz, vizitatorul se poate cu uurin rentoarce la pagina de resurse pentru a testa urmtorul link. n plus, cu unele excepii, vizitatorii vor parcurge cel puin o parte a site-ului nainte de a ajunge la pagina de legturi externe i a-l prsi, eventual, definitiv. Ieirea liber. Este cea mai flexibil abordare, permind plasarea legturilor externe oriunde n cadrul paginilor. Dezavantajul ei major este c vizitatorul poate prsi prematur site-ul pentru a urma un anumit link.

Dac nu avei control asupra legturilor de la site ctre exterior, este tot att de adevrat c nu putei controla nici legturile care se fac din exterior ctre site. Acest lucru poate fi dezavantajos, deoarece nu putei ti n ce mod este prezentat legtura ctre site-ul dumneavoastr. Poate c referirea la el este ironic sau ruvoitoare, ns acest lucru este dincolo de controlul dumneavoastr. Tot ceea ce putei face este s creai un site de calitate i cu un coninut valoros, care s conving prin el nsui. Cu toate c elementele prezentate mai sus pot prea descurajante, unele dintre ele prezint totui i avantaje. Astfel, permeabilitatea Web-ului poate lucra n favoarea designerului, cu condiia 134

ca acesta s structureze atent informaiile prezentate i s ofere suficiente elemente de navigaie. O pagin sau un grup de pagini din cadrul unui site pot fi folosite ca referine n alte pagini sau chiar ca elemente constitutive ale unui alt site. De exemplu, un site de tip mono-pagin care face prezentarea unui manual de HTML poate fi folosit ca pagin individual ntr-un site de librrie electronic, sau poate constitui o legtur util din interiorul unui site de design Web, mrind astfel ansele ca pagina respectiv s fie accesat de vizitatori printr-unul dintre aceste puncte.

2. Etapele planificrii site-ului

Procesul de planificare a unui site trebuie s parcurg urmtoarele etape: Stabilirea audienei Stabilirea scopului Definirea obiectivelor Colectarea informaiilor despre subiectul prezentat Stabilirea specificaiilor Stabilirea modului de prezentare

Audiena Pentru a crea un site de calitate i o comunicare eficient a informaiilor, o etap deosebit de important este definirea audienei site-ului. Audiena reprezint publicul cruia i se adreseaz siteul. Stabilirea audienei site-ului dumneavoastr este esenial deoarece contribuie la definirea coninutului paginilor, precum i a organizrii i aspectului su. Un site Web creat pe baza unor informaii precise asupra audienei sale actuale i viitoare are mult mai multe anse de succes dect unul care nu se adreseaz unui public specific. Stabilirea audienei unui site implic doi pai: Definirea publicului int.

Trebuie s stabilii cui se adreseaz site-ul dumneavoastr. Putei, de exemplu s v adresai "persoanelor care studiaz chimia". Dei este un enun care definete ntr-o oarecare msur audiena site-ului, este de dorit ca definirea audienei s fie mai precis dect att. V putei adresa de pild, specialitilor n chimie, i atunci informaiile vor avea un nalt grad de specializare i un nivel tiinific ridicat sau v putei adresa elevilor de liceu interesai de studiul chimiei, sau care vor da examene la aceast disciplin. n acest caz informaiile vor fi de nivel mai general, legate de programa colar i de tipurile de subiecte cu care elevii se vor confrunta la examene. Dac, de exemplu, dorii s creai un site comercial, stabilirea segmentului de pia cruia v adresai este la fel de important. Dac intenionai s vindei produse cosmetice v vei adresa probabil femeilor. Dar aceasta este o reprezentare mult prea general a publicului dumneavoastr. Ai putea s fii mai specific, stabilindu-v drept segment de pia femeile cu vrsta mai mic de 25 de ani. n aceast situaie este mai probabil c vor avea succes produsele de nfrumuseare mai ndrznee, n vreme ce, dac v adresai femeilor de vrst medie, cele mai bine vndute vor fi produsele de ntreinere, cremele anti-rid, etc. Concluzia care se impune este c definirea ct mai precis a audienei este definitorie pentru toate etapele ulterioare ale elaborrii site-ului. Cu ct mai bine definit este audiena, cu att ansele de a crea un site de succes sunt mai mari.

135

Definirea informaiilor necesare care privesc publicul int.

Nu toate informaiile despre publicul int sunt eseniale n elaborarea site-ului. Dac intenionai s v adresai specialitilor n chimie, care anume caracteristici ale acestora sunt importante pentru dumneavoastr? Nivelul de educaie? Aria de specializare? Caracteristici personale, precum nlimea i greutatea? Evident, exceptnd cazul n care intenionai s vindei prin intermediul site-ului echipament de laborator, ultimele informaii sunt inutile. Prin urmare este necesar s identificai informaiile relevante privitoare la audiena site-ului dumneavoastr. Scopul Stabilirea scopului site-ului este etapa n care trebuie s rspundei la ntrebarea "de ce?". De ce dorii s creai acest site? Definiia scopului site-ului reprezint tema conductoare n procesul de construire a acestuia. Un site fr un scop clar i bine definit lanseaz un mesaj neconvingtor i ceos. Vizitatorul se va ntreba, fr ndoial, "La ce servete acest site?" i se va grbi s-l prseasc. Pentru a defini scopul site-ului trebuie s avei n vedere urmtoarele elemente: Aria de cuprindere a subiectului. S presupunem c dorii s creai un site care s conin informaii despre muzica rock a anilor 60. ntr-o asemenea situaie, nu vei defini drept subiect al site-ului muzica rock n ansamblu, deoarece o definire att de vast depete cu mult aria de cuprindere a subiectului dumneavoastr. Audiena. n scopul site-ului trebuie s facei referire i la audiena stabilita anterior. Astfel, scopul site-ului ar putea fi definit n maniera urmtoare: "Site-ul ofer informaii iubitorilor muzicii rock a anilor 60, de vrst medie". Nivelul de detaliere a subiectului. Trebuie s specificai dac v referii doar la grupurile rock reprezentative sau dorii s facei o istorie complet a perioadei.

Beneficiul sau avantajul vizitatorului. Ce are de ctigat o persoan care viziteaz site-ului dumneavoastr? Poate afla informaii inedite despre formaiile preferate, sau poate fi informat cu privire la evoluia lor ulterioar. Stabilirea scopului site-ului determin deciziile ulterioare ale designerului privind mesajul pe care l transmite site-ul. Un scop bine articulat servete ca jalon pentru toate celelalte etape ale procesului de planificare i creare a site-ului. Scopul site-ului poate reprezenta chiar prima informaie care le este oferit vizitatorilor, la intrarea pe prima pagin. Obiectivele Dup ce ai stabilit audiena site-ului, care sunt informaiile privitoare la publicul int, precum i scopul su, pasul urmtor const n combinarea tuturor acestor informaii i formularea unor obiective specifice ale site-ului dumneavoastr. Obiectivele reprezint o detaliere a scopului general al site-ului, coninnd informaiile specifice care vor conduce la ndeplinirea scopului pentru care a fost creat site-ul. De exemplu, dac scopul unui site este "s ofere informaii despre oraul ZZZ" , acesta poate fi dus la ndeplinire prin intermediul unor obiective specifice i variate cum ar fi: informaii despre aezarea geografic a oraului, despre dezvoltarea economic, despre viaa cultural, obiective turistice, etc. Cu alte cuvinte, n vreme ce scopul site-ului comunic ce avei de gnd s facei, obiectivele comunic ce informaii vei oferi pentru a v ndeplini scopul propus.

136

Spre deosebire de scopul site-ului, obiectivele se pot modifica n timp, pe msur ce apar noi informaii despre publicul int sau despre subiectul site-ului, cu ajutorul crora putei susine mai bine scopul su. Colectarea informaiilor despre subiect Informaiile referitoare la subiectul site-ului includ att informaiile on-line ct i sursele clasice de informaii. n aceast etap vei colecta nu numai informaii legate de subiectul site-ului care vor fi prezentate utilizatorului ci i informaiile i cunotinele de care avei nevoie pentru realizarea site-ului. Paii necesari n construirea coleciei de informaii necesare sunt: Stabilirea informaiilor necesare, att cele pe care le vei furniza vizitatorului ct i cele care v sunt necesare dumneavoastr Determinarea modului cum vei obine aceste informaii. n aceast etap trebuie s identificai sursele de documentare. Informaiile despre subiectul ales le putei gsi pe Web, n literatura de specialitate, n diverse baze de date.

Modul de reactualizare a informaiilor. Dac informaiile pe care dorii s le prezentai sunt dinamice i se perimeaz cu repeziciune, trebuie s stabilii cum intenionai s le actualizai i care este intervalul de timp ntre dou reactualizri. De exemplu, dac intenionai s creai un site care s prezinte tiri sau date despre vreme, ele vor trebui reactualizate zilnic sau chiar mai frecvent. Dac site-ul prezint informaii despre istorie, evident c informaiile vor fi reactualizate mult mai rar, eventual la apariia unor noi descoperiri arheologice, de exemplu. Specificaiile Stabilirea specificaiilor pentru un site reprezint o detaliere a obiectivelor sale i definirea unor cerine sau a unor restricii. Specificaiile descriu n detaliu ce informaii vor fi oferite n paginile site-ului i cum vor fi ele prezentate. De exemplu, dac unul dintre obiectivele unui site este "furnizarea de legturi ctre surse bibliografice referitoare la subiect" , atunci specificaiile vor preciza care sunt aceste surse bibliografice, care sunt adresele lor URL, cte astfel de adrese vor fi incluse ntr-o pagin, etc. Specificaiile trebuie s identifice toate resursele necesare atingerii obiectivelor: link-uri, fiiere grafice, fiiere de sunet sau video, alte elemente care vor fi incluse n site: formulare, imagini hart, scripturi. De asemenea, n cadrul specificaiilor trebuie stabilite i elementele care nu vor fi incluse n pagini (dac este cazul). De exemplu, se poate specifica s nu fie folosite anumite extensii HTML, sau formulare, fiiere care s depeasc anumite dimensiuni, etc. Modul de prezentare Planificarea modului de prezentare implic o serie de decizii care vor servi drept puncte de reper n etapa de construire efectiv a site-ului. Aceast etap poate include: Crearea unor template-uri pentru site Crearea unor mostre de documente HTML, imagini hart, sau formulare Ealonarea n timp a etapelor de creare a site-ului.

137

Capitolul 15
Designul site-ului Odat parcurs etapa de planificare, avnd clare audiena, scopul, obiectivele i specificaiile site-ului, putei trece la etapa de creare efectiv. Pentru ca site-ul dumneavoastr s aib un aspect plcut, o bun organizare, instrumente de navigare eficiente trebuie s cunoatei i s aplicai regulile fundamentale de Web design. Cnd suntei n faza de concepere a designului principalul dumneavoastr obiectiv este s creai un aspect atractiv i s oferii vizitatorului site-ului un sentiment de satisfacie, pe msur ce acesta parcurge paginile. Designul unui site trebuie s echilibreze performanele browserului, cu estetica i funcionalitatea site-ului. n etapa de design sunt luate deciziile de ordin practic care vor conduce la ndeplinirea obiectivelor stabilite: cte imagini sau elemente grafice vei include n pagin, ct de mult text vor conine paginile, ce texte sau imagini vor fi folosite drept legturi.

1. Principiile designului web

Pentru a lua deciziile corecte n ceea ce privete designul unui site trebuie s avei n vedere cteva principii de baz: Asocierea semnificaiilor. Folosii-v de puterea hypertextului pentru a stabili legturi ntre informaiile nrudite ca semnificaie. Meninerea competitivitii. Deoarece Web-ul este un mediu foarte competitiv, asigurai-v c designul site-ului se menine la cel mai sczut cost posibil, din punctul de vedere al vizitatorului. Acest cost include timpul de ncrcare al paginilor, aplicaiile suplimentare necesare pentru vizualizarea optim a paginilor precum i efortul depus de vizitator pentru a nelege informaiile prezentate.

138

Folosirea eficient a resurselor. Alegei pentru site-ul dumneavoastr acele elemente care vin n ntmpinarea necesitilor utilizatorului, i sunt ct mai eficiente posibil din punctul de vedere al dimensiunii fiierelor, al timpului de acces i al ntreinerii ulterioare. Concentrarea pe necesitile utilizatorului. Acesta este, poate, cel mai important principiu de Web design i, paradoxal, cel mai adesea ignorat. Un site Web nu se construiete pentru a satisface gustul designerului (sau al clientului pentru care lucreaz) i nici pentru a etala cunotinele sale vaste asupra celor mai noi tehnici de programare Web, ci pentru a veni n ntmpinarea nevoii de informaii a vizitatorilor si. Focalizarea asupra utilizatorului este prioritatea principal a unui site de calitate. nelegerea permeabilitii. Acest principiu se refer la nelegerea i asumarea faptului c vizitatorul poate accesa un site prin oricare pagin a sa. Din acest motiv este de dorit ca informaiile din cadrul unei pagini s se auto-susin fr a depinde de informaiile din restul site-ului. Dac acest lucru nu este posibil, este obligatorie prezena unor instrumente de navigaie eficiente care s permit vizitatorului orientarea cu uurin n interiorul site-ului. Crearea unui aspect plcut, coerent i fluent. Paginile site-ului trebuie s ofere impresia unui tot bine organizat, elementele vizuale (icon-uri, elemente de navigare) trebuie s fie coerente pe tot parcursul site-ului, fiecare pagin trebuie s conin indicii asupra identitii site-ului i asupra scopului ei. Susinerea interactivitii. Chiar dac nu folosii formulare care asigur un grad nalt de interactivitate cu vizitatorii site-ului, este obligatorie prezena unor informaii de contact (adresa de mail a Webmaster-ului, cel puin) astfel nct utilizatorii s poat obine informaii suplimentare sau s poat comunica eventualele probleme aprute la parcurgerea site-ului. Susinerea navigaiei. Asigurarea unor instrumente de navigaie eficiente este una dintre condiiile eseniale ale unui site de calitate. Se spune c un site bun este acela n care vizitatorul nu este niciodat obligat s apese butonul Back al browserului.

2. Organizarea unui site

Buna organizare a site-ului este unul dintre elementele cheie ale succesului su. Modul de organizare depinde de scopul, obiectivele i subiectul site-ului i se bazeaz pe principiile de design enunate mai sus. n funcie de structura lor, site-urile se mpart n mai multe categorii: site-uri liniare, formate dintr-o singur pagin (mono-pagin) site-uri liniare formate din mai multe pagini (multi-pagin) site-uri cu structur ierarhic site-uri cu structur de tip Web Legturile dintre pagini trebuie s fie corespunztoare tipului de site pe care l construii. Site-urile liniare mono-pagin Acest tip de site este, aa cum indic i numele, format dintr-o singur pagin. Aceast structur se folosete atunci cnd informaiile prezentate sunt sub form de text care se poate mpri firesc n seciuni mai mici. Vizitatorii pot parcurge ntreaga pagin derulnd-o dar, de obicei, la nceputul paginii exist o list de legturi care are rol de Cuprins. Acestea sunt nite legturi interne (ancore) care conduc rapid vizitatorul la seciunea care l intereseaz, fr a mai derula ntreaga pagin. mprirea coninutului paginii n seciuni mai mici se poate face folosind 139

linii orizontale. Este indicat ca la fiecare nou seciune s inserai o legtur intern ctre partea superioar a paginii unde se afl Cuprinsul. Site-urile liniare multi-pagin Structura de acest tip se folosete n situaia cnd informaiile prezentate se succed ntr-o ordine secvenial, de la nceput la sfrit, informaiile prezentate ntr-o pagin bazndu-se pe cele din pagina anterioar. Pentru a-l ndruma pe vizitator s parcurg site-ul n ordine, fiecare pagin trebuie s conin o legtur cu pagina urmtoare, precum i cu cea anterioar. De asemenea, este necesar s inserai i o legtur cu prima pagin a site-ului care trebuie s conin Cuprinsul, pentru a facilita i saltul direct la o anumit pagin. ntr-un site cu o astfel de structur paginile nu trebuie s fie prea lungi (de dorit ar fi s nu depeasc un ecran) pentru a face navigarea mai comod. Cu toate c acest tip de organizare este logic, nu trebuie s uitai principiul permeabilitii. Pentru un vizitator care va intra n site printr-o pagin oarecare, indicaii de navigare cum ar fi "nainte" , "napoi" ar putea s nu aib prea mult neles. Site-urile cu structur ierarhic Site-urile de acest tip sunt cele mai numeroase pe Web. Un astfel de site este format dintr-o pagin de baz (Home) de nivel zero, care conine legturi ctre alte pagini, fiecare pagin coninnd cte o parte a subiectului site-ului. Fiecare dintre aceste pagini de nivel unu poate avea, la rndul su, legturi cu alte pagini, detaliind subiectul i furniznd informaii specifice. Un exemplu de site de acest tip este o librrie virtual. Pagina Home ar putea conine legturi ctre diverse categorii: Beletristic, Istorie, Politic, Economie, Calculatoare i Internet. Dac un vizitator este interesat de un manual de programare n Perl, el va alege legtura ctre Calculatoare i Internet i va ajunge ntr-o pagin de nivelul unu unde va gsi legturi ctre Programare, Internet, Hardware. Va alege legtura Programare care va deschide o pagin de nivelul doi care va conine o list de titluri, printre care i manualul cutat. Atunci cnd concepei structura unui astfel de site, trebuie s acordai o mare atenie organizrii logice i fluente a site-ului. Fiecare pagin trebuie s conin o legtur ctre pagina Home astfel nct vizitatorul s poat reveni la nceput fr s fie obligat s strbat toate nivelele. Nu legai prima pagin de prea multe pagini de nivelul unu ci ramificai-le n adncime. Dac siteul este de mari dimensiuni, introducei n partea superioar a fiecrei pagini o bar de navigare care informeaz vizitatorul despre locul unde se afl. Revenind la exemplul cu librria, un astfel de instrument de navigare ar putea arta aa: Home > Calculatoare > Programare. n plus, este indicat s oferii o bar de navigare secundar la baza paginii. Site-urile de tip reea. Aceste site-uri au o structur liber. Ele sunt formate din mai multe pagini, fiecare putnd avea legtur cu oricare alt pagin. Exist i aici o pagin Home, ns de la ea, vizitatorul poate naviga prin site fr a urma un drum precis. n general, acest tip de site este potrivit pentru subiectele care nu au o structur logic intern, subiecte recreaionale sau distractive. Dac dorii s creai un site de acest tip, trebuie s avei grij s oferii n fiecare pagin, pe lng legturile cu alte pagini, o legtur ctre pagina Home. n plus, asigurai-v c materialul dumneavoastr este adecvat acestui tip de site deoarece altfel site-ul va purta amprenta neconcordanei ntre subiectul abordat i modul su de organizare.

3. Metodologia de construire a site-ului

140

Dei nu exist un mod unic de desfurare a procesului de construire a unui site, exist trei tipuri de abordri posibile, pe care creatorul site-ului le poate alege sau combina, n funcie de necesiti. Metoda "Top-Down" Dac designerul are nc de la nceput o idee clar asupra coninutului site-ului, aceast abordare este cea mai potrivit. n acest tip de metodologie, este creat mai nti pagina de nceput a site-ului (pagina Home) i apoi celelalte pagini. Paginile pot conine un minim de informaii, urmnd ca la dezvoltarea ulterioar a site-ului, ele s fie mbogite. Avantajul major al acestei abordri este acela c permite continuitatea vizual i de coninut, deoarece toate paginile vor fi construite n acord cu pagina de start. O metod foarte bun de a realiza acest lucru este crearea unor template-uri care s conin acelai tip de elemente pentru toate paginile i care vor fi folosite drept tipare la momentul scrierii codului HTML pentru paginile respective. Metoda "Bottom-Up" Aceast abordare se folosete cnd designerul nu cunoate de la nceput care vor fi structura i aspectul final al site-ului, dar cunoate aspectul i coninutul unor pagini din cadrul su. Aceast situaie poate aprea cnd dorii ca site-ul s conin pagini deja existente, care au fost create n procesul de dezvoltare al altui site, de exemplu. Chiar dac nu deinei pagini create deja de la care s pornii, aceast abordare permite crearea unor pagini individuale care ndeplinesc anumite obiective i care pot fi legate apoi de o pagin Home. Avantajul abordrii "Bottom-Up" este acela c, la construirea paginilor individuale, nu mai suntei constrns la respectarea unui anumit stil, consecvent cu cel din pagina Home. Totui, ajustarea ulterioar a paginilor n sensul realizrii unui aspect unitar, este necesar. Metoda incrementrii Aceast metod const n construirea unei pagini de start i a unor pagini individuale legate de acesta, avndu-se n vedere crearea unor pagini intermediare, pe msura necesitilor. Metoda se folosete atunci cnd este necesar construirea rapid a unui site care urmeaz a fi dezvoltat ulterior, n loc de a-l construi n ntregime de la nceput. Este o metod nerecomandat nceptorilor, deoarece prin adugirile ulterioare exist riscul de a obine un site defectuos organizat i lipsit de unitate.

4. Tehnici de design web

Pentru a realiza designul unui site sunt folosite o serie de tehnici cu ajutorul crora paginile capt contur, att din punct de vedere vizual ct i din punct de vedere al organizrii legturilor i al amplasrii coninutului n pagini. n continuare sunt prezentate cteva dintre aceste tehnici, fiecare dintre ele referindu-se la cte un aspect al designului site-ului. Schia site-ului Odat ce v-ai decis asupra modului n care va fi structurat site-ul este foarte bine ca nainte de a ncepe scrierea efectiv a codului HTML pentru fiecare pagin n parte, s realizai o schi a ntregului site. Putei folosi n acest scop Microsoft Word sau orice alt procesor de text. Pentru nceput creai un document nou n care listai punctele majore pe care dorii s le acoperii n pagina Home. Facei de asemenea o list a elementelor grafice pe care intenionai s le includei, nsoite de indicaii privind aezarea lor n pagin. Stabilii care sunt paginile de nivel unu i ce informaii

141

dorii s oferii n cadrul lor, precum i paginile subordonate acestora care vor cuprinde detalierea subiectelor anunate n paginile de nivel unu. Pentru a avea o imagine ct mai exact a structurii site-ului nc din faza de schiare a sa este recomandat s folosii bara de instrumente Outlining din meniul Tools > Customize din Word. Aceasta v permite s stabilii nivelul paginilor i s realizai cu uurin ramificarea lor n adncime. O alt metod pentru a realiza schia site-ului o constituie graficul (sau harta) site-ului. Dac nu dorii s v complicai folosind un editor de text sau un program de grafic, putei realiza o astfel de schi i pe hrtie, cu creionul. Desenai cte un dreptunghi pentru fiecare pagin din site, specificnd n interiorul su scopul i obiectivele paginii, elementele i aranjarea lor n pagin. Apoi unii dreptunghiurile prin sgei pentru a specifica traseele pe care le poate parcurge utilizatorul. Sgeile reprezint de fapt legturile dintre pagini. Avei grij ca spre pagina Home s indice toate sgeile, pentru a asigura astfel o legtur cu ea din orice pagin a site-ului. n acest mod putei planifica pentru fiecare pagin ce urmeaz s vad, s neleag i s fac vizitatorul acesteia, precum i unde se poate deplasa din pagina respectiv. Oricare ar fi metoda folosit pentru a schia site-ul, la fiecare pagin trebuie s v punei urmtoarele ntrebri: Ce doresc s afle vizitatorul din aceast pagin? Ce doresc s fac vizitatorul n acest moment? Ce doresc s simt vizitatorul parcurgnd pagina? Unde doresc s mearg vizitatorul n continuare?

Desigur, n ultim instan comportamentul i impresiile vizitatorului scap controlului designerului, ns un site n care fiecare pagin d rspunsuri clare i limpezi acestor ntrebri are foarte multe anse de a ntruni aprecierile pozitive ale vizitatorilor si. Pagina de intrare n site (pagina splash) Exist multe site-uri care nainte de pagina Home au o pagin de intrare n site, numit pagin splash. Scopul unei astfel de pagini este identificarea rapid a obiectului site-ului n timp ce se ncarc restul de date. Pagina splash are pentru site acelai rol pe care l are coperta unei cri sau prima pagin a unei reviste. Aceast prim pagin trebuie s se ncarce rapid, s aib un impact vizual puternic i s comunice esenialul despre subiectul site-ului sau compania creia i aparine site-ul. Exist opinii divergente n legtur cu folosirea i utilitatea paginii splash ntr-un site. Mai ales dac face apel la elemente multimedia, sunet, grafic, animaie complex care ncetinesc timpul de ncrcare, pagina splash poate aduce mai degrab deservicii site-ului. n plus, pagina splash poate fi resimit de vizitator ca o barier n accesul imediat la informaiile din interiorul site-ului. Pagina Home Dei aspectul i coninutul paginii Home poate varia foarte multe de la un site la altul, exist cteva elemente comune prezente n orice pagin de start: Identificarea firmei sau companiei creia i aparine site-ul (dac este cazul) Descrierea scopului site-ului Descrierea structurii site-ului. Pagina Home are i funcia de Cuprins al site-ului oferind indicaii vizitatorilor asupra subiectelor abordate

142

Stabilirea relaiilor ntre seciunile de nivel unu ale site-ului i cele subordonate lor. Aceasta se realizeaz prin intermediul barelor de navigare, butoanelor, hrilor de imagini sau listelor de legturi. Furnizarea informaiilor de contact.

Paginile din interior Paginile de nivel unu reprezint diviziunile majore ale subiectului general al site-ului. Exist tentaia de a include prea multe informaii detaliate la acest nivel. Dac site-ul acoper un subiect vast, cu o cantitate mare de informaii specifice, este bine s lsai detalierea acestora pentru paginile de nivel doi. Paginile de nivel unu trebuie s conin o descriere succint a subiectului acoperit precum i legturi ctre paginile de nivel doi care detaliaz fiecare parte a subiectului. O tehnic des utilizat este plasarea resurselor suplimentare n pagini de nivelul trei. De exemplu o pagin de nivelul doi care ofer pe lng text i imagini explicative ale unui anumite noiuni poate fi legat de pagini de nivel trei care conin imaginile. Cnd vizitatorul face click pe un anumit text aflat n pagina de nivel doi se deschide pagina de nivel trei cu imaginea explicativ. Avantajul acestei abordri este descongestionarea paginilor de nivelul doi care cuprind detalierea subiectului. Schia dumneavoastr trebuie s cuprind, pe lng modul de organizare a paginilor, i o list ct mai complet a elementelor pe care dorii s le includei n fiecare pagin (imagini, formulare, fiiere multimedia, etc.). Fragmentarea informaiilor Omul poate procesa o cantitate limitat de informaii ntr-o anumit unitate de timp. Din acest motiv, una dintre sarcinile specifice n designul Web este fragmentarea informaiilor n secvene care s nu depeasc posibilitile de cuprindere ale utilizatorului. Cantitatea de informaii cuprins ntr-o pagin nu trebuie s-l copleeasc pe vizitatorul paginii sau s mreasc timpul ei de ncrcare. De asemenea, modul de fragmentare al informaiei trebuie s focalizeze atenia vizitatorului asupra principalelor subiecte abordate n pagin i s l ajute s ia cunotin n mod gradat de subiectul prezentat. Fragmentarea corect a informaiilor este n avantajul designerului, deoarece l ajut s creeze pagini reutilizabile. Dac fiecare pagin pe care o vei crea servete la ndeplinirea unui anumit scop, putei include aceast pagin fie direct, fie ca o resurs util i n alte site-uri pe care le creai ulterior i care au subiecte conexe cu pagina respectiv. n cadrul site-ului fragmentarea informaiilor conduce la stabilirea modului n care va fi detaliat subiectul, la determinarea numrului de pagini necesare pentru acesta precum i a nivelului paginilor. Dei divizarea subiectului n pri mai mici este o tehnic deosebit de util, nu abuzai totui de puterea hypertextului. O fragmentare excesiv a subiectului ntr-un mare numr de pagini este la fel de obositoare ca i prezentarea acestuia n bloc. Un design eficient anticipeaz nevoia vizitatorului de a obine informaii suplimentare i furnizeaz la momentul oportun legturi ctre paginile care detaliaz acel punct. n cadrul unei pagini modul de fragmentare al informaiilor ine de logica intern a subiectului prezentat. Pentru a diferenia prile constitutive ale subiectului unei pagini o mare importan o are organizarea textului n cadrul paginii. Cei mai muli dintre cei care navigheaz pe Web obinuiesc s "scaneze" paginile n cutare de informaii. Ei citesc mai nti titlurile, listele, i primele fraze dintr-un paragraf. Este bine s inei seama de acest lucru cnd organizai textul n pagin. Coninutul paginii trebuie s fie ct mai uor de citit. Folosii paragrafe scurte, desprite prin linii libere, evitai frazele prea lungi i folosii n mod judicios titlurile. Accentuai prile pe care vrei s le scoatei n eviden n text prin ngroare sau scrierea lor cu alt culoare, dar nu n exces.

143

Abuzul de culori sau de texte scrise cu caractere aldine fac pagina ncrcat i greoaie. Este indicat s v limitai la un numr redus de tipuri de font. Cele mai apreciate sunt Verdana i Arial, deoarece sunt lizibile i elegante. Este mai bine s evitai folosirea tipului Times New Roman, dei este un tip foarte folosit n editarea de texte. Spre deosebire de textele tiprite, pe monitor citirea se face cu 25% mai ncet deoarece monitorul adaug fonturilor un anumit grad de neclaritate (fuzziness), mai accentuat la fonturile cu serife, aa cum este Times New Roman. Nu aranjai textul n pagin pe dou coloane astfel nct vizitatorul s fie nevoit s revin n partea superioar a paginii pentru a citi ce-a de-a doua coloan. Acest format este potrivit pentru ziare i reviste dar nu i pentru o pagin Web deoarece rupe cursivitatea deplasrii n cadrul site-ului. Legarea paginilor Modul n care vei realiza legturile dintre pagini depinde de structura site-ului. Dac optai pentru o structur ierarhic, legturile din interiorul site-ului vor fi adaptate acestei structuri. Avantajul structurii ierarhice este c ofer utilizatorului posibilitatea unei navigri logice, plecnd de la informaiile generale ctre cele particulare. Dezavantajul acestei tehnici este c utilizatorul trebuie s urmeze o cale prestabilit pentru a ajunge la o anumit informaie, care se poate afla cteva linkuri distan de pagina Home. O alt manier de a realiza legturile din interiorul site-ului este de a lega fiecare pagin de toate celelalte. Vei obine astfel o structur ne-ierarhic care are avantajul c fiecare pagin se afl la distan de un link de oricare alta, inclusiv de pagina Home. Pentru site-urile de dimensiuni reduse o astfel de structur poate funciona bine, ns pentru site-urile cu un mare numr de pagini numrul de legturi crete rapid iar navigarea n interiorul site-ului devine foarte dificil. n plus, utilizatorul nu are la dispoziie o cale ierarhic prin care poate ajunge la o informaie specific. Instrumentele de navigare Pentru a realiza o navigare logic i eficient n cadrul site-ului instrumentele de navigare trebuie s fie perfect adaptate modului n care sunt create legturile dintre pagini i n plus, s ofere indicii vizuale asupra funciei lor. Pentru a crea un aspect vizual unitar al ntregului site i pentru a nu deruta vizitatorul, este recomandat ca instrumentele de navigare s fie aceleai n toate paginile. Stabilii de la nceput aspectul icon-urilor, butoanelor sau textului pe care le vei folosi drept legturi i pstrai-l pe parcursul ntregului site. Aceast tehnic ofer site-ului coeren i unitate i stabilete imediat identitatea fiecrei pagini n cadrul site-ului. n plus, folosirea repetat a acelorai elemente grafice de navigare mrete eficiena browserului deoarece acestea sunt ncrcate la deschiderea primei pagini i stocate n memoria cache, fr a mai fi necesar ncrcarea lor la fiecare nou pagin. Instrumentele de navigare trebuie s fie ct mai uor de neles i localizat. Dac folosii o bar de navigare plasai-o acolo unde vizitatorii sunt obinuii s o caute: n partea superioar a paginilor, n stnga sau n dreapta paginii. Folosii o bar secundar de navigare la baza paginii, aceasta l va ajuta pe vizitator s se deplaseze ntr-o alt seciune a site-ului fr a mai fi nevoit s deruleze pagina n sus pn la bara principal de navigare. Dac site-ul este de dimensiuni mari este o idee bun s creai o pagin special care s reprezinte harta site-ului i s plasai legtura ctre ea n bara principal de navigare din cadrul fiecrei pagini. Aceasta va permite vizitatorului s se orienteze n interiorul site-ului, oricare ar fi pagina prin care a intrat n site. Harta va conine legturi ctre toate paginile, grupate conform modului de organizare al site-ului.

144

De asemenea, dac folosii o structur ierarhic, este util prezena unui instrument suplimentar care s informeze vizitatorul asupra locului unde se afl n cadrul site-ului i a cii prin care a ajuns aici, n maniera urmtoare: Home > Pagina de nivel unu > Pagina de nivel doi > Pagina curent. Informaiile despre site i pagina curent Fiecare pagin a site-ului trebuie s conin indicaii privind scopul i obiectivele site-ului precum i obiectivele specifice acelei pagini. n faza de planificare ai colectat informaii privind publicul int, ai formulat scopul i obiectivele ntregului site. Acestea reprezint elementele fundamentale n jurul crora este construit site-ul. Fiecare pagin a sa are drept scop ndeplinirea unuia dintre obiective. Aceste informaii trebuie comunicate n pagina respectiv. Vizitatorul nu trebuie forat s ghiceasc ce rol are o anumit pagin n cadrul site-ului. Multe site-uri prezente pe Web conin o pagin special cu informaii de contact precum i o pagin care conine informaii despre site i creatorii si (pagina About). Totui este recomandat ca aceste informaii s fie incluse i n subsolul paginilor din interiorul site-ului. Este bine s includei aici informaii despre copyright, data ultimei reactualizri a paginii, despre organizaia sau compania creia i este dedicat site-ul (dac este cazul) i informaii de contact (adres de mail, numr de telefon, adres potal). Organizarea paginii cu ajutorul tabelelor Unul dintre aspectele pe care trebuie s le avei n vedere la construirea unei pagini este rezoluia ecranului. Muli dintre vizitatorii paginii folosesc rezoluia de 800x600 de pixeli. O pagin cu limea mai mare de 600 de pixeli poate face necesar derularea pe orizontal a paginii, care pentru muli vizitatori este obositoare i incomod. Din acest motiv, este recomandat ca tot coninutul paginii s fie inclus ntr-un tabel de baz cu limea de 600 de pixeli. Tabelul de baz Construirea paginii ncepe cu un tabel de baz, cu limea (width) de 600 de pixeli, o linie i o coloana. Aliniai tabelul la marginea din stnga sau centrat n pagin. Setai chenarul (border) la valoarea "0" pentru a-l face invizibil pentru vizitator. ntregul coninut al paginii va fi plasat n interiorul acestui tabel. Asigurai-v c ai setat culoarea de fond (bgcolor) pentru pagina dumneavoastr. Opiunea "default" las browserul s controleze culoarea fondului. De cele mai multe ori aceasta este alb, dar este mai bine s avei certitudinea c ea va aprea la fel n orice browser, aa nct setai bgcolor="white" sau orice alt culoare dorii. n funcie de felul cum dorii s v organizai site-ul i de scopul acestuia vei hotr unde dorii s plasai bara principal de navigare. Bara de navigare n stnga paginii Dac ai decis s optai pentru plasarea barei de navigare n partea stnga (cea mai uzual aezare), vei include n tabelul de baz un tabel cu 2 sau 3 coloane. Dac folosii un tabel cu 2 coloane setai distana ntre celule (cellpadding) la valoarea "4" pentru a spaia textul de marginea tabelului. Putei specifica limea celulelor fie n pixeli fie n procente.

145

Dac folosii un tabel cu 3 coloane, coloana din centru poate fi folosit ca "tampon" , care va separa coninutul coloanei din stnga de coninutul celei din dreapta. Setai atributul border al tabelului la "0" pentru ca marginea s nu fie vizibil. Odat stabilite aceste atribute, putei aduga n tabel attea linii cte sunt necesare sau putei include un alt tabel n cel existent. Bara de navigare n partea superioara Pentru a construi o bar de navigare n partea de sus a paginii, trebuie s includei n tabelul de baz un tabel cu o singura coloana. Setai atributele cellpadding = "4" i border = "0". n prima linie a tabelului vei introduce logo-ul sau titlul site-ului, n linia a doua vei afia bara de navigare, iar pe liniile urmtoare, coninutul paginii. Bara de navigare n partea dreapta Este o abordare mai puin utilizat. Cel mai adesea este folosit pentru paginile de tip catalog de produse, unde imaginile i descrierea produselor sunt plasate n coloana din stnga, care ocup cea mai mare parte a spaiului. Folosirea tabelelor pentru organizarea coninutului paginii este o practic foarte folosit. Tabelele vor pstra imaginile i textul acolo unde le-ai plasat. Putei include i alte tabele n interiorul celor pe care le-ai creat, n funcie de modul n care sunt organizate informaiile i de aspectul pe care dorii s l dai paginii.

5. Greeli de design
n procesul de creare a unui site pot aprea o serie de greeli de design, cele mai multe datorate nerespectrii tehnicilor i principiilor prezentate anterior. Pagini fr legturi ("fundturi") Una dintre cele mai frustrante situaii n care se poate gsi o persoan care navigheaz pe Web este o pagin fr instrumente de navigare i fr nici un indiciu privind site-ul cruia i aparine. Desigur, site-ul din care face parte pagina poate fi localizat observnd prima parte a adresei URL a paginii, care apare n bara de adrese a browserului. Dar a fora vizitatorul s efectueze aceast manevr este cu totul nerecomandat. Cel mai probabil acesta nu se va osteni s caute pagina Home a unui asemenea site ci l va prsi definitiv. Evitai s creai asemenea pagini. Prezena unor "fundturi" ntr-un site denot faptul c designerul nu a neles caracterul permeabil al Web-ului i ideea c un vizitator poate intra n site prin oricare pagin a sa. Pericolul construirii unor astfel de pagini apare mai ales n cazul site-urilor liniare multi-pagin, n care designerul dorete s conduc vizitatorii de-a lungul site-ului pe un traseu liniar, prestabilit. Aceasta nu nseamn c acest tip de site-uri nu trebuie folosit, mai ales dac informaiile prezentate sunt adecvate acestui mod de prezentare. Trebuie ns acordat atenie instrumentelor de navigare care trebuie astfel concepute nct vizitatorul s poat ajunge cu uurin cel puin la pagina Home. n plus, informaiile despre site i pagina curent nu trebuie s lipseasc din subsolul fiecrei pagini. O variaie a acestor pagini de tip "fundtur" o constituie paginile Home care ofer informaii prea puine sau lipsite de semnificaie. Destul de des pot fi ntlnite pe Web pagini Home care nu ofer nici un fel de indicii asupra structurii sau coninutului site-ului, fr a mai vorbi de scopul i obiectivele sale. Instrumentele de navigaie sunt absente, preferndu-se folosirea unor imagini sau texte cu prea puin semnificaie pentru a realiza accesul n diferitele seciuni ale site-ului. Poate c este o abordare avangardist, dar pentru marea majoritate a vizitatorilor este neplcut s ajung ntro asemenea pagin aa nct este mai bine s respectai regulile clasice de design prezentate.

146

Pagini "uriae" Dac paginile "fundtur" ofer prea puine indicii vizitatorului, exist i reversul lor: paginile "uriae". Aceste pagini sunt ncrcate pn la refuz cu informaii, liste, imagini, link-uri i alte elemente. Paginile de acest fel ridic dou mari probleme: Timpul de acces. Mai ales dac pagina conine foarte multe imagini, timpul de ncrcare al paginii poate fi foarte mare Suprancrcarea cu informaii. Dac vei pune prea mult informaie ntr-o singur pagin vizitatorul acesteia nu va fi capabil s o proceseze.

Exist opinii care spun c lungimea unei pagini nu ar trebui s depeasc un ecran pentru a se evita ca vizitatorul s deruleze pagina pe vertical. O asemenea cerin este prea drastic i poate fi adesea n dezavantajul prezentrii explicite a informaiilor. Fragmentarea subiectului trebuie s se fac n funcie de logica lui intern i nu de reguli arbitrare cum este mrimea ferestrei browserului. Exist situaii n care paginile lungi ndeplinesc cel mai bine obiectivele urmrite. De exemplu, n paginile de prezentare ale unor produse, pe un site comercial, plasarea descrierii produsului pe dou sau mai multe pagini rupe cursivitatea prezentrii i se poate solda cu pierderea unor poteniali clieni. Analog, dac pagina conine o list lung de elemente nrudite, ruperea listei este arbitrar i dezavantajoas. Pe de alt parte, aglomerarea de informaii la nivelul unei singure pagini, mai ales cnd ntre seciunile paginii nu exist o legtur intrinsec face ca pagina s apar ca un amalgam din care vizitatorul va extrage cu greu informaiile care l intereseaz. Dac este necesar s folosii pagini foarte lungi nu uitai s oferii pe parcursul paginii ancore care s conduc vizitatorul la nceputul seciunilor principale, precum i n partea superioara, respectiv inferioar a paginii. Dac pagina conine mult text nu o ncrcai suplimentar i cu imagini sau cu elemente multimedia deoarece timpul de acces va crete foarte mult. Excesul de elemente multimedia Folosirea fr discernmnt a elementelor multimedia (imagine, sunet, video) precum i folosirea n exces a celor mai noi tehnologii Web este adesea duntoare pentru site. Dac v adresai unei audiene despre care presupunei c nu dispune de conexiuni rapide, de ultimele versiuni de browsere sau de aplicaiile necesare executrii i afirii corecte a unora dintre elementele din paginile site-ului, este mai bine s nu includei aceste elemente. Astfel, dei aplicaiile create cu Macromedia Flash sunt spectaculoase i se pot realiza efecte speciale deosebit de atractive, un astfel de fiier poate ajunge cu uurin la dimensiuni care depesc 1 megabyte, ceea ce ncetinete considerabil viteza de ncrcare a paginii. n plus, pentru vizualizarea corect a acestora, vizitatorul trebuie s descarce plug-in-ul Shockwave n cazul cnd nu l are deja instalat pe computerul propriu. Este foarte neplcut pentru vizitator s efectueze toate aceste operaii doar pentru a constata c informaiile prezentate n aceast form puteau fi tot att de bine prezentate ca text sau imagini obinuite. O soluie de compromis este aceea ca, simultan cu includerea unui astfel de fiier, s se pun la dispoziia vizitatorului o opiune de "eludare" de tip "skip intro" , atunci cnd prezentrile sunt folosite doar cu rol de splash screen, ca ecran de deschidere a site-ului, de exemplu. n plus, folosirea prezentrilor Flash fr ca acestea s serveasc unui scop bine definit nu face altceva dect s distrag atenia vizitatorului de la subiectul site-ului. O alt greeal destul de des ntlnit este includerea fiierelor audio, fr ca acestea s aib legtur cu scopul site-ului. Exist designeri care consider c furnizarea unei muzici de fundal

147

sporete atractivitatea site-ului. n realitate se ntmpl exact contrariul. n afara situaiei cnd subiectul site-ului este legat de muzic sau cnd fiierele de sunet vin s completeze informaiile prezentate n pagini, muzica de fundal nu face altceva dect s ncetineasc ncrcarea paginilor i s-l irite pe vizitator, prin repetare. Dac este necesar s includei fiiere de sunet, lsai vizitatorului posibilitatea de a opta pentru deschiderea lor prin intermediul unei legturi, mai ales n cazul n care este vorba despre fiiere de mari dimensiuni. Este recomandat s procedai la fel i n cazul fiierelor video, avertizndu-l pe vizitator c pagina respectiv se va deschide mai greu. Pagini inegale Paginile inegale conin informaii foarte diferite ca importan sau ca nivel de detaliere. Cel mai adesea se confrunt cu aceast problem paginile Home n care sunt incluse link-uri ctre noile pagini create n procesul de dezvoltare a site-ului. Este foarte uor s cdei n greeala de a include noile legturi n pagina Home fr a mai respecta ierarhia stabilit n etapa de organizare a site-ului. Dac site-ul la care lucrai necesit crearea unor noi pagini trebuie s avei n vedere plasarea acestora la nivelele specifice obiectivelor pe care le au precum i ncadrarea la locul cuvenit n structura de legturi a site-ului prezentat n pagina Home. Legturi fr semnificaie Prezena legturilor fr semnificaie este, de asemenea, o greeal de design foarte frecvent. Probabil ai vzut de nenumrate ori n paginile Web formulri ca aceasta: Pentru mai multe informatii apasati <A href="info.html">aici</A> Cuvntul "aici" nu are n acest context, nici o semnificaie. O formulare mult mai potrivit ar putea fi urmtoarea: Puteti obtine aici <A href="info.html">mai multe informatii</A> O alt situaie este aceea n care documentul indicat nu are legtur, din punct de vedere al coninutului, cu pagina care conine referina la el. Toate link-urile din cadrul unei pagini trebuie s extind coninutul informaional al paginii, vizitatorul care urmeaz o legtur ateptndu-se ca aceasta s i ofere informaii suplimentare despre subiect. n aceeai categorie se pot ncadra i legturile "banale" , care nu mbogesc prin nimic informaiile prezentate. De exemplu o construcie ca aceasta: Bine ati venit in <A href="def.html">Pagina</A> Home a Universitatii unde documentul def.html conine definiia de dicionar a cuvntului "pagina" , este o legtur "banal" deoarece n acest context informaia oferit nu servete nici unui scop. Pe de alt parte, ntr-o pagin al crei subiect este vocabularul specific Web-ului, o astfel de definiie ar fi foarte important. Un alt tip de legturi fr semnificaie apare atunci cnd fragmentarea informaiei este dus la extrem prin folosirea unui numr foarte mare de link-uri. Subiectul este secionat n pri foarte mici iar vizitatorul este obligat s parcurg un mare numr de pagini n adncime pentru a pune cap la cap informaiile i a nelege sensul lor. O abordare de acest tip rupe cursivitatea subiectului i mrete efortul de a nelege i asimila al vizitatorului. Pagini dezorganizate i stridente

148

Acest tip de pagini sufer din pricina lipsei de organizare a coninutului. Chiar dac subiectul este mprit n seciuni, unitile de informaie sunt mprtiate n pagin fr o sistematizare prealabil care s focalizeze atenia vizitatorului ctre punctele importante. Aceste pagini au prea multe culori, adesea stridente, tipuri diferite de fonturi, sau imagini de fundal foarte ncrcate. Adesea este folosit n exces animaia fr nici ca aceasta s aib vreo semnificaie sau legtur cu coninutul paginii i muzica de fundal. Aspectul general al unor astfel de pagini este la fel de strident i iptor ca un decor de blci.

Capitolul 16
Testarea site-ului Etapa de design a site-ului se desfoar n strns legtur cu cea de implementare, de scriere a codului HTML pentru paginile care fac parte din site. Totui, procesul de creare a site-ului nu se poate considera ncheiat n momentul finalizrii tuturor documentelor HTML care l formeaz. Urmeaz o etap adesea tratat oarecum superficial, dei, ca i celelalte, este esenial pentru construirea unui site de calitate: etapa de testare.

1. Corectarea paginilor
Corectarea este unul din cele mai neglijate aspecte al publicisticii Web. Foarte frecvent putei ntlni pagini Web cu multiple greeli de ortografie, gramatic, formatare, chiar i n cazul siteurilor importante. Paginile cu greeli de ortografie, exprimri neglijente, reflect cel puin o insuficient experien n acest domeniu i, de ce nu, chiar lips de respect pentru vizitator. Corectarea este neglijat n primul rnd datorit uurinei extraordinare cu care textele pot fi publicate electronic. Putei crea o pagin ntr-un editor de text i aceasta poate fi publicat la doar cteva minute dup terminarea ei, daca suntei suficient de rapid. Cei mai muli nu vor petrece ore n ir verificnd existena eventualelor greeli gramaticale n textul editat, aa cum ar face-o, probabil, n cazul unei tiprituri clasice, dac aceste erori i-ar costa o avere pentru a retipri 10.000 de copii ale documentului. Dac ai fcut o greeal, trebuie doar s deschidei fiierul, s efectuai corectura i s l republicai pe Web, unde toat lumea l poate vedea. Este aceasta o strategie corect? Desigur c nu. Calitatea muncii pe care ai depus-o la crearea site-ului definete calitatea acestuia. Mii, poate milioane de utilizatori ar fi putut deja citi pagina n cauz. Este mult mai simplu s petrecei cteva 149

ore corectnd textul, pentru a evita ca ulterior s v luptai zile, sptmni sau luni n ir pentru a v rectiga credibilitatea. Iat cteva metode care v pot ajuta s corectai mai eficient paginile Web: 1. Utilizai corectoare automate pentru ortografie i gramatic pentru a descoperi erorile plictisitoare, fcute din grab sau din oboseal. 2. Nu avei niciodat ncredere absolut n acest tip de corectoare pentru a descoperi erorile mai subtile. Dup utilizarea lor, ncrcai pagina n browser i citii-o de cteva ori. 3. Pentru site-urile de dimensiuni mari citii documentele n mod repetat, cutnd de fiecare dat un anumit tip particular de erori 4. La prima lectur concentrai-v atenia pe aspectul general al documentului i pe descoperirea erorilor de formatare, a itemurilor lips sau a erorilor de plasare a acestora. 5. La a doua lectur verificai logica i cursivitatea ideilor i a cuvintelor. 6. La a treia lectur, corectai minuios ntregul text verificnd sintaxa, ortografia, punctuaia. 7. ntotdeauna verificai imaginile, figurile i hrile din pagin. Asigurai-v c ele au legtur cu textul de referin, i verificai textul explicativ care nsoete imaginea. Exist i erori ce vor persista uneori chiar dup toate aceste verificri. Dac le descoperii dup publicarea site-ului, nu mai rmne dect s le corectai atunci.

2. Testarea paginilor
Odat terminat verificarea corectitudinii textului din pagini din punct de vedere gramatical i logic, urmeaz etapa de testare a paginilor. n aceast faz trebuie s v concentrai pe testarea corectitudinii etichetelor HTML, a link-urilor, a imaginilor i a celorlalte elemente incluse n pagini. Testarea link-urilor Cea mai simpl cale de testare a link-urilor este de a ncrca pagina n browser i de a da click pe fiecare link. Verificai funcionarea tuturor ancorelor din pagini care trebuie s acceseze seciunea din pagin corespunztoare identificatorului ancorei. Atenie la seciunile multiple ale aceleiai pagini etichetate cu acelai identificator. Aceast greeal poate produce rezultate stranii. Daca browserul sare la o alt seciune a paginii dect cea ateptat, verificai mai nti identificatorul ancorei n seciunea pe care browserul o afieaz. Verificai apoi modul de funcionare a legturilor ctre alte documente, att n cadrul site-ului ct i n afara sa, respectiv validitatea lor i dac paginile accesate sunt cele potrivite. Dac o anumit pagin nu poate fi deschis, verificai sintaxa link-urilor i anume: 1. corectitudinea protocolului specificat 2. extensia fiierului 3. existena simbolului ~ Probleme n funcionarea paginilor Web

150

Este posibil ca paginile Web create s nu arate n browser aa cum au fost ele proiectate. Rezolvarea unor astfel de deficiene poate fi dificil, deoarece cnd scriei codul HTML avei doar o imagine mental a modului cum ar trebui s arate pagina. O soluie pentru a face procesul de depanare mai uor ar fi s vizualizai pagina cu ajutorul browserului pe msur ce o construii. Putei izola diversele seciuni ale paginii pentru a verifica funcionarea fiecreia dintre ele. Cele mai multe greeli care pot aprea se datoreaz erorilor n codului sursa al paginii. Sintaxa codului este de o importanta critic n HTML. Cele mai comune probleme de sintaxa care apar sunt: 1. absena etichetelor de nchidere < / > 2. mperecherea etichetelor HTML 3. ghilimelele " " 4. imbricarea etichetelor Iat cteva dintre problemele cu care v putei confrunta: O caracteristic de formatare afecteaz o secven mai mare de text dect era prevzut. S presupunem c ai folosit ntr-o seciune a paginii una dintre etichetele de titlu, <H3> de exemplu. La vizualizarea paginii n browser constatai c nu doar textul pe care doreai s-l evideniai este formatat astfel, ci o parte mai mare a textului din pagin. O astfel de situaie este provocat de: 1. Absena unuia dintre caracterele " < " sau " > " 2. Absena etichetei de nchidere </H3> 3. Imbricarea defectuoas a etichetelor HTML O etichet de nchidere creia i lipsete unul dintre caracterele "< "sau ">" nu va fi interpretat corect de browser, prin urmare formatul nu va lua sfrit dect n punctul n care browserul ntlnete caracterul respectiv. Aceasta poate determina afiarea ntr-un format greit a unui text. Dac acest element este un titlu, tot textul dintre eticheta de deschidere asociat titlului i cea mai apropiat etichet de nchidere ntlnit va fi afiat ca titlu. Daca acest element este text ancor, tot textul dintre eticheta de deschidere <A> i prima etichet de nchidere ntlnit va fi afiat ca o legtur (de culoare albastru i subliniat). O etichet de nchidere absent sau o mperechere inadecvata de etichete va provoca probleme similare. Uneori problemele sunt dificil de urmrit i rezolvat. Urmrirea unei probleme se face n sens descendent, defeciunea trebuie cutat acolo unde ncepe secvena de cod eronat i nu unde se sfrete. O parte din textul paginii nu este afiat Textul sau obiectele care lipsesc din pagina pot fi depistate prin urmrirea ghilimelelor " " i a etichetelor greit nchise i care conin adrese URL. Dac pagina conine ghilimele de deschidere n interiorul unei etichete, i cele de nchidere trebuie s se regseasc n aceeai etichet. O etichet din care lipsesc ghilimelele de nchidere nu este interpretat corect i acest lucru poate produce rezultate bizare. Dac eticheta creia i lipsesc ghilimelele este o etichet ancor, ntreg textul de la primele ghilimele pn la urmtoarele ntlnite ar putea fi interpretat de browser ca parte dintr-o adres URL.

151

O alt eroare care poate provoca acelai efect este nchiderea greit a etichetei coninnd o adres URL. Dac o astfel de etichet nu este nchis corespunztor, browserul ar putea interpreta orice text care urmeaz, pn la eticheta de nchidere corespunztoare, ca fiind parte a adresei URL. Problema se rezolv prin examinarea etichetelor aflate naintea poriunii de text care nu este afiat. Eroarea ar putea proveni de la orice etichet care conine ghilimele sau o adres URL. Ghilimelele utilizate n editorul de text cu ajutorul cruia scriei codul HTML trebuie s fie ntotdeauna n standard ASCII. Unele editoare de text utilizeaz aa-numitele "smart quotes" , n care ghilimele de deschidere arat diferit fa de cele de nchidere. Dac procesorul de text cu care lucrai are aceast posibilitate, ea trebuie dezactivat, deoarece acest tip de ghilimele, nefiind n standardul ASCII, nu vor funciona corect n HTML. Afiarea defectuoas a formatului n cazul cnd formatul afiat de browser nu este cel ateptat verificai mai nti compatibilitatea dintre browser i stilul de caractere specificat n codul HTML. Browserul trebuie s fie capabil s afieze stilul ales. Atunci cnd sunt folosite stiluri logice, browserul este ultima instan n decizia privind stilul caracterelor afiate. O metod rapid de verificare a existenei unei probleme de compatibilitate este de a afia paginile utiliznd browsere diferite, dintre care unul s poat afia n mod sigur stilul de caracter utilizat. Dac acel browser afieaz textul incorect, se face verificarea codului HTML. Dac textul este afiat corect, atunci exist o incompatibilitate cu celelalte browsere. n codul HTML, problema poate fi legat de o imbricare defectuoas a etichetelor. Verificai modul cum au fost imbricate etichetele de formatare din seciunea de pagin asociat cu eroarea respectiv. Astfel o construcie de tipul urmtor: <EM>Va multumim ca ati vizitat <STRONG>Pagina</EM>noastra</STRONG> nu va funciona corect, deoarece etichetele <EM> i <STRONG> sunt imbricate eronat.

152

Capitolul 17
Publicarea site-ului n sfrit, site-ul dumneavoastr este finalizat. Ai parcurs toate etapele, de la planificare, la design i implementare, v-ai asigurat c toate elementele funcioneaz corect. A venit momentul publicrii pe Web a site-ului, astfel nct rezultatele muncii dumneavoastr s fie cunoscute de toi aceea care v vor vizita paginile. n etapa publicrii pe Web a site-ului intervin mai muli pai: Stabilirea unui nume de domeniu Stabilirea serverului Web pe care va fi stocat (gzduit) site-ul Organizarea i denumirea fiierelor n conformitate cu cerinele serverului gazd Transferul fiierelor

1. Numele de domeniu
Pentru ca site-ul dumneavoastr s aib o identitate pe Web avei nevoie de un nume de domeniu pentru el. Numele de domeniu al site-ului va face parte din adresa URL a fiecrei pagini i va oferi site-ului o prezen distinct pe Web. Domeniile principale de pe Web pot fi de mai multe tipuri: comerciale .com educaionale .edu guvernamentale .gov furnizorii de servicii de reea .net

153

instituii non-profit .org domeniile corespunztoare rilor lumii .ro, etc Pentru a obine un nume de domeniu pentru site avei la dispoziie dou posibiliti: domeniu pltit domeniu gratuit Domeniu pltit

Dac site-ul pe care l-ai creat aparine firmei dumneavoastr sau unei firme client sau dac dorii s avei o prezen stabil i credibil pe Web cea mai bun opiune este s avei un domeniu pltit. nregistrarea unui domeniu nu este foarte costisitoare i va asigura site-ului dumneavoastr o identitate serioas i credibil. n plus, odat ce suntei proprietarul unui domeniu putei s schimbai locaia site-ului (serverul Web pe care este gzduit) fr ca aceasta s necesite schimbarea domeniului. Preul pentru nregistrarea unui nume de domeniu variaz destul de mult. Una dintre cele mai convenabile oferte poate fi gsit la adresa http://www.10-domains.com care ofer nregistrarea unui nume de domeniu pentru 10 USD anual precum i o serie de discount-uri pentru nregistrarea pe perioade mai lungi. Dac dorii un domeniu romnesc (.ro) putei obine informaii la adresa http://www.rnc.ro. Pentru nregistrarea unui astfel de domeniu se percepe o tax unic de 61 USD (pre valabil la data scrierii acestei cri) fr alte taxe anuale. n cazul cnd optai pentru un domeniu pltit, adresa URL a site-ului va fi de forma http://www.dumneavoastra.com

Domeniu gratuit Obinerea unui nume de domeniu gratuit este foarte simpl. Exist multe companii on-line care ofer astfel de domenii i, n plus, i spaiu de gzduire pentru site. Dac suntei nceptor i dorii s v testai cunotinele de Web design nou nvate, nu este o idee rea s construii un site "de prob" folosind pentru acesta un domeniu i un serviciu de hosting gratuite. n afara acestei situaii, dei poate prea alegerea ideal, un domeniu gratuit poate aduce multe dezavantaje site-ului dumneavoastr. Prima judecat de valoare asupra unui site este fcut pe baza numelui su de domeniu. n cazul unui domeniu gratuit adresa URL a site-ului va fi: http://www.numefirmagazda.com/~dumneavoastra sau http://www.dumneavoastra.numefirmagazda.com Vizitatorii site-ului vor ti imediat c nu deinei propriul domeniu i folosii un serviciu de hosting gratuit ceea ce v va afecta serios credibilitatea. Mai ales dac site-ul este unul de afaceri, folosirea unui domeniu i serviciu de hosting gratuit este cu totul contraindicat. n plus, firmele care ofer acest gen de servicii, impun afiarea unor bannere publicitare care distrag atenia vizitatorilor de la coninutul site-ului i mresc timpul de ncrcare al paginilor.

2. Serviciul de gzduire Web (Web hosting)

nainte de a publica site-ul pe Web este necesar o evaluare a necesitilor de acces, pentru a determina ce fel de cont se potrivete site-ului dumneavoastr. Plecnd de la presupunerea c deinei deja o conexiune la Internet, nu vom intra n amnunte privind alegerea unui furnizor de servicii Internet (ISP Internet Service Provider). Totui, n cazul cnd nc nu deinei o conexiune sau dorii s schimbai provider-ul actual, v recomandm s studiai cu atenie ofertele principalilor furnizori de servicii. Avnd n vedere c nu v vei mai limita doar la simpla navigare 154

pe Web sau la schimbul de emailuri ci vei dori s transferai i s ntreinei un site Web necesitile dumneavoastr vor crete. Din acest motiv este bine s v informai asupra unor detalii tehnice cum ar fi limea de band, mediul de transmisie (anten satelit, cablu cu fibre optice, unde radio), ce tip de server folosete, asistena tehnic oferit, dac ofer gzduire pentru pagini Web. Opiunile pentru gzduire sunt urmtoarele: Instalarea unui server Web propriu Utilizarea serverului Web al providerului de servicii Internet Utilizarea unui server Web aparinnd unei firme care ofer servicii de hosting Instalarea unui server Web propriu Instalarea unui server Web propriu este cea mai costisitoare soluie, dar ea ofer n schimb avantaje semnificative. Dispunnd de o conexiune dedicat se pot furniza servicii Web 24 de ore/zi utilizatorilor din lumea ntreag. Vei dispune de un control complet asupra serverului Web i putei publica orice dorii. Putei configura serverul i pentru alte servicii, cum ar fi FTP, Gopher, Telnet, scripturi CGI, etc. Putei de asemenea avea propriul domeniu care va stabili o prezen distinct pe Web. Adresa URL va avea forma urmtoare: http://www.firma_dumneavoastra.com/ ntruct costurile necesare echipamentului hardware, conexiunii la Internet, configurrii i ntreinerii unui server propriu depesc posibilitile unui utilizator obinuit, nu vom insista asupra acestei soluii. Utilizarea serverului Web al providerului ISP Utilizarea serverului Web al providerului dumneavoastr de Internet este o opiune economic. Muli dintre furnizorii de servicii Internet ofer n cadrul contului de acces i un anumit spaiu pe serverele proprii pe care v putei plasa site-ul, fr a percepe taxe suplimentare. Din pcate, spaiul oferit este de obicei mic, de ordinul 1-3 Mb i nu sunt oferite faciliti pentru crearea de pagini dinamice. Pentru a obine faciliti suplimentare va trebui s pltii n plus. Cu toate c fiierele standard, contul de email i fiierele publicate pe Web utilizeaz acest spaiu, 2-3 Mb sunt de regul suficieni pentru a menine un site modest ca dimensiuni. Contul la ISP este accesibil pe baza unei conexiuni dial-up care permite o legtur cu o vitez de pn la 56 Kbps. nainte de a deschide un astfel de cont, trebuie verificate detaliile privind spaiul de stocare, taxele pentru spaiul adiional, n mod curent 2$ pentru 1 Mb, eventualele alte taxe. Trebuie verificat de asemenea disponibilitatea altor servicii, cum ar fi FTP, Gopher, Telnet, scripturi CGI, care ar trebui s poat fi utilizate gratuit, n cazul n care exist. Un cont la un provider ISP este o opiune economic dar, n acelai timp, limitat. Nu exist control al serverului Web, serviciile adiionale rmnnd la latitudinea providerului. Nu vei avea propriul domeniu, iar adresa URL va arta astfel: http://www.provider.com/~dumneavoastra Utilizarea unui serviciu de hosting Cea mai bun soluie din punctul de vedere al raportului servicii/pre o reprezint folosirea unui serviciu de hosting pltit. Ofertele de pe piaa romneasc sunt numeroase i variate ca pre. nainte de a face o alegere este bine s facei un studiu comparativ al acestora n privina spaiului pus la dispoziie, al modului de transfer al fiierelor, al traficului impus precum i al prezenei diverselor faciliti: scripturi CGI, baze de date, email personalizat, etc. Nu trebuie s pierdei din vedere c site-ul dumneavoastr se poate dezvolta astfel nct spaiul de stocare rezervat la nceput poate deveni insuficient. Utiliznd un serviciu de hosting adresa URL a site-ului va avea forma urmtoare: http://www.dumneavoastra.com De asemenea vei beneficia i de una sau mai multe adrese de email personalizate de tipul: 155

adresa@dumneavoastra.com Folosirea serviciilor unei firme de hosting v permite ca, odat ce deinei propriul nume de domeniu, s v transferai site-ul pe serverul Web al firmei i s beneficiai de o prezen stabil pe Web. Firmele de hosting ofer uneori i nume de domenii pentru clienii lor ns exist riscul ca dac v hotri s renunai la serviciile acelei firme s pierdei domeniul. Din acest motiv este mai bine s tratai separat cele dou probleme.

3. Organizarea i denumirea fiierelor

Dei aceast etap este intrinsec procesului de construire a site-ului, o vom discuta n acest capitol, deoarece acum este momentul cnd o bun organizare a directoarelor, subdirectoarelor i fiierelor devine deosebit de important. Organizarea directoarelor i fiierelor Este foarte bine s organizai fiierele care fac parte din site pe computerul dumneavoastr exact aa cum ele vor fi organizate pe serverul Web. Serverul Web are un director "rdcin" (root) unde vor fi stocate toate fiierele site-ului. Folderul unde vei stoca aceste fiiere pe computerul personal va juca rolul directorului "rdcin" al serverului. n directorul "rdcin" va fi plasat fiierul care va conine pagina "home" a site-ului, fiier denumit de obicei index.html sau index.htm. Dac site-ul este de mici dimensiuni (ntre 5 i 10 pagini) putei plasa toate fiierele n acelai director. Dac site-ul este mai mare, este recomandat s creai pentru fiecare seciune principal a sa cte un subdirector care va conine fiierele asociate acelei seciuni. Subdirectoarele pot conine la rndul lor cte un fiier index. Atunci cnd vei transfera fiierele de pe computerul dumneavoastr pe serverul Web vei putea s transferai ntregul subdirector cu fiierele coninute n el. De asemenea aceast metod va face i ntreinerea site-ului mult mai uoar. O alt problem este locul unde vei stoca imaginile. Practica standard este de a crea un subdirector special n directorul "rdcin" unde s plasai toate imaginile din site. Dac procedai astfel este extrem de important s creai un subdirector similar cu aceeai amplasare i pe computerul dumneavoastr. Calea de la pagina care apeleaz o imagine la imaginea respectiv trebuie s fie aceeai i pe computerul dumneavoastr i pe server, altminteri imaginile nu se vor afia dup ce site-ul a fost transferat pe server. O alt variant de stocare a imaginilor este crearea unui subdirector destinat imaginilor, plasat n subdirectorul fiecrei pagini. Cu aceleai precauii legate de calea corect ctre imagini, aceast metod funcioneaz bine, ba chiar mbuntete viteza de ncrcare a imaginilor n pagini. Dezavantajul const n faptul c adesea este necesar s reinei mai multe copii ale aceleiai imagini n diferite subdirectoare, n funcie de paginile unde este folosit. Verificarea numelor fiierelor La mutarea fiierelor de pe computerul dumneavoastr pe serverul Web se impune verificarea numelor fiierelor care trebuie s fie compatibile cu sistemul pe sunt mutate. O atenie deosebit trebuie acordat denumirii i extensiei fiierelor. Nu are importan dac optai pentru extensia .html sau .htm. Tot ce trebuie este s fii consecvent cu extensia aleas de-a lungul ntregului site. De asemenea, trebuie s avei n vedere c n sistemele UNIX, cele mai des folosite ca servere Web, denumirile fiierelor sunt case-sensitive. O pagin denumit mypage.html nu este totuna cu pagina MyPage.html. Pentru a evita confuziile folosii pentru denumirea fiierelor numai litere mici.

4. Transferul fiierelor
Transferul fiierelor care compun site-ul de pe computerul propriu pe serverul Web este o operaiune relativ simpl, care const n copierea fiierelor pe server n locaia destinat site-ului

156

dumneavoastr. Unele dintre firmele de hosting asigur o aplicaie special destinat transferului fiierelor, dar cea mai utilizat metod de transfer este prin intermediul unui client FTP. Un client FTP (File Transfer Protocol) este o aplicaie prin intermediul creia se poate realiza transferul fiierelor de pe un sistem pe altul. Putei copia fiiere de pe computerul personal pe un alt computer (operaie denumit Upload) dup cum putei prelua fiiere de pe un alt computer, pe computerul personal (operaie denumit Download). Cele mai folosite programe FTP sunt CuteFTP (http://www.cuteftp.com) i WS_FTP (http://ipswitch.com). Odat ce ai instalat pe computerul dumneavoastr un client FTP, v-ai nregistrat numele de domeniu i avei un cont la un serviciu de gzduire totul este pregtit pentru transferul fiierelor care compun site-ul pe serverul gazd. Pentru a realiza transferul fiierelor, n general va trebui s urmai urmtorii pai: Conectarea la Internet Deschiderea programului FTP. Vei observa o serie de casete de dialog n care trebuie introduse informaiile necesare programului pentru a realiza conexiunea cu computerul gazd. Pentru a face conexiunea cu serverul trebuie s furnizai programului adresa FTP a host-ului dumneavoastr. Aceasta v este furnizat de firma de hosting la deschiderea contului. De asemenea, programul v va cere numele de utilizator i parola pe care le-ai stabilit la deschiderea contului. Nu uitai s de-bifai opiunea Anonymous din meniul Login. Prin introducerea numelui de utilizator i a parolei vei cpta acces la contul dumneavoastr i vei putea intra n directorul unde vor fi plasate fiierele site-ului. O alt informaie care trebuie furnizat programului este tipul fiierelor transferate. n general pentru fiierele HTML se folosete opiunea ASCII iar pentru celelalte fiiere, opiunea binary. Mai simplu, putei alege opiunea AutoDetect prin care programul determin singur tipul fiierului i modul cum va face transmiterea lui. Celelalte casete de dialog pot fi lsate necompletate sau cu setrile preexistente. Dup furnizarea acestor informaii programul FTP va realiza conexiunea cu serverul gazd. Selectarea fiierelor pe care dorii s le copiai. Vei observa c fereastra aplicaiei FTP este mprit n dou: ntr-o parte avei directoarele de pe computerul personal, n cealalt parte directoarele de pe computerul gazd. Selectai directorul care conine fiierele dumneavoastr i dai comanda de transfer n directorul care v este destinat pe serverul gazd. Dac folosii scripturi CGI asociate site-ului trebuie s le acordai o atenie special. Cele mai multe servere necesit instalarea scripturilor CGI ntr-un subdirector special numit cgi-bin, aflat n directorul dumneavoastr. Pentru plasarea i setarea corect a scripturilor trebuie s luai legtura cu administratorul serverului gazd care v va oferi indicaiile necesare. Pe unele sisteme de operare modul de accesare al fiierelor este strict definit, permind sau restricionnd citirea, scrierea sau executarea fiierelor de ctre diferii utilizatori. Aceste faciliti sunt setate de regul prin drepturile de acces atribuite fiierelor. Din acest motiv, verificarea modului de setare a fiierelor este extrem de important. De exemplu, n sistemele UNIX modul 705 semnific faptul c fiierele pot fi citite, modificate sau executate de proprietarul lor, n vreme ce ali utilizatori nu le pot dect citi sau executa (dup caz). Dup transferul fiierelor, pot aprea probleme de diverse tipuri. Uneori, paginile publicate nu pot fi accesate deloc, scripturile nu funcioneaz, etc. Primul lucru care trebuie verificat n acest caz este dac fiierele se afl n directoarele potrivite. Apoi trebuie verificate permisiunile de acces pentru directoare i fiiere, extensiile fiierelor, fiierele index. n cazul cnd apar probleme, cea mai sigur cale de rezolvare a lor este s luai legtura cu administratorul serverului gazd i s i cerei informaii ct mai complete privind drepturile de acces pentru directoare, calea corect ctre scripturile folosite i, n general, setrile necesare pentru buna funcionare a site-ului. Cteva cuvintela final Am ajuns, iat, la finalul cltoriei noastre. Avei, acum, toate informaiile i instrumentele necesare construirii unui site atrgtor, funcional i eficient. Putei ncepe prin a v construi o

157

pagin personal pe care o putei plasa pe un server gratuit, pentru a exersa cunotinele dobndite. Dar acesta este doar primul pas. Designul Web este unul dintre domeniile cu un mare potenial de dezvoltare. Tot mai multe firme doresc site-uri pe Web, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a-i prezenta oferta de produse i servicii. O carier n acest domeniu este o alegere cu mari anse de succes pentru orice tnr. Mai mult, dei pe Web-ul romnesc aceast zon este nc slab dezvoltat, putei s v iniiai propria afacere care s se deruleze exclusiv pe Internet. Aceast carte a urmrit s v ofere informaiile necesare unui start corect n domeniul designului Web. Dar nu trebuie s v oprii aici. Designul i programarea Web reprezint domenii vaste iar cartea noastr a atins doar elementele de baz ale acestora. Putei continua nvnd s programai n Perl pentru a crea scripturi CGI, putei nva JavaScript, Java sau un limbaj de interogare pentru bazele de date stocate pe server. Putei deveni familiar cu unul din editoarele puternice de HTML (Macromedia Dreamwaver este cel mai utilizat n acest moment) sau putei nva s stpnii foarte bine un program de grafic (CorelDraw sau Adobe Photoshop de exemplu) pentru a crea grafic Web. Posibilitile sunt nenumrate. n lumea World Wide Web totul este ntr-o continu micare i dezvoltare. Aceast carte v-a oferit fundamentele programrii n HTML. Continuai s nvai, perfecionai-v continuu i succesul viitor v este asigurat.

158