Sunteți pe pagina 1din 114

INSTRUMENTE DE LUCRU PENTRU CREAREA SITE-URILOR WEB Serviciul World Wide Web (panza de pianjen) sau, prescurtat, Web,

www, w3 a fost creat in 1989 in Elvetia la Centre European de Recherche Nucleair (CERN). World Wide Web este un mecanism care foloseste conceptul de hipermedia pentru a lega o colectie de zeci de milioane de documente cu informatii ce sunt pastrate pe calculatoare raspandite in toata lumea. In formatul Web, informatia este organizata sub forma de pagini. Pagina se mai numeste si document Web si este formata dintr-un document html (fisier cu extensia .htm) si din fisiere asociate pentru afisare a informatiilor in format multimedia (fisiere cu imagini grafice, fisiere cu scripturi Java) care se gasesc pe acelasi calculator sau pe un alt calculator din reteaua Internet si care pot fi identificate unic prin adresa URL. Folosirea hiperlegaturilor permite construirea unei structuri de retea pentru prezentarea informatiei (cea mai complexa structura de segmentare a informatiei). Hiperlegatura este o conexiune de la o pagina catre o anumita destinatie. Hiperlegatura poate fi reprezentata printr-un text sau printr-o imagine. Paginile Web sunt scrise intr-un limbaj al calculatorului, cunoscut sub numele de HyperText Markup Language HTML. Cand afiseaza o pagina Web, programul client de navigare ascunde complet specificatiile limbajului, deoarece atunci cand utilizatorul i furnizeaza un identificator URL, programul contacteaza serverul specificat, obtine o copie a paginii Web, interpreteaza limbajul HTML si afiseaza rezultatul. Un document html este un fisier care contine text ASCII si coduri de control numite etichete (tags). Codurile de control sunt introduse prin intermediul caracterelor ASCII si sunt delimitate de semnele < si >. Ele nu sunt citite de utilizator, ci de programul client, ca sa stie cum sa foloseasca fiecare zona de text din document. Programul client folosit pentru a avea acces la serviciul Web se numeste browser (Internet Explorer). Paginile pot face parte dintr-un site Web sau pot fi de sine statatoare. Caracteristici : World Wide Web este o colecie imens de documente interconectate prin intermediul Internetului, care asigur o interfa hypermedia pentru informaii. Pentru a transmite i afia documentele, World Wide Web folosete protocolului de comunicaie HTTP. Funcionarea World Wide Web se bazeaz pe relaia clientserver. Clienii sunt browserele Web iar serverele sunt serverele Web. Limbajul HTML realizeaz descrierea documentelor Web. Prin intermediul su i se comunic browserului ce elemente fac parte din pagina Web i care este aspectul acestora. Este recomandat crearea unor documente HTML orientate ctre coninut i nu ctre aspect.

Pentru a crea documente HTML avei nevoie de un set minimal de instrumente: un editor de text, un browser, un editor grafic i o conexiune la Internet Informatiile din reteaua www sunt stocate in documente numite pagini Web Paginile Web se gasesc in computere numite servere Web Mai multe pagini Web alcatuiesc un site Web Paginile Web contin, pe langa informatii, referinte pentru alte informatii din retea, numite hiperlegaturi Computerele care solicita informatii de la serverele Web se numesc clienti Web Clientii Web pot vizualiza paginile Web prin intermediul unor programe numite browsere Web World Wide Web prezinta doua avantaje: permit cautarea in intreg spatiul Internet si usureaza cautarea prin stabilirea unor legaturi intre informatii. EDITOARE DE HTML

Crearea unei pagini Web presupune: 1. Editarea fisierului HTML utilizand: Un editor de texte obisnuit (Notepad, Wordpad, Word, PowerPoint) Un editor de texte dedicat (Netscape Composer, HotMetal) 2. Salvarea paginii Web cu extensia .html sau .htm intr-un site Web 3. Vizualizarea paginii cu ajutorul unui browser (Internet Explorer, Mozilla FireFox) Notepad permite salvarea ca pagina Web. Editorul de text trebuie salvat in format HTML folosind optiunea salvare ca , numele fisierului index.html si salvare cu tipul All Files (Toate fisierele). Wordpad permite salvarea ca pagina Web. Editorul de text trebuie salvat in format HTML folosind optiunea salvare ca , numele fisierului index.html si salvare cu tipul Document Text Unicode. Microsoft Word permite salvarea ca pagina Web. Documentul trebuie salvat in format HTML folosind optiunea Save As HTML (Salvare ca pagina Web) din meniul File (Fisier). Microsoft PowerPoint permite salvarea ca pagina Web. Prezentarea trebuie salvata in format HTM folosind optiunea Save As HTML (Salvare ca pagina Web) din meniul File (Fisier). Microsoft Excel permite salvarea ca pagina Web. Foaia de calcul tabelar trebuie salvata in format HTML folosind optiunea Save As HTML (Salvare ca pagina Web) din meniul File (Fisier).

Microsoft Frontpage este un editor HTML care lucreaza atat in modul de editare, cat si in cel de explorare, manevrand trei ferestre: pentru afisarea grafica a obiectelor pe ecran, pentru afisarea codului HTML si pentru vizualizarea rezultatelor de navigare. Netscape Composer este un editor HTML care lucreaza direct in modul de editare si are suport pentru publicarea paginilor direct pe serverul Unix al furnizorului de Internet. Macromedia Dreamweaver este un editor de HTML performant care genereaza majoritatea etichetelor HTML, in mod vizibil si standard, creaza animatie, dispune de un cotrolor de timp si de cadre cheie de animatie. Corel WebMasterSuite este un software de editare HTML, construit din trei componente: Corel Web Designer pentru editare HTML, Site Designer pentru gestionarea site-ului si PhotoPaint pentru crearea imaginilor. Permite realizarea de animatie. EDITOARE DE IMAGINI
1. Irfan View 3.97

2.

3.

4.

5.

Este probabil unul dintre cele mai cunoscute programe pentru vizualizarea imaginilor. Punctul forte al acestui program este faptul ca suporta foarte multe tipuri de fisiere. Pe langa imagini, IrfanView vede si fisiere mp3, avi. Easy Thumbnails 2.8 Aceasta aplicatie este foarte utila celor care doresc sa realizeze o galerie foto pe un site Web. Dupa cum se observa si din nume, Easy Thumbnails creeaza imagini mici pentru previzualizare (thumbnail-uri). Suporta cele mai comune standarde de imagine existente, de la fisiere .jpg si pana la .pcx. In cadrul procesului de scalare, puteti sa modificati cativa parametri cum ar fi luminozitatea, contrastul, acuitatea (sharpnessul) si unghiul de rotire. XnView 1.80 XnView permite vizualizarea unei game largi de tipuri de fisiere, atat imagini, cat si secvente video si audio. Editarea unei imagini se face intr-o interfata separata, avand la dispozitie o multime de efecte care se pot aplica imaginilor, de la cele obisnuite la adevarate efecte profesionale. Aceasta aplicatie este disponibila pentru toate sistemele de operare, de la Windows, Linux, MacOs si pana la Solaris si Unix. FocusViewer 2.1 Primul lucru care atrage atentia la acest program este interfata lui, care aduce aminte, prin stilurile ferestrelor sale, de sistemul de operare MacOS. Aceasta interfata este foarte intuitiva, avand o zona de navigare si o zona de revizualizare. Suporta majoritatea formatelor grafice, incluzand .bmp, .dib, .jpeg, .gif, .pcx, .tiff si .tga. Puteti organiza fotografiile dupa anumite criterii, puteti seta wallpaper cu calendar si puteti efectua capturi de ecran programate. VCW Vicmans Photo Editor Free 7.9 Beneficiind de o interfata destul de intuitiva (pentru cei cat de cat obisnuiti cu editoarele de imagini), aplicatia ofera o gama de baza pentru editarea imaginilor,
3

avand un grad mare de personalizare. Ofera suport pentru toate tipurile uzuale de imagini si are cateva tutoriale despre editarea imaginilor si animatie. Versiunea freeware a acestui program nu suporta exportarea imaginilor in format .gif, pentru aceasta, dar si pentru alte functii fiind necesara achizitionarea versiunii Pro.
6. Media Purveyor 1.4.1

Aplicatia afiseaza metadatele (exif, xml) pentru fiecare fisier, precum si informatii generale. Dispune de functii de cautare dupa diferite criterii a fisierelor suportate si poate genera thumbnail-uri ale imaginilor selectate. 7. The GIMP 2.2.8 Cand vine vorba de editare de imagini, exista un nume deja consacrat in lumea freeware - GIMP. Programul a fost initial conceput pentru sistemul de operare Linux, fiind extins apoi si pentru alte platforme. GIMP suporta o larga paleta de formate grafice si este recomandat celor care lucreaza si cu alte formate in afara de obisnuitele .jpg, .gif si .bmp. Aplicatia prezinta o gama larga de instrumente de editare, atat efecte aplicabile imaginilor, cat si tool-uri de creatie. 8. Picasa 2 Picasa este un alt nume cu greutate in domeniul editarii grafice freeware. Inca de la primele versiuni, aceasta aplicatie a demonstrat flexibilitatea si usurinta in folosire. 9. CoffeeCup Free Viewer Plus 2.6 Suporta cele mai folosite formate (.jpg, .gif, .bmp, .png si .pcx), iar efectele care se pot aplica sunt in numar mic, dar sunt cele mai folosite de obicei de catre utilizatori. In rest, interfata are aspect standard, cu o zona de navigare si o zona de vizualizare a fisierelor grafice. 10. Image Browser Arctic 5.0 Programul ruleaza intr-o fereastra care nu se poate maximiza, iar interfata este cea de Windows. Dispune de efecte simple si comune, avand insa alte functii interesante, cum ar fi extragerea de iconite, conversia TIF-PDF, protejarea imaginilor cu parola si exportarea de cadre din secvente video .avi. 11. Visualizer IB 2.5 Iata un program ce se adreseaza cu adevarat utilizatorului obisnuit. Interfata este simpla si eleganta. Imaginile sunt vizualizate in fereastra principala, fiind suportate majoritatea formatelor folosite in mod comun (.jpg, .gif, .bmp, .psd, .psp etc.). O capabilitate interesanta este aceea de a reda fisiere .mp3 si de a converti/compresa fisierele .wav in .mp3. Programul dispune, de asemenea, de un modul de update. 12. Photomania Deluxe 6.73 In cazul de fata avem de-a face cu un program ce are o interfata cat se poate de intuitiva si de simpla. Totusi, aplicatia este destul de complexa, suportand o multime de formate grafice pe langa cele uzuale. Efectele ce se pot aplica imaginilor fac parte din setul standard de editare care trebuie sa fie la dispozitia oricarui impatimit al fotografiilor. Totusi, lipseste functia de reducere a efectului de red-eye.
4

13. ForceVision 3.08

