INTERNETUL MIJLOC DE INFORMARE ŞI

COMUNICARE

Lector univ. dr. Mihai Gavotă

1
INTERNETUL MIJLOC DE INFORMARE ŞI
COMUNICARE

Bucureşti - 2004

2
1. SCURT ISTORIC ..................................................................................................................... 7

2. NOŢIUNI FUNDAMENTALE, CONCEPTE ŞI TERMENI............................................... 9

REŢELE DE CALCULATOARE ......................................................................................................... 9
Criterii de clasificare a reţelelor ............................................................................................ 9
Topologii şi protocoale ........................................................................................................... 9
Componentele hardware ale unei reţele ............................................................................... 10
Protocoalele unei reţele ........................................................................................................ 10
INTERNET ŞI WORLD WIDE WEB (WWW)................................................................................. 11
HTTP, HIPERLEGĂTURI, FTP, ISP, URL ................................................................................... 11
FORMAREA ŞI STRUCTURA ADRESELOR WEB ............................................................................. 12
ADRESELE IP, CLASELE DE ADRESE IP ŞI REZOLUŢIA ADRESELOR ............................................. 14
COMENZI UTILE DIN LINIA DE COMANDĂ .................................................................................... 14
3. BROWSER-UL, NAVIGAREA WEB ŞI MOTOARELE DE CĂUTARE....................... 17
BROWSER-UL ............................................................................................................................. 17
NAVIGAREA WEB....................................................................................................................... 20
MOTOARELE DE CĂUTARE .......................................................................................................... 23
4. SECURITATEA ÎN INTERNET .......................................................................................... 25
CERTIFICATELE DIGITALE .......................................................................................................... 25
Autentificarea........................................................................................................................ 25
Confidenţialitatea comunicării ............................................................................................. 25
Criptarea simetrică, cu cheie publică şi cheie privată ......................................................... 26
VIRUŞI INFORMATICI ŞI FIREWALL.............................................................................................. 26
Viruşi informatici .................................................................................................................. 26
Firewall................................................................................................................................. 27
COOKIES ŞI CACHE ...................................................................................................................... 27
5. POŞTA ELECTRONICĂ ...................................................................................................... 29
SECURITATEA E-MAIL ................................................................................................................ 29
FORMAREA ŞI STRUCTURA ADRESELOR DE E-MAIL ..................................................................... 30
UTILIZAREA APLICAŢIEI E-MAIL OUTLOOK EXPRESS ................................................................. 31
LUCRUL CU MESAJE E-MAIL ....................................................................................................... 35
6. ÎNDRUMAR METODOLOGIC PRIVIND REALIZAREA PROIECTULUI ................ 40

7. LIMBAJUL HTML ................................................................................................................ 41

STRUCTURA STANDARD A UNUI FIŞIER HTML ........................................................................... 41
Sfârşitul de linie .................................................................................................................... 42
Blocuri preformatate............................................................................................................. 43
CULORI, FONTURI ŞI MARGINI .................................................................................................... 44
Culoarea de fond................................................................................................................... 44
Culoarea textului................................................................................................................... 45
Atribute multiple ................................................................................................................... 45
Setarea fontului de bază........................................................................................................ 46
Setarea marginilor paginii Web............................................................................................ 47
STILURI PENTRU BLOCURILE DE TEXT ........................................................................................ 47
Caractere îngroşate .............................................................................................................. 47

3
 Caractere mărite ................................................................................................................... 47
Caractere micşorate.............................................................................................................. 48
Caractere înclinate spre dreapta .......................................................................................... 48
Caractere "sub-" şi "super-script" ........................................................................................ 48
Caractere subliniate şi caractere "tăiate de o linie"............................................................. 49
Stiluri fizice şi stiluri logice .................................................................................................. 49
Blocuri evidenţiate ................................................................................................................ 49
Blocuri de caractere monospaţiate ....................................................................................... 50
Blocuri de caractere clipitoare ............................................................................................. 50
Imbricarea tag-urilor ............................................................................................................ 50
SETAREA FONTURILOR ............................................................................................................... 51
Culori .................................................................................................................................... 51
Culoarea unui font ................................................................................................................ 51
Familia fontului..................................................................................................................... 52
Mărimea fontului................................................................................................................... 52
BLOCURI DE TEXT....................................................................................................................... 53
Inserarea unei adrese............................................................................................................ 53
Indentarea unui bloc ............................................................................................................. 54
Blocul "div" ........................................................................................................................... 54
Blocuri "plaintext"................................................................................................................. 55
Blocul paragraf ..................................................................................................................... 55
Blocuri "header" ................................................................................................................... 56
Linii orizontale ...................................................................................................................... 57
Blocul "center" ...................................................................................................................... 58
LISTE .......................................................................................................................................... 58
Liste neordonate.................................................................................................................... 58
Liste ordonate........................................................................................................................ 59
Liste de definiţii..................................................................................................................... 61
TABELE ...................................................................................................................................... 62
Un tabel simplu ..................................................................................................................... 62
Un tabel cu chenar ................................................................................................................ 63
Alinierea tabelului în pagina Web ........................................................................................ 63
Definirea culorilor de fond într-un tabel .............................................................................. 64
Dimensionarea celulelor unui tabel...................................................................................... 64
Dimensionarea unui tabel ..................................................................................................... 65
Zona din jurul unui tabel....................................................................................................... 66
Titlul unui tabel ..................................................................................................................... 67
Cap de tabel .......................................................................................................................... 67
Alinierea conţinutului unei celule ......................................................................................... 68
Dimensionarea exactă a celulelor unui tabel ....................................................................... 69
Tabele de forme oarecare ..................................................................................................... 70
Celulele vide ale unui tabel................................................................................................... 70
Atribute "Internet Explorer" pentru tabele ........................................................................... 71
IMAGINI ...................................................................................................................................... 71
Tipuri de fişiere pentru imagini ............................................................................................ 71
URL-ul unei imagini.............................................................................................................. 71
Prima pagină Web care conţine o imagine........................................................................... 72
Adresarea relativă................................................................................................................. 72
Chenarul unei imagini........................................................................................................... 73

4
 Dimensionarea unei imagini................................................................................................. 74
Alinierea unei imagini în pagina Web .................................................................................. 74
Alinierea textului în jurul unei imagini................................................................................. 75
Elemente înlocuitoare pentru imagini................................................................................... 75
Imagini pentru fondul unei pagini Web ................................................................................ 76
Un tabel de imagini............................................................................................................... 77
Un tabel de tabele de imagini şi texte ................................................................................... 77
Imagini folosite ca link-uri.................................................................................................... 78
Imagini în fişiere externe ...................................................................................................... 78
Facilităţi ale formatului GIF ................................................................................................ 79
Utilizări speciale ale imaginilor ........................................................................................... 79
LINK-URI................................................................................................................................. 79
Interactivitatea unei pagini Web........................................................................................... 79
Link către o pagină aflată în acelaşi director....................................................................... 80
Link către o pagină aflată pe acelaşi disc local ................................................................... 80
Link către un site particular.................................................................................................. 81
Utilizarea unei imagini ca "zonă activă".............................................................................. 81
Ancore ................................................................................................................................... 81
Instanţe multiple pentru un browser ..................................................................................... 83
Alegerea culorilor pentru link-uri......................................................................................... 84
Link către un server FTP ...................................................................................................... 84
Utilizarea poştei electronice ................................................................................................. 84
Link-uri către fişiere oarecare.............................................................................................. 85
Ancore definite prin atributul "id" ........................................................................................ 85
DOCUMENTAREA UNEI PAGINI WEB ........................................................................................... 86
Un element pentru meta-informaţii....................................................................................... 87
Descrierea unei pagini Web.................................................................................................. 87
Cuvintele cheie pentru o pagină Web ................................................................................... 87
Drepturile de autor ............................................................................................................... 88
Crearea şi expirarea paginii Web......................................................................................... 88
Persoana de contact.............................................................................................................. 88
Tipul fişierului....................................................................................................................... 89
Limba utilizată ...................................................................................................................... 89
Reactualizarea paginii curente din browser......................................................................... 89
Comentariile ......................................................................................................................... 90
SUNETE ŞI VIDEOCLIP-URI .......................................................................................................... 91
Formate pentru fişierele de sunet ......................................................................................... 91
Link-uri către fişiere de sunet ............................................................................................... 91
Formate pentru fişierele de videoclipuri .............................................................................. 91
Link-uri către fişiere de video-clipuri................................................................................... 92
Sunetul de fond pentru o pagină Web ................................................................................... 92
Video-clipuri inline ............................................................................................................... 92
HĂRŢI DE IMAGINI ...................................................................................................................... 94
Folosirea unei imagini ca "hartă de imagini" ..................................................................... 94
Coordonatele zonelor active ................................................................................................. 95
Utilizarea unei hărţi de imagini............................................................................................ 96
Alte atribute ale elementului <area> ................................................................................... 96
Suprapunerea zonelor active ................................................................................................ 97
FORMULARE ............................................................................................................................... 97

5
 Interactivitatea ...................................................................................................................... 97
Atribute esenţiale ale elementului <form> ........................................................................... 98
Expedierea unui formular vid prin poştă electronică ........................................................... 98
Un formular cu un câmp de editare şi un buton de expediere .............................................. 99
Butonul Reset....................................................................................................................... 100
Câmp de editare de tip "Password" .................................................................................... 100
Butoane radio...................................................................................................................... 101
Casete checkbox .................................................................................................................. 102
Caseta "File" ....................................................................................................................... 102
Elementul "image"............................................................................................................... 103
Elementul "button" .............................................................................................................. 104
Elementul "hidden" ............................................................................................................. 104
Lista de selecţie ................................................................................................................... 105
Lista de selecţie cu selecţii multiple.................................................................................... 106
Câmpul de editare multilinie............................................................................................... 106
Blocul "button".................................................................................................................... 107
FRAME-URI ............................................................................................................................... 108
Frame-uri sau sub-ferestre.................................................................................................. 108
Culori pentru chenarul frame-urilor................................................................................... 110
Dimensionarea chenarului unui frame ............................................................................... 110
Chenare invizibile ............................................................................................................... 111
Bara de defilare................................................................................................................... 112
Poziţionarea documentului într-un frame ........................................................................... 112
Chenare fixe ........................................................................................................................ 112
Browser-e vechi................................................................................................................... 112
Frame-uri in-line................................................................................................................. 113
8. ELEMENTE DE DESIGN ALE PAGINILOR WEB........................................................ 114

GLOSAR DE TERMENI ......................................................................................................... 116

BIBLIOGRAFIE ....................................................................................................................... 118

6
1. Scurt istoric
Proiectul ARPA
În anii ’60 în cadrul Departamentului Apărării Statelor Unite ale Americii
(DOD, Department of Defense) funcţiona Agenţia pentru Proiecte de Cercetare
Avansate (ARPA, Advanced Research Projects Agency). Agenţia primeşte ca proiect
de cercetare realizarea practică a interconectării reţelelor de computere ale bazelor
militare americane. Această inter-reţea (ARPA) trebuia construită astfel încât să
reziste unui atac atomic din partea unui potenţial inamic.

IP (Internet Protocol)
Protocolul IP a fost conceput special pentru a putea satisface obiectivele reţelei
ARPA în condiţii de atac inamic. Protocolul realizează dirijarea informaţiei într-o
inter-reţea.

Pachete
Conform acestui protocol, înainte de fi lansată în Internet o informaţie trebuie
împărţită în pachete. Fiecare pachet va avea capacitatea de a circula în mod
independent în Internet. Un pachet va conţine:
• adresa sursei;
• adresa destinaţiei;
• numărul pachetului în cadrul informaţiei;
• un identificator pentru informaţia transmisă.
Datorită faptului că pachetele conţin şi adresa destinaţiei, acestea pot circula
independent în Internet şi pot ajunge la destinaţie într-o ordine oarecare, la momente
de timp arbitrare. La destinaţie pachetele sunt repuse în ordine şi astfel informaţia
iniţială este refăcută.

1969, ARPANET
În anul 1969 la dezvoltarea proiectului ARPA au fost invitate să participe şi
patru universităţi civile americane. În acest an reţeaua ARPA se divide DARPA
(partea militară) şi ARPANET (partea civilă).

1975
A fost creat serviciul e-mail pentru primirea şi expedierea mesajelor
electronice.
Tot în acest an a fost creat serviciul TELNET care a permis comanda de la distanţă a
unui computer (remote control).

1979
Este creat serviciul UseNet specializat iniţial pentru informarea şi crearea
grupurilor de discuţii pe diferite domenii de interes ştiinţific.

Anii ‘80
Apare protocolul TCP/IP care aduce corecţii la vechiul protocol IP. În aceşti
ani încep să fie interconectate supercalculatoarele din centrele universitare americane.

Anii ‘90
După anul 1990 pe Internet îşi fac apariţia firmele comerciale. Aceste firme
prin investiţiile aduse contribuie foarte mult la dezvoltarea Internet-ului.

7
InterNIC
Deşi Internetul nu are o structură administrativă bine determinată, după 1990
se face simţită nevoia unui organism care supervizeze activităţile care se petrec pe
Internet. Astfel a apărut InterNIC.

RFC (Request for Comments)

Orice inovaţie adusă în tehnologiile legate de Internet care devine suficient de
matură pentru a fi acceptată unanim de către utilizatori este cunoscută sub forma unei
Cereri de Comentariu (Request for Coments). Există astăzi câteva mii de RFC-uri.

WWW (World Wide Web)

În 1991 în cadrul laboratoarelor de cercetare nucleară CERN, fizicianul Tim
Berners-Lee a inventat o metodă de expediere între cercetători a datelor ştiinţifice
(text şi imagini). Această metodă a condus la naşterea celui mai popular serviciu
Internet World Wide Web ( în traducere pânza de paianjen întinsă cât lumea întreagă).

8
2. Noţiuni fundamentale, concepte şi termeni
Reţele de calculatoare
La modul cel mai general o reţea de calculatoare reprezintă o configuraţie de
echipamente de procesare de informaţie conectate prin linii de comunicaţie ce pot împărţi
în comun informaţia şi resursele disponibile.

Criterii de clasificare a reţelelor

În funcţie de tipul de conectare putem distinge: reţele conectate prin cabluri

speciale, prin radio, prin linii telefonice, prin fibră optică etc.
Indiferent de tipul mediilor de conectare, în funcţie de extinderea acestora,
reţelele pot fi:
- reţele locale - LAN (Local Area Network);
- reţele metropolitane - MAN (Metropolitan Area Network);
- reţele de arie largă - WAN (Wide Area Network);
În funcţie de mediul de interconectare distingem:
- reţele bazate pe cabluri:
o Ethernet – necesită cabluri speciale;
o HomePNA – utilizează liniile telefonice deja existente;
o HomePlug – utilizează cablurile reţelei electrice;
- Reţele fără cabluri (wireless):
o 802.11b – Wi-Fi cu o viteză de 11 Mbps;
o 802.11a – Wi-Fi5 cu o viteză de 54 Mbps.

Topologii şi protocoale

Hardware-ul reţelelor include perifericele, plăcile de reţea şi toate celelalte

echipamente necesare pentru a realiza transmisia şi procesarea datelor în cadrul reţelei
(hub-uri, repetoare, switch-uri, routere etc).
Modurile în care sunt conectate cablurile, computerele şi alte periferice constituie
topologia fizică a reţelei, iar metoda utilizată pentru transferul informaţiei între staţiile de
lucru constituie topologia logică.
Principalele tipuri de topologie fizică sunt:
- Linear Bus – reprezintă interconectarea calculatoarelor prin intermediul unui
cablu principal cu terminatoare la fiecare capăt;
- Star – în acest tip de topologie, fiecare nod de reţea (server, staţie de lucru sau
periferic) este conectat într-un hub sau switch central care controlează toate
funcţiile reţelei;
- Tree – acest tip de reţea combină caracteristicile topologiilor Linear Bus şi Star.
Ea constă într-un grup de staţii de lucru configurate în stea (Star), conectate
ulterior la un cablu liniar (Linear Bus).

9
Componentele hardware ale unei reţele

În afară de staţiile de lucru şi de servere, principalele componente ale unei reţele

sunt echipamentele care asigură transmisia semnalului: plăci de reţea, hub-uri, switch-uri,
repetoare de semnal, bridge-uri şi routere.
Plăcile de reţea sunt cele care realizează conectarea fizică între reţele şi staţiile
de lucru. Sunt principalele dispozitive care determină viteza şi performanţa unei reţele.
Conexiunile dintre cabluri şi staţiile de lucru, servere şi periferice sunt mediate de
către hub-uri. Unele modele sunt pasive , permiţând doar trecerea semnalului de la un
calculator la altul fără nici o modificare. În prezent majoritatea hub-urilor sunt active,
ceea ce înseamnă că ele vor amplifica electric semnalul transmis în reţea.
Deoarece un semnal pierde din amplitudine atunci când traversează un cablu, este
necesar să existe un dispozitiv care să îl amplifice. Acesta este un repetor. Repetoarele
pot fi dispozitive separate sau pot fi încorporate în hub-uri sau switch-uri. De exemplu
într-o reţea locală (LAN) care se bazează pe topologie Star cu cablu UTP, lungimea
maximă după care este necesar un repetor este de 100 m.
Switch-ul este un dispozitiv de reţea ce selectează calea prin intermediul căreia
datele sunt trimise către următoarea destinaţie. Switch-ul determină calea şi locul specific
din reţea în care trebuie trimise datele. Această funcţie poate fi îndeplinită şi de către
router dar switch-ul este un mecanism mai simplu şi mai rapid decât acesta. Timpul
necesar unui switch pentru a localiza punctul în care trebuie transmise datele se numeşte
latenţă şi reprezintă unul din principalele dezavantaje ale acestui dispozitiv, mai ales în
reţelele de mari dimensiuni.
Pentru a eficientiza funcţionarea reţelelor de mari dimensiuni se poate folosi un
dispozitiv numit bridge (pod). Bridge-ul monitorizează traficul dintr-o reţea împărţită în
două segmente, transmiţând pachetele de informaţie către locaţiile corecte. Majoritatea
bridge-urilor pot identifica mesajele, transmiţându-le ulterior automat către adresele
specificate ale calculatoarelor, permiţând astfel traficul continuu prin blocarea celui
inutil.
Router-ele transmit informaţiile între două reţele distincte, putând fi asimilate cu
bridge-uri inteligente, deoarece selectează dinamic cea mai bună cale pentru a transmite
un mesaj, prin analiza adresei de origine şi a celei de destinaţie. În plus ele pot analiza şi
traficul pentru a identifica care sunt segmentele cele mai solicitate, redirecţionând datele
pentru a evita aceste segmente. Router-ele sunt fi folosite şi pentru a realiza conectarea
unui LAN la Internet.
Gateway-ul este punctul dintr-o reţea care funcţionează ca poartă către o altă
reţea. De exemplu în cazul conectării unei reţele locale la Internet unul dintre
calculatoarele din reţea va avea şi rolul de gateway iar adresa lui va trebui cunoscută de
toate celelalte calculatoare din reţea.

Protocoalele unei reţele

Setul de reguli care guvernează comunicarea între calculatoarele unei reţele este
denumit protocol, acesta standardizând principalele caracteristici ale interconectării:
metode de acces, topologia fizică, tipurile de cabluri şi viteza de transfer a datelor. Cele

10
mai comune protocoale de reţea sunt: Ethernet, Fast Ethernet (bazat pe fibră optică),
LocalTalk dedicat mai ales calculatoarelor Macintosh, Token Ring (dezvoltat de IBM,
necesită o topologie Star), FDDI (Fiber Distributed Data Interface), ATM
(Asynchronous Transfer Mode), IEEE 802.11b, IEEE 802.11a.

Internet şi World Wide Web (WWW)

Internetul reprezintă cea mai mare inter-reţea WAN (Wide Area Network) din
lume care poate fi considerată ca fiind un sistem global format din calculatoare diferite
sau din reţele de calculatoare interconectate, ce utilizează un protocol comun de
comunicaţie. Ca şi un sistem de telefonie el permite calculatoarelor de oriunde din lume
să facă schimb de informaţii prin intermediul unor legături. Internetul constă într-o
multitudine de legături între calculatoare aflate la distanţă. Informaţia este transmisă de la
o legătură la alta prin intermediul unor calculatoare (router-e) care stabilesc rutele optime
pe care se vor transmite mesajele la destinaţii. Funcţionarea Internetului se bazează pe
filozofia client-server. Pe calculatoarele conectate funcţionează aplicaţii software de tip
Internet care pot fi aplicaţii de tip client sau aplicaţii de tip server. Aplicaţiile de tip client
lansează cereri de informaţii (servicii) către aplicaţiile de tip server care analizează
cererile şi apoi trimit informaţiile (serviciile) solicitate „clienţilor” îndreptăţiţi să le
primească. Aplicaţiile Internet corespund unor servicii Internet (WWW, FTP, E-MAIL,
NEWS) care se bazează pe protocoale corespondente (HTTP pentru WWW, FTP pentru
FTP, POP3 şi SMTP pentru E-MAIL etc). Astfel întâlnim în Internet aplicaţii de tip
server WWW, server FTP, server E-MAIL, server NEWS etc şi aplicaţii de tip client
WWW (browser-ul), de tip client E-MAIL şi NEWS (Outlook Express). Un protocol este
o combinaţie de reguli de comunicaţie şi formate de mesaje care trebuie respectate de
către aplicaţiile Internet pentru a face posibil schimbul de date şi de mesaje. Protocoalele
sunt standarde care furnizează servicii de comunicaţie între calculatoare.

WWW (World Wide Web care în traducere înseamnă „o pânză de păianjen ce

cuprinde întreaga lume”) este un serviciu Internet care permite calculatoarelor conectate
la Internet să transfere date hipertext şi hipermedia (text formatat, grafică, video sau
audio). WWW oferă prin intermediul protocolului HTTP posibilitatea de „legare” (link) a
documentelor Web din Internet. Dacă Internetul reprezintă baza de comunicaţie, serviciul
WWW permite localizarea documentelor Web prin intermediul unui sistem aproape
infinit de legături. Hipertextul Web trebuie interpretat ca un text care poate conţine
legături şi referinţe către alte documente şi informaţii Web pe care le poate identifica şi
apela.

HTTP, hiperlegături, FTP, ISP, URL

HTTP (HyperText Transfer Protocol) este un protocol de reţea proiectat special
pentru Web. Prin intermediul unui browser (Internet Explorer, Netscape Navigator etc)
utilizatorul poate accesa informaţia (text, imagini, sunete, animaţii) aflată pe un server
WWW. Transferul de informaţie se face prin intermediul protocolului numit HTTP,
protocolul de transfer a hipertextului şi a două aplicaţii software Internet: aplicaţia server
WWW şi aplicaţia client WWW (browser). De regulă browser-ul solicită server-ului Web

11
(WWW) o anumită pagină Web care este un fişier text ce conţine marcatori (tag-uri)
HTML. Ca răspuns al browser-ului server-ul Web va transfera către acesta o copie a
fişierului solicitat. După descărcare, browser-ul va parcurge acest fişier iar atunci când va
întâlni marcatori ce trimit către alte resurse (text, imagini, sunete etc) va solicita server-
ului copii ale acestor fişiere.
Limbajul de Marcare a HiperTextului (HTML) este un limbaj special de marcare
utilizat pentru crearea documentelor cu hiperlegături (hyperlinks).
Hiperlegăturile reprezintă marcatori ce realizează legături către alte documente
sau resurse Web. Link-urile (legăturile) transformă un text obişnuit în "hipertext" sau
"hipermedia". Ele permit trecerea rapidă de la o informaţie aflată pe un anumit server la
altă informaţie aflată pe un alt server oriunde în lume. Atunci când se navighează sub un
browser, link-urile apar ca "zone active" într-o pagină Web, adică zone pe ecran sensibile
la apăsarea butonului (de regulă cel stâng) al mouse-ului. Un click efectuat cu mouse-ul
pe un link este interpretat ca o cerere către un anumit server Web de a expedia către
computerul client o resursă către care link-ul respectiv punctează. În felul acesta paginile
Web devin interactive (adică răspund la acţiuni iniţiate de utilizator).
Pentru accesul direct şi performant la fişierele aflate pe server-ele FTP (File
Transfer Protocol) utilizatorii Internet pot folosi un serviciu special numit FTP. Prin
intermediul serviciului FTP ei pot transfera în mod rapid fişiere de la un sistem la altul.
De asemenea sunt necesare cele două tipuri de aplicaţii Internet (server FTP şi client
FTP).
Un calculator sau o reţea de calculatoare pot fi conectate la Internet prin
intermediul unui furnizor de servicii Internet ISP (Internet Service Provider). Un ISP este
de regulă o societate care are unul sau mai multe calculatoare conectate la Internet prin
intermediul cărora pot fi conectaţi clienţii (abonaţii) pe baza unui cont (nume utilizator şi
parolă) obţinut de la furnizorul de servicii. Conexiunile cu clienţii pot fi realizate în
modalităţi diferite (prin intermediul unui modem telefonic, al unui modem cablu tv., prin
ISDN, fibră optică etc).
URL (Uniform Resource Locator) reprezintă un identificator unic al unei resurse
Internet. Prin resursă Internet înţelegem un calculator, un disc pe un calculator, un fişier
aflat pe un calculator sau un fragment dintr-un fişier aflat pe un calculator conectat la
Internet. Adresele URL definesc printr-o sintaxă generică accesul la resursele din Internet
şi servesc pentru localizarea acestora.

Formarea şi structura adreselor Web

O adresă URL are următoarea sintaxă:
protocol://numegazdă.domeniu/cale/fisier.extensie#ancora
unde:
1. protocol reprezintă metoda de acces a resursei. Exemple de metode de acces:
- http reprezintă metoda de acces la resursele aflate pe Internet prin intermediul
serviciului WWW;
- ftp reprezintă metoda de acces la resursele aflate pe Internet prin intermediul
serviciului FTP;
- news reprezintă metoda de acces la resursele aflate pe Internet prin
intermediul serviciului NEWS.

12
2. numegazdă reprezintă numele calculatorului gazdă. El este stabilit de către
administratorul sistemului şi poate fi aflat prin intermediul comenzii hostname tastată din
promptul MSDOS (prin linia de comandă).
3. domeniu reprezintă numele domeniului pe Internet în care se află calculatorul.
Internetul este împărţit în domenii şi subdomenii. La nivelul cel mai înalt există
domeniile de nivel 1 ca de exemplu: com, org, edu, mil, net, us, ro, uk, etc. Aceste
domenii de nivel 1 sunt împărţite la rândul lor în subdomenii (domenii de nivel 2). De
exemplu domeniul ro cuprinde ca subdomenii pe snspa, comunicare, kappa, pcnet, etc.
La rândul lor domeniile de nivel 2 pot fi împărţite în alte subdomenii (domenii de nivel
3). De exemplu subdomeniul snspa din domeniul ro cuprinde ca subdomeniu pe
comunicare (vezi figura de mai jos).

net com ro edu

roedu netscape comunicare kappa snspa mit

developer comunicare

Pentru a obţine numele unui domeniu se parcurge ascendent structura arborescentă a

subdomeniilor până la rădăcină. Exemple de domenii:
• comunicare.snspa.ro (aici subdomeniul comunicare aparţine domeniului snspa);
• comunicare.ro (aici domeniul comunicare aparţine direct domeniului de nivel 1
ro);
• kappa.ro;
• yahoo.com.
Un computer are un nume unic pe Internet. Acesta este:
numegazdă.domeniu
Exemple de nume de computere pe Internet:
• fcrpnews.comunicare.ro
• www.comunicare.ro
• www.yahoo.com
4. cale reprezintă calea către un fişier aflat pe computerul de pe Internet.
5. ancora reprezintă un reper (etichetă) în interiorul unui fişier HTML.
Exemple:
• http://www.comunicare.ro
• http://www.comunicare.ro/CineSuntemNoi.html

13
 • http://www.comunicare.ro/Internet/Internet.html/#cap5
• ftp://www.netscape.com/downloads/communicator
news://msnews.microsoft.com/microsoft.public.windows.outlookexpress5

Adresele IP, clasele de adrese IP şi rezoluţia adreselor

Protocolul IP (Internet Protocol) asigură dirijarea pachetelor de date în Internet
pentru ca acestea să poată ajunge la destinaţie. Aşa cum am precizat anterior fiecare
pachet circulă independent în Internet întrucât el are încapsulată adresa destinaţiei la care
trebuie să ajungă.
Un computer conectat la Internet se poate fi identifica unic prin adresa lui IP,
numită şi adresa software. Această adresă este un număr binar pe 32 de biţi. De regulă
adresa IP se exprimă prin 4 grupe de numere zecimale cuprinse între 0 şi 255. Exemple
de adrese IP:
• 193.231.32.1
• 194.102.44.101

