Limbaj Specific Internetului

Litere

Limbaj Specific Internetului

Byadmin ianuarie 1, 2024

Cuprins

Câteva cuvinte…înainte

HTML și World Wide Web

Capitolul 1 Primii pași

Ce este HTML?

Standarde și extensii HTML

Conținut și aspect într-un document HTML

Uneltele de care aveți nevoie

Cum să procedați?

Convenții de notație

Rezumat

Capitolul 2 Structura unui document HTML

Ce este un document HTML?

Etichete de structură

Folosirea corectă a etichetelor

Rezumat

Test

Capitolul 3 Culori

Sistemul de definire a culorilor

Corespondența dintre codurile hexazecimal și zecimal

Culoarea fundalului

Culoarea textului

Culoarea legăturilor

Alegerea culorilor

Culori "sigure"

Rezumat

Test

Capitolul 4 Fonturi

Formatarea caracterelor

Accentuarea textului

Etichete logice și etichete fizice

Rezumat

Test

Capitolul 5 Formatarea textului

Trecerea la un rând nou

Titlurile (Headings)

Paragrafele

Preformatarea textului

Centrarea textului

Afișarea textului pe o singură linie

Blocul <DIV>

Linii orizontale

Inserarea unei adrese poștale

Inserarea unui citat

Inserarea caracterelor speciale

Sugestii privind aspectul textului

Rezumat

Test

Capitolul 6 Legături (Link-uri)

Adresa URL

Adrese absolute și adrese relative

Stabilirea legăturilor

Ancore – legături în cadrul aceleiași pagini

Legătura către o pagină aflată în același director (folder)

Legătura către o pagină localizată în alt director (folder)

Legătura către pagini externe

Alegerea culorilor pentru legături

Utilizarea poștei electronice (e-mail)

Legături către fișiere oarecare

Deschiderea paginilor referite printr-o legătură

Crearea unei bare secundare de navigare

Rezumat

Test

Capitolul 7 Imagini și elemente multimedia

Formatele fișierelor grafice

Câteva metode de obținere a imaginilor

Inserarea unei imagini

Dimensionarea imaginii

Alinierea imaginii și a textului

Imagini folosite ca fond (background) al paginii

Imagini folosite ca legături

Imaginile miniaturale (thumbnails)

Imaginile video

Sunetele

Sugestii privind folosirea imaginilor și elementelor multimedia

Imaginile și timpul de încărcare al paginii

Rezumat

Test

Capitolul 8 Liste

Liste neordonate

Liste ordonate

Imbricarea listelor

Liste de definiții

Rezumat

Test

Capitolul 9 Tabele

Crearea unui tabel

Alinierea tabelului în pagină

Dimensionarea unui tabel

Spațierea celulelor unui tabel

Dimensionarea celulelor unui tabel

Alinierea conținutului unei celule

Definirea culorilor pentru un tabel

Titlul unui tabel

Capul de tabel

Tabele de forme oarecare

Celule fără conținut

Grupuri de coloane

Atribute pentru aspectul chenarului unui tabel

Tabele imbricate

Recomandări privind folosirea tabelelor

Rezumat

Test

Capitolul 10 Cadre (Frames)

Documentul de definire a cadrelor

Cadre imbricate

Controlul aspectului unui cadru

Bare de derulare

Poziționarea documentului într-un cadru

Cadre interne

Deschiderea documentelor în alte cadre

Sugestii privind folosirea cadrelor

Rezumat

Test

Capitolul 11 Formulare (Forms)

Ce este un formular?

Crearea unui formular

Eticheta <INPUT>

Etichetele <SELECT> și <OPTION>

Eticheta <TEXTAREA>

Validarea datelor

Rezumat

Test

Capitolul 12 Script-uri CGI

Ce este CGI?

Transferul datelor

Execuția script-ului

Structura unui script

Exemple de script-uri

Instalarea interpretorului Perl și a aplicației PWS

Rezumat

Capitolul 13 JavaScript

Ce este JavaScript?

Cum poate fi inclus un script în pagină?

Modul de execuție al script-ului

Ce se poate realiza cu JavaScript?

Rezumat

Capitolul 14 Foi de stiluri (CSS)

Ce este un stil?

Tipuri de foi de stiluri

Efecte obținute cu ajutorul stilurilor

Rezumat

Capitolul 15 Elemente avansate de grafică

Imagini hartă

Imagini animate

Imagini transparente

Rezumat

Capitolul 16 Motoare de căutare și metatag-uri

Ce este un motor de căutare?

Metatag-uri

Rezumat

Crearea și publicarea unui site

Capitolul 17 Planificarea

Factori care nu pot fi planificați

Etapele planificării site-ului

Rezumat

Capitolul 18 Designul

Principiile designului web

Organizarea unui site

Metodologia de construire a site-ului

Tehnici de design web

Greșeli de design

Rezumat

Capitolul 19 Testarea

Corectarea paginilor

Testarea paginilor

Rezumat

Capitolul 20 Publicarea

Numele de domeniu

Serviciul de găzduire Web (Web hosting)

Organizarea și denumirea fișierelor

Transferul fișierelor

Rezumat

Câteva cuvinte…la final

Anexa 1 Index etichete

Anexa 2 Glosar

Anexa 3 Tabelul culorilor

Câteva cuvinte…înainte

Internetul reprezintă, fără îndoială, mediul de comunicare al viitorului, un viitor care, în multe părți ale lumii deja a început. El reprezintă o veritabilă revoluție pașnică și tăcută, care rezidă în asocierea progresivă dintre informatică și mijloacele de comunicare, conducând la o integrare fascinantă a tuturor mijloacelor tradiționale de comunicare: telefonie clasică și mobilă, radio, televiziune, transmisii de date, înregistrări audio și video. Au apărut chiar forme noi de comunicare, utilizate cu entuziasm de milioane de oameni din lumea întreagă, cum sunt e-mail-ul și chat-ul, care deja au dobândit reguli proprii, o cultură și chiar și un folclor propriu.

Internetul a produs totodată o extraordinară democratizare a informației și comunicării. O cantitate literalmente uriașă de informație, sub toate formele sale: text, imagini statice sau video, sunet, adunate într-o "bibliotecă" accesibilă oricui, oricând, de la orice calculator legat la rețea, față de care chiar și cele mai complete enciclopedii clasice par o glumă. A devenit o joacă de copil comunicarea directă, în timp real, cu verișoara din Cluj, cu prietenul din Australia, cu firma furnizoare din Brazilia sau cu banca din Elveția. Sunt suficiente pentru toate acestea un computer, un modem și o linie telefonică.

Deși Internetul și World Wide Web cunosc o expansiune exponențială, se afirmă totuși că se află încă în faza copilăriei. Raportându-ne la o astfel de apreciere, am putea afirma că în România Internetul este încă în fașă, dar cu un potențial de dezvoltare cert și rapid ascendent.

Cu toate că foarte mulți tineri manifestă un interes și o deschidere extraordinare către orice subiect legat de Internet, acest domeniu este cel mai adesea ignorat în licee, sau tratat cu superficialitate. Programele școlare nu îl abordează decât tangențial, prin urmare nu există manuale școlare dedicate, iar lucrările de specialitate la un nivel accesibil strălucesc prin absență. Designul și programarea Web se află într-o dezvoltare accelerată și constituie o orientare profesională cu un mare potențial de succes, dar în mod paradoxal, relativ puțini tineri se îndreaptă azi către aceste domenii. Unul din motive îl constituie, desigur, atenția insuficientă acordată acestor ramuri ale informaticii în învățământul liceal, alături de un contact direct cu Internetul extrem de redus, limitat mai ales de posibilitățile tehnice și economice actuale ale școlilor.

Argumentul principal care m-a determinat să scriu această carte a fost un sondaj realizat în rândul elevilor unui liceu de informatică, sondaj ale cărui rezultate au confirmat impresia inițială. Și anume faptul că, în marea lor majoritate (87%), elevii își doresc să învețe nu doar să utilizeze Internetul, ci, urmând îndrăzneala tipică vârstei, să devină o prezență activă în acest mediu de comunicare. Cei mai mulți își doresc acest lucru pentru a se exprima pe sine, pentru a comunica lumii și în această formă, faptul că există, că au calități, dorințe, aspirații, talente, cunoștințe, gânduri, sentimente care merită să fie cunoscute și de ceilalți.

Și cum pot fi puse toate acestea în valoare cât mai eficient, într-un mod accesibil pentru milioane de oameni din lumea largă, dacă nu pe un site Web?

Scopul acestei cărți, dedicate limbajul specific Internetului, HTML, și tehnicilor uzuale de creare a unui site Web, este să îi învețe, nu doar pe tineri, ci pe toți cei care își doresc acest lucru, să își creeze propriul site pe Internet, cu minimum de efort și costuri, și cu maximum de rezultate.

Cartea nu își propune să fie o lucrare academică, un manual exhaustiv de HTML și Web design. Subiectele sunt extrem de vaste și ar fi fost imposibilă cuprinderea lor într-o singură lucrare. Am dorit să ofer o imagine de ansamblu asupra limbajului HTML, cu un marcat accent pe aspectele practice ale utilizării sale, precum și o trecere în revistă a unora dintre cele mai folosite tehnici de programare care extind posibilitățile limbajului: script-urile CGI, JavaScript, programarea cu ajutorul foilor de stiluri CSS.

De asemenea, în partea a doua a cărții am prezentat etapele procesului de construire a unui site Web și câteva dintre tehnicile uzuale de design Web.

Adresându-se mai ales începătorilor care stăpânesc totuși elementele de bază (utilizarea computerului și sistemul de operare Windows, noțiuni de editare de text și imagini), cartea este scrisă într-un limbaj care se dorește accesibil. Fiecare noțiune prezentată este însoțită de exemple reprezentate de secvențe de cod HTML ce ilustrează modul ei de aplicare.

Recomandarea noastră este ca cititorii să verifice personal toate aceste exemple, deoarece numai experimentând pe cont propriu se poate ajunge la o bună înțelegere și stăpânire a efectelor codului HTML asupra aspectului paginii Web.

Încheiem cu speranța că aceasta carte va constitui un instrument de lucru util și că, la finalul ei cititorii vor dobândi abilitatea de a construi, publica și menține un site propriu interesant, atrăgător și perfect funcțional. Și, de ce nu, ca o parte din ei să facă din această activitate o veritabilă profesie.

Notă asupra terminologiei utilizate

Întrucât anumiți termeni din limba engleză, specifici domeniului abordat în prezenta lucrare, au intrat în limbajul curent ca atare, îi vom utiliza și noi în această formă. Am optat pentru folosirea lor cu statut de neologisme, în forma originală, uneori cu forme flexionare ad-hoc, chiar cu riscul de a fi considerate drept "barbarisme" de către lingviștii puritani. În definitiv, în acest fel au intrat în limbaj termeni deja consacrați precum computer, tastă, monitor, mouse, pixel, CDROM, modem, server, port, ca să dăm numai câteva exemple.

Pentru unii termeni am utilizat ambele forme aflate în circulație, cum ar fi link – legătură, font – caracter, tag – etichetă.

Există și autori care folosesc numai echivalentele românești ale acestor termeni. Cu toate că traducerea lor respectă cel mai adesea sensul, aceste echivalente nu au reușit să se impună în lumea informaticii, nu de puține ori utilizarea lor conducând, în mod paradoxal, la confuzii sau nedumeriri. (Nu vorbim aici de tentativele ridicole, cum ar fi de pilda icoană, sau, încă și mai rău, iconiță, utilizate de unii autori pentru icon, care firește că nu pot avea vreo șansă de succes.)

Prezentăm în continuare o listă a acestor termeni. Explicații asupra sensului lor se găsesc în text și/sau în glosarul prezentat la sfârșitul cărții.

HTML și World Wide Web

Înainte de a începe prezentarea limbajului HTML, vom face câteva precizări despre semnificația conceptului World Wide Web (într-o traducere aproximativă, pânză de păianjen, cu sensul de rețea, extinsă în lumea largă). Precizările ar putea părea inutile, dar realitatea este că deși foarte multă lume vorbește despre World Wide Web, puțini știu exact ce reprezintă. Mai mult, datorită extinderii sale exponențiale și a extraordinarei sale popularități, adesea noțiunea este confundată cu cea de Internet. World Wide Web este însă doar o parte a Internetului.

Internetul există de mai bine de treizeci de ani. Bazele acestuia au fost puse la sfârșitul anilor ’60, ca urmare a unei inițiative a Departamentului de Apărare al Statelor Unite, care avea drept scop realizarea unei rețele robuste și fiabile de comunicații între computere aflate la distanță. Rețeaua avea rolul de a asigura un contact permanent între elementele sale componente, chiar dacă o parte din legături ar fi fost întrerupte ca urmare a unui atac nuclear. Ulterior, rețeaua a pătr mai eficient, într-un mod accesibil pentru milioane de oameni din lumea largă, dacă nu pe un site Web?

Scopul acestei cărți, dedicate limbajul specific Internetului, HTML, și tehnicilor uzuale de creare a unui site Web, este să îi învețe, nu doar pe tineri, ci pe toți cei care își doresc acest lucru, să își creeze propriul site pe Internet, cu minimum de efort și costuri, și cu maximum de rezultate.

Cartea nu își propune să fie o lucrare academică, un manual exhaustiv de HTML și Web design. Subiectele sunt extrem de vaste și ar fi fost imposibilă cuprinderea lor într-o singură lucrare. Am dorit să ofer o imagine de ansamblu asupra limbajului HTML, cu un marcat accent pe aspectele practice ale utilizării sale, precum și o trecere în revistă a unora dintre cele mai folosite tehnici de programare care extind posibilitățile limbajului: script-urile CGI, JavaScript, programarea cu ajutorul foilor de stiluri CSS.

De asemenea, în partea a doua a cărții am prezentat etapele procesului de construire a unui site Web și câteva dintre tehnicile uzuale de design Web.

Adresându-se mai ales începătorilor care stăpânesc totuși elementele de bază (utilizarea computerului și sistemul de operare Windows, noțiuni de editare de text și imagini), cartea este scrisă într-un limbaj care se dorește accesibil. Fiecare noțiune prezentată este însoțită de exemple reprezentate de secvențe de cod HTML ce ilustrează modul ei de aplicare.

Recomandarea noastră este ca cititorii să verifice personal toate aceste exemple, deoarece numai experimentând pe cont propriu se poate ajunge la o bună înțelegere și stăpânire a efectelor codului HTML asupra aspectului paginii Web.

Încheiem cu speranța că aceasta carte va constitui un instrument de lucru util și că, la finalul ei cititorii vor dobândi abilitatea de a construi, publica și menține un site propriu interesant, atrăgător și perfect funcțional. Și, de ce nu, ca o parte din ei să facă din această activitate o veritabilă profesie.

Notă asupra terminologiei utilizate

Întrucât anumiți termeni din limba engleză, specifici domeniului abordat în prezenta lucrare, au intrat în limbajul curent ca atare, îi vom utiliza și noi în această formă. Am optat pentru folosirea lor cu statut de neologisme, în forma originală, uneori cu forme flexionare ad-hoc, chiar cu riscul de a fi considerate drept "barbarisme" de către lingviștii puritani. În definitiv, în acest fel au intrat în limbaj termeni deja consacrați precum computer, tastă, monitor, mouse, pixel, CDROM, modem, server, port, ca să dăm numai câteva exemple.

Pentru unii termeni am utilizat ambele forme aflate în circulație, cum ar fi link – legătură, font – caracter, tag – etichetă.

Există și autori care folosesc numai echivalentele românești ale acestor termeni. Cu toate că traducerea lor respectă cel mai adesea sensul, aceste echivalente nu au reușit să se impună în lumea informaticii, nu de puține ori utilizarea lor conducând, în mod paradoxal, la confuzii sau nedumeriri. (Nu vorbim aici de tentativele ridicole, cum ar fi de pilda icoană, sau, încă și mai rău, iconiță, utilizate de unii autori pentru icon, care firește că nu pot avea vreo șansă de succes.)

Prezentăm în continuare o listă a acestor termeni. Explicații asupra sensului lor se găsesc în text și/sau în glosarul prezentat la sfârșitul cărții.

HTML și World Wide Web

Înainte de a începe prezentarea limbajului HTML, vom face câteva precizări despre semnificația conceptului World Wide Web (într-o traducere aproximativă, pânză de păianjen, cu sensul de rețea, extinsă în lumea largă). Precizările ar putea părea inutile, dar realitatea este că deși foarte multă lume vorbește despre World Wide Web, puțini știu exact ce reprezintă. Mai mult, datorită extinderii sale exponențiale și a extraordinarei sale popularități, adesea noțiunea este confundată cu cea de Internet. World Wide Web este însă doar o parte a Internetului.

Internetul există de mai bine de treizeci de ani. Bazele acestuia au fost puse la sfârșitul anilor ’60, ca urmare a unei inițiative a Departamentului de Apărare al Statelor Unite, care avea drept scop realizarea unei rețele robuste și fiabile de comunicații între computere aflate la distanță. Rețeaua avea rolul de a asigura un contact permanent între elementele sale componente, chiar dacă o parte din legături ar fi fost întrerupte ca urmare a unui atac nuclear. Ulterior, rețeaua a pătruns în domeniul civil și a fost adoptată rapid, inițial de lumea academică, mai apoi de companiile comerciale.

Internetul nu este altceva decât un ansamblu alcătuit dintr-un număr enorm de rețele de computere interconectate, localizate pe toată suprafața globului, care suportă diverse pachete software cum ar fi e-mailul, grupurile de știri (newsgroup), protocoalele de transfer al fișierelor (FTP), Gopher și World Wide Web.

Cu toate avantajele imense oferite de posibilitățile de comunicare globală a informațiilor ca și de rapiditatea comunicării, Internetul a rămas, vreme de două decenii, doar apanajul agențiilor guvernamentale și al mediilor științifice. Motivul l-a constituit dezorganizarea sa inițială cvasi-totală. Folosirea unor standarde de comunicație și a unor pachete software foarte diverse reprezentau niște bariere tehnologice aproape insurmontabile pentru utilizatorii obișnuiți. În plus, informațiile accesibile la acea vreme pe Internet erau prezentate sub forma unor simple fișiere text și nu în forma cunoscută azi. Dezvoltarea explozivă pe care a cunoscut-o Internetul în ultimii zece ani a fost determinată de apariția World Wide Web.

World Wide Web a luat naștere în 1989, ca urmare a eforturilor unor fizicieni ai CERN (Laboratorul European de Fizica Particulelor) de a pune la punct un sistem standardizat pentru crearea și distribuirea documentelor electronice oriunde pe glob, sistem care să permită integrarea tuturor elementelor media: text, imagini, sunet. Așa cum dovedește imensa sa popularitate, Web-ul s-a dovedit a fi mediul ideal pentru distribuirea informațiilor într-o maniera extinsă și accesibilă. Motivul îl constituie faptul că Web-ul asigură o interfață hypermedia pentru informații. Hypermedia reprezintă variatele tipuri de informație (text, imagini, fișiere audio și video) care pot fi localizate oriunde pe glob, împreună cu legăturile dintre ele. Pentru a transmite și a afișa informațiile hypermedia, Web-ul folosește un protocol de transfer (un set de reguli) care este numit HTTP (Hypertext Transfer Protocol, protocol de transmitere a hypertextului).

Deci, în esență, World Wide Web este o colecție imensă de documente interconectate prin intermediul Internetului, care folosește protocolul HTTP pentru a afișa elementele hypermedia.

Pentru a face posibilă o asemenea performanță, s-a impus necesitatea ca fiecare computer conectat la Internet să fie identificat în mod unic, printr-un element numit adresa IP (Internet Protocol). Adresa IP este formată din patru numere, fiecare mai mic de 255, despărțite între ele prin punct (de exemplu 123.67.9.201). În vreme ce computerele lucrează cu numere, oamenii preferă numele. Din acest motiv, fiecărei asemenea adrese IP i s-a asociat și un nume. Cum sunt sute de milioane de computere în întreaga lume, a veni cu un nume unic care să diferențieze un computer de celelalte pare aproape imposibil. Totuși, să ne amintim că Internetul este o rețea de rețele. El este împărțit în grupuri numite domenii care, la rândul lor, sunt împărțite în subdomenii. Datorită acestui fapt, chiar dacă un computer poartă un nume destul de comun, prin asocierea acestui nume cu domeniul și subdomeniile din care face parte, se obține un nume unic de identificare al computerului respectiv.

Organizarea domeniilor pe Internet respectă un model ierarhic. Primul nivel ierarhic îl constituie diversele tipuri de organizații. Tot pe primul nivel se află și domeniile corespunzătoare țărilor lumii, de exemplu uk, pentru Marea Britanie sau ro, pentru România.

Următorul nivel ierarhic îl constituie organizațiile, firmele, instituțiile care dețin propriile domenii și subdomenii.

Internetul conectează două tipuri de computere: serverele, care furnizează documentele, și clienții, care solicită și afișează documentele pentru a fi vizualizate de utilizator.

Pentru a accesa și afișa documentele HTML, pe computerul client rulează aplicații numite browsere. Uneori termenii server Web și client Web pot produce confuzii, deoarece se referă atât la computerele pe care rulează aceste aplicații cât și la aplicațiile în sine. Din acest motiv, pentru aplicația client vom folosi termenul de browser, iar pentru aplicația sau pachetul de aplicații care rulează pe server, termenul de aplicație server.

Relația client-server pe care se bazează funcționarea World Wide Web este facilitată de protocolul de comunicație HTTP. Interacțiunea dintre browserul Web și serverul Web începe cu o cerere din partea clientului. Aplicația client transmite o cerere către aplicația server. Această cerere poate consta în transmiterea unui anumit document sau în efectuarea unei anumite tranzacții. Aplicația server fie îndeplinește cererea clientului, caz în care obiectul solicitat este transmis browserului, fie o refuză, situație în care browserul afișează binecunoscutele mesaje de eroare "The page cannot be displayed" sau "File not found".

Cu alte cuvinte, procesul vizualizării unei pagini Web începe cu o cerere a browserului Web către serverul Web. Browserul transmite serverului detalii despre el însuși și despre fișierul pe care îl dorește prin intermediul unui header HTTP de cerere (headerul este acea parte a unui pachet de date care este plasată înaintea informațiilor efectiv transmise și care poate conține adresa sursei și a destinației, verificări ale erorilor și alte câmpuri). Serverul primește și analizează headerele HTTP de cerere în căutarea informațiilor relevante, cum ar fi numele fișierului care este solicitat și transmite înapoi fișierul cerut împreună cu headerele HTTP de răspuns. Browserul folosește headerele HTTP de răspuns pentru a determina cum să afișeze rezultatele obținute.

Trebuie să subliniem că browserele nu au nevoie de conexiune la Internet ca să funcționeze. Puteți încărca și afișa cu ajutorul browserului dumneavoastră documente HTML care sunt stocate pe propriul hard-disk. Aceasta vă dă, printre altele, posibilitatea de a definitiva și testa documentele HTML înainte de a le publica pe Internet, evitând astfel prezentarea unor pagini încă nefinalizate, cu erori, sau care funcționează defectuos.

Capitolul 1

Primii pași

1. Ce este HTML?

HTML este o abreviere de la Hypertext Markup Language și reprezintă scheletul oricărei pagini de Web. HTML nu este un limbaj de programare. Nu veți lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini, precum și aspectul pe care îl are pagina din punct de vedere grafic. În fond, HTML este modul în care îi comunicam browserului ce elemente dorim să introducem în pagina Web și care este aspectul acestora.

2. Standarde și extensii HTML

HTML este un limbaj standardizat, aceasta însemnând că orice browser poate interpreta și afișa corect un document Web. Sintaxa de bază a limbajului HTML este definită în versiunea HTML 3.2. În prezent a fost lansată și versiunea HTML 4.0 care se află în curs de standardizare. De la o versiune la alta, limbajului HTML i se adăuga noi elemente. De asemenea, fiecare tip de browser (Netscape Navigator și Internet Explorer, în particular) folosește anumite elemente ne-standard, pentru a îmbunătăți capacitățile limbajului. Etichetele noi, care nu fac parte din versiunea standard poartă numele de extensii. În general, browserele cele mai folosite, Netscape Navigator și Internet Explorer recunosc etichetele HTML 3.2 și o mare parte din cele nou introduse în HTML 4.0.

Este recomandat să evitați extensiile, în afara cazului când aveți un motiv foarte serios pentru a le folosi. Pentru utilizatorii browserelor care nu recunosc aceste extensii, anumite părți ale documentului dumneavoastră pot deveni complet ilizibile.

Bineînțeles, extensiile pot afecta în grade diferite aspectul formal al paginii dumneavoastră. De exemplu, folosirea extensiilor care țin de aspectul liniilor orizontale incluse în pagină nu va afecta în mod grav aspectul paginii în browserele care nu suportă aceste extensii. Cele mai multe dintre acestea vor ignora extensiile și vor afișa o line orizontală standard. Pe de altă parte, extensiile care realizează formatarea și alinierea textului și aspectul fonturilor pot face ca documentul să aibă un aspect foarte dezordonat în browserele care nu suportă extensii de acest tip. Sau, în cazurile cele mai grave, acea parte a documentului poate să nu fie deloc afișată.

3. Conținut și aspect într-un document HTML

Pentru a realiza documente Web eficiente, cu impact asupra cititorului, și pentru a valorifica pe deplin puterea limbajului HTML, trebuie să țineți seama de o idee fundamentală: HTML este destinat structurării documentele și nu doar formatării în vederea afișării lor.

HTML furnizează modalități variate pentru a defini aspectul documentului: specificații legate de fonturi (tipurile de caractere), de formatare a textului, de culori, etc. Desigur, aspectul formal este important, căci el poate veni în beneficiul sau în detrimentul accesibilității informațiilor prezentate.

Totuși, nu aspectul formal, ci conținutul documentului primează. HTML conține numeroase căi de structurare a conținutului documentului fără a pune problema felului cum vor fi afișate elementele: titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite în limbajul HTML fără a impune browserului să le afișeze într-un anumit mod. Browserului i se lasă astfel posibilitatea de a afișa respectivele elemente în conformitate cu rolul pe care îl au ele în structura documentului și nu respectând regulile impuse de creatorul documentului HTML.

Marele avantaj al abordării bazate pe conținut față de cea bazată pe aspect rezidă în faptul că paginile dumneavoastră vor fi vizualizate cu tipuri diferite de browsere, fiecare având versiuni diferite.

În abordarea bazată pe aspect, dacă browserul nu recunoaște indicațiile de formatare specificate, fie nu le execută, fie le execută eronat, astfel că structurarea paginii va avea de suferit.

În abordarea bazată pe conținut, indiferent cum va alege browserul să execute indicațiile de formatare, semnificația elementelor din pagină va rămâne neschimbată.

De exemplu, dacă veți afișa titlurile și subtitlurile din pagină folosind tipuri diferite de fonturi, caractere cu stiluri variate: aldine (bold, sau îngroșate), cursive (italice, sau înclinate), subliniate, etc., un browser care nu recunoaște aceste elemente ar putea afișa titlurile în același mod în care afișează restul textului, astfel că semnificația lor în pagină și-ar pierde relevanța.

Pe de altă parte, dacă veți folosi etichetele speciale pentru titluri, chiar daca browserul nu le recunoaște, are posibilitatea de a evidenția totuși titlurile în cea mai bună manieră pe care o are la dispoziție, astfel încât semnificația lor pentru restul documentului se va păstra.

4. Uneltele de care aveți nevoie

Instrumentele minime de care aveți nevoie pentru a realiza documente HTML sunt, în esență, următoarele: un editor de text, cu ajutorul căruia să scrieți documentul, un browser, prin intermediul căruia să vizualizați aspectul și conținutul documentului, un editor grafic cu care să prelucrați imaginile pe care le veți introduce în pagină și o conexiune la Internet.

Editorul

Pentru a scrie documente HTML aveți la dispoziție trei posibilități:

Folosirea unui simplu editor de text.

Cel mai cunoscut și accesibil este Notepad-ul din Windows.

Atenție!

Nu este recomandat să folosiți un procesor de text complex cum este Microsoft Word, chiar dacă acesta poate salva documentele în format HTML (cu extensia .htm), deoarece la salvarea documentelor Word-ul adaugă automat la textul documentului dumneavoastră o mare cantitate de cod conținând informații lipsite de relevanță care încarcă inutil documentul și mărește dimensiunile fișierului.

Folosirea unui editor HTML.

Acest tip de editoare dedicate oferă facilități în scrierea codului, realizează corectarea documentului din punct de vedere sintactic și chiar scriu secvențe de cod pentru anumite elemente pe care doriți să le inserați în document.

Folosirea unui editor WYSIWYG (What You See Is What You Get, în traducere liberă "ceea ce vezi la editare este ceea ce obții la vizualizare").

Un editor de tip WYSIWYG permite alegerea și formatarea, cu ajutorul mouse-ului, a elementelor pe care doriți să le includeți în pagină: tabele, link-uri, formulare, puteți stabili tipul fonturilor, culorile, aranjarea textului în pagina. Pe măsură ce un anumit element este inserat, editorul scrie în mod automat codul HTML corespunzător, fără ca utilizatorul să fie nevoit să intervină asupra lui. Totuși, dacă aveți cunoștințe de HTML puteți interveni la nivelul codului în orice manieră doriți, orice schimbare pe care o faceți în cod, reflectându-se automat în aspectul paginii.

Printre profesioniști persistă o controversă în privința tipurilor de editoare care ar trebui folosite pentru a edita documentele HTML. În esență, problema este aceasta: este mai bine să-ți construiești paginile folosind HTML "pur", adică scriind totul tu însuți, sau este de preferat să folosești un editor de tipul WYSIWYG? Editoare deosebit de puternice de acest tip: Macromedia Dreamweaver, Microsoft Front Page, Coffe Cup ca să dăm numai câteva exemple, par a înclina definitiv balanța în favoarea acestui tip de editare. Ele oferă facilitați avansate de editare a paginii, inclusiv posibilitatea de a crea pagini dinamice și de a include script-uri JavaScript sau applet-uri Java. Cu ajutorul lor se pot construi site-uri extrem de complexe.

Există, de asemenea și editoare de tip "built-in". Acestea sunt cel mai ușor de folosit și adesea sunt puse la dispoziție de providerii care oferă și servicii gratuite de hosting (www.home.ro, www.rhp.ro, etc.).

Editoarele de acest tip oferă un număr (de obicei redus) de template-uri (pagini preformatate), și doar câteva opțiuni de editare: puteți adăuga text, modifica tipul fonturilor, culoarea fundalului și a textului, forma butoanelor de navigare, puteți include un număr prestabilit de imagini. Din păcate, gradul de control asupra aspectului paginii este foarte redus. Utilizatorul este limitat la câteva opțiuni, iar numărul mic de template-uri puse la dispoziție face ca pagina să fie lipsita de originalitate.

Ați putea, atunci, să vă întrebați de ce mai este nevoie să învățați HTML dacă există editoare profesionale care scriu codul în locul dumneavoastră. În fond, mulți dintre web designerii profesioniști le folosesc, deoarece a scrie codul unui site "by hand", cu ajutorul unui simplu editor de text, este o munca titanică și mare consumatoare de timp.

Răspunsul este simplu: trebuie să cunoașteți HTML deoarece oricât de performant ar fi un editor WYSIWYG, mai devreme sau mai târziu vă veți găsi în situația de a interveni la nivelul codului. Cea mai comună situație este aceea în care, datorită multiplelor operații de editare cum sunt mutarea, copierea, ștergerea elementelor, anumite părți ale paginii nu vor mai funcționa corect.

De obicei, intervențiile necesare asupra codului pentru depanarea sa sunt minime și ușor de realizat… cu condiția să știți ce trebuie să faceți. Cu alte cuvinte, să știți HTML.

În concluzie, oricare ar fi opțiunea dumneavoastră, fie că veți folosi un editor de HTML de tip text, fie că veți folosi unul de tip WYSIWYG, pentru a putea construi documente Web corecte și funcționale este nevoie să stăpâniți bine limbajul HTML.

Browserul

Evident, pentru a vizualiza documentele dumneavoastră aveți nevoie de un browser. Recomandarea noastră este să dețineți cel puțin două dintre cele mai răspândite browsere, Internet Explorer și Netscape Navigator, de dorit ar fi chiar cu versiuni diferite ale aceluiași browser. Testarea paginilor dumneavoastră sub diferite browsere este o etapă importantă înaintea publicării lor pe Web.

Deși în anii de început ai Web-ului problema aspectului paginilor în diferite tipuri de browsere era vitală, deoarece erau folosite o mare diversitate de browsere, fiecare tip realizând afișarea paginilor în maniera sa proprie, în prezent această problemă și-a pierdut din importanță. Motivul este acela că browserele Internet Explorer au acaparat cea mai mare parte din piață, statisticile arătând că Internet Explorer este tipul folosit de 93% dintre utilizatori iar Netscape Navigator de circa 6% dintre ei.

Editorul grafic

Desigur, veți dori să introduceți imagini în paginile dumneavoastră. Pentru a putea să prelucrați imaginile în conformitate cu intențiile dumneavoastră și cu rolul lor în pagină aveți nevoie de un editor grafic.

Numărul editoarelor de acest tip este foarte mare, printre cele mai puternice și mai cunoscute fiind CorelDraw și Adobe Photoshop. Puteți alege însă acel editor cu care sunteți deja familiarizat, chiar dacă mai puțin performant, mai ales dacă pentru început nu doriți să faceți prelucrări foarte complexe ale imaginilor.

Conexiunea la Internet

Spre deosebire de primele trei instrumente, conexiunea la Internet nu este absolut esențială în etapa de construire a documentului HTML. Așa cum spuneam, documentele HTML se pot construi și vizualiza local, pe propriul computer. Cu toate acestea, existența unei conexiuni Internet vă va ajuta foarte mult în procesul de învățare, și nu numai.

Pe de-o parte deoarece pe Web veți găsi nenumărate exemple, și bune și rele, pe care le puteți studia. În plus, veți avea acces la o cantitate uriașă și în continuă creștere de resurse, documentație și produse care vă vor ajuta cu siguranță la construirea paginilor dumneavoastră. Și, în fine, accesul la Internet este esențial în etapa de testare a legăturilor cu pagini externe.

5. Cum să procedați?

Pentru a folosi eficient informațiile din această carte iată mai jos câteva indicații în privința modului în care vă puteți organiza activitatea:

Creați-vă în folderul My Documents (sau într-o alta locație aleasă de dumneavoastră) un folder de lucru numit Work.

Deschideți editorul de text în care ați ales să lucrați (ar fi de dorit ca pe parcursul procesului de învățare să folosiți un simplu editor text, de exemplu Notepad).

Scrieți (editați) fiecare exemplu pe care îl găsiți aici.

Salvați-l în folderul dumneavoastră cu numele indicat în blocul <TITLE> și extensia .html. Puteți folosi atât extensia .html cât și extensia .htm dar este bine ca odată ce ați ales o anumită extensie să fiți consecvent în folosirea ei. Denumiți-vă fișierele cu litere mici.

Atenție!

Editorul de text Notepad salvează fișierele cu extensia implicita ".txt". De aceea când salvați este necesar să precizați în mod explicit extensia dorită (.html sau .htm)

Când veți salva fișierul creat în Notepad s-ar putea să constatați că restul de fișiere HTML pe care le-ați salvat anterior nu apar în fereastră. Pentru a le vedea, deschideți meniul File>Save As…, iar în fereastra deschisă selectați din listă All files.

Deschideți cu browserul utilizat fișierul HTML (File> Open> Browse) pentru a vedea cum arată pagina Web descrisă în fișierul dumneavoastră.

După fiecare modificare pe care o faceți în fișierul HTML nu uitați să-l salvați, altminteri schimbările făcute nu se vor reflecta în aspectul final al paginii.

Pentru a observa felul cum modificările pe care le faceți în codul HTML schimbă aspectul paginii, trebuie să apăsați butonul Refresh/Reload al browserului.

Pentru a putea să vizualizați cu ușurință aspectul paginilor dumneavoastră este bine să aveți deschise permanent atât editorul de text în care scrieți documentul HTML cât și browserul cu care îl vizualizați.

6. Convenții de notație

HTML nu este un limbaj case-sensitive, adică nu face distincția între literele mici și cele mari(majuscule). Aceasta înseamnă că indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser. Din acest motiv pe parcursul acestei lucrări vom utiliza o convenție de notație în care etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru o mai bună diferențiere și evidențiere a acestora.

Desigur că în documentele pe care le scrieți puteți respecta această convenție sau puteți scrie cu un singur tip de litere, după cum vă este mai ușor.

Peste tot în cadrul textului, unde apar etichete, atribute sau valori ale acestora am folosit caractere Courier New pentru a diferenția elementele de limbaj de restul textului.

De asemenea, veți observa că, în exemplele prezentate, codul HTML este scris indentat, adică aliniat la diverse nivele. Ca și în cazul etichetelor, acest lucru nu are importanță pentru browser. Indentarea vă este utilă doar dumneavoastră, pentru a diferenția și urmări mai ușor diversele elemente pe care le includeți în document. Totuși, dacă în cazul etichetelor puteți opta pentru orice variantă doriți în privința scrierii lor, indentarea este recomandată chiar și programatorilor cu experiență. Un cod neindentat este foarte greu de citit și de depanat, în cazul apariției unor erori.

7. Rezumat

World Wide Web este o colecție imensă de documente interconectate prin intermediul Internetului, care asigură o interfață hypermedia pentru informații.

Pentru a transmite și afișa documentele, World Wide Web folosește protocolului de comunicație HTTP. Funcționarea World Wide Web se bazează pe relația client-server. Clienții sunt browserele Web iar serverele sunt serverele Web.

Limbajul HTML realizează descrierea documentelor Web. Prin intermediul său i se comunică browserului ce elemente fac parte din pagina Web și care este aspectul acestora. Este recomandată crearea unor documente HTML orientate către conținut și nu către aspect.

Pentru a crea documente HTML aveți nevoie de un set minimal de instrumente: un editor de text, un browser, un editor grafic și o conexiune la Internet.

Capitolul 2

Structura unui document HTML

1. Ce este un document HTML?

Un document HTML nu este altceva decât un fișier text care, pe lângă textul propriu-zis ce va apărea în pagină, conține și o serie de elemente speciale, denumite etichete, sau marcaje (tags, în limba engleză).

Notă

Toate celelalte elemente, de tip multimedia, care însoțesc documentul HTML, cum sunt sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referințe la aceste elemente, prin intermediul unor etichete speciale, care indică browserului modul în care ele vor fi încărcate și integrate în pagina Web.

Etichetele nu sunt instrucțiuni în sensul cunoscut al noțiunii, ele având doar rolul de a comunica browserului semnificația și modul de afișare 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 rândul lor, atributelor li se pot atribui valori diferite.

Atât etichetele cât și atributele sunt case-insensitive, ca atare nu va exista nici o diferență de acțiune î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 locațiilor fișierelor ș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ă funcționare a documentului.

Spre deosebire de limbajele compilate cum ar fi limbajul C, în care programele trec înainte de execuție prin faza de compilare, etapă în care compilatorul semnalează eventualele greșeli de sintaxă, la documentele HTML nu se întâmplă acest lucru. Documentele HTML sunt interpretate de browser exact așa cum au fost ele scrise. Prin urmare, orice greșeală de sintaxă se va reflecta direct în aspectul paginii Web, conducând, de cele mai multe ori, la o funcționare defectuoasă a acesteia.

Dacă la vizualizarea paginii dumneavoastră cu browserul constatați că anumite secvențe ale paginii nu au aspectul așteptat, sau elementele pe care doriți să le introduceți nu sunt afișate, reveniți asupra documentului HTML și verificați încă o dată sintaxa acestor elemente.

HTML lucrează într-o manieră foarte ușor de înțeles. În esență trebuie să scrieți textul și să precizați elementele care doriți să apară în pagină și să le includeți între anumite etichete specifice. De exemplu, dacă dorim să afișăm o propoziție cu caractere îngroșate (bold), vom marca începutul acesteia folosind eticheta <B> iar pentru marcarea sfârșitului propoziției eticheta </B>.

<B> Acesta este un text scris cu litere aldine</B>

Atenție!

Browserul nu ține cont de numărul spațiilor dintre cuvinte, afișarea făcându-se invariabil cu un singur spațiu. De asemenea, nu se poate preciza mărimea liniilor de text, acestea fiind de mărimea ferestrei browserului (prin redimensionarea ferestrei se vor rearanja și liniile de text).

După cum vom vedea mai târziu, se poate preciza totuși unde să se termine un anumit rând ș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:

unde:

<TAG> – marchează începutul unui bloc

</TAG> – marchează sfârșitul blocului

Etichetele specifică formatul în care va fi afișat textul conținut î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, prezența etichetei de închidere (</TAG>) este opțională. Pe parcursul capitolelor care vor urma, vom preciza explicit care anume sunt etichetele care au această proprietate.

Etichetele vide au forma:

<TAG>

Acest tip de etichete nu se referă la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: paragrafe, sfârșit de linie, linii orizontale și altele, deci dau indicații browserului despre ce element este vorba și despre cum să afișeze acel element.

Etichetele vide nu au etichetă de închidere.

2. Etichete de structură

Orice document HTML conține două secțiuni:

antetul (head)

corpul documentului (body)

Structura generală a unui document HTML este următoarea:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Documentul este delimitat de etichetele <HTML> </HTML> și este format din cele două părți:

antet (head) – este delimitat de etichetele <HEAD> </HEAD> și conține titlul documentului precum și alte informații privind documentul. În antetul documentului se mai inserează și anumite secvențe de program (script-uri), care se execută la încărcarea documentului în browser.

corp (body) – care delimitează conținutul propriu-zis al documentului și este inclus între etichetele <BODY> </BODY>

Iată acum și semnificația etichetelor menționate și care fac parte din structura oricărui document HTML:

Între aceste etichete este inclus întregul document HTML. Ele comunică browserului unde începe și unde se termină documentul.

Între aceste etichete sunt incluse titlul, deja menționat, precum și alte informații despre documentul HTML. Aceste elemente, numite metatag-uri sunt deosebit de importante pentru ca pagina să fie cât mai bine cotată de către motoarele de căutare. Ele vor face obiectul unui capitol separat.

Metatag-urile și antetul în ansamblul său nu sunt vizibile pentru vizitator în pagina Web. Totuși, la fel ca întreg codul HTML al paginii, antetul poate fi vizualizat selectând din meniul browserului opțiunea View > Source.

Stabilește titlul documentului HTML.

Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de motoarele de căutare pentru indexarea paginii. Prin urmare, străduiți-vă să găsiți un titlu care să descrie cât mai corect și complet conținutul paginii dumneavoastră.

Atenție!

Eticheta de mai sus nu stabilește titlul care apare în cadrul paginii, ci pe acela care apare obișnuit în bara de titlu a browserului.

Conține descrierea textului și elementelor paginii. În corpul documentului se stabilesc, deci, aspectul și conținutul paginii Web. Elementele conținute în această secțiune sunt vizibile în pagină.

Poate nu vă vine să credeți, dar acum aveți deja posibilitatea de a crea o pagină foarte simplă de text. Aveți Notepad-ul deschis? Dacă nu, deschideți-l acum și scrieți exemplul următor:

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>

Salvați fișierul cu numele primapagina.html. Apoi deschideți browserul pe care îl folosiți (Internet Explorer sau Netscape), selectați meniul File > Open > Browse, căutați folderul în care ați salvat fișierul, deschideți-l și vă veți afla în fața primului dumneavoastră document HTML : Figura 2.1

Dacă doriți să scrieți un text pe mai multe linii în pagină, va trebui să folosiți 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. Încercați exemplul de mai jos, în care afișarea textului documentului se va face pe două rânduri.

Exemplul 2. 2

<HTML>

<HEAD>

<TITLE>Pagina mea</TITLE>

</HEAD>

<BODY>

Am reusit sa scriu prima mea pagina de Web.<BR>Urmatoarea va fi cu mult mai buna.

</BODY>

</HTML>

Acum, documentul dumneavoastră va arăta ca în Figura 2.2

Deoarece structura documentelor HTML obișnuite este în realitate mult mai complexă, este recomandat ca, pe măsură ce procesul de editare avansează, să introduceți comentarii în text pentru a face această structură cât 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 informații, explicații la elementele de cod utilizate, etc., fiind deosebit de utile ulterior, mai ales în situația î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, așa cum am văzut mai devreme, din perechi de etichete: etichetă de deschidere <TAG> și de închidere </TAG>.

La construirea unei pagini Web complexe veți fi pus adesea în situația de a folosi mai multe etichete pentru aceeași secvență de text.

De pildă, veți dori să atribuiți unui text două proprietăți: litere aldine sau îngroșate (bold) și text centrat în pagină. Pentru aceasta va trebui să utilizați două perechi de etichete, care descriu cele două proprietăți, î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ă situație, principiul de utilizare este: "Last In – First Out" (LIFO). Acest lucru înseamnă că ultima etichetă deschisă trebuie să fie prima care se închide.

Atenție!

Trebuie să fiți foarte atent la închiderea etichetelor, pentru a nu încălca principiul LIFO. În caz contrar, secvența de cod din pagină nu va funcționa corect.

Iată un exemplu generic de folosire corectă a două etichete:

<TAG1><TAG2>Etichete utilizate corect</TAG2></TAG1>

și un altul de folosire incorectă:

<TAG1><TAG2>Etichete utilizate incorect</TAG1></TAG2>

4. Rezumat

Un document HTML este un fișier text care conține textul care va apărea în pagină și etichete. Acestea au rolul de a comunica browserului semnificația și modul de afișare al elementelor incluse între ele.

Etichetele sunt însoțite 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

HTML este un acronim de la:

Hyper Text Marker Line

Hyper Text Markup Language

Hyper Technical Method Library

Etichetele HTML sunt incluse între:

[ și ]

( și )

< și >

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?

un editor de text

un editor grafic

HTML Development 4.0

O pagina Web este formată din două părți:

Top și Bottom

Body și Frameset

Head și Body

Care etichete îi comunica browserului unde începe și unde se termină pagina?

<HTML>

<HEAD>

<BODY>

Care dintre următoarele elemente nu poate fi găsit în secțiunea Head?

Title

Table

Metatag

În construcția următoare:

<TITLE>Pagina mea</TITLE>

Pagina mea reprezintă:

Numele fișierului HTML

Titlul care va apărea în pagina Web

Titlul care va apărea în bara de titlu a ferestrei browserului

Care dintre următoarele fișiere nu este un fișier HTML?

mypage.htm

mypage.txt

mypage.html

Iată exemplul de mai jos:

<TAG1>

<TAG3>Text

</TAG3>Text

</TAG1>

Este un exemplu de folosire corectă a etichetelor?

Nu, deoarece închiderea etichetelor nu respectă regula LIFO.

Nu, deoarece nu avem voie să folosim mai mult de două etichete imbricate

Da, deoarece etichetele se închid corect.

Structura unui document HTML

1. b)

2. c)

3. b)

4. a)

5. c)

6. a)

7. b)

8. c)

9. b)

10. c)

Capitolul 3

Culori

Culoarea reprezintă un caracteristică extrem de importantă a unei pagini Web. Utilizată cu grijă și măsură, ea poate îmbunătăți substanțial aspectul paginii, făcând-o mai lizibilă și mai atractivă, iar textul mai ușor 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 urmărit, și care îi va determina pe mulți vizitatori să renunțe 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 lucrării noastre.

1. Sistemul de definire a culorilor

Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitățile de roșu (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 roșu, cele două din mijloc, cantitatea de verde, iar ultimele două cantitatea de albastru.

Sistemul hexazecimal este un sistem de numerație care folosește 16 cifre, existând următoarea corespondență între cifrele hexazecimale și cele zecimale:

De exemplu, #FF0000 este codul pentru roșu. Semnificația acestui cod este următoarea: cantitatea de roșu este maximă, iar cantitățile 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 său hexazecimal este incomodă, standardul HTML 3.2 stabilește 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:

Numele și codul culorilor stabilite în standardul HTML3.2 sunt următoarele:

Tabelul 3. 1

Mai trebuie menționat faptul că se pot utiliza, pe lângă culori, 100 de nuanțe de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuanța cea mai închisă, iar "gray 100" cea mai deschisă. În Anexa 3 veți găsi tabelul culorilor însoțite de codurile lor hexazecimale.

2. Corespondența dintre codurile hexazecimal și zecimal

Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Deși se bazează și ele pe același sistem RGB de definire a culorilor, numerele care stabilesc cantitățile celor trei culori sunt specificate în sistemul zecimal.

De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128. Această corespondență se realizează simplu, trecând fiecare dintre cele trei numere hexazecimale din codul culorii în sistemul zecimal:

63(16)=99(10) , FF(16)=255(10), 80(16)=128(10)

Motivul pentru care trebuie să cunoașteți această corespondență este acela că pentru a folosi în documentul HTML o culoare al cărei cod este dat în sistemul zecimal, aceasta trebuie convertită în cod hexazecimal.

Conversia se poate realiza foarte simplu folosind calculatorul din Windows (Start > Accessories > Calculator) care trebuie setat pe opțiunea Scientific din meniul View. Veți observa o serie de butoane radio dintre care ne interesează două: Hex și Dec. Nu aveți altceva de făcut decât să selectați Dec, să tastați numărul în baza 10 și apoi să selectați opțiunea Hex. Rezultatul conversiei va apărea pe ecran. Conversia inversă se realizează în mod similar.

Și acum să trecem la lucruri mai atractive și să dăm viață paginii noastre adăugându-i culori. Vom lua pe rând atributele etichetei <BODY>. Cu ajutorul lor se pot seta culorile fundalului, textului și linkurilor:

bgcolor – culoarea fundalului

text – culoarea textului

link – culoarea linkurilor

vlink – culoarea linkurilor vizitate

alink – culoarea linkului activ

3. Culoarea fundalului

Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei <BODY>, căruia îi atribuim o valoare astfel:

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>

<H1 align="center">Pagina cu fundal verde</H1><HR>

</BODY>

</HTML>

Aspectul paginii va fi cel din Figura 3.1.

4. Culoarea textului

Pentru a seta culoarea textului din întreaga pagină se folosește atributul text al etichetei <BODY>, conform sintaxei:

Dacă am stabilit o culoare pentru textul din pagină și dorim să utilizăm o altă culoare pentru o anumită secțiune a textului (culoarea unui bloc de text), vom folosi o etichetă despre care vom vorbi pe larg în capitolul următor: eticheta <FONT>. Aceasta este o etichetă container care cuprinde între etichetele de început și de final textul a cărui culoare dorim să o modificăm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei:

În Exemplul 3.2 culoarea textului este albastru iar anumite cuvinte sunt colorate în roșu. Aspectul paginii va fi cel din Figura 3.2.

Exemplul 3. 2

<HTML>

<HEAD>

<TITLE>culori2</TITLE>

</HEAD>

<H1 align="center">Text albastru si rosu</H1>

<HR>

Textul din aceasta pagina este albastru cu mici

<FONT color="#FF0000"> exceptii</FONT>

</BODY>

</HTML>

5. Culoarea legăturilor

În general legăturile (links) dintr-o pagină Web au culori prestabilite (default), astfel:

blue (albastru) – pentru legături

red (roșu) – pentru legătura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stâng apăsat)

purple (violet) – pentru legăturile vizitate, cele pe care s-a efectuat cel puțin un click

Pentru a schimba culorile prestabilite se folosesc următoarele atribute ale etichetei <BODY>:

link pentru legături

alink pentru legăturile active

vlink pentru legăturile 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 legăturile au culoarea verde, legăturile active culoarea albastru și cele vizitate, culoarea roșu. În exemplu este folosită eticheta <A> și atributul sau href, care vor fi prezentate pe larg în capitolul despre legături. În acest moment singurul lucru care ne interesează este cum putem stabili culorile acestora.

Exemplul 3. 3

<HTML>

<HEAD>

<TITLE>culori3</TITLE>

</HEAD>

<H1 align="center">Legaturi colorate</H1>

<HR>

<A href="culori1.html">Legatura catre primul exemplu</A>

</BODY>

</HTML>

Aspectul paginii va fi cel din Figura 3.3.

6. 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 conținutul ușor de citit. Aceasta înseamnă…ați ghicit! Litere negre pe fond alb.

Deși în vestimentație combinația de roșu cu bleumarin este rafinată, într-o pagină Web literele roșii pe fond albastru nu arată bine și sunt greu de citit. O altă combinație nefericită este cea cu fondul negru sau de culoare foarte închisă și textul de culoare albă.

Să nu uităm nici faptul că toate monitoarele dispun de reglaje ale strălucirii luminoase și ale contrastului pe care utilizatorii le setează diferit, în funcție de preferințele personale, de toleranța ochiului, de iluminarea camerei, etc.

Pe un monitor cu reglaje medii ale contrastului și strălucirii, un text de culoare roșie dispus pe un fundal negru va fi ilizibil, chiar dacă la valori maxime ale acestor caracteristici combinația poate genera efecte interesante.

În alegerea culorilor pentru un site este bine să țineți seama de câteva elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vreți să îl transmiteți.

Iată câteva dintre sentimentele pe care le sugerează culorile:

Roșu – agresivitate, pasiune, putere, vitalitate

Roz – feminitate, inocență, moliciune

Portocaliu – amuzament, veselie, căldură, exuberanță

Galben – sentimente pozitive și cordialitate

Verde – liniște, sănătate, prospețime

Albastru – autoritate, demnitate, securitate, încredere

Violet – sofisticare, spiritualitate, mister

Maro – utilitate, legătura cu pământul, bogăție

Alb – puritate, încredere, modernitate, rafinament

Gri – sobrietate, autoritate, simț practic

Negru – seriozitate, distincție, hotărâre

Alegerea culorilor pentru site trebuie să fie în concordanță cu tema site-ului și să sublinieze mesajul său. Astfel, dacă doriți să construiți un site destinat copiilor veți folosi culori vesele și luminoase, în vreme ce pentru un site destinat prezentării unei firme de consultanță financiară sunt potrivite culori sobre și care sugerează seriozitate și încredere.

Alegerea culorilor pentru legături este, de asemenea, importantă. Legăturile au, în mod prestabilit, anumite culori. Schimbarea acestora, deși posibilă, îl poate induce în eroare pe vizitator. Ca și în cazul textului, alegeți pentru legături, legăturile vizitate și legătura activă culori care să vină în contrast cu culoarea sau imaginea de fundal a paginii. Rămâneți consecvent culorilor alese pentru legături, pe parcursul întregului site.

7. Culori "sigure"

Așa cum era de așteptat, 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, așa-numită paletă Web sau "culorile sigure Web".

Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat în tabelul de mai sus sau sunt realizate prin combinații ale următoarelor numere hexazecimale: 00 33 66 99 CC FF

Codul hexazecimal variază între #FFFFFF (alb) și #000000 (negru).

Un monitor setat să afișeze 256 de culori va încerca afișarea 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 afișa culoarea "sigură" cea mai apropiată de cea originală.

În principiu, o astfel de problemă poate părea minoră. În realitate, presupunând că o pagină Web conține atât textul cât și fundalul ambele în culori "nesigure", prin modificarea lor de către computerul cititorului, nuanțele "aproximate" pot face textul total ilizibil.

Pentru a evita astfel de surprize neplăcute este suficient să vă menține în limita celor 256 de culori "sigure".

Desigur, puteți folosi o combinație hexazecimală ciudată, ca aceasta: #12EC8B, dar nu veți avea nici o garanție în privința modului în care va fi afișată această culoare în diferite browsere și pe diferite platforme.

8. Rezumat

Culorile într-un document HTML sunt definite cu ajutorul codului RGB care exprimă în sistem hexazecimal cantitatea de roșu, verde și albastru prezentă în fiecare culoare.

Pentru a stabili culorile într-o pagină Web se folosesc atributele etichetei <BODY> după următoarea 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 strânsă legătură cu mesajul transmis de aceasta și să permită citirea cu ușurință a informațiilor prezentate.

Pentru a evita afișarea defectuoasă a culorilor din pagină este recomandată folosirea culorilor "sigure".

9. Test

Sistemul pentru definirea culorilor este:

Red, Green, Blue

Red, Yellow, Blue

White, Black, Gray

Culorile în HTML pot fi specificate folosind:

Codul zecimal

Codul hexazecimal

Codul Morse

Care este cea mai mare cifră în sistemul hexazecimal?

15

F

A

O culoare care are în sistemul zecimal codul RGB cu valorile: 46, 250, 34 are codul hexazecimal:

#2EFA22

#3CCD45

#66FF90

Pentru a stabili culoarea fundalului paginii folosim:

Setarea culorii pentru tot textul din pagină se face cu:

Cum se poate schimba culoarea unui bloc de text?

<COLOR="culoare">text</COLOR>

Care sunt culorile prestabilite pentru legături, legături active și legături vizitate?

albastru, roșu, violet

albastru, verde, galben

negru, albastru, roșu

Culoarea legăturilor se poate schimba folosind:

Atributele link, alink și vlink servesc la:

stabilirea legăturilor

stabilirea culorilor pentru legături

stabilirea culorilor pentru întreaga pagină

Culori

1. a)

2. b)

3. b)

4. a)

5. c)

6. c)

7. c)

8. a)

9. b)

10. b)

Capitolul 4

Fonturi

Înainte de a aborda tipurile de caractere care pot fi utilizate în documentele Web, se cuvine menționat un fapt: HTML nu este un limbaj orientat spre aspectul (layout) paginii, ci spre conținutul acesteia.

Importanța acestei mențiuni rezidă în aceea că etichetele HTML nu impun, cum s-ar putea crede, ci "sfătuiesc" marea varietate de browsere care procesează pagina Web, cum să afișeze textul. Ceea ce impun ele cu adevărat este conținutul, textul în sine, nu forma de prezentare.

Desigur că nu se poate vorbi de cealaltă extremă, a unui arbitrariu absolut, în care fiecare browser va afișa textul sub o formă absolut imprevizibilă. Un text cu o anumită formatare pentru Internet Explorer, să spunem, va fi vizualizat practic identic de toți 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 folosește 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 sfârșit se inserează textul sau caracterul ale cărui 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 afișarea textului "Ion Luca Caragiale" cu fonturi Arial, de culoare roșie și de mărime egală cu 2 puncte.

Să analizăm succesiv cele trei atribute ale etichetei <FONT>:

size – dimensiunea textului – poate fi un număr î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 menționate depășesc intervalul 1-7, browserul rotunjește automat valorile pentru a le încadra în acest interval.

color – culoarea textului – este culoarea cu care va fi afișat textul prezent între etichete (în exemplul nostru, "Ion Luca Caragiale" ).

face – tipul de font – determină tipul de font care va fi utilizat la afișarea 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 când primul tip indicat nu este instalat pe calculatorul celui care vizitează pagina, și se face ca în exemplul de mai jos.

În această situație browserul va alege singur din listă primul tip de font pe care îl recunoaște, ignorându-le pe următoarele.

Atenție!

La stabilirea tipului de caracter utilizat în pagină țineți seama de faptul că nu toți utilizatorii au instalate pe computerele lor același set de caractere ca și dumneavoastră. Din acest motiv, folosirea unor caractere exotice, de efect, poate conduce la un eșec în cazul când utilizatorul nu are instalat acel font.

Din acest motiv este de preferat folosirea unor fonturi cu utilizare largă, cum sunt cele menționate mai sus.

În Exemplul 4.1 vom aplica pe rând fiecare dintre cele trei atribute menționate asupra unui text, aspectul paginii descrise de acest document fiind cel din Figura 4.1.

Exemplul 4. 1

<HTML>

<HEAD>

<TITLE>fonturi1</TITLE>

</HEAD>

<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 folosește pentru a stabili caracteristicile unui bloc de text.

Este indicat să fie inclusă în documentul HTML imediat după eticheta <BODY>. Atributele etichetei <BASEFONT> sunt aceleași cu cele ale etichetei <FONT>, respectiv: size, color, face.

În Exemplul 4.2 vom construi o pagină căreia îi setăm 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ă mărime și culoare, acestea fiind stabilite prin folosirea etichetei <FONT>.

Exemplul 4. 2

<HTML>

<HEAD>

<TITLE>fonturi2</TITLE>

</HEAD>

Am ajuns la lectia despre fonturi a <FONT face="arial black" color="red" size="4">Manualului de HTML</FONT>

</BODY>

</HTML>

După cum puteți observa din Figura 4.2, caracteristicile textului din pagină au fost setate cu ajutorul etichetei <BASEFONT>. Pentru a afișa simultan o parte din text într-un mod diferit am folosit eticheta <FONT>.

Deși eticheta <BASEFONT> face parte din standardul HTML 3.2, atributele sale nu sunt recunoscute de browserele Netscape. Ca urmare, acesta va afișa textul utilizând propriile setări prestabilite (default), ignorând atributele menționate în eticheta <BASEFONT>.

Următorul exemplu (Exemplul 4.3) afișează un cuvânt având literele de mărimi diferite. Aspectul acestei pagini este cel din Figura 4.3.

Exemplul 4. 3

<HTML>

<HEAD>

<TITLE>fonturi3</TITLE>

</HEAD>

</BODY>

</HTML>

Să trecem în revistă, în continuare, alte etichete care schimbă aspectul unui caracter sau al unui bloc de text.

2. Accentuarea textului

Eticheta <BIG> </BIG> face fonturile mai mari decât dimensiunea curentă.

<BIG>Text cu caractere mari</BIG>

Text cu caractere mari

Eticheta <SMALL> </SMALL> face fonturile mai mici decât dimensiunea curentă.

<SMALL>Text cu caractere mici</SMALL>

Text cu caractere mici

Etichetele <B> </B> (bold) și <STRONG> </STRONG> realizează scrierea cu caractere aldine, sau îngroșate (bold).

<B>Text ingrosat 1</B>

Text ingrosat 1

<STRONG>Text ingrosat 2</STRONG>

Text ingrosat 2

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

Etichetele <S> </S> și <STRIKE> </STRIKE> realizează scrierea textului tăiat de o linie orizontală.

<S>Text taiat 1</S>

Text taiat 1

<STRIKE>Text taiat 2</STRIKE>

Text taiat 2

Eticheta <U> </U> (underlined) realizează sublinierea textului.

<U>Text subliniat</U>

Text subliniat

Atenție!

Utilizarea textului subliniat trebuie făcută cu grijă, întrucât acesta poate fi confundat cu un link.

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

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 decât dimensiunea curenta.

În Internet Explorer, <BIG> afișează textul cu fonturi de dimensiune 4 iar <SMALL> cu fonturi de dimensiune 2. Etichetele <BIG> și <SMALL> pot fi repetate pentru a obține un efect mai accentuat.

Exemplele următoare ilustrează modul cum pot fi utilizate aceste etichete.

Exemplul 4. 4

<HTML>

<HEAD>

<TITLE>fonturi4</TITLE>

</HEAD>

<BODY>

<BIG>Etichete</BIG> care <EM>schimba</EM> aspectul <SMALL>textului</SMALL>

</BODY>

</HTML>

Aspectul paginii este cel din Figura 4.4

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>

Pagina arată ca în Figura 4.5

După cum ați observat mai sus, există două etichete al căror efect este același: accentuarea textului fie prin scrierea cu caractere italice fie cu caractere aldine.

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. Diferența dintre cele două tipuri de etichete este legată de felul cum sunt ele executate de diversele tipuri de browsere.

Astfel, etichetele fizice impun browserului afișarea î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. Totuși, dacă un anumit tip de browser nu suportă acest format de caractere, va accentua totuși 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 afișat cu caractere italice.

<CODE> </CODE> (code) Etichete folosite pentru inserarea în text a unor secvențe de cod scrise într-un limbaj de programare. În general secvențele de cod sunt afișate cu fonturi Courier.

<DFN> </DFN> (definition) Eticheta este folosită pentru a insera în text definiția unor termeni. Este utilă la crearea indexului sau glosarului unui document.

<KBD> </KBD> (keyboard) Această etichetă logică se folosește pentru a indica un text care urmează a fi introdus de la tastatură, ca în următorul 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 folosește pentru a afișa textul inclus între etichete cu fonturi monospațiate. Tipul de font monospațiat (cum este de exemplu Courier) are proprietatea că fiecărui caracter i se rezervă același număr de pixeli pe ecran. Astfel, caracterul "i" va avea alocat tot atâta spațiu pe ecran ca și caracterul "W":

"Courier" este un font monospațiat.

Mai trebuie precizat și faptul că utilizarea unora dintre etichetele de formatare a fonturilor așa 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. Rezumat

Pentru a stabili aspectul unei anumite secvențe de text aceasta este inclusă între etichetele <FONT> </FONT> conform sintaxei:

Pentru a seta aspectul textului în toată pagina Web se folosește eticheta <BASEFONT> conform sintaxei:

Accentuarea textului se poate face folosind diverse etichete pentru scrierea cu caractere aldine, cu caractere italice, cu caractere mai mari sau mai mici decât dimensiunea curentă a fonturilor.

Etichetele sunt de două tipuri: fizice și logice, etichetele fizice fiind orientate către aspectul textului iar cele logice către semnificația textului în cadrul documentului.

5. Test

Pentru a stabili tipul de font pentru întreaga pagină Web se folosește eticheta:

Pentru a stabili tipul de font cu care se face afișarea unui text se folosește atributul:

character

type

face

Unul dintre exemplele următoare este incorect. Care?

<FONTface="verdana">

Ce realizează următoarea etichetă?

Afișează textul cu fonturi de mărime 1.

Afișează pe pagină textul "+1".

Afișează textul cu fonturi de dimensiune mai mare cu un punct decât dimensiunea curentă.

În afara etichetei <B> ce altă etichetă se mai folosește pentru a scrie un text cu caractere aldine?

<DARK>

<BIG>

Etichetele <I> și <EM> realizează:

scrierea textului cu caractere italice

inserarea unei imagini

scrierea textului cu caractere mai mici decât cele curente

Ce este incorect în următorul exemplu?

Nu se pot preciza mai multe tipuri de fonturi ca valori pentru atributul face.

Tipurile specificate nu se pot scrie cu caractere aldine

Etichetele <FONT> și <B> nu se închid corect.

Prin ce se aseamănă etichetele <STRONG> și <EM>?

Sunt amândouă etichete logice.

Sunt amândouă etichete fizice.

Servesc amândouă la scrierea textului cu caractere italice.

Care este greșeala în următoarea construcție?

<BASEFONT> nu este o eticheta container

<BASEFONT> nu suportă atributul face

<BASEFONT> nu suportă atributul size

Ce efect are următoarea etichetă?

<FONT="arial, verdana, times new roman">

Textul se afișează cu toate cele trei tipuri de fonturi.

Textul se afișează cu primul tip de font, dintre cele trei, pe care îl recunoaște browserul.

Eticheta nu era nici un efect întrucât este incorectă.

Fonturi

1. b)

2. c)

3. c)

4. c)

5. b)

6. a)

7. c)

8. a)

9. a)

10. b)

Capitolul 5

Formatarea textului

Etichetele despre care vom vorbi în continuare nu se mai referă la particularitățile fonturilor ci la felul în care poate fi amplasat un text în cadrul paginii. Înainte de a discuta în amănunt despre etichetele care permit formatarea textului, să facem câteva precizări privind felul cum sunt afișate textele.

După cum știți, fișierele HTML sunt fișiere text. Aceasta înseamnă că atunci când salvați fișierul respectiv, el este salvat numai ca text, deci browserul nu poate recunoaște și executa decât strict acele comenzi prevăzute de etichetele HTML. Din acest motiv, trecerea la un rând nou, care în editorul de text se realizează prin apăsarea tastei ENTER, nu este recunoscută de browser.

Un alt aspect este plasarea în text a spațiilor. Chiar dacă veți introduce spații suplimentare între cuvinte atunci când scrieți documentul HTML în editorul de text, browserul va afișa invariabil un singur spațiu î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ă afișarea.

1. Trecerea la un rând nou

Trecerea la un rând nou se realizează cu ajutorul etichetei <BR> (de la line break). Eticheta <BR> nu este o etichetă container. Ea are rolul de a comunica browserului că texul care urmează după etichetă va fi afișat pe un rând nou așa cum rezultă din Exemplul 5.1.

Exemplul 5. 1

<HTML>

<HEAD>

</HEAD>

<BODY>

Buna ziua<BR>Ma numesc Lucia<BR>Invat sa construiesc o pagina Web<BR>

</BODY>

</HTML>

Aspectul paginii descrise în exemplul de mai sus este cel din Figura 5.1.

Eticheta <BR> admite atributul clear care poate lua valorile left, right sau all.

În mod normal, la întâlnirea etichetei <BR> linia curentă de text este întreruptă și se face trecerea la o linie nouă, ca și la acționarea tastei Enter într-un editor de text. Există însă situații când dorim ca linia să fie afișată lângă un anumit element (o imagine, sau un tabel, de exemplu) care blochează partea din stânga sau din dreapta a liniei.

În aceste cazuri putem folosi atributul clear al etichetei <BR> ca în Exemplul 5.2. Puteți observa efectul atributului clear al etichetei <BR> în Figura 5.2.

Exemplul 5. 2

<HTML>

<HEAD>

</HEAD>

<BODY>

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 rând, și de monotonia la care expune un text lung, lipsit de variație în aspect. Firește că un asemenea text sfârșește prin a obosi cititorul Web, obișnuit cu texte scurte și concentrate.

Din acest motiv se recomandă "spargerea" textelor mai lungi și organizarea lor în secvențe mai scurte, marcate de titluri și subtitluri, organizate ierarhic, pe nivele.

Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Ele sunt etichete container, deci necesită eticheta corespunzătoare de închidere.

Eticheta <H1> definește titlul de dimensiunea maximă, iar <H6> pe cel de dimensiune minimă.

Atenție!

Deși standardul HTML nu interzice utilizarea în orice ordine a titlurilor, este de preferat ca acestea să fie folosite în ordinea "normală", progresiv, fără a sări peste vreun nivel (de pildă de la H1 direct la H5), pentru a evita eventualele probleme la convertirea textului în alte tipuri de fișiere.

În Exemplul 5.3 vom folosi toate cele șase etichete pentru titluri pentru a face o comparație cu dimensiunea standard a textului. Puteți observa efectul acestor etichete în Figura 5.3.

Exemplul 5. 3

<HTML>

<HEAD>

</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 menționat o proprietate interesantă a etichetelor de titluri, și anume aceea că un text scris pe aceeași linie cu un titlu este afișat în pagină pe rândul următor titlului, lăsându-se o linie liberă între titlu și text, deși 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 stânga (î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.

Exemplul 5. 4

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Titluri</H1><HR>

Titlu de marime 1 aliniat in centru

</H1>

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 prezența etichetei de închidere </P> este opțională în anumite situații. 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 stânga, centrat respectiv la dreapta.

Exemplul 5.5 ilustrează cele trei modalități de aliniere a textului.

Exemplul 5. 5

<HTML>

<HEAD>

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

</HTML>

Din Figura 5.5 care redă aspectul paginii descrise în exemplu se poate observa că alinierea la stânga este implicită (nu mai trebuie specificat align="left"). Se mai poate observa că nu a fost folosită eticheta de închidere a paragrafelor, deoarece la întâlnirea unei noi etichete <P> vechiul paragraf se consideră închis. Totuși, prezența sau absența etichetei de închidere a paragrafului atunci când este prezent atributul align trebuie stabilită cu grijă, pentru a nu obține rezultate neconforme cu dorințele dumneavoastră.

În Exemplul 5.6 dorim să aliniem un nou paragraf în dreapta paginii, iar textul de pe rândul următor paragrafului, care este introdus prin eticheta <BR>, să fie scris normal, de la capătul din stânga al paginii.

Exemplul 5. 6

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Paragrafe</H1><HR>

Acest text este scris normal, incepand e la marginea din stanga.

<P align="right">Acest text este aliniat la dreapta

<BR>Unde este afisat acest text?

</BODY>

<HTML>

Din Figura 5.6 se poate observa că afișarea nu s-a făcut conform intențiilor noastre. Motivul este faptul că eticheta

<P align=”right”> nu are eticheta de închidere </P>, și prin urmare efectul său se prelungește până la întâlnirea unei alte etichete <P>.

Dacă veți închide paragraful în mod explicit cu ajutorul etichetei de închidere, înainte de trecerea la o linie nouă, efectul asupra textului va fi cel dorit așa cum rezultă din Figura 5.7.

Deși aparent etichetele <BR> și <P> au un efect asemănător, ș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 situațiile când după paragraf este introdus un alt element în pagină este recomandată închiderea în mod explicit a etichetei respective.

4. Preformatarea textului

Așa cum am precizat la începutul capitolului, atunci când editați documentul HTML cu ajutorul unui editor de text, indiferent câte spații veți lăsa între cuvinte sau între liniile de text, browserul va afișa textul invariabil cu un singur spațiu între cuvinte și va ajusta lungimea liniilor în funcție de mărimea ferestrei. Cu alte cuvinte, orice spații sau linii libere suplimentare vor fi ignorate de către browser. Așa cum am văzut 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ă afișeze textul întocmai cum a fost el formatat în documentul HTML. Este vorba despre eticheta <PRE> </PRE>.

Eticheta <PRE> permite preformatarea textului și menține spațierea și alinierea textului așa cum a fost făcută î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.

Testați exemplul folosind eticheta <PRE> iar apoi eliminați-o, pentru a observa mai bine efectul său.

Exemplul 5. 7

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Textul preformatat</H1><HR>

Acesta este un text normal <P>

Orar:

Luni

8:00 Romana

9.00 Matematica

10:00 Geografie

11.00 Istorie

12.00 Fizica<P>

Acesta este textul de mai sus preformatat

<PRE>

Orar:

Luni

8:00 Romana

9.00 Matematica

10:00 Geografie

11.00 Istorie

12.00 Fizica

</PRE>

</BODY>

</HTML>

5. Centrarea textului

Așa cum am văzut mai sus, afișarea textului centrat în pagină se poate face cu ajutorul etichetei <P> având atributul align setat la valoarea "center".

O altă posibilitate de a realiza acest lucru este de a utiliza o etichetă dedicată, incluzând textul între etichetele

<CENTER> </CENTER>. Eticheta <CENTER> este o etichetă container, prezența etichetei de închidere fiind obligatorie.

Exemplul 5.8 realizează centrarea unui text.

Exemplul 5. 8

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Centrarea textului </H1><HR>

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>

Aspectul paginii descrise în exemplul de mai sus este cel din Figura 5.9.

6. Afișarea textului pe o singură linie

În cazul când se dorește afișarea unui text pe o singură linie, chiar dacă acest lucru înseamnă depășirea 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 având aspectul din Figura 5.10.

Exemplul 5. 9

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Textul pe o singura linie </H1><HR>

<NOBR>

Acesta este un text care va fi afisat pe o singura linie, chiar daca depaseste dimensiunile unei ferestre obisnuite. Puteti verifica acest fapt prin reducerea dimensiunilor ferestrei browserului.

</NOBR>

</BODY>

</HTML>

7. Blocul <DIV>

O altă modalitate de delimitare și de formatare a unui bloc de text este folosirea etichetei container <DIV> </DIV>. Prezența etichetei de închidere este obligatorie.

Eticheta <DIV> realizează divizarea unui document HTML în secțiuni distincte, diviziune în care pot fi incluse, pe lângă text, și alte elemente: legături, 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 stânga

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 rândurilor de către browser.

În documentul descris în Exemplul 5.10 este ilustrată utilizarea acestei etichete. Pagina va avea aspectul redat în Figura 5.11.

Exemplul 5. 10

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Blocul div</H1><HR>

Aceasta linie este o linie de text normala.

Aceasta este prima sectiune a textului, aliniata dreapta.<BR>

</DIV>

Aceasta este a doua sectiune a textului, aliniata central.<BR>

</DIV>

Aceasta este a treia sectiune a textului, aliniata stanga.<BR>

</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 îmbunătăți 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ă următoarele 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 lățimea ecranului.

size – specifică grosimea liniei, exprimată în pixeli

color – permite definirea culorii liniei

Atributele etichetei <HR> sunt ilustrate în Exemplul 5.11.

Exemplul 5. 11

<HTML>

<HEAD>

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

Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12 pixeli , de culoare rosie.

</BODY>

</HTML>

Din Figura 5.12 care redă aspectul paginii descrise în exemplul anterior se poate observa că simpla prezență a etichetei <HR> fără nici un fel de atribute duce la afișarea 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 următor (Exemplul 5.12) vom ilustra modul în care eticheta <DIV> aliniază elementele conținute în interiorul său, în cazul nostru text și linii orizontale. Pagina descrisă în acest exemplu va avea aspectul din Figura 5.13.

Exemplul 5. 12

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Linii orizontale</H1><HR>

Linia de mai jos este aliniata la stanga

Liniile de mai jos sunt aliniate la centru cu ajutorul blocului DIV

Linii aliniate la centru

</DIV>

</BODY>

<HTML>

9. Inserarea unei adrese poștale

Dacă într-o pagină Web trebuie inclusă o adresă poștală, atunci putem folosi eticheta următoare: <ADDRESS> </ADDRESS>.

Eticheta <ADDRESS> este o etichetă logică și are drept efect, în cele mai multe browsere, afișarea textului cu caractere italice.

În Exemplul 5.13 este inserată în pagină o adresă, aspectul paginii fiind cel din Figura 5.14.

Exemplul 5. 13

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center"> Adresa </H1><HR>

Adresa firmei noastre este

GoldenWeb Consult <BR>

Str. Paradisului, Nr. 1<BR>

Bucuresti

</ADDRESS>

</BODY>

</HTML>

10. Inserarea unui citat

Pentru a insera un citat într-un text se pot folosi două etichete, în funcție de dimensiunea citatului.

Astfel, dacă citatul depășește câteva linii, se folosește eticheta <BLOCKQUOTE> </BLOCKQUOTE>.

Efectul acestei etichete este afișarea indentată a textului cuprins între eticheta de început și cea de sfârșit (în majoritatea browserelor) sau afișarea acestuia cu caractere italice (rareori).

Dacă dorim ca într-un text să citam un termen, titlul unei lucrări sau să dăm o referință, putem include textul respectiv între etichetele <CITE> </CITE>.

În cele mai multe dintre browsere, textul inclus între etichetele <CITE> va fi afișat cu caractere italice.

Exemplul 5.14 ilustrează modul de folosire al celor două etichete. Pagina descrisă în exemplu are aspectul din Figura 5.15.

Exemplul 5. 14

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Inserarea unui citat</H1><HR>

Textul de mai jos este un citat

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

Deși este impropriu să numim caracterul "blank" sau space un caracter special, având în vedere frecvența cu care este folosit, totuși acesta, ca și alte caractere, este inserat în pagină cu ajutorul unei comenzi speciale: comanda & (comanda ampersand).

Așa cum știți deja, indiferent câte spații vom introduce atunci când edităm documentul HTML, browserul le va ignora și va afișa cuvintele cu un singur spațiu între ele. Pentru a forța introducerea spațiilor suplimentare se folosește comanda   (no break space).

Atenție

Comanda începe cu simbolul & (ampersand) și se termină cu ; (punct și virgulă).

În Exemplul 5.15 este ilustrat modul cum pot fi spațiate cuvintele folosind comanda  

Exemplul 5. 15

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 align="center">Inserarea caracterelor speciale</H1><HR>

Cuvintele      din      acest      text      sunt      despartite      de      grupuri      de      trei      spatii.

</FONT>

</BODY>

</HTML>

După cum observați din Figura 5.16 cuvintele sunt despărțite prin trei spații în loc de unul singur. Puteți adăuga oricâte spații doriți în acest mod. De asemenea, pentru a indenta un text, puteți insera la începutul fiecărei linii numărul de comenzi   egal cu numărul de spații cu care vreți să indentați textul.

Iată mai jos un tabel cu comenzile necesare pentru a insera în text cele mai cunoscute caractere.

Tabelul 5. 1

12. Sugestii privind aspectul textului

Aspectul textului într-o pagină Web este esențial pentru calitatea acesteia. Un text lizibil, scris cu caractere de dimensiune potrivită, bine organizat și așezat în pagină va face din pagina dumneavoastră un mediu accesibil și prietenos care îl va stimula pe vizitatorul acesteia să parcurgă cu plăcere informațiile oferite.

Iată câteva sfaturi referitoare la aspectul paginilor Web, menite să vă ajute la crearea unor texte lizibile, cât mai ușor de parcurs de către cititori.

Nu folosiți fonturi de dimensiuni prea mici sau fonturi cu serife, cum este Times New Roman. Deși este tipul cel mai utilizat pentru publicațiile tipărite, textele scrise cu Times New Roman sunt mai greu de citit de pe monitor. Preferați tipurile Arial, Verdana, Helvetica.

Nu folosiți numai litere mari (majuscule). Textele scrise cu majuscule sunt mai greu de citit.

Nu faceți exces de caractere aldine (îngroșate, bold). Limitați-vă la a accentua cuvinte sau porțiuni reduse din text. De asemenea, nu folosiți caractere cursive (înclinate, sau italice) în exces.

Nu folosiți prea multe tipuri de fonturi și nici tipuri de fonturi rare. Folosirea unui mare număr de fonturi de dimensiuni și culori diferite va face ca paginile să arate încărcate ș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 afișat de browser cu fonturile prestabilite.

Nu aranjați textul în pagină pe două coloane. Aceasta este o practică obișnuită în ziare și reviste dar nu este potrivită într-o pagină Web deoarece forțează vizitatorul ca odată ajuns la baza paginii să o deruleze din nou pentru a citi ce-a de-a două coloană.

Este bine să folosiți fiecare etichetă în scopul pentru care a fost ea definită. Nu folosiți etichetele de titlu pentru a accentua anumite părți ale textului care nu sunt titluri. Nu folosiți eticheta <ADDRESS> pentru a insera alte texte decât adrese sau eticheta <CITE> pentru a realiza scrierea cu caractere italice a textului.

Motoarele de căutare indexează paginile Web și în funcție de elementele (etichetele) care sunt incluse în ele iar folosirea lor neadecvată conduce la o indexare eronată a paginii dumneavoastră.

Multe motoare de căutare scanează pagina în căutarea titlurilor și pe baza lor construiesc o schiță a paginii.

Dacă veți folosi etichetele de titlu pentru a accentua anumite părți ale textului (operație pe care o puteți realiza în mod corect folosind eticheta <FONT>) veți oferi informații eronate motoarelor de căutare. În acest fel, scad șansele ca paginile dumneavoastră să fie identificate și citite de cei interesați.

Atenție!

Nu uitați că paginile vor fi publicate pe Web, unde, pentru a-și atinge scopul, adică pentru a fi citite, trebuie mai întâi descoperite de cititori, cel mai frecvent prin intermediul motoarelor de căutare.

13. Rezumat

Browserul afișează textele cu câte un singur spațiu între cuvinte și nu recunoaște sfârșitul 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 rând nou: eticheta <BR>

<BR clear="left, right, all">text

introducerea unui titlu: etichetele <H1> – <H6>

introducerea unui paragraf: eticheta <P> </P>

preformatarea textului: eticheta <PRE> </PRE>

centrarea textului: eticheta <CENTER> </CENTER>

afișarea textului pe o singură line: eticheta <NOBR> </NOBR>

crearea unui diviziuni în text: eticheta <DIV> </DIV>

inserarea unei linii orizontale: eticheta <HR>

inserarea unei adrese: eticheta <ADDRESS> </ADDRESS>

inserarea unui citat: etichetele <BLOCKQUOTE> </BLOCKQUOTE> și <CITE> </CITE>

inserarea caracterelor speciale prin comanda &;

14. Test

Care este rolul etichetei <BR>?

Trecerea la un rând nou

Inserarea unei linii libere în text

Inserarea unei linii orizontale

Pentru ca browserul să afișeze textul așa cum a fost el formatat în documentul HTML se folosește eticheta:

<P>

<PRE>

<DIV>

Ce se va afișa în următorul exemplu?

<P>Text1

<P align="right">Text2

Text1 și Text2 vor fi aliniate la dreapta, cu o linie liberă între ele

Text1 va fi aliniat la stânga, Text2 va fi aliniat la dreapta, cu o linie liberă între ele

Text1 și Text2 vor fi scrise pe aceeași linie

Pentru a scrie un titlu de dimensiune maximă folosim eticheta:

<H1>

<H6>

<H7>

Pentru a afișa un text pe o singura linie:

folosim eticheta <BR>

folosim eticheta <NOBR>

nu folosim nici o etichetă

Care dintre următoarele etichete nu realizează centrarea textului?

Ce realizează eticheta <ADDRESS>?

inserarea unui link

inserarea unei adrese de e-mail

inserarea unei adrese poștale

Pentru a insera într-o pagină o linie orizontală standard folosim eticheta:

<HR>

Eticheta <BLOCKQUOTE> folosește la:

indentarea textului

scrierea textului cu caractere italice

inserarea unui citat în text

Care dintre aceste afirmații este falsă?

Toate spațiile și liniile libere introduse în text la editarea documentului HTML sunt afișate întocmai de browser.

Un text scris pe aceeași linie cu o etichetă de titlu este afișat sub titlu, chiar dacă nu este prezentă eticheta <BR>.

Pentru a introduce spații suplimentare în text se folosește comanda  

Formatarea textului

1. a)

2. b)

3. b)

4. a)

5. b)

6. c)

7. c)

8. a)

9. c)

10. a)

Capitolul 6

Legături (link-uri)

Legăturile (link-urile) reprezintă, poate, partea cea mai importantă a unei pagini Web. Ele transformă un text obișnuit în hypertext – un nou tip de text, diferit de cel din clasicele pagini de carte, care permite trecerea rapidă de la o informație aflată pe un anumit computer la altă informație memorată pe un alt computer localizat oriunde în lume.

1. Adresa URL

Pentru a stabili o legătură cu o altă pagină (un alt fișier) trebuie să specificăm adresa URL a acestuia. URL este un acronim, de la Uniform Resource Locator, și reprezintă adresa de identificare a unei resurse (a unui fișier) 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 informații 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 legături, imagini sau formulare. Toate acestea folosesc aceeași sintaxă a adresei URL pentru a specifica locația unei anumite resurse, indiferent de tipul acesteia.

Sintaxa generală a unei adrese URL este:

schema://server_gazda:port/calea_catre_fisier

unde:

schema – reprezintă unul dintre protocoalele de transfer al informațiilor, cum ar fi HTTP, FTP, Gopher, Telnet, etc.

server_gazda – reprezintă identificatorul serverului pe care este găzduit fișierul respectiv. Acest identificator poate fi adresa IP a serverului sau numele său.

port – reprezintă numărul portului de comunicație prin intermediul căruia browserul se conectează la server. Serverele dețin mai multe astfel de porturi, fiecare servind unui alt tip de comunicație: HTTP, FTP, poștă electronică, etc. Portul prestabilit în cazul transferului prin HTTP are numărul 80. Numărul portului trebuie precizat numai în cazul când acesta este diferit de 80.

calea_catre_fisier – reprezintă localizarea ierarhică a fișierului în sistemul de directoare de pe server. Aceasta constă într-unul sau mai multe nume despărțite prin caracterul "/" (slash)

Iată câteva exemple de adrese URL împreună cu explicații 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 rădăcină al serverului www.autor.com

http://www.autor.com/

Această adresă indică prima pagină (home page) a aceluiași server.

http://www.autor.com:8080/

Exemplul de mai sus indică de asemenea spre prima pagină a serverului www.autor.com, dar specificând și numărul 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 același server, dar specificându-se o anumită secțiune a acestui document, secțiune denumită webdesign.

În cazul când fișierul spre care este făcută legătura este stocat pe propriul calculator se folosește o adresă URL de forma următoare:

file://server/calea_catre_fisier

unde:

server – reprezintă numele computerului pe care este stocat fișierul (același pe care rulează browserul). În acest caz, browserul va accesa fișierul folosind facilitățile obișnuite ale sistemului de operare de pe computerul propriu.

calea_catre_fisier – reprezintă localizarea fișierului î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 următoarea formă:

file://localhost/calea_catre_fisier

De exemplu fișierul culori.html care este salvat în folderul de lucru Work din My Documents pe computerul personal va avea următoarea 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ă prezența unui caracter "/" suplimentar:

file:///C:\My Documents\Work\culori.html

În practică, atunci când dorim să adresăm un fișier aflat pe computerul propriu putem omite prima parte a adresei URL obținând următoarea formă:

C:\My Documents\Work\culori.html

Atenție!

Se poate observa că în cazul resurselor stocate pe servere externe, numele directoarelor care fac parte din calea către resursă sunt despărțite prin caracterul "/" (slash).

La fișierele stocate pe computerul propriu, directoarele și subdirectoarele care formează calea către fișier sunt despărțite 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 către resursele stocate pe ele se scrie respectând convențiile acestui sistem. Mai mult, această convenție s-a extins și la adresele URL referite de pe sisteme Windows. Astfel, dacă doriți să adresați un fișier numit foto.jpg aflat pe discul C:, în My Documents, folderul Imagini puteți folosi adresa URL:

C:/My Documents/Imagini/foto.jpg

2. Adrese absolute și adrese relative

Pentru a putea localiza un fișier în structura ierarhică de directoare, în scopul de a stabili o legătură către el, se poate folosi adresarea absolută sau adresarea relativă.

Adresa absolută a unui fișier conține calea precisă și completă către fișierul respectiv pornind de la vârful ierarhiei de directoare:

C:/Manual HTML/Exemple/culori.html

Fișierul culori.html se află plasat pe discul C:, în directorul Manual HTML, subdirectorul Exemple.

Adresa relativă a unui fișier precizează poziția acestuia în raport cu documentul HTML din care este apelat. Vom reveni ceva mai jos asupra acestui subiect.

3. Stabilirea legăturilor

Pentru a insera legături într-un document HTML folosim eticheta <A> </A>.

Eticheta <A> este o etichetă container, prezența etichetei de închidere fiind obligatorie.

Atributul obligatoriu al etichetei <A> este href (Hypertext Reference) care primește ca valoare adresa URL a fișierului cu care dorim să stabilim legătura. Acest fișier poate fi un document HTML, o imagine sau un fișier de alt tip. Documentul HTML în care este prezentă legătura se numește sursă iar fișierul către care este făcută legătura se numește țintă. Sintaxa etichetei <A> este următoarea:

<A href="adresa_URL">text sau imagine</A>

Între etichetele <A> și </A> poate fi plasat un text obișnuit sau o imagine. În mod prestabilit textul inclus între etichetele <A> este afișat 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 plasând eticheta <A> în interiorul acestora.

În acest sens, standardul HTML consideră incorectă o construcție ca aceasta:

<A href="adresa_URL"><FONT face="tip">Legatura</FONT></A>

În locul ei vom folosi construcția:

<FONT face="tip"><A href="adresa_URL">Legatura</A></FONT>

Atenție!

Nu este permisă imbricarea mai multor etichete <A>.

În funcție de localizarea țintei (a resursei referite de legătură) putem clasifica legăturile astfel:

legături în cadrul aceleiași pagini (ancore)

legături către o pagină aflată în același folder

legături către o pagină aflată în alt folder

legături către pagini externe

4. Ancore – legături în cadrul aceleiași pagini

Pentru a facilita navigarea într-o pagină care conține un text de mari dimensiuni se pot insera în acesta anumite puncte de reper către care se definesc legături. Acestea se numesc ancore.

Pentru a plasa o ancoră sunt necesare două elemente:

Punctul spre care dorim să facem legătura.

Acesta se definește inserând în punctul din pagină dorit (de obicei în dreptul unui anumit element din pagină: un titlu, o imagine, o altă legătură, un tabel, etc.) eticheta <A>, însoțită de atributul name care primește ca valoare un nume de identificare atribuit ancorei (de exemplu "nume_ancora" ). Prin urmare, identificarea punctului spre care se face legătura se realizează astfel:

Legătura propriu-zisă, care se definește folosind atributul href al etichetei <A>. În exemplul de mai sus, acesta primește ca valoare "#nume_ancora". Stabilirea legăturii se realizează după următoarea sintaxă:

<A href="#nume_ancora">text explicativ</A>

Textul explicativ va fi afișat în mod diferit, în format hyperlink, subliniat și de culoare prestabilită albastră.

În momentul când se efectuează click cu mouse-ul pe text explicativ se realizează un salt în cadrul paginii, browserul afișând partea din pagină care începe de la elementul în dreptul căruia a fost inserată ancora.

Atenție!

Prezența semnului #, plasat înaintea numelui ancorei, este obligatorie. Acesta indică browserului faptul că este vorba despre o legătură internă, în cadrul paginii. În cazul în care semnul este omis, browserul va căuta acest nume în afara paginii, unde, evident, nu îl va găsi.

Pentru a introduce o legătură către o ancoră definită în alt document (altă pagină) aflat în același director, atributul href primește o valoare de forma:

href="nume_fisier.html#nume_ancora".

Exemplul 6.1 ilustrează cele două situații. 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>

<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

<H1 align="center" >Ancore definite in alt document</H1><HR><P>

Click

pentru a deschide un document situat in alta pagina

</BODY>

</HTML>

Aspectul paginii descrise în acest exemplu este cel din Figura 6.1.

Observație

Construcțiile de mai jos au același rol, și anume inserarea unei ancore denumită "ancora1" în punctul din pagină care conține 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. Totuși, în exemplul de mai sus, dorind să inserăm o ancoră în dreptul titlului, am folosit cea de-a doua construcție:

<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 construcția următoare:

<H1 align="center"><A name="ancora1">Ancore definite in acelasi document</A></H1>

5. Legătura către o pagină aflată în același director (folder)

Pentru a realiza o legătură către o pagină aflată în același director se procedează astfel:

<A href="nume_fisier.html">text explicativ</A>

unde:

href reprezintă atributul care stabilește calea către ținta cu care se face legătura. Dacă fișierul țintă este în același director, atributul primește ca valoare chiar numele fișierului.

text explicativ – reprezintă textul pe care se face click cu mouse-ul pentru a activa legătura. (De exemplu

"Click aici" ). Acest text este afișat diferit față de restul textului – în general, subliniat și de culoare albastră.

În Exemplul 6.2 este realizată o legătură reciprocă între două pagini aflate în folderul de lucru Work, pagina având aspectul din Figura 6.2.

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>

Salvați acest exemplu cu numele legaturi2.html iar exemplul următor (Exemplul 6.3) cu numele legaturi3.html.

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 ați procedat și până acum, deschideți una dintre cele două pagini cu browserul și testați funcționarea legăturii dintre ele.

Ambele documente HTML trebuie salvate în același folder. Veți observa că atunci când vă aflați în Pagina 1 și faceți click cu mouse-ul pe textul Link catre Pagina 2 se va deschide cel de-al doilea document HTML și invers, legătura dintre cele două pagini fiind astfel reciprocă.

Atenție!

Numele fișierelor care reprezintă valori ale atributului href sunt case sensitive. Același lucru se întâmplă și cu textul care desemnează valorile atributului name.

Aceasta înseamnă că fișierul legaturi5.html este diferit de fișierul Legaturi5.html, iar ancora <A name="ancora1"> este diferită de <A name="Ancora1">

Pentru a evita greșelile, este recomandat să vă denumiți toate fișierele sau numele pentru ancore cu litere mici.

6. Legătura către o pagină localizată în alt director (folder)

Dacă pagina cu care vrem să facem legătura se află pe același calculator, dar într-un alt folder, atunci pentru a preciza poziția ei în structura de directoare se poate folosi adresarea relativă sau adresarea absolută.

Adresarea absolută se realizează precizând calea (path) completă, pornind de la directorul rădăcină, prin care se poate ajunge la fișierul de care vrem să legăm pagina.

De exemplu, dacă fișierul culori1.html se află pe discul C:,în folderul My Documents, în folderul Work, o legătură către el se va face în modul următor:

Adresarea relativă precizează calea către documentul cu care facem legătura pornind de la documentul în care ne aflăm. Pentru a urca un nivel în structura de directoare se folosește șirul de caractere "../ "

Exemplu

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

Dorim să realizăm o legătură cu un fișier numit trandafir.gif din folderul Imagini.

În acest caz, eticheta <A>, plasată în documentul legaturi2.html, va avea următoarea formă:

<A href="../Imagini/trandafir.gif">Deschide imaginea</A>

Semnificația este următoarea:

Prin folosirea șirului de caractere "../" (punct punct slash) se urcă un nivel în ierarhia de directoare, în raport cu directorul curent. Prin urmare, întrucât folderul curent, în care se află pagina de pornire este

C:/My Documents/Work, prin utilizarea șirului de caractere "../" se ajunge în folderul părinte, care este C:/My Documents. De aici se continuă calea în folderul Imagini, după care se specifică numele fișierului din acest folder cu care vrem să stabilim legătura.

Exemplu

Să presupunem că ne aflăm în documentul legaturi2.html poziționat ca în Schema 6.2.

Dorim să stabilim o legătură cu un fișier numit text2.html care se află în directorul Exemple (directorul părinte al folderului nostru, Legaturi). Atunci referirea se va face astfel:

Am urcat un nivel în ierarhie ajungând în directorul Exemple și am specificat numele fișierului cu care dorim să facem legătura.

Dacă fișierul text2.html se află cu două nivele mai sus față de folderul în care lucrăm, adică dacă se află în folderul Manual HTML, atunci adresarea se face astfel:

În general, de câte ori este posibil, este de preferat să folosiți adresarea relativă, pentru ca documentele HTML să fie portabile (mutarea lor să nu invalideze legăturile stabilite între diverse documente).

7. Legătura către pagini externe

O legătură către o pagina externă se realizează simplu, prin utilizarea etichetei <A> </A>, specificând 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ă funcționeze, trebuie ca utilizatorul să fie conectat la Internet (lucru valabil pentru toate legăturile externe).

În Exemplul 6.4 este stabilită o legătură către 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ă apariția unei mici ferestre (tool tip) în pagina Web când mouse-ul se afla pe o legătură, fereastră în care este afișată valoarea dată acestui atribut, care are astfel menirea de a furniza informații suplimentare despre semnificația unei legături.

Exemplul 6.5 ilustrează utilitatea atributului title, așa 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>

8. Alegerea culorilor pentru legături

Am mai discutat despre acest subiect și la capitolul despre culori. În mod prestabilit (default) se utilizează trei culori pentru legături:

culoare pentru legăturile nevizitate (nu s-a efectuat nici un click pe ele) – albastru

culoare pentru legăturile vizitate (s-a efectuat cel puțin un click pe ele) – violet

culoare pentru legăturile active (deasupra cărora se află mouse-ul la un moment dat, dar încă nu s-a efectuat click) – roșu

Pentru a modifica după preferințe aceste culori se folosesc cele trei atribute ale etichetei <BODY>:

link pentru legăturile nevizitate;

vlink pentru legăturile vizitate;

alink pentru legăturile 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 legăturilor, așa cum se poate observa din Figura 6.5 care redă aspectul paginii descrise în exemplu.

Exemplul 6. 6

<HTML>

<HEAD>

<TITLE>legaturi6</TITLE>

</HEAD>

<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 poștei electronice (e-mail)

Într-o pagină Web se pot afla legături care permit lansarea în execuție a aplicației de expediere a mesajelor electronice a celui care vizitează pagina. Făcând click pe textul care însoțește legătura, programul de poșta electronică al vizitatorului paginii se va deschide automat, având câmpul adresei destinatarului, "To:" deja completat cu adresa de mail specificată în pagină. Pentru a realiza acest lucru se folosește comanda mailto: atributul href primind o valoare ca mai jos:

Dacă pagina este vizualizată cu browserul Internet Explorer iar vizitatorul are instalat un e-mail manager, cum sunt de pildă aplicațiile Microsoft Outlook sau Outlook Expres, activarea legăturii va determina deschiderea unuia dintre aceste programe. În cazul în care managerul de e-mail default este de alt tip decât aplicația 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 poștă electronică încorporat în browser.

În exemplul următor (Exemplul 6.7), în momentul când vizitatorul paginii face click pe textul "Trimiteți un mesaj", aplicația de poștă electronică este lansată automat, prin intermediul serviciului mailto:, iar câmpul care trebuie completat cu adresa de mail a destinatarului mesajului este de asemenea completat automat cu adresa [anonimizat] așa cum rezultă din

Figura 6.6.

Exemplul 6. 7

<HTML>

<HEAD>

<TITLE>legaturi7</TITLE>

</HEAD>

<BODY>

<H1 align="center">Expediere de mesaje electronice

</H1><HR>

Trimiteti un mesaj </A>

</BODY>

</HTML>

10. Legături către fișiere oarecare

O pagină Web poate conține legături nu doar către alte fișiere HTML, dar și către fișiere de orice alt tip, aflate pe calculatorul propriu sau oriunde pe Web. Ca și în cazul legăturilor cu alte pagini (documente HTML) vom folosi eticheta <A> </A>, astfel:

<A href="URL_fisier_destinatie">text explicativ<A>

Nefiind vorba despre un fișier HTML, browserul nu va putea să îl proceseze, astfel că va activa procesul de transfer sau de descărcare (download), urmând ca, după transferul integral al fișierului, utilizatorul să îl deschidă cu un program adecvat.

În Exemplul 6.8, atunci când se efectuează click pe legătură se deschide caseta de dialog File download care permite:

salvarea fișierului pe disc sau

deschiderea fișierului în locația curentă

Exemplul 6. 8

<HTML>

<HEAD>

<TITLE>legaturi8</TITLE>

</HEAD>

<BODY>

<H1 align="center">Legaturi catre fisiere oarecare</H1><HR>

Link catre fisierul download.zip

</A>

</BODY>

</HTML>

Figura 6.7 redă efectul activării unei legături către un fișier oarecare.

11. Deschiderea paginilor referite printr-o legătură

Pagina nouă, apelată prin activarea unei legături se poate deschide în două moduri, în raport cu pagina sursă:

în aceeași fereastră

într-o fereastră nouă

În mod prestabilit, legăturile deschid pagina pe care o referă în fereastra curentă. Aceasta înseamnă că dacă veți face click pe un link, noua pagină se va încărca în locul paginii deja deschise (în aceeași instanță a browserului). Pentru a reveni la pagina anterioară trebuie să apăsați butonul Back al browserului.

Acest comportament se poate schimba cu ajutorul valorilor atributului target, asupra căruia vom reveni la capitolul Cadre.

Vom menționa aici doar două dintre aceste valori, corespunzătoare celor două situații 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 aceeași 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ă, așa 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

<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 ați observat, probabil, existența, în partea de jos a paginii, a unui bloc de text care conține legături către paginile care compun site-ul, legăturile fiind delimitate de mici linii verticale, ca în exemplul de mai jos:

Utilitatea acestei bare este evident legată de facilitarea navigării în site, mai ales în cazurile când dimensiunea paginii depășește 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 procedând ca în Exemplul 6.10. Evident, legăturile vor face referire la fișierele HTML dorite de dumneavoastră. O pagină care conține o astfel de bară de navigare va avea aspectul din Figura 6.9.

Exemplul 6. 10

<HTML>

<HEAD>

<TITLE>legaturi10</TITLE>

</HEAD>

<BODY>

<H1 align="center">Bara de navigare</H1><HR>

<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 aceeași tastă cu caracterul "\" (backslash). Dacă doriți ca bara să facă parte din textul activ, o veți insera între etichetele <A> și </A>, altminteri ea trebuie plasată în afara acestora, astfel:

|<A href="culori1.html">Culori</A>|

13. Rezumat

Adresa URL constă dintr-un șir de caractere care identifică în mod unic o anumită resursă oferind informații despre numele serverului pe care este stocată acea resursă și despre localizarea ei în structura de directoare de pe server.

Legăturile se introduc într-un document HTML prin intermediul etichetei container <A> </A> conform următoarei sintaxe generale:

<A href="adresa_URL" name="nume" title="text" target="tinta">text sau imagine</A>

În funcție de locul unde este plasat documentul referit există mai multe tipuri de legături:

Legături în cadrul aceleiași pagini (legături interne, ancore). Pentru a crea o legătură internă sunt necesari doi pași: definirea numelui ancorei și stabilirea legăturii .

Legături cu pagini aflate în același director. Pentru a stabili o legătură cu o pagină aflată în același director se specifică drept valoare a atributului href chiar numele fișierului HTML.

Legături cu pagini aflate în alt director. Pentru a stabili locația documentului cu care facem legătura se poate folosi adresarea relativă (recomandat) sau adresarea absolută.

Legăturile externe. În cazul legăturilor externe, atributul href primește ca valoare adresa URL a paginii respective.

Se pot stabili și legături către fișiere oarecare (nu neapărat documente HTML). La activarea unei astfel de legături se deschide fereastra de download a sistemului.

Cu ajutorul comenzii mailto: se lansează automat în execuție aplicația de poștă electronică a vizitatorului paginii.

14. Test

Care dintre următoarele afirmații este falsă:

Eticheta <A> servește la stabilirea unei legături în cadrul aceleiași pagini

Eticheta <A> servește la stabilirea unei legături către un fișier aflat pe același calculator

Eticheta <A> servește la scrierea textului cu caractere Arial.

Pentru a preciza numele fișierului spre care se face legătura se folosește atributul:

name

href

file

Care este greșeala din următoarea construcție?

<H2><A name="#gr">Greseala</A><H2>

Nu este nici o greșeala.

Ar fi trebuit formulat:

<H2><A name="gr">Greseala</A></H2>

Ar fi trebuit formulat:

<A name="#gr"></A><H2>Greseala</H2>

Ce realizează exemplul următor?

<A name="sectiunea1">Sectiunea 1</A>

Inserează o ancoră în pagină și definește numele ei.

Stabilește o legătură în cadrul paginii.

Stabilește o legătura la fișierul sectiunea1.html.

Fișierul contact.html, referit în legătura de mai jos:

<A href="../contact.html">Contact</A>

este localizat în:

același director ca și fișierul curent

directorul părinte al fișierului curent

directorul aflat cu două nivele mai sus decât directorul curent

În documentul culori.html am inclus următoarea ancoră:

În acest caz, construcția corectă pentru a face legătura spre ea din cadrul unui alt document aflat în același director este:

<A href="#fundal">Background</A>

<A href="culori.html_fundal">Background</A>

<A href="culori.html#fundal>Background</A>

Care este aspectul unei legături într-un text, în mod prestabilit (default)?

de culoare albastră și subliniată

de culoare roșie

subliniată

Care dintre următoarele afirmații este falsă?

Nu este permisă imbricarea mai multor etichete <A>.

Nu este permisă schimbarea culorilor legăturilor.

Nu este permisă referința la alte fișiere decât fișierele HTML.

Pentru a stabili o legătura cu site-ul extern www.books.com folosim construcția:

Fie următoarea etichetă inserată în pagină:

Dacă se execută click pe textul "Send mail":

Se deschide pagina www.domeniu.com.

Se deschide programul de mail al vizitatorului paginii.

Se deschide căsuța de mail cu adresa specificată.

Legături

1. c)

2. b)

3. b)

4. a)

5. b)

6. c)

7. a)

8. b)

9. a)

10. b)

Capitolul 7

Imagini și elemente multimedia

Imaginile și elementele multimedia constituie, fără îndoială, o latură interesantă și spectaculoasă a oricărei pagini de Web. Puteți include în paginile dumneavoastră fotografii, imagini animate, sunete sau imagini video. Atunci când sunt folosite în mod judicios, aceste elemente pot îmbogăți conținutul paginilor Web, oferindu-le un aspect atractiv și profesional. Pe de altă parte, folosirea lor în exces poate da paginilor un aspect încărcat și confuz și poate conduce la mărirea considerabilă a timpului de încărcare al paginii.

1. Formatele fișierelor grafice

Imaginile sunt stocate în fișiere cu diverse formate, cele mai folosite pe Web fiind, așa cum era firesc, cele care conferă un raport optim între calitatea imaginii și dimensiunile fișierului.

Această opțiune este determinată de faptul că majoritatea utilizatorilor Internetului dispun de conexiuni telefonice dial-up, cu viteze destul de mici, astfel că timpul de încărcare al fișierelor, care depinde de dimensiunea acestora, devine un factor determinant.

Două dintre cele mai utilizate tipuri de fișiere grafice sunt JPEG (Joint Photographic Experts Group) și GIF (Graphics Interchange Format).

Formatul GIF

Formatul GIF (.gif) folosește 256 de culori și este ideal pentru icon-uri, ilustrații și animație. Acest format utilizează o tehnologie specială de comprimare care reduce semnificativ dimensiunile fișierelor grafice pentru un transfer mai rapid prin rețea. În procesul de comprimare se păstrează toate caracteristicile imaginii originale, astfel că după decomprimare imaginea are același aspect ca și originalul.

Imaginile GIF suportă efecte de transparență, întrețesere și animație, asupra cărora vom reveni pe larg în capitolul Elemente avansate de grafică.

Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat în paginile Web. Poate fi folosit pentru a include imagini direct în pagini (imagini in-line) precum și pentru a referi imaginile prin intermediul unor legături externe.

Totuși, datorită numărului 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 număr mult mai mare de culori (aproximativ 16 milioane). Dacă doriți să folosiți imagini fotografice, formatul JPEG este recomandat, datorită calității superioare a imaginii. Dimensiunile unui fișier JPEG nu depind de numărul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat decât cel al formatului GIF. Nu este neobișnuit, de exemplu, ca un fișier GIF care are 200 de Kb să fie comprimat ca fișier JPEG până la dimensiunea de 30 de Kb.

Pentru a realiza un grad atât de înalt de comprimare a imaginilor, formatul JPEG pierde anumite informații din imaginea originală. Cu toate că la decomprimare imaginea JPEG nu va fi absolut identică cu imaginea originală, diferențele vor fi de cele mai multe ori inobservabile.

Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustrații, desene sau imagini de dimensiuni reduse. Algoritmii folosiți pentru comprimarea și decomprimarea imaginii alterează în mod notabil zonele de mari dimensiuni colorate cu o singură nuanță. Din acest motiv, atunci când doriți să includeți în pagină un desen sau o ilustrație care folosește un număr redus de culori, formatul GIF este cel mai potrivit.

2. Câteva metode de obținere a imaginilor

Aveți la îndemână diverse moduri în care puteți crea sau procura imagini pe care să le includeți în paginile dumneavoastră:

Crearea imaginilor cu ajutorul unui program de grafică – cele mai performante sunt Adobe Photoshop și CorelDraw.

Scanarea fotografiilor realizate cu aparate foto tradiționale și, eventual, prelucrarea lor ulterioară cu editoare grafice.

Folosirea aparatelor de fotografiat digitale – deși sunt niște echipamente încă destul de costisitoare prezintă marele avantaj că furnizează imagini digitale sub formă de fișiere grafice în formate comune, care se pot descărca direct pe hard-disk, și care se pot utiliza ca atare sau după o prelucrare grafică minimă.

Preluarea imaginilor de pe Web. Numărul site-urilor care oferă colecții de imagini gratuite și care pot fi utilizate liber este imens. Totuși, atunci când doriți să folosiți în pagina dumneavoastră o imagine care nu face parte dintr-o astfel de colecție, trebuie să aveți în vedere aspectul drepturilor de autor. Pentru a prelua o imagine de pe Web trebuie să o salvați pe hard-disk-ul dumneavoastră. Puteți realiza acest lucru astfel:

plasați cursorul pe imaginea respectivă și apăsați butonul drept al mouse-ului

selectați din meniul care se deschide Save Image As…

în fereastra de dialog selectați folderul de destinație și numele fișierului

apăsați butonul Save

Este util să vă creați unul sau mai multe foldere dedicate imaginilor, organizate pe tipuri (icon, fundaluri, butoane, imagini propriu-zise, etc.), uneori alcătuind adevărate biblioteci, în care să păstrați toate imaginile pe care intenționați să le folosiți în paginile dumneavoastră. De asemenea, de mare utilitate sunt aplicațiile de gestionare a imaginilor, cum este de exemplu cunoscutul ACDSee.

Atenție!

Dacă imaginea nu este salvată în același folder în care se află documentul HTML sursă care folosește imaginea respectivă, referința la imagine trebuie să conțină calea corectă către locația ei, altminteri imaginea nu va fi afișată î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ă corespunzătoare 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 locația imaginii care urmează să fie inserată. Valoarea acestui atribut este adresa URL a imaginii respective.

Dacă imaginea se află în același director cu fișierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fișierului, inclusiv extensia.

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 aflându-se în același folder ca și pagina sursă, iar cealaltă în folderul Imagini. Figura 7.1 redă aspectul paginii descrise în exemplu.

Exemplul 7. 1

<HTML>

<HEAD>

<TITLE>imagini1</TITLE>

</HEAD>

<BODY>

<H1 align="center">Imagini in pagina</H1><HR>

Imagine aflata in acelasi folder<P>

Imagine aflata in folderul Imagini<P>

</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 numărul de pixeli care reprezintă grosimea chenarului din jurul imaginii. Absența 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 afișarea unui text explicativ în spațiul în care va fi afișată 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>

</BODY>

</HTML>

După cum puteți observa din Figura 7.2 imaginea pe care am inclus-o în document nu este afișată. Motivul este că am omis intenționat extensia .gif a fișierului 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 afișat textul specificat ca valoare a atributului alt.

De asemenea, textul specificat ca valoare pentru atributul alt va fi afișat și în cadrul unei mici ferestre care se deschide în momentul când cursorul mouse-ului este menținut deasupra imaginii.

Figura 7.3 redă aspectul paginii în cazul când atributul src are valoarea corectă: "orangerose.gif".

Un alt motiv pentru care este indicată folosirea atributului alt este acela că vizitatorul paginii are posibilitatea de a vedea încă înainte de încărcarea completă a imaginii ce anume se va afișa în zona respectivă. Astfel, el are posibilitatea de a aștepta încărcarea completă a imaginii sau de a trece la altă pagină.

4. Dimensionarea imaginii

Dimensionarea imaginii se realizează cu ajutorul atributelor width – prin care se stabilește lățimea imaginii și height – prin care se stabilește înălțimea 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. Totuși, în afara unor cazuri speciale, aceasta este considerată o practică greșită, 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>

</BODY>

</HTML>

Observând 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: lățime=200 pixeli, înălțime=125 pixeli.

Dacă dimensiunile imaginii în pagină sunt setate la valori considerabil mai mari decât 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 cât mai apropiate de dimensiunile inițiale ale imaginilor.

Vă puteți întreba atunci, de ce mai este necesară includerea atributelor de dimensionare a imaginii. Nu numai că este necesară, dar este considerată o practică defectuoasă absența lor din cadrul etichetei <IMG>.

Motivul este acela că includerea dimensiunilor imaginii oferă browserului posibilitatea de a rezerva spațiu pentru imagine și de a începe încărcarea textului simultan cu încărcarea imaginii. Dacă atributele de dimensionare nu sunt prezente, browserul va efectua niște pași suplimentari pentru a calcula spațiul din pagină necesar afișării imaginii. Din acest motiv afișarea textului nu va putea începe decât după ce imaginea este încărcată în întregime.

Este indicat să evitam o asemenea situație deoarece imaginile se încarcă mai greu decât textul și mulți vizitatori ai paginii nu vor aștepta suficient pentru ca întreaga pagină (imagini și text) să fie încărcată.

5. Alinierea imaginii și a textului

Alinierea unei imagini în raport cu textul din pagină se realizează prin intermediul atributului align, care poate lua următoarele valori:

left – aliniere la stânga; textul este dispus în partea dreaptă a imaginii încadrând imaginea

right – aliniere la dreapta; textul este dispus în partea stânga a imaginii încadrând 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 ilustrează modul de aliniere bottom, așa cum rezultă din Figura 7.5.

Exemplul 7. 4

<HTML>

<HEAD>

<TITLE>imagini4</TITLE>

</HEAD>

<BODY>

<H1 align="center">Alinierea imaginii si textului (bottom)</H1><HR>

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>

Figura 7.6 redă modul de aliniere left iar Figura 7.7 modul de aliniere right.

Din Figura 7.8 și Figura 7.9 puteți observa modurile de aliniere top și middle precum și faptul că aceste alinieri nu permit dispunerea textului în jurul imaginii.

Alte două atribute utile, care servesc la alinierea imaginii față de restul elementelor din pagină, sunt atributele hspace și vspace. Ele precizează distanța, î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 adăuga atributele hspace, respectiv vspace, astfel:

Aspectul paginii va fi cel din Figura 7.10.

Ați observat, probabil, că dintre valorile pe care le poate lua atributul align lipsește valoarea center. Într-adevăr, 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> având atributul align setat la valoarea center.

Exemplul 7.5 ilustrează acest mod de aliniere folosind eticheta <DIV> aspectul paginii fiind cel din Figura 7.11.

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>

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

Din Figura 7.12 puteți observa că, dacă alinierea la stânga a imaginii împreună cu folosirea atributelor hspace și vspace conduce la un aspect ordonat al elementelor, aspectul textului în raport cu imaginea aliniată la dreapta depinde de dimensiunea ferestrei browserului.

Exemplul 7. 6

<HTML>

<HEAD>

<TITLE>imagini6</TITLE>

</HEAD>

<BODY>

<H1 align="center">Alinierea a doua imagini</H1><HR>

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.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 folosește atributul background al etichetei <BODY>, având ca valoare adresa URL a imaginii. Imaginea se multiplică aliniat (tiling) pe orizontală și pe verticală până umple întregul ecran.

Exemplul 7.7 ilustrează utilizarea atributului background.

Exemplul 7. 7

<HTML>

<HEAD>

<TITLE>imagini7</TITLE>

</HEAD>

<H1 align="center">Imaginea ca fond al paginii</H1><HR>

Fond de matase…

</BODY>

</HTML>

Figura 7.13 redă aspectul unei pagini care folosește ca fundal o imagine.

7. Imagini folosite ca legături

Pentru a folosi o imagine drept legătura se procedează ca în următorul exemplu:

</A>

S-a folosit eticheta <A> prin intermediul căreia am creat legătura cu fișierul tabel_culori.html. Între etichetele <A> și </A> am inclus o imagine care înlocuiește textul explicativ pe care vizitatorul urmează să facă click cu mouse-ul. Imaginea servește, deci, ca legătură către o anumită pagină. Imaginea folosită ca legătura este prism.gif iar pagina spre care este făcută legătura este tabel_culori.html. În mod prestabilit imaginea utilizată pe post de zonă activă este înconjurată de un chenar având culoarea unei legături (albastru). Dacă stabilim pentru atributul border al etichetei valoarea "0" acest chenar dispare.

Exemplul 7.8 prezintă codul complet.

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>

</BODY>

</HTML>

În Figura 7.14 puteți observa modul în care funcționează imaginea folosită ca legătură în exemplul de mai sus.

8. Imaginile miniaturale (thumbnails)

Dacă într-o pagină Web este necesară afișarea unui număr mare de imagini, încărcarea paginii se va face destul de greu. De multe ori, vizitatorii paginii nu vor avea răbdarea necesară pentru a aștepta încărcarea integrală a paginii.

O soluție de compromis frecvent aplicată pentru scurtarea timpului de încărcare 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, deși este de dimensiuni mici și de calitate scăzută, permite vizitatorului să afle ce anume reprezintă și să decidă dacă este interesat sau nu să deschidă versiunea integrală..

Imaginea miniaturală reprezintă o legătură spre fișierul cu imaginea originală din care provine. În cazul în care vizitatorul paginii dorește să vadă imaginea originală, o poate deschide efectuând click imaginea thumbnail.

Realizarea imaginilor miniaturale se poate face fie prin micșorarea proporțională a imaginilor, fie prin reducerea lor la o dimensiune prestabilită (strech) chiar dacă imaginea se distorsionează, în cazul în care se dorește, de pildă, ca toate thumbnail-urile dintr-o pagină să aibă aceleași 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ă (micșorată) direct în pagină

Folosirea a două imagini

O imagine thumbnail este foarte ușor de realizat. Oricare ar fi programul de grafică pe care îl folosiți, tot ceea ce aveți de făcut este să găsiți opțiunea Resize (care de obicei face parte din meniul Edit sau Image) și să precizați în caseta de dialog care se deschide, dimensiunile dorite. Veți observa că există de regulă o opțiune setabilă pentru păstrarea proporționalității cu dimensiunile. Dacă este activată, după stabilirea uneia dintre dimensiuni (width, de exemplu), cealaltă (height) este calculată automat.

În Exemplul 7.9 este plasată o imagine thumbnail în pagină, folosind prima metodă, Figura 7.15 ilustrând funcționarea imaginii thumbnail.

Exemplul 7. 9

<HTML>

<HEAD>

<TITLE>imagini9</TITLE>

</HEAD>

<BODY>

<H1 align="center">Thumbnails – doua imagini</H1><HR>

<P>

</BODY>

<HTML>

Fișierul zdog_th.gif conține imaginea thumbnail care este folosită ca legătură, pentru a referi imaginea originală, zdog.gif. Deoarece imaginea thumbnail este folosită ca o legătura către imaginea originală, în jurul ei este afișat un chenar prestabilit albastru. Dacă doriți ca acest chenar să nu mai fie afișat, puteți folosi atributul border al etichetei <IMG> setat la valoarea "0". Imaginea originală se va deschide în aceeași fereastră cu pagina în care este plasată imaginea thumbnail. Pentru a reveni în pagină, trebuie să apăsați butonul Back al browserului.

Folosirea unei singure imagini

Această metodă este adesea preferată, deoarece folosește un singur fișier, cel care conține imaginea originală, miniaturizarea ei făcându-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 afișată este deja încărcată în memoria cache a browserului și este imediat disponibilă pentru afișare.

În exemplul următor (Exemplul 7.10) am folosit o singură imagine pentru a încărca atât imaginea thumbnail cât și pe cea cu dimensiunile originale. Aspectul paginii este redat în Figura 7.16.

Exemplul 7. 10

<HTML>

<HEAD>

<TITLE>imagini10</TITLE>

</HEAD>

<BODY>

<H1 align="center">Thumbnails – o singura imagine</H1><HR>

<P>

</BODY>

<HTML>

După cum se poate observa, am creat un link (cu ajutorul etichetei <A>) la fișierul zdog.gif care conține imaginea originală. Am folosit drept legătură aceeași imagine, dar redimensionată, folosind atributele width și height.

În exemplul anterior, imaginea thumbnail este încărcată prima. În momentul când vizitatorul face click pe ea, este încărcată imaginea cu dimensiunile originale. Avantajul ultimei metode este faptul că imaginea este încărcată de la început și redimensionată pentru thumbnail, ceea ce face ca afișarea 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 înlocuiește atributul src și permite inserarea în documentul HTML a unei imagini video în același mod în care este inserată o imagine statică.

Valoarea atributului dynsrc este adresa URL a fișierului video care va fi inclus în pagină conform sintaxei:

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 afișată.

Singurul format de fișiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus în browser. Construcția de mai jos include într-un document HTML fișierul video introducere.avi care se află în folderul Video:

Efectul acestei etichete este deschiderea de către 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 obișnuite, imaginea video este afișată pe măsură ce este încărcată.

Deoarece nici un alt browser în afară de Internet Explorer nu recunoaște această extensie, este recomandat să includeți în cadrul etichetei <IMG> și atributul src prin care să furnizați o imagine statică ce va fi afișată în același cadru. Browserele care nu recunosc extensia dynsrc vor afișa imaginea statică pe când Internet Explorer va afișa imaginea video. Ordinea în care apar cele două atribute nu are importanță. De exemplu:

În mod normal, Internet Explorer redă clipul video într-o fereastră în care nu sunt afișate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectuând click dreapta cu mouse-ul în interiorul ferestrei.

Pentru a adăuga butoane de control acestei ferestre se utilizează atributul controls al etichetei <IMG>. Atributul controls nu are alocată nici o valoare, prezența sa având doar scopul de a adăuga butoanele de control asemănătoare celor de la aparatele video. De exemplu:

Clipul video inclus în pagină este redat de browser o singură dată, de la început până la sfârșit. Pentru a repeta redarea clipului de un anumit număr de ori este folosit atributul loop. Valorile posibile ale atributului sunt:

un număr întreg care reprezintă numărul de reluări ale clipului

infinite, caz în care clipul este redat până când utilizatorul stopează derularea sa apăsând butonul stop al ferestrei de vizualizare (în cazul când fereastra conține 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:

Așa cum am precizat, redarea imaginii video începe imediat ce aceasta a fost complet încărcată în pagină. Pentru a schimba acest comportament se folosește atributul start care poate avea valorile:

mouseover, situație în care derularea imaginii video începe în momentul când mouse-ul este plasat deasupra imaginii

fileopen, valoarea predefinită, situație în care derularea imaginii începe imediat după încărcarea în pagină

Cele două valori pot fi combinate pentru a se realiza redarea imaginii mai întâi imediat după încărcarea în pagină și apoi de fiecare dată când mouse-ul este plasat deasupra ei, ca în exemplul următor:

Imaginile video in-line pot fi tratate ca și imaginile statice. O astfel de imagine poate fi aliniată folosind atributul align, sau poate fi spațiată față de textul care o înconjoară.

Exemplul 7.11 ilustrează atributele prezentate mai sus. Pagina va avea aspectul din Figura 7.17.

Exemplul 7. 11

<HTML>

<HEAD>

<TITLE>imagini11</TITLE>

</HEAD>

<BODY>

<H1 align="center">Imagini video</H1><HR>

<FONT size="4" color="blue">Clipul video de mai jos face parte din jocul Heroes 3</FONT><P>

</CENTER>

</BODY>

</HTML>

10. Sunetele

Dacă eticheta <IMG> permite afișarea 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 conține un decodor de sunet încorporat și permite integrarea prin eticheta <BGSOUND> a sunetului de fundal pentru o pagină. Sintaxa etichetei <BGSOUND> este următoarea:

Atributul src are drept valoare adresa URL a fișierului de sunet care este folosit ca fundal sonor al paginii.

În mod curent, Internet Explorer recunoaște trei tipuri de fișiere de sunet:

fișiere cu extensia .wav care este formatul nativ pentru PC

fișiere cu extensia .au, formatul nativ pentru sistemele UNIX

fișiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor

Pentru a include într-o pagină un fișier de sunet se procedează ca în exemplul următor:

Ca și în cazul imaginilor video in-line, fișierul de sunet este redat o singură dată, la încărcarea paginii. Pentru redarea sa repetată se folosește atributul loop al etichetei <BGSOUND> care poate avea ca valori:

un număr întreg, care reprezintă numărul de reluări ale piesei

infinite, caz în care piesa muzicală este reluată până când utilizatorul părăsește pagina sau închide fereastra browserului.

Executați Exemplul 7.12 cu un browser Internet Explorer pentru a observa efectul etichetei <BGSOUND>. Desigur, este necesar să schimbați adresa URL a fișierului de sunet specificând un fișier 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>

</BODY>

</HTML>

11. Sugestii privind folosirea imaginilor și elementelor multimedia

Când folosiți imagini într-o pagină Web, trebuie să vă puneți întrebarea: "Este necesară această imagine sau ar fi suficient să folosesc text?". Chiar dacă se spune că o imagine face cât o mie de cuvinte, acest lucru nu este întotdeauna adevărat pe Web. Înlocuirea textului care conține informațiile esențiale dintr-o pagină Web cu imagini este adesea o greșeală.

Un prim motiv este că încă mai există browsere non-grafice cum este Lynx, care nu afișează decât textul.

Apoi, chiar și în browserele grafice, anumiți utilizatori ar putea opta, din varii motive, pentru dezactivarea afișării imaginilor.

Un alt motiv ar fi acela că, din cauza duratei mari de încărcare a fișierelor cu imagini de mari dimensiuni, unii utilizatori ar putea renunța pur și simplu la deschiderea paginii.

Și nu în ultimul rând, deoarece, spre deosebire de text, imaginile pot întâmpina diverse dificultăți tehnice la afișare.

Imaginile dintr-o pagină Web trebuie gândite ca niște instrumente vizuale care au rolul de a susține și ilustra conținutul scris al paginii. De exemplu, într-un catalog on-line imaginile produselor prezentate sunt esențiale pentru conținutul paginii respective. Icon-urile cu rol de legături sau instrumente de navigație pot reprezenta repere vizuale deosebit de utile în cadrul unui site. Dar dacă o imagine nu servește unui scop bine definit în pagină, e bine să vă gândiți de două ori, înainte de a o folosi.

De asemenea se recomandă să fiți precaut și în privința imaginilor folosite ca fundal (background).

Într-adevăr, acestea pot oferi un aspect spectaculos paginii dumneavoastră. Însă trebuie să fiți conștient de faptul că o imagine folosită ca fundal va crește cu siguranță timpul necesar încărcării paginii. Dacă în cazul imaginilor in-line textul se poate afișa înaintea sau în timpul încărcării imaginii, la imaginile de fundal afișarea celorlalte elemente din pagină nu va putea începe decât după încărcarea în întregime a fundalului.

Mai mult, spre deosebire de imaginile in-line, care pot îmbogăți conținutul informațional al paginilor, imaginile de fundal nu aduc cu adevărat decât foarte rar un supliment de informație. Deși aspectul unei asemenea pagini poate fi atrăgător, de cele mai multe ori folosirea imaginilor de fundal în combinații nefericite cu fonturi de anumite tipuri sau culori, fără contrast suficient, poate face pagina încărcată și greu de citit.

Dacă totuși vă decideți să folosiți o imagine ca fundal al paginii este recomandat să specificați simultan și o culoare de fundal, adică să setați atributul bgcolor. Astfel, dacă dintr-un motiv oarecare imaginea de fundal nu se încarcă, pagina va avea totuși culoarea prestabilită de dumneavoastră.

Ca și imaginile, și celelalte elemente multimedia trebuie folosite cu discernământ într-o pagină Web.

Imaginile video au dimensiuni semnificativ mai ari decât imaginile statice, deci se încarcă mult mai încet decât acestea astfel încât includerea lor in-line va mări considerabil timpul de încărcare al paginii.

În plus, formatele diverse utilizate nu pot fi deschise întotdeauna cu browserul, unele impunând existența unor plug-in-uri sau chiar unor programe speciale.

O metodă de compromis recomandată este descrierea conținutului fișierului, eventual inserarea unui fragment video exemplificativ (sample) de dimensiuni mult mai mici, similar cumva metodei thumbnail-urilor. Se asigură o legătură și spre fișierul integral, astfel încât, după vizualizarea exemplului, vizitatorul să poată alege dacă va aștepta timpul necesar încărcării sale sau nu.

Muzica de fundal este de cele mai multe ori nerecomandată. Foarte mulți vizitatori pot vizualiza paginile dumneavoastră având sunetul dezactivat. Folosirea unei muzici de fundal încetinește încărcarea paginii și, în plus, este foarte posibil ca muzica pe care ați ales-o să nu fie pe gustul celor care vă vizitează pagina, ba chiar să îi determine să o părăsească înainte de a citi conținutul acesteia.

Dacă este necesar, totuși, să introduceți muzică sau sunet în paginile dumneavoastră, este o prevedere înțeleaptă să plasați fișierele de sunet separat și să asigurați legături către acestea astfel încât vizitatorul să le poată audia, dacă dorește.

12. Imaginile și timpul de încărcare al paginii

Unul dintre cele mai importante aspecte care trebuie luate în considerare la includerea imaginilor într-un document este timpul de încărcare a documentului.

Durata de încărcare a paginilor depinde de mulți factori. Depinde de modemul și conexiunea vizitatorului, de performanțele serverului gazdă, de trafic, de lățimea de bandă, etc. Cum nu puteți avea control asupra acestora, singurul lucru care vă rămâne de făcut este să vă construiți paginile astfel încât să aibă o bună viteză de încărcare chiar și în cazul unui vizitator care deține o conexiune modestă ca performanțe.

Pe lângă alegerea cu foarte multă grijă a imaginilor care vor fi incluse în document, mai există câteva modalități prin care poate fi ameliorată durata de încărcare a paginii:

Optimizarea imaginilor. Folosiți-vă în mod judicios de instrumentele de control al imaginilor puse la dispoziție de editorul grafic folosit, optimizați dimensiunile imaginii și numărul de culori la cât mai puține posibil. Încercați să găsiți un raport optim între dimensiunea fișierului și calitatea imaginii. Evitați 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 navigație care sunt prezente în mai multe pagini pe parcursul unui site. Cele mai multe browsere rețin în memoria cache elementele documentelor care urmează a fi afișate. Astfel, dacă o imagine este utilizată în mai multe pagini aceasta nu trebuie încărcată de fiecare dată în memorie ci este disponibilă pentru a fi afișată oricând se face referirea la ea.

Divizarea documentelor de dimensiuni mari în mai multe documente de dimensiuni reduse. Această regulă generală include și paginile care conțin imagini in-line. Mai multe documente de dimensiuni mai mici legate între ele prin legături sunt mai bine acceptate de vizitatori decât un singur document foarte mare care necesită un timp de încărcare îndelungat. Regula general acceptată este menținerea dimensiunilor unui document Web în jurul valorii de 50Kb, incluzând aici și imaginile, desigur.

Folosirea imaginilor thumbnail. Dacă pagina conține un mare număr de imagini, folosiți imagini miniaturale care să refere imaginile originale. În plus, întrucât 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 calculării de către browser a spațiului necesar pentru afișarea imaginii, îmbunătățindu-se viteza de încărcare a paginii.

13. Rezumat

Formatele cele mai utilizate pentru fișierele grafice sunt JPEG și GIF.

Inserarea unei imagini într-un document HTML se realizează cu ajutorul etichetei <IMG>.

Sintaxa etichetei <IMG> este următoarea:

unde:

src precizează locația imaginii

width și height stabilesc dimensiunile imaginii

vspace și hspace stabilesc distanța 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 stabilește grosimea chenarului imaginii

dynsrc introduce o imagine video și precizează locația ei

loop specifică numărul de reluări ale imaginii video

start precizează momentul începerii redării imaginii

controls afișează 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 legătură către 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 adăugată unui document prin intermediul etichetei <BGSOUND>.

Alegerea imaginilor care vor fi incluse într-un document HTML trebuie făcută cu grijă, în funcție de rolul acestora în structura documentului și având permanent în vedere timpul de încărcare al paginii.

14. Test

Ce etichetă folosim pentru a insera o imagine în pagină?

<IMG>

<A>

<PIC>

Atributul src servește la:

poziționarea imaginii în pagină

stabilirea numelui și locației unde se află imaginea

crearea unei legături prin intermediul imaginii

Atributele width și height ale etichetei <IMG> sunt folosite pentru:

dimensionarea textului

alinierea imaginii cu textul

dimensionarea imaginii

Ce efect are absența atributelor width și height din eticheta <IMG>?

Nu se afișează imaginea.

Imaginea se afișează pe toata suprafața ferestrei browserului.

Browserul așteaptă încărcarea completă a imaginii înainte de a începe afișarea textului.

Care dintre atributele următoare permit afișarea textului în jurul imaginii?

top

bottom

middle

Care dintre construcțiile următoare este folosită pentru a stabili ca fond al paginii imaginea rice.gif?

Ce realizează atributul alt în următoarea construcție?

Afișează cuvântul catel lângă imagine.

Afișează cuvântul catel în spațiul rezervat imaginii.

Atribuie fișierului dog.gif numele catel.

Care dintre următoarele construcții plasează imaginea în stânga și aliniază textul în jurul imaginii?

<IMG src="moon.gif> align="wrap">

Care dintre următoarele construcții are drept efect folosirea imaginii sign.gif ca legătură?

Pentru a include în pagină o imagine video se folosește următoarea construcție:

Imagini

1. a)

2. b)

3. c)

4. c)

5. b)

6. c)

7. b)

8. b)

9. c)

10. b)

Capitolul 8

Liste

Listele reprezintă unele dintre cele mai obișnuite elemente dintr-o pagină Web. Acestea sunt deseori folosite pentru a prezenta informațiile în mod organizat, într-o manieră accesibilă și ușor de parcurs.

Ele pot fi de trei tipuri:

liste ordonate (marcate prin numere sau litere),

liste neordonate (marcate prin cratime, buline sau alte simboluri)

liste de definiții, afișate fără 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, legături, imagini, etc.

1. Liste neordonate

O listă neordonată reprezintă o colecție 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 opțională. Dacă nu este prezentă, la întâlnirea unei noi etichete <LI> se consideră că vechea etichetă este închisă.

Lista va fi afișată indentat față de restul paginii și fiecare element al listei începe pe un rând nou. În mod prestabilit, fiecare element al listei va fi marcat (bulleted) cu "bulină". Exemplul 8.1 construiește o listă neordonată, aspectul său fiind cel din

Figura 8.1.

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 stabilește caracterul afișat în fața fiecărui element al listei. Valorile posibile al acestui atribut sunt:

circle (cerc)

disc (disc plin) – valoarea prestabilită

square (patrat)

Lista din Exemplul 8.2 are atributul type setat la valoarea "square". Lista este marcată așa cum se poate vedea în Figura 8.2

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 înlocuiește tipul de marcaj cu tipul specificat pentru acel item.

În Figura 8.3 puteți observa efectul setării atributului type pentru un item individual la listei.

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>

Forme particulare de liste neordonate

Lista de directoare – este o listă introdusă prin eticheta <DIR> </DIR>. Eticheta a fost inițial utilizată pentru alcătuirea listelor de fișiere. Multe browsere nu fac nici o diferență între etichetele <DIR> și <UL>, efectul lor fiind același.

Lista de meniuri – utilizează eticheta <MENU>. Unele browsere afișează lista doar în format ușor diferit față de listele neordonate, altele însă folosesc chiar un fel de meniu grafic de tip pull-down pentru afișarea 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 inițiat 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ă.

Diferența față de listele neordonate este aceea că în acest caz marcarea elementelor se face prin cifre, nu prin simboluri.

Exemplul 8.4 afișează o listă ordonată, marcată cu cifre arabe aspectul ei fiind cel din Figura 8.4.

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 stabilește 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 – opțiune prestabilită)

De asemenea eticheta <OL> poate avea setat atributul start, care stabilește valoarea inițială a secvenței de ordonare. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

Exemplul 8.5 construiește o listă numerotată cu cifre romane mari începând de la poziția a treia. Aspectul paginii care conține această listă este redat în Figura 8.5.

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 înlocuiește 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 afișa 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

<OL>

<LI>Numarul 1

<LI>Numarul 2

</OL>

<LI>Bulina 2

<LI>Bulina 3

<LI>Patrat 1

<LI>Patrat 2

<LI>Patrat 3

</UL>

<LI>Bulina 4

</UL>

</BODY>

</HTML>

4. Liste de definiții

Listele de definiții 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 definiții 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> conține la rândul său un număr de elemente care îl definesc, introduse prin eticheta <DD> (definition description).

Ca și în cazul etichetei <LI>, etichetele de închidere </DT> și </DD> sunt opționale. În Exemplul 8.7 este construită o listă de definiții.

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

<DD>Ziua e mai scurta decât 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 decât noaptea

<DT>Toamna

<DD>Se coc fructele

<DD>Se strange recolta

<DD>Cad frunzele

</DL>

</BODY>

</HTML>

Aspectul listei de definiții de mai sus este cel din Figura 8.7.

Etichetele <DL> și </DL> marchează începutul și sfârșitul listei, termenii care fac parte din listă (Iarna, Primăvara, Vara, Toamna ) sunt introduși prin eticheta <DT> iar definițiile termenilor, prin etichetele <DD>.

Se pot realiza liste ale căror elemente să fie link-uri, imagini sau blocuri de text. În Exemplul 8.8, elementele listei sunt imagini, așa cum se poate vedea în Figura 8.8.

Exemplul 8. 8

<HTML>

<HEAD>

<TITLE>liste8</TITLE>

</HEAD>

<BODY>

<H1 align="center">Liste de imagini</H1><HR>

<DL>

<DT>Flori

<DD>

<DD>

<DT>Texturi

<DD>

<DD>

</DL>

</BODY>

</HTML>

Exemplul 8.9 creează două liste imbricate de legături. Aspectul paginii care conține această listă este redat în Figura 8.9. Puteți testa direct funcționarea listei dacă ați salvat fișierele HTML construite la capitolele anterioare sub numele specificat în blocul <TITLE> al fiecărui document. În cazul când ați preferat alte denumiri pentru fișiere, puteți schimba numele fișierelor prezente în cadrul exemplului cu propriile dumneavoastră fișiere.

Exemplul 8. 9

<HTML>

<HEAD>

<TITLE>liste9</TITLE>

</HEAD>

<BODY>

<H1 align="center">Liste de legaturi</H1><HR>

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

</BODY>

</HTML>

5. Rezumat

Î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 pătrate

Liste ordonate prin eticheta <OL> </OL> marcate prin cifre arabe, cifre romane mari sau mici, litere mari sau mici

Liste de definiții prin eticheta <DL> </DL> nemarcate

Elementele listelor ordonate și neordonate se introduc prin eticheta <LI>.

Elementele listelor de definiții se introduc prin etichetele <DT> și <DD>.

Listele pot conține orice tip de elemente: text, imagini, link-uri sau alte liste (în acest caz obținându-se liste imbricate).

6. Test

Eticheta <UL> se folosește pentru a iniția:

o listă ordonată

o listă neordonată

două liste imbricate

Care dintre următoarele afirmații este falsă?

Eticheta <LI> servește pentru a introduce fiecare element al unei liste ordonate.

Eticheta <LI> servește pentru a introduce fiecare element al unei liste neordonate.

Eticheta <LI> servește pentru a introduce fiecare element al unei liste de definiții.

În construcția <UL type="square"> ce rol are atributul type?

Construiește o listă neordonată.

Stabilește caracterul care va fi afișat în fața fiecărui element al listei.

Construiește o listă care are ca elemente imagini.

O listă ordonată este introdusă prin eticheta:

<UL>

<OL>

<DL>

Ce rol are atributul type în următoarea construcție: <OL type="a">?

Construiește o listă de litere care începe cu caracterul "a".

Construiește o listă ordonată.

Stabilește faptul că elementele listei vor fi marcate cu litere mici.

Ce este incorect în exemplul următor?

<UL>

<LI>Limbaje de programare

<OL>

<LI>C++

<LI>Perl

<LI>Java

</OL>

<LI>Sisteme de operare>

<OL>

<LI>MSDos

<LI>Unix

</UL>

</OL>

Nu este permisă imbricarea listelor neordonate cu liste ordonate.

Este absentă eticheta de închidere </LI>.

Etichetele <UL> și <OL> nu sunt închise corect.

O listă de definiții se introduce prin eticheta:

<UL>

<DT>

<DL>

Care este ordinea corectă în care se introduc elementele unei liste de definiții?

a) <DL> <DT> <DD>

b) <DD> <DT> <DL>

c) <DT> <DL> <DD>

Ce realizează următoarea construcție?

<UL>

</UL>

Construiește o listă de imagini marcate prin buline.

Construiește o listă de link-uri către imaginile specificate.

Nimic, deoarece este incorect ca elementele unei liste să fie imagini.

Cum sunt marcate elementele unei liste de definiții?

prin buline

prin numere

nu sunt marcate

Liste

1. b)

2. c)

3. b)

4. b)

5. c)

6. c)

7. c)

8. a)

9. a)

10. c)

Capitolul 9

Tabele

Tabelul este un element structural de bază în alcătuirea unei pagini Web. În cadrul unui tabel pot fi incluse oricare dintre elementele care fac parte din corpul unui document HTML: text, imagini, linii orizontale, titluri, legături, alte tabele, etc. Tabelele constituie un instrument extrem de util de organizare a paginii Web, realizând alinierea elementelor și plasarea lor în locurile dorite de designerul paginii.

Un tabel este o grilă dreptunghiulară formată din linii și coloane. Caseta formată la intersecția unei linii cu o coloană se numește celulă.

O linie a tabelului este formată dintr-un șir de celule aliniate pe orizontală, iar o coloană este formată dintr-un șir de celule aliniate pe verticală.

Celulele tabelului conțin date (text, imagini, link-uri), fiecare celulă având propriile opțiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.

1. Crearea unui tabel

Pentru a insera un tabel într-un document HTML se folosesc etichetele corespondente <TABLE> </TABLE>. Eticheta <TABLE> este o etichetă container, deci eticheta de final este obligatorie. Absența ei face ca tabelul să nu fie afișat corect.

Pentru a insera o linie într-un tabel se folosesc etichetele <TR> </TR> (table row). Folosirea etichetei de închidere </TR> este opțională.

Așa cum spuneam, fiecare linie de tabel este formată din mai multe celule ce conțin date. O celulă de date se introduce cu eticheta <TD> </TD> (table data). Eticheta de închidere </TD> este de asemenea opțională.

În Exemplul 9.1 am construit un tabel format din patru linii, fiecare linie având câte două celule de date. Aspectul tabelului este redat în Figura 9.1.

Exemplul 9. 1

<HTML>

<HEAD>

<TITLE>tabele1</TITLE>

</HEAD>

<BODY>

<H1 align="center">Crearea unui tabel</H1><HR>

<TABLE>

<TR>

<TD>celula 11

<TR>

<TD>celula 21

<TD>celula 22

<TR>

<TD>celula 31

<TD>celula 32

<TR>

<TD>celula 41

<TD>celula 42

</TABLE>

</BODY>

</HTML>

În mod prestabilit, un tabel nu are chenar vizibil. Pentru a adăuga un chenar unui tabel, se utilizează atributul border al etichetei <TABLE>. Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) și reprezintă grosimea în pixeli a chenarului tabelului.

Daca atributul border nu este urmat de o valoare atunci chenarul tabelului va avea o grosime prestabilită egală cu 1 pixel, iar o valoare egală cu 0 a atributului border semnifică absența chenarului.

Când atributul border are o valoare nenulă chenarul tabelului are un aspect tridimensional.

În Exemplul 9.2 este construit un tabel cu chenar, așa cum se observă în Figura 9.2. Pentru a testa funcționarea atributului border, înlocuiți în exemplul de mai jos valoarea "4" și cu alte valori. Nu uitați ca după fiecare modificare să salvați fișierul și să apăsați butonul Refresh/Reload al browserului.

Exemplul 9. 2

<HTML>

<HEAD>

<TITLE>tabele2</TITLE>

</HEAD>

<BODY>

<H1 align="center">Chenarul unui tabel</H1><HR>

<TR>

<TD>celula 11

<TD>celula 12

<TR>

<TD>celula 21

<TD>celula 22

<TR>

<TD>celula 31

<TD>celula 32

<TR>

<TD>celula 41

<TD>celula 42

</TABLE>

</BODY>

</HTML>

Celulele unui tabel pot conține și alte elemente în afară de text: imagini, legături, formulare, etc.

Exemplul 9.3 construiește un tabel cu două linii și două coloane, celulele tabelului având drept conținut imagini. Aspectul tabelului este cel din Figura 9.3.

Exemplul 9. 3

<HTML>

<HEAD>

<TITLE>tabele3</TITLE>

</HEAD>

<BODY>

<H1 align="center">Tabel care contine imagini</H1><HR>

<TR>

<TR>

</TABLE>

</BODY>

</HTML>

2. Alinierea tabelului în pagină

Pentru a alinia un tabel într-o pagina Web se utilizează atributul align al etichetei <TABLE>, cu următoarele valori posibile:

left (valoarea prestabilită) – textul care urmează după punctul de inserare al tabelului va fi dispus în partea dreaptă a tabelului.

center – textul care urmează după punctul de inserare al tabelului va fi afișat pe toată lățimea paginii, imediat sub tabel.

right – textul care urmează după punctul de inserare al tabelului va fi dispus în partea stângă a tabelului.

În Exemplul 9.4 este ilustrată construirea unui tabel aliniat la dreapta. Pagina va avea aspectul din Figura 9.4.

Exemplul 9. 4

<HTML>

<HEAD>

<TITLE>tabele4</TITLE>

</HEAD>

<BODY>

<H1 align="center">Alinierea tabelului in pagina</H1><HR>

<TR>

<TD>celula 11

<TD>celula 12

<TR>

<TD>celula 21

<TD>celula 22

</TABLE>

Acest text este plasat in stanga tabelului

</BODY>

</HTML>

Distanța dintre tabel și celelalte elemente din pagina Web poate fi stabilită cu ajutorul atributelor hspace și vspace al etichetei <TABLE>.

Valoarea atributului hspace poate fi orice număr pozitiv, inclusiv 0, și reprezintă distanța pe orizontală dintre tabel și celelalte elemente ale paginii Web.

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

Exemplul 9.5 ilustrează utilitatea celor două atribute.

Exemplul 9. 5

<HTML>

<HEAD>

<TITLE>tabele5</TITLE>

</HEAD>

<BODY>

<H1 align="center">Spatierea tabelului fata de restul textului </H1><HR>

Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli<BR>

<TR>

<TD>celula 11

<TD>celula 12

<TR>

<TD>celula 21

<TD>celula 22

</TABLE>

Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel.

</BODY>

</HTML>

Pentru a observa efectul celor două atribute editați acest exemplu și vizualizați-l cu un browser Netscape.

Atributele nefiind recunoscute de Internet Explorer, aspectul paginii la vizualizarea cu acest browser va fi cel din Figura 9.5.

3. Dimensionarea unui tabel

Dimensiunile unui tabel – lățimea și înălțimea – pot fi stabilite exact prin intermediul atributelor width și height ale etichetei <TABLE>.

Valorile acestor atribute pot fi:

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

numere întregi între 1 și 100, urmate de semnul %, reprezentând procente din lățimea și înălțimea totală a paginii.

Iată un exemplu de tabel cu înălțimea de 200 de pixeli și lățimea egală cu 50% din lățimea paginii (Exemplul 9.6)

Exemplul 9. 6

<HTML>

<HEAD>

<TITLE>tabele6</TITLE>

</HEAD>

<BODY>

<H1 align="center">Dimensionarea unui tabel</H1><HR>

Tabel cu lungimea de 50% din pagina si inaltimea de 200 de pixeli<P>

<TR>

<TD>celula 11

<TD>celula 12

<TR>

<TD>celula 21

<TD>celula 22

</TABLE>

</BODY>

</HTML>

Aspectul tabelului construit în documentul de mai sus este cel din Figura 9.6.

Dimensiunile unui tabel includ și valoarea dată atributului border. De exemplu, un tabel cu o singură linie și o singură coloană, cu dimensiunile width="100", height="50" și având atributul border setat la valoarea 10, va avea drept spațiu util 80 de pixeli pe lățime și 30 de pixeli pe înălțime.

Una dintre cele mai frecvente utilizări a tabelelor este poziționarea unui text într-o anumită zonă a paginii, prin realizarea unui tabel fără chenar (border="0") cu o singură linie și o singură coloană, ca în Exemplul 9.7.

Exemplul 9. 7

<HTML>

<HEAD>

<TITLE>tabele7</TITLE>

</HEAD>

<BODY>

<H1 align="center">Pozitionarea unui text</H1>

<TR>

<TD>

Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii.

</TABLE>

</BODY>

</HTML>

În Figura 9.7 este redat aspectul tabelului construit mai sus.

4. Spațierea celulelor unui tabel

Distanța dintre două celule vecine se definește cu ajutorul atributului cellspacing al etichetei <TABLE>.

Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, și reprezintă distanța în pixeli dintre două celule vecine. Valoarea prestabilită a atributului cellspacing este de 2 pixeli.

Exemplul 9.8 ilustrează funcționarea atributului cellspacing. Aspectul tabelului este cel din Figura 9.8. Puteți modifica valoarea atributului cellspacing pentru a observa cum se spațiază celulele în funcție de valorile pe care le dați.

Exemplul 9. 8

<HTML>

<HEAD>

<TITLE>tabele8</TITLE>

</HEAD>

<BODY>

<H1 align="center">Spatierea celulelor</H1><HR>

<TR>

<TD>Maria

<TD>Bogdan

<TR>

<TD>Alexandru

<TD>Irina

</TABLE>

</BODY>

</HTML>

Distanța dintre marginea unei celule și conținutul ei poate fi definită cu ajutorul atributului cellpadding al etichetei <TABLE>. Valorile acestui atribut pot fi numere întregi pozitive, și reprezintă distanța în pixeli dintre marginile celulei și conținutul ei. Valoarea prestabilită a atributului cellpadding este 1 pixel.

Exemplul 9.9 construiește un tabel în care distanța dintre marginea celulelor și conținutul lor este de 20 de pixeli. Aspectul acestui tabel este cel din Figura 9.9.

Exemplul 9. 9

<HTML>

<HEAD>

<TITLE>tabele9</TITLE>

</HEAD>

<BODY>

<H1 align="center"> Spatierea textului in celule</H1><HR>

<TR>

<TD>Maria

<TD>Bogdan

<TR>

<TD>Alexandru

<TD>Irina

</TABLE>

</BODY>

</HTML>

5. Dimensionarea celulelor unui tabel

Dimensiunile unei celule de tip <TD> sau de tip <TH> (vezi mai jos eticheta <TH>) pot fi stabilite exact cu ajutorul a două atribute ale acestor etichete: width pentru lățime și height pentru înălțime. Valorile posibile ale acestor atribute sunt:

numere întregi pozitive (inclusiv 0) reprezentând dimensiunea în pixeli a lățimii, respectiv a înălțimii unei celule

procente din lățimea , respectiv înălțimea tabelului.

În Exemplul 9.10 am dimensionat celula 11 la lățimea de 20% din lățimea tabelului și înălțimea egală cu 75% din înălțimea lui. Așa cum se poate observa din Figura 9.10 dimensionarea individuală a unei celule va afecta dimensionarea tuturor celulelor din linia și coloana din care face parte celula respectivă. Se observă că celula 12 are lățimea egală cu restul de 80% din lățimea tabelului. Celula 21 aflată pe aceeași coloana cu celula dimensionată are aceleași dimensiuni ca și ea.

Exemplul 9. 10

<HTML>

<HEAD>

<TITLE>tabele10</TITLE>

</HEAD>

<BODY>

<H1 align="center">Dimensionarea celulelor</H1><HR>

Tabel cu celule dimensionate individual<P>

<TR>

<TD width="20%" height="75%">celula 11

<TD>celula 12

<TR>

<TD>celula 21

<TD>celula 22

</TABLE>

</BODY>

</HTML>

6. Alinierea conținutului unei celule

Alinierea pe orizontală a conținutului unei celule se face cu ajutorul atributului align care poate lua valorile:

left – la stânga

center – centrat , valoarea prestabilită

right – la dreapta

Alinierea pe verticală a conținutului unei celule se face cu ajutorul atributului valign care poate lua valorile:

baseline – la bază

bottom – jos

middle – la mijloc, valoarea prestabilită

top – sus

Aceste atribute pot fi atașate atât etichetei <TR> pentru a defini alinierea tuturor celulelor unei linii, cât și etichetelor <TD> și <TH> (vezi mai jos eticheta <TH>) pentru a stabili alinierea textului într-o singură celulă. În Exemplul 9.11 este ilustrată funcționarea atributelor align și valign.

Textul din celulele primei, celei de-a doua și celei de-a patra linii a fost aliniat prin atributul align asociat liniei, iar textul din celulele liniei a treia a fost aliniat prin atributul align asociat fiecărei celule în parte. Aspectul tabelului este cel din Figura 9.11.

Exemplul 9. 11

<HTML>

<HEAD>

<TITLE>tabele11</TITLE>

</HEAD>

<BODY>

<H1 align="center"> Alinierea continutului celulelor</H1><HR>

<TD>dreapta

<TD>centru

<TR>

<TD valign="top">sus

<TD valign="bottom">jos

<TD>stanga

</TABLE>

</BODY>

</HTML>

Dacă este prezent un atribut de aliniere atașat etichetei <TR> și pe linia respectivă o anumită celulă are propriul său atribut de aliniere, atributul de aliniere asociat etichetei <TD> are prioritate față de cel asociat etichetei <TR>.

7. Definirea culorilor pentru un tabel

Culoarea de fond a unui tabel se stabilește cu ajutorul atributului bgcolor, care poate fi atașat după cum urmează:

întregului tabel prin eticheta <TABLE>,

unei linii prin eticheta <TR>

unei celule de date prin eticheta <TD>

Valorile pe care le poate primi atributul bgcolor sunt cele cunoscute pentru culori.

Dacă într-un tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este, în ordine descrescătoare, următoarea:

<TD>

<TR>

<TABLE> (prioritatea cea mai mica)

În Exemplul 9.12 este ilustrată folosirea atributului bgcolor.

Exemplul 9. 12

<HTML>

<HEAD>

<TITLE>tabele12</TITLE>

</HEAD>

<BODY>

<H1 align="center">Culori in tabel</H1><HR>

<TR>

<TD>celula 11 verde

<TD bgcolor="red">celula 12 rosu

<TD>celula 21 albastru

<TD bgcolor="yellow">celula 22 galben

<TD>celula 31 cyan

<TD>celula 32 cyan

<TR>

<TD>celula 41 verde

<TD bgcolor="white">celula 42 alb

</TABLE>

</BODY>

</HTML>

Din Figura 9.12 puteți observa cum funcționează prioritatea atributului bgcolor. Astfel, culoarea întregului tabel a fost stabilită prin eticheta:

Dacă o linie nu are stabilită nici o alta culoare, culoarea liniei este verde deschis. Pentru linia a doua a tabelului este stabilită culoarea albastru:

<TR bgcolor="blue">.

Celulele care fac parte din aceasta linie și care nu au stabilită o alta culoare, vor fi albastre (celula 21). Celelalte celule vor avea culoarea stabilită explicit pentru ele (celula 22 va fi galbenă):

Un tabel poate avea drept fundal nu numai o culoare, ci și o imagine. Acest efect se obține folosind atributul background al etichetei <TABLE>, atributul primind ca valoare adresa URL a imaginii. Atributul background poate fi atașat și unei linii, stabilind fundalul tuturor celulelor din linia respectivă precum și unei celule individuale, în acest caz stabilind fundalul acelei celule.

Exemplul 9.13 ilustrează acest atribut, tabelul având aspectul redat în Figura 9.13.

Exemplul 9. 13

<HTML>

<HEAD>

<TITLE>tabele13</TITLE>

</HEAD>

<BODY>

<H1 align="center">Fundalul unui tabel</H1><HR>

<TR>

<TD>celula 11

<TD>celula 12

<TR>

<TD>celula 21

<TD>celula 22

</TABLE>

</BODY>

</HTML>

Culorile chenarului unui tabel se pot stabili folosind atributele:

bordercolor – permite stabilirea culorii pentru chenarul unui tabel

bordercolorlight – permite stabilirea culorii marginilor din stânga și de sus ale tabelului

bordercolordark – permite stabilirea culorii marginilor din dreapta și de jos ale tabelului

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

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

Exemplul 9.14 ilustrează folosirea acestor atribute, aspectul tabelului fiind cel din Figura 9.14.

Exemplul 9. 14

<HTML>

<HEAD>

<TITLE>tabele14</TITLE>

</HEAD>

<BODY>

<H1 align="center">Culorile chenarului unui tabel</H1><HR>

<TR>

<TD><FONT color="green">celula 11</FONT>

<TD><FONT color="blue">celula 12</FONT>

<TD><FONT color="red">celula 13</FONT>

<TR>

<TD><FONT color="teal">celula 21</FONT>

<TD><FONT color="magenta">celula 22</FONT>

<TD><FONT color="lime">celula 23</FONT>

</TABLE>

</BODY>

</HTML>

Am setat grosimea chenarului tabelului la valoarea de 10 pixeli, pentru a avea un aspect tridimensional mai pronunțat.

Cu ajutorul atributului bordercolordark am stabilit culoarea părții "umbrite" a chenarului (marginile de jos și din dreapta) iar cu ajutorul atributului bordercolorlight, culoarea părții "luminate" a acestuia (marginile de sus și din stânga) iar textul din celule l-am scris cu culori diferite, folosind eticheta <FONT>.

Culorile stabilite pentru chenarul exterior al tabelului sunt folosite și pentru a colora liniile despărțitoare dintre celulele tabelului. Pentru acestea partea "umbrită" este formată din muchiile de sus și din stânga iar partea "luminată" este formată din muchiile de jos și din dreapta.

Dacă dorim să colorăm separat muchiile care despart liniile sau celulele tabelului putem asocia atributele bordercolor, bordercolordark și bordercolorlight etichetelor <TR> și <TD>.

Atenție!

Atributele bordercolor, bordercolordark și bordercolorlight nu sunt recunoscute de browserul Nescape.

Vizualizați pagina de mai sus cu un browser Netscape pentru a observa aspectul ei.

8. Titlul unui tabel

Unui tabel i se poate atașa un titlu cu ajutorul etichetei <CAPTION> (table caption=titlu tabel).

Această etichetă trebuie plasată în interiorul etichetelor <TABLE> </TABLE>, dar nu în interiorul etichetelor <TR> sau <TD>.

Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <CAPTION> care poate lua una dintre valorile:

bottom – sub tabel

top – deasupra tabelului

left – deasupra, la stânga tabelului

right – deasupra, la dreapta tabelului

În Exemplul 9.15 titlul tabelului este aliniat deasupra sa. Aspectul paginii este cel din Figura 9.15.

Exemplul 9. 15

<HTML>

<HEAD>

<TITLE>tabele15</TITLE>

</HEAD>

<BODY>

<H1 align="center">Titlul unui tabel</H1><HR>

<TABLE border><CAPTION align="top">Masini

<TR>

<TD>Mercedes

<TD>Citroen

<TD>Jaguar

<TR>

<TD>BMW

<TD>Volvo

<TD>Renault

</TABLE>

</BODY>

</HTML>

9. Capul de tabel

Un tabel poate avea celule cu semnificația de cap de tabel. Aceste celule sunt introduse de eticheta <TH> (tabel header=cap de tabel) în loc de <TD>.

Toate atributele care pot fi atașate etichetei <TD> pot fi de asemenea atașate și etichetei <TH>. Conținutul celulelor definite cu <TH> este scris cu caractere aldine și centrat.

Exemplul 9.16 ilustrează modul în care se pot insera celule cu rol de cap de tabel. Puteți observa din exemplu că elementele cu rol de cap de tabel pot fi plasate atât pe orizontală cât și pe verticală. Aspectul tabelului este redat în Figura 9.16.

Exemplul 9. 16

<HTML>

<HEAD>

<TITLE>tabele16</TITLE>

</HEAD>

<BODY>

<H1 align="center">Capul de tabel</H1><HR><P>

<TABLE border><CAPTION align="bottom">Preturi masini

<TR>

<TH>Pret

<TH>Citroen

<TH>Jaguar

<TH>BMW

<TH>Volvo

<TR>

<TH>In dolari

<TD>5000

<TD>100000

<TD>50000

<TD>80000

<TR>

<TH>In lei

<TD>5

<TD>100

<TD>50

<TD>80

</TABLE>

</BODY>

</HTML>

10. Tabele de forme oarecare

Există situații când dorim ca o celulă să se extindă peste celulele vecine, pe orizontală sau pe verticală. În acest mod se obține o singură celulă cu suprafața egală cu suma suprafețelor celulelor inițiale.

Acest lucru se poate realiza cu ajutorul atributelor colspan și rowspan ale etichetelor <TD> și <TH>.

Astfel:

colspan – realizează extinderea unei celule peste celulele din dreapta ei. Valoarea atributului determină numărul de celule care se unifică.

rowspan – realizează extinderea unei celule peste celulele de sub ea. Valoarea atributului determină numărul de celule care se unifică.

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

Exemplul 9. 17

<HTML>

<HEAD>

<TITLE>tabele17</TITLE>

</HEAD>

<BODY>

<H1 align="center">Tabele cu forma oarecare</H1><HR>

<TR>

<TD rowspan="3">celula 11<BR>celula 21<BR>celula 31

<TD>celula 12

<TD colspan="2" rowspan="3">celula 13 , celula 14<BR>celula 23, celula 24<BR>celula 33, celula 34

<TR>

<TD>celula 22

<TR>

<TD>celula 32

<TR>

<TD>celula 41

<TD colspan="3">celula 42, celula 43, celula 44

</TABLE>

</BODY>

</HTML>

Tabelul construit în acest exemplu are 4 linii și 4 coloane. Așa cum se vede în Figura 9.17, prin folosirea atributelor colspan și rowspan configurația tabelului s-a modificat astfel: celula 11 s-a extins în jos peste celulele 21 și 31 (<TD rowspan="3">), celula 12 a rămas nemodificată, celula 13 s-a extins atât spre dreapta peste celula 14 cât și în jos, peste celulele 23 și 24 (<TD colspan="2" rowspan="3">).

Celulele 22, 32 și 41 au rămas nemodificate iar celula 42 s-a extins spre dreapta peste celulele 43 și 44 (<TD colspan="3">.

Etichetelor <TD> și <TH> li se poate atașa atributul nowrap. El interzice ajustarea automată a lungimii unei linii de text, astfel încât în tabel pot apărea coloane cu o lățime oricât de mare. Un tabel în care este folosit atributul nowrap este cel construit în Exemplul 9.18. Aspectul tabelului este redat în Figura 9.18.

Exemplul 9. 18

<HTML>

<HEAD>

<TITLE>tabele18</TITLE>

</HEAD>

<BODY>

<H1 align="center"> Atributul nowrap</H1><HR>

<TR>

<TD>celula 11

<TD>celula 12

<TR>

<TD>celula 21

<TD nowrap>celula 22 Textul din aceasta celula este foarte lung

</TABLE>

</BODY>

</HTML>

11. Celule fără conținut

Dacă un tabel are celule fără conținut (celule vide), atunci aceste celule vor apărea în tabel fără un chenar de delimitare. În scopul de a afișa un chenar pentru celulele vide se poate proceda astfel:

după eticheta <TD> se adaugă  

după eticheta <TD> se adaugă <BR>

Caracterul   (no break space) este, așa cum am văzut la capitolul Formatarea textului, caracterul spațiu. Un spațiu introdus prin intermediul acestui caracter nu va fi ignorat de browser.

În Exemplul 9.19 este ilustrat modul în care pot fi create celule fără conținut care să aibă totuși chenar de delimitare. După cum observați din Figura 9.19, celula 23 nu are chenar de delimitare. Celulele de pe a doua linie a tabelului sunt vide dar au chenar deoarece am folosit &nbsp și <BR>.

Exemplul 9. 19

<HTML>

<HEAD>

<TITLE>tabele19</TITLE>

</HEAD>

<BODY>

<H1 align="center">Celule fara continut</H1><HR>

<TR>

<TD>celula 11

<TD>celula 12

<TD>celula 13

<TR>

<TD> 

<TD>

</TABLE>

</BODY>

</HTML>

12. Grupuri de coloane

Etichetele <COLGROUP> </COLGROUP> permit definirea unui grup de coloane în cadrul unui tabel. Atributele acceptate de <COLGROUP> sunt:

span – determină numărul de coloane dintr-un grup

width – determină o lățime unică pentru coloanele din grup

align – determină un tip unic de aliniere pentru coloanele din grup

De exemplu:

Am definit astfel un grup de trei coloane, fiecare având lățimea de 100 de pixeli.

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

span – identifică acea coloană din grup pentru care se face configurarea. Dacă lipsește, atunci coloanele sunt configurate în ordine.

width – determină lățimea coloanei identificate prin span.

align – determină alinierea conținutului coloanei identificate prin span.

Cel mai bine puteți înțelege funcționarea acestei etichete din Exemplul 9.20. Tabelul din acest exemplu are dimensiunile de 420 de pixeli lățime și 200 de pixeli înălțime și este format din două linii și patru coloane.

În tabel a fost delimitat un grup de trei coloane (primele trei coloane) prin eticheta <COLGROUP> iar în cadrul acestui grup au fost definite lățimea și alinierea textului din fiecare coloane în parte. Cea de-a patra coloană a tabelului nu face parte din grupul de coloane. După închiderea etichetei <COLGROUP>, celulele de date au fost introduse în mod normal, cu ajutorul etichetei <TD>.

Exemplul 9. 20

<HTML>

<HEAD>

<TITLE>tabele20</TITLE>

</HEAD>

<BODY>

<H1 align="center">Grupuri de coloane</H1><HR>

</COLGROUP>

<TR>

<TD valign="top">celula 11

<TD>celula 12

<TD valign="bottom">celula 13

<TD>celula 14

<TR>

<TD>celula 21

<TD>celula 22

<TD>celula 33

<TD>celula 34

</TABLE>

</BODY>

</HTML>

Din Figura 9.20 se poate observa că în cadrul celulei 11 este respectată alinierea la stânga a textului, deoarece ea a fost setata ca atare prin construcția <COL width="60" align="left">.

În plus, în cadrul etichetei <TD> a fost stabilita și alinierea pe verticala a textului din celulă, atributul valign primind valoarea "top".

În celula 12 nu este setat atributul valign astfel încât textul respectă alinierea stabilită prin construcția <COL width="120" align="center">. În celula 13 alinierea pe orizontală a textului este stabilită prin construcția <COL width="180" align="right"> iar alinierea pe verticală este setată în cadrul etichetei <TD> la valoarea "bottom".

Din figură se mai observă că toate celulele care fac parte din coloanele incluse în blocul <COLGROUP> respectă setările făcute în cadrul acestui bloc (celulele 21, 22 și 23). Celulele 14 și 24 care formează coloana a patra a tabelului neinclusă în grupul de coloane, respectă atributele de aliniere specificate în cadrul etichetei <TD>, dacă există.

Eticheta <COLGROUP> nu este recunoscută de browserele Netscape și prin urmare nici atributele legate de dimensionarea coloanelor și alinierea textului în interiorul lor.

13. Atribute pentru aspectul chenarului unui tabel

Atributul frame

Atributul frame al etichetei <TABLE> permite specificarea laturilor din chenarul unui tabel care vor fi vizibile.

Valorile posibile ale acestui atribut sunt:

void – elimină toate muchiile exterioare ale tabelului

above – afișează o muchie în partea superioară a cadrului tabelului

below – afișează o muchie în partea inferioară a cadrului tabelului

hsides – afișează câte o muchie în partea superioară și inferioară cadrului tabelului

vsides – afișează o muchie în partea din stânga și din dreapta a cadrului tabelului

lhs – afișează o muchie în partea din stânga a cadrului tabelului

rhs – afișează o muchie în partea din dreapta a cadrului tabelului

box – afișează o muchie pe toate laturile cadrului tabelului

Atributul rules

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

none – elimină toate muchiile interioare ale tabelului

rows – afișează muchii orizontale între toate liniile tabelului

cols – afișează muchii verticale între toate coloanele tabelului

all – afișează muchii între toate liniile și coloanele

Exemplul 9.21 ilustrează aceste atribute. Atributele frame și rules pot fi combinate și cu atributele de colorare a chenarului și se pot folosi pentru a crea efecte interesante de aliniere în pagină așa cum se poate vedea în Figura 9.21.

Exemplul 9. 21

<HTML>

<HEAD>

<TITLE>tabele21</TITLE>

</HEAD>

<BODY>

<H1 align="center">Atributele frame si rules</H1><HR>

<TR>

<TD>celula 11

<TD>celula 12

<TD>celula 13

<TR>

<TD>celula 21

<TD>celula 22

<TD>celula 23

<TR>

<TD>celula 21

<TD>celula 22

<TD>celula 23

</TABLE>

</BODY>

</HTML>

14. Tabele imbricate

Un tabel poate conține în celulele sale și alte elemente în afară de text, inclusiv un alt tabel, formând astfel un ansamblu de tabele imbricate.

În Exemplul 9.22 vom ilustra modul în care se pot imbrica două tabele.

Exemplul 9. 22

<HTML>

<HEAD>

<TITLE>tabele22</TITLE>

</HEAD>

<BODY>

<H1 align="center">Imbricarea tabelelor</H1><HR>

<TR>

<TD>celula 11 tabelul 1

<TD>

<TR>

<TD>celula 11 tabelul 2

<TD>celula 12 tabelul 2

<TR>

<TD>celula 21 tabelul 2

<TD>celula 22 tabelul 2

<TR>

<TD>celula 31 tabelul 2

<TD>celula 32 tabelul 2

</TABLE>

<TR>

<TD>celula 21 tabelul 1

<TD>celula 22 tabelul 1

</TABLE>

</BODY>

</HTML>

Așa cum se vede din Figura 9.22 tabelul este format din două linii și două coloane. În celula 21 a tabelului am inclus un alt tabel, format din trei linii și două coloane.

15. Recomandări privind folosirea tabelelor

Tabelele se numără printre cele mai folosite elemente într-o pagină Web. Ele reprezintă un instrument practic indispensabil pentru definirea aspectului paginii, întrucât permit alinierea corectă a elementelor din pagină: text, imagini, legături, etc. În interiorul unui tabel se pot include și alte tabele, în funcție de necesități, formând o rețea de tabele imbricate.

Singura precauție pe care trebuie să o aveți în vedere când folosiți tabele în paginile dumneavoastră este cea legată de etichetele și atributele specifice unui anumit tip de browser. Așa după cum ați observat din exemplele prezentate, aspectul paginilor poate să difere simțitor de la un tip de browser la altul, atunci când un anumit element nu este recunoscut. Dacă veți considera că aspectul tabelelor este esențial pentru paginile site-ului, este recomandat să vă limitați la etichetele standard, recunoscute de toate browserele .

În Anexa 1 veți găsi o listă a celor mai utilizate etichete împreună cu mențiunea dacă fac parte din standardul HTML 3.2.

16. Rezumat

Tabelele se inserează într-un document HTML cu ajutorul etichetei container <TABLE> </TABLE>

Tabelele sunt formate din linii, care se introduc prin eticheta <TR> iar fiecare linie este formată din celule introduse prin eticheta <TD>.

Celulele unui tabel pot conține text, etichete de formatare a textului, imagini, legături, formulare sau alte tabele.

Etichetele <TABLE>, <TR> și <TD> au o serie de atribute comune:

align

când este asociat cu <TABLE> stabilește alinierea tabelului față de textul din jur

când este asociat cu <TR> stabilește alinierea textului din celulele liniei respective

când este asociat cu <TD> stabilește alinierea textului din celulă

bgcolor stabilește culoarea fundalului pentru întregul tabel, o linie sau o celulă.

bordercolor, bordercolordark și bordercolorlight stabilesc culorile chenarelor

valign aliniază textul pe verticală în cadrul tabelului, al celulelor unei linii sau al unei celule individuale

Tabelul în întregime sau o celulă a sa pot avea o imagine ca fundal, specificată cu ajutorul atributului background.

Grosimea chenarului tabelului se stabilește cu ajutorul atributului border.

Dimensiunile tabelului sau ale unei celule individuale se stabilesc prin intermediul atributelor width și height.

Cu ajutorul atributelor cellspacing și cellpadding se stabilesc distanța dintre celulele tabelului, respectiv distanța dintre conținutul celulelor și marginile lor.

Pentru a crea tabele de forme oarecare se folosesc atributele colspan și rowspan care permit extinderea unei celule peste celulele din dreapta ei, respectiv peste celulele de sub ea.

Unui tabel i se poate atașa un titlu prin eticheta <CAPTION> și se pot introduce celule cu rol de cap de tabel prin eticheta <TH>.

Într-un tabel se pot defini grupuri de coloane cu ajutorul etichetei container <COLGROUP> </COLGROUP>. În cadrul acestui grup, aspectul fiecărei coloane în parte este stabilit prin eticheta <COL>.

Modul de afișare al marginilor tabelului precum și al liniilor despărțitoare dintre linii și celule se poate stabili cu ajutorul atributelor frame și rules.

17. Test

La ce servește eticheta <TD>?

Pentru a insera un tabel în pagină.

Pentru a insera o linie într-un tabel.

Pentru a insera o celulă de date într-o linie a tabelului.

Următoarea construcție generează un tabel cu o line și două celule.

<TD bgcolor="blue">celula 11

<TD>Celula 12

</TABLE>

Ce culoare vor avea cele două celule?

Amândouă alb, deoarece așa este setată culoarea tabelului.

Amândouă roșu, deoarece așa a fost setată culoarea liniei.

Celula 11 albastru, deoarece culoarea ei a fost setată explicit și celula 12 roșu, deoarece face parte din linia a cărei culoare a fost setată roșu.

La ce servesc atributele width și height ale etichetei <TABLE>?

Stabilesc dimensiunile tabelului în pagină.

Aliniază tabelul față de restul elementelor din pagină.

Stabilesc dimensiunile celulelor tabelului.

Ce efect are următoarea construcție:

<TABLE border cellspacing="5" cellpadding="10">?

Textul din celule este distanțat cu 5 pixeli față de chenarul celulelor, iar celulele sunt distanțate între ele cu 10 pixeli.

Textul din celule este distanțat cu 10 pixeli față de chenarul celulelor, iar celulele sunt distanțate între ele cu 5 pixeli.

Chenarul tabelului are grosimea de 5 pixeli iar chenarul celulelor grosimea de 10 pixeli.

Care dintre următoarele construcții aliniază la dreapta conținutul celor două celule?

<TR align="left"><TD align="right">celula 11<TD>celula 12

<TR><TD align="right">celula 11<TD>celula 12

<TR align="right"><TD>celula 11<TD>celula 12

La ce folosește eticheta <TH>?

Introduce o celulă de date.

Introduce o celulă cu rol de cap de tabel.

Introduce o linie cu rol de cap de tabel.

Pentru a atașa un titlu tabelului folosim eticheta:

<HEAD>

<TITLE>

Ce efect are atributul colspan în construcția următoare:

<TR><TD colspan="3">cel 11 cel 12 cel 13?

Unifică trei celule pe orizontală.

Unifică trei celule pe verticală.

Unifică câte trei celule, atât pe orizontală cât și pe verticală.

În care dintre construcțiile următoare chenarul tabelului nu este afișat?

Atributul align al etichetei <TABLE> realizează:

Alinierea tabelului față de restul elementelor din pagină.

Alinierea textului în tabel.

Alinierea textului în fiecare celulă a tabelului

Tabele

1. c)

2. c)

3. a)

4. b)

5. c)

6. b)

7. b)

8. a)

9. b)

10. a)

Capitolul 10

Cadre (frames)

O modalitate de structurare avansată a unui document HTML este împărțirea ferestrei browserului în mai multe ferestre distincte, denumite cadre (frames).

Această facilitate permite afișarea simultană, în aceeași fereastră a browserului, a două sau mai multe documente HTML diferite, câte unul în fiecare cadru.

Pentru a realiza acest lucru sunt necesare următoarele:

un document de definire a cadrelor care conține etichetele care stabilesc numărul, dimensiunile și așezarea cadrelor în pagină

câte un fișier HTML pentru fiecare cadru în parte, prin care se stabilește conținutul cadrului respectiv.

De exemplu, o pagină Web care conține două cadre va fi definită prin trei documente HTML:

documentul de definire a cadrelor, care specifică dimensiunile și așezarea cadrelor în pagină;

cele două documente care descriu conținutul fiecărui cadru în parte.

În esență, cadrele fac posibilă afișarea în fereastra browserului a mai multe pagini, simultan.

1. Documentul de definire a cadrelor

În cadrul documentului de definire a cadrelor, blocul <BODY> </BODY> este înlocuit de blocul <FRAMESET> </FRAMESET>. În acest tip de document blocul <BODY> nu mai este folosit.

În interiorul blocului <FRAMESET>, fiecare cadru este introdus prin eticheta <FRAME>.

Definirea documentului ce va fi afișat într-un cadru se face prin atributul src (source). Acesta este un atribut obligatoriu al etichetei <FRAME>, și primește ca valoare adresa URL a documentului HTML care va fi încărcat în acel cadru.

Definirea cadrelor se face prin împărțirea ferestrelor în linii și coloane:

împărțirea unei ferestre într-un număr de cadre de tip coloană se face cu ajutorul atributului cols al etichetei <FRAMESET> ce descrie acea fereastră;

împărțirea unei ferestre în cadre de tip linie se face cu ajutorul atributului rows al etichetei <FRAMESET> care descrie fereastra.

Valorile atributelor cols si rows sunt liste de elemente separate prin virgulă care descriu modul în care se face împărțirea ferestrei.

Valorile acestor atribute pot fi exprimate în mai multe moduri:

în pixeli – în care caz valoarea este un număr întreg

în procente din dimensiunea ferestrei (un număr cuprins între 1 și 99, urmat de simbolul %)

în dimensiuni relative, n*. Simbolul n* semnifică faptul că linia sau coloana astfel definită ocupă a n-a parte din spațiul rămas după dispunerea în fereastră a liniilor, respectiv coloanelor precedente (vezi exemplele de mai jos).

Exemplul 1:

cols="200 , * , 50% , *

Această construcție descrie o împărțire în patru cadre de tip coloană, dintre care prima are 200 pixeli, a treia ocupă jumătate din spațiul total disponibil, iar a doua și a patra ocupă în mod egal restul de spațiu rămas disponibil.

Exemplul 2:

rows="200 , 50% , 1* , 2* "

În acest exemplu, pagina este împărțită în patru cadre de tip linie, dintre care prima are 200 pixeli, a doua ocupă jumătate din spațiul total disponibil iar a treia și a patra ocupă restul de spațiu rămas disponibil, care se împarte în trei părți egale, al treilea cadru ocupând o parte, iar al patrulea ocupând două părți.

Observații

dacă mai multe elemente din listă sunt configurate cu * , atunci spațiul disponibil rămas pentru ele se va împărți în mod egal.

în cadrul unui bloc <FRAMESET> poate fi inclus un cadru prin eticheta <FRAME> sau un alt bloc <FRAMESET> obținându-se astfel cadre imbricate.

În majoritatea exemplelor care vor urma am folosit ca URL-uri pentru documentele pe care le conțin cadrele, pagini deja construite în capitolele anterioare. Dacă ați salvat documentele HTML cu numele specificate în eticheta <TITLE> puteți verifica direct exemplele care vor urma. Dacă preferați să încărcați în cadrele descrise în exemplele următoare alte documente, va trebui să faceți modificările necesare specificând numele acestor fișiere.

Exemplul 10.1 împarte pagina în două cadre verticale, fiecare ocupând jumătate din pagină. Aspectul paginii este cel din Figura 10.1.

Exemplul 10. 1

<HTML>

<HEAD>

<TITLE>cadre1</TITLE>

</HEAD>

</FRAMESET>

</HTML>

În Exemplul 10.2 este creată o pagina Web cu trei cadre orizontale. Primul cadru are 100 de pixeli, al treilea ocupă 30% din fereastra browserului, iar al doilea ocupă restul spațiului. Pagina arată ca în Figura 10.2.

Exemplul 10. 2

<HTML>

<HEAD>

<TITLE>cadre2</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Exemplul 10.3 crează o matrice pătrată de 4 cadre (2 x 2). Pentru a realiza acest lucru, se folosesc simultan cele două atribute cols și rows. Pagina descrisă în acest document va avea aspectul din Figura 10.3.

Exemplul 10. 3

<HTML>

<HEAD>

<TITLE>cadre3</TITLE>

</HEAD>

</FRAMESET>

</HTML>

2. Cadre imbricate

Cadrele, ca și alte elemente ale paginii Web (liste, tabele), se pot imbrica, adică pot fi incluse cadre în interiorul altor cadre. În Exemplul 10.4 este creată o pagină cu trei cadre mixte. Pentru a construi pagina se procedează din aproape în aproape. Mai întâi, pagina este împărțită în două cadre de tip coloană, după care al doilea cadru este împărțit în două cadre de tip linie. Pagina va avea aspectul din Figura 10.4.

Exemplul 10. 4

<HTML>

<HEAD>

<TITLE>cadre4</TITLE>

</HEAD>

</FRAMESET>

</HTML>

3. Controlul aspectului unui cadru

Culoarea marginii cadrului

Pentru a stabili culoarea chenarului unui cadru se utilizează atributul bordercolor. Acest atribut primește ca valoare un nume de culoare sau o culoare definită în conformitate cu modelul RGB.

Atributul bordercolor poate fi atașat atât etichetei <FRAMESET> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, cât și etichetei <FRAME>, pentru a stabili culoarea chenarului pentru un cadru individual.

Exemplul 10.5 ilustrează atributul bordercolor. Pagina descrisă în acest document are aspectul din Figura 10.5.

Exemplul 10. 5

<HTML>

<HEAD>

<TITLE>cadre5</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Lățimea marginii cadrului

Atributul border al etichetei <FRAMESET> permite configurarea lățimii chenarelor tuturor cadrelor la un număr dorit de pixeli. Valoarea atributului border este un număr întreg, ce reprezintă numărul de pixeli, valoarea prestabilită fiind de 5 pixeli. În mod prestabilit, chenarul unui cadru este afișat și are aspect tridimensional.

Pentru a obține cadre fără chenar se utilizează setarea border="0".

Afișarea chenarului unui cadru se mai poate dezactiva și dacă se utilizează atributul frameborder cu valoarea "no". Acest atribut poate fi atașat atât etichetei <FRAMESET> (dezactivarea fiind valabilă pentru toate cadrele incluse) cât și etichetei <FRAME> (dezactivarea fiind valabila numai pentru un singur cadru).

Valorile posibile ale atributului frameborder sunt:

yes – echivalent cu 1

no – echivalent cu 0

Cadrele din Exemplul 10.6 nu au chenar. După cum puteți observa din Figura 10.6 crearea unor cadre fără chenar poate duce la apariția unor ambiguități în pagină așa încât acest efect trebuie folosit cu atenție.

Exemplul 10. 6

<HTML>

<HEAD>

<TITLE>cadre6</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Dimensiunea cadrului

Chiar dacă dimensiunile unui cadru au fost stabilite în mod explicit prin valorile atributelor etichetei <FRAMESET>, utilizatorul are posibilitatea de a altera aceste dimensiuni cu ajutorul mouse-ului.

În scopul prevenirii acestei situații se poate utiliza atributul noresize, atașat etichetei <FRAME>, al cărui efect este cel de blocare a posibilității de redimensionare a cadrului.

4. Bare de derulare

Atributul scrolling al etichetei <FRAME> este utilizat pentru a adăuga unui cadru o bară de derulare sau de defilare (scrolling bar), care permite navigarea în interiorul documentului afișat în cadru. Valorile posibile ale atributului scrolling sunt:

yes – bara de derulare este prezentă întotdeauna;

no – bara de derulare nu este disponibilă;

auto – bara de derulare este vizibilă atunci când este necesar. Aceasta opțiune lasă browserului posibilitatea de a adăuga sau nu bara, în funcție de dimensiunea textului din cadru.

Exemplul 10.7 ilustrează funcționarea atributului scrolling în cele trei situații.

Exemplul 10. 7

<HTML>

<HEAD>

<TITLE>cadre7</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Din Figura 10.7 se observă că, deoarece la primul cadru textul nu depășește dimensiunea ferestrei, bara de derulare nu este afișată deși atributul scrolling are valoarea "yes".

În cel de-al doilea cadru bara de derulare nu este afișată, indiferent de dimensiunea textului din cadru.

La cel de-al treilea cadru, prezența sau absența barei de derulare este condiționată de dimensiunea textului. Aici, deoarece textul depășește dimensiunea ferestrei, bara este afișata.

5. Poziționarea documentului într-un cadru

Atributele marginheight și marginwidth ale etichetei <FRAME> permit stabilirea distanței în pixeli dintre conținutul unui cadru și marginile verticale, respectiv orizontale ale cadrului. Valorile posibile ale acestor atribute sunt:

un număr de pixeli

procente din înălțimea, respectiv din lățimea cadrului

În Exemplul 10.8 fereastra browserului este împărțită în trei cadre de tip coloană de dimensiuni egale. În toate cele trei cadre este afișat același document, ceea ce diferă este poziționarea documentului în fiecare cadru.

Astfel, în cadrul din stânga, nu este specificată nici o valoare pentru atributele marginheight și marginwidth.

În cadrul din mijloc, se stabilește distanța de 50 de pixeli între marginea superioară și cea inferioară a cadrului și text.

În cadrul din dreapta se stabilește o distanță de 30 de pixeli între marginea din stânga și cea din dreapta a cadrului și text. Pagina are aspectul din Figura 10.8.

Exemplul 10. 8

<HTML>

<HEAD>

<TITLE>cadre8</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Atenție!

Există browsere care nu suportă cadre. Pentru acestea se utilizează în interiorul blocului <FRAMESET> eticheta <NOFRAMES> </NOFRAMES>. Dacă browserul poate să interpreteze cadre, va ignora ce se găsește în această porțiune, iar dacă nu, materialul cuprins în zona <NOFRAMES> </NOFRAMES> va fi singurul care va fi recunoscut și afișat.

Este de precizat și faptul că între <NOFRAMES> </NOFRAMES> se pot introduce orice alte etichete HTML (inclusiv imagini, hyperlink-uri, tabele).

6. Cadre interne (in-line frames)

Un cadru intern este specificat prin intermediul etichetei <IFRAME> </IFRAME>. Ea definește o arie rectangulară în interiorul documentului, arie în care browserul va afișa un alt document HTML, complet, inclusiv marginile și barele de derulare.

Un cadru intern se inserează într-o pagina Web în mod asemănător cu o imagine, în interiorul blocului <BODY>, așa cum rezultă din următorul exemplu:

În acest caz, am specificat că dorim un cadru intern care are 40% din înălțimea și 50% din lățimea paginii curente.

Atributele acceptate de eticheta <IFRAME> sunt în parte preluate de la etichetele <FRAME> și <FRAMESET>, cum ar fi:

src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name.

O parte din atributele <FRAME> sunt comune cu cele ale etichetei <IMG>:

vspace, hspace, align, width, height.

În Exemplul 10.9 am construit un cadru intern în care se deschide unul dintre documentele HTML create la capitolul Tabele.

Exemplul 10. 9

<HTML>

<HEAD>

<TITLE>cadre9</TITLE>

</HEAD>

<BODY>

<H1 align="center">Cadre interne</H1><HR>

Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta cadre interne.

<P><A href="cadre10.html">Pagina fara cadre interne</A>

</IFRAME>

</CENTER>

</BODY>

</HTML>

Din Figura 10.9 puteți observa că aspectul unui cadru intern este întrucâtva similar cu cel al unei imagini in-line.

Eticheta <IFRAME> se introduce în cadrul blocului <BODY> și în cazul folosirii ei nu mai este necesar un document de definire a cadrelor. Pentru situația când browserul nu acceptă cadre interne, am asigurat o versiune a paginii care nu conține astfel de cadre (cadre10.html) introdusă prin eticheta <A>. Conținutul acestei pagini este foarte simplu, servind doar la ilustrarea modului în care poate fi construită o alternativă la pagina cu cadre interne (Exemplul 10.10)

Exemplul 10. 10

<HTML>

<HEAD>

<TITLE>cadre10</TITLE>

</HEAD>

<BODY>

<H1 align="center">Pagina fara cadre interne</H1><HR>

</BODY>

</HTML>

Iată un alt exemplu (Exemplul 10.11) în care am creat o pagină care conține trei link-uri iar acestea deschid paginile referite de ele în cadrul intern din centrul paginii. Figura 10.10 redă aspectul acestei pagini.

Exemplul 10. 11

<HTML>

<HEAD>

<TITLE>cadre11</TITLE>

</HEAD>

<BODY>

<A href="tabele4.html" target="icad">Fisierul1</A><BR>

<A href="tabele5.html" target="icad">Fisierul2</A><BR>

<A href="tabele6.html" target="icad">Fisierul3</A><BR>

Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta cadre interne.

<P><A href="cadre10.html">Pagina fara cadre interne</A>

</IFRAME>

</CENTER>

</BODY>

</HTML>

În exemplu am folosit atributul name al etichetei <IFRAME> cu ajutorul căruia am atribuit un nume acestui cadru și anume "icad". Acest lucru a fost necesar pentru a specifica, prin intermediul atributului target al etichetei <A>, faptul că link-urile se vor deschide în cadrul intern.

7. Deschiderea documentelor în alte cadre

Dacă într-unul dintre documentele deschise în cadru există link-uri, acestea vor deschide paginile referite de ele în cadrul curent.

Acest comportament se poate schimba prin plasarea în eticheta <A> a atributului target, care precizează numele ferestrei (cadrului) în care se va încărca pagina nouă referită de legătură, conform sintaxei:

Numele unui cadru este stabilit prin atributul name al etichetei <FRAME> conform sintaxei:

În Exemplul 10.12 este prezentată o pagina Web cu două cadre. Documentul de definire a cadrelor este cadre12. html al cărui aspect este redat în Figura 10.11.

Exemplul 10. 12

<HTML>

<HEAD>

<TITLE>cadre12</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Documentul de definire a cadrelor împarte pagina în două cadre de tip coloană. În cel din stânga se va deschide documentul cadre13.html iar în cel din dreapta, documentul cadre14.html. Cel de-al doilea cadru a fost numit "cadru_dreapta".

În Exemplul 10.13 este creat documentul cadre13.html. Acest document conține, după cum observați, patru link-uri. Prin intermediul atributului target am specificat cadrul în care se vor deschide acestea. Toate aceste legături deschid paginile referite de ele în cadrul drept.

Exemplul 10. 13

<HTML>

<HEAD>

<TITLE>cadre13</TITLE>

</HEAD>

<BODY>

Legatura 1

</A><BR>

Legatura 2

</A><BR>

Legatura 3

</A><BR>

Home

</A><BR>

</BODY>

</HTML>

În Exemplul 10.14 este creat documentul cadre14.html.

Exemplul 10. 14

<HTML>

<HEAD>

<TITLE>cadre14</TITLE>

</HEAD>

<BODY>

<H3>Aici se vor deschide paginile referite de legaturile din cadrul stang</H3><HR>

</BODY>

</HTML>

Salvați cele trei fișiere cu numele specificate și deschideți cu browserul fișierul cadre12.html pentru a observa cum funcționează atributele prezentate.

Atributul target al etichetei <FRAME> acceptă și anumite valori predefinite și anume:

_self – încărcarea noii pagini are loc în cadrul curent

_blank – încărcarea noii pagini are loc într-o fereastră nouă, anonimă

_parent – încărcarea noii pagini are loc în cadrul părinte al cadrului curent dacă acesta există, altfel are loc în fereastra curentă a browserului

_top – încărcarea noii pagini are loc în fereastra browserului ce conține cadrul curent.

Următorul exemplu ilustrează felul cum funcționează aceste valori ale atributului target.

Documentul de definire a cadrelor este prezentat în Exemplul 10.15 aspectul său fiind cel din Figura 10.12. Pagina construită în acest exemplu conține două cadre orizontale. În cel de sus este încărcat documentul cadre17.html iar în cel de jos, documentul cadre16.html.

Exemplul 10. 15

<HTML>

<HEAD>

<TITLE>cadre15</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Exemplul 10.16 construiește documentul cadre16.html care conține trei legături către fișiere HTML create la capitolul Formatarea textului. Fiecare dintre aceste legaturi are specificat atributul target pentru a ilustra modul în care funcționează acesta.

Exemplul 10. 16

<HTML>

<HEAD>

<TITLE>cadre16</TITLE>

</HEAD>

<BODY>

Aceasta legatura se deschide in alta fereastra

</A><BR>

Aceasta legatura se deschide in fereastra curenta

</A><BR>

Aceasta legatura se deschide in fereastra parinte

</A><BR>

</BODY>

</HTML>

Documentul cadre17.html prezentat în Exemplul 10.17 este o pagină Web foarte simplă care se va deschide în cadrul de sus.

Exemplul 10. 17

<HTML>

<HEAD>

<TITLE>cadre17</TITLE>

</HEAD>

<BODY>

<H1 align="center">Atributul target</H1>

</BODY>

</HTML>

Pentru a observa modul de funcționare al atributului target salvați cele trei fișiere sub numele specificate și deschideți cu browserul documentul cadre15.html.

8. Sugestii privind folosirea cadrelor

Deși cadrele reprezintă o maniera destul de spectaculoasă de a structura o pagină Web, ele prezintă o mulțime de dezavantaje.

Încărcarea unei pagini care conține cadre se face mai greu, indexarea paginii de către motoarele de căutare este mai dificilă. De asemenea, deoarece documentul din fiecare cadru are propriul URL , este mai greu pentru vizitator să rețină adresa paginii în Favorites. Și, nu în ultimul rând, deoarece există browsere care nu suportă cadrele, este indicat să asigurați pentru fiecare pagină astfel structurată și o versiune fără cadre, ceea ce implică un efort suplimentar.

Având în vedere toate aceste aspecte, este bine să limitați folosirea cadrelor în paginile dumneavoastră doar la situațiile în care nu puteți proceda altfel.

9. Rezumat

Folosirea cadrelor într-un document HTML permite deschiderea mai multor pagini distincte în documentul respectiv.

Pentru a crea o pagină care conține cadre sunt necesare mai multe documente HTML:

documentul de definire a cadrelor

câte un document HTML pentru fiecare cadru definit

Documentul de definire a cadrelor nu conține blocul <BODY> acesta fiind înlocuit de blocul <FRAMESET> </FRAMESET>. În cadrul blocului <FRAMESET> fiecare cadru este introdus prin eticheta <FRAME>.

Împărțirea ferestrei în cadre de tip coloană se face cu ajutorul atributului cols iar în cadre de tip linie se face cu ajutorul atributului rows. Ambele atribute sunt asociate etichetei <FRAMESET>.

Pentru a stabili lățimea chenarului unui cadru se folosește atributul border al etichetei <FRAME>. Pentru a stabili culoarea chenarului unui cadru se folosește atributul bordercolor al etichetei <FRAME>. Aceste atribute pot fi asociate și etichetei <FRAMESET>, caz în care efectul lor se va aplica tuturor cadrelor din set.

Prezența barelor de derulare într-un cadru se stabilește cu ajutorul atributului scrolling.

Pentru a poziționa documentul într-un cadru se folosesc atributele marginwidth și marginheight.

Într-o pagină Web se pot introduce și cadre interne, cu ajutorul etichetei <IFRAME> </IFRAME>.

Pentru a specifica fereastra sau cadrul în care se va deschide un document se folosește atributul target care poate avea ca valoare numele ferestrei (cadrului) sau poate avea o valoare predefinită.

Este recomandat să asigurați o versiune fără cadre a documentului HTML, pentru ca acesta să poată fi vizualizat cu browserele care nu suportă cadre. Pentru aceasta, elementele care fac parte din versiunea fără cadre se includ între etichetele <NOFRAMES> </NOFRAMES>.

10. Test

În ce zonă a unui document HTML se introduce blocul <FRAMESET>?

În blocul <BODY>

În blocul <HEAD>

<FRAMESET> formează un bloc separat.

Cum se introduce un cadru în pagină?

Prin eticheta <FRAMESET>

Prin eticheta <FRAME>

Prin eticheta <SRC>

Dorim să împărțim o pagină în trei cadre de tip coloană, primul având jumătate din pagină, iar celelalte două spațiul rămas împărțit în mod egal. Care dintre construcțiile următoare realizează acest lucru?

<FRAMESET cols="* , *, *"

<FRAMESET cols="50%, 1* , 2*"

<FRAMESET cols="50%, * , *"

Ce realizează următoarea construcție?

<HTML>

</FRAMESET>

</HTML>

Împarte pagina în patru cadre, două de tip coloană, două de tip linie.

Împarte pagina în două cadre de tip coloană, cel de-al doilea fiind împărțit în două cadre de tip linie.

Împarte pagina în trei cadre de tip linie.

În construcția următoare la ce folosește atributul scrolling?

Permite auto-dimensionarea cadrului în funcție de mărimea textului.

Adaugă automat bara de derulare pentru acest cadru.

Lasă browserului posibilitatea de a adăuga sau nu bara de derulare, în funcție de mărimea textului din cadru.

La ce folosesc atributele marginheight și marginwidth ale etichetei <FRAME>?

Dimensionează marginile cadrului.

Dimensionează chenarul cadrului.

Stabilesc distanța dintre marginile cadrului și conținutul său.

Unde se introduce eticheta <IFRAME>?

În blocul <BODY>

În blocul <FRAMESET>

În blocul <FRAME>

La ce servește atributul bordercolor asociat etichetei <FRAMESET>?

Stabilește culoarea chenarului unui cadru.

Stabilește culoarea chenarelor tuturor cadrelor definite în <FRAMESET>.

Stabilește culoarea de fond a cadrelor definite în <FRAMESET>.

Care dintre următoarele construcții este corectă?

Cum se realizează deschiderea documentului dintr-un cadru într-o fereastra nouă?

Cadre

1. c)

2. b)

3. c)

4. b)

5. c)

6. c)

7. a)

8. b)

9. a)

10. b)

Capitolul 11

Formulare

Cu siguranță ați văzut cum arată un formular într-o pagină Web. De exemplu, atunci când completați o carte de oaspeți (guestbook) aveți de-a face cu un formular. Atunci când selectați mai multe opțiuni dintr-o listă sau introduceți un cuvânt într-un motor de căutare, folosiți, de asemenea, un formular.

Formularul reprezintă unul dintre cele puternice elemente ale unei pagini Web. Prin intermediul formularelor se realizează interactivitatea cu vizitatorul paginii, acestea permițându-vă să obțineți informații despre cei care vizitează paginile dumneavoastră.

1. Ce este un formular?

Un formular este un ansamblu de zone active alcătuit din mai multe tipuri de elemente: butoane, casete de selecție, câmpuri de editare, etc., ce permit utilizatorilor să introducă efectiv informații. Aceste informații sunt ulterior transmise serverului pe care este găzduită pagina dumneavoastră, unde vor putea fi prelucrate.

O sesiune cu o pagina Web ce conține un formular cuprinde două etape:

Utilizatorul completează formularul și, prin apăsarea butonului de expediere, trimite serverului datele înscrise în formular.

O aplicație dedicată de pe server (un script) analizează informațiile transmise și, în funcție de configurația scriptului, fie stochează datele într-o bază de date, fie le transmite la o adresă de mail indicată de dumneavoastră. Dacă este necesar, serverul poate expedia și un mesaj de răspuns utilizatorului.

Cel mai important lucru pe care trebuie să-l înțelegeți în legătură cu formularele este că aici apar două probleme distincte și care necesită instrumente diferite pentru a le gestiona.

Prima dintre ele este plasarea formularului în pagină și asigurarea bunei lui funcționări. Acest lucru se realizează prin HTML și de el ne ocupăm în acest capitol.

Cea de-a doua este gestionarea și prelucrarea informațiilor pe care vizitatorul le introduce prin intermediul formularului. Această problemă este rezolvată cu ajutorul scripturilor CGI stocate pe server, subiect despre care vom vorbi în capitolul următor.

Structura formularele poate varia, de la o simplă casetă de text pentru introducerea unui șir de caractere, până la un ansamblu complex, cu multiple secțiuni și care oferă facilități puternice de transmitere/prelucrare a datelor.

2. Crearea unui formular

Un formular este definit într-un bloc delimitat de etichetele

<FORM> </FORM>. Eticheta </FORM>, de închidere, este obligatorie.

În interiorul blocului sunt incluse:

elementele formularului, în care vizitatorul urmează să introducă informații

un buton de expediere (submit), la apăsarea căruia, datele sunt transmise către server

opțional, un buton de anulare (reset, cancel), prin care utilizatorul poate anula datele înscrise în formular

Tot ceea ce este inclus între eticheta de deschidere și cea de închidere face parte din formular.

Eticheta <FORM> are două atribute esențiale:

action – comunică browserului unde să trimită datele introduse în formular. În general valoarea atributului action este adresa URL a scriptului aflat pe serverul care primește datele formularului. De exemplu:

<FORM action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.

method – precizează metoda utilizată de browser pentru expedierea datelor formularului.

Atributul method poate avea două valori:

post – folosită în cele mai multe cazuri. Indică serverului să furnizeze datele direct scriptului ca date de intrare standard.

get (valoarea implicită) – datele din formular sunt adăugate la adresa URL precizată de atributul action, între adresa URL și date fiind inserat un "?". Datele sunt adăugate conform sintaxei:

nume_camp=valoare_camp.

Între diferite seturi de date este introdus un "&". De exemplu:

"http://www.yahoo.com/cgi-bin/nume_fis.cgi?

nume1=valoare1&nume2=valoare2"

Cea mai facilă cale prin care informațiile introduse într-un formular pot parveni creatorului paginii este folosirea comenzii mailto: Am mai întâlnit această comandă la capitolul Legături în contextul următor:

De data aceasta nu mai este vorba de crearea unei legături care să lanseze în execuție aplicația de mail a utilizatorului, ci de transmiterea datelor introduse în formular la o adresă de mail specificată de dumneavoastră.

Acest lucru se poate realiza precizând ca valoare a atributului action următoarea secvență: "mailto:adresa_mail", ca în exemplul următor:

Așa cum spuneam, atributul action comunică browserului unde să trimită datele introduse în formular. Folosind comanda mailto: browserului i se indică să trimită datele la adresa de mail specificată în comandă.

Din păcate, această comandă nu este executată în acest mod decât de browserele Netscape. Browserele Internet Explorer nu recunosc comanda mailto: prezentă în cadrul formularelor. Acestea o execută la fel cum este ea executată atunci când face parte din eticheta <A> ca valoare a atributului href adică lansează aplicația de mail a utilizatorului.

Din acest motiv, inclusiv pentru trimiterea datelor la o adresă specificată de mail, se folosesc scripturi CGI. Pentru a nu intra încă în amănunte privind scripturile, vom folosi totuși în exemplele următoare comanda mailto:

Rețineți totuși că afișarea corectă a unui formular în pagină nu este decât prima etapă a utilizării formularului. Pentru a face o testare completă trebuie să aveți un script instalat pe server care să prelucreze datele din formular și să le transmită la adresa de mail specificată.

Pentru a defini elementele care fac parte din formular se utilizează etichetele <INPUT>, <SELECT>, <OPTION> și <TEXTAREA>.

3. Eticheta <INPUT>

Prin intermediul etichetei <INPUT> se pot introduce în formular câmpuri de editare (casete de text), câmpuri de tip password, butoane de expediere și anulare, butoane radio și casete de validare.

Eticheta <INPUT> are următoarele atribute:

type – prin care se precizează tipul elementului.

name – permite atașarea unui nume fiecărui element al formularului.

value – permite atribuirea unei valori inițiale unui element al formularului.

Perechea de atribute name/value (nume/valoare) este deosebit de importantă pentru buna funcționare a formularului.

Fiecare element introdus prin eticheta <INPUT> reprezintă o variabilă. Informația introdusă de utilizator în câmpul elementului respectiv reprezintă valoarea pe care o primește această variabilă. Din acest motiv, toate elementele introduse prin eticheta <INPUT> trebuie să aibă atribuit un nume. Acest lucru este obligatoriu deoarece, în caz contrar, variabila reprezentată de acel element nu va avea un identificator.

În plus, este indicat să atribuiți nume distincte diferitelor elemente care fac parte din formular. Altminteri, scriptul CGI care prelucrează datele nu va ști să facă distincția între variabile având același nume și valori diferite.

Atributul type poate avea următoarele valori:

text – se folosește pentru a introduce un câmp de editare pe o singură linie

password – se folosește pentru a insera un câmp de editare în care caracterele introduse sunt înlocuite cu asteriscuri (*)

radio – folosit pentru a insera un șir de butoane radio (elemente care se folosesc pentru a selecta dintr-o listă de opțiuni una și numai una dintre ele)

checkbox – folosit pentru a introduce un șir de casete de validare (elemente care se folosesc când dintr-o listă de opțiuni se poate alege mai mult de o singură variantă)

submit – se folosește pentru a introduce un buton de expediere

reset – se folosește pentru a introduce un buton de anulare a informațiilor introduse în formular

button – se folosește pentru a introduce în formular un buton obișnuit

hidden – se folosește pentru a introduce în formular un câmp ascuns

Fiecare dintre valorile atributului type generează un anumit tip de element în cadrul formularului.

Exemplul 11.1 creează un formular foarte simplu care conține un câmp de editare și un buton de expediere. Aspectul formularului este redat în Figura 11.1.

Exemplul 11. 1

<HTML>

<HEAD>

<TITLE>formulare1</TITLE>

</HEAD>

<BODY>

<H1 align="center"> Caseta de text si buton de expediere</H1><HR>

Introduceti adresa dvs. de mail:

</FORM>

</BODY>

</HTML>

După cum observați, numele atribuit câmpului de editare este "adresa" iar atributul value a primit ca valoare șirul de caractere "adresa mail". Acest text va fi afișat în interiorul câmpului de editare, înainte ca utilizatorul să înceapă introducerea informațiilor. Dacă atributul value nu era prezent sau era inițializat cu stringul vid ( "" ), caseta de text ar fi fost goală.

În cadrul formularului este prezent și un buton de expediere, inserat de asemenea prin intermediul etichetei <INPUT> având atributul type setat cu valoarea "submit". Așa cum se observă din figură, pe buton este afișat textul "expediaza", deoarece pentru acest element, atributului value i-a fost atribuită ca valoare textul respectiv.

Casete de text

În Exemplul 11.2 am creat un formular care conține trei casete de text (câmpuri de editare) în care utilizatorul este rugat să introducă numele, prenumele și adresa de mail, precum și o casetă de tip password, care cere introducerea unei parole. Așa cum veți observa din Figura 11.2, o casetă de tip password este asemănătoare cu un câmp de editare, singura diferență fiind aceea că aici caracterele nu sunt afișate în clar ci sunt înlocuite cu asteriscuri.

În plus, formularul conține un buton de expediere și unul de anulare a datelor introduse.

Exemplul 11. 2

<HTML>

<HEAD>

<TITLE>formulare2</TITLE>

</HEAD>

<BODY>

<H1 align="center">Casete de text</H1><HR>

Introduceti numele:

Introduceti prenumele:

Introduceti adresa de mail:

Introduceti parola:

</FORM>

</BODY>

</HTML>

Pentru elementele de tip casetă de text și password sunt utile și atributele:

maxlength – care stabilește numărul maxim de caractere care poate fi introdus în câmpul de editare

size – care stabilește lățimea acestui câmp

Butoane radio

În Exemplul 11.3 am creat un formular care conține un șir de butoane radio, prin care se cere părerea vizitatorului despre o pagină Web. După cum observați, fiecare element de tip buton radio are același nume și anume "opinie" deoarece nu se poate selecta decât un singur element, astfel încât orice ambiguitate este exclusă.

Fiecare buton radio trebuie să aibă o valoare. Din acest motiv pentru fiecare buton atributul value a fost setat la o altă valoare. Alegerea uneia dintre opțiuni, de exemplu "buna", face ca variabila "opinie" să primească valoarea "buna". Prin urmare, serverului îi va fi transmisă perechea "opinie=buna".

În plus, observați prezența atributului checked, care are rolul de a prestabili o anumită opțiune, pe care însă utilizatorul o poate schimba, dacă dorește. Aspectul formularului este cel din Figura 11.3.

Exemplul 11. 3

<HTML>

<HEAD>

<TITLE>formulare3</TITLE>

</HEAD>

<BODY>

<H1 align="center">Butoane radio</H1><HR>

Ce parere aveti despre aceasta pagina?<BR>

<INPUT type="radio" name="opinie" value="foarte buna" checked>Foarte buna<BR>

<INPUT type="radio" name="opinie" value="destul de buna">Destul de buna<BR>

<INPUT type="radio" name="opinie" value="proasta">Proasta<BR>

</FORM>

</BODY>

</HTML>

Casete de validare

Exemplul 11.4 creează un șir de casete de validare, care se deosebesc de butoanele radio prin faptul că se pot selecta mai multe opțiuni dintre cele prezentate. Figura 11.4 redă aspectul formularului construit în acest exemplu.

Exemplul 11. 4

<HTML>

<HEAD>

<TITLE>formulare4</TITLE>

</HEAD>

<BODY>

<H1 align="center">Casete de validare</H1><HR>

Care sunt hobby-urile dumneavoastra?<BR>

<INPUT type="checkbox" name="hobby" value="sport">Sport<BR>

<INPUT type="checkbox" name="hobby" value="lectura">Lectura<BR>

<INPUT type="checkbox" name="hobby" value="jocuri">Jocuri pe computer<BR>

<INPUT type="checkbox" name="hobby" value="internet">Surfing pe net<BR>

<INPUT type="checkbox" name="hobby" value="alpinism">Alpinism<BR>

</FORM>

</BODY>

</HTML>

O casetă de validare are două stări: marcată sau nemarcată (on sau off). Ca și la butoanele radio, atributul name are în exemplul considerat o singură valoare, "hobby", iar atributul value are, pentru fiecare casetă, valori distincte. Serverului îi sunt transmise numai acele valori care au fost marcate în casetele de validare corespunzătoare.

Și în cazul casetelor de validare este posibilă prezența atributului checked care preselectează o anumită opțiune sau mai multe.

Butoane

În cadrul unui formular se pot introduce și butoane obișnuite (altele decât butoanele Submit și Reset). Rolul acestora este de a iniția anumite acțiuni în momentul când utilizatorul face click cu mouse-ul pe ele. Limbajul HTML nu oferă instrumentele necesare pentru a specifica ce anume se întâmplă când butonul este apăsat. Pentru aceasta este necesar să includeți în documentul HTML scripturi JavaScript care să trateze aceste evenimente.

Ca și butoanele Submit și Reset, butoanele obișnuite sunt incluse în formular cu ajutorul etichetei <INPUT> având atributul type setat la valoarea button:

<INPUT type="button" name="buton" value="text">.

Textul specificat ca valoare a atributului value va fi afișat pe buton.

Butoanele pot fi folosite pentru a valida informațiile introduse în formular, pentru a deschide documente și a iniția diverse alte acțiuni din partea browserului.

Câmpuri ascunse (hidden fields)

Câmpurile ascunse sunt elemente care fac parte dintr-un formular dar nu sunt vizibile în cadrul paginii. Prin intermediul acestora se pot include în formular informații care nu pot fi alterate de browser sau de utilizator. Introducerea unui astfel de câmp în formular se face prin eticheta

<INPUT type="hidden">.

Ca și în cazul celorlalte elemente ale formularului este necesară prezența atributelor name și value, ca în exemplul următor:

Câmpurile ascunse pot servi la o gestionare mai bună a datelor transmise la server. De exemplu, să presupunem că avem un formular care cere utilizatorului câteva informații inițiale: numele și adresa. Pe baza acestora, aplicația de pe server inițiază afișarea unui nou formular care solicită introducerea unor informații mai detaliate.

Deoarece este plictisitor pentru vizitator să reia introducerea informațiilor inițiale, scriptul poate fi configurat să depună primele informații în câmpurile ascunse ale celui de-al doilea formular. În această situație este utilă folosirea câmpurilor ascunse deoarece serverul procesează un singur formular la un moment dat și nu are cum să știe că cel de-al doilea formular a fost completat de aceeași persoană.

4. Etichetele <SELECT> și <OPTION>

Cu ajutorul etichetei <SELECT> </SELECT> se poate introduce într-un formular un meniu derulant. Crearea unui meniu pentru vizitatorii paginii îi ajută la selectarea unor opțiuni dintr-o listă predefinită.

Fiecare opțiune care face parte din blocul <SELECT> se introduce prin eticheta <OPTION>.

În Exemplul 11.5 este construit un meniu derulant, din care vizitatorul poate selecta opțiunea dorită. Atributul name are același rol ca și în eticheta <INPUT>. Dacă vizitatorul selectează din meniu zodia Taur, de exemplu, la apăsarea butonului de expediere, serverului îi este transmisă perechea: "zodia=taur". Atributul size este setat la valoarea "1". Setarea atributului size la valoarea "1" creează o un meniu derulant cu o singură opțiune vizibilă inițial așa cum se poate observa din Figura 11.5.

Exemplul 11. 5

<HTML>

<HEAD>

<TITLE>formulare5</TITLE>

</HEAD>

<BODY>

<H1 align="center">Meniu derulant</H1><HR>

Care este zodia dumneavoastra?<BR>

<OPTION>Berbec

<OPTION>Taur

<OPTION>Gemeni

<OPTION>Rac

<OPTION>Leu

<OPTION>Fecioara

<OPTION>Balanta

<OPTION>Scorpion

<OPTION>Sagetator

<OPTION>Capricorn

<OPTION>Varsator

<OPTION>Pesti

</SELECT>

</FORM>

</BODY>

</HTML>

Dacă atributul size este setat la o valoare mai mare decât 1 meniul va afișa un număr de opțiuni egal cu această valoare și va conține o bară de derulare pentru a face accesibile și celelalte opțiuni. În Figura 11.6 poate fi văzut un meniu la care valoarea atributului size este 6.

5. Eticheta <TEXTAREA>

Cu ajutorul etichetei <TEXTAREA> </TEXTAREA> puteți insera în pagină o casetă de text multi-linie care permite vizitatorului să introducă un text mai lung, care se poate întinde pe mai multe linii. Această etichetă se folosește atunci când dorim să cerem vizitatorului o opinie despre un anumit subiect, care necesită introducerea unui text mai lung decât o singură linie (acest element se mai numește și casetă de comentarii). <TEXTAREA> este o etichetă container, deci necesită eticheta de închidere </TEXTAREA>.

Atributele rows și cols stabilesc numărul de linii, respectiv de coloane rezervate pentru introducerea textului.

Exemplul 11.6 introduce în pagină o casetă pentru comentarii, aspectul acesteia fiind redat în Figura 11.7.

Exemplul 11. 6

<HTML>

<HEAD>

<TITLE>formulare6</TITLE>

</HEAD>

<BODY>

<H1 align="center">Caseta de comentarii</H1><HR>

Care este opinia dumneavoastra despre acest film?<BR>

</FORM>

</BODY>

</HTML>

Toate elementele prezentate pot fi reunite într-un singur formular sau puteți crea formulare diferite, în funcție de informațiile pe care doriți să le obțineți de la vizitatorii paginii.

Dacă doriți să introduceți în pagină mai multe formulare, sau elemente de tipuri diferite în cadrul aceluiași formular, trebuie să aveți în vedere aspectele care țin de alinierea acestora. O posibilitate de a alinia elementele conținute într-un formular este folosirea tabelelor.

Exemplul 11.7 conține elemente de mai multe tipuri încadrate într-un formular unic. Pentru alinierea unora dintre ele am folosit un tabel. Aspectul paginii descrise în acest document este cel din Figura 11.8.

Exemplul 11. 7

<HTML>

<HEAD>

<TITLE>formulare7</TITLE>

</HEAD>

<BODY>

<H1 align="center">Alinierea elementelor</H1><HR>

<H3>Comandati Pizza</H3><P>

<P>Cate pizza doriti?

<INPUT type="radio" name="marime" value="medie">Medie<BR>

<INPUT type="radio" name="marime" value="normala">Normala

<P>Topping-uri<P>

<INPUT type="checkbox" name="topping" value="salam">Salam<BR>

<INPUT type="checkbox" name="topping" value="carnati">Carnati<BR>

<INPUT type="checkbox" name="topping" value="sunca">Sunca<BR>

<INPUT type="checkbox" name="topping" value="ciuperci">Ciuperci<BR>

<INPUT type="checkbox" name="topping" value="ceapa">Ceapa<BR>

<INPUT type="checkbox" name="topping" value="masline">Masline

<P>

<TR>

<TD width="20%">Numele

<TR>

<TD width="20%">Telefonul

<TR>

<TD width="20%">Adresa

<TR>

<TD width="20%">Numărul cartii de credit

</TABLE>

<P>

</CENTER>

</FORM>

</BODY>

</HTML>

6. Validarea datelor

Unul dintre aspectele importante pe care trebuie să le aveți în vedere atunci când folosiți formulare în paginile dumneavoastră este validarea datelor introduse de vizitatorii lor. Limbajul HTML oferă relativ puține instrumente pentru îndeplinirea acestei sarcini. Totuși, aveți la dispoziție câteva posibilități.

Folosiți atributul maxlength atunci când introduceți un câmp de editare, pentru a împiedica vizitatorul să introducă un număr eronat de caractere. De exemplu, dacă cereți introducerea într-o casetă de text a codului numeric personal, acea casetă nu trebuie să permită introducerea a mai mult de 13 caractere, un câmp de editare care cere introducerea codului poștal nu trebuie să permită introducerea a mai mult de 4 caractere, etc.

Pentru a vă asigura că vizitatorul introduce date corecte într-un câmp de editare (de exemplu o adresă de mail validă trebuie să conțină obligatoriu caracterul "@") nu există instrumente HTML. Pentru a realiza astfel de sarcini sunt necesare scripturi JavaScript. În capitolul JavaScript veți găsi scripuri utile care fac posibile validările datelor, încă din momentul introducerii lor.

Folosiți de câte ori este posibil butoanele radio, casetele de validare și meniurile, pentru a simplifica procesul de introducere a datelor. Fiți cât mai explicit, asigurați indicațiile necesare pentru completarea formularelor, precizând, unde este cazul, dacă pot fi selectate mai multe opțiuni sau numai una singură.

Atenție!

Asigurați-vă că scriptul care prelucrează informațiile din formular are facilități de gestionare a erorilor.

Dacă este semnalată o eroare, furnizați vizitatorului un mesaj de eroare explicit și, eventual, câteva corecții posibile.

Una dintre cele mai frustrante situații este ca după completarea unui formular complex, la apariția unei erori, vizitatorul să fie nevoit să reia completarea integrală a formularului. Evitați acest lucru utilizând scripturi care returnează utilizatorului formularul completat, având câmpurile greșite marcate pentru corectare.

Nu uitați un amănunt foarte important: informațiile introduse de vizitatori în formulare vă sunt necesare dumneavoastră, pentru a îmbunătăți eficiența și calitatea site-ului sau chiar pentru a derula afaceri prin intermediul său. De aceea corectitudinea acestor date este esențială.

Faceți în așa fel încât vizitatorii site-ului dumneavoastră să completeze ușor și cu plăcere formularele prezente în pagini.

7. Rezumat

Formularele servesc la stabilirea unei legături interactive cu vizitatorii unei pagini Web și la obținerea de informații de la aceștia.

Un formular se introduce în pagină cu ajutorul etichetei <FORM> </FORM>.

În cadrul acestei etichete pot fi incluse diverse elemente care fac parte din formular:

prin eticheta <INPUT> pot fi introduse câmpuri de editare, câmpuri de tip password, butoane radio, casete de selecție, butoane de expediere, butoane de anulare și butoane obișnuite

prin eticheta <SELECT> pot fi introduse meniuri derulante, fiecare element al meniului fiind introdus prin eticheta <OPTION>

prin eticheta <TEXTAREA> pot fi introduse câmpuri de editare multilinie.

Pentru a specifica unde vor fi trimise datele introduse în formular se folosește atributul action al etichetei <FORM>. Pentru a stabili modul în care aceste date sunt transmise se folosește atributul method al etichetei <FORM>.

Formularele reprezintă partea vizibilă a procesului de interacțiune cu vizitatorul paginii Web. Odată ce datele au fost introduse în câmpurile formularului, ele trebuie transmise, prelucrate și stocate, în funcție de nevoile creatorului paginii. Acest lucru se realizează cu ajutorul scripturilor CGI instalate pe server, despre care vom vorbi în capitolul următor.

8. Test

1. Ce atribut indică browserului unde să trimită informațiile din formular?

input

action

method

2. Care dintre aceste valori nu aparține atributului method?

Get

Href

Post

3. Care dintre următoarele afirmații este falsă?

Prin eticheta <INPUT> se pot introduce în formular câmpuri de editare de tip password.

Prin eticheta <INPUT> se pot introduce în formular butoane radio.

Prin eticheta <INPUT> se pot introduce în formular meniuri derulante.

4. Pentru a introduce în formular un buton de expediere se folosește construcția:

5. Fie următoarea construcție:

<INPUT type="radio" name="limba" value="romana">Limba romana

<INPUT type="radio" name="limba" value="germana">Limba germana

<INPUT type="radio" name="limba" value="maghiara">Limba maghiara

</FORM>

Dacă este bifată opțiunea Limba romana, care este perechea nume/valoare care va fi transmisă serverului?

"limba=Limba romana"

"limba=romana"

"radio=romana"

6. Care este diferența dintre un câmp de editare de tip text și unul de tip password?

Într-un câmp de tip text se pot introduce mai multe linii, într-unul de tip password o singură linie.

Într-un câmp de tip text caracterele introduse sunt afișate, într-unul de tip password sunt înlocuite cu asteriscuri.

Câmpul de editare se introduce cu ajutorul etichetei <INPUT>, câmpul de tip password se introduce cu ajutorul etichetei <SELECT>.

7. Pentru a insera într-un formular o casetă de validare se folosește eticheta <INPUT> cu atributul type setat la valoarea:

"radio"

"checkbox"

"option"

8. Ce realizează eticheta <SELECT>?

Introduce un buton de anulare.

Introduce un meniu derulant.

Introduce o listă de casete de validare.

9. La ce servește eticheta <TEXTAREA>?

Stabilește zona din fereastra browserului care este rezervată pentru text.

Introduce în formular un câmp de editare multi-linie.

Introduce în formular un câmp de editare pe o singură linie.

10. Care dintre următoarele afirmații este falsă?

Datele introduse în formular sunt trimise la server, dacă este folosit un script CGI.

Datele introduse în formular sunt trimise la o adresă de mail specificată, dacă este folosită comanda mailto:

Datele introduse în formular sunt stocate pe hard-disk-ul vizitatorului paginii.

Formulare

1. b)

2. b)

3. c)

4. b)

5. b)

6. b)

7. b)

8. b)

9. b)

10. c)

Capitolul 12

Scripturi CGI

Programare CGI, scripturi CGI sunt cuvinte care stârnesc, cel mai adesea, teama. Multora dintre cei care doresc să creeze pagini Web și nu sunt programatori profesioniști această zonă le apare misterioasă și dificil de înțeles. În acest capitol vom învăța chestiunile fundamentale și principiile care guvernează realizarea acestor scripturi precum și modul lor de utilizare. Veți constata că, deși realizarea unui script este destul de laborioasă și necesită cunoașterea aprofundată a cel puțin unui limbaj de programare (C++ sau Perl), nu vă va fi deloc greu să înțelegeți modul cum sunt ele concepute.

Vestea bună este aceea că, deși stăpânirea unui limbaj de programare este binevenită, nu este absolut necesară pentru a putea utiliza scripturi CGI în paginile dumneavoastră. Nu este nevoie să creați propriile dumneavoastră scripturi. Pe Web există mii de scripturi gratuite care pot fi descărcate și utilizate conform propriilor necesități. Tot ceea ce aveți de făcut este să înțelegeți principiile după care sunt realizate, modul lor de funcționare și maniera în care trebuie să le setați pentru a le adapta nevoilor dumneavoastră.

1. Ce este CGI?

Să începem prin a preciza ce nu este CGI: nu este un limbaj de programare.

CGI, prescurtare de la Common Gateway Interface, este un protocol standard de comunicare între documentele Web și aplicațiile localizate pe serverul Web.

Scripturile CGI sunt programe care respectă acest protocol (un protocol este un set de reguli). Un script CGI este, deci, un program care comunică într-un anumit mod cu pagina dumneavoastră. Existența acestui protocol de comunicare între programele de pe server și documentele Web permite crearea unor pagini interactive și dinamice, lucru care nu poate fi făcut folosind doar HTML.

Atunci când browserul solicită un script CGI aflat pe server, serverul lansează în execuție scriptul și îi transmite acestuia headerele HTTP de cerere primite de la browser. După ce execuția scriptului se încheie, rezultatele sunt transmise serverului, care formatează headerele de răspuns și le transmite browserului pentru ca acesta să afișeze rezultatele. O altă posibilitate este ca scriptul să conțină instrucțiuni prin care headerele de răspuns sunt configurate chiar de script și transmise de acesta direct browserului.

Indiferent dacă solicită un document Web sau un script, browserul trebuie să cunoască locația serverului Web și numele fișierului solicitat. Această informație îi este transmisă browserului prin intermediul atributului action al etichetei <FORM> care primește drept valoare adresa URL a scriptului stocat pe server. De obicei, scripturile CGI sunt stocate pe server într-un director special destinat lor, care se numește cgi-bin.

2. Transferul datelor

Așa cum am văzut în capitolul anterior, datele pe care dorim să le obținem de la vizitatorul paginii sunt colectate prin intermediul formularelor. Datele astfel colectate sunt transmise de către browser la serverul pe care este instalat scriptul CGI prin intermediul headerelor HTTP de cerere.

Cele mai importante headere HTTP de cerere sunt Get și Post. Prin intermediul atributului method al etichetei <FORM> este specificat ce tip de header HTTP de cerere este utilizat pentru a transfera datele la server. Dacă metoda folosită este Get, datele sunt transmise prin intermediul adresei URL. Dacă folosiți metoda Post datele sunt transmise sub forma unui fișier separat.

Este recomandată folosirea metodei Post atunci când volumul de date transmise este mare (depășește 1024 de octeți, lungimea maximă a unui URL). După ce metoda de transmitere este stabilită, browserul creează un header HTTP de cerere prin care este identificată localizarea scriptului pe server și apoi transmite headerul la server. Serverul recepționează headerul de cerere și apelează scriptul CGI.

Odată datele ajunse la server, scriptul este lansat în execuție iar datele îi sunt transmise acestuia prin intermediul unui tip special de variabile numite variabile de mediu (dacă folosiți metoda Get) sau prin intermediul fișierului standard de intrare (dacă folosiți metoda Post).

Scriptul CGI execută sarcinile pentru care a fost conceput și obține anumite rezultate care urmează a fi transmise browserului prin intermediul unor headere HTTP de răspuns. De obicei, scriptul configurează un singur header de răspuns, și anume Content-Type. Acest header comunică browserului tipul de date care îi vor fi returnate: documente HTML, imagini sau alt tip de fișiere. Serverul adaugă și el headere HTTP de răspuns suplimentare, apoi strânge toate rezultatele și headerele de răspuns într-un pachet care este transmis browserului. Browserul îl recepționează și afișează informațiile primite în modul descris de headerele de răspuns.

3. Execuția scriptului

Ce face scriptul CGI după ce este lansat în execuție? Răspunsul este simplu: execută sarcinile pentru care a fost construit. Sarcinile pe care le poate realiza un script sunt diverse și numeroase. Iată câteva exemple:

manipularea informațiilor introduse prin intermediul formularelor

manipularea hărților de imagini

generarea contoarelor care monitorizează numărul de accesări ale paginii (hit counters)

construirea de motoare de căutare

administrarea licitațiilor on-line

crearea de aplicații interactive cum ar fi forumurile sau camerele de chat

crearea și manipularea bazelor de date

Cum am mai spus, scrierea unui script care îndeplinește astfel de sarcini nu este simplă. Pentru a putea concepe un script este necesară cunoașterea aprofundată a unui limbaj de programare. Sunt utilizate limbaje variate pentru realizarea scripturilor: Perl, C sau C++, Visual Basic, etc. Descrierea acestor limbaje și a principiilor de programare depășește cu mult obiectul acestei cărți. De altfel, așa cum spuneam, pentru a construi o pagina Web interactivă cu ajutorul scripturilor CGI, nu este necesar să le creați chiar dumneavoastră. Pe Web există foarte multe site-uri care pun la dispoziția vizitatorilor mii de scripturi gratuite. De obicei ele sunt însoțite de instrucțiuni de instalare și utilizare. Puteți alege dintre acestea pe acelea care satisfac cerințele dumneavoastră. Totuși, pentru a face o alegere în cunoștință de cauză precum și pentru a putea să faceți modificările necesare instalării și funcționării scriptului, aveți nevoie să cunoașteți câteva noțiuni legate de structura unui script CGI.

4. Structura unui script

Structura unui script CGI conține următoarele secțiuni:

citirea datelor introduse prin intermediul formularului

prelucrarea datelor și efectuarea sarcinilor impuse de programator

afișarea rezultatelor.

Citirea datelor

Unul dintre elementele de bază cu care lucrează un script îl constituie variabilele de mediu. Variabilele de mediu sunt o categorie specială de variabile, folosite de server în procesul de execuție al scriptului. Aceste variabile conțin informații despre server, despre browser și despre datele introduse de utilizator. Numărul variabilelor de mediu este destul de mare, dar există câteva care au o importanță specială pentru script.

Acestea sunt:

REQUEST_METHOD

QUERY_STRING

CONTENT_LENGTH

Variabila de mediu REQUEST_METHOD poate avea cele două valori despre care am mai amintit: Get și Post. Prin intermediul ei serverul informează scriptul asupra modului cum îi sunt transmise datele.

Așa cum am învățat în capitolul anterior, datele introduse de utilizator sunt transmise în perechi nume/valoare.

Variabila de mediu QUERY_STRING este folosită pentru a reține datele de intrare în cazul folosirii metodei Get iar variabila CONTENT_LENGTH este folosită pentru a specifica lungimea șirului de caractere citit din fișierul de intrare, în cazul folosirii metodei Post.

Transmiterea datelor prin metoda Get

Când serverul folosește metoda Get datele introduse în formular sunt adăugate la sfârșitul adresei URL a scriptului.

Pentru a face lucrurile mai clare, să luam un exemplu. să presupunem că în pagina dumneavoastră se află un formular care conține două câmpuri de editare numite "nume" și "prenume". Cu alte cuvinte codul formularului dumneavoastră va arăta astfel:

<INPUT type="text" name="nume">Introduceti numele

<INPUT type="text" name="prenume">Introduceti prenumele

</FORM>

Să mai presupunem că vizitatorul introduce în câmpul "nume" valoarea "Popescu" iar în câmpul "prenume" valoarea "Ion" și că adresa URL a scriptului nostru este www.html.com/cgi-bin/scriptulmeu.cgi/

Atunci serverului îi este transmisă următoarea adresă URL:

http://www.html.com/cgi-bin/scriptulmeu.cgi/?nume=Popescu&prenume=Ion

Șirul de caractere de după semnul de întrebare este depus în variabila de mediu QUERY_STRING.

Transmiterea datelor prin metoda Post

Metoda Post este cea mai folosită în transmiterea datelor. Atunci când datele sunt trimise prin această metodă, ele sunt furnizate scriptului prin intermediul fișierului standard de intrare, STDIN. Pentru a preciza scriptului lungimea șirului de caractere (numărul de octeți) pe care îl are de citit, aceasta este reținută în variabila de mediu CONTENT_LENGTH.

Indiferent de metoda folosită, după citirea datelor scriptul trebuie să le decodifice, adică să elimine din șirul de caractere primit toate caracterele care nu au fost introduse de utilizator: "&", "=" și altele.

După citirea și decodificarea datelor scriptul execută instrucțiunile de procesare a lor și pregătește răspunsul pentru server.

Afișarea rezultatelor

În general, răspunsurile pe care scriptul le transmite serverului se împart în două categorii:

Sarcina a fost îndeplinită cu succes

Sarcina nu a fost îndeplinită, au apărut erori.

Dacă execuția scriptului este încununată de succes iar sarcinile sale au fost îndeplinite, acesta transmite serverului un răspuns în consecință. Dacă, din diverse motive, au apărut erori la execuția scriptului iar acesta nu și-a dus sarcinile la bun sfârșit, serverului îi este prezentat un mesaj de eroare, care trebuie să conțină informații despre natura erorii apărute.

De exemplu, să presupunem că în pagina dumneavoastră ați plasat un formular care solicită datele personale ale vizitatorului, care sunt transmise unui script a cărui sarcină este să trimită aceste date la o adresă specificată de mail (aceasta este una dintre cele mai comune utilizări ale scripturilor). După ce vizitatorul a introdus datele iar scriptul și-a încheiat execuția, este bine să afișeze un mesaj pentru vizitator prin care îl informează că datele sale au fost expediate. Pe de altă parte, dacă a survenit o eroare la introducerea datelor, vizitatorului trebuie să-i fie oferit un mesaj prin care este informat despre acest lucru și, în plus, despre posibilitatea de a remedia eroarea.

Mesajele privind rezultatele execuției pot fi trimise de script serverului, care formatează headerele HTTP de răspuns, sau scriptul poate formata el însuși headerele și poate trimite rezultatele direct la browser.

Există trei tipuri fundamentale de headere de răspuns:

Content-Type

Location

Status

Content-type

Browserul dumneavoastră primește headere de tipul Content-Type ori de câte ori primește de la server un document HTML, o imagine sau orice alt tip de fișier. Indiferent de natura fișierului transmis de la server la browser, serverul va asocia fișierului acest header pentru a comunica browserului tipul fișierului trimis.

Tipurile de fișiere care pot fi transmise browserului sunt asociate sub numele de tipuri MIME (Multipurpose Internet Mail Extensions). Clasificarea se bazează pe conținutul fișierului trimis. Iată cele șapte tipuri MIME fundamentale:

Text

Multipart

Message

Application

Image

Audio

Video

Fiecare dintre aceste tipuri are un număr de sub-tipuri. Headerul Content-Type specifică atât tipul cât și subtipul MIME al fișierului trimis. Iată câteva exemple:

Text/HTML

Text/plain

Image/gif

Image/jpeg

Location

Acest header conține adresa URL a documentului pe care scriptul dorește să-l trimită ca răspuns către browser. De exemplu, dacă răspunsul pe care doriți să-l primească vizitatorul paginii după transmiterea datelor este un document HTML care se numește multumesc.html atunci scriptul va conține un header ca acesta:

Location: multumesc.html

urmat de o linie liberă. În acest mod browserul este redirecționat către URL-ul documentului respectiv. În situația când folosiți headerul Location pentru a afișa răspunsul, scriptul nu va mai include headerul de răspuns

Content-Type.

Status

Headerul Status returnează către browser un cod format din trei cifre împreună cu un text explicativ. Ați văzut de foarte multe ori acest header în situațiile când cererea trimisă de browser nu a fost îndeplinită, iar documentul solicitat nu a putut fi furnizat de către server. Iată câteva dintre cele mai cunoscute coduri de status:

400 – Bad request – apare în situația când sintaxa headerului HTTP de cerere a fost eronată

401 – Unauthorized – apare când, pentru a obține documentul solicitat, sunt necesare anumite privilegii de acces

403 – Forbidden – apare când serverul refuză accesul la document

404 – File Not Found – apare în situația când serverul nu poate găsi documentul solicitat

5. Exemple de scripturi

Limbajul cel mai folosit pentru scrierea scripturilor este Perl. Chiar dacă nu cunoașteți acest limbaj, dacă aveți totuși cunoștințe minime de programare, nu vă va fi greu să înțelegeți structura scripturilor prezentate în continuare.

Din păcate, spre deosebire de documentele HTML care pot fi scrise într-un simplu editor de text și apoi vizualizate cu ajutorul browserului, cu scripturile lucrurile nu mai stau așa.

Perl este un limbaj interpretat. Aceasta înseamnă că puteți scrie codul sursă într-un editor de text, cum ar fi Notepad. Dar pentru ca scriptul să funcționeze, serverul trebuie să aibă instalat un interpretor de Perl. Majoritatea serverelor Web dețin un astfel de interpretor. Dacă doriți să instalați și dumneavoastră un interpretor Perl și să testați funcționarea scripturilor prezentate în exemplele de mai jos, ba mai mult, dacă doriți să vă transformați propriul calculator într-un server Web pe care să puteți rula scripturi Perl, precum și să vă testați funcționarea întregului site, veți afla cum puteți realiza acest lucru în ultima parte a acestui capitol.

Pentru moment, iată câteva exemple simple de scripturi Perl din care vă puteți face o idee despre structura unui script și sintaxa limbajului Perl. Cel mai simplu script este clasicul exemplu "Hello, world !"prezentat în Exemplul 12.1. Acest script ilustrează modul în care se realizează configurarea headerului de răspuns Content-Type și afișarea unui document HTML.

Exemplul 12. 1

1 #!/usr/bin/perl

2

3 print "Content-Type: text/html\n\n";

4

5 print "<HTML>\n";

6 print "<HEAD>\n";

7 print "<TITLE>Hello World !</TITLE>\n";

8 print "</HEAD>\n";

9 print "<BODY>\n";

10 print "<H1>Hello World !</H1>\n";

11 print "<P>\n";

12 print "<H3>Have a nice day</H3>\n";

13 print "</BODY>\n";

14 print "</HTML>\n";

Liniile scriptului nu sunt, în general, numerotate, numerotarea servind aici doar la referirea lor mai ușoară. Acest exemplu simplu realizează afișarea pe ecran a textului "Hello World !", și a mesajului "Have a nice day". Nu există o etapă de citire a datelor, deoarece nu există date de intrare.

Linia 1 conține calea spre interpretorul Perl aflat pe server. Dacă sistemul sub care lucrează serverul este UNIX, semnul # trebuie îndepărtat. În linia a 3-a este configurat headerul HTTP de răspuns, Content-Type. Așa cum observați, documentul care va fi transmis browserului este de tip text, și anume un document HTML.

Secvența de caractere "\n" care se repetă la finalul fiecărei linii se numește secvență escape. Rolul acesteia este să realizeze, la afișare, trecerea pe rândul următor. Pe linia în care este definit headerul Content-Type este obligatorie prezența a două secvențe escape.

Toate instrucțiunile scriptului sunt instrucțiuni de afișare. Prin intermediul lor, scriptul descrie browserului pagina Web pe care urmează să o afișeze. Structura paginii conține, după cum vedeți, toate secțiunile necesare: eticheta de deschidere a documentului: <HTML>, antetul: <HEAD> și corpul documentului: <BODY>.

Dacă doriți să testați funcționarea scriptului, scrieți-l în Notepad și salvați-l sub numele hello.pl (extensia .pl indică un program scris în limbajul Perl. Se mai poate folosi și extensia .bgi). Apoi instalați scriptul în directorul cgi-bin al serverului dumneavoastră.

După executarea scriptului, pagina de răspuns arată ca în Figura 12.1

Exemplul următor realizează preluarea datelor introduse de vizitator prin intermediul unui formular și afișarea lor pe ecran. Formularul pentru introducerea datelor prezentat în Exemplul 12.2 conține doar casete de text, în care vor fi introduse numele, prenumele și adresa de mail. Atributul action al etichetei <FORM> trimite la scriptul script2.pl aflat în directorul cgi-bin al serverului. Aspectul formularului este cel din Figura 12.2

Exemplul 12. 2

<HTML>

<HEAD>

</HEAD>

<BODY>

Numele:

Prenumele:

Adresa de email:

</FORM>

</BODY>

</HTML>

Observați că datele sunt transmise la scriptul script2.pl aflat în directorul

cgi-bin, prin intermediul metodei Post. Exemplul 12.3 ilustrează modul de construire al scriptului script2.pl.

Exemplul 12. 3

1 #!/usr/bin/perl

2

3 # Plasarea datelor transmise prin metoda Post in variabile

4

5 read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});

6 @pairs=split(/&/, $buffer);

7 foreach $pair (@pairs)

8 {

9 ($name, $value)=split(/=/, $pair);

10 $value=~ tr/+/ /;

11 $value=~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;

13 $FORM{$name}=$value;

14 }

15 #afisarea rezultatului

16

17 print "Content-type: text/html\n\n";

18

19 print "<HTML>\n";

20 print "<HEAD>\n";

21 print "<TITLE>Multumesc!</TITLE>\n";

22 print "</HEAD>\n";

23 print "<BODY>\n";

24 print "<H1>Multumesc!</H1>\n";

25 print "<BR>\n";

26 print "<H4>Datele introduse sunt:</h4>\n";

27 print "<BR>\n";

28 print "<H3>$FORM{'nume'} $FORM{'prenume'}</H3>\n";

29 print "<H3>$FORM{'email'}</H3>\n";

30 print "</BODY>\n";

31 print "</HTML>\n";

Se impun câteva explicații. Mai întâi, observați pe liniile 1, 3 și 15 prezența caracterului #. Acesta este modul de a introduce comentarii într-un program Perl. Comentariile sunt extrem de utile, mai ales la scripturi. Un script necomentat este foarte greu de utilizat. Ca și în cazul comentariilor introduse în documentele HTML, acestea sunt ignorate la execuție.

Prima secțiune a scriptului realizează citirea datelor. Deoarece acestea au fost transmise prin metoda Post, observați că citirea se face din fișierul standard de citire, STDIN. Între liniile 5 și 14 se realizează citirea, decodificarea datelor și plasarea lor în variabilele corespunzătoare. Secvența dintre liniile 16 și 31 reprezintă partea de afișare a rezultatelor. Ca și în exemplul anterior, observați că linia în care se face formatarea headerului de răspuns Content-Type necesită prezența a două secvențe escape "\n\n".

Să presupunem că datele introduse în formular sunt:

nume – Ionescu

prenume – Maria

adresa de mail – [anonimizat].

Atunci pagina generată de script va arata ca în Figura 12.3

Apelul scripturilor nu se face numai prin intermediul formularelor. Se poate realiza și prin intermediul imaginilor sau al legăturilor. Prezentăm în continuare o pagina Web care apelează scriptul ip.pl prin intermediul unei legături. Scriptul realizează afișarea adresei IP a computerului pe care este instalat.

Exemplul 12.4 prezintă documentul HTML în care este apelat scriptul. Aspectul paginii este cel din Figura 12.4

Exemplul 12. 4

<HTML>

<HEAD>

</HEAD>

<BODY>

Pentru a afla adresa dumneavoastra de IP apasati

</FONT>

</BODY>

</HTML>

Scriptul ip.pl folosește variabila de mediu REMOTE_ADDR pentru a obține adresa IP. În Exemplul 12.5 este prezentat scriptul ip.pl.

Exemplul 12. 5

1 #!/usr/bin/perl

2

3 print "Content-Type: text/html\n\n";

4

5 print "<HTML>\n";

6 print "<HEAD>\n";

7 print "<TITLE>cgi3</TITLE>\n";

8 print "</HEAD>\n";

9 print "<BODY>\n";

10 print "<P>\n";

11 print "<H3>Adresa IP a computerului dvs. este: $ENV{REMOTE_ADDR} </H3>\n";

12 print "</BODY>\n";

13 print "</HTML>\n";

La apăsarea link-ului din documentul HTML este apelat scriptul, care afișează pagina de răspuns din Figura 12.5

Evident, dacă veți rula scriptul pe alt computer, adresa IP obținută va fi diferită. Când scriptul este apelat printr-un link nu există posibilitatea de a i se transmite date.

6. Instalarea interpretorului Perl și a aplicației PWS

Pentru a putea verifica funcționarea exemplelor prezentate precum și a scripturilor pe care doriți să le folosiți în cadrul site-ului dumneavoastră înainte de etapa publicării pe Web trebuie să aveți instalat un interpretor Perl. Puteți descărca și instala interpretorul Active Perl vizitând adresa:

http://www.gossland.com/course/install.html

La aceeași adresă puteți găsi și aplicația Microsoft Personal Web Server (PWS) care este furnizată de Microsoft în pachetele Windows 98 și Windows 2000. Recomandăm descărcarea aplicației de la adresa menționată, care are avantajul că include o corecție a unui bug de instalare existent în versiunea oficială Microsoft.

Atenție!

Microsoft Personal Web Server se poate instala pe computerul personal având rolul de aplicație server. Odată instalată, computerul dumneavoastră va funcționa întocmai ca un server Web, astfel încât vă veți putea testa funcționarea scripturilor instalate precum și funcționarea întregului site.

Din păcate, Microsoft nu furnizează o aplicație server similară și în pachetele Windows Milenium și Windows XP iar aplicația PWS nu funcționează decât pe sistemele Windows 98 și 2000.

La adresa indicată veți găsi îndrumări precise și complete asupra tuturor pașilor pe care îi aveți de urmat pentru a instala atât interpretorul Perl cât și aplicația Personal Web Server. În plus, site-ul respectiv conține și un foarte bun curs de inițiere în limbajul Perl în limba engleză.

7. Rezumat

CGI este un protocol de comunicare face legătura dintre scripturile aflate pe serverul Web și documentele HTML. Un script CGI este o aplicație care respectă acest protocol.

Printre cele mai folosite scripturi CGI sunt cele care servesc la procesarea informațiilor introduse într-un formular.

Transferul datelor de la formular la serverul pe care se află scriptul se face printr-una dintre cele două metode: Get sau Post.

După ce datele au fost transmise la server, scriptul le citește și le decodifică, le prelucrează conform instrucțiunilor sale și transmite un răspuns către browser.

Browserul afișează rezultatele trimise de script în conformitate cu headerele de răspuns incluse în pachetul de date transmis.

Capitolul 13

JavaScript

1. Ce este JavaScript?

JavaScript este un limbaj de programare orientat pe obiecte, care vă permite să oferiți paginilor dumneavoastră un caracter mai dinamic și interactiv. Dacă ați parcurs prima parte a cărții și aveți cunoștințe minime de programare, nu veți avea dificultăți în înțelegerea modului în care funcționează acest limbaj.

Atenție!

JavaScript nu este același lucru cu limbajul Java. De fapt, deși numele sunt asemănătoare, sunt două limbaje foarte diferite. Spre deosebire de Java, care este un limbaj orientat pe obiecte, complex, asemănător cu limbajul C++, JavaScript este mult mai simplu și mai ușor de folosit. În timp ce Java este un limbaj pentru programatori, JavaScript este destinat neprofesioniștilor care doresc să îmbunătățească aspectul și funcționalitatea paginilor de Web.

JavaScript a fost dezvoltat de Netscape Corporation pentru a fi utilizat în browserul Netscape Navigator. Un script JavaScript poate fi plasat direct în pagina Web, fiind executat de browser împreună cu documentul Web care-l conține. Browserul Internet Explorer (versiunile mai noi decât IE 3.0) execută și el corect scripturile JavaScript.

JavaScript este un limbaj interpretat, ca și Perl, dar în cazul său nu trebuie să vă mai faceți griji în privința instalării unui interpretor deoarece acesta este inclus în browser. Codul sursă poate fi inclus în pagina Web sau poate fi pus într-un fișier separat care este referit din pagină.

Ca și în cazul scripturilor CGI, nici în acest caz nu este absolut necesară cunoașterea limbajului JavaScript pentru a putea insera și utiliza cu succes astfel de scripturi. Există un număr impresionant de scripturi gata de utilizare, care se pot integra cu ușurință în codul sursă al documentelor dumneavoastră.

2. Cum poate fi inclus un script în pagină?

Scripturile JavaScript pot fi incluse în pagina Web în două moduri:

prin intermediul etichetei <SCRIPT> </SCRIPT>

prin intermediul unei proceduri eveniment

Iată un exemplu foarte simplu în care în document este inclus un script care afișează în pagină textul "Buna ziua!" prin intermediul etichetei <SCRIPT>. Aspectul acestei pagini este cel din Figura 13.1.

Exemplul 13. 1

<HTML>

<HEAD>

<TITLE>javascript1</TITLE>

</HEAD>

<BODY>

<H1>Primul exemplu JavaScript</H1><HR>

document.write("Buna ziua!")

</SCRIPT>

</BODY>

</HTML>

Unul dintre atributele etichetei <SCRIPT> este language prin care este specificat limbajul în care este scris scriptul, în cazul acesta valoarea atributului fiind "JavaScript".

O altă modalitate de a include de a include un script în pagină este salvarea acestuia ca un fișier extern și apelarea sa prin intermediul atributului src al etichetei <SCRIPT>.

În exemplele de scripturi care vor urma veți observa diverse moduri în care pot fi incluse în paginile Web scripturi JavaScript.

Nu vom intra în amănunte privind sintaxa limbajului, deoarece aceasta depășește subiectul acestei cărți. Totuși, pentru a putea folosi judicios un script JavaScript trebuie să aveți o imagine despre elementele esențiale cu care lucrează JavaScript, obiectele și evenimentele.

Obiecte

Un obiect este un nou tip de date, care reunește sub aceeași denumire atât datele cât și funcțiile care le prelucrează. Datele se numesc proprietățile obiectului iar funcțiile se numesc metodele obiectului.

Pentru a exemplifica aceste concepte, să presupunem că dorim să construim un obiect care să reprezinte o carte de vizită, pe care îl vom numi Card. Acest obiect va avea următoarele proprietăți:

nume

adresă

telefon

Pentru a defini un obiect se folosește o funcție numită constructor. În exemplul nostru, funcția constructor a obiectului Card va arata astfel:

function Card(num, adr, tel)

{

this.nume=num;

this.adresa=adr;

this.telefon=tel;

}

În acest moment, constructorul obiectului Card încă nu este complet, el conține numai proprietățile obiectului.

Acum să construim și o metodă care să lucreze cu acest obiect. Deoarece dorim să tipărim cărțile de vizită pe care le vom realiza cu ajutorul acestui obiect, vom crea o funcție care va tipări proprietățile obiectului, numită PrintCard().

function PrintCard()

{

document.write("Numele: ", this.nume, "\n");

document.write("Adresa: ", this.adresa, "\n");

document.write("Telefonul: ", this.telefon, "\n");

}

Acum putem scrie definiția completă a obiectului nostru:

function Card(num, adr, tel)

{

this.nume=num;

this.adresa=adr;

this.telefon=tel;

this.PrintCard=PrintCard;

}

Să trecem, acum, la folosirea unui obiect. Pentru a crea un obiect concret, adică o instanță a obiectului Card, se folosește cuvântul cheie new. Următoarea instrucțiune construiește o instanță a obiectului Card, care se numește ana:

ana=new Card ("Ana Munteanu", "Str. Apusului, nr.2, Bucuresti", "6162345")

Odată ce a fost creată o nouă instanță a obiectului Card, metoda PrintCard poate fi folosită astfel:

ana.PrintCard()

Și acum, să punem toate aceste secvențe de cod laolaltă și să folosim obiectul într-o pagină Web, pentru a afișa mai multe cărți de vizită. Exemplul 13.2 realizează acest lucru. Aspectul paginii descrise în document este cel din Figura 13.2.

Exemplul 13. 2

<HTML>

<HEAD>

<TITLE>javascript2</TITLE>

function PrintCard()

{

document.write("<B>Numele:</B> ", this.nume, "<BR>");

document.write("<B>Adresa:</B> ", this.adresa, "<BR>");

document.write("<B>Telefonul:</B> ", this.telefon, "<HR>");

}

function Card(num, adr, tel)

{

this.nume=num;

this.adresa=adr;

this.telefon=tel;

this.PrintCard=PrintCard;

}

</SCRIPT>

</HEAD>

<BODY>

<H1 align="center">Crearea obiectelor</H1>

Inceputul scriptului<HR>

// Crearea a trei obiecte noi

ana=new Card ("Ana Munteanu", "Str. Apusului, nr.2, Bucuresti", "6162345")

ion=new Card("Ion Popescu", "Str. Zorilor nr.1, Ploiesti", "456789");

radu=new Card("Radu Ionescu", "Str. Noptii, nr.3, Pitesti", "201202");

// Afisarea lor

ana.PrintCard();

ion.PrintCard();

radu.PrintCard();

</SCRIPT>

Sfarsitul scriptului

</BODY>

</HTML>

Puteți observa modul în care a fost inclus scriptul în pagina Web. Astfel, definiția scriptului este plasată în antetul documentului HTML, iar apelul scriptului este făcut în corpul documentului. În cadrul scriptului apar două linii precedate de șirul de caractere "//". Acesta este modul în care se introduc comentariile în cadrul scripturilor JavaScript.

Evenimente

În continuare vom discuta despre un alt concept fundamental cu care lucrează JavaScript, și anume evenimentul. Un eveniment este o acțiune care survine la un moment dat și în urma căreia este declanșată execuția unei anumite părți din program. Ori de câte ori vizitatorul face click pe o legătură, de exemplu, când introduce un text sau chiar când trece cu mouse-ul deasupra unei zone a paginii, survine un eveniment la care scriptul reacționează generând un răspuns.

Iată care sunt tipurile de evenimente cu care lucrează JavaScript:

Tabel 13. 1

După cum vedeți, prin intermediul JavaScript se poate răspunde unui mare număr de evenimente. Acest lucru se realizează prin crearea unei proceduri eveniment.

Procedurile eveniment nu sunt definite cu ajutorul etichetei <SCRIPT> ci ele sunt atribute ale celorlalte etichete. De exemplu, iată o legătură care include o procedură eveniment:

<A href="http://www.amazon.com"

onMouseOver=" window.status=’Cea mai mare librarie virtuala’; return true"> Click aici</A>

Observați că întreaga procedură eveniment care răspunde la evenimentul MouseOver este inclusă în eticheta <A>. Sunt specificate două instrucțiuni care se execută în momentul când cursorul mouse-ului este plasat deasupra legăturii. Prima afișează un mesaj în bara de status a ferestrei, următoarea returnează valoarea true, pentru a împiedica ștergerea mesajului. Mai observați că mesajul care va fi afișat este delimitat de apostrofuri.

Dacă procedura eveniment este mai extinsă, includerea ei în întregime într-o eticheta devine nepractică. În această situație, este mai avantajos să construim o funcție care să trateze evenimentul.

Funcția este definită în secțiunea <HEAD> a documentului, iar în corpul documentului este apelată ca procedură eveniment. De exemplu, să presupunem că am construit o funcție eveniment numită Citeste(). Atunci ea poate fi apelată astfel:

<A href="#cuprins" onMouseOver="Citeste();">Mergi la Cuprins</A>

În momentul când mouse-ul se află deasupra legăturii, funcția este lansată în execuție.

3. Modul de execuție al scriptului

Scripturile integrate în cadrul paginilor sunt evaluate după ce încărcarea paginii s-a încheiat dar înainte ca aceasta să fie afișată. Pe de altă parte, scripturile stocate ca fișiere separate sunt evaluate înaintea tuturor scripturilor in-line (adică a celor incluse în pagină). Funcțiile definite în cadrul scripturilor nu sunt executate automat la încărcarea paginilor ci abia atunci când acestea sunt apelate, fie prin eticheta <SCRIPT> fie printr-o procedură eveniment.

Dacă ați văzut vreodată un script JavaScript într-o pagină Web, poate ați remarcat un lucru aparent ciudat: întregul script este inclus între etichetele HTML de comentariu:

<!- – comentariu – ->.

Motivul este faptul că există browsere care nu recunosc și nu pot executa scripturile JavaScript. Dacă un document Web care conține cod JavaScript este încărcat într-un asemenea browser, în loc ca scriptul să fie executat, este afișat în pagină întregul cod, ceea ce nu este de dorit. Așa după cum știți, comentariile sunt ignorate de browser, astfel că includerea codului JavaScript între etichetele de comentariu va duce la ignorarea acestei părți a documentului. Excepție fac browserele care recunosc JavaScript și care vor identifica prezența JavaScript și vor executa scriptul.

În concluzie, maniera recomandată pentru introducerea în pagină a unui script este următoarea:

<! – –

Cod JavaScript

// – ->

</SCRIPT>

Am învățat până acum cum poate fi inclus codul JavaScript într-un document HTML. Să vedem, mai departe, cum putem folosi scripturile JavaScript pentru a face paginile mai atractive și a le îmbunătăți funcționalitatea.

4. Ce se poate face cu JavaScript?

În continuare sunt prezentate câteva exemple de scripturi cu ajutorul cărora se pot realiza lucruri care depășesc posibilitățile limbajului HTML, cum ar fi afișarea datei curente în pagina dumneavoastră, deschiderea unei ferestre pop-up, afișarea unui mesaj în bara de status a ferestrei browserului, afișarea aleatoare a unor mesaje în pagină, imagini care își schimbă aspectul la trecerea mouse-ului, și, una dintre cele mai utile aplicații JavaScript, validarea formularelor.

Afișarea unui mesaj în bara de status

Acest exemplu ilustrează modul cum se poate afișa un mesaj în bara de status (aflată la baza ferestrei browserului) la trecerea cu mouse-ul peste un anumit element din pagină. De obicei, acest element este un link sau o imagine. În Exemplul 13.3, elementul este o imagine. Aspectul paginii care conține scriptul este cel din Figura 13.3.

Exemplul 13. 3

<HTML>

<HEAD>

<TITLE>javascript3</TITLE>

</HEAD>

<BODY>

<H1 align="center">Mesaj in status bar</H1><HR>

<H3>Mesajul apare la plasarea mouse-ului pe imagine</H3>

<IMG src="../Imagini/tiger.gif" onMouseOver="window.status='Acesta este un tigru';

return true" onMouseOut="window.status=' ';return true">

</BODY>

</HTML>

Afișarea datei curente în pagină

Scriptul următor preia data sistemului de operare al utilizatorului și o afișează în pagină. Evident, dacă data sistemului este setată incorect, ea va apărea în pagină ca atare. Exemplul 13.4 construiește o pagină Web care conține un astfel de script, aspectul paginii fiind redat în Figura 13.4.

Exemplul 13. 4

<HTML>

<HEAD>

<TITLE>javascript4</TITLE>

<!–

var zi, data, luna

azi=new Date()

if(azi.getDay(==0){ zi="Duminica, " }

else if(azi.getDay()==1){ zi="Luni, " }

else if(azi.getDay()==2){zi="Marti, "}

else if(azi.getDay()==3){zi="Miercuri, "}

else if(azi.getDay()==4){zi="Joi, "}

else if(azi.getDay()==5){zi="Vineri, "}

else if(azi.getDay()==6){zi="Sambata, "}

if(azi.getMonth()==0){luna="Ianuarie "}

else if(azi.getMonth()==1){luna="Februarie"}

else if(azi.getMonth()==2){luna="Martie"}

else if(azi.getMonth()==3){luna="Aprilie"}

else if(azi.getMonth()==4){luna="Mai"}

else if(azi.getMonth()==5){luna="Iunie"}

else if(azi.getMonth()==6){luna="Iulie"}

else if(azi.getMonth()==7){luna="August"}

else if(azi.getMonth()==8){luna="Septembrie"}

else if(azi.getMonth()==9){luna="Octombrie"}

else if(azi.getMonth()==10){luna="Noiembrie"}

else if(azi.getMonth()==11){luna="Decembrie"}

data=azi.getDate()

//–>

</SCRIPT>

</HEAD>

<BODY>

<H1 align="center">Data calendaristica</H1><HR>

<FONT size="3" color="black" face="arial">Azi suntem in data de:

<!–

document.write(zi+' '+data+' '+luna)

//–>

</SCRIPT></FONT>

</BODY>

</HTML>

Ferestre pop-up

Unul din lucrurile care nu se pot realiza folosind doar HTML este afișarea mesajelor pop-up. Aceste mesaje apar într-o mică fereastră care se închide atunci când executați o anumită acțiune, de obicei click pe un buton, sau pe un link.

În Exemplul 13.5 este construită pagina principală din care este apelată fereastra pop-up.

Exemplul 13. 5

<HTML>

<HEAD>

<TITLE>javascript5</TITLE>

<!–

function deschide()

{iwin=window.open("javascript6.html", "IWIN", "status=no, toolbar=no, location=no, menu=no, width=200, height=200");}

//–>

</SCRIPT>

</HEAD>

<BODY>

<H1 align="center">Fereastra pop-up</H1><HR>

Aceasta pagina demonstreaza cum poate fi creata o fereastra pop-up<BR>

Fereastra se deschide la apasarea pe legatura de mai jos si se inchide<BR>

cand este apasat butonul OK<BR>

Deschide fereastra

<A href="#" onClick="deschide();">aici</A>.

</BODY>

</HTML>

Firește că trebuie creat un document separat, care va fi afișat în fereastra pop-up. În Exemplul 13.6 este construit documentul HTML (javascript6.html) care va fi afișat în fereastra pop-up definită în exemplul anterior.

Exemplul 13. 6

<HTML>

<HEAD>

<TITLE>javascript6</TITLE>

</HEAD>

<BODY>

<FONT color="green" face=arial>Ati invatat sa creati o fereastra pop-up<BR>

Apasati OK ca sa reveniti in fereastra initiala

<P>

<INPUT type="button" value="OK"

onClick="window.close();">

</FORM>

</BODY>

</HTML>

Aspectul paginii și al ferestrei pop-up este redat în Figura 13.5.

Puteți modifica documentul HTML care se va deschide în fereastra pop-up după dorință și îl puteți salva sub alt nume. Nu uitați, însă, să faceți modificarea corespunzătoare în funcția deschide() din script.

Afișarea aleatoare a unor mesaje în pagină

Unul dintre lucrurile care îi fac pe vizitatorii paginii dumneavoastră să revină la ea cu regularitate este varietatea, fie în aspect, fie, mai ales, în conținut.

Un mod de a face paginile mai variate este de a afișa diverse mesaje, citate sau imagini care să se schimbe de fiecare dată când este accesată pagina.

În Exemplul 13.7 este prezentat un script care realizează afișarea aleatoare a unui citat, ales dintr-un șir predefinit. Aspectul acestei pagini este redat în Figura 13.6.

Exemplul 13. 7

<HTML>

<HEAD>

<TITLE>javascript7</TITLE>

</HEAD>

<BODY>

<H1 align="center">Citate</H1><HR>

<!–

citat=new Array(5);

autor=new Array(5);

citat[0]="Omul care-si cunoaste limitele este singurul care are sanse sa obtina ce vrea.";

autor[0]="Goethe";

citat[1]="Pe stancile cele mai inalte ajung numai vulturii si reptilele.";

autor[1]="Montesquieu";

citat[2]="Putine lucruri sunt atat de greu de suportat ca un exemplu bun.";

autor[2]="Mark Twain";

citat[3]="Adevarul pur si simplu este rareori pur si niciodata simplu.";

autor[3]="Oscar Wilde";

citat[4]="Omul a inventat limbajul pentru a-si satisface nevoia profunda de a se plange.";

autor[4]="Lily Tomlin";

index=Math.floor(Math.random() * citat.length);

document.write("<DL>\n");

document.write("<DT>" + "\"" + citat[index] + "\"\n");

document.write("<DD>" + "- " + autor[index] + "\n");

document.write("</DL>\n");

//–>

</SCRIPT>

<HR>

Citatul de mai sus este generat aleator la incarcarea paginii.

</BODY>

</HTML>

Dacă doriți să inserați acest script în pagina dumneavoastră și să adăugați și alte citate, nu uitați să redimensionați vectorii citat și autor la valoarea n-1, unde n este numărul de citate. Pentru a observa funcționarea scriptului, reîncărcați pagina de mai multe ori.

Imagini care se schimbă (rollover images)

Un efect interesant pe care îl puteți introduce în pagină sunt imaginile care își schimbă aspectul la trecerea cu mouse-ul pe suprafața lor. Acesta se poate obține cu ajutorul scriptului prezentat în Exemplul 13.8. În Figura 13.7 este redat aspectul paginii descrise în acest exemplu.

Exemplul 13. 8

<HTML>

<HEAD>

<TITLE>javascript8</TITLE>

<!–

if (document.images)

{

pic1on=new Image();

pic1on.src="../Imagini/dovleac1.jpg";

pic1off=new Image();

pic1off.src="../Imagini/dovleac2.jpg";

}

function deschide(imgName)

{

if (document.images)

{

imgOn=eval(imgName + "on.src");

document[imgName].src=imgOn;

}

function inchide(imgName)

{

if (document.images)

{

imgOff=eval(imgName + "off.src");

document[imgName].src=imgOff;

}

//–>

</SCRIPT>

</HEAD>

<BODY>

<H1 align="center">Imagini care se schimba</H1><HR>

</A>

</CENTER>

</BODY>

</HTML>

Validarea formularelor

Dacă exemplele prezentate până acum au avut rolul de a face pagina dumneavoastră mai atractivă, următorul exemplu este de natură să îi îmbunătățească funcționalitatea. O problemă cu care vă veți confrunta fără îndoială dacă folosiți formulare în pagină, este validarea datelor introduse de utilizator.

Vom crea o pagină foarte simplă care conține două casete de text în care utilizatorul trebuie să introducă numele și adresa de mail. Deoarece după completarea formularului informațiile introduse vor fi supuse procesului de validare realizat de scriptul JavaScript, eticheta <FORM> va avea un conținut diferit de cel pe care îl cunoașteți de la capitolul Formulare.

Scriptul de mai jos verifică dacă toate câmpurile de editare au fost completate. Dacă se apasă pe butonul Submit înainte de a completa ambele câmpuri, este transmis un mesaj de eroare. Datele din formular sunt transmise unui script CGI fictiv, numit myscript.cgi aflat în directorul cgi-bin.

Observați că atributele action și method ale etichetei <FORM> pe care le cunoașteți de la Formulare sunt, de data aceasta folosite ca proprietăți ale obiectului predefinit în JavaScript, form.

Documentul construit în Exemplul 13.9 conține un formular și scriptul care realizează validarea datelor introduse în câmpurile formularului. Din Figura 13.8 puteți observa mesajul de eroare transmis în situația când unul din câmpurile formularului nu este completat.

Exemplul 13. 9

<HTML>

<HEAD>

<TITLE>javascript9</TITLE>

<!–

function verifica(form)

{

if (form.nume.value== "")

{

alert("Va rog, introduceti numele!");

form.nume.select();

}

else if (form.email.value== "")

{

alert("Va rog, introduceti adresa de mail!");

form.email.select();

}

else

{

form.method="post";

form.target="_self";

form.action="cgi-bin/myscript.cgi";

form.submit();

}

//–>

</SCRIPT>

</HEAD>

<BODY>

<H1 align="center">Validarea formularelor</H1>

<H3 align="center">(completarea tuturor campurilor)</H3><HR>

Nume:

Adresa mail:

</FORM>

</BODY>

<HTML>

O altă verificare deosebit de utilă este dacă utilizatorul a introdus o adresă de mail validă. Scriptul din exemplul următor realizează trei verificări:

dacă în șirul de caractere introdus există caracterul @

dacă este prezent caracterul "." urmat de trei caractere (.com, de exemplu),

dacă este prezent caracterul "." urmat de două caractere (.ro, de exemplu)

Formularul din Exemplul 13.10 conține un câmp de editare și un buton Submit. Dacă adresa de mail introdusă în câmpul de editare este incorectă se va afișa un mesaj de eroare așa cum se vede în Figura 13.9.

Exemplul 13. 10

<HTML>

<HEAD>

<TITLE>javascript10</TITLE>

<!–

function verifica_mail(form)

{

verif=form.email.value

if ((verif.indexOf('@') < 0) || ((verif.charAt(verif.length-4) !='.') && (verif.charAt(verif.length-3) !='.')))

{

alert("Nu ati introdus o adresa de mail valida. Va rog, incercati din nou!");

form.email.select();

return false;

}

else

{

form.method="post";

form.target="_self";

form.action="cgi-bin/myscript.cgi";

form.submit();

}

//–>

</SCRIPT>

</HEAD>

<BODY>

<H1 align="center">Validarea formularelor</H1>

<H3 align="center">(adresa de mail corecta)</H3><HR>

Adresa mail:

</FORM>

</BODY>

<HTML>

Puteți folosi în paginile dumneavoastră oricare dintre aceste scripturi, desigur, făcând modificările necesare legate de structura site-ului dumneavoastră. De exemplu, în scripturile care realizează validarea formularelor, pentru ca acestea să fie funcționale, trebuie să precizați localizarea corectă a scriptului CGI care face prelucrarea lor.

Din exemplele prezentate probabil că v-ați putut crea o imagine despre modul în care pot fi utilizate scripturile JavaScript într-o pagină Web. Dacă sunteți entuziasmat încă de pe acum, veți fi și mai mult dacă veți depune puțin efort pentru a învăța limbajul și veți putea crea scripturi mult mai complexe decât acestea.

Aveți însă grijă la aspectele legate de viteza de încărcare a paginii: aplicațiile complexe și de mari dimensiuni încetinesc încărcarea paginii unde sunt folosite. Ca și în cazul imaginilor, nu folosiți scripturi de care nu este nevoie, doar pentru a arata cu orice preț că sunteți un bun programator. Una dintre regulile de aur ale unei pagini Web bune, regulă atât de adesea încălcată, este simplitatea.

5. Rezumat

JavaScript este un limbaj de programare orientat pe obiecte și evenimente care permite extinderea capacităților limbajului HTML.

Scripturile JavaScript sunt incluse într-un document HTML prin intermediul etichetei container <SCRIPT> sau prin intermediul procedurilor eveniment. Pentru a evita afișarea în pagină a codului scriptului de browserele care nu suportă scripturi, se obișnuiește ca scriptul să fie inclus între etichetele de comentariu.

Scripturile pot fi inserate direct în documentul HTML sau pot fi stocate în fișiere externe care sunt apelate în documentul respectiv.

Cu ajutorul scripturilor JavaScript se pot realiza sarcini diverse cum ar fi crearea ferestrelor pop-up, afișarea datei curente în pagină, validarea formularelor și altele.

În capitolul următor vom discuta despre o altă metodă care îmbogățește limbajul HTML cu noi posibilități de a controla aspectul paginilor, și anume programarea cu ajutorul foilor de stiluri (Style Sheets)

Capitolul 14

Foi de stiluri (CSS)

Foile de stiluri HTML (Cascading Style Sheets) reprezintă o inovație în dezvoltarea World Wide Web, în ciuda faptului că ideea grupării elementelor de formatare a documentelor a apărut ceva mai demult. Aplicarea stilurilor reprezintă o extindere importantă a posibilităților de design, evitând utilizarea de fișiere grafice mari ce determină încetinirea încărcării paginilor și manipularea lor greoaie.

Folosind stilurile HTML puteți fi sigur că cititorii vor vedea textul din pagină exact așa cum a fost el proiectat. Textul și proprietățile acestuia, care au fost inițial controlate de browsere, se reîntorc la autor, acolo unde le este, de fapt, locul.

1. Ce este un stil?

Un stil reprezintă o colecție de atribute ale textului și ale modului de aranjare a documentului care pot fi aplicate în mod selectiv unui document sau doar unei părți din acesta. Aceste atribute pot fi tipul de font, mărimea și grosimea acestuia, marginile, paragrafele și orice altceva ce poate influența aspectul textului în pagină. Gruparea lor în stiluri permite autorului să aplice aceeași colecție de atribute la diferite părți ale unui document.

Stilurile aplicate unui document HTML au multe avantaje pentru creatorii de pagini Web:

Oferă control crescut asupra aspectului și plasării textului în pagină

Reduc "învălmășeala" produsă de multitudinea de deschideri și închideri ale etichetelor care descriu elementele individuale ale textului

Procesul de modificare a diferitelor elemente din pagină se simplifică

De exemplu, dacă doriți ca titlurile dumneavoastră să aibă un alt tip de font decât textul obișnuit, să fie de dimensiune mai mare și scrise cu caractere îngroșate și italice, ar trebui să definiți aceste atribute de formatare pentru fiecare titlu în parte. Folosind stilurile nu aveți nevoie decât să creați o singură definiție de stil care să conțină atributele de formatare dorite, pe care să o aplicați la fiecare titlu.

În plus, folosirea stilurilor reduce considerabil efortul depus atunci când doriți să aduceți modificări aspectului și aranjării elementelor din paginile dumneavoastră. În loc să parcurgeți fiecare document în parte și să faceți modificări asupra fiecărui element, nu mai este necesar să operați modificări decât asupra foii de stiluri care controlează aceste elemente.

2. Tipuri de foi de stiluri

Stilurile HTML pot fi aplicate într-o pagină Web în trei moduri:

Încapsulate (embedded): stilurile sunt incluse în documentul asupra căruia se aplică, și anume în secțiunea <HEAD> a documentului. Prin includerea lor în antetul documentului, stilurile rămân invizibile pentru vizitatorul paginii.

Legate (linked): stilurile sunt definite în fișiere separate de documentul HTML. Documentul face apel la foaia de stiluri prin intermediul etichetei <LINK>. Folosirea acestui tip de stiluri face posibilă utilizarea aceleiași foi de stil pentru documente diferite. De asemenea, este posibilă aplicarea mai multor foi de stiluri pentru același document.

In-line: stilurile sunt incluse ca atribute în cadrul etichetelor HTML din document. Aceasta înseamnă că ele vor afecta doar elementul asupra căruia sunt aplicate. Este o modalitate mai puțin utilizată deoarece contrazice principiul general al stilurilor, acela de a simplifica și de a face mai lizibil codul documentului HTML.

Sintaxa definițiilor de stil este, în general, aceeași, indiferent de modul cum sunt ele aplicate. Cele trei tipuri de stiluri pot fi, de asemenea, combinate în cadrul aceluiași document. Relațiile dintre diferitele tipuri de stiluri realizează efectul de cascadă care dă numele acestei metode.

Stiluri încapsulate

Crearea unui astfel de stil se realizează folosind eticheta

<STYLE> </STYLE>. Eticheta <STYLE> este o etichetă container, deci este obligatorie prezența etichetei de închidere </STYLE>. Între cele două etichete se introduc definițiile de stil. Eticheta de stil este plasată în antetul documentului adică în secțiunea <HEAD>.

În Exemplul 14.1 este prezentată o definiție de stil care realizează afișarea tuturor titlurilor de nivel 1 (adică a textelor cuprinse între etichetele <H1> </H1>) cu caractere bold și de culoare verde. În plus, textele incluse între etichetele <P> </P> vor fi afișate cu fonturi arial, de mărime 2 și culoare violet.

De asemenea, este creat un stil "normal" care poate fi aplicat asupra oricărui text. Prin intermediul său, textul este afișat cu caractere mai mari și de culoare oranj. Aspectul paginii în care este inclusă această definiție de stil este cel din Figura 14.1.

Exemplul 14. 1

<HTML>

<HEAD>

<TITLE>stiluri1</TITLE>

<STYLE>

<!–

H1 {color: #008000; font-weight: bold}

P {font-family: Arial; color: #800080; font-size: 14px}

.normal {font-size: large; color: #FF8000}

–>

</STYLE>

</HEAD>

<BODY>

<H1 align="center">Stiluri</H1><HR>

<P>Textul din acest paragraf este formatat cu ajutorul stilurilor</P>

Acesta este un text neformatat

<H1>Titlu</H1>

<SPAN class="normal">Acesta este stilul normal</SPAN>

</BODY>

</HTML>

Observați că definiția stilurilor a fost plasată între etichetele HTML de comentariu, în aceeași manieră ca și la scripturile JavaScript. Motivul este același: dacă browserul cu care este vizualizată pagina nu suportă foi de stiluri, se evită astfel afișarea în pagină a codului HTML.

Stiluri legate – foi de stiluri externe

Stilurile incluse în pagină se aplică elementelor prezente în respectivul document HTML, reducând dimensiunea codului și efortul de a defini fiecare element în parte. Această idee se poate extinde la nivelul mai multor documente care pot beneficia, toate, de aceleași stiluri, reunite într-o foaie de stiluri externă.

Avantajul folosirii foilor de stiluri externe este dublu. Pe de-o parte ele se pot aplica la nivelul mai multor documente HTML, realizând astfel o legătură de stil între ele, lucru deosebit de util la construirea unui site. Pe de altă parte, același document poate folosi foi de stiluri diferite, oferind vizitatorului posibilitatea de a opta pentru unul sau altul dintre ele, în funcție de propriile preferințe.

O foaie de stiluri este un fișier text care conține regulile de stil definite în aceeași manieră folosită la stilurile incluse în pagină. Odată creată o foaie de stiluri, ea trebuie salvată cu extensia .css. Foile de stiluri pot fi stocate într-un folder separat sau în același folder în care sunt plasate și documentele HTML.

Apelul foilor de stiluri se poate realiza în două moduri:

folosind eticheta <LINK>

folosind funcția @import

Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei <LINK> conform următoarei sintaxe:

În Exemplul 14.2 este construită o foaie de stiluri externă care va fi apelată cu ajutorul etichetei <LINK>. Foaia de stiluri a fost salvată sub numele stiluri2.css

Exemplul 14. 2

BODY

{background-color: #CCFFCC;

font-family: Arial, sans-serif;

color: #330066;

padding: 50px, 70px}

A:link {color: #CC9900}

A:visited {color: #660000}

A:hover {color: #FFCC00}

A:active {color: #FF0000}

H1 {color: #996633;

background-color: #FFFFCC}

Documentul HTML care urmează apelează foaia de stiluri de mai sus este prezentat în Exemplul 14.3. După cum observați, foaia stiluri2.css a fost apelată în antetul documentului, prin intermediul etichetei <LINK> cu atributul rel="stylesheet". Atributul href al etichetei are ca valoare numele (și adresa relativă, dacă este necesar) al foii de stiluri apelate. În documentul HTML am inclus și o legătură, pentru a exemplifica modul în care foaia de stiluri schimbă culorile legăturii. Atributul hover se referă la proprietatea ca legătura să își schimbe culoarea la trecerea cu mouse-ul peste ea, fără a face click. Pagina descrisă în acest exemplul are aspectul din Figura 14.2.

Exemplul 14. 3

<HTML>

<HEAD>

<TITLE>stiluri3</TITLE>

</HEAD>

<BODY>

<H1 align="center">Foi de stiluri externe</H1>

Acest exemplu ilustreaza modul in care este inclusa in pagina o foaie de stiluri externa

<P>Mai multe exemple in <A href="anexa1.html">anexa2</A>

</BODY>

</HTML>

Stiluri in-line

Spre deosebire de stilurile încapsulate și de foile de stiluri externe, stilurile in-line fac parte chiar din corpul documentului HTML. Ele se aplică prin folosirea atributului style în asociere cu etichetele HTML standard. Rețineți, deci, că style poate fi atât etichetă în sine cât și atribut al altor etichete.

Definițiile de stil in-line se aplică numai asupra elementelor incluse între etichetele care au asociat atributul style. Din acest motiv, dacă dorim să repetăm în alt loc din cuprinsul documentului aceleași definiții de stil, ele vor trebui repetate, încărcând astfel documentul HTML. Totuși, utilitatea stilurilor in-line este aceea că fiind definite chiar în cuprinsul documentului, definițiile lor sunt mai puternice decât cele din stilurile încapsulate sau externe. Dacă, de exemplu, am creat o foaie de stiluri pe care dorim să o aplicăm unui document, și dacă în cadrul acestui document avem un anumit element particular căruia dorim să-i dăm un alt aspect decât cel prevăzut în foaia externă, putem aplica acelui element un stil in-line care se va referi strict la el.

Iată un exemplu de aplicare a unui stil in-line asociat etichetei <P>:

<P style="color: red; font-family: arial; font-weight: bold">Textul din acest paragraf este scris cu fonturi arial, ingrosate, de culoare rosu</P>

Observați că la stilurile in-line definițiile de stil sunt incluse între apostrofuri și nu între acolade, ca la celelalte tipuri de stiluri.

Atunci când lucrați cu documente HTML deja existente cărora doriți să le aplicați stiluri in-line, este recomandat să folosiți etichetele <DIV> și <SPAN>. Acestea vă permit să aplicați stilurile fără a afecta codul HTML deja existent sau aspectul paginii în browserele care nu suportă stiluri.

Exemplul 14.4 ilustrează folosirea etichetei <SPAN> aspectul paginii fiind redat în Figura 14.3.

Exemplul 14. 4

<HTML>

<HEAD>

<TITLE>stiluri4</TITLE>

</HEAD>

<BODY>

<H1 style="color:red;font-famyly:arial">Stiluri in-line</H1><HR>

<P>Textul din acest paragraf este divizat folosind eticheta span</P>

<SPAN style="font-family:arial; color: blue">Text scris cu albastru si fonturi arial</SPAN><BR>

<SPAN style="font-family: courier; size: medium; color:green">Text scris cu verde si fonturi courier medium</SPAN>

</BODY>

</HTML>

La fel ca și la capitolele anterioare, nu vom intra în amănunte privind programarea cu ajutorul stilurilor. Deși stilurile sunt intuitive și ușor de aplicat, totuși o abordare exhaustivă a acestui subiect depășește obiectul acestei cărți. Prezentăm, totuși, în continuare, câteva exemple care vă pot fi utile în paginile dumneavoastră.

3. Efecte obținute cu ajutorul stilurilor

Aspectul textului

Iată câteva atribute care se pot asocia cu diverse etichete HTML permițând schimbarea aspectului textului.

Tabel 14. 1

În exemplele următoare sunt ilustrate câteva din aceste atribute.

Exemplul 14.5 include o definiție de stil în care sunt definiți așa numiții selectori de clasă, în acest exemplu B.titlu și B.subtitlu. În corpul documentului apelul acestora a fost făcut prin construcția:

<B class="titlu">Titlu</B>

Atributul class care se poate asocia etichetei <B> ca în acest exemplu sau altor etichete de formatare a textului are ca valoare un identificator care a fost definit în prealabil în cadrul definiției de stil.

Aspectul paginii descrise în acest exemplu este cel din Figura 14.4.

Exemplul 14. 5

<HTML>

<HEAD>

<TITLE>stiluri5</TITLE>

<STYLE>

<!–

B.titlu {font-size: 20 pt; font-weight: bolder; letter-spacing:5px}

B.subtitlu {font/size: 15 pt; letter-spacing: 5px}

–>

</STYLE>

</HEAD>

<BODY>

<H1 align="center">Aspectul textului</H1><HR>

<P>

Text normal<BR>

<B>Text ingrosat</B><BR>

<B class="titlu">Titlu</B><BR>

<B class="subtitlu">Subtitlu</B>

</P>

</BODY>

</HTML>

Exemplul 14.6 folosește stiluri la formatarea titlului de nivel H1 și a textului din cadrul paragrafului, folosind atributul first-letter care schimbă aspectul primei litere din paragraf. Și în acest exemplu a fost folosit un selector de clasă și anume P.primalit.

Aspectul paginii care folosește aceste stiluri este redat în Figura 14.5.

Exemplul 14. 6

<HTML>

<HEAD>

<TITLE>stiluri6</TITLE>

<STYLE>

<!–

P.primalit:first-letter {font-weight: bolder; font-style: italic; font-size:50 pt; color:red}

H1 {color:blue; letter-spacing:5 px}

–>

</STYLE>

</HEAD>

<BODY>

<H1 align="center">Efecte asupra textului</H1><HR>

<P class="primalit">Textul din acest paragraf foloseste atributul first-letter</P>

</BODY>

</HTML>

Bare de derulare colorate

Unul dintre efectele des întâlnite în paginile Web este prezența barelor de derulare colorate. Acest efect se poate, de asemenea, obține prin aplicarea stilurilor. Pentru a defini culoarea barelor de derulare se folosesc câteva atribute, pe care le definim mai jos.

Tabel 14. 2

După cum observați, unele dintre aceste atribute își suprapun efectele. Există anumite reguli care stabilesc prioritățile atributelor pe care nu le vom aborda aici. Ca începător, este recomandat să nu folosiți atribute care se suprapun pentru a nu obține rezultate neconforme cu intențiile dumneavoastră.

Exemplul următor ilustrează modul de construire a barelor de derulare colorate.

În Exemplul 14.7 am construit o foaie de stiluri externă salvată sub numele stiluri7.css.

Exemplul 14. 7

BODY

{

scrollbar-face-color:blue;

scrollbar-arrow-color:yellow;

scrollbar-shadow-color:red;

scrollbar-3dlight-color:yellow;

scrollbar-track-color:cyan;

}

Documentul HTML care apelează foaia de stiluri este construit în Exemplul 14.8, pagina descrisă de acest document având aspectul din Figura 14.6.

Exemplul 14. 8

<HTML>

<HEAD>

<TITLE>stiluri8</TITLE>

</HEAD>

<BODY>

<H1 align="center">Bare de derulare colorate</H1>

a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>

a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>

</BODY>

</HTML>

Desigur, culorile pe care le alegeți pentru bara de derulare trebuie selectate cu grijă, astfel încât să se armonizeze cu restul paginii. Folosirea unei foi de stiluri externe este utilă deoarece puteți stabili astfel culoarea barei pentru toate paginile site-ului dumneavoastră.

Browserele Netscape nu suportă schimbarea culorilor barei de derulare.

Formulare colorate

Exemplul care urmează (Exemplul 14.9) folosește stiluri in-line pentru a crea formulare colorate care pot da paginii un aspect mai atractiv. Am folosit pentru setarea culorilor codurile hexazecimale pe care le puteți găsi în Anexa 3. Ca și la barele de derulare, culorile formularelor trebuie alese cu grijă pentru a nu da paginii un aspect încărcat și lipsit de bun-gust. Pagina descrisă în acest document arată ca în Figura 14.7.

Exemplul 14. 9

<HTML>

<HEAD>

<TITLE>stiluri9</TITLE>

</HEAD>

<BODY>

<H1 align="center">Formulare colorate</H1><HR>

<FORM>

<P>

<TEXTAREA rows="5" cols="20" style="color: #0066CC; background-color: #CCCCCC; scrollbar-base-color:red;">Care sunt impresiile tale?</TEXTAREA>

<P>

</FORM>

</BODY>

</HTML>

Vizualizate în Netscape formularele din exemplul de mai sus vor avea aspectul normal, necolorat.

4. Rezumat

Foile de stiluri reprezintă un instrument important în elaborarea documentelor HTML, mai ales dacă dorim să construim un site Web. Acestea permit păstrarea unui aspect unitar și coerent pe tot parcursul site-ului.

Un stil este o colecție de atribute ale textului și ale modului de aranjare a documentului care pot fi aplicate în mod selectiv unui document sau doar unei părți din acesta.

Stilurile se pot aplica unui document în trei moduri:

încapsulate – prin intermediul etichetei <STYLE> plasată în antetul documentului

legate – prin intermediul etichetei <LINK> plasată de asemenea în antetul documentului și care face legătura cu foaia de stiluri externă

in-line – prin intermediul atributului style asociat cu diverse etichete HTML.

Cu ajutorul stilurilor se pot obține efecte deosebite în cadrul documentelor HTML: se poate modifica aspectul textului, se pot construi bare de derulare colorate, formulare colorate și altele.

În capitolul următor vom discuta despre câteva elemente de grafică avansată prin intermediul cărora pagina dumneavoastră poate deveni mai interesantă și mai atractivă.

Capitolul 15

Elemente de grafică avansată

1. Imagini hartă

În mod obișnuit, când folosim o imagine drept legătură, includem eticheta <IMG> în interiorul etichetei pentru link-uri , <A>. În continuare este prezentată o altă modalitate de a folosi o imagine ca legătură și anume crearea unei imagini hartă.

Ce este o imagine hartă?

O imagine hartă este o zonă activă pe care se poate executa click cu mouse-ul, apăsarea diferitelor regiuni ale imaginii ducând la deschiderea unor documente HTML diferite. Cu alte cuvinte, o imagine hartă este o imagine împărțită în regiuni, iar fiecare regiune reprezintă o legătură către un alt document. Un exemplu de utilizare a imaginilor hartă îl constituie barele de butoane folosite în multe site-uri ca instrumente de navigare.

Imaginile hartă oferă posibilitatea de a folosi o singură imagine pentru a furniza legături către mai multe pagini. Vă puteți imagina o imagine hartă ca fiind compusă din două părți: imaginea în sine și o hartă invizibilă care este aplicată peste imagine, împărțind-o în regiuni. Această hartă folosește pentru definirea regiunilor forme prestabilite: poligoane, cercuri sau dreptunghiuri. În general, imaginile care se pretează la a fi folosite ca imagini hartă sunt cele care conțin forme geometrice care conduc la o împărțire naturală a imaginii în regiuni.

În funcție de modul cum sunt prelucrate imaginile și identificate adresele spre care indică fiecare regiune, imaginile hartă pot fi de două tipuri:

imagini de tip server

imagini de tip client

Imagini hartă pentru server (server side)

O imagine hartă de tip server se caracterizează prin faptul că face apel la o aplicație (un script) de pe server care realizează determinarea regiunii pe care

s-a făcut click și încarcă documentul HTML asociat acelei regiuni. Nu este nevoie să vă faceți griji în legătură cu scriptul care prelucrează imaginea hartă deoarece majoritatea serverelor au deja instalată o astfel de aplicație, cele mai cunoscute fiind Imagemap și HTImage.

Folosirea imaginilor hartă de tip server parcurge următorii pași:

vizitatorul face click pe o anumită zonă a imaginii

coordonatele acestei zone sunt transmise serverului

scriptul aflat pe server asociază aceste coordonate cu URL-ul unui anumit document HTML (lista adreselor URL ale imaginilor asociate cu regiunile hărții se află plasată tot pe server)

adresa URL împreună cu coordonatele regiunii sunt trimise înapoi la browser care deschide documentul HTML corespunzător.

Este lesne de observat că parcurgerea tuturor acestor etape precum și interacțiunea cu serverul poate încetini mult procesul de încărcare a documentelor HTML asociate regiunilor hărții. Singurul avantaj al folosirii imaginilor hartă este faptul că funcționează în toate browserele. Totuși, deoarece versiunile mai noi decât Netscape 2.02 și Internet Explorer 2.0 recunosc imaginile hartă de tip client, se va renunța treptat la folosirea imaginilor hartă de tip server.

Imagini hartă de tip client (client side)

Imaginile hartă de tip client lucrează independent de server. Când folosim acest tip de imagini hartă plasăm toate datele necesare prelucrării hărții chiar în corpul documentului HTML astfel încât browserul îl execută fără a mai fi necesară o intervenție din partea serverului.

Imaginile hartă de tip client au avantaje evidente: sunt mult mai rapide, funcționarea lor este mult simplificată, și, în plus, la trecerea cu mouse-ul peste hartă, în bara de status a ferestrei browserului apare adresa URL asociată fiecărei regiuni, ceea ce oferă informații suplimentare vizitatorului.

Crearea unei imagini hartă de tip client

Pentru a include în documentul HTML o hartă pentru o anumită imagine se folosește eticheta container <MAP> </MAP>. Între aceste etichete se plasează mai multe etichete <AREA> care au rolul de a defini coordonatele și forma regiunilor pe care dorim să le delimităm pe imagine, ca în exemplul următor:

</MAP>

Regiunile definite în acest exemplu sunt un dreptunghi, pentru care sunt specificate coordonatele vârfurilor din stânga sus și dreapta jos, un poligon cu n vârfuri, definit prin coordonatele lor, și un cerc definit prin coordonatele centrului și rază.

Pentru a comunica browserului ce imagine trebuie să folosească pentru a crea imaginea hartă se folosește eticheta pentru imagini <IMG>, atributul src având ca valoare adresa fișierului grafic folosit. În plus, în cadrul etichetei <IMG> se folosește atributul usemap care are rolul de ancoră (legătură internă). De exemplu, dacă harta pe care o folosim a fost definită în eticheta <MAP> cu numele "harta1" și folosește fișierul imagine1.gif atunci eticheta <IMG> va avea următoarea structură:

În exemplul următor (Exemplul 15.1) vom crea o imagine hartă formată din patru regiuni, trei dreptunghiuri și un poligon cu patru vârfuri. Pentru a determina coordonatele vârfurilor fiecărei regiuni am folosit Microsoft Photo Editor, dar puteți folosi orice alt editor grafic. La plasarea cursorului mouse-ului oriunde în cadrul imaginii, în bara de status (colțul din stânga jos) veți observa coordonatele în pixeli, ale punctului în care vă găsiți. Am asociat fiecărei regiuni câte un document HTML dintre cele create la capitolele anterioare. Aspectul acestei pagini este redat în Figura 15.1.

Exemplul 15. 1

<HTML>

<HEAD>

<TITLE>grafica1</TITLE>

</HEAD>

<BODY>

<H1 align="center">Imagini harta</H1><HR>

</MAP>

<H3>Pentru a deschide cartile din imagine faceti click pe una dintre ele</H3>

</BODY>

</HTML>

2. Imagini animate

O imagine animată este formată dintr-o serie de imagini (pentru animație se folosește formatul GIF) care sunt afișate una după cealaltă creând aparența unei mișcări continue. Există multe site-uri care oferă imagini animate pe care le puteți descărca și salva pe hard-disk pentru a le folosi în cadrul site-ului dumneavoastră. Este suficient să deschideți motorul de căutare pe care îl folosiți de obicei și să introduceți drept cheie de căutare cuvintele "animated gifs" și veți obține un foarte mare număr de rezultate.

Aveți, însă, și posibilitatea de a vă crea propriile imagini animate. Acest proces poate fi destul de obositor, deoarece trebuie să creați toate imaginile care urmează să facă parte din procesul de animație. În continuare este prezentat modul de realizare al unei animații foarte simple, care realizează afișarea literă cu literă a cuvântului ANIMAȚIE.

Fiecare secvența din cuvânt reprezintă o imagine distinctă, astfel că vom crea 9 fișiere GIF care vor conține secvențele: ANIMATIE, ANIMATI, ANIMAT, ANIMA, ANIM, ANI, AN, A. Ultimul fișier va conține o imagine fără nici o literă.

Deoarece imaginile sunt foarte simple am folosit pentru crearea lor utilitarul Paint, din Windows > Accessories, dar dacă doriți să creați imagini mai complexe este necesar să utilizați un editor grafic mai performant.

După crearea imaginilor și salvarea fișierelor cu extensia .gif se trece la ce-a

de-a doua etapă: reunirea lor pentru a crea procesul de animație. Această animație a fost realizată cu ajutorul aplicației numite GIF Construction Set pe care o puteți găsi la adresa: http://www.mindworkshop.com/alchemy/

Programul oferă, pe lângă crearea animației, și multe alte opțiuni: crearea de butoane, bannere, efecte de tranziție ale paginilor, etc.

În meniul File al programului există un Animation Wizard care vă va conduce pas cu pas de-a lungul procesul de creare a animației. Wizard-ul vă va cere câteva informații printre care ce fișiere doriți să facă parte din procesul de animație (în cazul nostru cele nouă fișiere GIF), dacă doriți ca procesul să se desfășoare fără oprire și care este intervalul de timp dintre două afișări. După ce Animation Wizard a definitivat procesul de animație nu mai aveți altceva de făcut decât să salvați fișierul astfel obținut și să-l folosiți în pagina dumneavoastră. Includerea fișierului care conține imaginea animată într-un document HTML se face ca și la o imagine obișnuită folosind eticheta <IMG>.

Exemplul 15.2 ilustrează modul cum este inclusă în pagină o imagine animată aspectul paginii fiind cel din Figura 15.2.

Exemplul 15. 2

<HTML>

<HEAD>

<TITLE>grafica2</TITLE>

</HEAD>

<BODY>

<H1 align="center">Imagini animate</H1><HR>

</BODY>

</HTML>

Deși imaginile animate sunt atractive și dau paginii un aspect dinamic, totuși excesul de animație poate avea efecte contrare. Prea multe imagini animate sau o animație prea complexă pot conduce la mărirea timpului de încărcare a paginii. În plus, animația poate deveni obositoare și poate distrage atenția vizitatorului de la conținutul paginii. Vă recomandăm, deci, să folosiți imaginile animate cu grijă și numai atunci când au un rol bine definit în cadrul paginii.

3. Imagini transparente

Adesea o imagine inclusă într-o pagină arată mai bine dacă are un fundal transparent. Un fundal transparent înseamnă că deși imaginea are un fundal de o anumită culoare, el nu este vizibil în pagină deoarece fundalul paginii înlocuiește fundalul imaginii. Desigur, orice culoare din imagine poate fi făcută transparentă, dar cel mai adesea această tehnică se aplică asupra culorii de fundal.

Dacă dorim să realizăm un fundal transparent pentru o imagine trebuie să ținem seama de o serie de lucruri:

Fundalul trebuie să aibă o singură culoare și nu o combinație de culori.

Culoarea de fundal nu trebuie să mai fie prezentă altundeva în cadrul imaginii, deoarece transparența se va aplica tuturor zonelor colorate cu aceeași culoare

Este recomandat ca fundalul paginii de Web să aibă atributul bgcolor setat în mod explicit

Fotografiile sau imaginile cu mai mult de 256 de culori nu sunt potrivite pentru a fi transformate în imagini transparente deoarece în cadrul lor este greu de definit o singură culoare.

Imaginile pe care dorim să le transformăm în imagini transparente trebuie să fie în format GIF

În Exemplul 15.3 am folosit o imagine cu fundalul de culoare albă pe care am prelucrat-o cu ajutorul aplicației Microsoft Photo Editor. Nu este necesar decât să deschideți fișierul GIF cu imaginea dorită, să selectați din meniul Tools opțiunea Set Transparent Color care permite alegerea și setarea culorii pe care dorim să o facem transparentă, apoi să salvați noua imagine sub un alt nume decât cea originală. Indiferent care este culoarea de fundal a paginii dumneavoastră, fundalul imaginii transparente va avea aceeași culoare cu pagina așa cum se observă din Figura 15.3.

Exemplul 15. 3

<HTML>

<HEAD>

<TITLE>grafica3</TITLE>

</HEAD>

<H1 align="center">Imagini transparente</H1><HR>

<H4>Imaginea originala</H4>

<H4>Imaginea transparenta</H4>

</DIV>

</BODY>

</HTML>

Pentru a verifica modul în care funcționează imaginea transparentă pe diferite culori ale fundalului paginii, atribuiți atributului bgcolor și alte valori decât cea din exemplu.

4. Rezumat

În documentele Web pot fi incluse diverse elemente avansate de grafică:

Imagini hartă

Animație

Imagini transparente

O imagine hartă este o imagine care conține zone active pe care se poate efectua click cu mouse-ul, fiecare zonă conducând la deschiderea unui document HTML diferit.

Imaginile hartă sunt de două tipuri:

Imagini hartă de tip server

Imagini hartă de tip client (cele mai utilizate)

O imagine hartă de tip client se inserează într-un document cu ajutorul etichetei container <MAP> </MAP>. În cadrul acestei etichete fiecare zonă este definită prin intermediul etichetei <AREA>.

Imaginile animate sunt fișiere GIF care se includ în pagină ca orice altă imagine, folosind eticheta <IMG>. Pentru a crea o imagine animată aveți nevoie de un editor grafic, cu ajutorul căruia să creați imaginile care vor face parte din componența animației și de un program special care să le reunească într-un singur fișier GIF.

Imaginile transparente sunt imagini la care una dintre culori (cel mai adesea culoarea de fundal) este transformată în culoare transparentă, astfel încât la includerea ei într-o pagină Web fundalul imaginii se va confunda cu fundalul paginii.

Capitolul 16

Motoare de căutare și metatag-uri

1. Ce este un motor de căutare?

Dacă aveți o minimă experiență în navigarea pe Web v-ați întâlnit, fără îndoială cu motoarele de căutare. Motoarele de căutare sunt aplicații plasate pe servere deosebit de puternice, care conțin baze de date imense și care au drept scop cercetarea și indexarea sutelor de milioane de pagini Web existente. Utilitatea motoarelor de căutare este evidentă: fără ele ar fi aproape imposibil să găsim informațiile care ne interesează în oceanul de informații care este Web-ul.

Motoarele de căutare conțin un formular de tip câmp de editare în care utilizatorul introduce unul sau mai multe cuvinte folosite drept cheie de căutare. Rezultatele sunt furnizate sub forma unei liste de pagini Web care conțin cuvintele cheie introduse. Indexarea unei pagini de către un motor de căutare înseamnă asocierea cuvintelor cheie cu conținutul informațional al acesteia. Cele mai folosite motoare de căutare sunt, în acest moment, Google, Yahoo!, Lycos, Go.com și Excite.

Motoarele de căutare au drept scop indexarea tuturor paginilor existente pe Web, dar, evident, acest lucru este imposibil. Oricât de performante ar fi programele cu care lucrează, numărul de site-uri care sunt publicate în permanență pe Web depășește posibilitățile acestora. Acesta este motivul pentru care simpla postare a unui site pe Web nu garantează câtuși de puțin că acesta va avea vizitatori. Descoperirea lui de către motoarele de căutare poate dura între șase luni și un an. Tocmai de aceea nu trebuie să așteptați ca site-ul dumneavoastră să fie descoperit, ci trebuie să-l promovați activ, una dintre metode fiind înscrierea lui în bazele de date ale motoarelor de căutare.

Există două tipuri principale de motoare de căutare, care se bazează pe moduri diferite de a face indexarea paginilor:

Motoarele de căutare de tip "păianjen" care realizează indexarea automat, pe baza cuvintelor cheie prezente în antetul documentelor HTML (de exemplu Google). Acest tip de motoare folosesc algoritmi extrem de performanți, care cercetează și indexează milioane de pagini pe zi.

Motoarele de căutare care fac indexarea pe baza cuvintelor cheie furnizate de creatorul paginii, la înscrierea acesteia în baza de date a aplicației (de exemplu Yahoo!). Înscrierea în baza de date se face personal, de către autorul site-ului, iar evaluarea site-ului se face de către personal uman.

Pentru a face mai eficientă indexarea paginilor de către motoarele de tip "păianjen" limbajul HTML include o categorie specială de etichete numite metatag-uri.

2. Metatag-uri

Metatag-urile sunt o categorie specială de etichete care sunt plasate în antetul documentului HTML (în blocul <HEAD>). Ca și celelalte elemente incluse în antetul documentului, cu excepția titlului documentului, metatag-urile nu sunt vizibile pentru vizitatorul paginii.

Primul metatag despre care vom vorbi este deja cunoscut și l-ați folosit de foarte multe ori până acum: este metatagul <TITLE>. Se utilizează conform sintaxei:

<TITLE>Titlul paginii Web</TITLE>.

După cum ați observat din exemplele de până acum, titlul paginii apare în bara de titlu a ferestrei browserului.

Multe dintre motoarele de căutare afișează în lista de rezultate și titlul paginilor pe lângă adresele URL. Titlul paginii este informația care îl determină pe vizitator să intre sau nu pe pagina dumneavoastră. Titlul trebuie să fie o propoziție care să atragă atenția și în același timp să conțină informațiile esențiale privind subiectul și conținutul paginii.

Celelalte metatag-uri se introduc prin intermediul etichetei <META> care nu este o etichetă container. Eticheta <META> admite o serie de atribute care oferă motoarelor de căutare diverse informații care să ajute la indexarea paginii. Alte atribute oferă informații browserului privind data de expirare a documentului sau specifică perioada de timp după care documentul este reîncărcat în mod automat.

Există două categorii de metatag-uri:

metatag-urile name

metatag-urile http-equiv

Metatag-urile "name"

Cele mai folosite metatag-uri sunt cele care se referă la cuvintele cheie care caracterizează pagina și conținutul ei, oferind astfel informații motoarelor de căutare. Acestea sunt:

"keywords"

"description"

"robots"

Metatag-ul "keywords"

Metatag-ul "keywords" se introduce conform următoarei sintaxe:

Lista cuvintelor cheie trebuie să includă toate cuvintele pe care considerați că le-ar putea introduce un vizitator ca cheie de căutare pentru a descoperi pagina dumneavoastră. Cuvintele se scriu despărțite prin virgulă, fără spații intre ele. Pe lângă cuvintele cheie, puteți folosi și combinații de cuvinte. De exemplu într-o pagină care oferă informații despre crearea de pagini Web și web design, cuvintele cheie ar putea fi următoarele:

Găsirea cuvintelor și combinațiilor de cuvinte cheie este o etapă care trebuie tratată cu atenție. Pentru a aduce pagina dumneavoastră în atenția acelor vizitatori pentru care este ea concepută, cuvintele cheie trebuie alese cu atenție și ele trebuie să reflecte exact elementele de conținut definitorii ale paginii.

Unii dintre creatorii de pagini Web care doresc să obțină o poziționare mai bună în lista de rezultate furnizate de motoarele de căutare folosesc în mod abuziv cuvintele cheie, repetând același cuvânt sau combinații de cuvinte de un număr foarte mare de ori sau folosind cuvinte cheie care nu au legătură cu subiectul paginii. Ca urmare a acestor încercări de "păcălire" a motoarelor de căutare, au fost dezvoltați algoritmi performanți care identifică tentativele de fraudă și care se soldează fie cu scăderea cotației paginilor respective, fie chiar cu eliminarea lor din baza de date a motorului de căutare.

Metatag-ul "description"

Metatag-ul în cadrul căruia se realizează descrierea paginii este, de asemenea foarte important pentru succesul acesteia. Ca și cel anterior, se introduce în antetul documentului conform următoarei sintaxe:

Multe motoare de căutare includ în lista de rezultate pe lângă URL-ul și titlul paginii și descrierea ei. Pentru a face descrierea paginii dumneavoastră este bine să folosiți combinații de cuvinte cheie, reunite în fraze atractive și convingătoare. Fiți concis în descriere și plasați informațiile esențiale la început deoarece este posibil ca descrierile prea lungi să fie trunchiate. Ca și în cazul alegerii cuvintelor cheie, acordați o atenție deosebită formulării unei descrieri cât mai potrivite și țineți seama că aceasta poate fi singura dumneavoastră șansă de a-l convinge pe utilizator să deschidă pagina pe care ați creat-o. Descrierea unei pagini poate arăta astfel:

Pe lângă metatag-ul care face descrierea paginii este recomandată introducerea, la începutul paginii, a unui comentariu în cadrul căruia să inserați descrierea. Acest lucru este util deoarece există motoare de căutare care ignoră metatag-urile și preiau primele cuvinte pe care le găsesc în pagină. Dacă ați reușit să formulați o descriere sugestivă și convingătoare, o puteți folosi chiar ca frază de început în partea vizibilă a paginii.

Metatag-ul "robots"

Sunt situații când creatorul paginii Web dorește ca anumite pagini să fie excluse de la indexarea de către motoarele de căutare. De exemplu dacă ați publicat site-ul pe Web înainte de a fi terminat (deși acest lucru este nerecomandat) sau dacă doriți să reactualizați conținutul anumitor pagini și doriți ca până la finalizarea modificărilor paginile să nu fie accesate de motoarele de căutare, puteți folosi în antetul paginilor respective metatag-ul "robots" astfel:

Această construcție comunică motoarelor de căutare să nu indexeze pagina și în același timp să nu urmeze nici una dintre legăturile incluse în ea. Atributul content poate lua următoarele valori:

all – permite indexarea tuturor paginilor

none – nu permite indexarea nici unei pagini și nici urmarea legăturilor din cadrul lor

index – permite indexarea paginii

follow – permite urmarea legăturilor din pagină

noindex – nu permite indexarea paginii

nofollow – nu permite urmarea legăturilor din cadrul paginii

Alte metatag-uri name utilizate sunt:

Permite specificarea numelui autorului paginii

Permite specificarea drepturilor de autor

Specifică aplicația cu care a fost creată pagina.

Exemplu:

Metatag-urile "http-equiv"

Pe lângă metatag-urile name care oferă informații motoarelor de căutare, există metatag-urile http-equiv care oferă informații browserului privind documentul pe care urmează să-l deschidă. Iată în continuare o listă a acestor metatag-uri împreună cu funcțiile fiecăruia dintre ele.

Tabel 16. 1

După cum observați, metatag-urile de tip http-equiv sunt folosite pentru a transmite browserului diverse informații privind documentul HTML. Din această categorie face parte și metatag-ul care permite specificarea modului de tranziție între pagini:

unde: nr_secunde reprezintă durata tranziției în secunde iar cod_tranzitie poate fi unul dintre codurile de mai jos. Fiecare dintre ele realizează tranziția paginii în alt mod.

Tabel 16. 2

Exemplul 16.1 ilustrează funcționarea acestui metatag. Puteți observa modul de tranziție dintre pagini din Figura 16.1.

Exemplul 16. 1

<HTML>

<HEAD>

</HEAD>

<H1 align="center">Tranzitia intre pagini</H1><HR>

Pentru a observa modul de tranzitie apasati <A href="meta2.html">aici</A>

</BODY>

</HTML>

Puteți schimba codurile după cum doriți pentru a observa și alte moduri de tranziție.

Documentul meta2.html creat în Exemplul 16.2 servește doar pentru a exemplifica modul în care se face tranziția pentru intrarea în pagină.

Exemplul 16. 2

<HTML>

<HEAD>

</HEAD>

<H3>Pentru a reveni la pagina anterioara apasati butonul Back al browserului</H3>

</BODY>

</HTML>

Atenție!

Am precizat că metatag-urile sunt incluse în antetul documentului HTML. Atunci când folosiți cadre în paginile dumneavoastră nu uitați să plasați metatag-urile în blocul <HEAD> al tuturor documentelor care se deschid în cadre și nu numai în documentul de definire a cadrelor <FRAMESET>.

3. Rezumat

Motoarele de căutare sunt aplicații foarte puternice care au drept scop indexarea și adăugarea în baza lor de date a sutelor de milioane de pagini Web existente.

Pentru a facilita indexarea paginii de către motoarele de căutare, în antetul documentului HTML se includ niște elemente speciale numite metatag-uri, prin intermediul etichetei <META>.

Cele mai importante metatag-uri sunt cele care furnizează motoarelor de căutare lista de cuvinte cheie asociată paginii și descrierea acesteia (metatag-urile "keywords" și "description" ), precum și cel care interzice indexarea paginilor (metatag-ul "robots" ).

Alte metatag-uri furnizează informații browserului privind tipul paginii, intervalul de timp după care pagina este reîncărcată automat, momentul expirării, autorul, programul cu care a fost construită, etc.

Crearea și publicarea unui site web

Am studiat până acum elementele fundamentale ale limbajului HTML inclusiv modul în care acesta poate fi extins prin folosirea scripturilor CGI, a scripturilor JavaScript și a foilor de stiluri. Aveți la îndemână acum instrumentele necesare pentru a crea propriul dumneavoastră site Web. Dar este oare suficient? Răspunsul este nu.

Pentru a crea un site Web de calitate, care să comunice informațiile în mod logic și atractiv și care să atragă vizitatori permanenți, cunoașterea limbajului HTML nu este suficientă. Înainte de a începe scrierea codului HTML pentru paginile dumneavoastră trebuie să parcurgeți alte două etape importante: planificarea site-ului și stabilirea elementelor de Web design. După ce ați finalizat documentele HTML care vor face parte din site trebuie să testați funcționarea link-urilor și aspectul paginilor în diferite browsere. Și, în fine, după ce toate aceste etape au fost parcurse, urmează publicarea site-ului pe un server Web care să-l facă accesibil tuturor celor care navighează pe Web.

În cele ce urmează vom discuta despre etapele care preced construirea documentelor HTML care vor forma site-ul și despre cele care urmează după ce codul HTML al paginilor a fost definitivat.

Capitolul 17

Planificarea site-ului

Planificarea este un aspect crucial în procesul de creare a unui site Web, deoarece este etapa în care se iau decizii care vor influența designul, implementarea și, mai târziu, promovarea site-ului. World Wide Web fiind un mediu deschis și dinamic, planificarea este mai degrabă un proces continuu în care intervin schimbări determinate de înnoirea permanentă a informațiilor și de apariția altora noi.

Atunci când creați un site Web trebuie să fiți conștient că există o serie de factori asupra cărora creatorul site-ului nu are nici un control. Primul pas în procesul de planificare este identificarea acestor factori și determinarea modului în care aceștia pot afecta structura viitoare a site-ului dumneavoastră.

1. Factori care nu pot fi planificați

Factorii pe care creatorul site-ului nu îi poate controla și prin urmare nu pot face obiectul unei planificări riguroase sunt următorii:

Comportamentul utilizatorului.

Acest factor implică faptul că nu puteți controla cum va accesa utilizatorul informațiile din site-ul dumneavoastră. Web-ul este un sistem permeabil, aceasta însemnând că un vizitator poate intra în interiorul site-ului nu numai prin pagina de început (pagina home) ci și printr-o pagină oarecare. Vizitatorul site-ului poate ajunge la el parcurgând o listă de rezultate furnizată de un motor de căutare, sau prin intermediul unui link aflat pe un alt site, sau parcurgând o listă de resurse. Oricare dintre aceste metode îl poate conduce pe vizitator la o altă pagină din interiorul site-ului, și nu la cea destinată de dumneavoastră a fi pagina Home.

În general, creatorul site-ului este tentat să structureze site-ul având în minte un anumit tip de acces, cel mai adesea cel care pleacă de la pagina de start, ceea ce conduce la alegerea unei anumite structuri, la o anumită organizare a legăturilor între pagini, etc. Trebuie să aveți permanent în vedere faptul că vizitatorul site-ului poate avea un cu totul alt mod de a parcurge site-ul decât cel gândit de dumneavoastră și să-i furnizați de-a lungul întregului site elemente de navigație clare care să-l ajute să se orienteze.

Browserul utilizatorului.

Așa cum am mai discutat, există o mare varietate de browsere folosite pentru a vizualiza paginile Web. Prin urmare, vizitatorii site-ului vor percepe o imagine diferită a site-ului dumneavoastră, în funcție de tipul de browser folosit. Creatorul site-ului nu poate ști ce tip de browser folosește un anumit vizitator și deci nu are control asupra modului în care va fi afișat conținutul paginilor sale. De exemplu, mai există încă utilizatori care folosesc versiuni vechi de Netscape sau Explorer, care nu suportă anumite extensii HTML. Există de asemenea încă în uz browsere text, cum este Lynx, care nu suportă grafica. Dacă veți plasa informații esențiale în fișiere grafice, de exemplu, acești utilizatori nu vor avea acces la ele.

Din acest motiv este bine să stabiliți de la început care doriți să fie nivelul de accesibilitate al site-ului dumneavoastră din acest punct de vedere. Un alt aspect este înțelegerea faptului că HTML este un limbaj care este destinat definirii structurii documentului și nu al modului său de afișare. Este recomandat să evitați specificarea în detaliu a aspectului paginilor sau optimizarea paginilor pentru un anumit tip de browser.

Legăturile cu pagini externe.

Într-un site Web există de obicei legături către resurse exterioare site-ului care sunt și ele în afara controlului dumneavoastră. Paginile referite prin aceste legături își pot schimba adresele, făcând astfel ca legătura să nu mai fie valabilă (legături perimate). De asemenea pot exista legături rupte, în cazul când serverul pe care este găzduită pagina respectivă are anumite dificultăți tehnice. Ținând seama de imposibilitatea de a controla acest aspect, pot fi adoptate mai multe metode de abordare:

Site-ul să nu conțină nici o legătură externă sau care să se afle în afara controlului direct al designerului. Este metoda cea mai sigură. Din păcate, această strategie anulează posibilitatea ca vizitatorul să beneficieze de informații conexe cu subiectul site-ului dumneavoastră aflate în exteriorul său.

Centralizarea resurselor. Este o practică des întâlnită pe Web, aceea de a include toate legăturile externe într-o pagină special destinată acestora. Beneficiul acestei strategii este că în cazul când una dintre aceste legături externe nu mai funcționează, vizitatorul se poate cu ușurință reîntoarce la pagina de resurse pentru a testa următorul link. În plus, cu unele excepții, vizitatorii vor parcurge cel puțin o parte a site-ului înainte de a ajunge la pagina de legături externe și a-l părăsi, eventual, definitiv.

Ieșirea liberă. Este cea mai flexibilă abordare, permițând plasarea legăturilor externe oriunde în cadrul paginilor. Dezavantajul ei major este că vizitatorul poate părăsi prematur site-ul pentru a urma un anumit link.

Dacă nu aveți control asupra legăturilor de la site către exterior, este tot atât de adevărat că nu puteți controla nici legăturile care se fac din exterior către site. Acest lucru poate fi dezavantajos, deoarece nu puteți ști în ce mod este prezentată legătura către site-ul dumneavoastră. Poate că referirea la el este ironică sau răuvoitoare, însă acest lucru este dincolo de controlul dumneavoastră. Tot ceea ce puteți face este să creați un site de calitate și cu un conținut valoros, care să convingă prin el însuși.

Cu toate că elementele prezentate mai sus pot părea descurajante, unele dintre ele prezintă totuși și avantaje. Astfel, permeabilitatea Web-ului poate lucra în favoarea designerului, cu condiția ca acesta să structureze atent informațiile prezentate și să ofere suficiente elemente de navigație. O pagină sau un grup de pagini din cadrul unui site pot fi folosite ca referințe în alte pagini sau chiar ca elemente constitutive ale unui alt site. De exemplu, un site de tip mono-pagină care face prezentarea unui manual de HTML poate fi folosit ca pagină individuală într-un site de librărie electronică, sau poate constitui o legătură utilă din interiorul unui site de design Web, mărind astfel șansele ca pagina respectivă să fie accesată de vizitatori printr-unul dintre aceste puncte.

2. Etapele planificării site-ului

Procesul de planificare a unui site trebuie să parcurgă următoarele etape:

Stabilirea audienței

Stabilirea scopului

Definirea obiectivelor

Colectarea informațiilor despre subiectul prezentat

Stabilirea specificațiilor

Stabilirea modului de prezentare

Audiența

Pentru a crea un site de calitate și o comunicare eficientă a informațiilor, o etapă deosebit de importantă este definirea audienței site-ului. Audiența reprezintă publicul căruia i se adresează site-ul. Stabilirea audienței site-ului dumneavoastră este esențială deoarece contribuie la definirea conținutului paginilor, precum și a organizării și aspectului său. Un site Web creat pe baza unor informații precise asupra audienței sale actuale și viitoare are mult mai multe șanse de succes decât unul care nu se adresează unui public specific.

Stabilirea audienței unui site implică doi pași:

Definirea publicului țintă.

Trebuie să stabiliți cui se adresează site-ul dumneavoastră. Puteți, de exemplu să vă adresați "persoanelor care studiază chimia". Deși este un enunț care definește într-o oarecare măsură audiența site-ului, este de dorit ca definirea audienței să fie mai precisă decât atât. Vă puteți adresa de pildă, specialiștilor în chimie, și atunci informațiile vor avea un înalt grad de specializare și un nivel științific ridicat sau vă puteți adresa elevilor de liceu interesați de studiul chimiei, sau care vor da examene la această disciplină. În acest caz informațiile vor fi de nivel mai general, legate de programa școlară și de tipurile de subiecte cu care elevii se vor confrunta la examene.

Dacă, de exemplu, doriți să creați un site comercial, stabilirea segmentului de piață căruia vă adresați este la fel de importantă. Dacă intenționați să vindeți produse cosmetice vă veți adresa probabil femeilor. Dar aceasta este o reprezentare mult prea generală a publicului dumneavoastră. Ați putea să fiți mai specific, stabilindu-vă drept segment de piață femeile cu vârsta mai mică de 25 de ani. În această situație este mai probabil că vor avea succes produsele de înfrumusețare mai îndrăznețe, în vreme ce, dacă vă adresați femeilor de vârstă medie, cele mai bine vândute vor fi produsele de întreținere, cremele anti-rid, etc.

Concluzia care se impune este că definirea cât mai precisă a audienței este definitorie pentru toate etapele ulterioare ale elaborării site-ului. Cu cât mai bine definită este audiența, cu atât șansele de a crea un site de succes sunt mai mari.

Definirea informațiilor necesare care privesc publicul țintă.

Nu toate informațiile despre publicul țintă sunt esențiale în elaborarea site-ului. Dacă intenționați să vă adresați specialiștilor în chimie, care anume caracteristici ale acestora sunt importante pentru dumneavoastră? Nivelul de educație? Aria de specializare? Caracteristici personale, precum înălțimea și greutatea? Evident, exceptând cazul în care intenționați să vindeți prin intermediul site-ului echipament de laborator, ultimele informații sunt inutile. Prin urmare este necesar să identificați informațiile relevante privitoare la audiența site-ului dumneavoastră.

Scopul

Stabilirea scopului site-ului este etapa în care trebuie să răspundeți la întrebarea "de ce?". De ce doriți să creați acest site? Definiția scopului site-ului reprezintă tema conducătoare în procesul de construire a acestuia. Un site fără un scop clar și bine definit lansează un mesaj neconvingător și cețos. Vizitatorul se va întreba, fără îndoială, "La ce servește acest site?" și se va grăbi să-l părăsească.

Pentru a defini scopul site-ului trebuie să aveți în vedere următoarele elemente:

Aria de cuprindere a subiectului. Să presupunem că doriți să creați un site care să conțină informații despre muzica rock a anilor ’60. Într-o asemenea situație, nu veți defini drept subiect al site-ului muzica rock în ansamblu, deoarece o definire atât de vastă depășește cu mult aria de cuprindere a subiectului dumneavoastră.

Audiența. În scopul site-ului trebuie să faceți referire și la audiența stabilita anterior. Astfel, scopul site-ului ar putea fi definit în maniera următoare: "Site-ul oferă informații iubitorilor muzicii rock a anilor ’60, de vârstă medie".

Nivelul de detaliere a subiectului. Trebuie să specificați dacă vă referiți doar la grupurile rock reprezentative sau doriți să faceți o istorie completă a perioadei.

Beneficiul sau avantajul vizitatorului. Ce are de câștigat o persoană care vizitează site-ului dumneavoastră? Poate afla informații inedite despre formațiile preferate, sau poate fi informat cu privire la evoluția lor ulterioară.

Stabilirea scopului site-ului determină deciziile ulterioare ale designerului privind mesajul pe care îl transmite site-ul. Un scop bine articulat servește ca jalon pentru toate celelalte etape ale procesului de planificare și creare a site-ului. Scopul site-ului poate reprezenta chiar prima informație care le este oferită vizitatorilor, la intrarea pe prima pagină.

Obiectivele

După ce ați stabilit audiența site-ului, care sunt informațiile privitoare la publicul țintă, precum și scopul său, pasul următor constă în combinarea tuturor acestor informații și formularea unor obiective specifice ale site-ului dumneavoastră. Obiectivele reprezintă o detaliere a scopului general al site-ului, conținând informațiile specifice care vor conduce la îndeplinirea scopului pentru care a fost creat site-ul. De exemplu, dacă scopul unui site este "să ofere informații despre orașul ZZZ" , acesta poate fi dus la îndeplinire prin intermediul unor obiective specifice și variate cum ar fi: informații despre așezarea geografică a orașului, despre dezvoltarea economică, despre viața culturală, obiective turistice, etc. Cu alte cuvinte, în vreme ce scopul site-ului comunică ce aveți de gând să faceți, obiectivele comunică ce informații veți oferi pentru a vă îndeplini scopul propus.

Spre deosebire de scopul site-ului, obiectivele se pot modifica în timp, pe măsură ce apar noi informații despre publicul țintă sau despre subiectul site-ului, cu ajutorul cărora puteți susține mai bine scopul său.

Colectarea informațiilor despre subiect

Informațiile referitoare la subiectul site-ului includ atât informațiile on-line cât și sursele clasice de informații. În această etapă veți colecta nu numai informații legate de subiectul site-ului care vor fi prezentate utilizatorului ci și informațiile și cunoștințele de care aveți nevoie pentru realizarea site-ului.

Pașii necesari în construirea colecției de informații necesare sunt:

Stabilirea informațiilor necesare, atât cele pe care le veți furniza vizitatorului cât și cele care vă sunt necesare dumneavoastră

Determinarea modului cum veți obține aceste informații. În această etapă trebuie să identificați sursele de documentare. Informațiile despre subiectul ales le puteți găsi pe Web, în literatura de specialitate, în diverse baze de date.

Modul de reactualizare a informațiilor. Dacă informațiile pe care doriți să le prezentați sunt dinamice și se perimează cu repeziciune, trebuie să stabiliți cum intenționați să le actualizați și care este intervalul de timp între două reactualizări. De exemplu, dacă intenționați să creați un site care să prezinte știri sau date despre vreme, ele vor trebui reactualizate zilnic sau chiar mai frecvent. Dacă site-ul prezintă informații despre istorie, evident că informațiile vor fi reactualizate mult mai rar, eventual la apariția unor noi descoperiri arheologice, de exemplu.

Specificațiile

Stabilirea specificațiilor pentru un site reprezintă o detaliere a obiectivelor sale și definirea unor cerințe sau a unor restricții. Specificațiile descriu în detaliu ce informații vor fi oferite în paginile site-ului și cum vor fi ele prezentate. De exemplu, dacă unul dintre obiectivele unui site este "furnizarea de legături către surse bibliografice referitoare la subiect" , atunci specificațiile vor preciza care sunt aceste surse bibliografice, care sunt adresele lor URL, câte astfel de adrese vor fi incluse într-o pagină, etc.

Specificațiile trebuie să identifice toate resursele necesare atingerii obiectivelor: link-uri, fișiere grafice, fișiere de sunet sau video, alte elemente care vor fi incluse în site: formulare, imagini hartă, scripturi. De asemenea, în cadrul specificațiilor 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, fișiere care să depășească 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

Eșalonarea în timp a etapelor de creare a site-ului

3. Rezumat

Prima etapă a procesului de construire a unui site este planificarea. În această etapă trebuie identificați factorii care nu pot fi controlați printre care se numără: comportamentul utilizatorului, browserul cu care va fi vizualizată pagina și legăturile cu pagini externe.

Planificarea site-ului parcurge următoarele etape:

Stabilirea audienței site-ului

Stabilirea scopului site-ului

Definirea obiectivelor site-ului

Colectarea informațiilor despre subiectul prezentat

Stabilirea specificațiilor site-ului

Stabilirea modului de prezentare a site-ului

Un site de calitate, care să ofere informații valoroase în mod atractiv și să permită o comunicare eficientă a acestora nu se naște în mod întâmplător. Fără 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ă veți începe să scrieți direct codul HTML fără să treceți prin etapa de planificare veți obține doar o îngrămădire de pagini fără coerență, adesea defectuos legate între ele, cu un conținut neclar și slab structurat.

Capitolul 18

Designul site-ului

Odată parcursă etapa de planificare, având clare audiența, scopul, obiectivele și specificațiile site-ului, puteți trece la etapa de creare efectivă. Pentru ca site-ul dumneavoastră să aibă un aspect plăcut, o bună organizare, instrumente de navigare eficiente trebuie să cunoașteți și să aplicați regulile fundamentale de Web design.

Când sunteți în faza de concepere a designului principalul dumneavoastră obiectiv este să creați un aspect atractiv și să oferiți vizitatorului site-ului un sentiment de satisfacție, pe măsură ce acesta parcurge paginile. Designul unui site trebuie să echilibreze performanțele browserului, cu estetica și funcționalitatea site-ului. În etapa de design sunt luate deciziile de ordin practic care vor conduce la îndeplinirea obiectivelor stabilite: câte imagini sau elemente grafice veți include în pagină, cât de mult text vor conține paginile, ce texte sau imagini vor fi folosite drept legături.

1. Principiile designului web

Pentru a lua deciziile corecte în ceea ce privește designul unui site trebuie să aveți în vedere câteva principii de bază:

Asocierea semnificațiilor. Folosiți-vă de puterea hypertextului pentru a stabili legături între informațiile înrudite ca semnificație.

Menținerea competitivității. Deoarece Web-ul este un mediu foarte competitiv, asigurați-vă că designul site-ului se menține la cel mai scăzut cost posibil, din punctul de vedere al vizitatorului. Acest cost include timpul de încărcare al paginilor, aplicațiile suplimentare necesare pentru vizualizarea optimă a paginilor precum și efortul depus de vizitator pentru a înțelege informațiile prezentate.

Folosirea eficientă a resurselor. Alegeți pentru site-ul dumneavoastră acele elemente care vin în întâmpinarea necesităților utilizatorului, și sunt cât mai eficiente posibil din punctul de vedere al dimensiunii fișierelor, al timpului de acces și al întreținerii ulterioare.

Concentrarea pe necesitățile utilizatorului. Acesta este, poate, cel mai important principiu de Web design și, paradoxal, cel mai adesea ignorat. Un site Web nu se construiește pentru a satisface gustul designerului (sau al clientului pentru care lucrează) și nici pentru a etala cunoștințele sale vaste asupra celor mai noi tehnici de programare Web, ci pentru a veni în întâmpinarea nevoii de informații a vizitatorilor săi. Focalizarea asupra utilizatorului este prioritatea principală a unui site de calitate.

Înțelegerea permeabilității. Acest principiu se referă la înțelegerea și asumarea faptului că vizitatorul poate accesa un site prin oricare pagină a sa. Din acest motiv este de dorit ca informațiile din cadrul unei pagini să se auto-susțină fără a depinde de informațiile din restul site-ului. Dacă acest lucru nu este posibil, este obligatorie prezența unor instrumente de navigație eficiente care să permită vizitatorului orientarea cu ușurință în interiorul site-ului.

Crearea unui aspect plăcut, 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ă conțină indicii asupra identității site-ului și asupra scopului ei.

Susținerea interactivității. Chiar dacă nu folosiți formulare care asigură un grad înalt de interactivitate cu vizitatorii site-ului, este obligatorie prezența unor informații de contact (adresa de mail a Webmaster-ului, cel puțin) astfel încât utilizatorii să poată obține informații suplimentare sau să poată comunica eventualele probleme apărute la parcurgerea site-ului.

Susținerea navigației. Asigurarea unor instrumente de navigație eficiente este una dintre condițiile esențiale 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 său. Modul de organizare depinde de scopul, obiectivele și subiectul site-ului și se bazează pe principiile de design enunțate mai sus.

În funcție 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

Legăturile dintre pagini trebuie să fie corespunzătoare tipului de site pe care îl construiți.

Site-urile liniare mono-pagină

Acest tip de site este, așa cum indică și numele, format dintr-o singură pagină. Această structură se folosește atunci când informațiile prezentate sunt sub formă de text care se poate împărți firesc în secțiuni mai mici. Vizitatorii pot parcurge întreaga pagină derulând-o dar, de obicei, la începutul paginii există o listă de legături care are rol de Cuprins. Acestea sunt niște legături interne (ancore) care conduc rapid vizitatorul la secțiunea care îl interesează, fără a mai derula întreaga pagină. Împărțirea conținutului paginii în secțiuni mai mici se poate face folosind linii orizontale. Este indicat ca la fiecare nouă secțiune să inserați o legătură internă către partea superioară a paginii unde se află Cuprinsul.

Site-urile liniare multi-pagină

Structura de acest tip se folosește în situația când informațiile prezentate se succed într-o ordine secvențială, de la început la sfârșit, informațiile prezentate într-o pagină bazându-se pe cele din pagina anterioară. Pentru a-l îndruma pe vizitator să parcurgă site-ul în ordine, fiecare pagină trebuie să conțină o legătură cu pagina următoare, precum și cu cea anterioară. De asemenea, este necesar să inserați și o legătură cu prima pagină a site-ului care trebuie să conțină 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 depășească un ecran) pentru a face navigarea mai comodă. Cu toate că acest tip de organizare este logică, nu trebuie să uitați principiul permeabilității. Pentru un vizitator care va intra în site printr-o pagină oarecare, indicații de navigare cum ar fi "Înainte" , "Înapoi" ar putea să nu aibă prea mult înțeles.

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 conține legături către alte pagini, fiecare pagină conținând câte o parte a subiectului site-ului. Fiecare dintre aceste pagini de nivel unu poate avea, la rândul său, legături cu alte pagini, detaliind subiectul și furnizând informații specifice.

Un exemplu de site de acest tip este o librărie virtuală. Pagina Home ar putea conține legături către diverse categorii: Beletristică, Istorie, Politică, Economie, Calculatoare și Internet. Dacă un vizitator este interesat de un manual de programare în Perl, el va alege legătura către Calculatoare și Internet și va ajunge într-o pagină de nivelul unu unde va găsi legături către Programare, Internet, Hardware. Va alege legătura Programare care va deschide o pagină de nivelul doi care va conține o listă de titluri, printre care și manualul căutat.

Atunci când concepeți structura unui astfel de site, trebuie să acordați o mare atenție organizării logice și fluente a site-ului. Fiecare pagină trebuie să conțină o legătură către pagina Home astfel încât vizitatorul să poată reveni la început fără să fie obligat să străbată toate nivelele. Nu legați prima pagină de prea multe pagini de nivelul unu ci ramificați-le în adâncime. Dacă site-ul este de mari dimensiuni, introduceți în partea superioară a fiecărei pagini o bară de navigare care informează vizitatorul despre locul unde se află. Revenind la exemplul cu librăria, un astfel de instrument de navigare ar putea arăta așa: Home > Calculatoare > Programare.

În plus, este indicat să oferiți o bară de navigare secundară la baza paginii.

Site-urile de tip rețea.

Aceste site-uri au o structură liberă. Ele sunt formate din mai multe pagini, fiecare putând avea legătură cu oricare altă pagină. Există și aici o pagină Home, însă de la ea, vizitatorul poate naviga prin site fără a urma un drum precis. În general, acest tip de site este potrivit pentru subiectele care nu au o structură logică internă, subiecte recreaționale sau distractive. Dacă doriți să creați un site de acest tip, trebuie să aveți grijă să oferiți în fiecare pagină, pe lângă legăturile cu alte pagini, o legătură către pagina Home. În plus, asigurați-vă că materialul dumneavoastră este adecvat acestui tip de site deoarece altfel site-ul va purta amprenta neconcordanței între subiectul abordat și modul său de organizare.

3. Metodologia de construire a site-ului

Deși nu există un mod unic de desfășurare a procesului de construire a unui site, există trei tipuri de abordări posibile, pe care creatorul site-ului le poate alege sau combina, în funcție de necesități.

Metoda "Top-Down"

Dacă designerul are încă de la început o idee clară asupra conținutului site-ului, această abordare este cea mai potrivită. În acest tip de metodologie, este creată mai întâi pagina de început a site-ului (pagina Home) și apoi celelalte pagini. Paginile pot conține un minim de informații, urmând ca la dezvoltarea ulterioară a site-ului, ele să fie îmbogățite. Avantajul major al acestei abordări este acela că permite continuitatea vizuală și de conținut, 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ă conțină același 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 folosește când designerul nu cunoaște de la început care vor fi structura și aspectul final al site-ului, dar cunoaște aspectul și conținutul unor pagini din cadrul său. Această situație poate apărea când doriți ca site-ul să conțină pagini deja existente, care au fost create în procesul de dezvoltare al altui site, de exemplu. Chiar dacă nu dețineți pagini create deja de la care să porniți, această abordare permite crearea unor pagini individuale care îndeplinesc anumite obiective și care pot fi legate apoi de o pagină Home. Avantajul abordării "Bottom-Up" este acela că, la construirea paginilor individuale, nu mai sunteți constrâns la respectarea unui anumit stil, consecvent cu cel din pagina Home. Totuși, ajustarea ulterioară a paginilor în sensul realizării unui aspect unitar, este necesară.

Metoda incrementării

Această metodă constă în construirea unei pagini de start și a unor pagini individuale legate de acesta, avându-se în vedere crearea unor pagini intermediare, pe măsura necesităților. Metoda se folosește atunci când 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ă începătorilor, deoarece prin adăugirile ulterioare există riscul de a obține un site defectuos organizat și lipsit de unitate.

4. Tehnici de design web

Pentru a realiza designul unui site sunt folosite o serie de tehnici cu ajutorul cărora paginile capătă contur, atât din punct de vedere vizual cât și din punct de vedere al organizării legăturilor și al amplasării conținutului în pagini. În continuare sunt prezentate câteva dintre aceste tehnici, fiecare dintre ele referindu-se la câte un aspect al designului site-ului.

Schița site-ului

Odată ce v-ați 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ă realizați o schiță a întregului site.

Puteți folosi în acest scop Microsoft Word sau orice alt procesor de text. Pentru început creați un document nou în care listați punctele majore pe care doriți să le acoperiți în pagina Home.

Faceți de asemenea o listă a elementelor grafice pe care intenționați să le includeți, însoțite de indicații privind așezarea lor în pagină. Stabiliți care sunt paginile de nivel unu și ce informații doriți să oferiți în cadrul lor, precum și paginile subordonate acestora care vor cuprinde detalierea subiectelor anunțate în paginile de nivel unu.

Pentru a avea o imagine cât mai exactă a structurii site-ului încă din faza de schițare a sa este recomandat să folosiți bara de instrumente Outlining din meniul Tools > Customize din Word. Aceasta vă permite să stabiliți nivelul paginilor și să realizați cu ușurință ramificarea lor în adâncime.

O altă metodă pentru a realiza schița site-ului o constituie graficul (sau harta) site-ului. Dacă nu doriți să vă complicați folosind un editor de text sau un program de grafică, puteți realiza o astfel de schiță și pe hârtie, cu creionul. Desenați câte un dreptunghi pentru fiecare pagină din site, specificând în interiorul său scopul și obiectivele paginii, elementele și aranjarea lor în pagină. Apoi uniți dreptunghiurile prin săgeți pentru a specifica traseele pe care le poate parcurge utilizatorul. Săgețile reprezintă de fapt legăturile dintre pagini. Aveți grijă ca spre pagina Home să indice toate săgețile, pentru a asigura astfel o legătură cu ea din orice pagină a site-ului. În acest mod puteți planifica pentru fiecare pagină ce urmează să vadă, să înțeleagă și să facă vizitatorul acesteia, precum și unde se poate deplasa din pagina respectivă.

Oricare ar fi metoda folosită pentru a schița site-ul, la fiecare pagină trebuie să vă puneți următoarele întrebări:

Ce doresc să afle vizitatorul din această pagină?

Ce doresc să facă vizitatorul în acest moment?

Ce doresc să simtă vizitatorul parcurgând pagina?

Unde doresc să meargă vizitatorul în continuare?

Desigur, în ultimă instanță comportamentul și impresiile vizitatorului scapă controlului designerului, însă un site în care fiecare pagină dă răspunsuri clare și limpezi acestor întrebări are foarte multe șanse de a întruni aprecierile pozitive ale vizitatorilor săi.

Pagina de intrare în site (pagina splash)

Există multe site-uri care înainte de pagina Home au o pagină de intrare în site, numită pagină splash. Scopul unei astfel de pagini este identificarea rapidă a obiectului site-ului în timp ce se încarcă restul de date. Pagina splash are pentru site același rol pe care îl are coperta unei cărți sau prima pagină a unei reviste. Această primă pagină trebuie să se încarce rapid, să aibă un impact vizual puternic și să comunice esențialul despre subiectul site-ului sau compania căreia îi aparține site-ul.

Există opinii divergente în legătură cu folosirea și utilitatea paginii splash într-un site. Mai ales dacă face apel la elemente multimedia, sunet, grafică, animație complexă care încetinesc timpul de încărcare, pagina splash poate aduce mai degrabă deservicii site-ului. În plus, pagina splash poate fi resimțită de vizitator ca o barieră în accesul imediat la informațiile din interiorul site-ului.

Pagina Home

Deși aspectul și conținutul paginii Home poate varia foarte multe de la un site la altul, există câteva elemente comune prezente în orice pagină de start:

Identificarea firmei sau companiei căreia îi aparține site-ul (dacă este cazul)

Descrierea scopului site-ului

Descrierea structurii site-ului. Pagina Home are și funcția de Cuprins al site-ului oferind indicații vizitatorilor asupra subiectelor abordate

Stabilirea relațiilor între secțiunile de nivel unu ale site-ului și cele subordonate lor. Aceasta se realizează prin intermediul barelor de navigare, butoanelor, hărților de imagini sau listelor de legături.

Furnizarea informațiilor de contact.

Paginile din interior

Paginile de nivel unu reprezintă diviziunile majore ale subiectului general al site-ului. Există tentația de a include prea multe informații detaliate la acest nivel. Dacă site-ul acoperă un subiect vast, cu o cantitate mare de informații specifice, este bine să lăsați detalierea acestora pentru paginile de nivel doi. Paginile de nivel unu trebuie să conțină o descriere succintă a subiectului acoperit precum și legături către 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 lângă text și imagini explicative ale unui anumite noțiuni poate fi legată de pagini de nivel trei care conțin imaginile. Când vizitatorul face click pe un anumit text aflat în pagina de nivel doi se deschide pagina de nivel trei cu imaginea explicativă. Avantajul acestei abordări este descongestionarea paginilor de nivelul doi care cuprind detalierea subiectului.

Schița dumneavoastră trebuie să cuprindă, pe lângă modul de organizare a paginilor, și o listă cât mai completă a elementelor pe care doriți să le includeți în fiecare pagină (imagini, formulare, fișiere multimedia, etc.).

Fragmentarea informațiilor

Omul poate procesa o cantitate limitată de informații într-o anumită unitate de timp. Din acest motiv, una dintre sarcinile specifice în designul Web este fragmentarea informațiilor în secvențe care să nu depășească posibilitățile de cuprindere ale utilizatorului. Cantitatea de informații cuprinsă într-o pagină nu trebuie să-l copleșească pe vizitatorul paginii sau să mărească timpul ei de încărcare. De asemenea, modul de fragmentare al informației trebuie să focalizeze atenția vizitatorului asupra principalelor subiecte abordate în pagină și să îl ajute să ia cunoștință în mod gradat de subiectul prezentat. Fragmentarea corectă a informațiilor este în avantajul designerului, deoarece îl ajută să creeze pagini reutilizabile. Dacă fiecare pagină pe care o veți crea servește la îndeplinirea unui anumit scop, puteți include această pagină fie direct, fie ca o resursă utilă și în alte site-uri pe care le creați ulterior și care au subiecte conexe cu pagina respectivă.

În cadrul site-ului fragmentarea informațiilor conduce la stabilirea modului în care va fi detaliat subiectul, la determinarea numărului de pagini necesare pentru acesta precum și a nivelului paginilor. Deși divizarea subiectului în părți mai mici este o tehnică deosebit de utilă, nu abuzați totuși de puterea hypertextului. O fragmentare excesivă a subiectului într-un mare număr de pagini este la fel de obositoare ca și prezentarea acestuia în bloc. Un design eficient anticipează nevoia vizitatorului de a obține informații suplimentare și furnizează la momentul oportun legături către paginile care detaliază acel punct.

În cadrul unei pagini modul de fragmentare al informațiilor ține de logica internă a subiectului prezentat. Pentru a diferenția părțile constitutive ale subiectului unei pagini o mare importanță o are organizarea textului în cadrul paginii.

Cei mai mulți dintre cei care navighează pe Web obișnuiesc să "scaneze" paginile în căutare de informații. Ei citesc mai întâi titlurile, listele, și primele fraze dintr-un paragraf. Este bine să țineți seama de acest lucru când organizați textul în pagină.

Conținutul paginii trebuie să fie cât mai ușor de citit. Folosiți paragrafe scurte, despărțite prin linii libere, evitați frazele prea lungi și folosiți în mod judicios titlurile. Accentuați părțile pe care vreți să le scoateți în evidență în text prin îngroșare sau scrierea lor cu altă culoare, dar nu în exces. Abuzul de culori sau de texte scrise cu caractere aldine fac pagina încărcată și greoaie. Este indicat să vă limitați la un număr redus de tipuri de font. Cele mai apreciate sunt Verdana și Arial, deoarece sunt lizibile și elegante. Este mai bine să evitați folosirea tipului Times New Roman, deși este un tip foarte folosit în editarea de texte. Spre deosebire de textele tipărite, pe monitor citirea se face cu 25% mai încet deoarece monitorul adaugă fonturilor un anumit grad de neclaritate (fuzziness), mai accentuat la fonturile cu serife, așa cum este Times New Roman. Nu aranjați textul în pagină pe două coloane astfel încât 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 deplasării în cadrul site-ului.

Legarea paginilor

Modul în care veți realiza legăturile dintre pagini depinde de structura site-ului. Dacă optați pentru o structură ierarhică, legăturile din interiorul site-ului vor fi adaptate acestei structuri. Avantajul structurii ierarhice este că oferă utilizatorului posibilitatea unei navigări logice, plecând de la informațiile generale către cele particulare. Dezavantajul acestei tehnici este că utilizatorul trebuie să urmeze o cale prestabilită pentru a ajunge la o anumită informație, care se poate afla câteva link-uri distanță de pagina Home.

O altă manieră de a realiza legăturile din interiorul site-ului este de a lega fiecare pagină de toate celelalte. Veți obține astfel o structură ne-ierarhică care are avantajul că fiecare pagină se află la distanță de un link de oricare alta, inclusiv de pagina Home. Pentru site-urile de dimensiuni reduse o astfel de structură poate funcționa bine, însă pentru site-urile cu un mare număr de pagini numărul de legături crește rapid iar navigarea în interiorul site-ului devine foarte dificilă. În plus, utilizatorul nu are la dispoziție o cale ierarhică prin care poate ajunge la o informație 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 legăturile dintre pagini și în plus, să ofere indicii vizuale asupra funcției 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 aceleași în toate paginile.

Stabiliți de la început aspectul icon-urilor, butoanelor sau textului pe care le veți folosi drept legături și păstrați-l pe parcursul întregului site. Această tehnică oferă site-ului coerență și unitate și stabilește imediat identitatea fiecărei pagini în cadrul site-ului. În plus, folosirea repetată a acelorași elemente grafice de navigare mărește eficiența browserului deoarece acestea sunt încărcate la deschiderea primei pagini și stocate în memoria cache, fără a mai fi necesară încărcarea lor la fiecare nouă pagină.

Instrumentele de navigare trebuie să fie cât mai ușor de înțeles și localizat. Dacă folosiți o bară de navigare plasați-o acolo unde vizitatorii sunt obișnuiți să o caute: în partea superioară a paginilor, în stânga sau în dreapta paginii. Folosiți o bară secundară de navigare la baza paginii, aceasta îl va ajuta pe vizitator să se deplaseze într-o altă secțiune a site-ului fără a mai fi nevoit să deruleze pagina în sus până la bara principală de navigare.

Dacă site-ul este de dimensiuni mari este o idee bună să creați o pagină specială care să reprezinte harta site-ului și să plasați legătura către ea în bara principală de navigare din cadrul fiecărei pagini. Aceasta va permite vizitatorului să se orienteze în interiorul site-ului, oricare ar fi pagina prin care a intrat în site. Harta va conține legături către toate paginile, grupate conform modului de organizare al site-ului.

De asemenea, dacă folosiți o structură ierarhică, este utilă prezența unui instrument suplimentar care să informeze vizitatorul asupra locului unde se află în cadrul site-ului și a căii prin care a ajuns aici, în maniera următoare:

Home > Pagina de nivel unu > Pagina de nivel doi > Pagina curentă.

Informațiile despre site și pagina curentă

Fiecare pagină a site-ului trebuie să conțină indicații privind scopul și obiectivele site-ului precum și obiectivele specifice acelei pagini. În faza de planificare ați colectat informații privind publicul țintă, ați formulat scopul și obiectivele întregului site. Acestea reprezintă elementele fundamentale în jurul cărora este construit site-ul. Fiecare pagină a sa are drept scop îndeplinirea unuia dintre obiective. Aceste informații trebuie comunicate în pagina respectivă. Vizitatorul nu trebuie forțat să ghicească ce rol are o anumită pagină în cadrul site-ului.

Multe site-uri prezente pe Web conțin o pagină specială cu informații de contact precum și o pagină care conține informații despre site și creatorii săi (pagina About). Totuși este recomandat ca aceste informații să fie incluse și în subsolul paginilor din interiorul site-ului. Este bine să includeți aici informații despre copyright, data ultimei reactualizări a paginii, despre organizația sau compania căreia îi este dedicat site-ul (dacă este cazul) și informații de contact (adresă de mail, număr de telefon, adresă poștală).

Organizarea paginii cu ajutorul tabelelor

Unul dintre aspectele pe care trebuie să le aveți în vedere la construirea unei pagini este rezoluția ecranului. Mulți dintre vizitatorii paginii folosesc rezoluția de 800×600 de pixeli. O pagină cu lățimea mai mare de 600 de pixeli poate face necesară derularea pe orizontală a paginii, care pentru mulți vizitatori este obositoare și incomodă. Din acest motiv, este recomandat ca tot conținutul paginii să fie inclus într-un tabel de bază cu lățimea de 600 de pixeli.

Tabelul de bază

Construirea paginii începe cu un tabel de bază, cu lățimea (width) de 600 de pixeli, o linie și o coloana. Aliniați tabelul la marginea din stânga sau centrat în pagină. Setați chenarul (border) la valoarea "0" pentru a-l face invizibil pentru vizitator. Întregul conținut al paginii va fi plasat în interiorul acestui tabel.

Asigurați-vă că ați setat culoarea de fond (bgcolor) pentru pagina dumneavoastră. Opțiunea "default" lasă browserul să controleze culoarea fondului. De cele mai multe ori aceasta este alb, dar este mai bine să aveți certitudinea că ea va apărea la fel în orice browser, așa încât setați bgcolor="white" sau orice altă culoare doriți.

În funcție de felul cum doriți să vă organizați site-ul și de scopul acestuia veți hotărî unde doriți să plasați bara principală de navigare.

Bara de navigare în stânga paginii

Dacă ați decis să optați pentru plasarea barei de navigare în partea stânga (cea mai uzuală așezare), veți include în tabelul de bază un tabel cu 2 sau 3 coloane.

Dacă folosiți un tabel cu 2 coloane setați distanța între celule (cellpadding) la valoarea "4" pentru a spația textul de marginea tabelului. Puteți specifica lățimea celulelor fie în pixeli fie în procente.

Dacă folosiți un tabel cu 3 coloane, coloana din centru poate fi folosită ca "tampon" , care va separa conținutul coloanei din stânga de conținutul celei din dreapta. Setați atributul border al tabelului la "0" pentru ca marginea să nu fie vizibilă. Odată stabilite aceste atribute, puteți adăuga în tabel atâtea linii câte sunt necesare sau puteți 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ă includeți în tabelul de bază un tabel cu o singura coloana. Setați atributele cellpadding = "4" și border = "0". În prima linie a tabelului veți introduce logo-ul sau titlul site-ului, în linia a doua veți afișa bara de navigare, iar pe liniile următoare, conținutul paginii.

Bara de navigare în partea dreapta

Este o abordare mai puțin utilizată. Cel mai adesea este folosită pentru paginile de tip catalog de produse, unde imaginile și descrierea produselor sunt plasate în coloana din stânga, care ocupă cea mai mare parte a spațiului.

Folosirea tabelelor pentru organizarea conținutului paginii este o practică foarte folosită. Tabelele vor păstra imaginile și textul acolo unde le-ați plasat. Puteți include și alte tabele în interiorul celor pe care le-ați creat, în funcție de modul în care sunt organizate informațiile și de aspectul pe care doriți să îl dați paginii.

5. Greșeli de design

În procesul de creare a unui site pot apărea o serie de greșeli de design, cele mai multe datorate nerespectării tehnicilor și principiilor prezentate anterior.

Pagini fără legături ("fundături")

Una dintre cele mai frustrante situații în care se poate găsi o persoană care navighează pe Web este o pagină fără instrumente de navigare și fără nici un indiciu privind site-ul căruia îi aparține. Desigur, site-ul din care face parte pagina poate fi localizat observând prima parte a adresei URL a paginii, care apare în bara de adrese a browserului. Dar a forța 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 părăsi definitiv. Evitați să creați asemenea pagini.

Prezența unor "fundături" într-un site denotă faptul că designerul nu a înțeles caracterul permeabil al Web-ului și ideea că un vizitator poate intra în site prin oricare pagină a sa. Pericolul construirii unor astfel de pagini apare mai ales în cazul site-urilor liniare multi-pagină, în care designerul dorește 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ă informațiile prezentate sunt adecvate acestui mod de prezentare. Trebuie însă acordată atenție instrumentelor de navigare care trebuie astfel concepute încât vizitatorul să poată ajunge cu ușurință cel puțin la pagina Home. În plus, informațiile despre site și pagina curentă nu trebuie să lipsească din subsolul fiecărei pagini.

O variație a acestor pagini de tip "fundătură" o constituie paginile Home care oferă informații prea puține sau lipsite de semnificație. Destul de des pot fi întâlnite pe Web pagini Home care nu oferă nici un fel de indicii asupra structurii sau conținutului site-ului, fără a mai vorbi de scopul și obiectivele sale. Instrumentele de navigație sunt absente, preferându-se folosirea unor imagini sau texte cu prea puțină semnificație pentru a realiza accesul în diferitele secțiuni ale site-ului. Poate că este o abordare avangardistă, dar pentru marea majoritate a vizitatorilor este neplăcut să ajungă într-o asemenea pagină așa încât este mai bine să respectați regulile clasice de design prezentate.

Pagini "uriașe"

Dacă paginile "fundătură" oferă prea puține indicii vizitatorului, există și reversul lor: paginile "uriașe". Aceste pagini sunt încărcate până la refuz cu informații, liste, imagini, link-uri și alte elemente. Paginile de acest fel ridică două mari probleme:

Timpul de acces. Mai ales dacă pagina conține foarte multe imagini, timpul de încărcare al paginii poate fi foarte mare

Supraîncărcarea cu informații. Dacă veți pune prea multă informație î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ă depășească 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 prezentării explicite a informațiilor. Fragmentarea subiectului trebuie să se facă în funcție de logica lui internă și nu de reguli arbitrare cum este mărimea ferestrei browserului.

Există situații în care paginile lungi îndeplinesc cel mai bine obiectivele urmărite. De exemplu, în paginile de prezentare ale unor produse, pe un site comercial, plasarea descrierii produsului pe două sau mai multe pagini rupe cursivitatea prezentării și se poate solda cu pierderea unor potențiali clienți. Analog, dacă pagina conține o listă lungă de elemente înrudite, ruperea listei este arbitrară și dezavantajoasă. Pe de altă parte, aglomerarea de informații la nivelul unei singure pagini, mai ales când între secțiunile paginii nu există o legătură intrinsecă face ca pagina să apară ca un amalgam din care vizitatorul va extrage cu greu informațiile care îl interesează.

Dacă este necesar să folosiți pagini foarte lungi nu uitați să oferiți pe parcursul paginii ancore care să conducă vizitatorul la începutul secțiunilor principale, precum și în partea superioara, respectiv inferioară a paginii. Dacă pagina conține mult text nu o încărcați suplimentar și cu imagini sau cu elemente multimedia deoarece timpul de acces va crește foarte mult.

Excesul de elemente multimedia

Folosirea fără discernământ a elementelor multimedia (imagine, sunet, video) precum și folosirea în exces a celor mai noi tehnologii Web este adesea dăunătoare pentru site. Dacă vă adresați unei audiențe despre care presupuneți că nu dispune de conexiuni rapide, de ultimele versiuni de browsere sau de aplicațiile necesare executării și afișării corecte a unora dintre elementele din paginile site-ului, este mai bine să nu includeți aceste elemente.

Astfel, deși aplicațiile create cu Macromedia Flash sunt spectaculoase și se pot realiza efecte speciale deosebit de atractive, un astfel de fișier poate ajunge cu ușurință la dimensiuni care depășesc 1 megabyte, ceea ce încetinește considerabil viteza de încărcare a paginii. În plus, pentru vizualizarea corectă a acestora, vizitatorul trebuie să descarce plug-in-ul Shockwave în cazul când nu îl are deja instalat pe computerul propriu. Este foarte neplăcut pentru vizitator să efectueze toate aceste operații doar pentru a constata că informațiile prezentate în această formă puteau fi tot atât de bine prezentate ca text sau imagini obișnuite.

O soluție de compromis este aceea ca, simultan cu includerea unui astfel de fișier, să se pună la dispoziția vizitatorului o opțiune de "eludare" de tip "skip intro" , atunci când prezentările sunt folosite doar cu rol de splash screen, ca ecran de deschidere a site-ului, de exemplu.

În plus, folosirea prezentărilor Flash fără ca acestea să servească unui scop bine definit nu face altceva decât să distragă atenția vizitatorului de la subiectul site-ului.

O altă greșeală destul de des întâlnită este includerea fișierelor audio, fără ca acestea să aibă legătură cu scopul site-ului. Există designeri care consideră că furnizarea unei muzici de fundal sporește atractivitatea site-ului. În realitate se întâmplă exact contrariul. În afara situației când subiectul site-ului este legat de muzică sau când fișierele de sunet vin să completeze informațiile prezentate în pagini, muzica de fundal nu face altceva decât să încetinească încărcarea paginilor și să-l irite pe vizitator, prin repetare. Dacă este necesar să includeți fișiere de sunet, lăsați vizitatorului posibilitatea de a opta pentru deschiderea lor prin intermediul unei legături, mai ales în cazul în care este vorba despre fișiere de mari dimensiuni.

Este recomandat să procedați la fel și în cazul fișierelor video, avertizându-l pe vizitator că pagina respectivă se va deschide mai greu.

Pagini inegale

Paginile inegale conțin informații 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 către noile pagini create în procesul de dezvoltare a site-ului. Este foarte ușor să cădeți în greșeala de a include noile legături în pagina Home fără a mai respecta ierarhia stabilită în etapa de organizare a site-ului.

Dacă site-ul la care lucrați necesită crearea unor noi pagini trebuie să aveți în vedere plasarea acestora la nivelele specifice obiectivelor pe care le au precum și încadrarea la locul cuvenit în structura de legături a site-ului prezentată în pagina Home.

Legături fără semnificație

Prezența legăturilor fără semnificație este, de asemenea, o greșeală de design foarte frecventă. Probabil ați văzut de nenumărate ori în paginile Web formulări ca aceasta:

Pentru mai multe informatii apasati <A href="info.html">aici</A>

Cuvântul "aici" nu are în acest context, nici o semnificație. O formulare mult mai potrivită ar putea fi următoarea:

Puteti obtine aici <A href="info.html">mai multe informatii</A>

O altă situație este aceea în care documentul indicat nu are legătură, din punct de vedere al conținutului, cu pagina care conține referința la el. Toate link-urile din cadrul unei pagini trebuie să extindă conținutul informațional al paginii, vizitatorul care urmează o legătură așteptându-se ca aceasta să îi ofere informații suplimentare despre subiect.

În aceeași categorie se pot încadra și legăturile "banale" , care nu îmbogățesc prin nimic informațiile prezentate. De exemplu o construcție ca aceasta:

Bine ati venit in <A href="def.html">Pagina</A> Home a Universitatii

unde documentul def.html conține definiția de dicționar a cuvântului "pagina" , este o legătură "banală" deoarece în acest context informația oferită nu servește nici unui scop. Pe de altă parte, într-o pagină al cărei subiect este vocabularul specific Web-ului, o astfel de definiție ar fi foarte importantă.

Un alt tip de legături fără semnificație apare atunci când fragmentarea informației este dusă la extrem prin folosirea unui număr foarte mare de link-uri. Subiectul este secționat în părți foarte mici iar vizitatorul este obligat să parcurgă un mare număr de pagini în adâncime pentru a pune cap la cap informațiile și a înțelege sensul lor. O abordare de acest tip rupe cursivitatea subiectului și mărește efortul de a înțelege și asimila al vizitatorului.

Pagini dezorganizate și stridente

Acest tip de pagini suferă din pricina lipsei de organizare a conținutului. Chiar dacă subiectul este împărțit în secțiuni, unitățile de informație sunt împrăștiate în pagină fără o sistematizare prealabilă care să focalizeze atenția vizitatorului către punctele importante. Aceste pagini au prea multe culori, adesea stridente, tipuri diferite de fonturi, sau imagini de fundal foarte încărcate. Adesea este folosită în exces animația fără nici ca aceasta să aibă vreo semnificație sau legătură cu conținutul paginii și muzica de fundal. Aspectul general al unor astfel de pagini este la fel de strident și țipător ca un decor de bâlci.

6. Rezumat

Construirea unui site necesită, pe lângă o bună cunoaștere a limbajului HTML, respectarea unor principii și folosirea unor tehnici consacrate. Site-ul trebuie să fie orientat către vizitator, către înțelegerea și satisfacerea nevoii de informație a acestuia. Designul trebuie să mențină un echilibru între tehnologiile folosite și eficiență, asigurând o viteză convenabilă de încărcare 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, evitând excesele de orice fel.

Principiile care trebuie respectate în etapa de design sunt:

Asocierea semnificațiilor

Menținerea competitivității

Folosirea eficientă a resurselor

Concentrarea pe necesitățile utilizatorului

Înțelegerea permeabilității Web-ului

Crearea unui aspect plăcut, coerent și fluent

Susținerea interactivității

Susținerea navigației

Strategia de construire a site-ului poate urma una dintre metodele “top-down” , “bottom-up” sau metoda incrementării.

În procesul de design, prima etapă o constituie schița site-ului care trebuie să reflecte structura acestuia: liniară, ierarhică sau de tip Web.

Informația trebuie fragmentată astfel încât să nu depășească puterea de asimilare a utilizatorului.

Legăturile dintre pagini trebuie să fie stabilite astfel încât să permită o parcurgere logică a conținutului site-ului, iar instrumentele de navigare trebuie adaptate modului în care sunt create legăturile dintre pagini, oferind indicii vizuale asupra funcției lor. Este recomandat ca instrumentele de navigare să aibă același aspect în toate paginile.

Nerespectarea principiilor și tehnicilor de design poate să conducă la construirea unor pagini de tip “fundătura” , a unor pagini prea încărcate cu informații sau, dimpotrivă, a unor pagini inegale. De asemenea, printre greșelile de design care pot apărea sunt legăturile fără semnificație, excesul de elemente multimedia, paginile dezorganizate sau stridente.

Capitolul 19

Testarea site-ului

Etapa de design a site-ului se desfășoară în strânsă legătură cu cea de implementare, de scriere a codului HTML pentru paginile care fac parte din site. Totuși, procesul de creare a site-ului nu se poate considera încheiat în momentul finalizării tuturor documentelor HTML care îl formează. Urmează o etapă adesea tratată oarecum superficial, deși, ca și celelalte, este esențială 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 puteți întâlni pagini Web cu multiple greșeli de ortografie, gramatică, formatare, chiar și în cazul site-urilor importante. Paginile cu greșeli de ortografie, exprimări neglijente, reflectă cel puțin o insuficientă experiență în acest domeniu și, de ce nu, chiar lipsă de respect pentru vizitator.

Corectarea este neglijată în primul rând datorită ușurinței extraordinare cu care textele pot fi publicate electronic. Puteți crea o pagină într-un editor de text și aceasta poate fi publicată la doar câteva minute după terminarea ei, daca sunteți suficient de rapid. Cei mai mulți nu vor petrece ore în șir verificând existența eventualelor greșeli gramaticale în textul editat, așa cum ar face-o, probabil, în cazul unei tipărituri clasice, dacă aceste erori i-ar costa o avere pentru a retipări 10.000 de copii ale documentului. Dacă ați făcut o greșeală, trebuie doar să deschideți fișierul, să efectuați corectura și să îl republicați pe Web, unde toată lumea îl poate vedea. Este aceasta o strategie corectă? Desigur că nu.

Calitatea muncii pe care ați depus-o la crearea site-ului definește calitatea acestuia. Mii, poate milioane de utilizatori ar fi putut deja citi pagina în cauză. Este mult mai simplu să petreceți câteva ore corectând textul, pentru a evita ca ulterior să vă luptați zile, săptămâni sau luni în șir pentru a vă recâștiga credibilitatea.

Iată câteva metode care vă pot ajuta să corectați mai eficient paginile Web:

Utilizați corectoare automate pentru ortografie și gramatică pentru a descoperi erorile plictisitoare, făcute din grabă sau din oboseală.

Nu aveți niciodată încredere absolută în acest tip de corectoare pentru a descoperi erorile mai subtile. După utilizarea lor, încărcați pagina în browser și citiți-o de câteva ori.

Pentru site-urile de dimensiuni mari citiți documentele în mod repetat, căutând de fiecare dată un anumit tip particular de erori

La prima lectură concentrați-vă atenția 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ă verificați logica și cursivitatea ideilor și a cuvintelor.

La a treia lectură, corectați minuțios întregul text verificând sintaxa, ortografia, punctuația.

Întotdeauna verificați imaginile, figurile și hărțile din pagină. Asigurați-vă că ele au legătură cu textul de referință, și verificați textul explicativ care însoțește imaginea.

Există și erori ce vor persista uneori chiar după toate aceste verificări. Dacă le descoperiți după publicarea site-ului, nu mai rămâne decât să le corectați 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ă concentrați 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 încărca pagina în browser și de a da click pe fiecare link.

Verificați funcționarea tuturor ancorelor din pagini care trebuie să acceseze secțiunea din pagină corespunzătoare identificatorului ancorei. Atenție la secțiunile multiple ale aceleiași pagini etichetate cu același identificator. Această greșeală poate produce rezultate stranii. Daca browserul sare la o altă secțiune a paginii decât cea așteptată, verificați mai întâi identificatorul ancorei în secțiunea pe care browserul o afișează.

Verificați apoi modul de funcționare a legăturilor către alte documente, atât în cadrul site-ului cât și în afara sa, respectiv validitatea lor și dacă paginile accesate sunt cele potrivite. Dacă o anumită pagină nu poate fi deschisă, verificați sintaxa link-urilor și anume:

corectitudinea protocolului specificat

extensia fișierului

existența simbolului ~

Atenție!

În UNIX, simbolul tilda (~) este utilizat pentru a specifica directorul de start (Home directory) al utilizatorului al cărui nume urmează după acest simbol.

Folosind simbolul ~ vă puteți referi la o pagină Web astfel: http://www.server.com/~utilizator/pagina.html

Probleme în funcționarea paginilor Web

Este posibil ca paginile Web create să nu arate în browser așa cum au fost ele proiectate. Rezolvarea unor astfel de deficiențe poate fi dificilă, deoarece când scrieți codul HTML aveți doar o imagine mentală a modului cum ar trebui să arate pagina. O soluție pentru a face procesul de depanare mai ușor ar fi să vizualizați pagina cu ajutorul browserului pe măsură ce o construiți. Puteți izola diversele secțiuni ale paginii pentru a verifica funcționarea fiecăreia dintre ele.

Cele mai multe greșeli care pot apărea 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:

absența etichetelor de închidere < / >

împerecherea etichetelor HTML

ghilimelele " "

imbricarea etichetelor

Iată câteva dintre problemele cu care vă puteți confrunta:

O caracteristică de formatare afectează o secvență mai mare de text decât era prevăzut.

Să presupunem că ați folosit într-o secțiune a paginii una dintre etichetele de titlu, <H3> de exemplu. La vizualizarea paginii în browser constatați că nu doar textul pe care doreați să-l evidențiați este formatat astfel, ci o parte mai mare a textului din pagină.

O astfel de situație este provocată de:

Absența unuia dintre caracterele " < " sau " > "

Absența etichetei de închidere </H3>

Imbricarea defectuoasă a etichetelor HTML

O etichetă de închidere căreia îi lipsește unul dintre caracterele "< "sau ">" nu va fi interpretată corect de browser, prin urmare formatul nu va lua sfârșit decât în punctul în care browserul întâlnește caracterul respectiv. Aceasta poate determina afișarea într-un format greșit a unui text.

Dacă acest element este un titlu, tot textul dintre eticheta de deschidere asociată titlului și cea mai apropiată etichetă de închidere întâlnită va fi afișat ca titlu. Daca acest element este text ancoră, tot textul dintre eticheta de deschidere <A> și prima etichetă de închidere întâlnită va fi afișat ca o legătură (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 urmărit și rezolvat. Urmărirea unei probleme se face în sens descendent, defecțiunea trebuie căutată acolo unde începe secvența de cod eronată și nu unde se sfârșește.

O parte din textul paginii nu este afișat

Textul sau obiectele care lipsesc din pagina pot fi depistate prin urmărirea ghilimelelor " " și a etichetelor greșit închise și care conțin adrese URL.

Dacă pagina conține ghilimele de deschidere în interiorul unei etichete, și cele de închidere trebuie să se regăsească în aceeași etichetă. O etichetă din care lipsesc ghilimelele de închidere nu este interpretată corect și acest lucru poate produce rezultate bizare. Dacă eticheta căreia îi lipsesc ghilimelele este o etichetă ancoră, întreg textul de la primele ghilimele până la următoarele întâlnite ar putea fi interpretat de browser ca parte dintr-o adresă URL.

O altă eroare care poate provoca același efect este închiderea greșită a etichetei conținând o adresă URL. Dacă o astfel de etichetă nu este închisă corespunzător, browserul ar putea interpreta orice text care urmează, până la eticheta de închidere corespunzătoare, ca fiind parte a adresei URL.

Problema se rezolvă prin examinarea etichetelor aflate înaintea porțiunii de text care nu este afișată. Eroarea ar putea proveni de la orice etichetă care conține ghilimele sau o adresă URL. Ghilimelele utilizate în editorul de text cu ajutorul căruia scrieți codul HTML trebuie să fie întotdeauna în standard ASCII. Unele editoare de text utilizează așa-numitele "smart quotes" , în care ghilimele de deschidere arată diferit față de cele de închidere. Dacă procesorul de text cu care lucrați are această posibilitate, ea trebuie dezactivată, deoarece acest tip de ghilimele, nefiind în standardul ASCII, nu vor funcționa corect în HTML.

Afișarea defectuoasă a formatului

În cazul când formatul afișat de browser nu este cel așteptat verificați mai întâi compatibilitatea dintre browser și stilul de caractere specificat în codul HTML. Browserul trebuie să fie capabil să afișeze stilul ales. Atunci când sunt folosite stiluri logice, browserul este ultima instanță în decizia privind stilul caracterelor afișate.

O metodă rapidă de verificare a existenței unei probleme de compatibilitate este de a afișa paginile utilizând browsere diferite, dintre care unul să poată afișa în mod sigur stilul de caracter utilizat. Dacă acel browser afișează textul incorect, se face verificarea codului HTML. Dacă textul este afișat corect, atunci există o incompatibilitate cu celelalte browsere.

În codul HTML, problema poate fi legată de o imbricare defectuoasă a etichetelor. Verificați modul cum au fost imbricate etichetele de formatare din secțiunea de pagină asociată cu eroarea respectivă. Astfel o construcție de tipul următor:

<EM>Va multumim ca ati vizitat <STRONG>Pagina</EM>noastra</STRONG>

nu va funcționa corect, deoarece etichetele <EM> și <STRONG> sunt imbricate eronat.

3. Rezumat

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 legăturilor din cadrul site-ului

Testarea legăturilor externe

Depanarea greșelilor care țin de sintaxa codului HTML

Etapa de testare este deosebit de importantă pentru impresia generală lăsată de site-ul dumneavoastră. Un site cu ortografie neglijentă, cu greșeli de exprimare, cu legături nefuncționale poate îndepărta vizitatorii, oricât de valoroase ar fi informațiile prezentate în interiorul său.

Capitolul 20

Publicarea site-ului

În sfârșit, site-ul dumneavoastră este finalizat. Ați parcurs toate etapele, de la planificare, la design și implementare, v-ați asigurat că toate elementele funcționează corect. A venit momentul publicării pe Web a site-ului, astfel încât rezultatele muncii dumneavoastră să fie cunoscute de toți aceea care vă vor vizita paginile. În etapa publicării pe Web a site-ului intervin mai mulți pași:

Stabilirea unui nume de domeniu

Stabilirea serverului Web pe care va fi stocat (găzduit) site-ul

Organizarea și denumirea fișierelor în conformitate cu cerințele serverului gazdă

Transferul fișierelor

1. Numele de domeniu

Pentru ca site-ul dumneavoastră să aibă o identitate pe Web aveți nevoie de un nume de domeniu pentru el. Numele de domeniu al site-ului va face parte din adresa URL a fiecărei pagini și va oferi site-ului o prezență distinctă pe Web.

Domeniile principale de pe Web pot fi de mai multe tipuri:

comerciale .com

educaționale .edu

guvernamentale .gov

furnizorii de servicii de rețea .net

instituții non-profit .org

domeniile corespunzătoare țărilor lumii .ro, etc

Pentru a obține un nume de domeniu pentru site aveți la dispoziție două posibilități:

domeniu plătit

domeniu gratuit

Domeniu plătit

Dacă site-ul pe care l-ați creat aparține firmei dumneavoastră sau unei firme client sau dacă doriți să aveți o prezență stabilă și credibilă pe Web cea mai bună opțiune este să aveți un domeniu plătit. Înregistrarea unui domeniu nu este foarte costisitoare și va asigura site-ului dumneavoastră o identitate serioasă și credibilă. În plus, odată ce sunteți proprietarul unui domeniu puteți să schimbați locația site-ului (serverul Web pe care este găzduit) fără ca aceasta să necesite schimbarea domeniului.

Prețul pentru înregistrarea unui nume de domeniu variază destul de mult. Una dintre cele mai convenabile oferte poate fi găsită 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ă doriți un domeniu românesc (.ro) puteți obține informații 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 cărți) fără alte taxe anuale.

În cazul când optați pentru un domeniu plătit, adresa URL a site-ului va fi de forma

http://www.dumneavoastra.com

Domeniu gratuit

Obținerea unui nume de domeniu gratuit este foarte simplă. Există multe companii on-line care oferă astfel de domenii și, în plus, și spațiu de găzduire pentru site. Dacă sunteți începător și doriți să vă testați cunoștințele de Web design nou învățate, nu este o idee rea să construiți un site "de probă" folosind pentru acesta un domeniu și un serviciu de hosting gratuite. În afara acestei situații, deși poate părea alegerea ideală, un domeniu gratuit poate aduce multe dezavantaje site-ului dumneavoastră.

Prima judecată de valoare asupra unui site este făcută pe baza numelui său 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 dețineți propriul domeniu și folosiți 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 afișarea unor bannere publicitare care distrag atenția vizitatorilor de la conținutul site-ului și măresc timpul de încărcare al paginilor.

2. Serviciul de găzduire Web (Web hosting)

Înainte de a publica site-ul pe Web este necesară o evaluare a necesităților de acces, pentru a determina ce fel de cont se potrivește site-ului dumneavoastră. Plecând de la presupunerea că dețineți deja o conexiune la Internet, nu vom intra în amănunte privind alegerea unui furnizor de servicii Internet (ISP – Internet Service Provider). Totuși, în cazul când încă nu dețineți o conexiune sau doriți să schimbați provider-ul actual, vă recomandăm să studiați cu atenție ofertele principalilor furnizori de servicii. Având în vedere că nu vă veți mai limita doar la simpla navigare pe Web sau la schimbul de emailuri ci veți dori să transferați și să întrețineți un site Web necesitățile dumneavoastră vor crește. Din acest motiv este bine să vă informați asupra unor detalii tehnice cum ar fi lățimea de bandă, mediul de transmisie (antenă satelit, cablu cu fibre optice, unde radio), ce tip de server folosește, asistența tehnică oferită, dacă oferă găzduire pentru pagini Web.

Opțiunile pentru găzduire sunt următoarele:

Instalarea unui server Web propriu

Utilizarea serverului Web al providerului de servicii Internet

Utilizarea unui server Web aparținând unei firme care oferă servicii de hosting

Instalarea unui server Web propriu

Instalarea unui server Web propriu este cea mai costisitoare soluție, dar ea oferă în schimb avantaje semnificative. Dispunând de o conexiune dedicată se pot furniza servicii Web 24 de ore/zi utilizatorilor din lumea întreagă. Veți dispune de un control complet asupra serverului Web și puteți publica orice doriți. Puteți configura serverul și pentru alte servicii, cum ar fi FTP, Gopher, Telnet, scripturi CGI, etc. Puteți de asemenea avea propriul domeniu care va stabili o prezență distinctă pe Web. Adresa URL va avea forma următoare:

http://www.firma_dumneavoastra.com/

Întrucât costurile necesare echipamentului hardware, conexiunii la Internet, configurării și întreținerii unui server propriu depășesc posibilitățile unui utilizator obișnuit, nu vom insista asupra acestei soluții.

Utilizarea serverului Web al providerului ISP

Utilizarea serverului Web al providerului dumneavoastră de Internet este o opțiune economică. Mulți dintre furnizorii de servicii Internet oferă în cadrul contului de acces și un anumit spațiu pe serverele proprii pe care vă puteți plasa site-ul, fără a percepe taxe suplimentare. Din păcate, spațiul oferit este de obicei mic, de ordinul 1-3 Mb și nu sunt oferite facilități pentru crearea de pagini dinamice. Pentru a obține facilități suplimentare va trebui să plătiți în plus.

Cu toate că fișierele standard, contul de email și fișierele publicate pe Web utilizează acest spațiu, 2-3 Mb sunt de regulă suficienți pentru a menține un site modest ca dimensiuni. Contul la ISP este accesibil pe baza unei conexiuni dial-up care permite o legătură cu o viteză de până la 56 Kbps.

Înainte de a deschide un astfel de cont, trebuie verificate detaliile privind spațiul de stocare, taxele pentru spațiul adițional, î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 opțiune economică dar, în același timp, limitată. Nu există control al serverului Web, serviciile adiționale rămânând la latitudinea providerului. Nu veți avea propriul domeniu, iar adresa URL va arăta astfel:

http://www.provider.com/~dumneavoastra

Utilizarea unui serviciu de hosting

Cea mai bună soluție din punctul de vedere al raportului servicii/preț o reprezintă folosirea unui serviciu de hosting plătit. Ofertele de pe piața românească sunt numeroase și variate ca preț. Înainte de a face o alegere este bine să faceți un studiu comparativ al acestora în privința spațiului pus la dispoziție, al modului de transfer al fișierelor, al traficului impus precum și al prezenței diverselor facilități: scripturi CGI, baze de date, email personalizat, etc. Nu trebuie să pierdeți din vedere că site-ul dumneavoastră se poate dezvolta astfel încât spațiul de stocare rezervat la început poate deveni insuficient.

Utilizând un serviciu de hosting adresa URL a site-ului va avea forma următoare:

http://www.dumneavoastra.com

De asemenea veți beneficia și de una sau mai multe adrese de email personalizate de tipul:

[anonimizat]

Folosirea serviciilor unei firme de hosting vă permite ca, odată ce dețineți propriul nume de domeniu, să vă transferați site-ul pe serverul Web al firmei și să beneficiați de o prezență stabilă pe Web. Firmele de hosting oferă uneori și nume de domenii pentru clienții lor însă există riscul ca dacă vă hotărâți să renunțați la serviciile acelei firme să pierdeți domeniul. Din acest motiv este mai bine să tratați separat cele două probleme.

3. Organizarea și denumirea fișierelor

Deși această etapă este intrinsecă procesului de construire a site-ului, o vom discuta în acest capitol, deoarece acum este momentul când o bună organizare a directoarelor, subdirectoarelor și fișierelor devine deosebit de importantă.

Organizarea directoarelor și fișierelor

Este foarte bine să organizați fișierele care fac parte din site pe computerul dumneavoastră exact așa cum ele vor fi organizate pe serverul Web. Serverul Web are un director "rădăcină" (root) unde vor fi stocate toate fișierele site-ului. Folderul unde veți stoca aceste fișiere pe computerul personal va juca rolul directorului "rădăcină" al serverului. În directorul "rădăcină" va fi plasat fișierul care va conține pagina "home" a site-ului, fișier denumit de obicei index.html sau index.htm.

Dacă site-ul este de mici dimensiuni (între 5 și 10 pagini) puteți plasa toate fișierele în același director. Dacă site-ul este mai mare, este recomandat să creați pentru fiecare secțiune principală a sa câte un subdirector care va conține fișierele asociate acelei secțiuni. Subdirectoarele pot conține la rândul lor câte un fișier index. Atunci când veți transfera fișierele de pe computerul dumneavoastră pe serverul Web veți putea să transferați întregul subdirector cu fișierele conținute în el. De asemenea această metodă va face și întreținerea site-ului mult mai ușoară.

O altă problemă este locul unde veți stoca imaginile. Practica standard este de a crea un subdirector special în directorul "rădăcină" unde să plasați toate imaginile din site. Dacă procedați astfel este extrem de important să creați un subdirector similar cu aceeași amplasare și pe computerul dumneavoastră. Calea de la pagina care apelează o imagine la imaginea respectivă trebuie să fie aceeași și pe computerul dumneavoastră și pe server, altminteri imaginile nu se vor afișa 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 fiecărei pagini. Cu aceleași precauții legate de calea corectă către imagini, această metodă funcționează bine, ba chiar îmbunătățește viteza de încărcare a imaginilor în pagini. Dezavantajul constă în faptul că adesea este necesar să rețineți mai multe copii ale aceleiași imagini în diferite subdirectoare, în funcție de paginile unde este folosită.

Verificarea numelor fișierelor

La mutarea fișierelor de pe computerul dumneavoastră pe serverul Web se impune verificarea numelor fișierelor care trebuie să fie compatibile cu sistemul pe sunt mutate.

O atenție deosebită trebuie acordată denumirii și extensiei fișierelor. Nu are importanță dacă optați pentru extensia .html sau .htm. Tot ce trebuie este să fiți consecvent cu extensia aleasă de-a lungul întregului site. De asemenea, trebuie să aveți în vedere că în sistemele UNIX, cele mai des folosite ca servere Web, denumirile fișierelor sunt case-sensitive. O pagină denumită mypage.html nu este totuna cu pagina MyPage.html. Pentru a evita confuziile folosiți pentru denumirea fișierelor numai litere mici.

4. Transferul fișierelor

Transferul fișierelor care compun site-ul de pe computerul propriu pe serverul Web este o operațiune relativ simplă, care constă în copierea fișierelor pe server în locația destinată site-ului dumneavoastră. Unele dintre firmele de hosting asigură o aplicație specială destinată transferului fișierelor, dar cea mai utilizată metodă de transfer este prin intermediul unui client FTP.

Un client FTP (File Transfer Protocol) este o aplicație prin intermediul căreia se poate realiza transferul fișierelor de pe un sistem pe altul. Puteți copia fișiere de pe computerul personal pe un alt computer (operație denumită Upload) după cum puteți prelua fișiere de pe un alt computer, pe computerul personal (operație denumită Download). Cele mai folosite programe FTP sunt CuteFTP (http://www.cuteftp.com) și WS_FTP (http://ipswitch.com). Odată ce ați instalat pe computerul dumneavoastră un client FTP, v-ați înregistrat numele de domeniu și aveți un cont la un serviciu de găzduire totul este pregătit pentru transferul fișierelor care compun site-ul pe serverul gazdă.

Pentru a realiza transferul fișierelor, în general va trebui să urmați următorii pași:

Conectarea la Internet

Deschiderea programului FTP. Veți observa o serie de casete de dialog în care trebuie introduse informațiile necesare programului pentru a realiza conexiunea cu computerul gazdă.

Pentru a face conexiunea cu serverul trebuie să furnizați 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-ați stabilit la deschiderea contului. Nu uitați să de-bifați opțiunea Anonymous din meniul Login. Prin introducerea numelui de utilizator și a parolei veți căpăta acces la contul dumneavoastră și veți putea intra în directorul unde vor fi plasate fișierele site-ului.

O altă informație care trebuie furnizată programului este tipul fișierelor transferate. În general pentru fișierele HTML se folosește opțiunea ASCII iar pentru celelalte fișiere, opțiunea binary. Mai simplu, puteți alege opțiunea AutoDetect prin care programul determină singur tipul fișierului și modul cum va face transmiterea lui.

Celelalte casete de dialog pot fi lăsate necompletate sau cu setările preexistente.

După furnizarea acestor informații programul FTP va realiza conexiunea cu serverul gazdă.

Selectarea fișierelor pe care doriți să le copiați. Veți observa că fereastra aplicației FTP este împărțită în două: într-o parte aveți directoarele de pe computerul personal, în cealaltă parte directoarele de pe computerul gazdă. Selectați directorul care conține fișierele dumneavoastră și dați comanda de transfer în directorul care vă este destinat pe serverul gazdă.

Dacă folosiți scripturi CGI asociate site-ului trebuie să le acordați o atenție 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ă luați legătura cu administratorul serverului gazdă care vă va oferi indicațiile necesare.

Pe unele sisteme de operare modul de accesare al fișierelor este strict definit, permițând sau restricționând citirea, scrierea sau executarea fișierelor de către diferiți utilizatori. Aceste facilități sunt setate de regulă prin drepturile de acces atribuite fișierelor. Din acest motiv, verificarea modului de setare a fișierelor este extrem de importantă. De exemplu, în sistemele UNIX modul 705 semnifică faptul că fișierele pot fi citite, modificate sau executate de proprietarul lor, în vreme ce alți utilizatori nu le pot decât citi sau executa (după caz).

După transferul fișierelor, pot apărea probleme de diverse tipuri. Uneori, paginile publicate nu pot fi accesate deloc, scripturile nu funcționează, etc. Primul lucru care trebuie verificat în acest caz este dacă fișierele se află în directoarele potrivite. Apoi trebuie verificate permisiunile de acces pentru directoare și fișiere, extensiile fișierelor, fișierele index. În cazul când apar probleme, cea mai sigură cale de rezolvare a lor este să luați legătura cu administratorul serverului gazdă și să îi cereți informații cât mai complete privind drepturile de acces pentru directoare, calea corectă către scripturile folosite și, în general, setările necesare pentru buna funcționare a site-ului.

5. Rezumat

În etapa de publicare pe Web a site-ului trebuie parcurși următorii pași:

Stabilirea unui nume de domeniu pentru site: gratuit sau plătit.

Găsirea unui serviciu de găzduire convenabil sub raportul servicii/preț.

Organizarea și denumirea directoarelor și fișierelor în conformitate cu cerințele sistemului serverului gazdă.

Transferul fișierelor, cea mai folosită metodă de transfer fiind prin FTP.

Câteva cuvinte…la final

Am ajuns, iată, la finalul călătoriei noastre. Aveți, acum, toate informațiile și instrumentele necesare construirii unui site atrăgător, funcțional și eficient. Puteți începe prin a vă construi o pagină personală pe care o puteți plasa pe un server gratuit, pentru a exersa cunoștințele dobândite. Dar acesta este doar primul pas.

Designul Web este unul dintre domeniile cu un mare potențial de dezvoltare. Tot mai multe firme doresc site-uri pe Web, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a-și prezenta oferta de produse și servicii. O carieră în acest domeniu este o alegere cu mari șanse de succes pentru orice tânăr. Mai mult, deși pe Web-ul românesc această zonă este încă slab dezvoltată, puteți să vă inițiați propria afacere care să se deruleze exclusiv pe Internet.

Această carte a urmărit să vă ofere informațiile necesare unui start corect în domeniul designului Web. Dar nu trebuie să vă opriți aici. Designul și programarea Web reprezintă domenii vaste iar cartea noastră a atins doar elementele de bază ale acestora. Puteți continua învățând să programați în Perl pentru a crea scripturi CGI, puteți învăța JavaScript, Java sau un limbaj de interogare pentru bazele de date stocate pe server. Puteți deveni familiar cu unul din editoarele puternice de HTML (Macromedia Dreamwaver este cel mai utilizat în acest moment) sau puteți învăța să stăpâniți foarte bine un program de grafică (CorelDraw sau Adobe Photoshop de exemplu) pentru a crea grafică Web. Posibilitățile sunt nenumărate.

În lumea World Wide Web totul este într-o continuă mișcare și dezvoltare. Această carte v-a oferit fundamentele programării în HTML. Continuați să învățați, perfecționați-vă continuu și succesul viitor vă este asigurat.

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Limbaj Specific Internetului (ID: 154306)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Limbaj Specific Internetului

Copyright Notice

Ion de Liviu Rebreanu

Termenul de Valabilitate al Operei Lui I. L. Caragiale

Dimensiuni ale Temporalitatii In Opera Lui Mihai Eminescu

Lumea de Dincolo In Poezia Funebra

Sinonimie, Echivalenta Si Coreferenta Sintactica

. Liedul In Creatia Compozitorului Gheorghe Dima

Copyright Notice

Similar Posts