O aplicatie simpla si flexibila.Interfata de pornire este foarte accesibila, zona de navigare din dreapta si cea de vizualizare din stanga fiind reteta unei aplicatii de editare grafica reusite in momentul de fata. Aplicatia este constituita din mai multe module (de navigatie, de previzualizare etc.) care pot fi pornite/oprite dupa preferintele utilizatorului. 14. 11view 3.0 Dotat cu o interfata care ne aduce aminte de designul folosit in programele realizate acum cativa ani buni, 11view prezinta insa multe functionalitati interesante si utile in acelasi timp. Aplicatia mai integreaza si niste unelte deosebite, cum ar fi GIF Animator Compiler (cu care puteti realiza secvente de GIF-uri animate), Icon/Cursor Compiler (ajuta la crearea de cursoare animate), PSD Decompiler (exporta fisierele Photoshop in .bmp sau .png) si altele. 15. Image Analyzer 1.24 Dupa cum spune si numele, aceasta aplicatie realizeaza editarea si/sau crearea imaginilor. Prin functiile si efectele care pot fi aplicate imaginilor, Image Analyzer este un editor grafic cat se poate de simplu pe care orice utilizator familiarizat cu Paint-ul din Windows il poate utiliza. 16. ShutterFly Express 3.0 In ciuda interfetei sofisticate a acestui program, ShutterFly Express poate manipula doar fisiere .jpg. De fapt, dupa cum sustin si producatorii, softul este destinat gestionarii si editarii pozelor digitale. Astfel, el poate detecta existenta unei camere digitale, avand o interfata pentru transferul imaginilor. Formatele de imagini acceptate in Web GIF (Graphic Interchange Format) are extensia .gif JPEG (Joint Photographic Experts Group) are extensia .jpg sau jpeg PNG (Portable Network Graphics) are extensia .png TIFF (Tagged Image File Format) are extensia .tif sau tiff BMP (BitMap Format) are extensia .bmp Cteva metode de obinere a imaginilor Crearea imaginilor cu ajutorul unui program de grafic - cele mai performante sunt Adobe Photoshop i CorelDraw. Scanarea fotografiilor realizate cu aparate foto tradiionale i, eventual, prelucrarea lor ulterioar cu editoare grafice. Folosirea aparatelor de fotografiat digitale - dei sunt nite echipamente nc destul de costisitoare prezint marele avantaj c furnizeaz imagini digitale sub form de

fiiere grafice n formate comune, care se pot descrca direct pe hard-disk, i care se pot utiliza ca atare sau dup o prelucrare grafic minim. Preluarea imaginilor de pe Web. Pentru a prelua o imagine de pe Web trebuie s o salvai pe hard-disk-ul dumneavoastr. Putei realiza acest lucru astfel: - plasai cursorul pe imaginea respectiv i apsai butonul drept al mouseului - selectai din meniul care se deschide Save Image As... - n fereastra de dialog selectai folderul de destinaie i numele fiierului - apsai butonul Save 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. Aceast opiune este determinat de faptul c majoritatea utilizatorilor Internetului dispun de conexiuni telefonice dial-up, cu viteze destul de mici, astfel c timpul de ncrcare al fiierelor, care depinde de dimensiunea acestora, devine un factor determinant. 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) folosete 256 de culori i 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. n procesul de comprimare se pstreaz toate caracteristicile imaginii originale, astfel c dup decomprimare imaginea are acelai aspect ca i originalul. Imaginile GIF suport efecte de transparen, ntreesere i animaie. 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 (.jpg), pe de alt parte, suport un numr mult mai mare de culori (aproximativ 16 milioane). Dac dorii s folosii imagini fotografice, formatul JPEG este recomandat, datorit calitii superioare a imaginii. Dimensiunile unui fiier JPEG nu depind de numrul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat dect cel al formatului GIF. Nu este neobinuit, de exemplu, ca un fiier GIF care are 200 de Kb s fie comprimat ca fiier JPEG pn la dimensiunea de 30 de Kb. Pentru a realiza un grad att de nalt de comprimare a imaginilor, formatul JPEG pierde anumite informaii din imaginea original. Cu toate c la decomprimare imaginea JPEG nu va fi absolut identic cu imaginea original, diferenele vor fi de cele mai multe ori inobservabile. Formatul
6

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.

SISTEME DE GESTIUNE A BAZELOR DE DATE, SERVER-E Bazele de date constituie unul din elementele fundamentale ale infrastructurii IT a companiilor. Avnd n vedere importana informaiilor stocate n bazele de date pentru desfurarea proceselor de afaceri, soluiile de acest tip trebuie s asigure un nivel ridicat de scalabilitate, performan i siguran n exploatare.Sistemul de gestionare a bazelor de date (SGBD) reprezinta un ansamblu de programe ce asigura legatura intre colectiile de date grupate in baza si utilizatori. Un SGBD asigura: definirea structurii de date: pe colectii si pe tabele introducerea datelor in baze de date accesul la date intretinerea bazei de date: actualizarea si introducerea de noi campuri reorganizarea bazei de date securitatea datelor: protectie la stergere si asigurarea back-up redundatei minime Facilitati de utilizare a SGBD: datele sa poata fi folosite in mai multe aplicatii independenta logica a datelor se refera la posibilitatea adaugarii de noi inregistrari sau campuri. accesul utilizatorilor sa fie optimizat folosirea limbajelor sau a metodelor rapide de regasire a datelor referitor la integritatea datelor: - protectii la erori, stergere - proceduri de refacere si salvare existenta procedurilor de interzicere a accesului existenta proceselor de validare a datelor interconectivitatea se refera la posibilitatea de a prelua date externe, din alte aplicatii. SGBD
7

FoxPro este un sistem software pentru gestiunea bazelor de date, asigurnd o interfa foarte eficient i prietenoas ntre sistemul de operare i programator. FoxPro este unul dintre mediile cele mai cunoscute de dezvoltare a aplicaiilor de baze de date. Microsoft Access este folosit interactiv pentru a crea si gestiona baze de date, precum si pentru a interactiona cu datele si pentru a le manipula. SQL este un limbaj special conceput pentru comunicarea cu bazele de date. SQL este o abreviere de la Structured Query Language (limbaj de interogare structurat). Oracle este dotat cu un instrument de gestiune pe suport Java, denumit Enterprise Manager.

Server-e n tehnologia informaiei, un server este un program de aplicaie (deci nu un sistem de operare) care furnizeaz servicii altor aplicaii (numite aplicaii client), aflate pe acelai calculator sau pe calculatoare diferite. De obicei, aplicaia server ateapt conexiuni din partea aplicaiilor client. Se mai numete server i calculatorul pe care ruleaz una sau mai multe asemenea aplicaii. Deseori soluia pentru mari aplicaii cu muli utilizatori se bazeaz tocmai pe arhitectura client-server, care const din cel puin 2 aplicaii (i deseori cel puin 2 computere). Aproape toat structura Internetului se bazeaz pe modelul de server client. Mai multe milioane de servere, toat lumea, sunt conectate la Internet i ruleaz continuu. Majoritatea serviciilor oferite pe Internet, de servere sunt: Web; Domain Name System; electronic mail sau pot electronic; file transfer sau transfer de fiiere; instant messaging sau mesagerie instant; fiiere audio i video, jocuri. Pentru orice aciune care este iniiat de un utilizator al Internetului, una sau mai multe servere interacioneaz unul cu cellalt. Oracle const dintr-un set complet de constructori de aplicaii i produse pentru utilizatori, cutnd s asigure soluii complete n tehnologia informaiei. Aplicaiile Oracle sunt portabile pe un numr mare de staii de lucru i sisteme de operare, de la calculatoare personale la procesoare paralele. Oracle este nzestrat cu un Sistem de Management al Bazelor de Date (DBMS) flexibil - Serverul Oracle - pentru stocarea i managementul informaiei utilizate de aplicaii. Ultimul server Oracle, ORACLE 7, conduce o baz de date cu toate avantajele unei structuri relaionale,avnd n plus capacitatea de a stoca i executa obiecte de tip baz de date, precum i proceduri i mecanisme de siguran. Serverul Oracle cuprinde un DBMS care controleaz: - Stocarea de date n sfera bazelor de date dedicate - Recuperarea de date pentru aplicaii utiliznd tehnici de optimizare adecvate - Securitatea bazelor de date i a taskurilor permise pentru anumii utilizatori
8

- Consistena i protecia datelor, incluznd arhivarea taskurilor i mecanisme de cutare Windows Server 2003 ofer modaliti mai eficiente pentru administrarea i controlul accesului la resursele locale i cele de la distan. Windows Server 2003 aduce:

management simplificat al serverelor din sucursale costuri reduse pentru managementul spaiului de stocare o platform Web bogat virtualizarea serverelor la costuri reduse management mbuntit al identitii i al accesului 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 site-ul. 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.
9

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. 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
10

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. 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
11

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 Concluzii Prima etap a procesului de construire a unui site este planificarea. n aceast etap trebuie identificai factorii care nu pot fi controlai printre care se numr: comportamentul utilizatorului, browserul cu care va fi vizualizat pagina i legturile cu pagini externe. Planificarea site-ului parcurge urmtoarele etape: Stabilirea audienei site-ului Stabilirea scopului site-ului Definirea obiectivelor site-ului Colectarea informaiilor despre subiectul prezentat Stabilirea specificaiilor site-ului Stabilirea modului de prezentare a site-ului Un site de calitate, care s ofere informaii valoroase n mod atractiv i s permit o comunicare eficient a acestora nu se nate n mod ntmpltor. Fr a avea o privire de ansamblu asupra aspectelor stabilite n faza de planificare, ansele de a realiza un site de bun calitate sunt minime. Dac vei ncepe s scriei direct codul HTML fr s trecei prin etapa de planificare vei obine doar o ngrmdire de pagini fr coeren, adesea defectuos legate ntre ele, cu un coninut neclar i slab structurat.

12

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. 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.

13

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 linii orizontale. Este indicat ca la fiecare nou seciune s inserai o legtur intern ctre partea superioar a paginii unde se afl Cuprinsul.

14

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 baznduse 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 siteului 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 site-ul 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
15

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 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.
16

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 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?

17

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 siteului 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 siteului. 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 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
18

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. 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%
19

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 link-uri 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 siteurile de dimensiuni reduse o astfel de structur poate funciona bine, ns pentru siteurile 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.
20

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. 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 siteului 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.
21

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. 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
22

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 multipagin, 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 siteului, 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 ntr-o asemenea pagin aa nct este mai bine s respectai regulile clasice de design prezentate. 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
23

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 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.
24

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 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
25

de fundal. Aspectul general al unor astfel de pagini este la fel de strident i iptor ca un decor de blci. Concluzii Construirea unui site necesit, pe lng o bun cunoatere a limbajului HTML, respectarea unor principii i folosirea unor tehnici consacrate. Site-ul trebuie s fie orientat ctre vizitator, ctre nelegerea i satisfacerea nevoii de informaie a acestuia. Designul trebuie s menin un echilibru ntre tehnologiile folosite i eficien, asigurnd o vitez convenabil de ncrcare a paginilor i o vizualizare bun n cele mai populare dintre browsere. Aspectul site-ului trebuie s fie n concordan cu scopul i obiectivele sale, evitnd excesele de orice fel. Principiile care trebuie respectate n etapa de design sunt: Asocierea semnificaiilor Meninerea competitivitii Folosirea eficient a resurselor Concentrarea pe necesitile utilizatorului nelegerea permeabilitii Web-ului Crearea unui aspect plcut, coerent i fluent Susinerea interactivitii Susinerea navigaiei Strategia de construire a site-ului poate urma una dintre metodele top-down , bottomup sau metoda incrementrii. n procesul de design, prima etap o constituie schia site-ului care trebuie s reflecte structura acestuia: liniar, ierarhic sau de tip Web. Informaia trebuie fragmentat astfel nct s nu depeasc puterea de asimilare a utilizatorului. Legturile dintre pagini trebuie s fie stabilite astfel nct s permit o parcurgere logic a coninutului site-ului, iar instrumentele de navigare trebuie adaptate modului n care sunt create legturile dintre pagini, oferind indicii vizuale asupra funciei lor. Este recomandat ca instrumentele de navigare s aib acelai aspect n toate paginile. Nerespectarea principiilor i tehnicilor de design poate s conduc la construirea unor pagini de tip fundtura , a unor pagini prea ncrcate cu informaii sau, dimpotriv, a unor pagini inegale. De asemenea, printre greelile de design care pot aprea sunt legturile fr semnificaie, excesul de elemente multimedia, paginile dezorganizate sau stridente.