Adresele IP se grupează în clase. Există următoarele tipuri de clase:

clasa C este de forma: r.r.r.c
clasa B este de forma: r.r.c.c
clasa A este de forma: r.c.c.c
unde r reprezintă partea de reţea iar c reprezintă computerul. De exemplu clasa C
194.102.44.c poate avea cel mult 256 de drese IP, de la 194.102.44.0 la 194.102.44.255.

Conectarea calculatoarelor la o reţea Ethernet se face prin intermediul unor plăci

de reţea de tip Ethernet. Fiecare placă de reţea are o adresă hardware (înscrisă în
momentul fabricării) formată dintr-un număr pe 48 de biţi. De regulă această adresă se
exprimă prin 6 grupe de câte 2 cifre hexagesimale. Exemplu: 6d 34 5f 4e bc 9a.
Pentru a afla adresa hardware a plăcii de reţea se poate lansa comanda route print din
promptul MSDOS (linia de comanda).

Deci există 3 identificatori unici pentru un computer pe Internet:

• numele, exemplu: www.comunicare.ro
• adresa IP (software), exemplu: 194.102.44.1
• adresa plăcii de reţea (hardware), exemplu: a1 b2 c3 23 ae f5

Trecerea de la un identificator la alt identificator se face prin intermediul unui

mecanism numit de rezoluţie a adreselor.

Comenzi utile din linia de comandă

Pentru a verifica conexiunea la Internet există un număr de comenzi care se pot
introduce în linia de comandă.

Din meniul Start, Programs se alege Command Prompt (MSDOS-Prompt), sau dim
meniul Start se alege opţiunea Run şi apoi se tastează command şi Enter.

14
hostname
Afişează numele de gazdă al computerului

ipconfig
Afişează adresa IP (software) a computerului, masca de reţea şi gateway-ul (poarta
implicită).

ping
Verifică conexiunea cu un computer prin trimiterea şi recepţionarea unui pachet de date
de dimensiuni reduse.

15
route print
Afişează adresa hardware a plăcii de reţea şi tabela de rutare.

tracert
Afişează serverele intermediare între un computer sursă şi un computer destinaţie.

16
3. Browser-ul, navigarea Web şi motoarele de căutare
Browser-ul
Browser-ul este o aplicaţie Internet de tip client WWW care respectă protocolul
HTTP (HyperText Transfer Protocol) ce permite realizarea de legături independente între
documentele Web în scopul vizualizării acestora. Browser-ul este un instrument software
necesar pentru navigarea în Web. Scopul principal al acestei aplicaţii este citirea textului
şi afişarea imaginilor sau a altor informaţii multimedia aflate pe un server Web. Browser-
ul poate consulta şi paginile Web aflate pe un calculator neconectat la Internet. În mod
obişnuit browser-ul recepţionează informaţia de afişat sub forma unor fişiere care conţin
texte scrise în limbajul HTML (HyperText Markup Language). Utilizarea browser-ului pe
un calculator legat la o reţea permite ca fişierele de pe un alt computer să poată fi copiate
în computerul gazdă şi apoi să fie consultate. Browser-ele moderne oferă facilităţi pentru
afişarea imaginilor, a video-clipurilor şi pentru redarea sunetelor.
Deschiderea (lansarea în execuţie) a unui browser se poate realiza dând double
click (sau click) pe pictograma browser-ului (exemplu Internet Explorer):
• din Desktop,
• din Launchbar (bara de lângă meniul de start) sau
• din meniul Start prin accesarea opţiunii corespunzătoare.
Închiderea browser-ului se poate realiza similar închiderii unei aplicaţii
Windows:
• dând click pe butonul x al ferestrei,
• alegând opţiunea Close din meniul File,
• tastând combinaţia de taste Alt-F4.
Atunci când se lansează în execuţie un browser Web, în funcţie de felul în care
este setat, va încerca să încarce o pagină Web (Home Page) aflată la o anumită adresă
URL sau va încărca o pagină vidă (Blank). Această primă pagină pe care o va afişa
browser-ul la startare se numeşte pagina de start (Home Page). Ea poate fi schimbată prin
intermediul dialogului Internet Options ce poate fi lansat din opţiunea cu acelaşi nume
aflată în meniul Tools al browser-ului sau în Control Panel.

17
 Afişarea unei pagini Web într-o fereastră nouă poate fi realizată lansând o nouă
instanţă a browser-ului şi retastând adresa URL a paginii dorite sau prin intermediul
meniului contextual al unui link (click pe butonul drept al mouse-ului) şi apoi alegerea
opţiunii Open in New Windows.

Dacă se doreşte reafişarea aceleiaşi pagini Web (curente) într-o fereastră nouă, se
poate utiliza combinaţia de taste Ctrl-N sau se poate alege din meniul File al
browser-ului opţiunea New şi apoi Window.
Dacă se doreşte stoparea încărcării unei anumite pagini Web se poate apela la
butonul Stop al browser-ului aflat în Toolbar.

Refresh-ul (reîncărcarea) unei pagini Web existentă în fereastra browser-ului şi

care are deja adresa înscrisă în bara de adrese (Address) se poate realiza prin apăsarea
tastei F5 sau prin apăsarea butonului Refresh din Toolbar.

Barele de unelte (Toolbars) pot fi afişate sau „ascunse” prin intermediul opţiunii
Toolbars din cadrul meniului View al browser-ului şi pot fi configurate prin meniului
contextual al Toolbar-ului (opţiunea Customize).

18
 Submeniul Toolbars disponibilizează opţiunea Customize (personalizare) care
dacă va fi lansată va oferi posibilitatea aducerii în barele de meniuri a butoanelor ce
realizează acţiunile dorite.

Afişarea sau ascunderea imaginilor dintr-o pagină Web în fereastra unui browser
poate fi controlată prin intermediul dialogului Internet Options care prin Tab-ului
Advanced oferă posibilitatea setării opţiunii Show Pictures (afişarea cu imagini sau fără).

19
 Afişarea adreselor URL vizitate anterior poate fi realizată sub forma unui meniu
derulant (combo box) care apare atunci când se dă un click pe triunghiul cu vârful în jos
aflat în bara de adrese.

Accesarea butonului History din Toolbar oferă o altă modalitate de a afişa

adresele URL vizitate anterior. El va determina deschiderea unei ferestre noi în partea
stângă a browser-ului, ce va disponibiliza posibilitatea consultării şi selectării adreselor
URL vizitate în fiecare zi din săptămâna anterioară.

Navigarea Web
Deplasarea la o adresă Web se poate realiza în trei feluri:
1. prin tastarea adresei dorite în bara de adrese urmată de Enter:

2. prin alegerea unei adrese URL din „Istoria” barei de adrese;

3. prin intermediul unui link.

Atunci când prompter-ul mouse-ului se deplasează peste un text sau o imagine

care constituie zona activă a unui link, forma prompter-ului se schimbă (în mână) şi de
asemenea în funcţie de felul în care a fost scris codul paginii respective, este posibil să se
schimbe şi culoarea sau chiar forma acelui link. Dacă se dă click pe un link, se poate
realiza un salt la o anumită adresă (ancoră) din cadrul aceleiaşi pagini sau la o altă pagină
Web (ancoră) aflată pe acelaşi server sau pe un alt server. În funcţie de conţinutul noii
adrese URL se poate declanşa o operaţiune de download (descărcare a unei resurse din
Internet), transmiterea datelor unui formular sau se poate afişa un nou conţinut de pagină
Web.
Navigarea înainte şi înapoi printre paginile Web vizitate se poate realiza prin
intermediul butoanelor Back şi Forward.

20
 Atunci când se „navighează” sub un browser în Internet, este posibil să se
dorească memorarea adreselor URL ale unor pagini de interes, în vederea revenirii la
acestea şi altă dată. Această memorare este similară cu utilizarea unor semne de carte
„bookmarks” plasate la anumite pagini. În acest sens orice browser modern pune la
dispoziţie un sistem de memorare a adreselor paginilor favorite, şi de reaccesare a lor din
cadrul unui meniu numit chiar Favorites. Adăugarea (memorarea) în Favorites a adresei
URL a unei pagini curente aflate în fereastra browser-ului se face cu opţiunea Add to
Favorites selectată din meniul cu acelaşi nume (Favorites).

Prin intermediul meniului contextual, este posibilă adăugarea în Favorites a

adresei URL a unui link din pagina Web curentă.

Afişarea unei pagini Web din bookmarks se poate realiza oricând prin selectarea
ei din meniul Favorites (Bookmarks).
Adresele URL ale paginilor Web memorate în bookmarks-uri pot fi grupate pe
domenii, subdomenii, subiecte şi problematici în folder-e şi subfolder-e speciale care pot
fi create, modificate sau şterse prin intermediul dialogului Organize Favorites. Acest
dialog se poate lansa din opţiunea cu acelaşi nume aflată în meniul Favorites.
Ştergerea bookmark-ului unei pagini Web se poate realiza prin intermediul
butonului Delete din cadrul aceluiaşi dialog Organize Favorites sau apăsând tasta Delete
când bookmark-ul respectiv este selectat.

21
 Pentru a putea fi copiat un text (o secvenţă de text) dintr-o pagină Web se poate
utiliza mecanismul Copy & Paste. Mai întâi se va selecta textul dorit, apoi din meniul
contextual al selecţiei se va alege opţiunea Copy. În acest moment textul va exista în
memoria Clipboard. Pentru a fi copiat (duplicat) într-un alt document (Word, text, etc) se
va deschide respectivul document (dacă nu este deja deschis) iar apoi prin intermediul
comenzii Paste se va aduce textul din memoria Clipboard la destinaţia dorită.
Pentru a copia în Clipboard o imagine dintr-o pagină Web, se poate utiliza meniul
contextual aferent imaginii dorite. Din acest meniu se va alege opţiunea Copy, iar apoi
prin Paste, imaginea va fi copiată (duplicată) la o destinaţie (într-un document Word,
într-un editor grafic etc).
O adresă URL dintr-o pagină Web poate fi copiată în Clipboard similar copierii
unei imagini dar alegându-se din meniul contextual comanda Copy Shortcut. O altă
modalitate de a copia o adresă URL dintr-o pagină Web prin acelaşi mecanism Copy &
Paste o constituie opţiunea Properties.
Conţinutul unei pagini Web se poate salva ca fişier text (.txt) sau (.html) prin
intermediul opţiunii Save as existentă în meniul File al browser-ului. După selectarea
acestei opţiuni (Save as) apare un dialog (Save Web Page) prin intermediul căruia poate
fi selectată calea şi numele fişierului în care se va salva conţinutul paginii curente. De
asemenea se poate selecta tipul fişierului care va fi salvat (html, htm, txt).
Cel mai frecvent paginile Web oferă vizitatorilor link-uri speciale pentru
descărcarea unor arhive ce pot conţine fişiere de tip text, de tip imagine, de tip sunet,
video sau produse software. Aceste fişiere există arhivate (zip, rar, ace etc sau sub forma
autoextractabilă exe) pentru a putea fi descărcate mai rapid,.
Procesul de descărcare (download) a fişierelor din hard disc-ul server-ului pe hard
disc-ul calculatorului personal se poate realiza în mai multe modalităţi:
• dând click în link-ul respectiv;
• prin intermediul meniului contextual alegând opţiunea Save Target As;
• prin intermediul unui downloader (un program specializat pentru descărcarea rapidă a
unui fişier din Internet ex.: FlashGet, Download Accelerator, GetRight etc).
Salvarea unei imagini dintr-o pagină Web se poate realiza prin intermediul
opţiunii Save Picture As din cadrul meniului contextual (aferent imaginii) sau în cazul
browser-ului Internet Explorer v.6.x, alegând opţiunea Save this image din bara de unelte
ce apare atunci când prompter-ul mouse-ului se află deasupra imaginii.
Meniul File al browser-ului pune la dispoziţie posibilitatea de a previzualiza o
pagină Web înainte de tipărire prin intermediul opţiunii Print Preview.
Schimbarea orientării portrait (cu pagina aşezată pe lungime) sau landscape (cu pagina
aşezată pe lăţime) a unei pagini Web ce va fi tipărită, poate fi realizată prin intermediul
dialogului Print, secţiunea Layout. Dialogul Print devine disponibil dacă din meniul File
s-a ales opţiunea Print. Schimbarea dimensiunii hârtiei se poate realiza prin intermediul
opţiunii Page Setup din cadrul meniului File. După lansarea acestei opţiuni va deveni
disponibil dialogul Page Setup care prin câmpul Size (mărime) va permite modificarea
dimensiunii hârtiei pe care se va lista la imprimantă. Opţiunea Print a meniului File pune
la dispoziţie un dialog special prin intermediul căruia poate fi stabilit conţinutul ce va fi
tipărit: întreaga pagină Web, doar o pagină anume din cadrul documentului Web, un
frame (o secţiune, o sub-fereastră a unei ferestre a browser-ului), un text selectat, numărul
de copii ce se vor tipări.

22
Motoarele de căutare
Motoarele de căutare sunt servere specializate în stocarea de meta-informaţii
(adică a „informaţiilor despre informaţii”) care oferă utilizatorilor posibilitatea de a găsi
(regăsi) informaţiile dorite în site-urile în care acestea există.

Selectarea unui motor de căutare se poate face în mai multe feluri:

• tastând adresa URL a acestuia în bara de adrese şi apoi Enter;

• prin alegere din „istoria” barei de adrese sau din Bookmarks a adresei motorului de
căutare dorit (dacă acesta a mai fost accesat de curând sau dacă are adresa memorată
în Favorites);
• prin intermediul butonului Search din Toolbar care va deschide un dialog cu câteva
opţiuni de căutare: Find a Web page (pentru o pagină Web), Find a Person (pentru o
persoană), Find a map (pentru o hartă) etc.

Iată în continuare câteva adrese ale celor mai puternice motoare de căutare:
www.google.com, www.yahoo.com, www.altavista.com, www.excite.com,
www.lycos.com.
În acest moment Google conţine cea mai mare bază de date, în care se găsesc
peste 3 miliarde de pagini. Pentru a clasifica o pagină Web, Google contorizează numărul
de link-uri care conduc la aceasta. Deci o pagină Web cu cât va avea mai multe trimiteri
(referinţe) din alte site-uri, cu atât va avea un scor de relevanţă mai mare.

23
 Motoarele de căutare pun la dispoziţie mecanisme de căutare după unul sau mai
multe cuvinte cheie sau după fraze. Orice motor de căutare oferă minim o bară de căutare
Search (Caută) în care există un câmp de editare în care pot fi tastate aceste cuvinte sau
fraze şi un buton Search care odată apăsat va declanşa cătarea.

Motoarele de căutare pun la dispoziţie opţiuni de a construi relaţii logice între

cuvintele cheie prin intermediul unor operatori logici cum sunt OR, AND, NOT.
Operatorul OR se utilizează de regulă între două cuvinte cheie, pentru a căuta
informaţii şi concepte sinonime, întorcând astfel toate înregistrările unice, ce conţin
primul, al doilea sau ambii termeni incluşi.
Operatorul AND (similar cu +) inserat între două cuvinte cheie va determina
întoarcerea strict a rezultatelor care conţin ambele cuvinte cheie. Dacă se combină mai
mulţi termeni căutarea va avea un grad mai înalt de specificitate.
Operatorul NOT (similar cu -) permite excluderea informaţiilor (paginilor Web)
care conţin termenii introduşi după el.
Unele motoare de căutare printre care se numără şi Google şi Yahoo pun la
dispoziţie facilităţi avansate de căutare şi oferă suport de operare pentru mai multe limbi.

24
4. Securitatea în Internet
Certificatele digitale
Un certificat este util pentru a identifica un produs. Acest lucru are sens numai
dacă posesorul certificatului are încredere în emitentul acestuia, numit şi autoritate de
certificare.
Atunci când aveţi încredere într-o autoritate de certificare, aceasta presupune că
aveţi încredere în exigenţa acesteia în ceea ce priveşte evaluarea cererilor de acordare a
certificatelor. Totodată aveţi încredere în faptul că autoritatea de certificare va actualiza
periodic şi va face publică o listă a certificatelor care nu mai sunt valabile. Această listă
va fi trimisă tuturor clienţilor sau poate fi consultată şi extrasă de aceştia din pagina Web
a autorităţii de certificare.
Certificatele sunt folositoare pentru o gamă largă de servicii de securitate, cum
sunt:
• Autentificarea – verificarea identităţii cuiva sau a ceva.
• Confidenţialitatea – asigurarea faptului că la anumite informaţii are acces numai un
anumit public.
• Criptarea – prelucrarea informaţiei astfel încât cititorii neautorizaţi să nu o poată
descifra.
• Semnături digitale – atestă integritatea mesajelor şi asigură acceptarea acestora.

Autentificarea

Autentificarea este deosebit de importantă pentru a face comunicarea sigură.

Utilizatorii trebuie să-şi dovedească identitatea în faţa celor cu care comunică şi la rândul
lor să verifice identitatea acestora. Verificarea identităţii în reţea este un proces complex.
Părţile care comunică nu se întâlnesc fizic şi din acest motiv o persoană răuvoitoare poate
intercepta mesajele sau poate încerca să se substituie altcuiva.
Certificatul digital este o acreditare obişnuită care dă posibilitatea verificării
identităţii. Aceste certificate digitale sunt criptate (codificate) pentru a limita posibilitatea
ca mesajele să fie interceptate, modificate sau contrafăcute. Tehnicile de criptare sunt
complexe astfel încât certificatele digitale vor fi dificil de modificat pentru ca o persoană
să se substituie alteia.

Confidenţialitatea comunicării

Schimbul de informaţii în reţea, inclusiv în Internet poate fi monitorizat (urmărit)

de persoane necunoscute şi posibil rău intenţionate. Reţelele publice sunt nesigure pentru
informaţia importantă şi cu un anume grad de confidenţialitate atunci când aceasta nu
este criptată. Oricine poate accesa reţeaua şi poate analiza fluxul de informaţii dintre două
puncte. Chiar şi reţelele locale private sunt vulnerabile la eforturile perseverente ale unor
răuvoitori care doresc să aibă acces fizic la informaţia din reţea.

25
 Deci, utilizatorii care trimit informaţii importante între două dispozitive conectate
în orice tip de reţea vor trebui să folosească o tehnică de criptare pentru a asigura
confidenţialitatea acesteia.

Criptarea simetrică, cu cheie publică şi cheie privată

Criptarea poate fi imaginată ca şi când ceva de valoare este încuiat într-o cutie
rezistentă. Similar, decriptarea poate fi comparată cu descuierea cutiei şi accesul liber la
valorile dinăuntru. În calculator, datele importante sub forma unor fişiere de pe hard disc
sau fişiere transmise prin reţea pot fi criptate folosind o cheie de criptare. Atât datele
criptate cât şi cheia de criptare sunt prelucrate (transformate) astfel încât să nu poată fi
citite (înţelese) de persoane nedorite.
Cea mai simplă formă de criptare este criptarea simetrică, adică folosirea unei
chei de criptare care trebuie cunoscută de toţi cei care vor să decripteze informaţiile
respective.
O altă metodă este criptarea cu cheie publică ceea ce presupune existenţa a două
chei pereche între care există o legătură stabilită matematic.
O cheie, numită cheie privată, este păstrată secretă de către persoana care doreşte
să-şi asigure securitatea mesajelor primite, şi o altă cheie, numită cheie publică, este dată
celor care vor trimite persoanei în cauză mesaje criptate cu ajutorul ei. Aceste mesaje
criptate cu ajutorul cheii publice nu pot fi decriptate decât de către cel care cunoaşte şi
cheia privată pereche a cheii publice cu care au fost criptate. Oricine încearcă să
decripteze în mod fraudulos mesajul criptat, este posibil să descopere sau să afle cheia
publică cu care a fost criptat, dar este mult mai dificil să descopere două chei necesare
simultan procesului de criptare.
În general criptarea cu ajutorul unei chei publice nu este folosită pentru volume
mari de date. Această metodă este folosită în mod eficient pentru criptarea unor volume
mai mici de date şi pentru criptarea cheilor folosite la criptarea simetrică.

Viruşi informatici şi firewall

Viruşi informatici

Navigarea în Internet presupune implicit şi asumarea anumitor riscuri generate de

posibilitatea apariţiei unor pericole cum sunt: viruşii informatici, viermii de reţea,
spionarea conţinutului hard-discului calculatorului propriu, atacuri informatice externe în
scopuri distructive.
Atunci când printr-o procedură de descărcare (download) declanşată cel mai
frecvent prin accesarea unui link) se descarcă pe calculatorul propriu fişiere din Internet,
este foarte posibil ca acestea să conţină viruşi informatici. Fişierele descărcate pot fi sau
pot conţine documente Word (cu extensia .doc), foi de calcul Excel (.xls), baze de date
Access (.mdb), programe executabile (.exe), pagini Web (.htm, .html), arhive etc. Acestea
pot conţine diferiţi viruşi informatici (macrodefiniţii, viruşi de boot, viruşi care infectează
fişierele executabile, viruşi ai sistemului de operare etc) ce vor încerca să se instaleze în
calculatorul gazdă atunci când respectivele fişiere (virusate) vor fi accesate.

26
 În acest sens după ce un fişier a fost descărcat din Internet nu este indicat ca el să
fie accesat imediat pe calculatorul local. Este necesar ca pe calculatorul local să fie
instalat un program antivirus (F-Prot, BitDefender, Norton Antivirus, F-Secure, Panda
etc) care de cele mai multe ori are o componentă activă ce verifică automat orice fişier
descărcat din Internet şi orice fişier accesat. Dacă programul antivirus nu are această
componentă atunci fişierele descărcate din Internet vor trebui verificate de către
programul antivirus prin declanşarea manuală a unei scanări.
Având în vedere că în prezent există creaţi peste 100.000 de viruşi informatici şi
că probabilitatea de infectare a unor fişiere cu aceşti viruşi este foarte mare, nu se mai
recomandă lucrul (mai ales în Internet) fără a avea instalate programe antivirus
corespunzătoare, actualizate cu ultimele „semnături” de viruşi informatici descoperiţi.

Firewall

În urma lansării în execuţie pe calculatorul personal a unor aplicaţii (descărcate

din Internet, a unor fişiere ataşate mesajelor e-mail, a unor programe externe) neverificate
corespunzător cu un program antivirus actualizat cu ultimele semnături, este foarte
posibil ca acestea să instaleze şi o aplicaţie de tip server numită „cal troian”. Această
aplicaţie va putea „servi” cu informaţia solicitată (din calculatorul infectat) pe un „client”
(hacker) care are o aplicaţie de tip client corespunzătoare. Informaţia va fi transmisă
clientului prin aceeaşi conexiune prin care calculatorul personal este conectat la Internet.
De asemenea este posibil ca o aplicaţie aflată pe un calculator extern conectat la
Internet să scaneze conexiunea calculatorului personal pentru a identifica anumite puncte
slabe ale acesteia care să permită penetrarea externă (prin intermediul unor „porturi”), în
scopul preluării controlului asupra calculatorului personal sau în scopul consultării
(copierii) fişierelor aflate pe acesta.
Pentru evitarea acestor pericole este indicat ca pe lângă programul antivirus, pe
orice calculator conectat la Internet să mai existe instalat un program special de tip
firewall („zid de foc”) care să filtreze permanent conţinutul informaţiei transmise sau
recepţionate prin conexiunea Internet şi care să identifice rapoartele „cailor troieni” şi
solicitările sau scanările externe ale unor aplicaţii de tip client. Programul de tip firewall
va trebui să fie în măsură să informeze despre aceste încercări şi să le stopeze acţiunile.

Cookies şi cache
Un cookie este un fişier text pe care o aplicaţie server Web îl poate scrie prin
intermediul browser-ului într-un loc (folder) special pe hard-discul calculatorului client.
Cookie-urile pot fi scrise pe calculatorul client dacă browser-ul permite aceste drepturi
(de scriere) prin intermediul setărilor sale. În mod implicit browser-ul permite scrierea
cookie-urilor deoarece altfel multe site-uri nu ar mai putea fi vizitate pentru că interzic
accesul clienţilor care nu pot memora cookie-uri. Cookie-urile au o durată de viaţă
stabilită de către aplicaţia server. După expirarea acesteia ele se autodistrug. Cookie-urile
pot conţine şi informaţie înscrisă criptat. Prin intermediul cookie-urilor în calculatorul
client (al vizitatorului) se pot memora date despre vizitatori, despre preferinţele acestora
etc. Aceste informaţii pot fi citite apoi de către aplicaţia server la o nouă revenire în site şi
memorate ulterior într-o bază de date. În acest fel devine posibil „spionajul electronic”

27
foarte interesant în special pentru firmele comerciale care doresc să-şi cunoască cât mai
bine actualii sau viitorii potenţiali clienţi.
Deoarece de multe ori conexiunile Internet nu funcţionează foarte performant iar
unele pagini Web solicitate prin intermediul browser-ului este posibil să mai fi fost
vizitate anterior, s-a dovedit că o conexiune poate fi mult accelerată dacă în timpul
navigării aceste pagini sunt memorate într-o zonă specială (folder) pe hard-discul
clientului numită cache (memorie „tampon”), iar ulterior la o eventuală revenire în site,
dacă nu există modificări, în loc să fie descărcate din calculatorul server, respectivele
pagini să fie reîncărcate local, din zona de cache. În timpul navigării în cache-ul Internet
al browser-ului se memorează nu numai conţinutul text (HTML) al paginilor Web vizitate
ci şi resursele aferente acestora: imagini, sunete video-clipuri etc. ceea ce face ca
încărcarea acestor pagini în fereastra browser-ului să se producă mult mai repede.
Dimensiunea zonei de cache (în MB) poate fi modificată prin intermediul opţiunilor de
configurare ale browser-ului.
Cookie-urile şi fişierele memorate în zona cache Internet pot fi şterse dacă din
meniul Tools al browser-ului se va lansa dialogul Internet Options care prin intermediul
tab-ului General pune la dispoziţie aceste utilităţi (butoanele Delete Cookies şi Delete
Files).

28
5. Poşta electronică
Serviciul e-mail este în prezent unul dintre cele mai larg răspândite servicii
Internet deoarece permite transmiterea rapidă a mesajelor electronice, este foarte ieftin,
uneori chiar gratis, face posibil transferul de fişiere ataşate mesajelor, asigură facilităţi
performante de comunicare cum sunt: Reply, Forward, Quote, CC, BCC.
Web-Based e-mail este o interfaţă Web ce permite accesul la un cont de e-mail,
utilizând un browser Web. Astfel un cont de e-mail poate fi accesat de oriunde din lume,
de pe orice alt calculator conectat la Internet.
Atunci când se transmit mesaje e-mail trebuie respectate câteva reguli
elementare de „bun simţ” ce constituie baza unei netetichete numite „Basic Electronic
Mail Netiquette”. Iată în continuare câteva dintre cele mai importante recomandări pe
care aceasta le face:
• să nu se redacteze mesajul unui e-mail numai cu majuscule;
• să se răspundă cu promptitudine mesajelor e-mail;
• să fie urmărit cu atenţie felul în care este redactat mesajul, avându-se în vedere faptul
că se foloseşte o exprimare scrisă, nonverbală;
• să se verifice cu atenţie mesajul înainte de a fi transmis, astfel încât acesta să nu
conţină greşeli gramaticale şi de ortografie;
• în cazul în care se răspunde la un mesaj, să nu se returneze întregul mesaj original ci
să folosească quot-area dublă (plasarea semnelor >>) numai înaintea rândurilor la
care se răspunde;
• să se folosească o semnătură electronică automată (care include informaţii despre
expeditor şi cum poate fi el contactat) dacă produsul software cu care se lucrează
(clientul e-mail) permite acest lucru;
• să nu se trimită fişiere ataşate nesolicitate;
• să se utilizeze linia Subject în care să se facă o descriere succintă a conţinutului
mesajului;
• să nu se trimită prin facilitatea forward glume decât dacă este foarte sigur că toţi cei
care vor primi mesajul doresc aceasta;
• dacă un mesaj este trimis la mai multe adrese e-mail odată, pe cât posibil să se
utilizeze Bcc (Blind Carbon Copy) şi nu Cc (Carbon Copy) care permite tuturor celor
care au primit mesajul să vadă toate adresele e-mail la care acesta a fost transmis;
să nu se utilizeze facilitatea forward dacă se lucrează în reţeaua AOL (America On Line).