26

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 site-urilor 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 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: Utilizai corectoare automate pentru ortografie i gramatic pentru a descoperi erorile plictisitoare, fcute din grab sau din oboseal. 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. Pentru site-urile de dimensiuni mari citii documentele n mod repetat, cutnd de fiecare dat un anumit tip particular de erori

27

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. La a doua lectur verificai logica i cursivitatea ideilor i a cuvintelor. La a treia lectur, corectai minuios ntregul text verificnd sintaxa, ortografia, punctuaia. 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: corectitudinea protocolului specificat extensia fiierului existena simbolului ~ Atenie! n UNIX, simbolul tilda (~) este utilizat pentru a specifica directorul de start (Home directory) al utilizatorului al crui nume urmeaz dup acest simbol. Folosind simbolul ~ v putei referi la o pagin Web astfel: http://www.server.com/~utilizator/pagina.html

28

Probleme n funcionarea paginilor Web 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: absena etichetelor de nchidere < / > mperecherea etichetelor HTML ghilimelele " " 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: Absena unuia dintre caracterele " < " sau " > " Absena etichetei de nchidere </H3> 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.

29

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. 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. Concluzii Dup etapele de planificare, design i implementare urmeaz etapa de testare a site-ului. n aceast etap se realizeaz: Corectarea paginilor din punct de vedere ortografic i gramatical Testarea legturilor din cadrul site-ului Testarea legturilor externe Depanarea greelilor care in de sintaxa codului HTML

30

Etapa de testare este deosebit de important pentru impresia general lsat de site-ul dumneavoastr. Un site cu ortografie neglijent, cu greeli de exprimare, cu legturi nefuncionale poate ndeprta vizitatorii, orict de valoroase ar fi informaiile prezentate n interiorul su.

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 siteului 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 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.
31

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 online 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 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.

32

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

33

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: 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.
34

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 casesensitive. 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 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.

35

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 siteului. 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
36

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. 5.Concluzii n etapa de publicare pe Web a site-ului trebuie parcuri urmtorii pai: Stabilirea unui nume de domeniu pentru site: gratuit sau pltit. Gsirea unui serviciu de gzduire convenabil sub raportul servicii/pre. Organizarea i denumirea directoarelor i fiierelor n conformitate cu cerinele sistemului serverului gazd. Transferul fiierelor, cea mai folosit metod de transfer fiind prin FTP.

37

Structura unui document HTML

Ce este un document HTML? Un document HTML nu este altceva dect un fiier text care, pe lng textul propriuzis ce va aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje (tags, n limba englez). Not Toate celelalte elemente, de tip multimedia, care nsoesc documentul HTML, cum sunt sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referine la aceste elemente, prin intermediul unor etichete speciale, care indic browserului modul n care ele vor fi ncrcate i integrate n pagina Web. Etichetele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse, privind aspectul textului, al fonturilor (tipurilor de caractere) i n general, al tuturor elementelor prezente n pagin. Etichetele sunt delimitate de perechi de paranteze unghiulare "< >". Unele etichete permit precizarea anumitor caracteristici ale elementului pe care l introduc n document prin intermediul unor perechi caracteristic - valoare numite atribute. Exist atribute specifice doar anumitor elemente i atribute ce sunt utilizate n asociere cu mai multe etichete. O etichet poate avea unul, nici unul, sau mai multe atribute. La rndul lor, atributelor li se pot atribui valori diferite. Att etichetele ct i atributele sunt case-insensitive, ca atare nu va exista nici o diferen de aciune ntre, s spunem, <head>, <Head>, <HEAD>, sau chiar <HeaD>. Ele sunt echivalente. Pe de alt parte, valoarea unui atribut poate fi case-sensitive, cum, n principiu, este cazul locaiilor fiierelor i adreselor URL. Regulile de folosire a etichetelor, atributelor i valorilor acestora reprezint sintaxa limbajului HTML. Similar limbajelor de programare, n HTML respectarea sintaxei limbajului este determinant pentru o bun funcionare a documentului. Spre deosebire de limbajele compilate cum ar fi limbajul C, n care programele trec nainte de execuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de sintax, la documentele HTML nu se ntmpl acest lucru. Documentele HTML sunt interpretate de browser exact aa cum au fost ele scrise. Prin
38

urmare, orice greeal de sintax se va reflecta direct n aspectul paginii Web, conducnd, de cele mai multe ori, la o funcionare defectuoas a acesteia. Dac la vizualizarea paginii dumneavoastr cu browserul constatai c anumite secvene ale paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate, revenii asupra documentului HTML i verificai nc o dat sintaxa acestor elemente. HTML lucreaz ntr-o manier foarte uor de neles. n esen trebuie s scriei textul i s precizai elementele care dorii s apar n pagin i s le includei ntre anumite etichete specifice. De exemplu, dac dorim s afim o propoziie cu caractere ngroate (bold), vom marca nceputul acesteia folosind eticheta <B> iar pentru marcarea sfritului propoziiei eticheta </B>. <B> Acesta este un text scris cu litere aldine</B> Atenie! Browserul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu-se invariabil cu un singur spaiu. De asemenea, nu se poate preciza mrimea liniilor de text, acestea fiind de mrimea ferestrei browserului (prin redimensionarea ferestrei se vor rearanja i liniile de text). Dup cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd i cum se poate alinia un text n pagin. Etichetele HTML sunt de dou tipuri: etichete container (container tags) etichete vide (empty tags) Etichetele container sunt de forma: <TAG> bloc de text </TAG> unde: <TAG> - marcheaz nceputul unui bloc </TAG> - marcheaz sfritul blocului Etichetele specific formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul unora dintre ele, prezena etichetei de nchidere (</TAG>) este opional. Pe parcursul capitolelor care vor urma, vom preciza explicit care anume sunt etichetele care au aceast proprietate. Etichetele vide au forma: <TAG>

39

Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii browserului despre ce element este vorba i despre cum s afieze acel element. Etichetele vide nu au etichet de nchidere. 2. Etichete de structur Orice document HTML conine dou seciuni: antetul (head) corpul documentului (body) 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 cele dou pri: 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> Iat acum i semnificaia etichetelor menionate i 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, deja menionat, 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. Ele vor face obiectul unui capitol separat. 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.

40

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. Atenie! Eticheta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare obinuit n bara de titlu a browserului. <BODY> </BODY> Conine descrierea textului i elementelor paginii. n corpul documentului se stabilesc, deci, aspectul i coninutul paginii Web. Elementele coninute n aceast seciune sunt vizibile n pagin. Poate nu v vine s credei, dar acum avei deja posibilitatea de a crea o pagin foarte simpl de text. Avei Notepad-ul deschis? Dac nu, deschidei-l acum i scriei exemplul urmtor: Exemplul 2. 1 <HTML> <HEAD> <TITLE>Pagina mea</TITLE> </HEAD> <BODY> Am reusit sa scriu prima mea pagina de Web. Urmatoarea va fi cu mult mai buna. </BODY> </HTML> Salvai fiierul cu numele primapagina.html. Apoi deschidei browserul pe care l folosii (Internet Explorer sau Netscape), selectai meniul File > Open > Browse, cutai folderul n care ai salvat fiierul, deschidei-l i v vei afla n faa primului dumneavoastr document 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 2. 2 <HTML> <HEAD> <TITLE>Pagina mea</TITLE> </HEAD> <BODY>
41

Am reusit sa scriu prima mea pagina de Web.<BR>Urmatoarea va fi cu mult mai buna. </BODY> </HTML> Deoarece structura documentelor HTML obinuite 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 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. Atenie! 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>
42

i un altul de folosire incorect: <TAG1><TAG2>Etichete utilizate incorect</TAG1></TAG2> 4. Concluzie Un document HTML este un fiier text care conine textul care va aprea n pagin i etichete. Acestea au rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse ntre ele. Etichetele sunt nsoite de atribute care sunt perechi caracteristic - valoare i care au rolul de a stabili diverse caracteristici ale etichetei. Etichetele pot fi de dou tipuri: etichete container i etichete vide. Etichetele container necesit eticheta de nchidere n timp ce etichetele vide nu trebuie nchise. Un document HTML este format din antet i corp. Etichetele de structur ale documentului sunt: <HTML> </HTML> care delimiteaz documentul <HEAD> <HEAD> care delimiteaz antetul <TITLE> </TITLE> care delimiteaz titlul documentului <BODY> </BODY> care delimiteaz corpul documentului. ntr-un document HTML se pot introduce comentarii prin introducerea textului ntre etichetele <!-- --> Imbricarea etichetelor respect regula LIFO: prima etichet deschis este ultima care se nchide. 5. Test 1. HTML este un acronim de la:
a) Hyper Text Marker Line

b) Hyper Text Markup Language c) Hyper Technical Method Library 2. Etichetele HTML sunt incluse ntre: a) [ i ] b) ( i ) c) < i >
43

Etichetele i textul care nu sunt vizibile n pagin sunt plasate n blocul: Body Head Table Ce fel de program este necesar pentru a scrie HTML? a) un editor de text b) un editor grafic c) HTML Development 4.0 5. O pagina Web este format din dou pri: a) Top i Bottom b) Body i Frameset c) Head i Body 6. Care etichete i comunica browserului unde ncepe i unde se termin pagina? a) <HTML> b) <HEAD> c) <BODY> 7. Care dintre urmtoarele elemente nu poate fi gsit n seciunea Head? a) Title b) Table c) Metatag 8. n construcia urmtoare: <TITLE>Pagina mea</TITLE> Pagina mea reprezint: a) Numele fiierului HTML b) Titlul care va aprea n pagina Web c) Titlul care va aprea n bara de titlu a ferestrei browserului 9. Care dintre urmtoarele fiiere nu este un fiier HTML? a) mypage.htm b) mypage.txt c) mypage.html 10.Iat exemplul de mai jos: <TAG1> <TAG2>Text</TAG2> <TAG3>Text <TAG4>Text</TAG4> </TAG3>Text </TAG1> Este un exemplu de folosire corect a etichetelor? a) Nu, deoarece nchiderea etichetelor nu respect regula LIFO. b) Nu, deoarece nu avem voie s folosim mai mult de dou etichete imbricate c) Da, deoarece etichetele se nchid corect.
3. a) b) c) 4.

44

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. Datorit faptului c ea reprezint un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din aceast etap a lucrrii noastre. 1. Sistemul de definire a culorilor Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun. n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru. Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale: 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 1 0 A 1 1 B 1 2 C 1 3 D 1 4 E 15 F

De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea: cantitatea de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF. Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod, standardul HTML 3.2 stabilete un set de 16 culori standard. n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n exemplul de mai jos, n care se seteaz culoarea magenta pentru linkurile vizitate: <BODY vlink="magenta">

45

Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele: Tabelul 3. 1 Nume culoare aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white Cod hexazecimal #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF

Mai trebuie menionat faptul c se pot utiliza, pe lng culori, 100 de nuane de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuana cea mai nchis, iar "gray 100" cea mai deschis. i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu-i culori. Vom lua pe rnd atributele etichetei <BODY>. Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor: bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilor
46