Securitatea e-mail
Transmiterea de e-mail nesolicitat sau spamming-ul cum mai este denumită
această operaţiune, a devenit în prezent un fenomen îngrijorător datorită efectelor pe care
le poate produce: aglomerarea mesajelor în server-ele e-mail, îngreunarea citirii şi
selecţionării mesajelor utile de cele nedorite, pericolul consumării rapide a spaţiului
alocat pentru e-mail pe hard disc-ul ISP-ului (Internet Service Provider), încărcarea
conexiunilor Internet cu informaţie nedorită, posibilitatea infectării cu viruşi informatici
sau cu „cai troieni” prin intermediul fişierelor ataşate,.

29
 În prezent există în Internet foarte multe firme comerciale, mici întreprinzători şi
hacker–i sau persoane rău intenţionate care folosesc frecvent această tehnică. S-au creat
mari baze de date de adrese e-mail care se vând foarte scump.
Există permanent pericolul ca adresa personală de e-mail să ajungă într-o astfel de
bază de date sau într-o listă de spamming. În acest sens trebuie acordată o atenţie sporită
faţă de persoanele cărora le dăm adresa de e-mail sau faţă de site-urile la care completăm
formulare care aproape de fiecare dată solicită şi această adresă. O altă posibilitate de
transmitere a adresei e-mail o constituie trimiterea mesajelor prin utilizarea opţiunii Cc
(Carbon Copy) care face vizibil întregul conţinut al listei de adrese e-mail la care au fost
trimise mesajele.
Pentru a lupta împotriva acestui fenomen există programe specializate pentru
înlăturarea din căsuţa poştală a e-mail-urilor nesolicitate, pe baza filtrelor ce pot fi
stabilite pentru anumite cuvinte sau grupuri de cuvinte ce s-ar putea afla în interiorul sau
în subiectul (Subject) acestor mesaje.
Deoarece mesajele e-mail pot fi formatate html (format care permite inserarea de
diferite script-uri realizate în alte limbaje) sau pot fi însoţite de fişiere ataşate, există
permanent pericolul infectării pe această cale cu viruşi informatici, cu „viermi de reţea”
sau cu „cai troieni”. În acest sens se recomandă atenţie sporită la deschiderea unor mesaje
e-mail primite de la adrese necunoscute sau la consultarea fişierelor ataşate, care pot
declanşa instalarea unor viruşi informatici, „cai troieni” etc în calculatorul gazdă.
Se recomandă existenţa pe calculatorul personal a unui program antivirus
performant, actualizat permanent (on line) cu ultimele „semnături” de viruşi informatici
nou apăruţi şi a unui program de tip firewall.

Formarea şi structura adreselor de e-mail

O adresa e-mail este compusă:
1. dintr-un şir de caractere care identifică numele utilizatorului, urmat de
2. semnul @, urmat de
3. numele domeniului (serverului e-mail) unde există contul.

Exemple de adrese e-mail pot fi:

stanp@yahoo.com, stan.petre@comunicare.ro

Pe baza numelui de domeniu dintr-o adresă de e-mail se poate transfera mesajul

pe maşina destinatarului, iar pe baza numelui din adresă se realizează livrarea locală a
mesajului în căsuţa poştală a destinatarului.
O adresă e-mail nu poate conţine spaţii. Următorul mod de exprimare a acesteia
este greşit: stan petre @comunicare.ro.

30
Utilizarea aplicaţiei e-mail Outlook Express
Deschiderea unei aplicaţii e-mail se poate face din:
• Launchbar (bara de lângă meniul de start),
• din opţiunea corespunzătoare aflată în meniul de start sau
• prin intermediul unui shortcut existent în Desktop.

Cu un program de tip client e-mail, cum este Outlook Express, este posibil să
poată lucra mai utilizatori, fiecare dintre aceştia putând avea propria interfaţă Outlook şi o
securitate asigurată prin nume şi parolă care să nu permită decât un acces personalizat în
căsuţă poştală. Comutarea între diferite identităţi poate fi realizată prin intermediul
opţiunii Switch Identity din meniul File.

După ce un utilizator a intrat în aplicaţie, el poate să-şi deschidă secţiunea Inbox

foarte simplu, dând click pe această opţiune aflată în secţiunea Folders.

31
 Outlook Express permite deschiderea unuia sau mai multor mesaje e-mail din
Inbox se poate realiza dând double click pe titlul acestora din fereastra din partea dreaptă
sus în care există afişate mai multe câmpuri: From (de la cine a fost primit mesajul),
Subject şi data primirii. Acestea se vor deschide în ferestre separate.

Comutarea între mesajele deschise prin double click în ferestre separate, se poate
realiza activând ferestrele dorite printr-un click dat pe o porţiune din suprafaţa acestora
(dacă este vizibilă), sau selectându-le din Taskbar. Dacă se utilizează tastatura atunci
combinaţia de taste Alt-Tab oferă de asemenea posibilitatea selectării ferestrei mesajului
dorit.
Comutarea între mesaje se mai poate realiza dând click pe titlul mesajului sau prin
intermediul săgeţilor de direcţie sus şi jos acţionate în cadrul ferestrei mesajelor.
Întodeauna va fi deschis în secţiunea (fereastra) din dreapta jos, mesajul al cărui titlu este
selectat prin bara transparentă de culoare (albastră care îl acoperă).

32
 Adăugarea, ştergerea informaţiilor aferente mesajelor poate fi realizată prin
intermediul meniului contextual al barei de identificare a mesajelor din care va fi aleasă
opţiunea Columns. Această opţiune va disponibiliza un dialog cu acelaşi nume.
Dialogul Columns va permite alegerea informaţiilor aferente mesajelor e-mail
care vor fi afişate în coloanele din fereastra Inbox (dreapta sus) care conţine titlurile
mesajelor.

În partea stângă a aplicaţiei Outlook Express există

secţiunea (fereastra) Folders care permite crearea unor folder-e noi
(corespunzătoare unor anumite subiecte sau problematici) în care
pot fi mutate prin Drag & Drop mesajele dorite.
Mesajele nedorite pot fi şterse, ele ajungând în folder-ul
Deleted Items de unde pot fi recuperate printr-un mecanism similar
cu Recycle Bin din sistemului de operare Windows

Outlook Express permite crearea, actualizarea şi utilizarea unei liste de adrese

Address Book. În Toolbar există un buton cu acelaşi nume care face posibilă accesarea
listei. Apăsarea butonului Address Book din Toolbar permite crearea / actualizarea
agendei (listei) de adrese Address Book.

33
 Adăugarea unei noi adrese e-mail într-o listă de adrese se poate face apăsând
butonul New din Toolbar-ul dialogului Addres Book, sau prin intermediul secţiunii
Contacts (aflată în partea din stânga jos a aplicaţiei Outlook) apelând opţiunea New
Contact. Oricare dintre variante va lansa dialogul Properties care va oferi suport pentru
încărcarea în Address Book a unei noi adrese e-mail (şi a informaţiilor aferente acesteia).

Adăugarea în Address Book a unei adrese de e-mail dintr-un mesaj primit se

poate realiza dacă din meniul Tools se va alege opţiunea Add to Address Book.

34
Lucrul cu mesaje e-mail
Un mesaj e-mail poate fi trimis mai multor destinatari şi prin metodele Cc
(Carbon Copy) şi Bcc (Blind Carbon Copy). Utilizarea acestor metode are sens doar în
cazul în care se doreşte trimiterea unui mesaj la mai multe adrese de e-mail odată.
Spre deosebire de metoda Cc care permite ca toţi destinatarii să poată vedea
adresele de e-mail ale tuturor celor care au primit mesajul, metoda Bcc (Blind=orb) nu
permite acest lucru.
Adresele destinatarilor din câmpurile Cc şi Bcc pot fi completate în mod similar
cu felul în care s-au completat adresele e-mail din câmpul To:.
Sub Outlook Express câmpul Bcc va fi vizibil doar dacă din meniul View va fi
selectată opţiunea All Headers.

Crearea unui nou mesaj poate fi realizată prin apăsarea butonului New Mail din
Toolbar care va determina lansarea dialogului New Message specializat pentru crearea
mesajelor e-mail.

35
 După completarea câmpurilor Subject, To (eventual Cc) şi a conţinutului
mesajului, se va da click pe butonul Send (trimite) pentru trimiterea efectivă la adresa
(adresele) dorite.
Dacă s-a primit un mesaj e-mail acesta poate fi direct adresat sau poate fi un
mesaj e-mail transmis la mai multe persoane (adrese de e-mail) utilizându-se opţiunea Cc
(Carbon Copy). Carbon Copy se presupune că toate adresele de e-mail au fost înscrise
(de către expeditor) despărţite prin (;) în linia Cc.
Dacă se doreşte să se răspundă la mesajul primit prin returnarea totală sau parţială
a acestuia, având fiecare linie precedată de caracterul > există două posibilităţi:
• să se răspundă numai expeditorului şi pentru aceasta se va utiliza opţiunea Reply;
• să se răspundă atât expeditorului cât şi tuturor celor trecuţi în linia Cc, şi în acest sens
se va utiliza opţiunea Reply All.

În Toolbar există butoanele Reply şi Reply All iar în meniul contextual al

mesajului există aceleaşi opţiuni ce fac posibile aceste acţiuni.

În cadrul dialogului New Message (apelat prin intermediul butonului New Mail)
există un câmp de editare To: special destinat pentru inserarea adresei destinatarului sau a
adreselor mai multor destinatari despărţite prin (;). Adresa sau adresele destinatarilor pot
fi introduse prin editare directă în câmpul To: sau în cazul în care se apasă butonul To: ,
prin alegere dintr-un dialog de selecţie (Select Recipients) a adreselor e-mail care există
deja memorate acolo.

36
 Se recomandă ca orice mesaj e-mail să aibă înscris în câmpul Subject un titlu (o
descriere succintă a conţinutului). Inserarea unui titlu în acest câmp se poate face prin
editare de la tastatură sau prin intermediul mecanismului Copy & Paste.
De multe ori se simte nevoia ca unele mesaje primite să fie marcate (flag mark)
pentru că sunt foarte importante sau pentru a fi referite ulterior. Sub Outlook Express este
posibil ca în dreptul lor să fie plasat un steguleţ roşu. Dacă se va da click în coloana steag
(flag) din dreptul mesajului dorit, acesta va putea fi marcat cu un steguleţ iar dacă
mesajul este deja marcat, atunci se va demarca. Aceeaşi acţiune va putea fi realizată şi
prin intermediul meniului Message.
Atunci când se creează un mesaj e-mail, în Toolbar-ul ferestrei de redactare
există butonul Attach care dacă va fi acţionat va lansa un dialog Insert Attachment ce va
permite alegerea fişierelor ce vor fi ataşate mesajului.

În timpul redactării unui mesaj sau înainte ca el să fie transmis, prioritatea

acestuia se poate seta prin intermediul meniului Message. Prioritatea unui mesaj poate fi
înaltă (High), normală (Normal) sau scăzută (Low). O altă posibilitate de a schimba
prioritatea mesajului o mai oferă şi butonul Priority din Toolbar.

Prin facilitatea Forward un mesaj primit poate fi "trimis mai departe" unor alţi
utilizatori (care nu se aflau in lista destinatarilor mesajului original). Mesajul original nu
poate fi modificat.

37
 Pentru forward-area unui mesaj e-mail se poate utiliza butonul cu acelaşi nume
din Toolbar sau meniul contextual al mesajului.

Căutarea unui mesaj dintr-un folder poate fi realizată după unul sau mai multe
criterii cum sunt:
• numele expeditorului (câmpul From);
• numele destinatarului (câmpul To);
• un text din câmpul Subject;
• un text din câmpul Message;
• un interval de timp.

Butonul Find (găseşte) din Toolbar pune la dispoziţie un dialog special numit
Find Message (mesaje descoperite) care permite realizarea acestor căutări.

Mesajele din fereastra de identificare a mesajelor (afişată în dreapta sus), pot fi

sortate crescător sau descrescător, după oricare din câmpurile (coloanele Received, From,
Subject etc) aflate în bara de identificare a mesajelor, dacă se dă click în numele acestor
coloane (câmpuri) sau dacă se accesează meniul contextual al fiecărei coloane.

De asemenea poate fi schimbată şi ordinea coloanelor de afişare. Întotdeauna

coloana cea mai importantă va fi plasată cel mai în stânga. Ordinea de afişare a
coloanelor (câmpurilor) poate fi realizată prin Drag & Drop asupra numelor acestora din
bara de identificare a mesajelor, sau prin intermediul opţiunii Columns din meniul
contextual al acestei bare. Dacă de exemplu se doreşte o sortare dublă după numele
expeditorului şi apoi după data primirii mesajelor, va trebui schimbată ordinea câmpurilor
From şi Received, apoi solicitat Sort ascending pentru From şi în cele din urmă pentru
Received.

38
 Pentru a tipări la imprimantă un mesaj, se poate solicita opţiunea Print din meniul
File sau se poate apăsa butonul Print din Toolbar. Această acţiune va determina lansarea
dialogului Print prin intermediul căruia vor putea fi stabilite configurările dorite înainte
de listare. Astfel se va putea stabili dacă se va tipări întregul mesaj sau numai o selecţie,
numărul de copii şi paginile (sau intervalul de pagini) ce se vor lista.

39
6. Îndrumar metodologic privind realizarea proiectului
1. Obiectivul
- Crearea unui site pentru prezentarea Internet a imaginii unei organizaţii publice sau
private (de preferat reală şi nu ipotetică).

2. Alegerea organizaţiei
- Studenţii se vor orienta către acele firme sau organizaţii care vor accepta colaborarea
cu ei pe perioada realizării proiectului. Pot fi firme sau organizaţii:
o la care studenţii sunt angajaţi sau lucrează în colaborare;
o pe care studenţii le cunosc foarte bine;
o care acceptă realizarea unui site de către studenţi pe o perioadă determinată.

3. Documentarea în vederea realizării proiectului presupune:

- interviuri cu managerii organizaţiei, cu angajaţii, clienţii, partenerii despre scopul şi
activităţile organizaţiei;
- strângerea informaţiilor sub formă de text, imagini, sunete, videoclipuri etc. legate de
organizaţie;
- strângerea de sigle, logo-uri, adrese, listă de parteneri, oferte de produse etc.
- alegerea unor fonturi şi culori favorite.

4. Proiectarea presupune:
- stabilirea conţinutului fiecărei pagini Web, a imaginilor şi a legăturilor dintre acestea;
- stabilirea elementelor constituente ale paginii principale (Home page);
- stabilirea unei hărţi a site-ului;
- stabilirea aplicaţiilor care vor utilizate pentru realizarea paginilor Web (editoare
HTML, editoare grafice.

5. Implementarea proiectului presupune:

- optimizarea imaginilor pentru Web (orice imagine va fi sub 30K);
- crearea paginilor Web, inserarea imaginilor şi a legăturilor;
- introducerea caracterelor diacritice româneşti dacă site-ul va fi în limba română;
- introducerea datelor legate de autorul proiectului.

6. Testarea proiectului presupune:

- corectarea textului, a legăturilor;
- verificarea funcţionării corecte pe mai multe computere, având monitoare de rezoluţii
diferite (800 x 600 pixeli, 1024 x 768 pixeli etc), utilizând mai multe browsere
(Internet Explorer, Netscape Navigator etc).

7. Predarea proiectului presupune:

- alegerea suportului pe care va fi prezentat (dischete sau CD);
- alegerea datei de predare (zi programată pentru examen).

40
7. Limbajul HTML
Structura standard a unui fişier HTML
Editaţi cu un editor de texte simplu (Notepad) următorul conţinut şi salvaţi-l sub numele
e1_1.html.

<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
Prima pagină standard
</body>
</html>

Încărcaţi fişierul în browser-ul favorit pentru a-l vizualiza. Acesta va afişa:

Observaţii:

• Un document HTML este format din text şi marcaje (tag-uri). Textul conţine
informaţia care va fi afişată în pagina Web iar marcajele precizează modul în care
acest text va fi afişat sau permit includerea în pagina a altor elemente (butoane,
link-uri, imagini, sunete etc.).

41
 • Un marcaj (tag) poate fi format din:
a) Caracterul "<";
b) Caracterul "/" dacă marcajul este un marcaj final;
c) Un cuvânt cheie (numele tag-ului);
d) O listă de forma "atribut=valoare" dacă tag-ul are atribute;
e) Caracterul ">".
Exemple de marcaje: <html>, </html>, <body text=”red” bgcolor=”green”> unde
"html" şi "body" sunt elemente, "text" şi "bgcolor" sunt atribute iar "red" şi "green"
sunt valori.
• Un document "html" standard constă dintr-un bloc <html>…</html> care include
alte două sub-blocuri: <head>…</head> şi <body>…</body>.
• Blocul <body>…</body> cuprinde conţinutul propriu-zis al paginii "html" adică
ceea ce va fi afişat în fereastra browser-ului;
• Fără a fi obligatoriu se consideră elegant dacă fiecărui document HTML i se adaugă
un titlu. Acest lucru se realizează cu ajutorul unui bloc <title>…</title> inserat în
blocul <head>…</head>. Dacă blocul <title>…</title> lipseşte într-o pagină html
atunci în bara de titlu a ferestrei browser-ului va apărea numele fişierului.
• Un tag poate fi scris atât cu litere mari cât şi cu litere mici;
• Caracterele "spaţiu" şi "tab" multiple (succesive) sunt echivalate cu un singur
caracter "spaţiu". Caracterele "CR" şi "LF" sunt ignorate de către browser.

Sfârşitul de linie

Să admitem că dorim să apară în pagina Web (adică în ceea ce va afişa browser-

ul) mai multe linii. Dacă vom crea următorul fişier sub forma:
<html>
<head>
<title>
Acesta este titlul primei pagini
</title>
</head>
<body>
Prima linie
A doua linie
A treia linie
</body>
</html>

atunci browser-ul va afişa "Prima linieA doua linieA treia linie" întrucât conform unei
observaţii făcute mai sus caracterele de felul "CR/LF" sunt ignorate de browser. Trecerea
pe o linie nouă se face numai la o comandă explicită care trebuie să apară în pagina html.
Această comandă este marcajul <br> (de la "break line"=sfârşit de rând).
Pentru a funcţiona conform aşteptărilor fişierul trebuie modificat astfel:

42
 <html>
<head>
<title>
Acesta este titlul primei pagini
</title>
</head>
<body>
Prima linie<br>
A doua linie<br>
A treia linie
</body>
</html>

Blocuri preformatate

Pentru ca browser-ul să interpreteze corect caracterele "spaţiu", "tab" şi "CR/LF"

ce apar în cadrul unui text acest text trebuie inclus într-un bloc <pre>…</pre> ca în
exemplul de mai jos.
Obs: În mod implicit textul cuprins într-un bloc <pre>…</pre> este afişat cu caractere
"monospace" (monospaţiate).
Salvaţi acest fişier ca "e1_5.html" şi încarcaţi-l în browser pentru a-l vizualiza.
Pentru a observa facilităţile oferite de un bloc <pre>…</pre> testaţi următorul
<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
<pre>
Prima linie
A doua linie indentata
A treia linie de doua ori
indentata
</pre>
</body>
</html>

exemplu distractiv:

<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
<pre>
(oo)
\/||\/
_||_
</pre>
</body>
</html>

43
 Eliminaţi tag-urile <pre> şi </pre>, salvaţi din nou fişierul şi observaţi
modificările!
Veţi constata că browser-ul va afişa secvenţa "(oo)\/||\/_||_" pe o singură linie.

Observaţii importante

• Un document (fişier) HTML are extensia ".html" sau ".htm". El se numeşte şi fişier
sursă.
• Un browser încarcă un document HTML (un fişier sursă), interpretează marcajele
conţinute în document iar rezultatul este afişat în fereastra browser-ului. Acest
rezultat al interpretării se numeşte "pagină Web".
• Un document conţine marcaje (comenzi sau tag-uri). Există două tipuri de marcaje
sau tag-uri:
(a) De tip "bloc" (pereche) conform sintaxei <nume_tag>bloc de elemente
</nume_tag> caz în care acţiunea precizată de numele tag-ului şi atributele
acestuia are efect asupra blocului de elemente.
(b) De tip "solitar" (nepereche); de exemplu <br>.
• Un marcaj (un tag) este delimitat de parantezele "<" şi ">".
• Sunt "case-insensitive" adică pot fi scrise atât cu litere mici cât şi cu litere mari:
(a) Numele tag-urilor;
(b) Numele atributelor;
(c) Valorile atributelor.
• O pagină html standard este formată dintr-un bloc extern <html>…</html> şi două
blocuri incluse: <head>…</head> (cap) şi <body>…</body> (corp).
• Trecerea la o linie nouă se face cu ajutorul tag-ului <br> (break).
• Afişarea întocmai a conţinutului unui bloc de text din fişierul sursă se face incluzând
acest bloc între tag-urile <pre> şi </pre> (preformatat).

Culori, fonturi şi margini

În acest capitol vom fi descrise setările de bază ale unei pagini Web: alegerea
culorii de fond, a culorii textului şi alegerea dimensiunilor paginii.

Culoarea de fond
Acest exemplu ne va arăta cum să alegem culoarea de fond a paginii Web.
O culoare poate fi precizată în două moduri:
1. Printr-un nume de culoare. Cel puţin următoarele 16 nume de culori sunt disponibile:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white şi yellow. În Anexa "Nume de culori" veţi găsi o listă mai completă cu
numele de culori disponibile.
2. Prin construcţia " #rrggbb" unde r,g sau b sunt cifre hexagesimale şi pot lua valorile:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f sau F. Se pot defini astfel
65536 de culori. S-a folosit aici modelul de culoare RGB (Red, Green, Blue).
Conform acestui model o culoare se obţine din amestecul a trei culori fundamentale:
roşu, verde şi albastru.

44
Obs: Este recomandat ca o culoare să fie delimitată prin două apostrofuri duble: "…".
Exemple: "blue" sau "#0f4eA8".
Culoarea unei pagini se precizează prin intermediul unui atribut al tag-ului
<body>.
Atributele sunt necesare pentru a particulariza acţiunea precizată de numele tag-
ului. Aceste atribute apar în interiorul parantezelor ce delimitează tag-ul după sintaxa:
<tag atribut=valoare>.
De exemplu culoarea fondului paginii Web este setată prin atributul "bgcolor" al
tag-ului <body>. <body bgcolor=culoare> unde culoare se construieşte după modelul
precizat mai sus.
Pentru a realiza o pagină Web cu fondul de culoarea galbenă putem proceda
astfel:

<html>
<head>
<title>
Exemplul 2_1
</title>
</head>
<body bgcolor="yellow">
Aceasta este o pagina web<br>
cu fondul de culoarea galbena.
</body>
</html>

Culoarea textului
Acest exemplu ilustrează cum poate fi setată culoarea textului unei pagini Web.
Acest lucru se face prin intermediul atributului "text" al tag-ului <body> după
sintaxa:
<body text=culoare> unde "culoare" se precizează ca la exemplul 2_1. Pagina Web
următoare are textul de culoarea roşie.

<html><head><title>Exemplul 2_2</title>
</head>
<body text="red">
Aceasta este o pagina web cu textul de
culoarea rosie.
</body></html>

Atribute multiple
Un tag poate avea mai multe atribute. De exemplu un tag cu trei atribute arată
astfel:
<tag atribut1=valoare1 atribut2=valoare2 atribut3=valoare3>.

Următorul exemplu prezintă modul de construire al unei pagini Web cu fondul de

culoare galbenă şi textul de culoare roşie:

45
 <html><head>
<title>Exemplul 2_3</title></head>
<body bgcolor="yellow" text="red">
Aceasta este o pagina web cu fondul de
culoarea galbena<br>
si textul de culoarea rosie.
</body></html>

Setarea fontului de bază

Pentru afişarea unui text într-o pagină Web se utilizează un font (adică un tip de
litere) care este caracterizat de:
• Mărime (prin atributul "size");
• Culoare (prin atributul "color");
• Font utilizat (prin atributul "style").
Acestea sunt atribute ale tag-ului <basefont>. Acesta este un tag nepereche (nu
există delimitator de sfârşit de bloc).
Sintaxa utilizată este:
<basefont size=număr color=culoare style=font>
unde:
• număr poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic şi 7 pentru fontul cel
mai mare);
• culoare este o culoare precizată prin nume sau printr-o construcţie RGB (vezi primul
paragraf).
• font poate fi un font generic ca "serif", "sans-serif", "cursive", "monospace", "fantasy"
sau poate fi un font specific instalat pe computerul clientului ca "Times New Roman",
"Helvetica" sau "Arial". Se acceptă ca valoare şi o listă de fonturi separate prin "," de
exemplu: "Times Roman, serif, monospace".
Observaţie:
• Domeniul de valabilitate al setărilor precizate de acest tag este din locul în care apare
pâna la sfârsitul paginii sau până în locul în care apare alt tag <basefont>.
• Dacă tag-ul <basefont> lipseşte atunci textul în pagina Web are atribute implicite s-au
atribute precizate de browser-ul utilizat.
Atributele implicite sunt: size=3, color="black" şi style="Times New Roman".
În exemplul următor textul paginii Web are la început atribute implicite după care este
setat la "Arial", "green", 7.
<html><head>
<title>Exemplul 2_4</title></head>
<body>
Prima parte a prezentei pagini textul
are atribute implicite.<br>
<basefont style="Arial" color="green"
size=7>
A doua parte a paginii textul este scris
cu fontul "Arial", culoarea verde si
marimea 7.
</body></html>

46
Setarea marginilor paginii Web

Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se

poate face cu ajutorul a două atribute ale tag-ului <body>:
• "leftmargin" (setează distanţa dintre marginea din stânga a ferestrei browser-ului şi
marginea din stânga a conţinutului paginii);
• "topmargin" (setează distanţa dintre marginea de sus a ferestrei browser-ului şi
marginea de sus a conţinutului paginii);.
Observaţie: Ambele atribute pot primii următoarele valori posibile:
• un număr întreg pozitiv reprezentând o distanţă măsurată în pixeli;
• un procent din lăţimea respectiv înălţimea ferestrei browser-ului.

<html><head>
<title>Exemplul 2_5</title></head>
<body leftmargin="100" topmargin="20%">
Prima parte a prezentei pagini textul
are atribute implicite.<br>
<basefont style="Arial" color="green"
size=7>
A doua parte a paginii textul este scris
cu fontul "Arial", culoarea verde si
marimea 7.
</body></html>

Stiluri pentru blocurile de text

În acest capitol sunt prezentate posibilităţile oferite de limbajul HTML pentru a
alege un stil pentru caracterele ce formează textul paginii Web.

Caractere îngroşate
Pentru ca un fragment de text să apară în pagină evidenţiat (îngroşat) el trebuie
inclus între delimitatorii <b> şi </b> (b vine de la "bold" = îngroşat).

<html><head><title><Exemplul
3_1</title></head><body>
Aceasta linie este formata din text
normal.<br>
<b>Aceasta linie este scrisa in
intregime cu caractere ingrosate.</b>
In aceasta linie numai cuvantul
<b>gros</b> este ingrosat.
</body></html>

Caractere mărite
Pentru ca un fragment de text să fie format din caractere cu o unitate mai mare
decât cea curentă acest fragment trebuie inclus într-un bloc delimitat de tag-urile: <big>
şi </big>.
Observaţie: Blocurile <big>…</big> pot fi imbricate.

47
 <html><head><title><Exemplul
3_2</title></head><body>
Aceasta linie este formata din text
normal.<br>
<big>Aceasta linie este scrisa in
intregime cu caractere marite cu o
unitate.</big></br>
Normal <big>marit <big>mai mare <big>si
mai mare.</big></big></big>
</body></html>

Caractere micşorate
Pentru ca un fragment de text să fie format din caractere cu o unitate mai mici
decât cea curentă acest fragment trebuie inclus într-un bloc delimitat de tag-urile:
<small> şi </small>.
Observaţie: Blocurile <small>…</small> pot fi imbricate.

<html><head><title><Exemplul
3_3</title></head><body>
Aceasta linie este formata din text
normal.<br>
<small>Aceasta linie este scrisa in
intregime cu caractere micsorate cu o
unitate.</small></br>
Normal <small>mai mic<small>si mai
mic.</small></small><br>
Normal <small>mai mic <big>normal
<big>mai mare</big></big></small>
</body></html>

Caractere înclinate spre dreapta

Pentru ca un fragment de text să fie format din caractere înclinate spre dreapta
acest fragment trebuie inclus într-un bloc delimitat de tag-urile: <i> şi </i> (i vine de la
italic).