vlink - culoarea linkurilor vizitate alink - culoarea linkului activ 2. 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. Iat un exemplu de pagin cu fundal verde: Exemplul 3. 1 <HTML> <HEAD> <TITLE>culori1</TITLE> </HEAD> <BODY bgcolor="#00FF00"> <H1 align="center">Pagina cu fundal verde</H1><HR> </BODY> </HTML> 3. Culoarea textului Pentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei <BODY>, conform sintaxei: <BODY text="#RGB sau nume_culoare"> Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a textului (culoarea unui bloc de text), vom folosi o etichet despre care vom vorbi pe larg n capitolul urmtor: eticheta <FONT>. Aceasta este o etichet container care cuprinde ntre etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei: <FONT color="#RGB sau nume_culoare">Text</FONT> n Exemplul 3.2 culoarea textului este albastru iar anumite cuvinte sunt colorate n rou. Exemplul 3. 2 <HTML> <HEAD> <TITLE>culori2</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#0000FF"> <H1 align="center">Text albastru si rosu</H1> <HR>
47

Textul din aceasta pagina este albastru cu mici <FONT color="#FF0000"> exceptii</FONT> </BODY> </HTML> 4. Culoarea legturilor n general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel: blue (albastru) - pentru legturi red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng apsat) purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un click Pentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei <BODY>: link pentru legturi alink pentru legturile active vlink pentru legturile vizitate conform sintaxei: <BODY link="#RGB sau nume_culoare" alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare"> Documentul din Exemplul 3.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. n acest moment singurul lucru care ne intereseaz este cum putem stabili culorile acestora.

Exemplul 3. 3 <HTML> <HEAD> <TITLE>culori3</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00" alink="#0000FF" vlink="#FF0000"> <H1 align="center">Legaturi colorate</H1> <HR> <A href="culori1.html">Legatura catre primul exemplu</A> </BODY> </HTML> 5. 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. Aceasta nseamn...ai ghicit! Litere negre pe fond alb.
48

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. S nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana ochiului, de iluminarea camerei, etc. Pe un monitor cu reglaje medii ale contrastului i strlucirii, un text de culoare roie dispus pe un fundal negru va fi ilizibil, chiar dac la valori maxime ale acestor caracteristici combinaia poate genera efecte interesante. 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. Alegerea culorilor pentru legturi este, de asemenea, important. Legturile au, n mod prestabilit, anumite culori. Schimbarea acestora, dei posibil, l poate induce n eroare pe vizitator. Ca i n cazul textului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu culoarea sau imaginea de fundal a paginii. Rmnei consecvent culorilor alese pentru legturi, pe parcursul ntregului site. 6. Culori "sigure" Aa cum era de ateptat, nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, aa-numit palet Web sau "culorile sigure Web".

49

Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat n tabelul de mai sus sau sunt realizate prin combinaii ale urmtoarelor numere hexazecimale: 00 33 66 99 CC FF Codul hexazecimal variaz ntre #FFFFFF (alb) i #000000 (negru). Un monitor setat s afieze 256 de culori va ncerca afiarea unei culori din afara acestui set prin fenomenul numit "dithering" (alternarea unui pixel de o culoare cu un pixel de alt culoare), ceea ce uneori d rezultate, dar adesea rezultatul e departe de culoarea real. Alteori, computerul va afia culoarea "sigur" cea mai apropiat de cea original. n principiu, o astfel de problem poate prea minor. n realitate, presupunnd c o pagin Web conine att textul ct i fundalul ambele n culori "nesigure", prin modificarea lor de ctre computerul cititorului, nuanele "aproximate" pot face textul total ilizibil. Pentru a evita astfel de surprize neplcute este suficient s v menine n limita celor 256 de culori "sigure". Desigur, putei folosi o combinaie hexazecimal ciudat, ca aceasta: #12EC8B, dar nu vei avea nici o garanie n privina modului n care va fi afiat aceast culoare n diferite browsere i pe diferite platforme. 7. Concluzii Culorile ntr-un document HTML sunt definite cu ajutorul codului RGB care exprim n sistem hexazecimal cantitatea de rou, verde i albastru prezent n fiecare culoare. Pentru a stabili culorile ntr-o pagin Web se folosesc atributele etichetei <BODY> dup urmtoarea sintax: <BODY bgcolor="#RGB sau nume_culoare" text="#RGB sau nume_culoare" link="#RGB sau nume_culoare" alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">corpul documentului</BODY> Alegerea culorilor pentru o pagin Web trebuie s fie n strns legtur cu mesajul transmis de aceasta i s permit citirea cu uurin a informaiilor prezentate. Pentru a evita afiarea defectuoas a culorilor din pagin este recomandat folosirea culorilor "sigure". 8. Test 11.Sistemul pentru definirea culorilor este: a) Red, Green, Blue b) Red, Yellow, Blue c) White, Black, Gray 12.Culorile n HTML pot fi specificate folosind: a) Codul zecimal b) Codul hexazecimal c) Codul Morse 13.Care este cea mai mare cifr n sistemul hexazecimal? a) 15 b) F
50

c) A 14.O culoare care are n sistemul zecimal codul RGB cu valorile: 46, 250, 34 are codul hexazecimal: a) #2EFA22 b) #3CCD45 c) #66FF90 15.Pentru a stabili culoarea fundalului paginii folosim: a) <BODY background="culoare"> b) <BODY color="culoare"> c) <BODY bgcolor="culoare"> 16.Setarea culorii pentru tot textul din pagin se face cu: a) <FONT color="culoare"> b) <BODY fontcolor="culoare"> c) <BODY text="culoare"> 17.Cum se poate schimba culoarea unui bloc de text? a) <COLOR="culoare">text</COLOR> b) <TEXT color="culoare">text</TEXT> c) <FONT color="culoare">text</FONT> 18.Care sunt culorile prestabilite pentru legturi, legturi active i legturi vizitate? a) albastru, rou, violet b) albastru, verde, galben c) negru, albastru, rou 19. Culoarea legturilor se poate schimba folosind: a) <LINK color="culoare"> b) <BODY link="culoare"> c) <BODY linkcolor="culoare"> 20. Atributele link, alink i vlink servesc la: a) stabilirea legturilor b) stabilirea culorilor pentru legturi c) stabilirea culorilor pentru ntreaga pagin

Fonturi nainte de a aborda tipurile de caractere care pot fi utilizate n documentele Web, se cuvine menionat un fapt: HTML nu este un limbaj orientat spre aspectul (layout) paginii, ci spre coninutul acesteia. Importana acestei meniuni rezid n aceea c etichetele HTML nu impun, cum s-ar putea crede, ci "sftuiesc" marea varietate de browsere care proceseaz pagina Web, cum s afieze textul. Ceea ce impun ele cu adevrat este coninutul, textul n sine, nu forma de prezentare.
51

Desigur c nu se poate vorbi de cealalt extrem, a unui arbitrariu absolut, n care fiecare browser va afia textul sub o form absolut imprevizibil. Un text cu o anumit formatare pentru Internet Explorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de browser. Exist numeroase etichete care permit formatarea caracterelor i ne ofer posibilitatea de a da textului din pagina Web aspectul dorit. 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. nainte de a discuta despre atributele etichetei <FONT> s luam un exemplu: <FONT size="2" color="red" face="arial">Ion Luca Caragiale </FONT> Efectul liniei de mai sus este afiarea textului "Ion Luca Caragiale" cu fonturi Arial, de culoare roie i de mrime egal cu 2 puncte. S analizm succesiv 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, "Ion Luca Caragiale" ). 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.

52

Atenie! 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 4.1 vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui text. Exemplul 4. 1 <HTML> <HEAD> <TITLE>fonturi1</TITLE> </HEAD> <BODY bgcolor="yellow"> <FONT size="5" face="tahoma" color="green">Manual de HTML si design Web</FONT><BR> <FONT size="+3" face="arial" color="red">Manual de HTML si design Web</FONT><BR> <FONT size="-1" face="courier new" color="blue">Manual de HTML si design Web</FONT> </BODY> </HTML> Pentru a stabili aspectul textului unei ntregi pagini Web, putem folosi eticheta <BASEFONT>. Spre deosebire de <FONT> aceasta nu este o etichet container, deoarece efectul ei se refer la tot textul din pagin. Nu se folosete pentru a stabili caracteristicile unui bloc de text. Este indicat s fie inclus n documentul HTML imediat dup eticheta <BODY>. Atributele etichetei <BASEFONT> sunt aceleai cu cele ale etichetei <FONT>, respectiv: size, color, face. n Exemplul 4.2 vom construi o pagin creia i setm textul cu atributele: face - tip de font Arial, size - dimensiunea fontului 2, color - culoare albastr. O parte din text va avea alt tip de font, alt mrime i culoare, acestea fiind stabilite prin folosirea etichetei <FONT>. Exemplul 4. 2 <HTML> <HEAD> <TITLE>fonturi2</TITLE>
53

</HEAD> <BODY bgcolor="white"> <BASEFONT face="arial" color="blue" size="2"> Am ajuns la lectia despre fonturi a <FONT face="arial black" color="red" size="4">Manualului de HTML</FONT> </BODY> </HTML> 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 4.3) afieaz un cuvnt avnd literele de mrimi diferite. Exemplul 4. 3 <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> S trecem n revist, n continuare, alte etichete care schimb aspectul unui caracter sau al unui bloc de text. 2. Accentuarea textului 1. Eticheta <BIG> </BIG> face fonturile mai mari dect dimensiunea curent. <BIG>Text cu caractere mari</BIG> Text cu caractere mari
2. Eticheta <SMALL> </SMALL> face fonturile mai mici dect dimensiunea curent. 54

<SMALL>Text cu caractere mici</SMALL> Text cu caractere mici 3. 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 4. 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 5. 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 6. Eticheta <U> </U> (underlined) realizeaz sublinierea textului. <U>Text subliniat</U> Text subliniat Atenie! Utilizarea textului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un link. 7. 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 8. 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 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.

55

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 4. 4 <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 4. 5 <HTML> <HEAD> <TITLE>fonturi5</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> Dup cum ai observat mai sus, exist dou etichete al cror efect este acelai: accentuarea textului fie prin scrierea cu caractere italice fie cu caractere aldine.

56

3. Etichete logice i etichete fizice Etichetele <B> i <I> se numesc etichete fizice, iar <EM> i <STRONG> etichete logice. Etichetele de titluri de la <H1> la <H6> sunt, de asemenea, etichete logice. Diferena dintre cele dou tipuri de etichete este legat de felul cum sunt ele executate de diversele tipuri de browsere. Astfel, etichetele fizice impun browserului afiarea n formatul exact, precizat prin intermediul lor. Dac browserul nu suport acest format, etichetele sunt ignorate. Spre deosebire de etichetele fizice, cele logice las browserului libertatea de a alege cel mai bun mod de a ndeplini comanda transmis prin eticheta. De exemplu, efectul etichetei <EM> este, n cele mai multe browsere, scrierea textului cu caractere italice. Totui, dac un anumit tip de browser nu suport acest format de caractere, va accentua totui textul ntr-un alt mod, cel mai bun de care dispune. Alte etichete logice utilizate n documentele HTML sunt: <CITE> </CITE> (citation) Etichet folosit pentru inserarea unui citat. De obicei, citatul este afiat cu caractere italice. <CODE> </CODE> (code) Etichete folosite pentru inserarea n text a unor secvene de cod scrise ntr-un limbaj de programare. n general secvenele de cod sunt afiate cu fonturi Courier. <DFN> </DFN> (definition) Eticheta este folosit pentru a insera n text definiia unor termeni. Este util la crearea indexului sau glosarului unui document. <KBD> </KBD> (keyboard) Aceast etichet logic se folosete pentru a indica un text care urmeaz a fi introdus de la tastatur, ca n urmtorul exemplu: Pentru a parasi programul tastati <KBD>quit</KBD> <SAMP> </SAMP> (sample) Este o etichet logic folosit pentru a insera o mostr de text. <TT> </TT> (teletype) Aceast etichet se folosete pentru a afia textul inclus ntre etichete cu fonturi monospaiate. Tipul de font monospaiat (cum este de exemplu Courier) are proprietatea c fiecrui caracter i se rezerv acelai numr de pixeli pe ecran. Astfel, caracterul "i" va avea alocat tot atta spaiu pe ecran ca i caracterul "W": "Courier" este un font monospaiat. Mai trebuie precizat i faptul c utilizarea unora dintre etichetele de formatare a fonturilor aa cum au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri (Cascade Style Sheets) despre care vom vorbi ntr-un capitol viitor.
4. Cncluzie