<html><head><title><Exemplul
3_4</title></head><body>
Aceasta linie este formata din text
normal.<br>
<i>Aceasta linie este scrisa in
intregime cu caractere italice.</i></br>
In aceasta linie numai fragmentul
<i>aplecat spre dreapta</i> este italic.
</body></html>

Caractere "sub-" şi "super-script"

Pentru a insera fragmente de text aliniate "sub-script" şi "super-script" aceste
fragmente trebuie delimitate de tag-urile  respectiv .
Următorul exemplu arată cum pot fi introduse fragmente de text sub-scrip şi
super-script. Pentru a exemplifica mai bine în rândul al treilea al paginii Web vom găsi
următorul text specific limbajului matematic: F(y)=(x1+x2)2-y3. Urmăriţi cu atenţie fişierul
sursă următor:

48
 <html><head><title><Exemplul
3_5</title></head><body>
Aceasta linie este formata din text
normal.<br>
In aceasta linie ^sus este
superscript iar _jos este
subscript.<br>
F_(y)=(x₁+x<sub>2</
sub>)²-y³
</body></html>

Caractere subliniate şi caractere "tăiate de o linie"

În exemplul următor sunt introduse două tag-uri de tip bloc (pereche):
• <u> şi </u> pentru a insera un bloc de caractere subliniate;
• <strike> şi </strike> sau <s> şi </s> pentru a insera un bloc de caractere secţionate pe
la mijloc cu o linie orizontală.
<html><head><title><Exemplul
3_6</title></head><body>
Aceasta linie este formata din text
normal.<br>
<strike>Aceasta linie este in intregime
sectionata de o linie
orizontala.</strike><br>
In aceasta linie <u>underline</u> este
subliniat iar <s>strike</s> este
sectionat.
</body></html>

Stiluri fizice şi stiluri logice

Până în acest moment au fost prezentate 8 stiluri de scriere a caracterelor unui
bloc de text numite şi stiluri fizice întrucât nu s-a acordat nici o atenţie semnificaţiei
informaţiei conţinută de aceste blocuri.
În continuare sunt prezentate stilurile logice utilizate la formatarea unui bloc.
Aceste stiluri ţin cont de semnificaţia pe care blocul o are în cadrul paginii Web.
Observaţie: Stilurile logice se bazează pe stilurile fizice iar modul lor de acţiune depind
de browser-ul utilizat.

Blocuri evidenţiate
În exemplul următor sunt introduse alte două tag-uri pentru a pune în evidentă (a scrie
în italic) fragmente de text:
• <cite> şi </cite> ("cite" înseamnă citat);
• <em> şi </em> (em vine de la "emphasize"=a evidenţia).
Observaţie: În locul lor se poate utiliza tag-ul echivalent <i>…</i>.

<html><head><title><Exemplul
3_7</title></head><body>
Aceasta linie este formata din text
normal.<br>
Colegiul National <cite>"Mihai
Viteazul"</cite> din Bucuresti<br>
este unul dintre <em>liceele de
traditie</em> din Romania.
</body></html>

49
Blocuri de caractere monospaţiate
În continuare sunt prezentate trei tag-uri cu efecte similare. Ele permit scrierea
fragmentelor de text cu caractere monospaţiate (de tip maşină descris):
• <code> şi </code> ("code" înseamna cod sau sursă);
• <kbd> şi </kbd> (kbd vine de la "keybord"=tastatură);
• <tt> şi </tt> (tt vine de la "teletype"=teleprinter).

<html><head><title><Exemplul
3_8</title></head><body>
Aceasta linie este formata din text
normal.<br>
Codul functiei f(x,y) este:
<code>Function f(x,y) {return
x+y;}</code><br>
Tastati urmatoarea comanda DOS:
<kbd>copy c:\windows\* c:\temp</kbd><br>
<tt>Asa scrie un teleprinter</tt>
</body></html>

Blocuri de caractere clipitoare

În exemplul următor apare tag-ul de tip bloc <blink>…</blink> care delimitează
fragmente de text ce clipesc.
Obs: Acest tag este funcţional numai în browser-ul Netscape Communicator.

<html><head><title><Exemplul
3_9</title></head><body>
Aceasta linie este formata din text
normal.<br>
<blink>Linia acesta
clipeste.</blink><br>
In aceasta linie fragmentul
<blink>on/off</blink> clipeste.
</body></html>

Imbricarea tag-urilor
Acest exemplu ne arată că tag-urile pot fi imbricate. De exemplu:
• un fragment de text poate fi scris îngroşat şi italic în acelaşi timp;
• un fragment de text poate fi subliniat, superscript, mărit şi italic în acelaşi timp.
Blocul <q>…</q> permite inserarea in-line a citatelor. Aceste citate sunt afişate de către
browser în italic.
Observaţie:
• Blocurile "q" pot fi imbricate ca în exemplul următor;
• "q" vine de la "in-line quotation" (citate inserate in-line).

<html><head><title><Exemplul 3_11</title></head><body>
Maria povesti mai departe <q>M-am intors catre Mihai si l-am intrebat<q> Mergi
maine la concert!</q> <q>Nu.</q> mi-a raspuns el.</q> In acest moment Maria se opri
pentru o clipa.
</body></html>

50
Setarea fonturilor
În acest capitol veţi învăţa cum să alegeţi caracterele (fonturile) cu care să scrieţi
blocuri de text personalizate în cadrul unei pagini Web.
Un font este caracterizat de următoarele atribute:
• Culoarea (setată prin atributul "color");
• Tipul sau stilul (setat prin atributul "face");
• Mărimea (setată prin atributul "size");
• Mărimea în puncte tipografice (setată prin atributul "point-size");
• Grosimea (setată prin atributul "weight").
Toate aceste atribute aparţin elementului <font> care permite inserarea de blocuri de texte
personalizate.

Culori
O culoare poate fi precizată în două moduri:
• Printr-un nume de culoare. Cel puţin următoarele 16 nume de culori sunt disponibile:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white şi yellow. În anexa "Nume de culori" este prezentat un tabel mai complet
cu numele de culori disponibile.
• Printr-o constantă conformă standardului de culoare RGB (Red, Green, Blue). O
astfel de constanta se formează astfel: #rrggbb unde r, g sau b sunt cifre
hexazecimale. Cifrele hexazecimale sunt următoarele: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a,
A, b, B, c, C, d, D, e, E, f şi F. Numărul total de culori posibile este de 65536.
Exemple de culori RGB: #ff0000 este roşu (red), #00ff00 este verde (green), #0000ff este
albastru (blue), #ffffff este alb (white), #000000 este negru (black), #28a7Fc este o
culoare oarecare validă.

Culoarea unui font

Pentru a scrie un fragment de text cu caractere de o anumită culoare se încadrează
acest fragment prin delimitatorii <font> şi </font>, tag-ul <font> având setat atributul
color la valoarea necesară:
<font color=culoare>fragment de text de culoarea specificată</font>.

<html><head><title>Exemplul
4_1</title></head><body>
Aceasta linie este scrisa cu caractere
normale.<br>
<font color="red">Aceasta linie este
rosie.</font><br>
Aici <font color="red">fiecare</font>
<font color="green">cuvant</font>
<font color="yellow">are</font> <font
color="00ff00">alta</font>
<font
color="0048Ae">culoare.</font><br>
M<font color="olive">o</font><font
color="gray">z</font><font
color="cyan">a</font>
<font color="magenta">i</font><font
color="0f0e0d">c.</font>
</body></html>

51
Familia fontului
Pentru a scrie un text într-o pagină Web pot fi folosite mai multe fonturi (stiluri de
caractere).
Există cinci familii generice de fonturi care sunt de regulă disponibile pe toate
computerele utilizatorilor: "serif", "sans-serif", "cursive", "monospace" şi "fantasy".
Alte fonturi mai specifice pot fi utilizate dacă acestea sunt disponibile pe
computerul client ca de exemplu: "Times" (un tip particular de "sans-serif"), "Helvetica"
(un tip particular de "serif"), "Arial", "Courier" (un tip particcular de "monospace"),
"Western" (un tip particular de "fantasy") şi altele.
Tipul de font necesar poate fi setat prin atributul "face" al tag-ului <font>. Pot fi
introduse mai multe fonturi separate prin virgulă.
Exemplu: <font face="Arial, serif, monospace">. În acest caz browser-ul îl va
utiliza pe primul font pe care îl va recunoaşte.

<html><head><title>Exemplul
4_2</title></head><body>
Aceasta linie este scrisa cu caractere
normale.<br>
<font face="monospace">Linie scrisa cu
caractere monospatiate</font><br>
<font face="Arial">Linie scrisa cu
caractere Arial</font><br>
<font face="TimesRoman, sans-
serif">Linie scrisa cu caractere
TimesRoman sau sans-serif</font><br>
</body></html>

Mărimea fontului
Pentru a seta mărimea unui font se utilizează atributul "size" al tag-ului <font>.
Valorile acestui atribut pot fi:
• 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font şi 7 pentru cel mai mare);
• +1, +2, etc pentru a creşte mărimea fontului cu 1, 2, etc faţă de valoarea curentă;
• -1, -2, etc pentru a micşora mărimea fontului cu 1, 2, etc faţă de valoarea curentă;

<html><head><title>Exemplul
4_3</title></head><body>
Aceasta linie este scrisa cu caractere
normale.<br>
<font size="6">Fonturi de marimea 6.
</font><br>
<basefont size="4">Fonturi de marimea
4. <br>
<font size="-3"> Fonturi de marimea 1.
</font><br>
<font size="+2">Fonturi de marimea 6.
</font><br>
</body></html>

52
 Mărimea unui font poate fi setată exact cu ajutorului atributului "point-size" al
tag-ului <font>. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive.
Numărul astfel precizat reprezintă marimea fontului în puncte tipografice.
Obs: Acest atribut funcţionează numai cu Netscape Communicator.

<html><head><title>Exemplul
4_4</title></head><body>
Aceasta linie este scrisa cu caractere
normale.<br>
<font point-size="10">Fonturi de
marimea 10 pt (puncte
tipografice).</font><br>
<font point-size="20">Fonturi de
marimea 20 pt.</font><br>
<font point-size="50">Fonturi de
marimea 50 pt.</font><br>
</body></html>

<html><head><title><Exemplul
3_10</title></head><body>
Aceasta linie este formata din text
normal.<br>
Normal <b>ingrosat <i>ingrosat si
italic</i> ingrosat</b> normal.<br>
Normal <u>subliniat <b>subliniat si
ingrosat <big>subliniat, ingrosat si
marit.<br>
<i>Subliniat, ingrosat, marit si
italic.</i></big></b></u>
</body></html>

Blocuri de text
În această lecţie veţi învăţa comenzi (tag-uri) la nivel de bloc de text. Toate aceste
marcaje produc automat trecerea la un rând nou şi adăugarea unui extra-spaţiu.
Aceste comenzi nu se referă la caracteristicile caracterelor ce compun textul ci se
referă la funcţiile pe care le poate avea un bloc de text în cadrul paginii Web.

Inserarea unei adrese

Dacă într-o pagină Web trebuie inclusă o adresă atunci putem utiliza facilitătile
oferite de un tag dedicat: <address>…</address>. Multe browser-e afişează conţinutul
cuprins între acesti delimitatori în italic, începând pe un rând nou.

<html><head><title>Exemplul
5_1</title></head><body>
Adresa institutiei noastre este:
<adddress>
Colegiul National Mihai Viteazul<br>
Bulevardul Pache Protopopescu Nr.
62<br>
Sector 2 Bucuresti Romania Europa
</address>
</body></html>

53
Observaţii: Blocurile de tip "adresă" includ informaţii despre persoana care a creat pagina
Web, adresa e-mail şi data creării acestei pagini. Aceste blocuri se plaseaza de obicei la
sfârşitul paginii Web dar pot apare şi la început.

Indentarea unui bloc

Pentru ca un bloc de text să fie indentat (marginea din stânga să fie decalată la
dreapta cu o anumită cantitate) acesta trebuie inclus între tag-urile <blockquote> şi
</blockquote>. Adesea browser-ele adaugă un spaţiu suplimentar înainte si după un
blockquote.

<html><head><title>Exemplul
5_2</title></head><body>
Constantin Brancusi obisnuia sa spuna:
<blockquote>
<i>Simplitatea</i> nu este un scop in
Arta, insa ajungi la simplitate fara
voia ta, apropiindu-te de sensul cel
real al lucrurilor. Simplitatea este in
sine o complexitate - si trebuie sa te
hranesti cu <i>esenta</i>, casa poti sa
ii intelegi valoarea.
</blockquote>
</body></html>

Blocul "div"
Modalitatea cea mai eficace de delimitare şi de formatare a unui bloc de text se
obţine prin folosirea delimitatorilor <div> şi </div>.
Un parametru foarte util pentru setarea caracteristicilor unui bloc <div>
(diviziune) este "align" (aliniere). Valorile posibile ale acestui parametru sunt:
• "left" (aliniere la stânga);
• "center" (aliniere pe centru);
• "right" (aliniere la dreapta).
<html><head><title>Exemplul
5_3</title></head><body>
Aceasta este o linie normala. Urmatorul
bloc este aliniat la dreapta:
<div align="right">
MOTTO:<br>
"Misiunea artei este sa creeze
<i>bucurie</i>;<br>
si nu se poate crea artistic decat<br>
in echilibru si in pace
sufleteasca…"<br>
<i>Constantin Brancusi</i>
</div>
Urmatorul bloc este aliniat pe centru:
<div align="center">
"De cand viata mea te stie,<br>
o suferinta port mereu;<br>
Frumusetea ta-i o poezie,<br>
pe care n-am facut-o eu."<br>
<i>Lucian Blaga: Catren</i>
</div>
</body></html>

54
Observaţii:
• Un bloc <div….</div> poate include alte sub-blocuri. În acest caz alinierea
precizată de atributul "align" al blocului "div" are efect asupra tuturor sub-
blocurilor incluse în blocul "div";
• Un bloc <div>…</div> admite atributul "nowrap" care interzice ruperea rândurilor
de către browser, lucrul acesta făcându-se numai acolo unde există marcaje care
solicită explicit acest lucru.

Blocuri "plaintext"
Într-un fişier html caracterele "<" şi ">" au o semnificaţie specială pentru browser.
Ele încadrează comenzile şi atributele de afişare a elementelor într-o pagină Web.
Dacă dorim ca un fragment de text să conţină astfel de caractere fără a avea
semnificaţia specială implicită acest fragment trebuie încadrat de una din perechile de
tag-uri:
• <xmp>…</xmp> (80 de caractere pe rând);
• <listing>…</listing> (120 de caractere pe rând).
De asemenea în ultima parte a unei pagini Web care începe cu marcajul <plaintext> nu
sunt interpretate marcajele HTML.
Observaţii:
• Aceste trei marcaje interpretează corect caracterele "spaţiu", "tag" şi "CR/LF".
• Textul afişat în pagina Web este monospaţiat.
<html><head><title>Exemplul
5_5</title></head><body>
Un fisier html standard arata astfel:
<xmp>
<html>
<head>
</head>
<body>
Prima pagina web!
</body>
</html>
</xmp>
</body></html>

Blocul paragraf
Am văzut la Exemplul 1_4 că trecerea la o linie nouă se face cu ajutorul tag-ului
<br>.
Acest lucru este posibil şi cu ajutorul tag-ului paragraf <p>. Spre deosebire de
acesta tag-ul <p> permite:
• inserarea unui extra-spaţiu înainte de blocul paragraf;
• inserarea unui extra-spaţiu după blocul paragraf dacă delimitatorul </p> există (acesta
fiind opţional).
• alinierea textului cu ajutorul atributului "align" având valorile posibile: "left",
"center" sau "right".

55
 <html><head><title>Exemplul 5_6</title></head><body>
Linia 1
<br>Linia 2 este generata de un break.
<p>Linia 3 este generata de un un paragraf. Implicit paragraful este aliniat la
stanga.
<p align ="right">Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf
aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.
Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la
dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat
la dreapta. </p>
<p align=center>Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf
aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf
aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf
aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. </p>
</body></html>

Blocuri "header"

Într-un text sunt necesare titluri (header-e) de capitole (paragrafe) de diferite

dimensiuni. Acestea pot fi introduse cu ajutorul tag-urilor <h1>, <h2>, <h3>, <h4>, <h5>
şi <h6>.
Observaţii:
• Toate aceste tag-uri se referă la un bloc de text şi trebuie însoţite de un tag de
încheiere similar, de exemplu: <h3>…</h3>.
• Aceste tag-uri acceptă atributul align pentru alinierea titlului blocului de text la stânga
(implicit), în centru şi la dreapta.
• Tag-ul <h1> permite scrierea unui titlu cu caracterele cele mai mari şi îngroşate pe
când <h6> permite scrierea unui titlu cu caracterele cele mai mici.
• Toate browser-ele introduc un extra-spaţiu înainte de a afişa un titlu.

56
 <html><head><title>Exemplul
5_7</title></head><body>
<h1 align="center">Titlu de marimea 1
aliniat in centru</h1>
<h2>Titlu de marimea 2 aliniat la
stanga (implicit)</h2>
<h3 align="right">Titlu de marimea 3
aliniat la dreapta</h3>
<h4 align="left">Titlu de marimea 4
aliniat la stanga</h4>
<h5>Titlu de marimea 5</h5>
<h6>Titlu de marimea 6</h6>
</body></html>

Linii orizontale
Într-o pagină Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul
tag-ului <hr>.
<html><head><title>Exemplul
5_8</title></head><body>
<h1 align="center">Linie
orizontala</h1>
<hr>
<h2>Linia orizontala are parametrii
impliciti</h2>
<hr>
</body></html>

Pentru a seta o linie orizontală se utilizează următoarele atribute ale tag-ului <hr>:
• "align" permite alinierea liniei orizontale. Valorile posibile sunt: "left", "center" şi
"right".
• "width" permite alegerea lungimii liniei. Valorile posibile pot fi:
(a) numere întregi pozitive reprezentând lungimea liniei în număr de pixeli;
(b) numere între 1 şi 100 urmate de semnul "%" reprezentând procentul din lăţimea
paginii pe care se întinde linia.
• "size" permite alegerea grosimii liniei. Valorile posibile sunt numere întregi
pozitive reprezentând grosimea liniei în pixeli (valoarea implicită este "2").
• "noshade" când apare setează o linie fără umbră;
• "color" permite setarea culorii liniei.
<html><head><title>Exemplul
5_9</title></head><body>
<h1 align="center">Tipuri de linii
orizontale</h1>
Urmeaza o linie implicita (aliniare
stanga, latime 100%, grosime 2, cu
umbra):
<hr>
Urmeaza o linie aliniata in centru, de
latime 50%, grosime 5 pixeli, fara
umbra:
<hr align="center" width="50%" size="5"
noshade>
Urmeaza o linie de latime 200 de
pixeli, aliniata la dreapta, grosime 10
pixeli, cu umbra:
<hr align="right" width="200"
size="10">
</body></html>

57
Blocul "center"
Blocul introdus de tag-urile <center> şi </center> aliniază la centru toate
elementele conţinute de el.
În exemplul următor este prezentat un mod de obţinere a unor efecte deosebite,
într-o pagină Web, cu unelte foarte simple.

<html><head><title>Exemplul
5_10</title></head><body>
<center>
<hr width=10%>
<hr width=40%>
<hr width=70%>
<hr width=100%>
<hr width=70%>
<hr width=40%>
<hr width=10%>
</center>
</body></html>

Liste
În acest capitol veţi învăţa cum pot fi introduse liste într-o pagină Web.

Liste neordonate
O listă neordonată de elemente este un bloc de text delimitat de tag-urile
corespondente <ul> şi </ul> ("ul" vine de la "unordered list"=listă neordonată). Fiecare
element al listei este iniţiat de tag-ul <li> (list item).
Observaţii:
• Lista va fi identată faţă de restul paginii Web;
• Fiecare item al listei începe pe un rând nou.

<html><head><title>Exemplul
6_1</title></head><body>
<h1 align="center">Exemplul 6_1</h1>
<hr>
<h2>O lista neordonata</h2>
<ul>Seria INTERNET va cuprinde
urmatoarele carti:
<li>HTML prin exemple
<li>JavaScript prin exemple
<li>Java prin exemple
</ul>
<body><html>

Observaţii:
• Elementele <h1>, <h2> şi <hr> au fost utilizate în acest exemplu pentru ca pagina
Web să aibă un aspect cât mai plăcut.
Tag-urile <ul> şi <li> pot avea un atribut "type" care să seteze caracterul ce
prefixează fiecare element al listei. Valorile posibile ale acestui atribut sunt:
• "circle" (cerc) pentru "Ο";

58
 • "disc" (disc plin) pentru " " (valoarea implicită);
• "square" (pătrat) pentru "".

<html><head><title>Exemplul
6_2</title></head><body>
<h1 align="center">Exemplul 6_2</h1>
<hr>
<h2>O lista neordonata</h2>
<ul type="square">Seria INTERNET va
cuprinde urmatoarele carti:
<li>HTML prin exemple
<li>JavaScript prin exemple
<li>Java prin exemple
</ul>
<body><html>

Listele neordonate pot fi imbricate pe mai multe niveluri ca în exemplul de mai

jos:

<html><head><title>Exemplul 6_3</title>
</head><body>
<h1 align="center">Exemplul 6_3</h1>
<hr>
<h2>O lista neordonata de liste
neordonate</h2>
<ul>Elemente si atribute ale unei
pagini html:
<li>body <ul>Atribute:
<li>bgcolor
<li>text
</ul>
<li>font <ul>Atribute:
<li>face
<li>size
<li>color
</ul>
</ul>
<body><html>

Liste ordonate
O listă ordonată de elemente este un bloc de text delimitat de tag-urile
corespondente <ol> şi </ol> ("ol" vine de la "ordered list"=listă ordonată). Fiecare
element al listei este iniţiat de tag-ul <li> (list item).
Observaţii:
• Lista va fi identata faţă de restul paginii Web;
• Fiecare item al listei începe pe un rând nou.

<html><head><title>Exemplul
6_4</title></head><body>
<h1 align="center">Exemplul 6_4</h1>
<hr>
<h2>O lista ordonata</h2>
<ol>Pentru a realiza o pagina web
trebuie:
<li>creat un fisier de comenzi in
limbajul html;
<li>salvat fisierul cu extensia .html;
<li>incarcat fisierul html intr-un
browser.
</ol>
<body><html>

59
 Tag-urile <ol> şi <li> pot avea un atribut "type" care să seteze tipul de caractere
utilizat în ordonarea listei. Valorile posibile sunt:
• "A" pentru pentru secvenţa de ordonare: A, B, C, D, etc (litere mari);
• "a" pentru pentru secvenţa de ordonare: a, b, c, d, etc (litere mici);
• "I" pentru pentru secvenţa de ordonare: I, II, III, IV, etc (numere romane mari);
• "i" pentru pentru secvenţa de ordonare: i, ii, iii, iv, etc (numere romane mici);
• "1" pentru pentru secvenţa de ordonare: 1, 2, 3, 4, etc (numere arabe) (setarea
implicită).

<html><head><title>Exemplul
6_5</title></head><body>
<h1 align="center">Exemplul 6_5</h1>
<hr>
<h2>O lista ordonata cu cifre romane
mari</h2>
<ol type="I">Pentru a realiza o pagina
web trebuie:
<li>creat un fisier de comenzi in
limbajul html;
<li>salvat fisierul cu extensia .html;
<li>incarcat fisierul html intr-un
browser.
</ol>
<body><html>

Observaţii: Tag-ul <ol> poate avea un atribut "start" care să seteze valoarea iniţiala a
secvenţei de ordonare. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

<html><head><title>Exemplul
6_6</title></head><body>
<h1 align="center">Exemplul 6_6</h1>
<hr>
<h2>O lista ordonata cu litere mari
incepand cu valoarea C</h2>
<ol type="A" start="3">Pentru a realiza
o pagina web trebuie:
<li>creat un fisier de comenzi in
limbajul html;
<li>salvat fisierul cu extensia .html;
<li>incarcat fisierul html intr-un
browser.
</ol>
<body><html>

Tag-ul <li> poate avea un atribut "value" care să seteze valoarea pentru acel item.
Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

<html><head><title>Exemplul
6_7</title></head><body>
<h1 align="center">Exemplul 6_7</h1>
<hr>
<h2>O lista ordonata avand itemi setati
individual</h2>
<ol start="3">Repetati urmatorii pasi
ai algoritmului:
<li>salvati fisierul;
<li value="5">incarcati fisierul in
browser;
<li>schimbati browser-ul utilizat.
</ol>
<body><html>

60
 Listele ordonate pot fi imbricate între ele sau cu listele neordonate ca în exemplul
următor:

<html><head><title>Exemplul
6_8</title></head><body>
<h1 align="center">Exemplul 6_8</h1>
<hr>
<h2>O lista ordonata de liste ordonate
si neordonate</h2>
<ol>Un sistem informatic include:
<li>Hardware:
<ol><li>placa de
baza<li>procesor <li>
memorie</ol>
<li>Softtware de baza: <ul> <li>
Windows <li> Unix <li>
Linux</ul>
<li> Software de aplicatie:
<ul type="disc"><li>AutoCad
<li>CorelDraw<li>
QuarkXPress</ul>
</ol>
<body><html>

Liste de definiţii
O listă de definiţii este este formata dintr-o succesiune de termeni, fiecare termen
fiind urmat de o definiţie a acestui termen.
Observaţii:
• Întreaga listă de definiţii se încadrează între tag-urile corespondente: <dl> şi </dl> (dl
vine de la "definition list"=listă de definiţii);
• Un termen al listei este iniţiat de tag-ul <dt> (dt vine de la "definition term"=termen
de definiţie);
• Definiţie a unui termen este iniţiată de tag-ul <dd> (dd vine de la "definition
description"=descrierea definiţiei);
• Definiţia unui termen începe pe o linie nouă şi este indentată.

<html><head><title>Exemplul
6_9</title></head><body>
<h1 align="center">Exemplul 6_9</h1>
<hr>
<h2>O lista de definitii</h2>
<dl>Glossar de termeni pentru INTERNET
<dt>Browser
<dd>Aplicatie ce ruleaza pe
computerul client o pagina html
<dt>Server WWW
<dd>Computer care raspunde la
cererile de pagini html emise de un
client
</dl>
<body><html>

61
Observaţii: Tag-urile <ul>, <ol> şi <dl> pot avea un atribut "compact" care permite
afişarea compactă a listei.
De exemplu în cazul unei liste de definiţii vom scrie: <dl compact>. Dacă acest
atribut este prezent (el nu ia mai multe valori) atunci definiţiile termenilor încep pe
aceeaşi linie cu termenii.

<html><head><title>Exemplul 6_10</title></head><body>
<h1 align="center">Exemplul 6_10</h1><hr>
<h2>O lista compacta de definitii</h2>
<dl compact>Glossar de termeni pentru INTERNET
<dt>Browser
<dd>Aplicatie ce ruleaza pe computerul client o pagina html
<dt>Server WWW
<dd>Computer care raspunde la cererile de pagini html emise de un client
</dl>
<body><html>

Tabele
Aşa cum s-a putut constata până acum posibilităţile de aranjare a textului într-o
pagina Web sunt limitate. Tabelele ne permit să creăm o reţea rectangulară de domenii,
fiecare domeniu având propriile setări pentru culoarea fondului, culoarea textului,
alinierea textului etc.

Un tabel simplu
Pentru a insera un tabel folosim tag-urile corespondente: <table> şi </table>
("table" înseamnă tabel).
Un tabel este format din rânduri. Pentru a insera un rând într-un tabel folosim tag-
urile: <tr> şi </tr> ("tr" vine de la "table row"=rând de tabel).
Observaţie:
• Folosirea tag-ului de sfârşit </tr> este opţională.
Un rând este format din mai multe celule ce conţin date. O celulă de date se
introduce folosind tag-ul <td> ("td" vine de la "table data"=date în tabel).

<html><head><title>Exemplul
7_1</title></head><body>
<h1 align="center">Exemplul 7_1</h1>
<h2>Un tabel simplu format din doua
linii si trei coloane</h2>
<table>
<tr>
<td>celula 11
<td>celula 12
<td>celula 13
<tr>
<td>celula 21
<td>celula 22
<td>celula 23
</table>
</body></html>

62
Un tabel cu chenar
În mod implicit un tabel nu are chenar. Pentru a adăuga un chenar unui tabel se
utilizează un atribut tag-ului <table> numit "border". Acest atribut poate primi ca valoare
orice număr întreg (inclusiv 0) şi reprezentă grosimea în pixeli a chenarului tabelului.
Observaţii:
• Atributul "border" poate să nu fie urmat de o valoare, caz în care tabelul va avea un
chenar de grosime implicită egală cu 1 pixel.
• O valoare egală cu "0" a grosimii chenarului semnifică absenţa chenarului;
• Când are grosime nenulă chenarul unui tabel un are aspect tridimensional.

<html><head><title>Exemplul
7_2</title></head><body>
<h1 align="center">Exemplul 7_2</h1>
<h2>Un tabel simplu format din doua
linii si trei coloane</h2>
<table border="5">
<tr><td>celula 11<td>celula
12<td>celula 13
<tr><td>celula 21<td>celula
22<td>celula 23
</table>
</body></html>

Alinierea tabelului în pagina Web

Pentru a alinia un tabel într-o pagină Web se utilizează atributul "align" al tag-ului
<table> cu următoarele valori posibile: "left" (valoarea implicită), "center" şi "right".
Alinierea unui tabel este importantă pentru textul ce înconjoară un tabel. Astfel:
• Dacă alinierea tabelului este la stânga (<table align="left">) atunci textul care
urmează după punctul de inserare al tabelelui se va scurge pe lângă tabel pe partea
dreaptă;
• Dacă alinierea tabelului este la dreapta (<table align="right">) atunci textul care
urmează după punctul de inserare al tabelelui se va scurge pe lângă tabel pe partea
stângă;
• Dacă alinierea tabelului este pe centru <table align="center">) atunci textul care
urmează după punctul de inserare al tabelelui va apare pe toată lăţimea paginii
imediat sub tabel.