Pentru a stabili aspectul unei anumite secvene de text aceasta este inclus ntre etichetele <FONT> </FONT> conform sintaxei:

57

<FONT size="numar" color="#RGB sau nume_culoare" face="tip_font"> text </FONT> Pentru a seta aspectul textului n toat pagina Web se folosete eticheta <BASEFONT> conform sintaxei: <BASEFONT size="numar" color="#RGB sau nume_culoare" face="tip_font"> accentuarea textului se poate face folosind diverse etichete pentru scrierea cu caractere aldine, cu caractere italice, cu caractere mai mari sau mai mici dect dimensiunea curent a fonturilor. Etichetele sunt de dou tipuri: fizice i logice, etichetele fizice fiind orientate ctre aspectul textului iar cele logice ctre semnificaia textului n cadrul documentului. 5. Test d) Pentru a stabili tipul de font pentru ntreaga pagin Web se folosete eticheta: a) <DEFAULT> b) <BASEFONT> c) <TARGET> 21.Pentru a stabili tipul de font cu care se face afiarea unui text se folosete atributul: a) character b) type c) face 22.Unul dintre exemplele urmtoare este incorect. Care? a) <FONT face="arial"> b) <FONT face="arial, verdana"> c) <FONTface="verdana"> 23.Ce realizeaz urmtoarea etichet? <FONT size="+1"> a) Afieaz textul cu fonturi de mrime 1. b) Afieaz pe pagin textul "+1". c) Afieaz textul cu fonturi de dimensiune mai mare cu un punct dect dimensiunea curent. 24. n afara etichetei <B> ce alt etichet se mai folosete pentru a scrie un text cu caractere aldine? a) <DARK> b) <STRONG> c) <BIG> 25. Etichetele <I> i <EM> realizeaz: a) scrierea textului cu caractere italice b) inserarea unei imagini c) scrierea textului cu caractere mai mici dect cele curente 26.Ce este incorect n urmtorul exemplu? <FONT face="arial, verdana, times new roman", size="4"><B>text</FONT></B>
a) Nu se pot preciza mai multe tipuri de fonturi ca valori pentru atributul face. 58

b) Tipurile specificate nu se pot scrie cu caractere aldine c) Etichetele <FONT> i <B> nu se nchid corect. 27. Prin ce se aseamn etichetele <STRONG> i <EM>? a) Sunt amndou etichete logice. b) Sunt amndou etichete fizice. c) Servesc amndou la scrierea textului cu caractere italice. 28.Care este greeala n urmtoarea construcie? <BASEFONT face="arial" size="5">text</BASEFONT> a) <BASEFONT> nu este o eticheta container b) <BASEFONT> nu suport atributul face c) <BASEFONT> nu suport atributul size 29.Ce efect are urmtoarea etichet? <FONT="arial, verdana, times new roman"> a) Textul se afieaz cu toate cele trei tipuri de fonturi. b) Textul se afieaz cu primul tip de font, dintre cele trei, pe care l recunoate browserul. c) Eticheta nu era nici un efect ntruct este incorect.

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
59

texul care urmeaz dup etichet va fi afiat pe un rnd nou aa cum rezult din Exemplul 5.1. Exemplul 5. 1 <HTML> <HEAD> <TITLE>text1</TITLE> </HEAD> <BODY> Buna ziua<BR>Ma numesc Lucia<BR>Invat sa construiesc o pagina Web<BR> </BODY> </HTML> 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. Exemplul 5. 2 <HTML> <HEAD> <TITLE>text2</TITLE> </HEAD> <BODY> <IMG src="../Imagini/toad.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) Utilizarea titlurilor este justificat de nevoia de a sublinia prin format structura logic a unui document, dar, nu n ultimul rnd, i de monotonia la care expune un text lung, lipsit de variaie n aspect. Firete c un asemenea text sfrete prin a obosi cititorul Web, obinuit cu texte scurte i concentrate. Din acest motiv se recomand "spargerea" textelor mai lungi i organizarea lor n secvene mai scurte, marcate de titluri i subtitluri, organizate ierarhic, pe nivele.

60

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. Atenie! 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 5.3 vom folosi toate cele ase etichete pentru titluri pentru a face o comparaie cu dimensiunea standard a textului. Putei observa efectul acestor etichete n Figura 5.3. Exemplul 5. 3 <HTML> <HEAD> <TITLE>text3</TITLE> </HEAD> <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> Este de menionat o proprietate interesant a etichetelor de titluri, i anume aceea c un text scris pe aceeai linie cu un titlu este afiat n pagin pe rndul urmtor titlului, lsndu-se o linie liber ntre titlu i text, dei nu este prezent nici una dintre etichetele <BR> sau <P>. Etichetele de titlu accept atributul align cu valorile left, center i right pentru alinierea titlului blocului de text la stnga (n mod prestabilit), n centru i respectiv la dreapta. Figura 5.4 red aspectul paginii descrie de documentul din Exemplul 5.4 care ilustreaz modul de aliniere al titlurilor.

61

Exemplul 5. 4 <HTML> <HEAD> <TITLE>text4</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 5.5 ilustreaz cele trei modaliti de aliniere a textului. Exemplul 5. 5 <HTML> <HEAD> <TITLE>text5</TITLE> </HEAD> <BODY> <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>
62

</HTML> Din Figura 5.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 5.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 5. 6 <HTML> <HEAD> <TITLE>text6</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> 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 aa cum rezult din Figura 5.7. 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
63

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>. 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 5.7 ilustreaz modul cum poate fi folosit eticheta <PRE>. Aspectul paginii descrise n acest document este cel din Figura 5.8. Testai exemplul folosind eticheta <PRE> iar apoi eliminai-o, pentru a observa mai bine efectul su. Exemplul 5. 7 <HTML> <HEAD> <TITLE>text7</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>
64

</BODY> </HTML> 5. Centrarea textului 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 5.8 realizeaz centrarea unui text. Exemplul 5. 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 5.9 ilustreaz folosirea etichetei <NOBR>, pagina avnd aspectul din Figura 5.10. Exemplul 5. 9 <HTML> <HEAD> <TITLE>text9</TITLE> </HEAD> <BODY>
65

<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> 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 5.10 este ilustrat utilizarea acestei etichete. Exemplul 5. 10 <HTML> <HEAD> <TITLE>text10</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>
66

</DIV> </BODY> </HTML> 8. Linii orizontale 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 Exemplul 5. 11 <HTML> <HEAD> <TITLE>text11</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> Din Figura 5.12 care red aspectul paginii descrise 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. Atributul color al etichetei <HR> nu este suportat de browserul Netscape. n exemplul urmtor (Exemplul 5.12) vom ilustra modul n care eticheta <DIV> aliniaz elementele coninute n interiorul su, n cazul nostru text i linii orizontale.

67

Exemplul 5. 12 <HTML> <HEAD> <TITLE>text12</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> </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. Exemplul 5. 13 <HTML> <HEAD> <TITLE>text13</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>

68

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 5.14 ilustreaz modul de folosire al celor dou etichete. Exemplul 5. 14 <HTML> <HEAD> <TITLE>text14</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). Atenie Comanda ncepe cu simbolul & (ampersand) i se termin cu ; (punct i virgul).

69

n Exemplul 5.15 este ilustrat modul cum pot fi spaiate cuvintele folosind comanda &nbsp; Exemplul 5. 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 Figura 5.16 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, putei insera la nceputul fiecrei linii numrul de comenzi &nbsp; egal cu numrul de spaii cu care vrei s indentai textul. Iat mai jos un tabel cu comenzile necesare pentru a insera n text cele mai cunoscute caractere.

70

Tabelul 5. 1 Denumire caracter Spaiu liber Copyright Trademark Registered Mai mic dect Mai mare dect Ampersand Ghilimele Cent Un sfert O jumtate Trei sferturi Grade < > & " Reprezentare a grafic Comanda 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. 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.
71

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. Atenie! 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.

13. Concluzii

Browserul afieaz textele cu cte un singur spaiu ntre cuvinte i nu recunoate sfritul de linie i nceputul unei linii noi. Elementele de formatare a textului se introduc n documentul HTML prin intermediul unor etichete specifice: trecerea la un rnd nou: eticheta <BR> <BR clear="left, right, all">text introducerea unui titlu: etichetele <H1> - <H6> <Hn align="left, right, center">text</Hn> introducerea unui paragraf: eticheta <P> </P> <P align="left, right, center" nowrap>text</P> preformatarea textului: eticheta <PRE> </PRE> <PRE>text</PRE>
72

centrarea textului: eticheta <CENTER> </CENTER> <CENTER>text</CENTER> afiarea textului pe o singur line: eticheta <NOBR> </NOBR> <NOBR>text</NOBR> crearea unui diviziuni n text: eticheta <DIV> </DIV> <DIV align="left, right, center">text</DIV> inserarea unei linii orizontale: eticheta <HR> <HR size="valoare" width="valoare" color="#RGB sau nume_culoare" align="left, right, center"> inserarea unei adrese: eticheta <ADDRESS> </ADDRESS> <ADDRESS>text</ADDRESS> inserarea unui citat: etichetele <BLOCKQUOTE> </BLOCKQUOTE> i <CITE> </CITE> <BLOCKQUOTE>text</BLOCKQUOTE> <CITE>text</CITE> inserarea caracterelor speciale prin comanda &; 14. Test e) Care este rolul etichetei <BR>? a) Trecerea la un rnd nou b) Inserarea unei linii libere n text c) Inserarea unei linii orizontale 30.Pentru ca browserul s afieze textul aa cum a fost el formatat n documentul HTML se folosete eticheta: a) <P> b) <PRE> c) <DIV> 31.Ce se va afia n urmtorul exemplu? <P>Text1 <P align="right">Text2 a) Text1 i Text2 vor fi aliniate la dreapta, cu o linie liber ntre ele b) Text1 va fi aliniat la stnga, Text2 va fi aliniat la dreapta, cu o linie liber ntre ele c) Text1 i Text2 vor fi scrise pe aceeai linie 32.Pentru a scrie un titlu de dimensiune maxim folosim eticheta: a) <H1> b) <H6> c) <H7> 33.Pentru a afia un text pe o singura linie: a) folosim eticheta <BR> b) folosim eticheta <NOBR> c) nu folosim nici o etichet

34.Care dintre urmtoarele etichete nu realizeaz centrarea textului?


73

<P align="center">Text</P> <CENTER>Text</CENTER> <DIV>Text</DIV> Ce realizeaz eticheta <ADDRESS>? a) inserarea unui link b) inserarea unei adrese de e-mail c) inserarea unei adrese potale 36.Pentru a insera ntr-o pagin o linie orizontal standard folosim eticheta: a) <HR> b) <HR width="100"> c) <HR size="1"> 37. Eticheta <BLOCKQUOTE> folosete la: a) indentarea textului b) scrierea textului cu caractere italice c) inserarea unui citat n text 38.Care dintre aceste afirmaii este fals? a) Toate spaiile i liniile libere introduse n text la editarea documentului HTML sunt afiate ntocmai de browser. b) Un text scris pe aceeai linie cu o etichet de titlu este afiat sub titlu, chiar dac nu este prezent eticheta <BR>. c) Pentru a introduce spaii suplimentare n text se folosete comanda &nbsp;
a) b) c) 35.

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.
74

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) Iat cteva exemple de adrese URL mpreun cu explicaii referitoare la sintaxa lor: http://www.autor.com/carti.html n acest exemplu adresa URL indic documentul HTML numit carti.html care se afl directorul rdcin al serverului www.autor.com http://www.autor.com/ Aceast adres indic prima pagin (home page) a aceluiai server. http://www.autor.com:8080/ Exemplul de mai sus indic de asemenea spre prima pagin a serverului www.autor.com, dar specificnd i numrul portului care este diferit de cel prestabilit. http://www.autor.com/carti.html#webdesign n acest exemplu este indicat calea spre documentul HTML carti.html aflat pe acelai server, dar specificndu-se o anumit seciune a acestui document, seciune denumit webdesign. n cazul cnd fiierul spre care este fcut legtura este stocat pe propriul calculator se folosete o adres URL de forma urmtoare: file://server/calea_catre_fisier unde: server - reprezint numele computerului pe care este stocat fiierul (acelai pe care ruleaz browserul). n acest caz, browserul va accesa fiierul folosind facilitile obinuite ale sistemului de operare de pe computerul propriu. calea_catre_fisier - reprezint localizarea fiierului n structura de directoare conform regulilor sistemului de operare Numele computerului personal poate fi nlocuit cu numele generic "localhost". n acest caz, adresa URL poate avea urmtoarea form: file://localhost/calea_catre_fisier
75

De exemplu fiierul culori.html care este salvat n folderul de lucru Work din My Documents pe computerul personal va avea urmtoarea adres URL: file://localhost/C:\My Documents\Work\culori.html Termenul localhost poate fi omis, deoarece este numele prestabilit al computerului propriu. n acest caz este necesar prezena unui caracter "/" suplimentar: file:///C:\My Documents\Work\culori.html n practic, atunci cnd dorim s adresm un fiier aflat pe computerul propriu putem omite prima parte a adresei URL obinnd urmtoarea form: C:\My Documents\Work\culori.html Atenie! Se poate observa c n cazul resurselor stocate pe servere externe, numele directoarelor care fac parte din calea ctre resurs sunt desprite prin caracterul "/" (slash). La fiierele stocate pe computerul propriu, directoarele i subdirectoarele care formeaz calea ctre fiier sunt desprite prin caracterul "\" (backslash). Cele dou moduri de scriere sunt specifice celor dou sisteme de operare: UNIX, respectiv DOS-Windows. Deoarece marea majoritate a serverelor Web folosesc sistemul de operare UNIX, calea ctre resursele stocate pe ele se scrie respectnd conveniile acestui sistem. Mai mult, aceast convenie s-a extins i la adresele URL referite de pe sisteme Windows. Astfel, dac dorii s adresai un fiier numit foto.jpg aflat pe discul C:, n My Documents, folderul Imagini putei folosi adresa URL: C:/My Documents/Imagini/foto.jpg 2. Adrese absolute i adrese relative 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:/Manual HTML/Exemple/culori.html Fiierul culori.html se afl plasat pe discul C:, n directorul Manual HTML, subdirectorul Exemple. 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
76

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: <A href="adresa_URL"><FONT face="tip">Legatura</FONT></A> n locul ei vom folosi construcia: <FONT face="tip"><A href="adresa_URL">Legatura</A></FONT> Atenie! Nu este permis imbricarea mai multor etichete <A>. 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 facilita navigarea ntr-o pagin care conine un text de mari dimensiuni se pot insera n acesta anumite puncte de reper ctre care se definesc legturi. Acestea se numesc ancore. 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> 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>
77

Textul explicativ va fi afiat n mod diferit, n format hyperlink, subliniat i de culoare prestabilit albastr. n momentul cnd se efectueaz click cu mouse-ul pe text explicativ se realizeaz un salt n cadrul paginii, browserul afind partea din pagin care ncepe de la elementul n dreptul cruia a fost inserat ancora. 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 6.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 6. 1 <HTML> <HEAD> <TITLE>legaturi1</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="text14.html#citat">AICI </A> pentru a deschide un document situat in alta pagina </BODY> </HTML> Observaie
78

Construciile de mai jos au acelai rol, i anume inserarea unei ancore denumit "ancora1" n punctul din pagin care conine elementul "ELEMENT". <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 Work. Exemplul 6. 2 <HTML> <HEAD> <TITLE>legaturi2</TITLE> </HEAD> <BODY> <H1>Pagina 1 </H1><HR> <A href="legaturi3.html">Link catre pagina 2 </A> </BODY> </HTML> Salvai acest exemplu cu numele legaturi2.html iar exemplul urmtor (Exemplul 6.3) cu numele legaturi3.html.
79

Exemplul 6. 3 <HTML> <HEAD> <TITLE>legaturi3</TITLE> </HEAD> <BODY> <H1>Pagina 2 </H1><HR> <A href="legaturi2.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 legaturi5.html este diferit de fiierul Legaturi5.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 My Documents, n folderul Work, o legtur ctre el se va face n modul urmtor: <A href="C:/My Documents/Work/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 "../ " Exemplu
80

S presupunem c ne aflm ntr-un document HTML numit legaturi2.html plasat n folderul de lucru Work. n afar de folderul Work n care lucrm, n My Documents se mai afl un folder, numit Imagini, ca n structura prezentat n Schema 6.1.

Schema 6.1

C: C: My Documents Work

e legaturi2.html
Imagini trandafir.gif

Dorim s realizm o legtur cu un fiier numit trandafir.gif din folderul Imagini. n acest caz, eticheta <A>, plasat n documentul legaturi2.html, va avea urmtoarea form: <A href="../Imagini/trandafir.gif">Deschide imaginea</A> Semnificaia este urmtoarea: 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 este C:/My Documents/Work, prin utilizarea irului de caractere "../" se ajunge n folderul printe, care este C:/My Documents. De aici se continu calea n folderul Imagini, dup care se specific numele fiierului din acest folder cu care vrem s stabilim legtura. Exemplu S presupunem c ne aflm n documentul legaturi2.html poziionat ca n Schema 6.2.

81

Schema 6.2

C: C: My Documents Manual HTML Exemple Legaturi

e legaturi2.html

Dorim s stabilim o legtur cu un fiier numit text2.html care se afl n directorul Exemple (directorul printe al folderului nostru, Legaturi). 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 folderul Manual HTML, atunci adresarea se face astfel: <A href="../../text2.html">Link la text</A>
82

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). 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 6. 4 <HTML> <HEAD> <TITLE>legaturi4</TITLE> </HEAD> <BODY> <H1 align="center">Link catre Yahoo.com</H1><HR> <A href="http://www.yahoo.com"> Yahoo!</A> </BODY> </HTML> Aspectul paginii este cel din Figura 6.3. 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 6.5 ilustreaz utilitatea atributului title, aa cum reiese din Figura 6.4. Exemplul 6. 5 <HTML> <HEAD> <TITLE>legaturi5</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>
83

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>: 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 6.6 ilustreaz modul cum pot fi modificate culorile legturilor, aa cum se poate observa din Figura 6.5 care red aspectul paginii descrise n exemplu. Exemplul 6. 6 <HTML> <HEAD> <TITLE>legaturi6</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="legaturi2.html">Link catre pagina 1 </A><BR> <A href="legaturi3.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 e-mail manager, cum sunt de pild aplicaiile Microsoft Outlook sau Outlook Expres, activarea legturii va determina deschiderea unuia dintre aceste programe. n cazul n
84

care managerul de e-mail 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 6.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 6. 7 <HTML> <HEAD> <TITLE>legaturi7</TITLE> </HEAD> <BODY> <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 6.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 6. 8
85

<HTML> <HEAD> <TITLE>legaturi8</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. 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> Figura 6.8 red modul n care se deschide o pagin ntr-o nou fereastr, aa cum este precizat n Exemplul 6.9. Exemplul 6. 9 <HTML> <HEAD> <TITLE>legaturi9</TITLE> </HEAD> <BODY> <H1 align="center">Deschiderea paginii in alta fereastra</H1> <HR> Pagina de mai jos se va deschide intr-o fereastra noua
86

<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 6.10. Evident, legturile vor face referire la fiierele HTML dorite de dumneavoastr. Exemplul 6. 10 <HTML> <HEAD> <TITLE>legaturi10</TITLE> </HEAD> <BODY> <H1 align="center">Bara de navigare</H1><HR> <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>|

87

13. Concluzii Adresa 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 i despre localizarea ei n structura de directoare de pe server. Legturile se introduc ntr-un document HTML prin intermediul etichetei container <A> </A> conform urmtoarei sintaxe generale: <A href="adresa_URL" name="nume" title="text" target="tinta">text sau imagine</A> n funcie de locul unde este plasat documentul referit exist mai multe tipuri de legturi: Legturi n cadrul aceleiai pagini (legturi interne, ancore). Pentru a crea o legtur intern sunt necesari doi pai: definirea numelui ancorei i stabilirea legturii . Legturi cu pagini aflate n acelai director. Pentru a stabili o legtur cu o pagin aflat n acelai director se specific drept valoare a atributului href chiar numele fiierului HTML. Legturi cu pagini aflate n alt director. Pentru a stabili locaia documentului cu care facem legtura se poate folosi adresarea relativ (recomandat) sau adresarea absolut. Legturile externe. n cazul legturilor externe, atributul href primete ca valoare adresa URL a paginii respective. Se pot stabili i legturi ctre fiiere oarecare (nu neaprat documente HTML). La activarea unei astfel de legturi se deschide fereastra de download a sistemului. Cu ajutorul comenzii mailto: se lanseaz automat n execuie aplicaia de pot electronic a vizitatorului paginii. 14. Test 39.Care dintre urmtoarele afirmaii este fals: a) Eticheta <A> servete la stabilirea unei legturi n cadrul aceleiai pagini b) Eticheta <A> servete la stabilirea unei legturi ctre un fiier aflat pe acelai calculator c) Eticheta <A> servete la scrierea textului cu caractere Arial. 40.Pentru a preciza numele fiierului spre care se face legtura se folosete atributul: a) name b) href c) file 41.Care este greeala din urmtoarea construcie? <H2><A name="#gr">Greseala</A><H2> a) Nu este nici o greeala. b) Ar fi trebuit formulat: <H2><A name="gr">Greseala</A></H2> c) Ar fi trebuit formulat: <A name="#gr"></A><H2>Greseala</H2> 42.Ce realizeaz exemplul urmtor? <A name="sectiunea1">Sectiunea 1</A> a) Insereaz o ancor n pagin i definete numele ei. b) Stabilete o legtur n cadrul paginii.
88

c) Stabilete o legtura la fiierul sectiunea1.html.