<html><head><title>Exemplul 7_3</title></head><body>
<h1 align="center">Exemplul 7_3</h1>
<h2>Un tabel aliniat la dreapta</h2>
Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel.
<table border align="right">
<tr><td>celula 11<td>celula 12<td>
<tr><td>celula 21<td>celula 22<td>
</table>
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
</body></html>

63
 Temă: Copiaţi fişierul "e7_3.html" propus mai sus şi testaţi-l cu ajutorul unui
browser. Schimbaţi apoi alinierea tabelului la centru şi apoi la stânga şi observati
modificările care apar în pagina web.

Definirea culorilor de fond într-un tabel

Culoarea de fond se poate seta cu ajutorul atributului "bgcolor" care poate fi ataşat
întregului tabel prin tag-ul <table>, unei linii prin tag-ul <tr> sau unei celule de date prin
tag-ul <td>. Valorile pe care le poate primi atributul "bgcolor" sunt cele cunoscute pentru
o culoare.
Observaţie:
• Dacă în tabel sunt definite mai multe atribute "bgcolor" atunci ordinea priorităţii este
următoarea: <td>, <tr> şi <table> (cel mai puţin prioritar).

<html><head><title>Exemplul
7_4</title></head><body>
<h1 align="center">Exemplul 7_4</h1>
<h2>Un tabel colorat</h2>
<table border="3" bgcolor="yellow">
<tr><td>galben 11
<td bgcolor="green">verde 12
<tr bgcolor="red"><td>rosu 21
<td bgcolor="cyan">cyan 22
</table>
</body></html>

Observaţie: Culoarea textului din fiecare celulă poate fi setată cu ajutorul tag-ului:
<font color="valoare">…</font>.

Dimensionarea celulelor unui tabel

Distanţa dintre două celule vecine poate fi setată cu ajutorul atributului
"cellspacing" al tag-ului <table>.
Obs:
• Valorile acestui atribut pot fi întregi pozitivi, inclusiv "0" şi reprezintă distanţa în
pixeli dintre două celule vecine.
• Valoarea implicită a atributului "cellspacing" este "2".

64
 <html><head><title>Exemplul
7_5</title></head><body>
<h1 align="center">Exemplul 7_5</h1>
<h2>Un tabel fara chenar de celule
alipite</h2>
<table cellspacing="0">
<tr><td bgcolor="yellow" >galben 11<td
bgcolor="green">verde 12
<tr><td bgcolor="red">rosu 21<td
bgcolor="cyan">cyan 22
</table>
</body></html>

Distanţa dintre marginea unei celule si conţinutul ei poate fi setată cu ajutorul

atributului "cellpadding" al tag-ului <table>.
Observaţii:
• Valorile acestui atribut pot fi întregi pozitivi şi reprezintă distanţa în pixeli dintre
marginea unei celule si conţinutul ei.
• Valoarea implicită a atributului "cellpadding" este "1".

<html><head><title>Exemplul
7_6</title></head><body>
<h1 align="center">Exemplul 7_6</h1>
<h2>Un tabel de celule mari</h2>
<table border cellpadding="20">
<tr><td>galben 11<td>verde 12
<tr><td>rosu 21<td>cyan 22
</table>
</body></html>

Dimensionarea unui tabel

Dimensiunile unui tabel, lăţimea şi înălţimea pot fi setate exact prin intermediul a
două atribute "width" şi corespunzător "height" ale tag-ului <table>.
Valorile acestor atribute pot fi:
• Numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;
• Numere intregi între 1 şi 100 urmate de semnul "%" reprezentând fracţiunea din
lăţimea respectiv înălţimea totală a paginii.

<html><head><title>Exemplul
7_7</title></head><body>
<h1 align="center">Exemplul 7_7</h1>
<h2>Un tabel de 300 pixeli X 50%</h2>
<table border width="300" height="50%">
<tr><td>celula 11<td>celula 12
<tr><td>celula 21<td>celula 22
</table>
</body></html>

65
 Observaţii:
• Dacă dimensiunile precizate de atribute sunt mai mari decât cele necesare afişării
tabelului atunci vor fi folosite aceste dimensiuni precizate;
• Dacă dimensiunile precizate de atribute sunt mai mici decât cele necesare afişării
tabelului atunci tabelul va fi ajustat la dimensiunile necesare.
În exemplul următor se utilizează un truc care ne permite afişarea într-o pagină Web a
unui text poziţionat în centrul paginii. Pentru a realiza acest lucru se declară un tabel
mare cât întreaga pagină ce conţine o singură celulă. Textul din interiorul celulei este
aliniat implicit pe verticală centrat şi explicit pe orizontală de asemenea centrat.

<html>
<head>
<title>Exemplul 7_8</title>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align=center>
<h2>Text centrat.<h2>
</table>
</body>
</html>

Zona din jurul unui tabel

Am văzut în exemplul 7_3 modul în care curge un text în jurul unui tabel aliniat
într-o pagină Web. Distanţa dintre tabel şi celelalte elemente din pagina Web poate fi
setată cu ajutorul atributelor "hspace" şi "vspace" ale tag-ului <table>.
Observaţii:
• Valoarea atributului "hspace" poate fi orice număr întreg pozitiv, inclusiv "0" şi
reprezintă distanţa pe orizontală dintre tabel şi celelalte elemente ale paginii Web;
• Valoarea atributului "vspace" poate fi orice număr întreg pozitiv, inclusiv "0" şi
reprezintă distanţa pe verticală dintre tabel şi celelalte elemente ale paginii Web;
• Aceste atribute funcţionează numai cu Communicator.

<html><head><title>Exemplul 7_9</title></head><body>
<h1 align="center">Exemplul 7_9</h1>
<h2>Un tabel aliniat la dreapta inconjurat la distanta de text</h2>
Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel.
<table border align="left" hspace="200" vspace="20">
<tr><td>celula 11<td>celula 12<td>
<tr><td>celula 21<td>celula 22<td>
</table>
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
</body></html>

66
Titlul unui tabel
Unui tabel i se poate ataşa un titlu cu ajutorului tag-ului <caption> (de la "table
caption"=titlu de tabel). Acest tag trebuie plasat în interiorul tag-urilor <table>…</table>
dar nu în interiorul tag-urilor <tr> sau <td>.
Titlul unui tabel poate fi aliniat cu ajutorul atributului "align" al tag-ului
<caption> care poate lua valorile:
• "bottom" (sub tabel);
• "top" (deasupra tabelului);
• "left"(la stânga tabelului);
• "right" (la dreapta tabelului).

<html><head>
<title>Exemplul 7_10</title>
</head>
<body>
<h1 align="center">Exemplul 7_10</h1>
<h2>Un tabel cu titlu</h2>
<table border>
<caption align="top">Fructe
<tr><td>mure<td>zmeura<td>afine
<tr><td>mere<td>pere<td>cirese
</table>
</body>
</html>

Cap de tabel
Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt
introduse de tag-ul <th> ( de la "table header"=cap de tabel) în loc de <td>.
Obs:
• Toate atributele care pot fi ataşate tag-ului <td> pot fi deasemenea ataşate tag-ului
<th>;
• Conţinutul celulelor definite cu <th> sunt îngroşate (scrise cu bold) şi centrate.

67
 <html><head><title>Exemplul
7_11</title></head><body>
<h1 align="center">Exemplul 7_11</h1>
<h2>Un tabel cu titlu si cap de
tabel</h2>
<table border>
<caption align="bottom"> Bilantul in
saptamana 11-15 mai
<tr><th>Bilant\Zile
<th>Luni<th>Marti<th>Miercuri
<th>Joi<th>Vineri
<tr><th>Intrari<td>1000<td>2000 td>3000
<td>4000<td>5000
<tr><th>Iesiri<td>100<td>200<td>300
<td>400<td>500
</table>
</body></html>

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);
• ”right" (la dreapta);
• "char" (alinierea se face în raport cu un caracter);
Observaţii: Valoarea implicită este "center" (centrat).
Dacă alinierea este de tipul "char" atunci caracterul în raport cu care se face
alinierea este setat de atributul "char" care primeşte ca valoare caracterul de aliniere. În
mod implicit acest caracter este ".".
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);
• "top" (sus).
Valoarea implicită este "middle" (la mijloc).
Aceste atribute pot fi ataşate atât tag-ului <tr> pentru a seta alinierea tuturor
celulelor unui rând cât şi tag-urilor <td> şi <th> pentru a seta alinierea într-o singură
celulă.
<html><head><title>Exemplul
7_12</title></head><body>
<h1 align="center">Exemplul 7_12</h1>
<h2>Un tabel avand continutul celulelor
aliniate in diverse moduri</h2>
<table border width="50%" height="50%">
<tr><td>aici<td>alinierea<td>este
<td>centru<td>stanga (implicita)
<tr align="right" valign="top">
<td>aici <td>alinierea<td>este
<td>dreapta<td>sus
<tr><td valign="top">sus
<td valign="bottom">jos
<td align="left">stanga
<td align="right">dreapta
<td align="right"
valign="bottom">dreapta si jos
</table></body></html>

68
Dimensionarea exactă a celulelor unui tabel
Dimensiunile unei celule de tip <td> sau de tip <th> pot fi dimensionate exact cu
ajutorul a două atribute ale acestor tag-uri "width" pentru lătime şi "height" pentru
înălţime.
Valorile posibile ale acestor atribute sunt:
• numere întregi pozitive (inclusiv "0") şi reprezintă dimensiunea în pixeli a lăţimii
respectiv înălţimii unei celule;
• procente din lăţimea respectiv înălţimea tabelului.

<html><head><title>Exemplul
7_13</title></head><body>
<h1 align="center">Exemplul 7_13</h1>
<h2>Un tabel cu celule de 50X100 de
pixeli</h2>
<table border>
<tr><td width="50" height="100">celula
11<td width="50" height="100">cel 12
<tr><td width="50" height="100">cel
21<td width="50" height="100">cel 22
</table>
</body></html>

Observaţii:
• Dacă dimensiunile precizate de atribute sunt mai mari decât cele necesare afişării
tabelului atunci vor fi folosite aceste dimensiuni precizate;
• Dacă dimensiunile precizate de atribute sunt mai mici decât cele necasare afişării
tabelului atunci tabelul va fi ajustat la dimensiunile necesare.
În exemplul următor se crează cu ajutorul unui tabel având lăţimea 80% din laţimea
paginii 3 coloane de text având lăţimile 25%, 50% respectiv 25% din lăţimea paginii.

<html><head><title>Exemplul 7_14</title></head><body>
<center><table width="80%">
<tr><td width="25%" valign=top>Text in prima coloana. Text in prima coloana. Text in
prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana.
<td width="50%" valign=top>
Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in
coloana a doua. Text in coloana a doua. Text in coloana a doua.
<td width="25%" valign=top>
Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in
coloana a treia. Text in coloana a treia. Text in coloana a treia.
</table></center>
</body></html>

69
Tabele de forme oarecare
Un tabel trebuie privit ca o reţea rectangulară de celule. Cu ajutorul a două
atribute ale tag-urilor <td>sau <th> o celulă se poate extinde peste celulele vecine. Astfel:
• Extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului
"colspan" a cărui valoare determină numărul de celule care se unifică;
• Extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului
"rowspan" a cărui valoare determină numărul de celule care se unifică;
Obs:
• Sunt posibile extinderi simultane ale unei celule pe orizontală si pe verticală. În acest
caz vor fi prezente în tag-urile <td>sau <th> ambele atribute "colspan" şi "rowspan";
• În definirea tabelului o celulă extinsă este introdusă printr-un singur tag <td> sau
<th>.
Exemplul următor arată modul în care într-o reţea rectangulară de 4x4 celule se
formează celule extinse (vezi şi figura alăturată).

<html><head><title>Exemplul
7_15</title></head><body>
<h1 align="center">Exemplul 7_15</h1>
<h2>Un tabel cu celule extinse</h2>
<table border>
<tr><td rowspan="3">c11<br>c21<br>c31
<td>c12<td colspan="2" rowspan="3"> c13,
c14<br>c23, c24
<br>c33, c34
<tr><td>c22
<tr><td>c32
<tr><td>c41<td colspan="3">c42, c43, c44
</table>
</body></html>

Celulele vide ale unui tabel

Dacă un tabel are celule de date vide atunci aceste celule nu vor apărea în tabel nici
măcar cu un chenar de delimitare. Pentru a afişa un chenar pentru celulele vide se
utilizează următoarele trucuri:
• După <td> se pune caracterul "&nbsp;";
• După <td> se pune <br>.
Obs: Caracterul "&nbsp;" (no break space) este caracterul pentru "spatiu". Un "spaţiu"
introdus prin intermediul acestui caracter nu va fi ignorat de browser.

<html>
<head>
<title>Exemplul 7_17</title>
</head>
<body>
<h1 align="center">Exemplul 7_17</h1>
<h2>Un tabel cu celule vide.</h2>
<table border>
<tr><td>c11<td>c12><td>c13
<tr><td>&nbsp;<td><td><br>
</table>
</body></html>

70
Atribute "Internet Explorer" pentru tabele
Următoarele atribute ale tag-ului <table> funcţionează cu Internet Explorer 4.0 dar nu
funcţionează cu Netscape Communicator 4.5:
• "background" permite setarea unei imagini pentru fondul unui tabel. Primeşte ca
valoare URL-ul imaginii folosite pentru fond.
• "bordercolor" permite setarea culorii pentru chenarul unui tabel;
• "bordercolorlight" permite setarea culorii pentru chenarul 3D al unui tabel;
• "bordercolordark" permite setarea culorii pentru chenarul 3D al unui tabel.

<html><head>
<title>Exemplul 7_18</title>
</head><body>
<h1 align="center">Exemplul 7_18</h1>
<h2>Atribute "Internet Explorer"</h2>
<table border=5 background="aol_wl.gif"
cellspacing=10 bordercolorlight=red
bordercolordark=blue>
<tr bgcolor=yellow><td>c11<td>c12<td>c13
<tr
bgcolor=yellow><td>&nbsp;<td><td><br>
</table>
</body></html>

Imagini
O facilitate extraordinară a limbajului HTML este posibilitatea includerii
(încapsulării) unei imagini.

Tipuri de fişiere pentru imagini

Imaginile sunt stocate în fişiere în mai multe formate. Formatele acceptate de
browser-e pentru fişierele imagine sunt:
• GIF (Graphics Interchange Format) (au extensia ".gif");
• JPEG (Joint Photographic Experts Group) (au extensia ".jpeg" sau ".jpg");
• XPM (X PixMap) (au extensia ".xmp");
• XBM (X BitMap) (au extensia ".xbm");
• BMP (BitMap) (au extensia ".bmp") (Numai cu browser-ul Internet Explorer);
• DIB (Device Independent Bitmap);
• TIFF (Tagged Image File Format) (au extensia ".tif" sau ".tiff");
• PCX (PC Paintbrush);
• PNG (Portable Network Graphics) (au extensia ".png").
Obs: Cele mai răspândite formate sunt GIF (8 biţi pentru o culoare, 256 de culori
posibile) şi JPEG (24 de biţi pentru o culoare, 16.777.216 de culori posibile).

URL-ul unei imagini

Uniform Resource Locator (URL) (în traducere Identificator Uniform al
Resursei) este un standard folosit în identificarea unică a unei resurse pe INTERNET.

71
 Toate imaginile cu care vom lucra în acest capitol vor avea adresa (URL-ul)
exprimată în funcţie de directorul în care se află documentul HTML care face referire la
imagine.

Prima pagină Web care conţine o imagine

Pentru a insera într-o pagină Web o imagine se utilizează tag-ul <img> ("img"
vine de la "image"=imagine). Pentru a putea identifica imaginea care va fi inserată se
utilizează un atribut al tag-ului <img> şi anume "src" ("src" vine de la "source"=sursă).
Valoarea acestui atribut este URL-ul imaginii.
Observaţii:
• Dacă imaginea se află în acelaşi director cu fişierul html care face referire la imagine
atunci URL-ul imaginii este format numai din numele imaginii inclusiv extensia.
Exemplu: "nume.extensie" unde "nume" este numele fişierului imagine iar "extensie"
este extensia fişierului imagine.
• Exemplele care urmează presupun că în fişierele imagine utilizate se află în directorul
care este necesar (implicit în directorul curent de lucru).

<html><head><title>Exemplul
8_1</title></head><body>
<h1 align="center">Exemplul 8_1</h1>
<h2>Prima pagina web care contine o
imagine</h2>
<img src="aol_sl.gif">Text dupa
imagine.
</body></html>

Obs:
• Numiţi fişierul de mai sus "e8_1.html", salvaţi-l în directorul de lucru (de exemplu
"c:\html");
• Schimbaţi numele fişierului imagine (valoarea atributului "src") cu numele altui fişier
imagine disponibil pe calculatorul dumneavoastră şi plasat în directorul de lucru
("c:\html").

Adresarea relativă
Să admitem că pe computerul ce stochează paginile html există următoarea
structură de directoare şi de fişiere:
Dacă dorim să referim din fişierul "test.html" aflat în directorul "c:\html\a"
fişierele imagine aflate pe diverse directoare se utilizează în construcţia URL-ului aşa
numita adresare relativă (adică faţă de directorul curent "c:\html\a") după cum se arată
mai jos:
Obs: Directorul părinte al unui director curent se indică prin "..\"

72
• "i2.gif" c: (i1.gif)
• "\aa\i3.gif"
• "..\i2.gif"
• "..\b\i4.gif" html (i2.gif0
• "..\b\bb\i5.gif"
• "..\..\i1.gif"
a (i2.gif) b (i4.gif)
(test.html)

bb (i5.gif)
aa (i3.gif)

Temă: Creaţi structura de directoare indicată în figura de mai sus după care copiaţi în
fiecare director câte un fişier de tip imagine şi testaţi adresarea relativă după schema
propusă mai înainte.

<html><head><title>Exemplul
8_2</title></head><body>
<h1 align="center">Exemplul 8_2</h1>
<h2>Imagine referita prin adresare
relativa</h2>
<img src="..\b\cnn_sl.gif">Text dupa
imagine.
</body></html>

Observaţie:
• Pentru ca exemplul de mai sus să funcţioneze corect salvaţi fişierul de mai sus ca
"e8_2.html" în directorul "c:\html\a" iar fişierul "cnn_sl.gif" (sau altul pe care îl
doriţi) salvaţi-l în directorul "c:\html\b".

Chenarul unei imagini

Dacă se doreşte ca imaginea să aibă un chenar în jurul ei atunci se va apela la
atributul "border" al tag-ului <img>. Valorile acestui atribut sun numere întregi pozitive.

<html>
<head>
<title>Exemplul 8_3</title>
</head><body>
<h1 align="center">Exemplul 8_3</h1>
<h2>Imagine cu chenar</h2>
<img src="aol_wl.gif" border="5">
Text dupa imagine.
</body></html>

73
Dimensionarea unei imagini
O imagine are dimensiuni pe orizontală şi verticală stabilite în momentul creării
ei.
Dacă nu este cerut altfel aceste dimensiuni sunt respectate în momentul afişării ei
în pagina Web.
Dimensiunile implicite ale unei imagini pot fi modificate prin intermediul
atributelor "width" şi "height" ale tag-ului <img>. Valorile posibile pe care le pot lua
aceste atribute sunt:
• numere intregi pozitive reprezentând numărul de pixeli;
• numere de la 1 la 100 urmate de "%" reprezentând procente din lăţimea respectiv
înălţimea blocului părinte în care se află poziţionată imaginea (implicit pagina Web).

<html><head>
<title>Exemplul 8_4</title>
</head><body>
<h1 align="center">Exemplul 8_4</h1>
<h2>Imagine de 200 de pixeli X 20%</h2>
<img src="aol_sl.gif" width="200"
height="20%">
</body></html>

Observaţie: Precizarea dimensiunilor spaţiului ocupat de o imagine într-o pagină Web

duce la creşterea vitezei de încărcare a paginii deoarece cunoscând dimensiunile imaginii
browser-ul rezervă spaţiu în pagină şi continuă afişarea celorlalte elemente ale paginii. În
paralel are loc încărcarea imaginii.

Alinierea unei imagini în pagina Web

Alinierea unei imagini în cadrul paginii Web se poate face prin intermediului
atributului "align" al tag-ului <img> care poate lua următoarele valori:
• "left" (alinierea la stânga; celelalte componente ale paginii "curg" pe partea dreaptă);
• "right" (alinierea la dreapta; celelalte componente ale paginii "curg" pe partea stângă);
• "top" (asemănător cu "texttop") (aliniere deasupra; partea de sus a imaginii se aliniază
cu partea de sus a textului ce precede imaginea);
• "middle" (asemănător "absmiddle") (aliniare la mijloc; mijlocul imaginii se aliniază
cu linia de bază a textului ce precede imaginea);
• "bottom" sau "baseline" (asemănător "absbottom") (aliniere la bază; partea de jos a
imaginii se aliniază cu linia de bază a textului).
<html><head>
<title>Exemplul 8_5</title>
</head><body>
<h1 align="center">Exemplul 8_5</h1>
<h2>Alinierea unei imagini pe
verticala</h2>
Sus:<img src="aol_sl.gif" align="top">
La mijloc:<img src="aol_sl.gif"
align="middle">
Jos:<img src="aol_sl.gif"
align="bottom">Text dupa imagini.
</body></html>

74
Observaţie:
• Dacă imaginea pe care o folosiţi este prea mică sau prea mare adăugaţi imaginii
atributele: width="20%" şi height="20%".

Alinierea textului în jurul unei imagini

Atributele "hspace" şi "vspace" ale tag-ului <img> precizează distanţa în pixeli pe
orizontală respectiv pe verticală dintre imagine şi restul componentelor din pagină (de
exemplu text).

<html><head><title>Exemplul 8_6</title></head><body>
<h1 align="center">Exemplul 8_6</h1>
<h2>Imagine aliniata la stanga inconjurata de text la distanta de 50 de pixeli</h2>
Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text
inainte de imagine. Text inainte de imagine. Text inainte de imagine.
<img src="aol_wl.gif" align="left" hspace="50" vspace="50">
Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa
imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine.
</body></html>

Observaţii:
• "Text după imagine" nu urmează în pagina Web imediat după "Text înainte de
imagine" deşi ar avea loc datorită tag-ului <br> care forţează trecerea la linie nouă.
• Dacă imaginea pe care o folosiţi este prea mică sau prea mare adăugaţi imaginii
atributele: width="20%" şi height="20%";
• Pentru a elibera zona din stânga unei imagini (dreapta sau ambele părţi ale unei
imagini) utilizaţi tag-ul <br> cu atributul "clear" având valoarea "left" (respectiv
"right" sau "all').

Elemente înlocuitoare pentru imagini

Deseori mărimea unei imagini de înaltă rezoluţie (măsurată în kilo-octeţi) este
mare şi timpul de încărcare al paginii Web în fereastra browser-ului creşte cu cât legătura
dintre client şi server este mai lentă.

75
 Pentru ca utilizatorul să înţeleagă totuşi ceva din imagine (pâna când ea va fi
încărcată în întregime) se apelează la două atribute ale tag-ului <img> care înlocuiesc
imaginea pe perioada încărcării:
• Atributul "alt" admite ca valoare un text care se va afişa în locul imaginii;
• Atributul "lowsrc" admite ca valoare URL-ul unei imagini de joasă rezoluţie (de mică
dimensiune) încărcabilă imediat chiar şi pe legăturile slabe. Există aplicaţii de
prelucrare de imagini care permit transformarea unei imagini într-o imagine
asemănătoare de joasă rezoluţie şi de mărime mult mai mică decât imaginea originală.

<html><head><title>Exemplul
8_7</title></head><body>
<h1 align="center">Exemplul 8_7</h1>
<h2>Imagini de joasa rezolutie si texte
inlocuitoare</h2>
<img src="aol_wl.gif" lowsrc=
"aol_sl.gif" alt="America on Line">
</body></html>

Observaţie:
• Dacă atributul "alt" este setat, atunci ori de câte ori mouse-ul se află pozitionat pe
suprafaţa imaginii, pe ecran apare într-un chenar textul ce constituie valoarea
atributului (în cazul exemplului de mai sus va fi afişat "America on Line").

Imagini pentru fondul unei pagini Web

O imagine poate fi utilizată pentru a seta fondul unei pagini Web.
Pentru a efectua acest lucru se foloseşte atributul "background" al tag-ului <body> având
ca valoare URL-ul imaginii.
Imaginea se multiplică pe orizontală şi pe verticală până se umple întregul ecran.

<html><head><title>Exemplul
8_8</title></head>
<body background="aol_wl.gif">
<h1 align="center">Exemplul 8_8</h1>
<h2>Pagina Web cu imagine de fond</h2>
Start<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br>
Sfarsit<br>
</body></html>

Observaţii:
• Întrucât pagina din exemplul de mai sus nu încape într-un singur ecran va trebui să
utilizaţi bara de defilare verticală pentru a vizualiza întreaga pagină.
• În timpul defilării textul şi imaginea de fond se deplasează împreună.
Pentru ca în timpul defilării unei pagini Web foarte mari imaginea de fond să
rămână fixă se utilizează atributul "bgproperties" al tag-ului <body> fixat la valoarea
"fixed". Acest atribut funcţionează numai cu Internet Explorer.

76
 <html><head><title>Exemplul
8_9</title></head>
<body background="aol_wl.gif"
bgproperties="fixed">
<h1 align="center">Exemplul 8_9</h1>
<h2>Pagina Web cu imagine de fond
fixata</h2>
Start<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br>
Sfarsit<br>
</body></html>

Un tabel de imagini
Un tabel admite ca date în celulele tabelului imagini. Acestea se introduc
(eventual împreună cu text) după tag-urile <td> sau <th>.

<html><head><title>Exemplul
8_10</title></head><body>
<h1 align="center">Exemplul 8_10</h1>
<h2>Un tabel de imagini</h2>
<table border>
<tr><td><img src="aol_sl.gif"><td><img
src="cnn_sl.gif">
<tr><td><img src="comic_sl.gif"><td><img
src="news_sl.gif">
</table>
</body></html>

Un tabel de tabele de imagini şi texte

Exemplul următor ilustrează un tablou cu un rând şi două coloane.
Fiecare celulă a tabelului este formată din două rânduri şi o coloană. În rândul de
deasupra se află o imagine iar în rândul de jos se află un text explicativ pentru imaginea
de deasupra.

<html><head><title>Exemplul
8_11</title></head><body>
<h1 align="center">Exemplul 8_11</h1>
<h2>Un tabel de tabele de imagini si
texte</h2>
<table border>
<tr>
<td> <table border>
<tr><td><img src="aol_sl.gif">
<tr><td>America on Line Preview
</table>
<td> <table border>
<tr><td><img src="cnn_sl.gif">
<tr><td>CNN Interactive
</table>
</table>
</body></html>

77
Imagini folosite ca link-uri
Despre link-uri veţi învăţa în detaliu în lecţia următoare. Un link (o legătură)
introduce în pagina Web o zonă "activă". Efectuând un click cu butonul stâng al mouse-
ului pe această zonă activă (în cazul nostru pe imagine) în browser se va încărca o altă
pagină Web.
Pentru a utiliza imaginea "aol_sl.gif" drept link către pagina "p1.html" utilizaţi sintaxa:
<a href="p1.html"><img src="aol_sl.gif"></a>.

<html><head><title>Exemplul
8_12</title></head><body>
<h1 align="center">Exemplul 8_12</h1>
<h2>Imagini folosite ca link-uri</h2>
Text inainte de imagine
<a href="p1.html">
<img src="aol_sl.gif"></a>
Text dupa imagine
</body></html>

Observaţie: În mod implicit imaginea utilizată pe post de zonă activă (link) este
înconjurată de un chenar de culoarea unui link. Dacă setaţi atributul "border" al tag-ului
<img> la valoarea "0" acest chenar va dispare.

Imagini în fişiere externe

Deoarece imaginile necesită un timp mare de încărcare în browser deseori se
preferă ca în pagina Web să fie inserat numai un link către imagini lăsând utilizatorului
posibilitatea de a încărca sau nu imaginea.
În exemplul următor se arată cum se inserează un link (o legătură) către un fişier
imagine folosindu-se sintaxa:
<a href="aol_sl.gif">Efectuati click pentru a vedea imaginea</a>.

<html><head><title>Exemplul
8_13</title></head><body>
<h1 align="center">Exemplul 8_13</h1>
<h2>Imagini in fisiere externe</h2>
Text inainte de link.
<a href="aol_sl.gif">Efectuati click
pentru a vedea imaginea</a>
Text dupa link.
</body></html>

Un truc foarte des utilizat de webmasteri este acela de a utiliza o imagine de

rezoluţie scăzută pe post de link către aceeaşi imagine dar stocată într-un fişier cu o
rezoluţie foarte bună. Utilizatorul vede în pagină imaginea de rezoluţie scăzută şi dacă
această imagine prezintă interes pentru el atunci prin efectuarea unui click în browser se
încarcă imaginea de rezoluţie înaltă.

<html><head>
<title>Exemplul 8_14</title>
</head><body>
<h1 align="center">Exemplul 8_14</h1>
<h2>Imagini de diferite rezolutii</h2>
Text inainte de imagine.
<a href="i1.jpg"><img src="i2.jpg"></a>
Text dupa imagine.
</body></html>

78
Facilităţi ale formatului GIF
Formatul GIF89a a permite următoarele trei perfecţionări aduse fişierelor
imagine:
1. Imagini întreţesute (interlaced images) sunt imaginile care apar integral în pagina
Web dar pe măsură ce sunt încarcate claritatea imaginii creşte;
2. Imaginile transparente (transparent images) sunt imagini care nu au culoare de fond
încât ceea ce se află în spatele imaginilor devine parţial vizibil;
3. Imaginile animate (animated images) sunt fişiere imagine speciale care conţin o
succesiune de imagini care sunt afişate periodic in pagina Web.
Observaţie: Cele mai multe aplicaţii de prelucrare a imaginilor permit salvarea fişierelor
imagine astfel încât facilităţile enumerate mai sus să fie exploatate.

Utilizări speciale ale imaginilor

Imaginile pot fi utilizate pentru a obţine efecte deosebite într-o pagină Web.
Printre aceste utilizări speciale putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor (eventual animate);
2. Simboluri speciale pentru itemii unei liste neordonate (vezi lecţia următoare).

LINK-URI
Interactivitatea unei pagini Web
Link-urile (legăturile) reprezintă partea cea mai importantă a unei pagini Web. Ele
transformă un text obişnuit în "hipertext" sau "hipermedia", aspecte care permit trecerea
rapidă de la o informaţie aflată pe un anumit server la altă informaţie aflată pe un alt
server oriunde în lume.
Link-urile sunt "zone active" într-o pagină Web, adică zone pe ecran sensibile la
apăsarea butonului stâng al mouse-ului. Un click efectuat cu mouse-ul pe un link este
interpretat ca o cerere către un anumit server de pe INTERNET de a expedia către
computerul client o resursă către care link-ul respectiv punctează.
În felul acesta paginile Web devin interactive (adică răspund la acţiuni iniţiate de
utilizator).
Lucrurile stau în felul următor:
a) În pagina html se inserează link-uri prin intermediul unui tag special <a> şi a unui
atribut "href" care ia ca valoare adresa (URL-ul) resursei solicitate.
De exemplu <a href="www.netscape.com">.
b) În pagina Web apar link-urile setate la punctul a) ca "zone active". Când mouse-ul se
află deasupra unei zone active forma mouse-ului se schimbă automat într-o "mână";
c) Efectuând click pe o zona activă ce reprezintă un link pe pagina Web, browser-ul
trimite către serverul ce stochează noua resursă o cerere de a-i expedia respectiva
resursă;
d) Serverul WWW (World Wide Web) ce stochează noua resursă primeşte cererea şi
expediază către utilizator (computerul client) resursa solicitată. Dacă resursa solicitată
este o nouă pagină Web atunci serverul ţinta expediază un fişier ".html" împreună
fişierele imagine, sunet, etc referite de acest fişier;