43.Fiierul contact.html, referit n legtura de mai jos: <A href="../contact.html">Contact</A> este localizat n: a) acelai director ca i fiierul curent b) directorul printe al fiierului curent c) directorul aflat cu dou nivele mai sus dect directorul curent 44.n documentul culori.html am inclus urmtoarea ancor: <A name="fundal"></A> n acest caz, construcia corect pentru a face legtura spre ea din cadrul unui alt document aflat n acelai director este: a) <A href="#fundal">Background</A> b) <A href="culori.html_fundal">Background</A> c) <A href="culori.html#fundal>Background</A> 45. Care este aspectul unei legturi ntr-un text, n mod prestabilit (default)? a) de culoare albastr i subliniat b) de culoare roie c) subliniat 46.Care dintre urmtoarele afirmaii este fals? a) Nu este permis imbricarea mai multor etichete <A>. b) Nu este permis schimbarea culorilor legturilor. c) Nu este permis referina la alte fiiere dect fiierele HTML. 47. Pentru a stabili o legtura cu site-ul extern www.books.com folosim construcia: a) <A href="http://www.books.com"> b) <A href="file://www.books.com"> c) <A href="books.com"> 48.Fie urmtoarea etichet inserat n pagin: <A href="mailto:utilizator@domeniu.com>Send mail</A> Dac se execut click pe textul "Send mail": a) Se deschide pagina www.domeniu.com. b) Se deschide programul de mail al vizitatorului paginii. c) Se deschide csua de mail cu adresa specificat. 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
89

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. Aceast opiune este determinat de faptul c majoritatea utilizatorilor Internetului dispun de conexiuni telefonice dial-up, cu viteze destul de mici, astfel c timpul de ncrcare al fiierelor, care depinde de dimensiunea acestora, devine un factor determinant. Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint Photographic Experts Group) i GIF (Graphics Interchange Format). Atenie! Dac imaginea nu este salvat n acelai folder n care se afl documentul HTML surs care folosete imaginea respectiv, referina la imagine trebuie s conin calea corect ctre locaia ei, altminteri imaginea nu va fi afiat n pagin. 3. 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. 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 7.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 7. 1 <HTML> <HEAD> <TITLE>imagini1</TITLE>
90

</HEAD> <BODY> <H1 align="center">Imagini in pagina</H1><HR> Imagine aflata in acelasi folder<P> <IMG src="tiger.gif" border="5"><P> Imagine aflata in folderul Imagini<P> <IMG src="../Imagini/bernese.jpg" border="1" > </BODY> </HTML> n acest exemplu 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. n Exemplul 7.2 este ilustrat utilitatea atributului alt. Exemplul 7. 2 <HTML> <HEAD> <TITLE>imagini2</TITLE> </HEAD> <BODY> <H1 align="center"> Atributul alt </H1><HR> Acesta este un...<BR> <IMG src="../Imagini/orangerose" alt="trandafir"> </BODY> </HTML> Dup cum putei observa din Figura 7.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 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
91

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. 4. 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 7.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. Exemplul 7. 3 <HTML> <HEAD> <TITLE>imagini3</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea imaginilor</H1><HR> <IMG src="tiger.gif" width="350" height="250"><P> </BODY> </HTML> Observnd Figura 7.4 care red aspectul paginii descrise mai sus putem remarca faptul c setarea dimensiunilor a afectat calitatea imaginii deoarece dimensiunile originale ale imaginii erau mai mici. Dimensiunile originale ale imaginii tiger.gif, determinate cu ajutorul unui editor grafic, sunt: lime=200 pixeli, nlime=125 pixeli. Dac dimensiunile imaginii n pagin sunt setate la valori considerabil mai mari dect dimensiunile imaginii originale calitatea imaginii incluse n pagin va avea de suferit. Concluzia care se impune este c dimensionarea imaginilor din pagin trebuie s se fac la valori ct mai apropiate de dimensiunile iniiale ale imaginilor. V putei ntreba atunci, de ce mai este necesar includerea atributelor de dimensionare a imaginii. Nu numai c este necesar, dar este considerat o practic defectuoas absena lor din cadrul etichetei <IMG>. Motivul este acela c includerea dimensiunilor imaginii ofer browserului posibilitatea de a rezerva spaiu pentru imagine i de a ncepe ncrcarea textului simultan cu ncrcarea imaginii. Dac atributele de dimensionare nu sunt prezente, browserul va efectua nite pai suplimentari pentru a calcula spaiul din pagin necesar afirii imaginii. Din acest motiv afiarea textului nu va putea ncepe dect dup ce imaginea este ncrcat n ntregime.
92

Este indicat s evitam o asemenea situaie deoarece imaginile se ncarc mai greu dect textul i muli vizitatori ai paginii nu vor atepta suficient pentru ca ntreaga pagin (imagini i text) s fie ncrcat. 5. 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. 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 7. 4 <HTML> <HEAD> <TITLE>imagini4</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea imaginii si textului (bottom)</H1><HR> <IMG src="../Imagini/eaglehed.gif" align="bottom" width="100" height="66" alt="vultur"> 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>

93

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 7. 4 vom schimba modul de aliniere n cadrul etichetei <IMG> i vom aduga atributele hspace, respectiv vspace, astfel: <IMG src="../Imagini/eaglehed.gif" align="left" width="100" height="66" alt="vultur" vspace="10" hspace="10"> 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 ntr-un bloc paragraf sau ntr-un bloc <DIV> avnd atributul align setat la valoarea center. Exemplul 7. 5 <HTML> <HEAD> <TITLE>imagini5</TITLE> </HEAD> <BODY> <H1 align="center">Centrarea unui imagini</H1><HR> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. <DIV align="center"> <IMG src="../Imagini/devil.gif" width="64" height="64" alt="dracusor"> </DIV> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML> Exemplul 7.6 ilustreaz modul n care pot fi aliniate dou imagini fa de textul din pagin. Exemplul 7. 6 <HTML> <HEAD> <TITLE>imagini6</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea a doua imagini</H1><HR>
94

<IMG src="../Imagini/mtnscene.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/sunscene.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> 6. 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 7.7 ilustreaz utilizarea atributului background. Exemplul 7. 7 <HTML> <HEAD> <TITLE>imagini7</TITLE> </HEAD> <BODY background="../Imagini/silk.jpg"> <H1 align="center">Imaginea ca fond al paginii</H1><HR> Fond de matase... </BODY> </HTML> 7. Imagini folosite ca legturi Pentru a folosi o imagine drept legtura se procedeaz ca n urmtorul exemplu: <A href="tabel_culori.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
95

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 7. 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/prism.gif" width="100" height="80" alt="culori"> </A> </BODY> </HTML> 8. 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 soluie de compromis frecvent aplicat pentru scurtarea timpului de ncrcare a unei pagini ce prezint multe imagini o reprezint utilizarea imaginilor miniaturale (thumbnail-uri). 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

96

Folosirea a dou imagini O imagine thumbnail este foarte uor de realizat. Oricare ar fi programul de grafic pe care l folosii, tot ceea ce avei de fcut este s gsii opiunea Resize (care de obicei face parte din meniul Edit sau Image) i s precizai n caseta de dialog care se deschide, dimensiunile dorite. Vei observa c exist de regul o opiune setabil pentru pstrarea proporionalitii cu dimensiunile. Dac este activat, dup stabilirea uneia dintre dimensiuni (width, de exemplu), cealalt (height) este calculat automat. Exemplul 7. 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. Exemplul 7. 10 <HTML> <HEAD> <TITLE>imagini10</TITLE>
97

</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. n exemplul anterior, imaginea thumbnail este ncrcat prima. n momentul cnd vizitatorul face click pe ea, este ncrcat imaginea cu dimensiunile originale. Avantajul ultimei metode este faptul c imaginea este ncrcat de la nceput i redimensionat pentru thumbnail, ceea ce face ca afiarea imaginii cu dimensiunile originale s fie mai rapid. 9. Imaginile video 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 introducere.avi care se afl n folderul Video: <IMG dynsrc="../Video/introducere.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 introducere.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.
98

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/intro.avi" src="../Imagini/intro.gif"> 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/intro.avi" src="../Imagini/intro.gif" 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/intro.avi" src="../Imagini/intro.gif" controls loop="infinite"> 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 mouseul 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/intro.avi" src="../Imagini/intro.gif" controls loop="infinite" start="fileopen, mouseover"> 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 7.11 ilustreaz atributele prezentate mai sus. Exemplul 7. 11
99

<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 jocul Heroes 3</FONT><P> <CENTER> <IMG dynsrc="../Video/shield.avi" src="../Imagini/banana.gif" controls start="fileopen, mouseover" loop="infinite"> </CENTER> </BODY> </HTML> 10. 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 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.

100

Executai Exemplul 7.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 7. 12 <HTML> <HEAD> <TITLE>imagini12</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/Welcom98.wav" loop="infinite"> </BODY> </HTML> 11. 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. Imaginile dintr-o pagin Web trebuie gndite ca nite instrumente vizuale care au rolul de a susine i ilustra coninutul scris al paginii. De exemplu, ntr-un catalog on-line imaginile produselor prezentate sunt eseniale pentru coninutul paginii respective. Iconurile cu rol de legturi sau instrumente de navigaie pot reprezenta repere vizuale deosebit de utile n cadrul unui site. Dar dac o imagine nu servete unui scop bine definit n pagin, e bine s v gndii de dou ori, nainte de a o folosi. De asemenea se recomand s fii precaut i n privina imaginilor folosite ca fundal (background).
101

ntr-adevr, acestea pot oferi un aspect spectaculos paginii dumneavoastr. ns trebuie s fii contient de faptul c o imagine folosit ca fundal va crete cu siguran timpul necesar ncrcrii paginii. Dac n cazul imaginilor in-line textul se poate afia naintea sau n timpul ncrcrii imaginii, la imaginile de fundal afiarea celorlalte elemente din pagin nu va putea ncepe dect dup ncrcarea n ntregime a fundalului. Mai mult, spre deosebire de imaginile in-line, care pot mbogi coninutul informaional al paginilor, imaginile de fundal nu aduc cu adevrat dect foarte rar un supliment de informaie. Dei aspectul unei asemenea pagini poate fi atrgtor, de cele mai multe ori folosirea imaginilor de fundal n combinaii nefericite cu fonturi de anumite tipuri sau culori, fr contrast suficient, poate face pagina ncrcat i greu de citit. Dac totui v decidei s folosii o imagine ca fundal al paginii este recomandat s specificai simultan i o culoare de fundal, adic s setai atributul bgcolor. Astfel, dac dintr-un motiv oarecare imaginea de fundal nu se ncarc, pagina va avea totui culoarea prestabilit de dumneavoastr. Ca i imaginile, i celelalte elemente multimedia trebuie folosite cu discernmnt ntr-o pagin Web. Imaginile video au dimensiuni semnificativ mai ari dect imaginile statice, deci se ncarc mult mai ncet dect acestea astfel nct includerea lor in-line va mri considerabil timpul de ncrcare al paginii. n plus, formatele diverse utilizate nu pot fi deschise ntotdeauna cu browserul, unele impunnd existena unor plug-in-uri sau chiar unor programe speciale. O metod de compromis recomandat este descrierea coninutului fiierului, eventual inserarea unui fragment video exemplificativ (sample) de dimensiuni mult mai mici, similar cumva metodei thumbnail-urilor. Se asigur o legtur i spre fiierul integral, astfel nct, dup vizualizarea exemplului, vizitatorul s poat alege dac va atepta timpul necesar ncrcrii sale sau nu. 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. 12. 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.
102

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. 13. Concluzii Formatele cele mai utilizate pentru fiierele grafice sunt JPEG i GIF. Inserarea unei imagini ntr-un document HTML se realizeaz cu ajutorul etichetei <IMG>. Sintaxa etichetei <IMG> este urmtoarea: <IMG src="URL_imagine" align="pozitie" width="valoare" height="valoare" vspace="valoare" hspace="valoare" alt="text" border="valoare" dynsrc="URL_imagine_video" loop="valoare" start="valoare" controls>
103