79
e) Computerul client (care a expediat cererea) primeşte resursa solicitată şi o încarcă în
browser;
f) Pagina veche este înlocuită de pagina nouă în acelaşi browser sau este lansată în
execuţie o nouă instanţă a browser-ului care conţine noua pagină.

Link către o pagină aflată în acelaşi director

Un link (o legătură) către o pagină aflată în acelaşi director se formează cu
ajutorului tag-ului <a> (de la "anchor"=ancoră).
Pentru a preciza pagina către care punctează link-ul se utilizează un atribut al tag-
ului <a> numit "href" care ia ca valoare numele fişierului html aflat în acelasi director
care va înlocui vechea pagină.
"Zona activă", adică zona în pagina Web care devine sensibilă la apăsarea butonului
stâng al mouse-ului, este formată din textul cuprins între tag-urile <a> şi </a>.
Observaţie: Prezenţa tag-ului de sfârşit </a> este obligatorie.
Exemplul 9_1. Comutarea între două pagini.
Acest exemplu admite că în acelaşi director (de exemplu în directorul de lucru
"c:\html") se află create următoarele două fişiere html "p1.html" şi "p2.html":

<html><head><title>p1</title></head> <html><head><title>p2</title></head>
<body> <body>
<h1>Pagina 1</h1> <h1>Pagina 2</h1>
<hr> <hr>
<a href="p2.html">Link catre Pagina 2 <a href="p1.html">Link catre Pagina 1
</a> </a>
</body></html> </body></html>

Link către o pagină aflată pe acelaşi disc local

Dacă pagina referită de link se află pe acelaşi disc local dar în directoare diferite
atunci pentru a preciza poziţia ei în structura de directoare se poate folosi adresarea
relativă (vezi Lecţia 8, paragraful "Adresarea relativă").

Exemplul de mai jos presupune că "p3.html" se află în directorul "c:\html\a\" iar

"p4.html" se află în directorul "c:\html\b\bb\".
<html><head><title>p3</title> <html><head><title>p4</title>
</head><body> </head><body>
<h1>Pagina 3</h1><hr> <h1>Pagina 4</h1><hr>
<a href="../b/bb/p4.html">Link <a href="../../a/p3.html">Link
catre Pagina 2</a> catre Pagina 1</a>
</body></html> </body></html>

80
Link către un site particular
În exemplul următor se utilizează URL-ul "http://www.netscape.com" care
încarcă "prima pagină" ("Home Page") de pe site-ul firmei "Netscape Corporation".
De regulă această pagină se numeşte "index.html" ("home.html" sau
"default.html") şi se află în "Root Directory" pe calculatorul "www" din domeniul
"netscape.com".

<html><head>
<title>Exemplul 9_3</title>
</head><body>
<h1>Link catre site-ul firmei "Netscape
Communications Corporation" </h1><hr>
<a href="http://www.netscape.com">
Netscape Corporation</a>
</body></html>

Utilizarea unei imagini ca "zonă activă"

Zona activă a unui link este setată între tag-urile <a> şi </a>. De regulă ea este
"un text" care apare subliniat şi de culoare albastră. În momentul în care mouse-ul se află
deasupra zonei active forma mouse-ului se schimbă într-o "mână" care îndeamnă la
apăsare.
Rolul de zonă activă poate fi jucat şi de o imagine dacă inserarea ei are loc între
tag-urile <a> şi </a>.

<html><head><title>Exemplul
9_4</title></head><body>
<h1>Utilizarea unei imagini ca "zona
activa"</h1><hr>
<a href="p.html">
<img src="aol_sl.gif"></a>
</body></html>

Pentru ca acest exemplu să funcţioneze trebuie:

• Fişierele "p.html" şi "aol_sl.gif" trebuie să existe în acelaşi director;
• Fişierul "p.html" trebuie să fie scris corect din punct de vedere al limbajului
HTML.
Observaţii:
• Pentru a reveni într-o pagină Web anterioară apăsaţi butonul "Back" din bara de
instrumente a browser-ului utilizat.
• Imaginea utilizată ca zonă activă este înconjurată de un chenar de aceeaşi culoare
cu celelalte link-uri. Dacă imaginea are atributul "border" setat la valoarea "0"
atunci chenarul în jurul imaginii dispare.

Ancore
Într-o pagină Web foarte lungă pot exista puncte de reper (ancore) către care să se
definească legături.

81
 O ancoră se defineşte dea semenea prin tag-ul <a>. Pentru a identifica ancora se
utilizează atributul "name" al tag-ului <a> care primeşte ca valoare un nume dat ancorei
(de exemplu "ancora1").
Pentru a insera un link către ancora "ancora1" definită în aceeaşi pagină se
utilizează tag-ul <a> având atributul "href" de valoare "#ancora1".

<html><head><title>Exemplul 9_5</title></head><body>
<h1>Ancore definite in acelasi document</h1><hr>
<a href="#ancora1">Link catre ancora nr. 1</a><br>
<a href="#ancora2">Link catre ancora nr. 2</a><br>
l0<br>l1<br>l2<br>l3<br>l4<br>l5<br>l6<br>l7<br>l8<br>l9<br>l10<br> l11<br>
l12<br>l13<br>l14<br>l15<br>l16<br>l17<br>l18<br>l19<br>
<a name="ancora1">Prima ancora<br>
l20<br>l21<br>l22<br>l23<br>l24<br>l25<br>l26<br>l27<br>l28<br>l29<br>
l30<br>l31<br>l32<br>l33<br>l34<br>l35<br>l36<br>l37<br>l38<br>l39<br>
l40<br>l41<br>l42<br>l43<br>l44<br>l45<br>l46<br>l47<br>l48<br>l49<br>
<a name="ancora2">A doua ancora<br>
l50<br>l51<br>l52<br>l53<br>l54<br>l55<br>l56<br>l57<br>l58<br>l59<br>
l60<br>l61<br>l62<br>l63<br>l64<br>l65<br>l66<br>l67<br>l68<br>l69<br>
</body></html>

Pentru a introduce un link către o ancoră definită în alt document (altă pagină)
aflat în acelaşi director atributul "href" primeşte o valoare de forma
"nume_fisier.html#nume_ancora".

Pentru a funcţiona corect următorul exemplu presupune că în directorul curent se află

fişierul "e9_5.html" având conţinutul de la exemplul anterior.
<html><head>
<title>Exemplul 9_6</title>
</head><body>
<h1>Ancore definite in alt
document</h1><hr>
<a href="e10_5.html#ancora1">Link catre
ancora nr. 1 din alt document </a><br>
<a href="e10_5.html#ancora2">Link catre
ancora nr. 2 din alt document </a><br>
</body></html>

82
Instanţe multiple pentru un browser
La începerea unei sesiuni pe INTERNET, pe calculatorul client (al utilizatorului)
se lansează în execuţie o instanţă a browser-ului folosit, care încarcă pagina Web
solicitată.
Dacă în timpul sesiunii de lucru se efectuează un click către o pagină nouă atunci
în mod implicit noua pagină o va înlocui pe cea precedentă folosindu-se aceeaşi instanţă
(fereastră) a browser-ului.
Dacă dorim ca pagina nouă solicitată să fie încarcată într-o altă fereastră decât cea
curentă atunci trebuie lansată în execuţie o nouă instantă a browser-ului care va conţine
noua pagină. Acest lucru se realizează folosinduse atributul "target" al tag-ului <a> care
primeşte ca valoare un nume (de exemplu "fereastra") pentru fereastra în care se va
încărca noua pagină.

<html><head>
<title>Exemplul 9_7</title>
</head><body>
<h1>Pagina noua in fereastra noua
</h1><hr>
<a href="p2.html" target="ferastra">
Link catre Pagina 2</a>
</body></html>

Dacă mai multe link-uri folosesc aceaşi valoare pentru atributul "target" înseamnă
că paginile referite de aceste link-uri se vor încărca în aceeaşi fereastră (vor utiliza
aceeaşi instanţă a browser-ului).

<html><head>
<title>Exemplul 9_8</title>
</head><body>
<h1>Pagini noi in ferestre noi</h1><hr>
<a href="p2.html" target="fereastra1">
Incarca Pagina 2 in Fereastra 1</a><br>
<a href="p3.html" target="fereastra2">
Incarca Pagina 3 in Fereastra 2</a><br>
<a href="p4.html" target="fereastra1">
incarca Pagina 4 in Fereastra 1</a>
</body></html>

Observaţii:
• Pentru a funcţiona, exemplul de mai sus presupune că în directorul curent există
fişierele "p2.html", "p3.html" şi "p4.html".
• Pentru a vedea mai bine cum funcţionează exemplul de mai sus, evitaţi să folosiţi
pentru ferestre o dimensiune maximizată.
Atributul "target" acceptă următoarele valori cu semnificaţie specială:
• "_blank" (încărcarea are loc într-o fereastră nouă anonimă);
• "_parent" (încărcarea are loc în fereastra părinte);
• "_self" (încărcarea are loc în aceeaşi fereastră);
• "_top" (încărcarea are loc în fereastra "top" a frame-urilor curente).

83
Alegerea culorilor pentru link-uri
În mod implicit se utilizează trei culori pentru link-uri:
• O culoare pentru link-urile nevizitate (nu s-a efectuat nici un click pe ele);
• O culoare pentru link-urile de vizitate (s-a efectuat cel puţin un click pe ele);
• O culoare pentru link-urile active (deasupra cărora se află mouse-ul la un moment
dat).
Aceste culori pot fi setate cu ajutorul a trei atribute ale tag-ului <body>:
• "link" pentru link-urile nevizitate;
• "vlink" pentru link-urile vizitate;
• "alink" pentru link-urile active.
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau
conform standardului RGB (vezi ).

<html><head><title>Exemplul
9_9</title></head>
<body link="red" vlink="yellow"
alink="blue">
<h1>Setarea culorilor pentru link-
uri</h1><hr>
<ul> In aceasta pagina culorile link-
urilor sunt setate astfel:
<li>rosu pentru link-uri nevizitate
<li>galben pentru link-urile vizitate
<li>albastru pentru link-urile active
</ul>
<a href="p2.html">Link catre Pagina 2
</a><br>
<a href="p3.html"> Link catre Pagina 3
</a><br>
<a href="p4.html"> Link catre Pagina 4
</a>
</body></html>

Link către un server FTP

Pentru conectarea la un server pe INTERNET specializat în transferul de fişiere
(servere FTP "File Transfer Protocol") se utilizează serviciul "ftp://" împreună cu adresa
serverului FTP şi localizarea fişierului pe server.

<html><head><title>Exemplul
9_12</title></head><body>
<h1>Link catre un server de
fisiere</h1><hr>
<a href="ftp://ftp.netscape.com" >Link
catre serverul de fisiere al firmei
"Netscape Communication
Corporation"</a><br>
</body></html>

Utilizarea poştei electronice

Într-o pagină Web se pot afla link-uri care permit lansarea în execuţie a alicaţiei
de expediere a mesajelor electronice. Pentru aceasta se utilizează în construcţia URL-ului
serviciul INTERNET "mailto:" urmat de o adresă e-mail validă.

84
 <html><head><title>Exemplul
9_13</title></head><body>
<h1>Expedierea de mesaje
electronice</h1><hr>
Opiniile legate de aceasta carte pot fi
expediate efectuand click aici:
<a href="mailto:stanp@edu.ro"> Mesaje
catre autorul cartii.</a><br>
</body></html>

Observaţii: Pentru ca exemplul anterior să funcţioneze trebuie ca:

• Pe calculatorul utilizatorului să fie instalat o aplicaţie de expediere a mesajelor
electronice (de exemplu Internet Mail, Outlook Express pe calculatoare Windows,
Pine pe calculatoare Unix, etc).
• Adresa de e-mail să fie o adresă validă;
• Computerul utilizatorului să fie conectat la INTERNET.

Link-uri către fişiere oarecare

Într-o pagină Web pot apare link-uri către orice tipuri de fişiere aflate pe orice
servere de pe INTENET.
Pentru aceasta în fişierul html se utilizează tag-ul <a> având valoarea atributului "href"
egală cu URL-ul fişierului destinaţie (vezi detalii despre URL în anexa URL).

<html><head>
<title>Exemplul 9_14</title>
</head><body>
<h1>Link-uri catre fisiere
oarecare</h1><hr>
<a href="me.class" >Link catre fisierul
"me.class"</a><br>
</body></html>

Observaţii: Atunci când se efectuează click pe link-ul din exemplul de mai sus
browser-ul deschide o căsuţă de dialog "File download" care vă permite:
• să salvaţi pe discul local fişierul sau să lansaţi în execuţie aplicaţia capabilă să
interpreteze corect fişierele de tipul respectiv;
• să optaţi pentru inhibarea căsuţei de dialog şi încărcarea directă a fişierelor (când
acest lucru este posibil) pentru restul sesiunii de lucru pe INTERNET.

Ancore definite prin atributul "id"

Atributul "id" este un atribut universal adică poate fi ataşat oricărui element al
unei pagini Web. Acest atribut va înlocui complet atributul "name" care putea fi ataşat
numai anumitor elemente.
Atributul "id" primeşte ca valoare un "nume" (de exemplu "id1") care identifică
în mod unic un element.
Atributul "id" poate fi utilizat pe post de ancoră într-o pagină Web conform
sintaxei:

85
<tag id="id1">…</tag>
<a href="#id1">Link către elementul "id1"</a>
unde "tag" poate fi orice element HTML.

<html><head>
<title>Exemplul 9_15</title>
</head><body>
<h1>Link-uri definite prin atributul "id" </h1><hr>
<a href="#id1">Link catre primul capitol</a><br>
<a href="#id2">Link catre capitolul doi</a><br>
Text introductiv.<br>Text introductiv.<br>Text introductiv.<br>Text introductiv.<br>
<h2 id="id1">Primul capitol</h2>Text in primul capitol.<br>Text in primul
capitol.<br>Text in primul capitol.<br>Text in primul capitol.
<h2 id="id2">Al doilea capitol</h2>
Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2.<br>
Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2.
</body></html>

Documentarea unei pagini Web

Meta-informaţiile sunt informaţiile despre "modul de organizare a informaţiilor".
În cazul unei pagini Web meta-informatiile vor furniza date despre modul în care a fost
creată această pagină.
Meta-informaţiile nu sunt vizibile într-o pagină Web. Ele sunt conţinute în fişierul
sursă ".html" şi sunt utilizate de serverele Web aflate pe INTERNET, specializate în
stocarea de "informaţii despre informaţiile" stocate pe diferite site-uri.
Serverele specializate în stocarea de meta-informaţii oferă utilizatorilor motoare
de căutare puternice care permit regăsirea informaţiilor (a adreselor la care aceste
informaţii sunt stocate).
Putem enumera ca exemple: "www.yahoo.com", "www.altavista.com",
"www.excite.com", "www.lycos.com" etc.

86
Un element pentru meta-informaţii
Meta-informaţiile adică informaţiile despre informaţiile conţinute într-o pagină
Web se introduc cu ajutorul unui element special <meta> plasat în interiorul blocului
<head>…<head>. Acest element acceptă patru atribute a căror semnificaţie o vom
furniza pe parcurs:
• "name";
• "http-equiv";
• "content";
• "scheme";
la care se poate adăuga un atribut universal (comun tuturor elementelor) şi anume:
• "lang".
Primele trei atribute se folosesc în perechi "name/content" sau "http-equiv/content"
celelalte două atribute (scheme şi lang) având caracter opţional.

Descrierea unei pagini Web

Pentru a face cunoscut motoarelor de căutare aflate pe INTERNET despre scopul pentru
care a fost creată o pagină Web putem insera un element <meta> având atributele:
• "name" setat la valoarea "description";
• "content" setat la un string ce conţine o descriere generală a paginii.

<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta name="description" content="Colegiul National Mihai Viteazul din Bucuresti este
liceu de prestigiu din Romania. Acest site prezinta informatii despre elevii,
profesorii, oferta scolii, cursurile optionale, performantele si planurile de viitor
ale noastre.">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>

Cuvintele cheie pentru o pagină Web

Cuvintele cheie sunt utilizate când se efectuează o regăsire a unei informaţii prin
intermediul unui motor de căutare. De aceea selectarea acestor cuvinte cheie trebuie
făcută cu atenţie pentru ca informaţia să poată fi regăsită.
Cuvintele cheie oferă o altă metodă de descriere a informaţiilor conţinute de o
pagină Web.
Pentru a preciza cuvintele cheie ale paginii Web:
• atributul "name" va fi setat la "keywords";
• atributul "content" va primi ca valoare o listă de cuvinte cheie separate prin ",".

<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta name="keywords" content="colegiu, Mihai, Viteazul, Bucuresti, liceu, prestigiu,
Romania, elev, profesor, curriculum, optionale, olimpiade, matematica, cor">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>

87
Drepturile de autor
Atributul "name" poate fi utilizat pentru a furniza informaţii legate de autorul
paginii şi de Copyright (drepturile de autor).Exemplul următor ilustrază aceste lucruri:

<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta name="author" content="Tudor Popescu, IX A">
<meta name="copyright" content="cnmv.ro">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>

Crearea şi expirarea paginii Web

Pentru a transmite serverelor specializate în regăsirea informaţiilor pe
INTERNET date legate de data creării şi data reactualizării unei pagini Web se utilizează
atributul "http-equiv". Valoarea atributului "content" este în aceste cazuri o dată în
formatul:
"zzz, zz lll aaaa hh:mm:ss ttt" unde:
• "zzz" reprezintă primele trei litere ale zilei din săptămână (Mon, Tue, Wed, Thu,
Fri, Sat sau Sun);
• "zz" reprezintă ziua din cadrul lunii (01, 02, …, 31);
• "lll" reprezintă primele trei litere din numele lunii (Jan, Feb, Mar, Apr, May, Jun,
Jul, Aug, Sep, Oct, Nov sau Dec);
• "aaaa" reprezintă anul exprimat cu 4 cifre (de exemplu 1999);
• "hh:mm:ss' reprezintă ora, minutul şi secunda;
• "ttt" reprezintă timpul utilizat (de exemplu GMT).

<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta http-equiv="creation-date" content="">
<meta http-equiv="expires" content=="">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>

Observaţie: Dacă data este furnizată într-un format ambiguu (de exemplu "03-07-1999")
atunci să adăugaţi atributul "scheme" care precizează formatul utilizat pentru dată (de
exemplu scheme="Month-Day-Year").

Persoana de contact
Pentru a putea furniza informaţii despre persoana care se ocupă de administrarea
site-ului utilzaţi atributul "http-equiv" ca în exemplul de mai jos. În aceste cazuri valoarea
atributului "content" este o adresă e-mail eventual urmată în paranteze rotunde de un
nume complet al persoanei.

88
 <html>
<head>
<title>Mihai Viteazul, Bucuresti Home Page</title>
<meta http-equiv="from" content="stanp@cnmv.ro (Teodoru Gugoiu)">
<meta http-equiv="reply-to" content=="stanp@cnmv.ro (Teodoru Gugoiu)">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul, Bucuresti!</h1><hr>
</html>

Tipul fişierului
Pentru a preciza informaţii legate de tipul fişierului şi setul de caractere utilizate
folosiţi atributul "http-equiv" ca mai jos:

<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-5">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>

Limba utilizată
Deoarece la regăsirea informaţilor cu ajutorul motoarelor de căutare se pot utiliza
cuvinte cheie scrise în diferite limbi atunci se pot insera informaţii legate de limba
utilizată cu ajutorul atributului universal (comun şi altor elemente) "lang":

<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta http-equiv="keywords" lang="en-us" content="college, Mihai, Viteazul,
Bucharest, high school, prestige, Romania, student, teacher, curriculum, optional,
olimpiade, mathematics">
<meta http-equiv="keywords" lang="ro" content="colegiu, Mihai, Viteazul, Bucuresti,
liceu, prestigiu, Romania, elev, profesor, curriculum, optionale, olimpiade,
matematica">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>

Reactualizarea paginii curente din browser

O utilizare specială a atributului "http-equiv" este aceea de a seta reîncărcarea
automată a browser-ului cu aceeaşi pagină (de exemplul pagina cu evoluţia cursurilor la o
bursă) sau cu altă pagină.
În acest fel se obţin facilităţi dinamice pentru un site Web. Pentru a reîncărca
aceeaşi pagină la un interval precizat de secunde folosiţi atributul "http-equiv" setat la
valoarea "refresh" iar în atributul "content" puneţi numarul de secunde după care dorţi ca
pagina să fie reactualizată:

89
 <html><head><title>Mihai Viteazul Home
Page</title>
<meta http-equiv="refresh" content="5">
</head><body>
<h1>Bine ati venit la Colegiul National
Mihai Viteazul!</h1><hr>
Aceasta pagina va fi reincarcata dupa 5
secunde!
</html>

Dacă dorim ca după un număr de secunde o pagină să fie înlocuită de o altă

pagină atunci în atributul "content" este precizat şi URL paginii noi ca în exemplul de
mai jos:

<html><head><title>Mihai Viteazul Home

Page</title>
<meta http-equiv="refresh"
content="9; url='cuprins.html'">
</head><body>
<h1>Bine ati venit la Colegiul National
Mihai Viteazul!</h1><hr>
Aceasta pagina va fi schimbata dupa 9
secunde cu pagina "cuprins.html"!
</html>

Comentariile
Comentariile sunt blocuri de text utile care studiază modul în care a fost scris un
fişier sursă ".html". Comentariile sunt ignorate de către browser la încarcarea paginii.
Pentru a insera un bloc de comentarii utilizaţi sintaxa:
<!--orice text doriti-->.
Obs:
• Blocul de comentarii poate fi plasat oriunde este necesar în cadrul paginii ".html";
• Blocul de comentarii se poate extinde pe mai multe rânduri;
• Nu sunt permise spaţii libere între "<!" şi "--" dar sunt permise spaţii libere între "--
" şi ">".

<html><head>
<!--Aceasta este "Pagina Home" a
Colegiului National "Mihai Viteazul" din
Bucuresti, Romania-->
<title>Mihai Viteazul Home Page
</title></head><body>
<!--urmeaza un header-->
<h1>Bine ati venit la Colegiul National
Mihai Viteazul!</h1>
<!--urmaeza o linie orzontala-->
<hr>
</html>

90
Sunete şi videoclip-uri
Formate pentru fişierele de sunet
Sunetele pot fi stocate în fişiere în diverse formate. Unele dintre acestea sunt
recunoscute de browser-e şi deci pot fi inserate în paginile Web.
Formatele şi extensiile corespunzătoare pentru fişierele utilizabile în paginile Web
sunt următoarele:
• Formatul AU/µ-law cu extensia ".au";
• Formatul AIFF/AIFC cu extensiile posibile ".aiff" sau "aif";
• Formatul WAVE/WAV cu extensia ".wav";
• Formatul MPEG Audio cu extensia ".mpeg2" sau ".mp2";
• Formatul MIDI cu extensia ".mid" sau ".midi".

Link-uri către fişiere de sunet

Un link către un fişier de sunet se realizează folosind tag-ul <a> destinat
legăturilor către orice tip de fişiere unde atributului "href" va avea valoarea egală cu
URL-ul fişierului de sunet.

<html><head><title>Exemplul
11_1</title><head><body>
<h1>Link-uri catre fisiere de
sunet</h1><hr>
<a href="spacemusic.au">Link catre
fisierul "spacemusic.au"</a><br>
<a href="The Microsoft Sound.wav">Link
catre fisierul "The Microsoft
Sound.wav"</a>
</body></html>

Observaţii: Pentru a funcţiona corect exemplul de mai sus trebuie:

• înlocuite fişierele de sunet cu numele unor fişiere de sunet disponibile pe
calculatorul dumneavoastră (folosiţi utilitarul Find din Windows pentru a căuta
fişiere cu o anumită extensie);
• calea către aceste fişiere să fie corectă (eventual copiaţi-le în directorul în care se
află şi pagina html).

Formate pentru fişierele de videoclipuri

Videoclipurile pot fi stocate în fişiere în diverse formate. Unele dintre acestea
sunt recunoscute de browser-e şi deci pot fi inserate în paginile Web.
Formatele şi extensiile corespunzătoare pentru fişierele utilizabile în paginile Web
sunt următoarele:
• Formatul MPEG cu extensiile posibile ".mpeg" sau ".mpg";
• Formatul QuickTime cu extensia ".mov";
• Formatul AVI cu extensia ".avi".

91
Link-uri către fişiere de video-clipuri
Un link către un fişier de video-clip se realizează folosind tag-ul <a> destinat
legăturilor către orice tip de fişiere unde atributului "href" va avea valoarea egală cu
URL-ul fişierului de video-clip.

<html><head><title>Exemplul
11_2</title><head><body>
<h1>Link-uri catre fisiere de video-
clipuri</h1><hr>
<a href="t241170a.avi">Link catre
fisierul "t241170a.avi"</a><br>
<a href="t052060a.avi">Link catre
fisierul "t052060a.avi"</a>
</body></html>

Observaţii: Pentru a funcţiona corect exemplul de mai sus trebuie:

• înlocuite fişierele de video-clip cu numele unor fişiere de video-clip disponibile pe
calculatorul dumneavoastră (folosiţi utilitarul Find din Windows pentru a căuta
fişiere cu o anumită extensie);
• calea către aceste fişiere să fie corectă (eventual copiaţi-le în directorul în care se
află şi pagina html);
• Pe calculatorul utilizatorului să fie instalată aplicaţia capabilă să intrepreteze corect
fişierul de video-clip corespunzător.

Sunetul de fond pentru o pagină Web

Pentru ca vizitarea unei pagini Web să fie însoţită de un sunet de fond browser-ul
Internet Explorer acceptă tag-ul <bgsound>. Fişierul care stochează sunetul este precizat
printr-un atribut al tag-ului <bgsound> şi anume "src" (vine de la "source"=sursă).
Un al doilea atribut al tag-ului <bgsound> şi anume "loop" permite precizarea
numărului de repetiţii care sunt executate până când sunetul de fond încetează.
Valorile posibile sunt:
• "-1" sau "infinite" pentru ca sunetul de fond să se repete de un număr infinit de ori;
• un numar întreg pozitiv pentru ca sunetul să se repete de un număr precizat de ori.

<html><head><title>Exemplul 11_3</title><head><body>
<h1>Pagina Web cu un sunet de fond</h1><hr>
<bgsound src="spacemusic.au" loop="-1">
</body></html>

Observaţie: Trebuie avut în vedere ca fişierele de sunet ataşate unei pagini Web să aibă o
dimensiune rezonabilă pentru a nu supraîncărca traficul pe conexiunea client-server.

Video-clipuri inline

Browser-ul Internet Explorer acceptă o extensie a tag-ului <img> pentru inserarea

in-line într-o pagină Web a video-clipurilor. Pentru aceasta se utilizează cinci atribute noi
ale tag-ului <img>:

92
1. Atributul "dynsrc" (de la "dynamic source") primeşte ca valoare URL-ul fişierului
care contine video-clipul;
2. Atributul "loop" determină numărul de repetiţii ale video-clipului, valorile posibile
fiind:
• "-1" sau "infinite" pentru ca video-clipul să se repete de un număr infinit de ori;
• un numar întreg pozitiv pentru ca video-clipul să se repete de un număr precizat de
ori.
3. Atributul "start" permite precizarea momentului în care video-clipul va începe, luând
următoarele valori:
• "fileopen" (video-clipul va începe când pagina Web s-a încărcat în browser);
• "mouseover" (video-clipul va începe când mouse-ul este trecut peste imaginea ce
reprezintă video-clipul).
4. Atributul "controls" (fără valori specifice);
5. Atributul "loopdelay" permite setarea în intervalului de timp (în număr de
milisecunde) între două reluări succesive ale video-clipului.
Obs: Când nu se află în rulare video-clipul este afişat în pagina Web ca o imagine
care poate fi:
• Prima imagine din video-clip;
• O imagine precizată prin atributul "src" al tag-ului <img>;
• Un text precizat de atributul "alt" al tag-ului <img>.

<html><head><title>Exemplul
11_4</title><head><body>
<h1>Video-clip</h1><hr>
Treceti mouse-ul pe deasupra imaginii de
mai jos si video-clipul va rula de 2
ori.<br>
<img dynsrc="Sample.mov" loop="2"
start="mouseover" src="aol_sl.gif"
alt="Quick Time" controls>
</body></html>

Obs: Se pot utiliza şi alte atribute specifice tag-ului <img> ca de exemplu:

• "src" pentru specificarea unei imagini alternative;
• "alt" pentru specificarea unui text alternativ.

93
Hărţi de imagini
Folosirea unei imagini ca "hartă de imagini"
Am văzut în capitolul referitor la imagini că o imagine poate fi utilizată ca "zonă
activă" adică sensibilă la apăsarea butonului stâng la mouse-ului. Pentru aceasta imaginea
trebuie să fie inserată în documentul HTML între tag-urile <a> şi </a>.
Există însă posibilitatea creării hărţilor de imagini ("Image Map" în engleză) care
permit ca diferite zone ale unei imagini să fie definite ca link-uri către diferite pagini
Web.
Crearea unei hărţi de imagini presupune două etape:
1. Definirea unei imagini ca "hartă de imagini". Pentru aceasta se foloseşte tag-ul <img>
însoţit de două atribute:
• Atributul "src" care primeste ca valoare URL-ul imaginii folosite pe post de "hartă
de imagini";
• Atributul "usemap" a cărui valoare este de forma "#harta1" unde "harta1" numele
hărţii definit la punctul 2.
Observaţii: Harta de imagini se poate afla şi într-o altă pagină Web caz în care atributul
"usemap" primeşte o valoare de forma:
• "nume_pagina.html#harta1";
• "www.cnmv.ro/harti.html/harta1".
2. Definirea hărţii.
Definirea hărţii se face în interiorul unui bloc special delimitat de tag-urile <map> şi
</map>. Un atribut obligatoriu al tag-ului <map> este "name" care primeşte ca
valoare este un nume (numele hărţii) (de exemplu "harta1").
O hartă este formată din mai multe zone. Fiecare zonă se introduce cu ajutorul tag-ului
<area>.
Tag-ul <area> are trei atribute obligatorii:
• Atributul "shape" determină tipul de "zonă activă" şi poate lua numai trei valori
posibile:
a) "rect" pentru zone de formă dreptunghiulară;
b) "circle" pentru zone de formă circulară;
c) "poly" pentru zone de formă poligonală;
d) "default" pentru restul imaginii care nu este acoperit de niciuna din zonele de
tipul precizat mai sus.
• Atributul "coords" determină coordonatele zonei (vezi paragraful următor).
• Atributul "href" primeşte ca valoare URL-ul paginii către care punctează link-ul
zonei respective.
Obs: Dacă în locul unui atribut "href" apare nimic sau atributul "nohref" (fără valori
suplimentare) atunci acea zonă nu punctează către nici un alt document HTML.
Atributul <area> poate avea de asemenea şi atributul "target" care primeşte ca valoare
numele unei instanţe a browser-ului în care va fi afişată pagina către care punctează link-
ul zonei respective.

94
Coordonatele zonelor active
Pentru determinarea coordonatelor unei figuri
geometrice (dreptunghi, cerc sau poligon) se
X
utilizează un sistem de coordonate rectangular având
originea în colţul stânga-sus al imaginii utilizate ca
hartă, axa OX orizontală şi orientată spre dreapta iar
axa OY verticală şi orientată în jos (vezi figura
alăturată). Y
Unitatea de măsură este pixelul.

Un dreptunghi este determinat de coordonatele

vârfurilor stânga-sus (x1, y1) şi dreapta-jos (x2, y2) x1 x2
(vezi figura alaturată). X
Atributul "coords" primeşte atunci o valoare de forma y1
"x1, y1, x2, y2".
Exemplu: coords="100, 100, 200, 200".
y2

Un cerc este determinat de coordonatele centrului x

(x,y) şi de raza cercului (r) (vezi figura alăturată).
Atributul "coords" primeşte atunci o valoare de forma X
"x, y, r).
Exemplu: coords="400, 200, 100" y r

Un poligon este determinat prin succesiunea de

coordonate ale vârfurilor (x1, y1), (x2, y2), (x3, y3) etc.
Atributul "coords" primeşte ca o valoare de forma: (x1,y1) (x2,y2) X
"x1, y1, x2, y2, x3, y3, …".
Exemplu:
coords="100,300,200,300,400,400,100,400". (x4,y4) (x3,y3)

95
Utilizarea unei hărţi de imagini

Admitem că avem creată imaginea din figura 100 200 300 400 500 600
alăturată (vezi Anexa Hartă de imagini pentru un
mod de construire). Această imagine este salvată
pe disc în directorul curent de lucru sub numele 100
de "harta de imagini.gif".
Întrucât dimensiunile de afişare a imaginii vor fi 200
setate la 600 X 500 pixeli, figurile geometrice
vor avea coordonatele (vezi paragraful 300
precedent):
• "100,100,200,200" pentru pătrat; 400
• "400,200,100" pentru cerc;
• "100,300,200,300,400,400,100,400" pentru 500
poligon.
<html><head><title>Exemplul
12_1</title><head><body>
<h1>O harta de imagini</h1>
<img src="harta de imagini.gif"
usemap="#harta1" width="600"
height="500">
<map name="harta1">
<area shape="rect"
coords="100,100,200,200"
href="p2.html">
<area shape="circle"
coords="400,200,100" href="p3.html">
<area shape="poly"
coords="100,300,200,300,400,400,100,
400" href="p4.html">
</map>
</body></html>

Alte atribute ale elementului <area>

Există încă două atribute ale ale tag-ului <area> şi anume:
• atributul "alt" care permite inserarea unei scurte descrieri a link-ului către care
puncează zona activă respectivă (exemplu: alt="descrierea link-ului");
• atributul universal (valabil şi pentru alte elemente) "title" care permite inserarea în
pagina Web a unei mici ferestre în care este descris link-ul. Afişarea acestei ferestre
are loc atât timp cât mouse-ul se află deasupra zonei active.
<html><head><title>Exemplul
12_2</title><head><body>
<h1>O harta de imagini</h1>
<img src="harta de imagini.gif"
usemap="#harta1" width="600"
height="500">
<map name="harta1">
<area shape="rect" coords="100, 100,
200, 200" href="p2.html" alt="pagina 2"
title="Link catre pagina 2">
<area shape="circle" coords="400, 200,
100" href="p3.html" alt="pagina 3"
title="Link catre pagina 3">
<area shape="poly" coords="100, 300,
200, 300, 400, 400, 100,
400" href="p4.html" alt="pagina 4"
title="Link catre pagina 4">
</map>
</body></html>

96
Suprapunerea zonelor active
Dacă două sau mai multe zone active se suprapun atunci are prioritate prima care
apare definită în harta <map>…</map>.
Exemplul de mai declară în blocul <map>…</map> două zone circulare
concentrice dintre care zona de rază mai mică este inactivă. În felul acesta se crează o
zonă de forma unei coroane circulare.

<html>
<head>
<title>Exemplul 12_3</title>
<head><body>
<h1>O harta de imagini</h1>
<img src="harta.gif" usemap="#harta1"
width="600" height="500">
<map name="harta1">
<area shape="circle"
coords="300,250,100" nohref>
<area shape="circle"
coords="300,250,200" href="p3.html">
<area shape="default" href="p1.html">
</map>
</body></html>

Formulare
Interactivitatea
Interactivitatea unei pagini Web este definită ca posibilitatea ca un client
(utilizator) să comunice cu un server astfel încât utilizatorul să obţină informaţia de care
are nevoie.
Limbajul HTML, fiind o formă particulară de realizare a HiperText-ului, oferă
posibilitatea navigării între diversele surse de informaţii aflate pe INTERNET prin
intermediul link-urilor.
A doua posibilitate de a realiza interactivitatea pentru o pagină Web este oferită
de formulare (în engleză "form").
Un formular este un ansamblu de "zone active" alcătuit din butoane de apăsat,
căsuţe de selecţie, câmpuri de editare, etc. O sesiune de lucru cu o pagină Web ce conţine
un formular cuprinde următoarele etape:
1. Utilizatorul completează formularul şi îl expediază unui server;
2. O aplicaţie dedicată pe server analizează formularul completat şi (dacă este necesar)
stochează datele într-o bază de date;
3. Serverul expediază (dacă este necesar) un răspuns utilizatorului.
Un formular este definit într-un bloc delimitat de tag-urile corespondente <form>
şi </form>.
Observaţii:
• Blocurile <form> nu pot fi imbricate;
• Într-o pagină Web pot fi create oricâte formulare.

97
Atribute esenţiale ale elementului <form>
Există două atribute esenţiale ale elementului <form>:
1. Atributul "action" precizează ce se va întâmpla cu datele formularului odată ce
acestea ajung la destinaţie. De regulă valoarea atributului "action" este URL-ul unui
script aflat pe un server WWW care primeşte datele formularului, efectuează o
prelucrare a lor şi expediază către utilizator un răspuns. Exemplu:
<form action="htttp://www.edu.ro/cgi-bin/nume_script.cgi">.
Scripturile pot fi scrise în limbajele Perl, C sau Unix shel. Crearea unui astfel de script
depăşeşte nivelul acestei cărţi.
Observaţie: Valoarea atributului "action" poate fi de asemenea o adresă validă de e-
mail caz în care datele formularului sunt expediate prin poştă electronică pe adresa
specificată. În acest caz nu are loc o prelucrare automată a datelor din formular rămânând
destinatarului responsabilitatea citirii şi interpretării corecte a datelor primite. Exemplu:
<form action="mailto:stanp@edu.ro">
2. Atributul "method" precizează metoda utilizată de browser pentru expedierea datelor
formularului. Sunt posibile următoarele valori:
• "get" (valoarea implicită). În acest caz datele din formular sunt adăugate la URL-ul
precizat de atributul "action".
• Nu sunt permise cantităţi mari de date (maxim 1 Kb);
• Datele expediate se vor găsi pe serverul destinaţie stocate în variabila de
mediu "QUERY_STRING".
• Între URL şi date este pus "?". Datele sunt adăugate după sintaxa:
"nume_camp=valoare_camp". Între diferite seturi de date este pus "&".
Exemplu:
"http://www.edu.ro/cgi-bin/nume_script.cgi?nume1=valoare1&nume2=valoare2"
• "post". În acest caz datele sunt expediat separat. Sunt permise cantităţi mari de date.
(chiar de ordinul Mb).
Obs: Datele formularului se găsesc dispozitivul de intrare al serverului destinaţie iar
numărul de octeţi transmişi se află în variabila de mediu "CONTENT_LENGTH.POST".

Expedierea unui formular vid prin poştă electronică

Pentru ca un formular să fie funcţional trebuie să fie precizat ce se va întâmpla cu
el după completare şi expediere.
Cel mai simplu mod de utilizare al unui formular este ca el să fie expediat prin
poştă electronică (e-mail). Pentru aceasta se foloseşte un atribut al al tag-ului <form> şi
anume "action" care primeşte ca valoare "mailto:" concatenat cu o adresă validă de e-
mail către care se va expedia formularul completat (de exemplu "stanp@edu.ro".).

<html><head><title>Exemplul
13_1</title></head><body>
<h1>Un formular vid expediat prin e-
mail.</h1><hr>
Formularul nu se vede întrucât nu
contine nici un element.
<form action="mailto:stanp@edu.ro"
method="post">
</form>
</body></html>

98
Un formular cu un câmp de editare şi un buton de expediere
Acest exemplu prezintă un formular ce conţine un câmp de editare şi un buton de
expediere a formularului prin e-mail.
Majoritatea elementelor unui formular sunt definite cu ajutorul tag-ului <input>.
Pentru a preciza tipul elementului se foloseşte atributul "type" al tag-ului <input>. Pentru
un câmp de editare acest atribut primeşte valoarea "text".
Alte atribute sunt importante pentru un element <input> şi anume:
• Atributul "name" permite ataşarea unui nume fiecărui element al formularului;
• Atributul "value" permite atribuirea unei valori iniţiale unui element al
formularului. Această valoare iniţială poate fi ulterior modificată de utilizator.
La expedierea formularului se transmit către server perechi de forma
"nume=valoare" care cuprind numele elementului unui formular şi valoarea acestui
element.
Un buton de expediere al unui formular se introduce cu ajutorul tag-ului <input> în
care atributul "type" este setat la valoarea "submit". Acest element poate primi un nume
prin atributul "name". Pe buton apare scris "Submit Query" sau valoarea atributului
"value" dacă această valoare este setată.
<html><head>
<title>Exemplul 13_2</title>
</head>
<body>
<h1>Un formular cu un camp de editare si
un buton de expediere</h1><hr>
<form action="mailto:stanp@edu.ro"
method="post">
Numele:<input type="text" name="numele"
value="Numele si prenumele"><br>
<input type="submit" value="expediaza">
</form>
</body></html>

Obs: După completarea ca în figura de mai sus şi expedierea formularului către destinatar
acesta va găsi în interiorul mesajului următorul conţinut:
"numele=GUGOIU+TEODORU", caracterul "spaţiu" fiind reprezentat de "+".
Pentru elementul <input> de tipul câmp de editare (type="text") alte două atribute
sunt pot fi utile:
• Atributul "size" specifică lăţimea câmpului de editare. Dacă valoarea tastată într-un
câmp de editare depăseşte această lăţime atunci se execută automat un "scroll" al
acestui câmp.
• Atributul "maxlength" specifică numărul maxim de caractere pe care le poate primi
un câmp de editare. Caracterele tastate peste numărul maxim de caractere sunt ignorate.
<html><head><title>Exemplul
13_3</title></head><body>
<h1>Un formular cu un camp de editare
particularizat</h1><hr>
Latimea campului de editare este de 10
caractere.<br>
Numarul maxim de caractere admise este
de 20.<br>
<form method="post"
action="mailto:stanp@edu.ro">
<input type="text" name="numele"
value="Numele si prenumele" size="10"
maxlength="20"><br>
<input type="submit">
</form>
</body></html>

99
Observţii:
• Dacă atributul "type" lipseşte într-un element <input> atunci câmpul respectiv este
considerat implicit ca fiind de tip "text";
• Formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere.
Datele sunt expediate automat după completarea câmpului şi apăsarea tastei
"ENTER";
• Într-un formular pot exista mai multe butoane de expediere având atributul "name"
setat la valori diferite.

Butonul Reset
Dacă un element de tip <input> are atributul "type" setat la valoarea "reset" atunci
în formular se introduce un buton pe care scrie "Reset". La apăsarea acestui buton toate
elementele din formular primesc valorile implicite (definite odată cu formularul) chiar
dacă aceste valori au fost modificate de utilizator.
Un buton "Reset" poate primi un nume cu ajutorul atributului "name" şi o valoare
printr-un atribut "value". Pe un buton "Reset" este scris textul "Reset" dacă atributul
"value" lipseşte sau valoarea atributului "value" în caz contrar.

<html><head><title>Exemplul
13_4</title></head><body>
<h1>Un formular cu un buton
Reset</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Introduceti numele:
<input type="text" name="nume"
value="Numele"><br>
Introduceti prenumele:
<input type="text" name="prenume"
value="Prenumele"><br>
<input type="reset" value="sterge">
<input type="submit">
</form>
</body></html>

Câmp de editare de tip "Password"

Dacă se utilizează tag-ul <input> având atributul "type" setat la valoarea
"password" atunci în formular se introduce un element asemănător cu un câmp de editare
obişnuit (introdus prin type="text"). Toate atributele de la un câmp de editare rămân
valabile.
Singura deosebire constă în faptul că în câmpul de editare nu apar caracterele în
clar ci apar numai caractere "*" care ascund de privirile altui utilizator aflat în apropiere
valoarea introdusă într-un asemenea câmp.
La expedierea formularului însă se transmite în clar valoarea tastată într-un câmp
de tip "password".

100
 <html><head>
<title>Exemplul 13_5</title>
</head><body>
<h1>Un formular cu un camp
password</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Nume:<input type="text" name="nume"><br>
Prenume:
<input type="text" name="prenume"><br>
Password:<input type="password"
name="parola"><br>
<input type="reset" value="sterge"><br>
<input type="submit" value="expediaza">
</form>
</body></html>

Observaţie: La completarea formularului ca în figura de mai sus şi la completarea

câmpului de tip "password" cu "mishu" destinatarul va primi un mesaj având următorul
conţinut:
"nume=Ionescu&prenume=Mihai+Valentin&parola=mishu"

Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante dintre
mai multe variante posibile.
Butoanele radio se introduc prin tag-ul <input> având atributul "type" setat la
valoarea "radio".
Obs:
• Toate butoanele ce aparţin unei familii de butoane radio au acelaşi nume setat prin
atributul "name".
• Atributul "value" primeşte ca valoare un text care va fi expediat server-ului
împreună cu numele familiei de butoane.
• Atributul "checked" (fără alte valori) permite selecţia implicită a unui buton dintr-o
familie de butoane radio. Cel mult un atribut "checked" poate apare pentru o
aceeaşi familie de butoane radio.

<html><head><title>Exemplul
13_6</title></head><body>
<h1>Un formular cu butoane
radio</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Alegeti sexul:<br>
Barbatesc<input type="radio" name="sex"
value="b">
Femeiesc<input type="radio" name="sex"
value="f"><br>
<input type="reset">
<input type="submit">
</form>
</body></html>

La expedierea formularului se va transmite una din perechile "sex=b" sau "sex=f"

în funcţie de alegerea facută de utilizator.

101
Casete checkbox
O casetă de tip validare (checkbox) permite selecţia sau deselecţia unei opţiuni.
Pentru inserarea unei casete de tip "checkbox" se utilizează tag-ul <input> cu atributul
"type" setat la valoarea "checkbox".
Obs:
• Fiecare casetă poate avea un nume definit prin atributul "name";
• Fiecare casetă poate avea valoarea implicită "selectat" definită prin atributul
"checked" (nu sunt necesare alte valori);
• Fiecare casetă poate avea setat atributul "value" cu valoarea care va fi inclusă în
perechea "name=value" ce va fi expediată odată cu formularul. Dacă acest atribut
lipseşte atunci se va expedia perechea "name=on". Casetele care sunt deselectate nu
trimit către server perechi "name=value".

<html><head><title>Exemplul
13_7</title></head><body>
<h1>Un formular cu casete
checkbox</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Alegeti meniul:<br>
Pizza <input type="checkbox"
name="pizza" value="o portie">
Nectar <input type="checkbox"
name="nectar" value="un pahar">
Bere <input type="checkbox" name="bere"
value="o sticla">
Cafea <input type="checkbox"
name="cafea" value="o ceasca"><br>
<input type="reset">
<input type="submit">
</form>
</body></html>

Caseta "File"
Conţinutul întreg al unui fişier poate fi pe post de valoare într-o pereche
"name=value" a unui formular.
Pentru aceasta se inserează un element <input> într-un formular având ca
atributul "type" setat la "file" ("file" în engleză înseamnă fişier).
Alte trei atribute sunt utile pentru un element de tip "file":
• Atributul "name" permite ataşarea unui nume. Acest nume va apare în perechea
"name=value" expediată serverului;
• Atributul "value" primeşte ca valoare URL-ul fişierului care va fi expediat odată cu
formularul. Această valoare poate fi atribuită direct atributului "value", poate fi
tastată într-un câmp de editare ce apare odată cu formularul sau poate fi aleasă prin
intermediul unei casete de tip "File Upload" sau "Choose File" care apare la
apăsarea butonului "Browse…" din formular;
• Atributul "enctype" metoda utilizată la criptarea fişierului de expediat. Valoarea
acestui atruibut este "multipart/form-data".

102
 <html><head><title>Exemplul
13_8</title></head><body>
<h1>Un formular cu caseta file</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Alegeti fisierul:
<input type="file" name="fisier"
value="c:\html\p2.html"
enctype="multipart/form-data"><br>
<input type="reset">
<input type="submit">
</form>
</body></html>

Elementul "image"
Într-un capitol anterior au fost prezentate hărţile de imagini. În acest paragraf vom
afla despre un alt mod de a utiliza o imagine pe post de hartă (un click pe diferite zone ale
ei va determina diferite acţiuni).
Pentru aceasta utilizăm tag-ul <input> având atributul "type" setat la valoarea
"image". Următoarele atribute sunt utile când utilizăm acest element într-un formular:
• Atributul "src" primeşte ca valoare URL-ul imaginii care va fi folosită pe post de
hartă;
• Atributul "name" primeşte ca valoare un "nume" care va fi folosit la expedierea
datelor către server;
• Atributul "align" este folosit pentru alinierea imaginii în cadrul paginii Web. El
primeşte aceleaşi valori şi cu aceleaşi semnificaţii cu cele utilizate la alinierea unei
imagini.
Harta de imagini este de tip "server" şi funcţionează în felul următor:
• Utilizatorul efectuează click într-o zonă anumită pe suprafaţa imaginii;
• Imediat sunt trimise date către server-ul de pagini Web la care suntem conecaţi.
Aceste date sunt de forma "nume.x=valoare_x" şi "nume.y=valoare_y" unde
"nume" este valoarea atributului "name" iar "valoare_x" şi "valoare_y" reprezintă
coordonatele în pixeli ale punctului în care s-a făcut click pe imagine faţă de colţul
stânga-sus al imaginii.
• O aplicaţie dedicată pe server analizează aceste date şi în funcţie de coordinatele x
şi y ale punctului în care utilizatorul a efectuat click pe imagine se încarcă diferite
pagini Web.
Obs: Harta de imagini prezentată mai sus este de tip "server" deoarece deciziile
privind paginile care se vor încărca sunt luate de o aplicaţie aflată pe server.

<html><head>
<title>Exemplul 13_9</title>
</head><body>
<h1>Un formular cu o harta de imagini de
tip server</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
<input type="image" src="harta de
imagine.gif">
</form>
</body></html>

103
 Observaţii:
• În exemplul de mai sus lipsesc butoanele "Reset" şi "Submit Query" întrucât
formularul cu date este expediat către server ori de câte ori utilizatorul efectuează
click cu mouse-ul pe imagine. În acest fel o imagine poate fi folosită pe post de
buton de expediere a formularului.
• Exemplul de mai sus este numai pe jumătate funcţional. La efectuarea unui click pe
imagine, datele sunt cuprinse într-un e-mail şi expediate la adresa menţionată în
formular. În realitate datele sunt expediate către server în alt format (nu prin e-
mail), sunt analizate imediat de o aplicaţie aflată pe server (un script CGI) care
formulează şi trimite un răspuns utilizatorului. Configurarea serverului şi scrierea
unei asemenea aplicaţii depăseşte nivelul acestei cărţi;
• O serie de atribute de la elementul <img> (ca de exemplu "align") sunt aplicabile şi
la elementul <input image=…>.

Elementul "button"
Într-un formular pot apare butoane. Când utilizatorul apasă un buton se
declanşează în execuţie o funcţie de tratare a acestui eveniment. Limbajul HTML nu
permite scrierea unor astfel de funcţii (acest lucru este posibil dacă se utilizează limbajele
"JavaScript" sau "Java").
Pentru a insera un buton într-un formular se utilizează tag-ul <input> având
atributul "type" setat la valoarea "button". Alte două atribute utile ale elementului
"button" sunt:
• Atributul "name" permite ataşarea unui nume butonului;
• Atributul "value" primeşte ca valoare textul care va fi afişat pe buton.

<html><head><title>Exemplul
13_10</title></head><body>
<h1>Un formular cu un buton de
apasat</h1><hr>
<form action="mailto:stanp@edu.ro">
Acesta este un buton:
<input type="button" name="butonul1"
value="apasa aici"><br>
</form>
</body></html>

Obs: La apăsarea butonului din exemplul de mai sus nu se execută nimic întrucât
în pagina html nu există un script "JavaScript" care să trateze evenimentul de apăsare al
butonului. Scrierea unei astfel de script depăseşte nivelul acestei cărţi.