unde: src precizeaz locaia imaginii width i height stabilesc dimensiunile imaginii vspace i hspace stabilesc distana pe vertical i orizontal fa de restul textului din pagin align aliniaz imaginea fa de textul din jurul ei alt furnizeaz un text explicativ asupra imaginii border stabilete grosimea chenarului imaginii dynsrc introduce o imagine video i precizeaz locaia ei loop specific numrul de reluri ale imaginii video start precizeaz momentul nceperii redrii imaginii controls afieaz butoanele de control ale ferestrei video Imaginile pot fi folosite ca fond al paginii cu ajutorul atributului background al etichetei <BODY>. O imagine poate servi drept legtur ctre un alt document HTML prin includerea etichetei <IMG> ntre etichetele <A> </A>. O practic des folosit este inserarea n pagin a imaginilor miniaturale care la executarea unui click pe ele deschid imaginea original. Muzica de fundal poate fi adugat unui document prin intermediul etichetei <BGSOUND>. Alegerea imaginilor care vor fi incluse ntr-un document HTML trebuie fcut cu grij, n funcie de rolul acestora n structura documentului i avnd permanent n vedere timpul de ncrcare al paginii. 14. Test 49.Ce etichet folosim pentru a insera o imagine n pagin? a) <IMG> b) <A> c) <PIC> 50. Atributul src servete la: a) poziionarea imaginii n pagin b) stabilirea numelui i locaiei unde se afl imaginea c) crearea unei legturi prin intermediul imaginii Atributele width i height ale etichetei <IMG> sunt folosite pentru: a) dimensionarea textului b) alinierea imaginii cu textul c) dimensionarea imaginii 52. Ce efect are absena atributelor width i height din eticheta <IMG>? a) Nu se afieaz imaginea. b) Imaginea se afieaz pe toata suprafaa ferestrei browserului. c) Browserul ateapt ncrcarea complet a imaginii nainte de a ncepe afiarea textului.
51.

104

53.Care dintre atributele urmtoare permit afiarea textului n jurul imaginii? a) top b) bottom c) middle 54.Care dintre construciile urmtoare este folosit pentru a stabili ca fond al paginii imaginea rice.gif? a) <IMG background="rice.gif"> b) <IMG src="rice.gif" background> c) <BODY background="rice.gif"> 55. Ce realizeaz atributul alt n urmtoarea construcie? <IMG src="dog.gif" alt="catel"> a) Afieaz cuvntul catel lng imagine. b) Afieaz cuvntul catel n spaiul rezervat imaginii. c) Atribuie fiierului dog.gif numele catel. 56.Care dintre urmtoarele construcii plaseaz imaginea n stnga i aliniaz textul n jurul imaginii? a) <IMG src="moon.gif" wrap="left"> b) <IMG src="moon.gif" align="left"> c) <IMG src="moon.gif> align="wrap"> 57.Care dintre urmtoarele construcii are drept efect folosirea imaginii sign.gif ca legtur? a) <A href="semn.html"></A><IMG src="sign.gif> b) <A src="semn.html><IMG href="sign.gif"></A> c) <A href="semn.html><IMG src="sign.gif"></A> 58.Pentru a include n pagin o imagine video se folosete urmtoarea construcie: a) <IMG src="URL_imagine"> b) <IMG dynsrc="URL_imagine"> c) <IMG video="URL_imagine">

Liste

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: liste ordonate (marcate prin numere sau litere), liste neordonate (marcate prin cratime, buline sau alte simboluri)
105

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 O list neordonat reprezint o colecie de elemente nrudite, dispuse ntr-o ordine oarecare. Un exemplu tipic pentru o pagin Web este o list de link-uri spre alte documente. Acest tip de list este de fapt un bloc de text delimitat de etichetele <UL> </UL> (unordered list=list neordonat). Eticheta de nchidere </UL> este obligatorie. Fiecare element al listei este introdus prin eticheta <LI> (list item). Cu toate c eticheta <LI> este o etichet container, eticheta sa de nchidere, </LI>, este opional. Dac nu este prezent, la ntlnirea unei noi etichete <LI> se consider c vechea etichet este nchis. Lista va fi afiat indentat fa de restul paginii i fiecare element al listei ncepe pe un rnd nou. n mod prestabilit, fiecare element al listei va fi marcat (bulleted) cu "bulin". Exemplul 8. 1 <HTML> <HEAD> <TITLE>liste1</TITLE> </HEAD> <BODY> <H1 align="center">Lista neordonata</H1><HR> <UL>Culori <LI>Black <LI>White <LI>Red <LI>Green <LI>Blue <LI>Yellow <LI>Purple <LI>Aqua </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: circle (cerc) disc (disc plin) - valoarea prestabilit
106

square (patrat)

Exemplul 8. 2 <HTML> <HEAD> <TITLE>liste2</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. Exemplul 8. 3 <HTML> <HEAD> <TITLE>liste3</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>

107

Forme particulare de liste neordonate

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. 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.

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 8. 4 <HTML> <HEAD> <TITLE>liste4</TITLE> </HEAD> <BODY> <H1 align="center">Lista ordonata</H1><HR> <OL>Castigatorii concursului sunt: <LI>Popescu Maria <LI>Ionescu Ion <LI>Bratu Ana </OL> </BODY> </HTML> Pentru etichetele <OL> i <LI> se poate seta atributul type, care stabilete tipul de caractere utilizate pentru ordonarea listei. Valorile posibile ale acestui atribut sunt: A - pentru ordonare de tipul A , B , C...(litere mari) a - pentru ordonare de tipul a , b , c...(litere mici) I - pentru ordonare de tipul I , II , III , IV...(cifre romane mari) i - pentru ordonare de tipul i , ii , iii , iv...(cifre romane mici) 1 - pentru ordonare de tipul 1 , 2 , 3...(cifre arabe - opiune prestabilit)
108

De asemenea eticheta <OL> poate avea setat atributul start, care stabilete valoarea iniial a secvenei de ordonare. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv. Exemplul 8. 5 <HTML> <HEAD> <TITLE>liste5</TITLE> </HEAD> <BODY> <H1 align="center">Atributul type la liste ordonate</H1><HR> <OL type="I" start="3">Manuale <LI>Istorie <LI>Geografie <LI>Biologie <LI>Chimie </OL> </BODY> </HTML> Ca i n cazul listelor neordonate, setarea atributului type pentru un anumit item al listei nlocuiete tipul de numerotare stabilit pentru ntreaga list cu tipul specificat pentru acel element. 3. Imbricarea listelor n cadrul unei liste, fie ea ordonat sau neordonat, se pot include alte liste, procedeu numit imbricare. Fiecare list nou inclus n precedenta se va afia indentat fa de nivelul listei anterioare. Listele pot fi imbricate n toate modurile dorite, ca n Exemplul 8.6. Figura 8.6 red aspectul listei construite n acest exemplu. Exemplul 8. 6 <HTML> <HEAD> <TITLE>liste6</TITLE> </HEAD> <BODY> <H1 align="center">Liste imbricate</H1><HR> <UL> <LI>Bulina 1
109

<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> </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. n Exemplul 8.7 este construit o list de definiii. Exemplul 8. 7 <HTML> <HEAD> <TITLE>liste7</TITLE> </HEAD> <BODY> <H1 align="center">Liste de definitii</H1><HR> <DL> <DT>Iarna <DD>Ninge <DD>E frig
110

<DD>Ziua e mai scurta dect noaptea <DT>Primavara <DD>Natura se trezeste la viata <DD>Infloresc pomii <DD>Se intorc pasarile calatoare <DT>Vara <DD>Totul e verde <DD>E foarte cald <DD>Ziua e mai lunga dect noaptea <DT>Toamna <DD>Se coc fructele <DD>Se strange 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. Exemplul 8. 8 <HTML> <HEAD> <TITLE>liste8</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>
111

</HTML> Exemplul 8.9 creeaz dou liste imbricate de legturi. Putei testa direct funcionarea listei dac ai salvat fiierele HTML construite la capitolele anterioare sub numele specificat n blocul <TITLE> al fiecrui document. n cazul cnd ai preferat alte denumiri pentru fiiere, putei schimba numele fiierelor prezente n cadrul exemplului cu propriile dumneavoastr fiiere. Exemplul 8. 9 <HTML> <HEAD> <TITLE>liste9</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> 5. Concluzii ntr-o pagin Web pot fi introduse diverse tipuri de liste: Liste neordonate prin eticheta <UL> </UL>, marcate prin simboluri de tip buline, cercuri sau ptrate Liste ordonate prin eticheta <OL> </OL> marcate prin cifre arabe, cifre romane mari sau mici, litere mari sau mici Liste de definiii prin eticheta <DL> </DL> nemarcate Elementele listelor ordonate i neordonate se introduc prin eticheta <LI>. Elementele listelor de definiii se introduc prin etichetele <DT> i <DD>.
112

Listele pot conine orice tip de elemente: text, imagini, link-uri sau alte liste (n acest caz obinndu-se liste imbricate). 6. Test 59. Eticheta <UL> se folosete pentru a iniia: a) o list ordonat b) o list neordonat c) dou liste imbricate 60.Care dintre urmtoarele afirmaii este fals? a) Eticheta <LI> servete pentru a introduce fiecare element al unei liste ordonate. b) Eticheta <LI> servete pentru a introduce fiecare element al unei liste neordonate. c) Eticheta <LI> servete pentru a introduce fiecare element al unei liste de definiii. 61. n construcia <UL type="square"> ce rol are atributul type? a) Construiete o list neordonat. b) Stabilete caracterul care va fi afiat n faa fiecrui element al listei. c) Construiete o list care are ca elemente imagini. 62.O list ordonat este introdus prin eticheta: a) <UL> b) <OL> c) <DL> 63. Ce rol are atributul type n urmtoarea construcie: <OL type="a">? a) Construiete o list de litere care ncepe cu caracterul "a". b) Construiete o list ordonat. c) Stabilete faptul c elementele listei vor fi marcate cu litere mici. 64.Ce este incorect n exemplul urmtor? <UL> <LI>Limbaje de programare <OL> <LI>C++ <LI>Perl <LI>Java </OL> <LI>Sisteme de operare> <OL> <LI>MSDos <LI>Unix </UL> </OL> a) Nu este permis imbricarea listelor neordonate cu liste ordonate. b) Este absent eticheta de nchidere </LI>. c) Etichetele <UL> i <OL> nu sunt nchise corect. 65.O list de definiii se introduce prin eticheta: a) <UL>
113

b) <DT> c) <DL>

66.Care este ordinea corect n care se introduc elementele unei liste de definiii? a) a) <DL> <DT> <DD> b) b) <DD> <DT> <DL> c) c) <DT> <DL> <DD> 67.Ce realizeaz urmtoarea construcie? <UL> <LI><IMG src="pic1.gif"> <LI><IMG src="pic2.gif"> </UL> a) Construiete o list de imagini marcate prin buline. b) Construiete o list de link-uri ctre imaginile specificate. c) Nimic, deoarece este incorect ca elementele unei liste s fie imagini. 68.Cum sunt marcate elementele unei liste de definiii? a) prin buline b) prin numere c) nu sunt marcate

Bibliografie 1. HTML prin exemple Teodor Gugoiu 2. http://www.softpageinternet.ro/manual_html/Capitole/Cuprins.htm

114