Elementul "hidden"
Elementul "hidden" este un câmp ascuns într-un formular în sensul că valoarea lui
nu va fi afişată în pagina Web.
Elementul "hidden" este inserat în formular cu ajutorul tag-ului <input> al cărui atribut
"type" primeşte valoarea "hidden". Un atribut esenţial al unui element de tip "hidden"
este atributul "value". Valoarea acestui atribut poate fi setată la crearea elementului sau
poate fi stabilită de un script JavaScript sau de un appplet Java.

104
 La expedierea formularului se transmite către server perechea
"nume_camp_hidden=valoare" unde "nume_camp_hidden" este valoarea atribuită
atributului "name" iar "valoare" este valoarea atributului "value".

<html><head><title>Elementul hidden</title></head><body>
<h1>Un formular cu un camp "hidden"</h1><hr>
<form action="mailto:stanp@edu.ro">
<input type="hidden" name="secret" value="10000$"><br>
</form>
</body></html>

Lista de selecţie
Lista de selecţie permite utilizatorului să aleagă unul sau mai multe elemente
dintr-o lista finită de elemente posibile.
Lista de selecţie este inclusă în formular cu ajutorul tag-urilor corespondente
<select> şi </select>.
O listă de selecţie poate avea setate următoarele atribute:
• Atributul "name" care ataşează un nume listei de selecţie (utilizat în perechile
"name=value" care sunt expediate server-ului);
• Atributul "size" care precizează (printr-un număr întreg pozitiv, valoarea implicită
fiind "1") câte elemente din listă sunt vizibile la un moment dat pe ecran (celelalte
devenind vizibile prin acţiunea "scroll-bar-ului" ataşat automat listei).
Obs: În mod implicit un singur element din listă poate fi selectat la un moment dat.
Pentru listele ce permit selecţii multiple vezi paragraful următor.
Elementele unei liste de selecţie sunt incluse în listă cu ajutorul tag-ului <option>.
Două atribute ale tag-ului <option> se dovedesc utile:
• Atributul "value" primeşte ca valoare un text care va fi expediat server-ului în
perechea "name=value". Dacă acest atribut lipseşte atunci către server va fi
expediat textul ce urmează după <option>.
• Atributul "selected" (fără alte valori adiţionale) permite selectarea implicită a unui
element al listei.

<html><head><title>Exemplul
13_11</title></head><body>
<h1>Un formular cu o lista de
selectie</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Universitatea absolvita:<br>
<select name="universitate" size="3">
<option value="B"> Universitatea din
Bucuresti
<option value ="CL" selected>
Universitatea din Cluj
<option value="TM"> Universitatea din
Timisoara
<option value="IS"> Universitatea din
Iasi
</select><br><br>
<input type="reset">
<input type="submit">
</form>
</body></html>

105
Lista de selecţie cu selecţii multiple
În mod implicit o listă de selecţie permite selecţia unui singur element din listă la
un moment dat. La expedierea formularului o singură pereche "name=value" va fi
expediată server-ului.
Există posibilitatea definirii unei liste de selecţie care să permită selectarea la un
moment dat a mai multor elemente din listă.
O listă de selecţie ce permite selecţii multiple se crează întocmai ca o listă de
selecţie obişnuită. În plus tag-ul <select> are un atribut "multiple" (fără alte valori).
Când formularul este expediat către server pentru fiecare element al listei care
este selectat se inserează câte o pereche "name=value" unde "name" este numele listei.

<html><head><title>Exemplul
13_12</title></head><body>
<h1>Un formular cu o lista de selectie ce
accepta selectii multiple</h1><hr>
<form action="mailto:stanp@edu.ro">
Limbi straine cunoscute:<br>
<select name="limbi straine" size="4">
<option value="e" selected> Engleza
<option value ="f">Franceza
<option value="g">Germana
<option value="s">Spaniola
<option value="i">Italiana
<option value="r">Rusa
</select><br><br>
<input type="reset">
<input type="submit">
</form>
</body></html>

Câmpul de editare multilinie

Într-un formular pot fi incluse şi câmpuri de editare multilinie. Acest lucru se face
cu ajutorul tag-ului <textarea>.Pentru a particulariza un câmp de editare multilinie se
folosesc următoarele atribute:
• Atributul "cols" specifică numărul de caractere care vor fi afişate într-o linie;
• Atributul "rows" specifică numărul de linii care vor fi afişate simultan;
• Atributul "name" permite ataşarea unui nume câmpului de editare multilinie;
• Atributul "wrap" ("wrap" vine de la "word wrap"=despărţirea în silabe a unui
cuvânt) determină comportamentul câmpului de editare faţă de sfârşitul de linie.
Acest atribut poate primi următoarele valori:
a) "off". În acest caz are loc:
• ruperea cuvintelor la marginea dreaptă a editorului se produce numai
când doreşte utilizatorul;
• includerea caracterului de sfârşit de linie în textul transmis server-ului
odată cu formularul;
b) "hard". În acest caz are loc:
• ruperea cuvintelor la marginea dreaptă a editorului;
• includerea caracterului de sfârşit de linie în textul transmis server-ului
odată cu formularul;
c) "soft". În acest caz are loc:
• ruperea cuvintelor la marginea dreaptă a editorului;

106
 • nu se include caracterului de sfârşit de linie în textul transmis server-
ului odată cu formularul;

<html><head><title>Exemplul
13_13</title></head><body>
<h1>Un formular cu un câmp de editare
multilinie</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
<textarea name="text multilinie"
cols="30" rows="5" wrap="off">
Prima linie din textul initial
Adoua linie din textul initial
</textarea>
<input type="reset">
<input type="submit">
</form>
</body></html>

Blocul "button"
Un buton pentru lansarea în execuţie a unei acţiuni poate fi introdus într-un
formular prin elementul <input> având atributul "type" setat la valoarea "button" aşa cum
s-a văzut mai sus.
Există o a doua modalitate de a introduce într-o pagină Web un buton de apăsat şi
anume prin intermediul blocului <button>…</button>.
Un astfel de buton poate fi inserat într-un formular, în acest caz având acţiuni
legate de acel formular sau poate fi inserat oriunde în pagină având acţiuni independente
de formulare.
Atributele posibile ale elemntului "button" sunt:
• "name" acordă elementului un nume;
• "value" precizează textul care va fi afişat pe buton;
• "type" precizează acţiunea ce se va executa la apăsarea butonului dacă acesta este
inclus într-un formular. Valorile posibile pentru acest atribut sunt:
• "button";
• "submit";
• "reset".
Observaţie: În corpul blocului <button>…</button> se poate afla un text sau poate fi
marcajul de inserare al unei imagini.

<html><head><title>Exemplul
13_15</title></head><body>
<h1>Blocul "button"</h1><hr>
Un buton simplu:<br>
<button name="butonul1">Apasa aici
</button><br>
<div style="background-color:yellow;">
<form method="post"
action="mailto:tgugoiu@edu.ro">
Numele:<input type="text"
name="numele"><br>
Prenumele:<input type="text"
name="prenumele"><br>
<button name="butonul2" type="submit">
<img src="Image20.gif" width="100">
</button>
</form></div>
</body></html>

107
Frame-uri
Frame-uri sau sub-ferestre
Până în acest moment în fereastra browser-ului era încărcat un singur document
HTML. Frame-urile ne permit să definim în fereastra browser-ului sub-ferestre în care să
fie încărcate documente HTML diferite.
Frame-urile sunt definite într-un fişier ".html" special în care blocul
<body>…</body> este înlocuit de blocul <frameset>…</frameset>.
În interiorul acestui bloc fiecare frame este introdus prin tag-ul <frame>. Un atribut
obligatoriu al tag-ului <frame> este "src" care primeşte ca valoare URL-ul documentului
HTML care va fi înărcat în acel frame.
Definirea frame-urilor se face din aproape în aproape prin împărţirea ferestrelor (şi
a sub-ferestrelor) în linii şi coloane:
• Împărţirea unei ferestre într-un număr de sub-ferestre de tip "coloană" se face cu
ajutorul atributului "cols" al tag-ului <frameset> ce descrie acea fereastră.
• Împărţirea unei ferestre într-un număr de sub-ferestre de tip "linie" se face cu
ajutorul atributului "rows" al tag-ului <frameset> ce descrie acea fereastră.
• Valoarea atributelor "cols" şi "rows" este o listă de elemente (pentru fiecare sub-
fereastră câte un element) separate prin virgulă care descriu modul în care se face
împărţirea. Elementele listei pot fi:
a) Număr întreg de pixeli;
b) Procente din dimensiunea ferestrei (număr între 1 şi 99 terminat cu "%");
c) "n*" care înseamnă n părţi din spaţiul rămas posibil.
Obs: Dacă mai multe elemente din listă sunt setate cu "*" atunci spaţiul rămas
disponibil pentru ele se va împărţi în mod egal.
Exemplu 1: "200, *, 50%, *" înseamnă o împărţire în 4 sub-ferestre, prima fiind de
200 de pixeli, a treia fiind jumătate din spaţiul total disponibil, a doua şi a patra ocupând
restul de spaţiu rămas disponibil în mod egal.
Exemplu 2: "200, 1*, 50%, 2*" înseamnă o împărţire în 4 sub-ferestre, prima fiind
de 200 de pixeli, a treia fiind jumătate din spaţiul total disponibil, a doua şi a patra
ocupând restul de spaţiu rămas disponibil care se împarte în trei părţi egale, a doua
fereastră luând o parte iar a patra fereastră luând 2 părţi.
Obs: O sub-fereastră poate fi un frame (folosinduse <frame>) în care se va încărca un
document HTML sau poate fi împărţită la rândul ei în alte sub-ferestre (folosindu-se
<frameset>).

<html><head><title>Exemplul
14_1</title></head>
<frameset cols="*,*">
<frame src="p1.html">
<frame src="p2.html">
</frameset>
</html>

Observaţie: Exemplul de mai sus presupune că în prealabil au fost create două

fişiere ".html" numite "p1.html" şi "p2.html" şi că acestea se află în directorul curent de
lucru.

108
 În exemplul următor este creată o pagină Web cu trei frame-uri orizontale. Al
doilea frame are atributul "src" setat la URL-ul unei imagini.

<html>
<head>
<title>Exemplul 14_2</title>
</head>
<frameset rows="100,*,10%">
<frame src="p1.html">
<frame src="cnmv.jpg">
<frame src="p3.html">
</frameset>
</html>

În exemplul următor este creată o matrice de 6 frame-uri (2 X 3). Pentru a realiza

acest lucru se folosesc simultan cele două atribute "cols" şi "rows".

<html>
<head>
<title>Exemplul 14_3</title>
</head>
<frameset rows="*,*" cols="*,*">
<frame src="p1.html">
v <frame src="p2.html">
<frame src="p3.html">
<frame src="p4.html">
</frameset>
</html>

În exemplul următor este creată o pagină Web având trei frame-uri mixte. Pentru
a o crea se procedează din aproape în aproape. Mai întâi pagina este împărţită în două
sub-ferestre de tip "coloană" după care a două sub-fereastră este împărţită în două sub-
ferestre de tip "linie".

<html><head><title>Exemplul
14_4</title></head>
<frameset cols="20%,*">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>

109
În exemplul următor pagina Web este construită cu ajutorul a două fişiere ".html" în care
sunt configurate frame-urile:

<html><head><title>Exemplul
14_5</title></head>
<frameset cols="20%,*">
<frame src="p1.html">
<frame src="frame.html">
</frameset>
</html>

<html><head><title>Fisierul
"frame.html"</title></head>
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</html>

Culori pentru chenarul frame-urilor

Pentru a seta culoarea chenarului unui frame se utilizează atributul "bordercolor".
Acest atribut primeşte ca valoare un nume de culoare sau o culoare setată în conformitate
cu modelul de culoare RGB. Atributul "bordercolor" poate fi ataşat atât tag-ului
<frameset> pentru a seta culoarea tuturor chenarelor frame-urilor incluse sau tag-ului
<frame> pentru a seta culoarea chenarului pentru un frame individual.

<html><head><title>Exemplul
14_6</title></head>
<frameset cols="20%,*"
bordercolor="red">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html"
bordercolor="green">
<frame src="p3.html">
</frameset>
</frameset>
</html>

Dimensionarea chenarului unui frame

Atributul "border" al tag-ului <frameset> permite setarea lăţimii chenarului
tuturor frame-urilor incluse la un număr dorit de pixeli.
Obs:
• Valoarea implicită a atributului "border" este de 5 pixeli;
• O valoarea de "0" pixeli va implica frame-uri fără chenar.

110
 <html><head><title>Exemplul
14_7</title></head>
<frameset cols="20%,*" border="20">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>

În exemplul următor se utilizează border="0" pentru a obţine frame-uri fără chenar.

<html><head><title>Exemplul
14_8</title></head>
<frameset cols="20%,*" border="0">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>

Chenare invizibile
În mod implicit chenarul unui frame este afişat şi are un aspect tridimensional.
Afişarea chenarului unui frame poate fi inhibată dacă se utilizează atributul
"frameborder" setat la valoarea "no". Acest atribut poate fi ataşat atât tag-ului <frameset>
(inhibarea fiind valabilă pentru toate frame-urile incluse) cât şi tag-ului <frame>
(inhibarea fiind valabilă numai pentru un singur frame).
Obs: Valorile posibile ale atributului "frameborder" sunt:
• "yes" echivalent cu "1";
• "no" echivalent cu "0".

<html><head><title>Exemplul
14_9</title></head>
<frameset cols="20%,*" frameborder="no">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>

111
Bara de defilare
Atributul "scrolling" al tag-ului <frame> este utilizat pentru a adăuga unui frame o
bară de defilare care permite navigarea în interiorul documentului afişat în interiorul
frame-ului.
Valorile posibile sunt:
• "yes", barele de defilare sunt adăugate întotdeauna;
• "no", barele de defilare nu sunt utilizabile;
• "auto", barele de defilare sunt vizibile atunci când este necesar.

<html><head><title>Exemplul
14_10</title></head>
<frameset cols="*,*,*">
<frame src="p.html" scrolling="yes"
noresize>
<frame src="p.html" scrolling="no"
noresize>
<frame src="p.html" scrolling="auto"
noresize>
</frameset>
</html>

Poziţionarea documentului într-un frame

Atributele "marginheight" şi "marginwidth" ale tag-ului <frame> permit setarea
distanţei în pixeli dintre conţinutul unui frame şi marginile verticale respectiv orizontale
ale unui frame.
Valorile posibile sunt:
• număr de pixeli;
• procent din lăţimea respectic înălţimea frame-ului.

<html><head><title>Exemplul
14_11</title></head>
<frameset cols="*,*,*">
<frame src="p.html">
<frame src="p.html" marginheight=20>
<frame src="p.html" marginwidth=20>
</frameset>
</html>

Chenare fixe
Atributul "noresize" al tag-ului <frame> (fără nici o valoare suplimentară) dacă este
prezent inhibă posibilitatea implicită a utilizatorului de a redimensiona frame-ul cu
ajutorul mouse-ului.

Browser-e vechi
Pentru browser-e vechi care nu acceptă frame-uri există posibilitatea ca în pagina
Web să apară un avertisment care să invite utilizatorul să instaleze o versiune mai
modernă pentru browser.
Pentru aceasta se utilizează tag-ul <noframes> în interiorul blocului <frameset>.

112
 <html><head><title>Exemplul
14_12</title></head>
<frameset cols="*,*">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
<noframes><body>
<p>Aceasta pagina contine farme-uri.
<p>Pentru o varianta fara frame-uri a
acestei pagini vizitati:
<a href="pff.html">Pagina fara frame</a>
</body></frameset>
</html>

Frame-uri in-line
Un frame "in-line" se inserează într-o pagină Web în mod asemănător cu o
imagine. Pentru a insera un frame "in-line" utilizăm blocul <iframe>…</iframe>.
Atributele acceptate de tag-ul <iframe> sunt în parte preluate de la tag-urile <frame> şi
<frameset> ca:
• "src", "border", "frameborder", "bordercolor", "marginheight", "marginwidth",
"scrolling", "name", "noresize";
sau sunt preluate de la tag-ul <img> ca:
• "vspace", "hspace", "align", "width", "height".

<html><head><title>Exemplul
14_13</title></head><body>
<a href="p1.html" target="ilf">Pagina
1</a><br>
<a href="p1.html" target="ilf">Pagina
1</a><br>
<a href="p1.html" target="ilf">Pagina
1</a>
<center><iframe width="60%" border=2
bordercolor=red name="ilf" src="p.html">
Daca vedeti acest text inseamna ca
browser-ul dumneavoastra nu suporta
frame-uri "in-line".
<a href='pffil.html">Pagina fara frame-
uri in-line</a>
</iframe></center></body></html>

113
8. Elemente de design ale paginilor Web
Un element esenţial pentru oricare site este uşurinţa în navigare în cadrul
acestuia. Aici sunt importante etichetele şi indicaţiile (tool tip-urile) care descriu exact şi
în acelaşi timp succint destinaţia şi/sau rezultatul unui anumit link. Vizitatorul trebuie să
poată identifica rapid legăturile pe care doreşte să să le urmeze.
Orice vizitator trebuie să ştie în orice moment unde se află în site şi de aceea
trebuie proiectată foarte atent structura modului de navigare. Astfel în cazul unui
meniu trebuie marcată secţiunea aleasă de vizitator. În cazul unui meniu cu submeniuri
este util ca în momentul în care s-a realizat o selecţie a unui element de meniu să se
deschidă submeniul acestuia şi să se ascundă cel al opţiunii selectate anterior.
Link-urile către pagina principală (home page) şi către cele de start ale
categoriilor trebuie plasate pe fiecare pagină. În site plasarea categoriilor importante se
va face la începutul unei pagini iar a celor adiţionale mai jos. Este recomandabil
includerea în fiecare pagină a unor link-uri către secţiunile cele mai importante ale site-
ului. Pentru o navigare uşoară se poate furniza şi o hartă a site-ului.
Dacă în pagină există multe informaţii (care depăşesc dimensiunea verticală a
ferestrei browser-ului) atunci se vor plasa link-uri către partea superioară a paginii astfel
încât vizitatorul să nu fie obligat să deruleze înapoi toată pagina pentru a merge mai
departe.
Chiar dacă site-urile bazate pe imagini grafice impresionează mai mult, totuşi de
cele mai multe ori vizitatorii caută informaţii bazate pe text. În acest sens formatarea şi
prezentarea textului reprezintă elemente importante de design în realizarea site-ului. Un
procedeu mult utilizat este cel de a realiza o serie de rezumate despre conţinutul
secţiunilor (sau al articolelor) astfel încât vizitatorul să poată găsi foarte repede ceea ce
caută. Este recomandabil utilizarea unui sistem piramidal astfel încât vizitatorul să poată
vedea încă de la început câteva detalii despre subiect şi dacă doreşte să poată accesa tot
textul.
Se recomandă ca secţiunile de link-uri să fie separate de text. De asemenea
secţiunile de link-uri se vor plasa la începutul şi la sfârşitul textului pentru a nu distrage
atenţia în citirea şi înţelegerea acestuia.
O problemă importantă o reprezintă alegerea caracterelor cu care va fi scris
textul. Browser-ele vor afişa diferit textul în funcţie de tipul lor şi de sistemul de operare
sub care lucrează. Nu trebuie folosite fonturi care este probabil să nu existe pe sistemul
de operare al vizitatorului. Caracterele diacritice vor fi afişate corect sau nu în funcţie de
meta tag-urile utilizate în pagini şi de configurarea browser-ului. De exemplu pentru a
putea fi realizată corect scrierea cu diacritice româneşti trebuie ca fontul utilizat să fie
instalat la client iar în paginile Web să existe: <meta http-equiv=”content-Type”
content=”text/html;charset=ISO-8859-2”>.
Studiile efectuate în privinţa formatării textului au indicat că este mai uşor de citit
un paragraf aliniat la stânga decât unul centrat sau aliniat la dreapta.
În ceea ce priveşte browser-ul şi rezoluţia, unele site-uri specifică în mod expres
aceste elemente (browser-ul, rezoluţia şi adâncimea de culoare) pentru care au fost
proiectate. Grafica utilizată în site reprezintă un subiect foarte important ce trebuie
cunoscut de către proiectanţii de pagini Web. Atunci când se începe proiectarea unui site

114
Web primul lucru care trebuie efectuat este stabilirea unei scheme de culori. Deşi pare o
decizie simplă schema de culori aleasă poate atrage sau îndepărta mulţi vizitatori.
Cu cât sunt utilizate mai multe culori într-un un site, cu atât mai mult se dovedeşte
un aspect neprofesional al proiectării acestuia. Una dintre schemele de culori folosite cel
mai frecvent este text negru pe fond alb. Pentru ca scrisul să fie lizibil culoarea sa şi cea a
fondului trebuie să fie complementare. În general se obişnuieşte ca textul să aibă o
culoare închisă, în timp ce fundalul să aibă una deschisă. Site-urile care utilizează o
schemă inversă celei prezentate sunt mai obositoare, ceea ce determină cel mai frecvent
ca un vizitator să nu încarce mai mult de trei pagini. Totuşi schema de culori reprezintă
un element subiectiv şi de aceea se recomandă dacă este posibil, ca fiecare vizitator al
site-ului să-şi poată alege interactiv o schemă de culori care îi convine cel mai mult. O
adresă Web la care pot fi întâlnite mai multe scheme de culori recomandate poate fi
găsită la www.colorschemer.com.
Imaginile reprezintă un element grafic de atracţie al site-ului. Ele pot fi statice
sau animate, însă în ambele cazuri se recomandă ca dimensiunea lor să fie cât mai mică,
pentru a determina o viteză ridicată de încărcare a paginilor site-ului.
Într-un site imaginile pot fi ajutătoare sau detaliate. Cele ajutătoare au dimensiuni
mai mici şi o rezoluţie mai scăzută. Opţional prin accesarea lor pot deveni vizibile
imaginile detaliate care au dimensiuni mai mari şi rezoluţii mai bune. Este bina ca suma
imaginilor ajutătoare de pe o pagină să nu depăşească câteva zeci de kb.
Cel mai frecvent se utilizează în paginile Web imagini în format GIF sau JPEG.
Formatul GIF este mai bun pentru redarea imaginilor care au suprafeţe fără detalii.
Totuşi formatul GIF este limitat doar la o paletă de maxim 256 culori. Imaginile care
conţin diferite tonalităţi de culoare pot fi redate cel mai bine în formatul JPEG care
permite afişarea a peste 16 milioane de culori. Imaginile animate sunt de tip GIF animat
care permite memorarea unei secvenţe formate din mai multe imagini succesive ce pot fi
afişate cu o anumită viteză de rulare în mod transparent sau nu. Dacă se doreşte utilizarea
unor animaţii speciale pot fi folosite obiectele flash - Macromedia, dar care necesită
foarte multe resurse atât în proiectare cât şi în afişare, ceea ce determină pentru vizitator
necesitatea de a avea o lăţime de bandă destul de mare pentru a nu aştepta foarte mult
încărcarea acestora.
Foarte frecvent fişierele de tip imagine au foarte multe culori şi nuanţe. Astfel ele
tind să fie foarte mari şi implică un timp mare de descărcare, ceea ce poate determina pe
unii vizitatori să abandoneze consultarea site-ului. Fişierele de tip imagine care se vor
utiliza în paginile Web trebuie să fie optimizate. Există mai multe metode pentru a
realiza un compromis între o imagine cu multe culori şi o viteză crescută de descărcare a
ei. Dimensiunea fişierelor de tip imagine poate fi micşorată prin reducerea paletei de
culori şi prin reducerea dimensiunilor orizontale şi verticale ale imaginii. Rezoluţia
standard pentru imaginile de Web este de 72 dpi.

115
Glosar de termeni

browser / utilitar de vizualizare a fişierelor conţinute de un server WWW

navigator
client o staţie de lucru, un terminal sau un PC, o componentă software,
solicitând o activitate de la un server
client e-mail este un program specializat de primire şi transmitere de
e-mail-uri. Exemplu : Microsoft Outlook, Eudora, etc.
download copierea unui fişier de pe un calculator server pe calculatorul
client utilizat
e-mail poşta electronică; serviciu de reţea oferind facilităţi de schimb
electronic de mesaje şi fişiere ataşate între utilizatori
FTP File Transfer Protocol; protocol Internet pentru transfer de fişiere
hiperdocument colecţie de noduri înrudite, legate prin hiperlegături. Un
hiperdocument poate conţine hiperlegături către date care există
intern în acelaşi document
hiperlegătură un set de una sau mai multe ancore; uzual se foloseşte termenul
"legatură"
hipertext format al informaţiei în care documentele sunt legate unul cu
celălalt printr-un set de cuvinte selectate (marcate în text); pentru
fiecare cuvânt marcat în document, hipertextul dă posibilitatea
creării unei legături logice cu alt document care explică
semnificaţia conceptului sau dă detalii suplimentare referitoare la
el
HTML HyperText Markup Language; limbaj de marcare care defineşte
modul de structurare a unui document hipertext
HTTP HyperText Transfer Protocol; protocolul utilizat în comunicarea
între "client"-ul şi "server"-ul WWW
Internet Explorer browser, software de navigare (de tip client WWW)
ISP companie furnizoare de servicii Internet ("Internet Service
Provider"); în afara unei conexiuni la reţea (Internet), aceste
companii mai pot oferi şi alte servicii – găzduire site-uri
(hosting), e-mail etc.
link, hyperlink zonă de text sau imagine pe care se face click pentru a se realiza
transferul (saltul) la altă pagină sau site Web
meniu o listă afişată, cuprinzând opţiuni sau funcţii din care utilizatorii
pot alege una pentru a activa programele sau operaţiile dorite
Netscape Browser, software de navigare (de tip client WWW)

116
procesare distribuirea resurselor calculator într-o reţea, utilizând un client
client/server (o staţie de lucru sau un terminal), un server care asigură puterea
de calcul, o reţea care conectează împreuna clienţii cu server-ele
şi un software care rulează pe server şi pe client
reţea o configuraţie de echipamente de procesare de informaţie
conectate prin linii de comunicaţie pentru a împărţi informaţia şi
resursele
server un nod sau un proces care execută un serviciu sau un set de
servicii înrudite pentru clienţii săi. Vezi client
TCP/IP nume generic folosit pentru un set de protocoale de reţea pe
diverse niveluri; unele dintre acestea, cum ar fi IP, TCP si UDP
furnizează funcţiile de nivel inferior necesare celor mai multe
aplicaţii, altele sunt protocoale dedicate unor funcţii specifice
Telnet protocol de terminal virtual în Internet
tipul mediului un atribut al datelor care descrie natura prezentării. Valoarea
acestui atribut poate fi una din următoarele:
• text
• sunet
• imagine (ex.: fotografie)
• grafica (ex.: desen)
• animaţie (grafică animată)
• film (imagine animată)
upload copierea unor fişiere de pe calculatorul client pe un calculator
server
URL Universal/Uniform Resource Locator; defineşte numele (modul
de localizare) a unui nod sau a unei resurse din Internet
WEB abreviere pentru WWW (World Wide Web); este constituit
dintr-o colecţie neorganizată de milioane de documente
răspândite pe servere în întreaga lume. Între aceste documente se
poate „naviga” cu ajutorul link-urilor sau folosind URL-ul
paginii dorite
WWW World-Wide Web (numit şi W3); sistem de informare bazat pe
hipertext, permiţând navigarea (deplasarea) de la un document la
altul în cadrul unei reţele de informare

117
Bibliografie

Courtner, Gini Iniţiere în Microsoft Office 2000, Editura ALL,

Marquis Annette Bucureşti, 1999
Eddings, Joshua How the Internet Works, Ziff-Davis Press, Emeryvile,
California, 1994
Gugoiu, Teodoru HTML prin exemple, Editura TEORA 2000
Jamsa, K. Programarea Web, Editura ALL, Bucureşti, 1999
Kerman, Phillip Macromedia Flash 5, Editura Teora 2001
Lon, Coley Dreamweaver 4 şi Firewors 4 în imagini, Editura Kondyli,
Timişoara, 2001
Pătruţ, Bogdan Internet pentru începători, Editura Teora, 2003
Tyler, Denise Microsoft FrontPage 98, Editura TEORA 1999
Crystal D. Erickson
*** Informatică Internet, Note de Curs
*** Informatică Internet, Curs Multimedia
*** Dreamweaver, FrontPage, Netscape Composer,
Fireworks – Help şi Tutorial

Notă:
În realizarea cărţii s-au folosit şi foarte multe resurse din Internet, studii sau articole
scrise de diferiţi autori din lumea întreagă.

118