INTERNETUL MIJLOC DE INFORMARE I

COMUNICARE

Lector univ. dr. Mihai Gavot

1

INTERNETUL MIJLOC DE INFORMARE I

COMUNICARE

Bucureti - 2004

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

2. NOIUNI FUNDAMENTALE, CONCEPTE I TERMENI............................................... 9
REELE DE CALCULATOARE ......................................................................................................... 9
Criterii de clasificare a reelelor ............................................................................................ 9
Topologii i protocoale ........................................................................................................... 9
Componentele hardware ale unei reele ............................................................................... 10
Protocoalele unei reele ........................................................................................................ 10
INTERNET I WORLD WIDE WEB (WWW)................................................................................. 11
HTTP, HIPERLEGTURI, FTP, ISP, URL ................................................................................... 11
FORMAREA I STRUCTURA ADRESELOR WEB ............................................................................. 12
ADRESELE IP, CLASELE DE ADRESE IP I REZOLUIA ADRESELOR ............................................. 14
COMENZI UTILE DIN LINIA DE COMAND .................................................................................... 14
3. BROWSER-UL, NAVIGAREA WEB I MOTOARELE DE CUTARE....................... 17
BROWSER-UL ............................................................................................................................. 17
NAVIGAREA WEB....................................................................................................................... 20
MOTOARELE DE CUTARE .......................................................................................................... 23
4. SECURITATEA N INTERNET .......................................................................................... 25
CERTIFICATELE DIGITALE .......................................................................................................... 25
Autentificarea........................................................................................................................ 25
Confidenialitatea comunicrii ............................................................................................. 25
Criptarea simetric, cu cheie public i cheie privat ......................................................... 26
VIRUI INFORMATICI I FIREWALL.............................................................................................. 26
Virui informatici .................................................................................................................. 26
Firewall................................................................................................................................. 27
COOKIES I CACHE ...................................................................................................................... 27
5. POTA ELECTRONIC ...................................................................................................... 29
SECURITATEA E-MAIL ................................................................................................................ 29
FORMAREA I STRUCTURA ADRESELOR DE E-MAIL ..................................................................... 30
UTILIZAREA APLICAIEI 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 FIIER HTML ........................................................................... 41
Sfritul 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 ngroate .............................................................................................................. 47

Caractere mrite ................................................................................................................... 47

Caractere micorate.............................................................................................................. 48
Caractere nclinate spre dreapta .......................................................................................... 48
Caractere "sub-" i "super-script" ........................................................................................ 48
Caractere subliniate i caractere "tiate de o linie"............................................................. 49
Stiluri fizice i stiluri logice .................................................................................................. 49
Blocuri evideniate ................................................................................................................ 49
Blocuri de caractere monospaiate ....................................................................................... 50
Blocuri de caractere clipitoare ............................................................................................. 50
Imbricarea tag-urilor ............................................................................................................ 50
SETAREA FONTURILOR ............................................................................................................... 51
Culori .................................................................................................................................... 51
Culoarea unui font ................................................................................................................ 51
Familia fontului..................................................................................................................... 52
Mrimea 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 definiii..................................................................................................................... 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 coninutului 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 fiiere pentru imagini ............................................................................................ 71
URL-ul unei imagini.............................................................................................................. 71
Prima pagin Web care conine o imagine........................................................................... 72
Adresarea relativ................................................................................................................. 72
Chenarul unei imagini........................................................................................................... 73

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 fiiere externe ...................................................................................................... 78
Faciliti ale formatului GIF ................................................................................................ 79
Utilizri speciale ale imaginilor ........................................................................................... 79
LINK-URI................................................................................................................................. 79
Interactivitatea unei pagini Web........................................................................................... 79
Link ctre o pagin aflat n acelai director....................................................................... 80
Link ctre o pagin aflat pe acelai disc local ................................................................... 80
Link ctre un site particular.................................................................................................. 81
Utilizarea unei imagini ca "zon activ".............................................................................. 81
Ancore ................................................................................................................................... 81
Instane multiple pentru un browser ..................................................................................... 83
Alegerea culorilor pentru link-uri......................................................................................... 84
Link ctre un server FTP ...................................................................................................... 84
Utilizarea potei electronice ................................................................................................. 84
Link-uri ctre fiiere oarecare.............................................................................................. 85
Ancore definite prin atributul "id" ........................................................................................ 85
DOCUMENTAREA UNEI PAGINI WEB ........................................................................................... 86
Un element pentru meta-informaii....................................................................................... 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 fiierului....................................................................................................................... 89
Limba utilizat ...................................................................................................................... 89
Reactualizarea paginii curente din browser......................................................................... 89
Comentariile ......................................................................................................................... 90
SUNETE I VIDEOCLIP-URI .......................................................................................................... 91
Formate pentru fiierele de sunet ......................................................................................... 91
Link-uri ctre fiiere de sunet ............................................................................................... 91
Formate pentru fiierele de videoclipuri .............................................................................. 91
Link-uri ctre fiiere de video-clipuri................................................................................... 92
Sunetul de fond pentru o pagin Web ................................................................................... 92
Video-clipuri inline ............................................................................................................... 92
HRI DE IMAGINI ...................................................................................................................... 94
Folosirea unei imagini ca "hart de imagini" ..................................................................... 94
Coordonatele zonelor active ................................................................................................. 95
Utilizarea unei hri de imagini............................................................................................ 96
Alte atribute ale elementului <area> ................................................................................... 96
Suprapunerea zonelor active ................................................................................................ 97
FORMULARE ............................................................................................................................... 97

Interactivitatea ...................................................................................................................... 97
Atribute eseniale ale elementului <form> ........................................................................... 98
Expedierea unui formular vid prin pot electronic ........................................................... 98
Un formular cu un cmp de editare i un buton de expediere .............................................. 99
Butonul Reset....................................................................................................................... 100
Cmp 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 selecie ................................................................................................................... 105
Lista de selecie cu selecii multiple.................................................................................... 106
Cmpul 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
Poziionarea 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

1. Scurt istoric
Proiectul ARPA
n anii 60 n cadrul Departamentului Aprrii Statelor Unite ale Americii
(DOD, Department of Defense) funciona Agenia pentru Proiecte de Cercetare
Avansate (ARPA, Advanced Research Projects Agency). Agenia primete ca proiect
de cercetare realizarea practic a interconectrii reelelor de computere ale bazelor
militare americane. Aceast inter-reea (ARPA) trebuia construit astfel nct s
reziste unui atac atomic din partea unui potenial inamic.
IP (Internet Protocol)
Protocolul IP a fost conceput special pentru a putea satisface obiectivele reelei
ARPA n condiii de atac inamic. Protocolul realizeaz dirijarea informaiei ntr-o
inter-reea.
Pachete
Conform acestui protocol, nainte de fi lansat n Internet o informaie trebuie
mprit n pachete. Fiecare pachet va avea capacitatea de a circula n mod
independent n Internet. Un pachet va conine:
adresa sursei;
adresa destinaiei;
numrul pachetului n cadrul informaiei;
un identificator pentru informaia transmis.
Datorit faptului c pachetele conin i adresa destinaiei, acestea pot circula
independent n Internet i pot ajunge la destinaie ntr-o ordine oarecare, la momente
de timp arbitrare. La destinaie pachetele sunt repuse n ordine i astfel informaia
iniial este refcut.
1969, ARPANET
n anul 1969 la dezvoltarea proiectului ARPA au fost invitate s participe i
patru universiti civile americane. n acest an reeaua 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 iniial pentru informarea i crearea
grupurilor de discuii pe diferite domenii de interes tiinific.
Anii 80
Apare protocolul TCP/IP care aduce corecii la vechiul protocol IP. n aceti
ani ncep s fie interconectate supercalculatoarele din centrele universitare americane.
Anii 90
Dup anul 1990 pe Internet i fac apariia firmele comerciale. Aceste firme
prin investiiile aduse contribuie foarte mult la dezvoltarea Internet-ului.
7

InterNIC
Dei Internetul nu are o structur administrativ bine determinat, dup 1990
se face simit nevoia unui organism care supervizeze activitile care se petrec pe
Internet. Astfel a aprut InterNIC.
RFC (Request for Comments)
Orice inovaie adus n tehnologiile legate de Internet care devine suficient de
matur pentru a fi acceptat unanim de ctre utilizatori este cunoscut sub forma unei
Cereri de Comentariu (Request for Coments). Exist astzi cteva 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 cercettori a datelor tiinifice
(text i imagini). Aceast metod a condus la naterea celui mai popular serviciu
Internet World Wide Web ( n traducere pnza de paianjen ntins ct lumea ntreag).

2. Noiuni fundamentale, concepte i termeni

Reele de calculatoare
La modul cel mai general o reea de calculatoare reprezint o configuraie de
echipamente de procesare de informaie conectate prin linii de comunicaie ce pot mpri
n comun informaia i resursele disponibile.
Criterii de clasificare a reelelor
n funcie de tipul de conectare putem distinge: reele conectate prin cabluri
speciale, prin radio, prin linii telefonice, prin fibr optic etc.
Indiferent de tipul mediilor de conectare, n funcie de extinderea acestora,
reelele pot fi:
- reele locale - LAN (Local Area Network);
- reele metropolitane - MAN (Metropolitan Area Network);
- reele de arie larg - WAN (Wide Area Network);
n funcie de mediul de interconectare distingem:
- reele bazate pe cabluri:
o Ethernet necesit cabluri speciale;
o HomePNA utilizeaz liniile telefonice deja existente;
o HomePlug utilizeaz cablurile reelei electrice;
- Reele fr 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 reelelor include perifericele, plcile de reea i toate celelalte
echipamente necesare pentru a realiza transmisia i procesarea datelor n cadrul reelei
(hub-uri, repetoare, switch-uri, routere etc).
Modurile n care sunt conectate cablurile, computerele i alte periferice constituie
topologia fizic a reelei, iar metoda utilizat pentru transferul informaiei ntre staiile 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 capt;
- Star n acest tip de topologie, fiecare nod de reea (server, staie de lucru sau
periferic) este conectat ntr-un hub sau switch central care controleaz toate
funciile reelei;
- Tree acest tip de reea combin caracteristicile topologiilor Linear Bus i Star.
Ea const ntr-un grup de staii de lucru configurate n stea (Star), conectate
ulterior la un cablu liniar (Linear Bus).

Componentele hardware ale unei reele

n afar de staiile de lucru i de servere, principalele componente ale unei reele
sunt echipamentele care asigur transmisia semnalului: plci de reea, hub-uri, switch-uri,
repetoare de semnal, bridge-uri i routere.
Plcile de reea sunt cele care realizeaz conectarea fizic ntre reele i staiile
de lucru. Sunt principalele dispozitive care determin viteza i performana unei reele.
Conexiunile dintre cabluri i staiile de lucru, servere i periferice sunt mediate de
ctre hub-uri. Unele modele sunt pasive , permind doar trecerea semnalului de la un
calculator la altul fr nici o modificare. n prezent majoritatea hub-urilor sunt active,
ceea ce nseamn c ele vor amplifica electric semnalul transmis n reea.
Deoarece un semnal pierde din amplitudine atunci cnd 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 reea 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 reea ce selecteaz calea prin intermediul creia
datele sunt trimise ctre urmtoarea destinaie. Switch-ul determin calea i locul specific
din reea n care trebuie trimise datele. Aceast funcie poate fi ndeplinit i de ctre
router dar switch-ul este un mecanism mai simplu i mai rapid dect acesta. Timpul
necesar unui switch pentru a localiza punctul n care trebuie transmise datele se numete
laten i reprezint unul din principalele dezavantaje ale acestui dispozitiv, mai ales n
reelele de mari dimensiuni.
Pentru a eficientiza funcionarea reelelor de mari dimensiuni se poate folosi un
dispozitiv numit bridge (pod). Bridge-ul monitorizeaz traficul dintr-o reea mprit n
dou segmente, transmind pachetele de informaie ctre locaiile corecte. Majoritatea
bridge-urilor pot identifica mesajele, transmindu-le ulterior automat ctre adresele
specificate ale calculatoarelor, permind astfel traficul continuu prin blocarea celui
inutil.
Router-ele transmit informaiile ntre dou reele distincte, putnd 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 destinaie. n plus ele pot analiza i
traficul pentru a identifica care sunt segmentele cele mai solicitate, redirecionnd 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 reea care funcioneaz ca poart ctre o alt
reea. De exemplu n cazul conectrii unei reele locale la Internet unul dintre
calculatoarele din reea va avea i rolul de gateway iar adresa lui va trebui cunoscut de
toate celelalte calculatoare din reea.
Protocoalele unei reele
Setul de reguli care guverneaz comunicarea ntre calculatoarele unei reele este
denumit protocol, acesta standardiznd principalele caracteristici ale interconectrii:
metode de acces, topologia fizic, tipurile de cabluri i viteza de transfer a datelor. Cele

10

mai comune protocoale de reea 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-reea WAN (Wide Area Network) din
lume care poate fi considerat ca fiind un sistem global format din calculatoare diferite
sau din reele de calculatoare interconectate, ce utilizeaz un protocol comun de
comunicaie. Ca i un sistem de telefonie el permite calculatoarelor de oriunde din lume
s fac schimb de informaii prin intermediul unor legturi. Internetul const ntr-o
multitudine de legturi ntre calculatoare aflate la distan. Informaia este transmis de la
o legtur la alta prin intermediul unor calculatoare (router-e) care stabilesc rutele optime
pe care se vor transmite mesajele la destinaii. Funcionarea Internetului se bazeaz pe
filozofia client-server. Pe calculatoarele conectate funcioneaz aplicaii software de tip
Internet care pot fi aplicaii de tip client sau aplicaii de tip server. Aplicaiile de tip client
lanseaz cereri de informaii (servicii) ctre aplicaiile de tip server care analizeaz
cererile i apoi trimit informaiile (serviciile) solicitate clienilor ndreptii s le
primeasc. Aplicaiile 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 ntlnim n Internet aplicaii de tip
server WWW, server FTP, server E-MAIL, server NEWS etc i aplicaii de tip client
WWW (browser-ul), de tip client E-MAIL i NEWS (Outlook Express). Un protocol este
o combinaie de reguli de comunicaie i formate de mesaje care trebuie respectate de
ctre aplicaiile Internet pentru a face posibil schimbul de date i de mesaje. Protocoalele
sunt standarde care furnizeaz servicii de comunicaie ntre calculatoare.
WWW (World Wide Web care n traducere nseamn o pnz de pianjen 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 comunicaie, serviciul
WWW permite localizarea documentelor Web prin intermediul unui sistem aproape
infinit de legturi. Hipertextul Web trebuie interpretat ca un text care poate conine
legturi i referine ctre alte documente i informaii Web pe care le poate identifica i
apela.

HTTP, hiperlegturi, FTP, ISP, URL

HTTP (HyperText Transfer Protocol) este un protocol de reea proiectat special
pentru Web. Prin intermediul unui browser (Internet Explorer, Netscape Navigator etc)
utilizatorul poate accesa informaia (text, imagini, sunete, animaii) aflat pe un server
WWW. Transferul de informaie se face prin intermediul protocolului numit HTTP,
protocolul de transfer a hipertextului i a dou aplicaii software Internet: aplicaia server
WWW i aplicaia client WWW (browser). De regul browser-ul solicit server-ului Web

11

(WWW) o anumit pagin Web care este un fiier text ce conine marcatori (tag-uri)
HTML. Ca rspuns al browser-ului server-ul Web va transfera ctre acesta o copie a
fiierului solicitat. Dup descrcare, browser-ul va parcurge acest fiier iar atunci cnd va
ntlni marcatori ce trimit ctre alte resurse (text, imagini, sunete etc) va solicita serverului copii ale acestor fiiere.
Limbajul de Marcare a HiperTextului (HTML) este un limbaj special de marcare
utilizat pentru crearea documentelor cu hiperlegturi (hyperlinks).
Hiperlegturile reprezint marcatori ce realizeaz legturi ctre alte documente
sau resurse Web. Link-urile (legturile) transform un text obinuit n "hipertext" sau
"hipermedia". Ele permit trecerea rapid de la o informaie aflat pe un anumit server la
alt informaie aflat pe un alt server oriunde n lume. Atunci cnd se navigheaz sub un
browser, link-urile apar ca "zone active" ntr-o pagin Web, adic zone pe ecran sensibile
la apsarea butonului (de regul cel stng) al mouse-ului. Un click efectuat cu mouse-ul
pe un link este interpretat ca o cerere ctre un anumit server Web de a expedia ctre
computerul client o resurs ctre care link-ul respectiv puncteaz. n felul acesta paginile
Web devin interactive (adic rspund la aciuni iniiate de utilizator).
Pentru accesul direct i performant la fiierele 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 fiiere de la un sistem la altul.
De asemenea sunt necesare cele dou tipuri de aplicaii Internet (server FTP i client
FTP).
Un calculator sau o reea 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 crora pot fi conectai clienii (abonaii) pe baza unui cont (nume utilizator i
parol) obinut de la furnizorul de servicii. Conexiunile cu clienii pot fi realizate n
modaliti 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 nelegem un calculator, un disc pe un calculator, un fiier
aflat pe un calculator sau un fragment dintr-un fiier 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 urmtoarea 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 ctre

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 mprit 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 mprite la rndul lor n subdomenii (domenii de nivel 2). De
exemplu domeniul ro cuprinde ca subdomenii pe snspa, comunicare, kappa, pcnet, etc.
La rndul lor domeniile de nivel 2 pot fi mprite 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

roedu

netscape

ro

comunicare

edu

kappa

developer

snspa

mit

comunicare

Pentru a obine numele unui domeniu se parcurge ascendent structura arborescent a

subdomeniilor pn la rdcin. Exemple de domenii:
comunicare.snspa.ro (aici subdomeniul comunicare aparine domeniului snspa);
comunicare.ro (aici domeniul comunicare aparine 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 ctre un fiier aflat pe computerul de pe Internet.
5. ancora reprezint un reper (etichet) n interiorul unui fiier 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 rezoluia adreselor

Protocolul IP (Internet Protocol) asigur dirijarea pachetelor de date n Internet
pentru ca acestea s poat ajunge la destinaie. Aa cum am precizat anterior fiecare
pachet circul independent n Internet ntruct el are ncapsulat adresa destinaiei 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 numr binar pe 32 de bii. 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 urmtoarele 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 reea 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 reea Ethernet se face prin intermediul unor plci
de reea de tip Ethernet. Fiecare plac de reea are o adres hardware (nscris n
momentul fabricrii) format dintr-un numr pe 48 de bii. De regul aceast adres se
exprim prin 6 grupe de cte 2 cifre hexagesimale. Exemplu: 6d 34 5f 4e bc 9a.
Pentru a afla adresa hardware a plcii de reea 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 plcii de reea (hardware), exemplu: a1 b2 c3 23 ae f5

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

mecanism numit de rezoluie a adreselor.

Comenzi utile din linia de comand

Pentru a verifica conexiunea la Internet exist un numr 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 opiunea Run i apoi se tasteaz command i Enter.
14

hostname
Afieaz numele de gazd al computerului

ipconfig
Afieaz adresa IP (software) a computerului, masca de reea i gateway-ul (poarta
implicit).

ping
Verific conexiunea cu un computer prin trimiterea i recepionarea unui pachet de date
de dimensiuni reduse.

15

route print
Afieaz adresa hardware a plcii de reea i tabela de rutare.

tracert
Afieaz serverele intermediare ntre un computer surs i un computer destinaie.

16

3. Browser-ul, navigarea Web i motoarele de cutare

Browser-ul
Browser-ul este o aplicaie Internet de tip client WWW care respect protocolul
HTTP (HyperText Transfer Protocol) ce permite realizarea de legturi independente ntre
documentele Web n scopul vizualizrii acestora. Browser-ul este un instrument software
necesar pentru navigarea n Web. Scopul principal al acestei aplicaii este citirea textului
i afiarea imaginilor sau a altor informaii multimedia aflate pe un server Web. Browserul poate consulta i paginile Web aflate pe un calculator neconectat la Internet. n mod
obinuit browser-ul recepioneaz informaia de afiat sub forma unor fiiere care conin
texte scrise n limbajul HTML (HyperText Markup Language). Utilizarea browser-ului pe
un calculator legat la o reea permite ca fiierele de pe un alt computer s poat fi copiate
n computerul gazd i apoi s fie consultate. Browser-ele moderne ofer faciliti pentru
afiarea imaginilor, a video-clipurilor i pentru redarea sunetelor.
Deschiderea (lansarea n execuie) a unui browser se poate realiza dnd double
click (sau click) pe pictograma browser-ului (exemplu Internet Explorer):
din Desktop,
din Launchbar (bara de lng meniul de start) sau
din meniul Start prin accesarea opiunii corespunztoare.
nchiderea browser-ului se poate realiza similar nchiderii unei aplicaii
Windows:
dnd click pe butonul x al ferestrei,
alegnd opiunea Close din meniul File,
tastnd combinaia de taste Alt-F4.
Atunci cnd se lanseaz n execuie un browser Web, n funcie de felul n care
este setat, va ncerca s ncarce o pagin Web (Home Page) aflat la o anumit adres
URL sau va ncrca o pagin vid (Blank). Aceast prim pagin pe care o va afia
browser-ul la startare se numete pagina de start (Home Page). Ea poate fi schimbat prin
intermediul dialogului Internet Options ce poate fi lansat din opiunea cu acelai nume
aflat n meniul Tools al browser-ului sau n Control Panel.

17

Afiarea unei pagini Web ntr-o fereastr nou poate fi realizat lansnd o nou
instan a browser-ului i retastnd adresa URL a paginii dorite sau prin intermediul
meniului contextual al unui link (click pe butonul drept al mouse-ului) i apoi alegerea
opiunii Open in New Windows.

Dac se dorete reafiarea aceleiai pagini Web (curente) ntr-o fereastr nou, se
poate utiliza combinaia de taste Ctrl-N sau se poate alege din meniul File al
browser-ului opiunea New i apoi Window.
Dac se dorete stoparea ncrcrii unei anumite pagini Web se poate apela la
butonul Stop al browser-ului aflat n Toolbar.

Refresh-ul (rencrcarea) unei pagini Web existent n fereastra browser-ului i

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

Barele de unelte (Toolbars) pot fi afiate sau ascunse prin intermediul opiunii
Toolbars din cadrul meniului View al browser-ului i pot fi configurate prin meniului
contextual al Toolbar-ului (opiunea Customize).

18

Submeniul Toolbars disponibilizeaz opiunea Customize (personalizare) care

dac va fi lansat va oferi posibilitatea aducerii n barele de meniuri a butoanelor ce
realizeaz aciunile dorite.

Afiarea 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 setrii opiunii Show Pictures (afiarea cu imagini sau fr).

19

Afiarea adreselor URL vizitate anterior poate fi realizat sub forma unui meniu
derulant (combo box) care apare atunci cnd se d un click pe triunghiul cu vrful n jos
aflat n bara de adrese.

Accesarea butonului History din Toolbar ofer o alt modalitate de a afia

adresele URL vizitate anterior. El va determina deschiderea unei ferestre noi n partea
stng a browser-ului, ce va disponibiliza posibilitatea consultrii i selectrii adreselor
URL vizitate n fiecare zi din sptmna 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 cnd 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 mn) i de
asemenea n funcie 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 aceleiai pagini sau la o alt pagin
Web (ancor) aflat pe acelai server sau pe un alt server. n funcie de coninutul noii
adrese URL se poate declana o operaiune de download (descrcare a unei resurse din
Internet), transmiterea datelor unui formular sau se poate afia un nou coninut de pagin
Web.
Navigarea nainte i napoi printre paginile Web vizitate se poate realiza prin
intermediul butoanelor Back i Forward.

20

Atunci cnd 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
dispoziie un sistem de memorare a adreselor paginilor favorite, i de reaccesare a lor din
cadrul unui meniu numit chiar Favorites. Adugarea (memorarea) n Favorites a adresei
URL a unei pagini curente aflate n fereastra browser-ului se face cu opiunea Add to
Favorites selectat din meniul cu acelai nume (Favorites).

Prin intermediul meniului contextual, este posibil adugarea n Favorites a

adresei URL a unui link din pagina Web curent.

Afiarea unei pagini Web din bookmarks se poate realiza oricnd 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 opiunea cu acelai nume aflat n meniul Favorites.
tergerea bookmark-ului unei pagini Web se poate realiza prin intermediul
butonului Delete din cadrul aceluiai dialog Organize Favorites sau apsnd tasta Delete
cnd 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 nti se va selecta textul dorit, apoi din meniul
contextual al seleciei se va alege opiunea 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 destinaia 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 opiunea Copy, iar apoi
prin Paste, imaginea va fi copiat (duplicat) la o destinaie (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 alegndu-se din meniul contextual comanda Copy Shortcut. O alt
modalitate de a copia o adres URL dintr-o pagin Web prin acelai mecanism Copy &
Paste o constituie opiunea Properties.
Coninutul unei pagini Web se poate salva ca fiier text (.txt) sau (.html) prin
intermediul opiunii Save as existent n meniul File al browser-ului. Dup selectarea
acestei opiuni (Save as) apare un dialog (Save Web Page) prin intermediul cruia poate
fi selectat calea i numele fiierului n care se va salva coninutul paginii curente. De
asemenea se poate selecta tipul fiierului care va fi salvat (html, htm, txt).
Cel mai frecvent paginile Web ofer vizitatorilor link-uri speciale pentru
descrcarea unor arhive ce pot conine fiiere de tip text, de tip imagine, de tip sunet,
video sau produse software. Aceste fiiere exist arhivate (zip, rar, ace etc sau sub forma
autoextractabil exe) pentru a putea fi descrcate mai rapid,.
Procesul de descrcare (download) a fiierelor din hard disc-ul server-ului pe hard
disc-ul calculatorului personal se poate realiza n mai multe modaliti:
dnd click n link-ul respectiv;
prin intermediul meniului contextual alegnd opiunea Save Target As;
prin intermediul unui downloader (un program specializat pentru descrcarea rapid a
unui fiier din Internet ex.: FlashGet, Download Accelerator, GetRight etc).
Salvarea unei imagini dintr-o pagin Web se poate realiza prin intermediul
opiunii Save Picture As din cadrul meniului contextual (aferent imaginii) sau n cazul
browser-ului Internet Explorer v.6.x, alegnd opiunea Save this image din bara de unelte
ce apare atunci cnd prompter-ul mouse-ului se afl deasupra imaginii.
Meniul File al browser-ului pune la dispoziie posibilitatea de a previzualiza o
pagin Web nainte de tiprire prin intermediul opiunii Print Preview.
Schimbarea orientrii portrait (cu pagina aezat pe lungime) sau landscape (cu pagina
aezat pe lime) a unei pagini Web ce va fi tiprit, poate fi realizat prin intermediul
dialogului Print, seciunea Layout. Dialogul Print devine disponibil dac din meniul File
s-a ales opiunea Print. Schimbarea dimensiunii hrtiei se poate realiza prin intermediul
opiunii Page Setup din cadrul meniului File. Dup lansarea acestei opiuni va deveni
disponibil dialogul Page Setup care prin cmpul Size (mrime) va permite modificarea
dimensiunii hrtiei pe care se va lista la imprimant. Opiunea Print a meniului File pune
la dispoziie un dialog special prin intermediul cruia poate fi stabilit coninutul ce va fi
tiprit: ntreaga pagin Web, doar o pagin anume din cadrul documentului Web, un
frame (o seciune, o sub-fereastr a unei ferestre a browser-ului), un text selectat, numrul
de copii ce se vor tipri.

22

Motoarele de cutare
Motoarele de cutare sunt servere specializate n stocarea de meta-informaii
(adic a informaiilor despre informaii) care ofer utilizatorilor posibilitatea de a gsi
(regsi) informaiile dorite n site-urile n care acestea exist.
Selectarea unui motor de cutare se poate face n mai multe feluri:
tastnd 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
cutare dorit (dac acesta a mai fost accesat de curnd sau dac are adresa memorat
n Favorites);
prin intermediul butonului Search din Toolbar care va deschide un dialog cu cteva
opiuni de cutare: Find a Web page (pentru o pagin Web), Find a Person (pentru o
persoan), Find a map (pentru o hart) etc.

Iat n continuare cteva adrese ale celor mai puternice motoare de cutare:
www.google.com,
www.yahoo.com,
www.altavista.com,
www.excite.com,
www.lycos.com.
n acest moment Google conine cea mai mare baz de date, n care se gsesc
peste 3 miliarde de pagini. Pentru a clasifica o pagin Web, Google contorizeaz numrul
de link-uri care conduc la aceasta. Deci o pagin Web cu ct va avea mai multe trimiteri
(referine) din alte site-uri, cu att va avea un scor de relevan mai mare.

23

Motoarele de cutare pun la dispoziie mecanisme de cutare dup unul sau mai
multe cuvinte cheie sau dup fraze. Orice motor de cutare ofer minim o bar de cutare
Search (Caut) n care exist un cmp de editare n care pot fi tastate aceste cuvinte sau
fraze i un buton Search care odat apsat va declana ctarea.

Motoarele de cutare pun la dispoziie opiuni de a construi relaii 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 cuta
informaii i concepte sinonime, ntorcnd astfel toate nregistrrile unice, ce conin
primul, al doilea sau ambii termeni inclui.
Operatorul AND (similar cu +) inserat ntre dou cuvinte cheie va determina
ntoarcerea strict a rezultatelor care conin ambele cuvinte cheie. Dac se combin mai
muli termeni cutarea va avea un grad mai nalt de specificitate.
Operatorul NOT (similar cu -) permite excluderea informaiilor (paginilor Web)
care conin termenii introdui dup el.
Unele motoare de cutare printre care se numr i Google i Yahoo pun la
dispoziie faciliti avansate de cutare 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 cnd avei ncredere ntr-o autoritate de certificare, aceasta presupune c
avei ncredere n exigena acesteia n ceea ce privete evaluarea cererilor de acordare a
certificatelor. Totodat avei 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 clienilor sau poate fi consultat i extras de acetia din pagina Web
a autoritii de certificare.
Certificatele sunt folositoare pentru o gam larg de servicii de securitate, cum
sunt:
Autentificarea verificarea identitii cuiva sau a ceva.
Confidenialitatea asigurarea faptului c la anumite informaii are acces numai un
anumit public.
Criptarea prelucrarea informaiei astfel nct cititorii neautorizai s nu o poat
descifra.
Semnturi 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 faa celor cu care comunic i la rndul
lor s verifice identitatea acestora. Verificarea identitii n reea este un proces complex.
Prile care comunic nu se ntlnesc fizic i din acest motiv o persoan ruvoitoare poate
intercepta mesajele sau poate ncerca s se substituie altcuiva.
Certificatul digital este o acreditare obinuit care d posibilitatea verificrii
identitii. Aceste certificate digitale sunt criptate (codificate) pentru a limita posibilitatea
ca mesajele s fie interceptate, modificate sau contrafcute. Tehnicile de criptare sunt
complexe astfel nct certificatele digitale vor fi dificil de modificat pentru ca o persoan
s se substituie alteia.
Confidenialitatea comunicrii

Schimbul de informaii n reea, inclusiv n Internet poate fi monitorizat (urmrit)

de persoane necunoscute i posibil ru intenionate. Reelele publice sunt nesigure pentru
informaia important i cu un anume grad de confidenialitate atunci cnd aceasta nu
este criptat. Oricine poate accesa reeaua i poate analiza fluxul de informaii dintre dou
puncte. Chiar i reelele locale private sunt vulnerabile la eforturile perseverente ale unor
ruvoitori care doresc s aib acces fizic la informaia din reea.

25

Deci, utilizatorii care trimit informaii importante ntre dou dispozitive conectate
n orice tip de reea vor trebui s foloseasc o tehnic de criptare pentru a asigura
confidenialitatea acesteia.
Criptarea simetric, cu cheie public i cheie privat

Criptarea poate fi imaginat ca i cnd ceva de valoare este ncuiat ntr-o cutie
rezistent. Similar, decriptarea poate fi comparat cu descuierea cutiei i accesul liber la
valorile dinuntru. n calculator, datele importante sub forma unor fiiere de pe hard disc
sau fiiere transmise prin reea pot fi criptate folosind o cheie de criptare. Att datele
criptate ct i cheia de criptare sunt prelucrate (transformate) astfel nct s nu poat fi
citite (nelese) de persoane nedorite.
Cea mai simpl form de criptare este criptarea simetric, adic folosirea unei
chei de criptare care trebuie cunoscut de toi cei care vor s decripteze informaiile
respective.
O alt metod este criptarea cu cheie public ceea ce presupune existena a dou
chei pereche ntre care exist o legtur stabilit matematic.
O cheie, numit cheie privat, este pstrat secret de ctre persoana care dorete
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 dect de ctre cel care cunoate 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.

Virui informatici i firewall

Virui informatici

Navigarea n Internet presupune implicit i asumarea anumitor riscuri generate de

posibilitatea apariiei unor pericole cum sunt: viruii informatici, viermii de reea,
spionarea coninutului hard-discului calculatorului propriu, atacuri informatice externe n
scopuri distructive.
Atunci cnd printr-o procedur de descrcare (download) declanat cel mai
frecvent prin accesarea unui link) se descarc pe calculatorul propriu fiiere din Internet,
este foarte posibil ca acestea s conin virui informatici. Fiierele descrcate pot fi sau
pot conine 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 conine diferii virui informatici (macrodefiniii, virui de boot, virui care infecteaz
fiierele executabile, virui ai sistemului de operare etc) ce vor ncerca s se instaleze n
calculatorul gazd atunci cnd respectivele fiiere (virusate) vor fi accesate.

26

n acest sens dup ce un fiier a fost descrcat 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 fiier
descrcat din Internet i orice fiier accesat. Dac programul antivirus nu are aceast
component atunci fiierele descrcate din Internet vor trebui verificate de ctre
programul antivirus prin declanarea manual a unei scanri.
Avnd n vedere c n prezent exist creai peste 100.000 de virui informatici i
c probabilitatea de infectare a unor fiiere cu aceti virui este foarte mare, nu se mai
recomand lucrul (mai ales n Internet) fr a avea instalate programe antivirus
corespunztoare, actualizate cu ultimele semnturi de virui informatici descoperii.
Firewall

n urma lansrii n execuie pe calculatorul personal a unor aplicaii (descrcate

din Internet, a unor fiiere ataate mesajelor e-mail, a unor programe externe) neverificate
corespunztor cu un program antivirus actualizat cu ultimele semnturi, este foarte
posibil ca acestea s instaleze i o aplicaie de tip server numit cal troian. Aceast
aplicaie va putea servi cu informaia solicitat (din calculatorul infectat) pe un client
(hacker) care are o aplicaie de tip client corespunztoare. Informaia va fi transmis
clientului prin aceeai conexiune prin care calculatorul personal este conectat la Internet.
De asemenea este posibil ca o aplicaie 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 prelurii controlului asupra calculatorului personal sau n scopul consultrii
(copierii) fiierelor aflate pe acesta.
Pentru evitarea acestor pericole este indicat ca pe lng 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 coninutul informaiei transmise sau
recepionate prin conexiunea Internet i care s identifice rapoartele cailor troieni i
solicitrile sau scanrile externe ale unor aplicaii de tip client. Programul de tip firewall
va trebui s fie n msur s informeze despre aceste ncercri i s le stopeze aciunile.

Cookies i cache
Un cookie este un fiier text pe care o aplicaie 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 setrilor 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 clienilor care nu pot memora cookie-uri. Cookie-urile au o durat de via
stabilit de ctre aplicaia server. Dup expirarea acesteia ele se autodistrug. Cookie-urile
pot conine i informaie nscris criptat. Prin intermediul cookie-urilor n calculatorul
client (al vizitatorului) se pot memora date despre vizitatori, despre preferinele acestora
etc. Aceste informaii pot fi citite apoi de ctre aplicaia 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 ct mai
bine actualii sau viitorii poteniali clieni.
Deoarece de multe ori conexiunile Internet nu funcioneaz 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
navigrii 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 modificri, n loc s fie descrcate din calculatorul server, respectivele
pagini s fie rencrcate local, din zona de cache. n timpul navigrii n cache-ul Internet
al browser-ului se memoreaz nu numai coninutul text (HTML) al paginilor Web vizitate
ci i resursele aferente acestora: imagini, sunete video-clipuri etc. ceea ce face ca
ncrcarea acestor pagini n fereastra browser-ului s se produc mult mai repede.
Dimensiunea zonei de cache (n MB) poate fi modificat prin intermediul opiunilor de
configurare ale browser-ului.
Cookie-urile i fiierele 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 dispoziie aceste utiliti (butoanele Delete Cookies i Delete
Files).

28

5. Pota electronic
Serviciul e-mail este n prezent unul dintre cele mai larg rspndite servicii
Internet deoarece permite transmiterea rapid a mesajelor electronice, este foarte ieftin,
uneori chiar gratis, face posibil transferul de fiiere ataate mesajelor, asigur faciliti
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,
utiliznd 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 cnd se transmit mesaje e-mail trebuie respectate cteva reguli
elementare de bun sim ce constituie baza unei netetichete numite Basic Electronic
Mail Netiquette. Iat n continuare cteva dintre cele mai importante recomandri pe
care aceasta le face:
s nu se redacteze mesajul unui e-mail numai cu majuscule;
s se rspund cu promptitudine mesajelor e-mail;
s fie urmrit cu atenie felul n care este redactat mesajul, avndu-se n vedere faptul
c se folosete o exprimare scris, nonverbal;
s se verifice cu atenie mesajul nainte de a fi transmis, astfel nct acesta s nu
conin greeli gramaticale i de ortografie;
n cazul n care se rspunde la un mesaj, s nu se returneze ntregul mesaj original ci
s foloseasc quot-area dubl (plasarea semnelor >>) numai naintea rndurilor la
care se rspunde;
s se foloseasc o semntur electronic automat (care include informaii 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 fiiere ataate nesolicitate;
s se utilizeze linia Subject n care s se fac o descriere succint a coninutului
mesajului;
s nu se trimit prin facilitatea forward glume dect dac este foarte sigur c toi cei
care vor primi mesajul doresc aceasta;
dac un mesaj este trimis la mai multe adrese e-mail odat, pe ct 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 reeaua AOL (America On Line).

Securitatea e-mail
Transmiterea de e-mail nesolicitat sau spamming-ul cum mai este denumit
aceast operaiune, a devenit n prezent un fenomen ngrijortor datorit efectelor pe care
le poate produce: aglomerarea mesajelor n server-ele e-mail, ngreunarea citirii i
selecionrii mesajelor utile de cele nedorite, pericolul consumrii rapide a spaiului
alocat pentru e-mail pe hard disc-ul ISP-ului (Internet Service Provider), ncrcarea
conexiunilor Internet cu informaie nedorit, posibilitatea infectrii cu virui informatici
sau cu cai troieni prin intermediul fiierelor ataate,.

29

n prezent exist n Internet foarte multe firme comerciale, mici ntreprinztori i

hackeri sau persoane ru intenionate care folosesc frecvent aceast tehnic. S-au creat
mari baze de date de adrese e-mail care se vnd 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 atenie sporit
fa de persoanele crora le dm adresa de e-mail sau fa de site-urile la care completm
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 opiunii Cc
(Carbon Copy) care face vizibil ntregul coninut al listei de adrese e-mail la care au fost
trimise mesajele.
Pentru a lupta mpotriva acestui fenomen exist programe specializate pentru
nlturarea din csua potal 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 nsoite de fiiere ataate, exist
permanent pericolul infectrii pe aceast cale cu virui informatici, cu viermi de reea
sau cu cai troieni. n acest sens se recomand atenie sporit la deschiderea unor mesaje
e-mail primite de la adrese necunoscute sau la consultarea fiierelor ataate, care pot
declana instalarea unor virui informatici, cai troieni etc n calculatorul gazd.
Se recomand existena pe calculatorul personal a unui program antivirus
performant, actualizat permanent (on line) cu ultimele semnturi de virui informatici
nou aprui 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 maina destinatarului, iar pe baza numelui din adres se realizeaz livrarea local a
mesajului n csua potal a destinatarului.
O adres e-mail nu poate conine spaii. Urmtorul mod de exprimare a acesteia
este greit: stan petre @comunicare.ro.

30

Utilizarea aplicaiei e-mail Outlook Express

Deschiderea unei aplicaii e-mail se poate face din:

Launchbar (bara de lng meniul de start),
din opiunea corespunztoare 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 acetia putnd avea propria interfa Outlook i o
securitate asigurat prin nume i parol care s nu permit dect un acces personalizat n
csu potal. Comutarea ntre diferite identiti poate fi realizat prin intermediul
opiunii Switch Identity din meniul File.

Dup ce un utilizator a intrat n aplicaie, el poate s-i deschid seciunea Inbox

foarte simplu, dnd click pe aceast opiune aflat n seciunea Folders.

31

Outlook Express permite deschiderea unuia sau mai multor mesaje e-mail din
Inbox se poate realiza dnd double click pe titlul acestora din fereastra din partea dreapt
sus n care exist afiate mai multe cmpuri: 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 activnd ferestrele dorite printr-un click dat pe o poriune din suprafaa acestora
(dac este vizibil), sau selectndu-le din Taskbar. Dac se utilizeaz tastatura atunci
combinaia de taste Alt-Tab ofer de asemenea posibilitatea selectrii ferestrei mesajului
dorit.
Comutarea ntre mesaje se mai poate realiza dnd click pe titlul mesajului sau prin
intermediul sgeilor de direcie sus i jos acionate n cadrul ferestrei mesajelor.
ntodeauna va fi deschis n seciunea (fereastra) din dreapta jos, mesajul al crui titlu este
selectat prin bara transparent de culoare (albastr care l acoper).

32

Adugarea, tergerea informaiilor aferente mesajelor poate fi realizat prin

intermediul meniului contextual al barei de identificare a mesajelor din care va fi aleas
opiunea Columns. Aceast opiune va disponibiliza un dialog cu acelai nume.
Dialogul Columns va permite alegerea informaiilor aferente mesajelor e-mail
care vor fi afiate n coloanele din fereastra Inbox (dreapta sus) care conine titlurile
mesajelor.

n partea stng a aplicaiei Outlook Express exist

seciunea (fereastra) Folders care permite crearea unor folder-e noi
(corespunztoare unor anumite subiecte sau problematici) n care
pot fi mutate prin Drag & Drop mesajele dorite.
Mesajele nedorite pot fi terse, ele ajungnd 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 acelai nume care face posibil accesarea
listei. Apsarea butonului Address Book din Toolbar permite crearea / actualizarea
agendei (listei) de adrese Address Book.

33

Adugarea unei noi adrese e-mail ntr-o list de adrese se poate face apsnd
butonul New din Toolbar-ul dialogului Addres Book, sau prin intermediul seciunii
Contacts (aflat n partea din stnga jos a aplicaiei Outlook) apelnd opiunea New
Contact. Oricare dintre variante va lansa dialogul Properties care va oferi suport pentru
ncrcarea n Address Book a unei noi adrese e-mail (i a informaiilor aferente acesteia).

Adugarea n Address Book a unei adrese de e-mail dintr-un mesaj primit se

poate realiza dac din meniul Tools se va alege opiunea 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 dorete trimiterea unui mesaj la mai multe adrese de e-mail odat.
Spre deosebire de metoda Cc care permite ca toi 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 cmpurile Cc i Bcc pot fi completate n mod similar
cu felul n care s-au completat adresele e-mail din cmpul To:.
Sub Outlook Express cmpul Bcc va fi vizibil doar dac din meniul View va fi
selectat opiunea All Headers.

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

35

Dup completarea cmpurilor Subject, To (eventual Cc) i a coninutului

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) utilizndu-se opiunea Cc
(Carbon Copy). Carbon Copy se presupune c toate adresele de e-mail au fost nscrise
(de ctre expeditor) desprite prin (;) n linia Cc.
Dac se dorete s se rspund la mesajul primit prin returnarea total sau parial
a acestuia, avnd fiecare linie precedat de caracterul > exist dou posibiliti:
s se rspund numai expeditorului i pentru aceasta se va utiliza opiunea Reply;
s se rspund att expeditorului ct i tuturor celor trecui n linia Cc, i n acest sens
se va utiliza opiunea Reply All.
n Toolbar exist butoanele Reply i Reply All iar n meniul contextual al
mesajului exist aceleai opiuni ce fac posibile aceste aciuni.

n cadrul dialogului New Message (apelat prin intermediul butonului New Mail)
exist un cmp de editare To: special destinat pentru inserarea adresei destinatarului sau a
adreselor mai multor destinatari desprite prin (;). Adresa sau adresele destinatarilor pot
fi introduse prin editare direct n cmpul To: sau n cazul n care se apas butonul To: ,
prin alegere dintr-un dialog de selecie (Select Recipients) a adreselor e-mail care exist
deja memorate acolo.

36

Se recomand ca orice mesaj e-mail s aib nscris n cmpul Subject un titlu (o

descriere succint a coninutului). Inserarea unui titlu n acest cmp 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 rou. 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. Aceeai aciune va putea fi realizat i
prin intermediul meniului Message.
Atunci cnd se creeaz un mesaj e-mail, n Toolbar-ul ferestrei de redactare
exist butonul Attach care dac va fi acionat va lansa un dialog Insert Attachment ce va
permite alegerea fiierelor ce vor fi ataate mesajului.

n timpul redactrii 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 sczut (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 ali
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 acelai nume
din Toolbar sau meniul contextual al mesajului.

Cutarea unui mesaj dintr-un folder poate fi realizat dup unul sau mai multe
criterii cum sunt:
numele expeditorului (cmpul From);
numele destinatarului (cmpul To);
un text din cmpul Subject;
un text din cmpul Message;
un interval de timp.

Butonul Find (gsete) din Toolbar pune la dispoziie un dialog special numit
Find Message (mesaje descoperite) care permite realizarea acestor cutri.

Mesajele din fereastra de identificare a mesajelor (afiat n dreapta sus), pot fi

sortate cresctor sau descresctor, dup oricare din cmpurile (coloanele Received, From,
Subject etc) aflate n bara de identificare a mesajelor, dac se d click n numele acestor
coloane (cmpuri) sau dac se acceseaz meniul contextual al fiecrei coloane.

De asemenea poate fi schimbat i ordinea coloanelor de afiare. ntotdeauna

coloana cea mai important va fi plasat cel mai n stnga. Ordinea de afiare a
coloanelor (cmpurilor) poate fi realizat prin Drag & Drop asupra numelor acestora din
bara de identificare a mesajelor, sau prin intermediul opiunii Columns din meniul
contextual al acestei bare. Dac de exemplu se dorete o sortare dubl dup numele
expeditorului i apoi dup data primirii mesajelor, va trebui schimbat ordinea cmpurilor
From i Received, apoi solicitat Sort ascending pentru From i n cele din urm pentru
Received.
38

Pentru a tipri la imprimant un mesaj, se poate solicita opiunea Print din meniul
File sau se poate apsa butonul Print din Toolbar. Aceast aciune va determina lansarea
dialogului Print prin intermediul cruia vor putea fi stabilite configurrile dorite nainte
de listare. Astfel se va putea stabili dac se va tipri ntregul mesaj sau numai o selecie,
numrul 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 organizaii publice sau
private (de preferat real i nu ipotetic).
2. Alegerea organizaiei
- Studenii se vor orienta ctre acele firme sau organizaii care vor accepta colaborarea
cu ei pe perioada realizrii proiectului. Pot fi firme sau organizaii:
o la care studenii sunt angajai sau lucreaz n colaborare;
o pe care studenii le cunosc foarte bine;
o care accept realizarea unui site de ctre studeni pe o perioad determinat.
3. Documentarea n vederea realizrii proiectului presupune:
- interviuri cu managerii organizaiei, cu angajaii, clienii, partenerii despre scopul i
activitile organizaiei;
- strngerea informaiilor sub form de text, imagini, sunete, videoclipuri etc. legate de
organizaie;
- strngerea de sigle, logo-uri, adrese, list de parteneri, oferte de produse etc.
- alegerea unor fonturi i culori favorite.
4. Proiectarea presupune:
- stabilirea coninutului fiecrei pagini Web, a imaginilor i a legturilor dintre acestea;
- stabilirea elementelor constituente ale paginii principale (Home page);
- stabilirea unei hri a site-ului;
- stabilirea aplicaiilor 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 legturilor;
- introducerea caracterelor diacritice romneti dac site-ul va fi n limba romn;
- introducerea datelor legate de autorul proiectului.
6. Testarea proiectului presupune:
- corectarea textului, a legturilor;
- verificarea funcionrii corecte pe mai multe computere, avnd monitoare de rezoluii
diferite (800 x 600 pixeli, 1024 x 768 pixeli etc), utiliznd 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 fiier HTML
Editai cu un editor de texte simplu (Notepad) urmtorul coninut i salvai-l sub numele
e1_1.html.
<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
Prima pagin standard
</body>
</html>

ncrcai fiierul n browser-ul favorit pentru a-l vizualiza. Acesta va afia:

Observaii:

Un document HTML este format din text i marcaje (tag-uri). Textul conine
informaia care va fi afiat n pagina Web iar marcajele precizeaz modul n care
acest text va fi afiat 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 cuvnt 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 coninutul propriu-zis al paginii "html" adic
ceea ce va fi afiat n fereastra browser-ului;
Fr a fi obligatoriu se consider elegant dac fiecrui 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> lipsete ntr-o pagin html
atunci n bara de titlu a ferestrei browser-ului va aprea numele fiierului.
Un tag poate fi scris att cu litere mari ct i cu litere mici;
Caracterele "spaiu" i "tab" multiple (succesive) sunt echivalate cu un singur
caracter "spaiu". Caracterele "CR" i "LF" sunt ignorate de ctre browser.

Sfritul de linie

S admitem c dorim s apar n pagina Web (adic n ceea ce va afia browserul) mai multe linii. Dac vom crea urmtorul fiier 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 afia "Prima linieA doua linieA treia linie" ntruct conform unei
observaii fcute 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"=sfrit de rnd).
Pentru a funciona conform ateptrilor fiierul 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 "spaiu", "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 afiat cu caractere
"monospace" (monospaiate).
Salvai acest fiier ca "e1_5.html" i ncarcai-l n browser pentru a-l vizualiza.
Pentru a observa facilitile oferite de un bloc <pre></pre> testai urmtorul
<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

Eliminai tag-urile <pre> i </pre>, salvai din nou fiierul i observai

modificrile!
Vei constata c browser-ul va afia secvena "(oo)\/||\/_||_" pe o singur linie.
Observaii importante

Un document (fiier) HTML are extensia ".html" sau ".htm". El se numete i fiier
surs.
Un browser ncarc un document HTML (un fiier surs), interpreteaz marcajele
coninute n document iar rezultatul este afiat n fereastra browser-ului. Acest
rezultat al interpretrii se numete "pagin Web".
Un document conine 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 aciunea 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 att cu litere mici ct 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).
Afiarea ntocmai a coninutului unui bloc de text din fiierul surs se face incluznd
acest bloc ntre tag-urile <pre> i </pre> (preformatat).

Culori, fonturi i margini

n acest capitol vom fi descrise setrile de baz ale unei pagini Web: alegerea
culorii de fond, a culorii textului i alegerea dimensiunilor paginii.
Culoarea de fond
Acest exemplu ne va arta cum s alegem culoarea de fond a paginii Web.
O culoare poate fi precizat n dou moduri:
1. Printr-un nume de culoare. Cel puin urmtoarele 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" vei gsi o list mai complet cu
numele de culori disponibile.
2. Prin construcia " #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 obine din amestecul a trei culori fundamentale:
rou, 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 aciunea precizat de numele tagului. 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 construiete 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
urmtoare are textul de culoarea roie.
<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>.

Urmtorul exemplu prezint modul de construire al unei pagini Web cu fondul de

culoare galben i textul de culoare roie:

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 afiarea unui text ntr-o pagin Web se utilizeaz un font (adic un tip de
litere) care este caracterizat de:
Mrime (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 sfrit de bloc).
Sintaxa utilizat este:
<basefont size=numr color=culoare style=font>
unde:
numr 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 construcie 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".
Observaie:
Domeniul de valabilitate al setrilor precizate de acest tag este din locul n care apare
pna la sfrsitul paginii sau pn n locul n care apare alt tag <basefont>.
Dac tag-ul <basefont> lipsete 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 urmtor 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

Poziionarea coninutului paginii Web fa de marginile ferestrei browserului se

poate face cu ajutorul a dou atribute ale tag-ului <body>:
"leftmargin" (seteaz distana dintre marginea din stnga a ferestrei browser-ului i
marginea din stnga a coninutului paginii);
"topmargin" (seteaz distana dintre marginea de sus a ferestrei browser-ului i
marginea de sus a coninutului paginii);.
Observaie: Ambele atribute pot primii urmtoarele valori posibile:
un numr ntreg pozitiv reprezentnd o distan msurat n pixeli;
un procent din limea respectiv nlimea 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 posibilitile oferite de limbajul HTML pentru a
alege un stil pentru caracterele ce formeaz textul paginii Web.
Caractere ngroate
Pentru ca un fragment de text s apar n pagin evideniat (ngroat) el trebuie
inclus ntre delimitatorii <b> i </b> (b vine de la "bold" = ngroat).
<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 mrite
Pentru ca un fragment de text s fie format din caractere cu o unitate mai mare
dect cea curent acest fragment trebuie inclus ntr-un bloc delimitat de tag-urile: <big>
i </big>.
Observaie: 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 micorate
Pentru ca un fragment de text s fie format din caractere cu o unitate mai mici
dect cea curent acest fragment trebuie inclus ntr-un bloc delimitat de tag-urile:
<small> i </small>.
Observaie: 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 .
Urmtorul exemplu arat cum pot fi introduse fragmente de text sub-scrip i
super-script. Pentru a exemplifica mai bine n rndul al treilea al paginii Web vom gsi
urmtorul text specific limbajului matematic: F(y)=(x1+x2)2-y3. Urmrii cu atenie fiierul
surs urmtor:

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 "tiate de o linie"

n exemplul urmtor 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 secionate 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

Pn n acest moment au fost prezentate 8 stiluri de scriere a caracterelor unui
bloc de text numite i stiluri fizice ntruct nu s-a acordat nici o atenie semnificaiei
informaiei coninut de aceste blocuri.
n continuare sunt prezentate stilurile logice utilizate la formatarea unui bloc.
Aceste stiluri in cont de semnificaia pe care blocul o are n cadrul paginii Web.
Observaie: Stilurile logice se bazeaz pe stilurile fizice iar modul lor de aciune depind
de browser-ul utilizat.
Blocuri evideniate
n exemplul urmtor 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 evidenia).
Observaie: 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 monospaiate

n continuare sunt prezentate trei tag-uri cu efecte similare. Ele permit scrierea
fragmentelor de text cu caractere monospaiate (de tip main 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 urmtor apare tag-ul de tip bloc <blink></blink> care delimiteaz
fragmente de text ce clipesc.
Obs: Acest tag este funcional 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 ngroat i italic n acelai timp;
un fragment de text poate fi subliniat, superscript, mrit i italic n acelai timp.
Blocul <q></q> permite inserarea in-line a citatelor. Aceste citate sunt afiate de ctre
browser n italic.
Observaie:
Blocurile "q" pot fi imbricate ca n exemplul urmtor;
"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 vei nva cum s alegei caracterele (fonturile) cu care s scriei
blocuri de text personalizate n cadrul unei pagini Web.
Un font este caracterizat de urmtoarele atribute:
Culoarea (setat prin atributul "color");
Tipul sau stilul (setat prin atributul "face");
Mrimea (setat prin atributul "size");
Mrimea n puncte tipografice (setat prin atributul "point-size");
Grosimea (setat prin atributul "weight").
Toate aceste atribute aparin 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 puin urmtoarele 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 urmtoarele: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a,
A, b, B, c, C, d, D, e, E, f i F. Numrul total de culori posibile este de 65536.
Exemple de culori RGB: #ff0000 este rou (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> avnd 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 recunoate.
<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, sansserif">Linie scrisa cu caractere
TimesRoman sau sans-serif</font><br>
</body></html>

Mrimea fontului
Pentru a seta mrimea 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 crete mrimea fontului cu 1, 2, etc fa de valoarea curent;
-1, -2, etc pentru a micora mrimea 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

Mrimea 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.
Numrul astfel precizat reprezint marimea fontului n puncte tipografice.
Obs: Acest atribut funcioneaz 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 lecie vei nva comenzi (tag-uri) la nivel de bloc de text. Toate aceste
marcaje produc automat trecerea la un rnd nou i adugarea unui extra-spaiu.
Aceste comenzi nu se refer la caracteristicile caracterelor ce compun textul ci se
refer la funciile 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 facilittile
oferite de un tag dedicat: <address></address>. Multe browser-e afieaz coninutul
cuprins ntre acesti delimitatori n italic, ncepnd pe un rnd 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

Observaii: Blocurile de tip "adres" includ informaii despre persoana care a creat pagina
Web, adresa e-mail i data crerii acestei pagini. Aceste blocuri se plaseaza de obicei la
sfritul paginii Web dar pot apare i la nceput.
Indentarea unui bloc
Pentru ca un bloc de text s fie indentat (marginea din stnga s fie decalat la
dreapta cu o anumit cantitate) acesta trebuie inclus ntre tag-urile <blockquote> i
</blockquote>. Adesea browser-ele adaug un spaiu 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
obine 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 stnga);
"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

Observaii:
Un bloc <div.</div> poate include alte sub-blocuri. n acest caz alinierea
precizat de atributul "align" al blocului "div" are efect asupra tuturor subblocurilor incluse n blocul "div";
Un bloc <div></div> admite atributul "nowrap" care interzice ruperea rndurilor
de ctre browser, lucrul acesta fcndu-se numai acolo unde exist marcaje care
solicit explicit acest lucru.
Blocuri "plaintext"
ntr-un fiier html caracterele "<" i ">" au o semnificaie special pentru browser.
Ele ncadreaz comenzile i atributele de afiare a elementelor ntr-o pagin Web.
Dac dorim ca un fragment de text s conin astfel de caractere fr a avea
semnificaia special implicit acest fragment trebuie ncadrat de una din perechile de
tag-uri:
<xmp></xmp> (80 de caractere pe rnd);
<listing></listing> (120 de caractere pe rnd).
De asemenea n ultima parte a unei pagini Web care ncepe cu marcajul <plaintext> nu
sunt interpretate marcajele HTML.
Observaii:
Aceste trei marcaje interpreteaz corect caracterele "spaiu", "tag" i "CR/LF".
Textul afiat n pagina Web este monospaiat.
<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 vzut 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-spaiu nainte de blocul paragraf;
inserarea unui extra-spaiu dup blocul paragraf dac delimitatorul </p> exist (acesta
fiind opional).
alinierea textului cu ajutorul atributului "align" avnd 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>.
Observaii:
Toate aceste tag-uri se refer la un bloc de text i trebuie nsoite de un tag de
ncheiere similar, de exemplu: <h3></h3>.
Aceste tag-uri accept atributul align pentru alinierea titlului blocului de text la stnga
(implicit), n centru i la dreapta.
Tag-ul <h1> permite scrierea unui titlu cu caracterele cele mai mari i ngroate pe
cnd <h6> permite scrierea unui titlu cu caracterele cele mai mici.
Toate browser-ele introduc un extra-spaiu nainte de a afia 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 urmtoarele 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 reprezentnd lungimea liniei n numr de pixeli;
(b) numere ntre 1 i 100 urmate de semnul "%" reprezentnd procentul din limea
paginii pe care se ntinde linia.
"size" permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi
pozitive reprezentnd grosimea liniei n pixeli (valoarea implicit este "2").
"noshade" cnd apare seteaz o linie fr 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 coninute de el.
n exemplul urmtor este prezentat un mod de obinere 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 vei nva 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 iniiat de tag-ul <li> (list item).
Observaii:
Lista va fi identat fa de restul paginii Web;
Fiecare item al listei ncepe pe un rnd 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>

Observaii:
Elementele <h1>, <h2> i <hr> au fost utilizate n acest exemplu pentru ca pagina
Web s aib un aspect ct mai plcut.
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" (ptrat) 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 iniiat de tag-ul <li> (list item).
Observaii:
Lista va fi identata fa de restul paginii Web;
Fiecare item al listei ncepe pe un rnd 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 secvena de ordonare: A, B, C, D, etc (litere mari);
"a" pentru pentru secvena de ordonare: a, b, c, d, etc (litere mici);
"I" pentru pentru secvena de ordonare: I, II, III, IV, etc (numere romane mari);
"i" pentru pentru secvena de ordonare: i, ii, iii, iv, etc (numere romane mici);
"1" pentru pentru secvena 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>

Observaii: Tag-ul <ol> poate avea un atribut "start" care s seteze valoarea iniiala a
secvenei de ordonare. Valoarea acestui atribut trebuie s fie un numr 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 numr 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
urmtor:
<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 definiii
O list de definiii este este formata dintr-o succesiune de termeni, fiecare termen
fiind urmat de o definiie a acestui termen.
Observaii:
ntreaga list de definiii se ncadreaz ntre tag-urile corespondente: <dl> i </dl> (dl
vine de la "definition list"=list de definiii);
Un termen al listei este iniiat de tag-ul <dt> (dt vine de la "definition term"=termen
de definiie);
Definiie a unui termen este iniiat de tag-ul <dd> (dd vine de la "definition
description"=descrierea definiiei);
Definiia 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

Observaii: Tag-urile <ul>, <ol> i <dl> pot avea un atribut "compact" care permite
afiarea compact a listei.
De exemplu n cazul unei liste de definiii vom scrie: <dl compact>. Dac acest
atribut este prezent (el nu ia mai multe valori) atunci definiiile termenilor ncep pe
aceeai 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
Aa cum s-a putut constata pn acum posibilitile de aranjare a textului ntr-o
pagina Web sunt limitate. Tabelele ne permit s crem o reea rectangular de domenii,
fiecare domeniu avnd propriile setri 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 rnduri. Pentru a insera un rnd ntr-un tabel folosim tagurile: <tr> i </tr> ("tr" vine de la "table row"=rnd de tabel).
Observaie:
Folosirea tag-ului de sfrit </tr> este opional.
Un rnd este format din mai multe celule ce conin 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 aduga un chenar unui tabel se
utilizeaz un atribut tag-ului <table> numit "border". Acest atribut poate primi ca valoare
orice numr ntreg (inclusiv 0) i reprezent grosimea n pixeli a chenarului tabelului.
Observaii:
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 absena chenarului;
Cnd 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 urmtoarele 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 stnga (<table align="left">) atunci textul care
urmeaz dup punctul de inserare al tabelelui se va scurge pe lng 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 lng tabel pe partea
stng;
Dac alinierea tabelului este pe centru <table align="center">) atunci textul care
urmeaz dup punctul de inserare al tabelelui va apare pe toat limea 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: Copiai fiierul "e7_3.html" propus mai sus i testai-l cu ajutorul unui
browser. Schimbai apoi alinierea tabelului la centru i apoi la stnga i observati
modificrile 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 ataat
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.
Observaie:
Dac n tabel sunt definite mai multe atribute "bgcolor" atunci ordinea prioritii este
urmtoarea: <td>, <tr> i <table> (cel mai puin 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>

Observaie: Culoarea textului din fiecare celul poate fi setat cu ajutorul tag-ului:
<font color="valoare"></font>.
Dimensionarea celulelor unui tabel
Distana 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 distana 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>

Distana dintre marginea unei celule si coninutul ei poate fi setat cu ajutorul

atributului "cellpadding" al tag-ului <table>.
Observaii:
Valorile acestui atribut pot fi ntregi pozitivi i reprezint distana n pixeli dintre
marginea unei celule si coninutul 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, limea i nlimea pot fi setate exact prin intermediul a
dou atribute "width" i corespunztor "height" ale tag-ului <table>.
Valorile acestor atribute pot fi:
Numere ntregi pozitive reprezentnd limea respectiv nlimea n pixeli a tabelului;
Numere intregi ntre 1 i 100 urmate de semnul "%" reprezentnd fraciunea din
limea respectiv nlimea 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

Observaii:
Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii
tabelului atunci vor fi folosite aceste dimensiuni precizate;
Dac dimensiunile precizate de atribute sunt mai mici dect cele necesare afirii
tabelului atunci tabelul va fi ajustat la dimensiunile necesare.
n exemplul urmtor se utilizeaz un truc care ne permite afiarea ntr-o pagin Web a
unui text poziionat n centrul paginii. Pentru a realiza acest lucru se declar un tabel
mare ct ntreaga pagin ce conine 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 vzut n exemplul 7_3 modul n care curge un text n jurul unui tabel aliniat
ntr-o pagin Web. Distana dintre tabel i celelalte elemente din pagina Web poate fi
setat cu ajutorul atributelor "hspace" i "vspace" ale tag-ului <table>.
Observaii:
Valoarea atributului "hspace" poate fi orice numr ntreg pozitiv, inclusiv "0" i
reprezint distana pe orizontal dintre tabel i celelalte elemente ale paginii Web;
Valoarea atributului "vspace" poate fi orice numr ntreg pozitiv, inclusiv "0" i
reprezint distana pe vertical dintre tabel i celelalte elemente ale paginii Web;
Aceste atribute funcioneaz 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 ataa 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 stnga 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 semnificaia 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 ataate tag-ului <td> pot fi deasemenea ataate tag-ului
<th>;
Coninutul celulelor definite cu <th> sunt ngroate (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 coninutului unei celule

Alinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului
"align" care poate lua valorile:
"left" (la stnga);
"center" (centrat);
right" (la dreapta);
"char" (alinierea se face n raport cu un caracter);
Observaii: 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 primete ca valoare caracterul de aliniere. n
mod implicit acest caracter este ".".
Alinierea pe vertical a coninutului unei celule se face cu ajutorul atributului
"valign" care poate lua valorile:
"baseline" (la baz);
"bottom" (jos);
"middle" (la mijloc);
"top" (sus).
Valoarea implicit este "middle" (la mijloc).
Aceste atribute pot fi ataate att tag-ului <tr> pentru a seta alinierea tuturor
celulelor unui rnd ct 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 ltime i "height" pentru
nlime.
Valorile posibile ale acestor atribute sunt:
numere ntregi pozitive (inclusiv "0") i reprezint dimensiunea n pixeli a limii
respectiv nlimii unei celule;
procente din limea respectiv nlimea 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>

Observaii:
Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii
tabelului atunci vor fi folosite aceste dimensiuni precizate;
Dac dimensiunile precizate de atribute sunt mai mici dect cele necasare afirii
tabelului atunci tabelul va fi ajustat la dimensiunile necesare.
n exemplul urmtor se creaz cu ajutorul unui tabel avnd limea 80% din laimea
paginii 3 coloane de text avnd limile 25%, 50% respectiv 25% din limea 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 reea 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 crui valoare determin numrul de celule care se unific;
Extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului
"rowspan" a crui valoare determin numrul 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 urmtor arat modul n care ntr-o reea rectangular de 4x4 celule se
formeaz celule extinse (vezi i figura alturat).
<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 aprea n tabel nici
mcar cu un chenar de delimitare. Pentru a afia un chenar pentru celulele vide se
utilizeaz urmtoarele trucuri:
Dup <td> se pune caracterul "&nbsp;";
Dup <td> se pune <br>.
Obs: Caracterul "&nbsp;" (no break space) este caracterul pentru "spatiu". Un "spaiu"
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

Urmtoarele atribute ale tag-ului <table> funcioneaz cu Internet Explorer 4.0 dar nu
funcioneaz cu Netscape Communicator 4.5:
"background" permite setarea unei imagini pentru fondul unui tabel. Primete 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
(ncapsulrii) unei imagini.
Tipuri de fiiere pentru imagini
Imaginile sunt stocate n fiiere n mai multe formate. Formatele acceptate de
browser-e pentru fiierele 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 rspndite formate sunt GIF (8 bii pentru o culoare, 256 de culori
posibile) i JPEG (24 de bii 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 funcie de directorul n care se afl documentul HTML care face referire la
imagine.
Prima pagin Web care conine 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.
Observaii:
Dac imaginea se afl n acelai director cu fiierul 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 fiierului imagine iar "extensie"
este extensia fiierului imagine.
Exemplele care urmeaz presupun c n fiierele 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:
Numii fiierul de mai sus "e8_1.html", salvai-l n directorul de lucru (de exemplu
"c:\html");
Schimbai numele fiierului imagine (valoarea atributului "src") cu numele altui fiier
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 urmtoarea
structur de directoare i de fiiere:
Dac dorim s referim din fiierul "test.html" aflat n directorul "c:\html\a"
fiierele imagine aflate pe diverse directoare se utilizeaz n construcia URL-ului aa
numita adresare relativ (adic fa de directorul curent "c:\html\a") dup cum se arat
mai jos:
Obs: Directorul printe al unui director curent se indic prin "..\"

72

c: (i1.gif)

"i2.gif"
"\aa\i3.gif"
"..\i2.gif"
"..\b\i4.gif"
"..\b\bb\i5.gif"
"..\..\i1.gif"

html (i2.gif0

a (i2.gif)
(test.html)

b (i4.gif)

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

Tem: Creai structura de directoare indicat n figura de mai sus dup care copiai n
fiecare director cte un fiier de tip imagine i testai 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>

Observaie:
Pentru ca exemplul de mai sus s funcioneze corect salvai fiierul de mai sus ca
"e8_2.html" n directorul "c:\html\a" iar fiierul "cnn_sl.gif" (sau altul pe care l
dorii) salvai-l n directorul "c:\html\b".
Chenarul unei imagini
Dac se dorete 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 crerii
ei.
Dac nu este cerut altfel aceste dimensiuni sunt respectate n momentul afirii 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 reprezentnd numrul de pixeli;
numere de la 1 la 100 urmate de "%" reprezentnd procente din limea respectiv
nlimea blocului printe n care se afl poziionat 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>

Observaie: Precizarea dimensiunilor spaiului ocupat de o imagine ntr-o pagin Web

duce la creterea vitezei de ncrcare a paginii deoarece cunoscnd dimensiunile imaginii
browser-ul rezerv spaiu n pagin i continu afiarea celorlalte elemente ale paginii. n
paralel are loc ncrcarea 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 urmtoarele valori:
"left" (alinierea la stnga; celelalte componente ale paginii "curg" pe partea dreapt);
"right" (alinierea la dreapta; celelalte componente ale paginii "curg" pe partea stng);
"top" (asemntor cu "texttop") (aliniere deasupra; partea de sus a imaginii se aliniaz
cu partea de sus a textului ce precede imaginea);
"middle" (asemntor "absmiddle") (aliniare la mijloc; mijlocul imaginii se aliniaz
cu linia de baz a textului ce precede imaginea);
"bottom" sau "baseline" (asemntor "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

Observaie:
Dac imaginea pe care o folosii este prea mic sau prea mare adugai imaginii
atributele: width="20%" i height="20%".
Alinierea textului n jurul unei imagini
Atributele "hspace" i "vspace" ale tag-ului <img> precizeaz distana 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>

Observaii:
"Text dup imagine" nu urmeaz n pagina Web imediat dup "Text nainte de
imagine" dei ar avea loc datorit tag-ului <br> care foreaz trecerea la linie nou.
Dac imaginea pe care o folosii este prea mic sau prea mare adugai imaginii
atributele: width="20%" i height="20%";
Pentru a elibera zona din stnga unei imagini (dreapta sau ambele pri ale unei
imagini) utilizai tag-ul <br> cu atributul "clear" avnd valoarea "left" (respectiv
"right" sau "all').
Elemente nlocuitoare pentru imagini
Deseori mrimea unei imagini de nalt rezoluie (msurat n kilo-octei) este
mare i timpul de ncrcare al paginii Web n fereastra browser-ului crete cu ct legtura
dintre client i server este mai lent.

75

Pentru ca utilizatorul s neleag totui ceva din imagine (pna cnd ea va fi

ncrcat n ntregime) se apeleaz la dou atribute ale tag-ului <img> care nlocuiesc
imaginea pe perioada ncrcrii:
Atributul "alt" admite ca valoare un text care se va afia n locul imaginii;
Atributul "lowsrc" admite ca valoare URL-ul unei imagini de joas rezoluie (de mic
dimensiune) ncrcabil imediat chiar i pe legturile slabe. Exist aplicaii de
prelucrare de imagini care permit transformarea unei imagini ntr-o imagine
asemntoare de joas rezoluie i de mrime mult mai mic dect 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>

Observaie:
Dac atributul "alt" este setat, atunci ori de cte ori mouse-ul se afl pozitionat pe
suprafaa imaginii, pe ecran apare ntr-un chenar textul ce constituie valoarea
atributului (n cazul exemplului de mai sus va fi afiat "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 folosete atributul "background" al tag-ului <body> avnd
ca valoare URL-ul imaginii.
Imaginea se multiplic pe orizontal i pe vertical pn 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>

Observaii:
ntruct pagina din exemplul de mai sus nu ncape ntr-un singur ecran va trebui s
utilizai bara de defilare vertical pentru a vizualiza ntreaga pagin.
n timpul defilrii textul i imaginea de fond se deplaseaz mpreun.
Pentru ca n timpul defilrii unei pagini Web foarte mari imaginea de fond s
rmn fix se utilizeaz atributul "bgproperties" al tag-ului <body> fixat la valoarea
"fixed". Acest atribut funcioneaz 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 urmtor ilustreaz un tablou cu un rnd i dou coloane.
Fiecare celul a tabelului este format din dou rnduri i o coloan. n rndul de
deasupra se afl o imagine iar n rndul 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 vei nva n detaliu n lecia urmtoare. Un link (o legtur)
introduce n pagina Web o zon "activ". Efectund un click cu butonul stng al mouseului pe aceast zon activ (n cazul nostru pe imagine) n browser se va ncrca o alt
pagin Web.
Pentru a utiliza imaginea "aol_sl.gif" drept link ctre pagina "p1.html" utilizai 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>

Observaie: n mod implicit imaginea utilizat pe post de zon activ (link) este
nconjurat de un chenar de culoarea unui link. Dac setai atributul "border" al tag-ului
<img> la valoarea "0" acest chenar va dispare.
Imagini n fiiere externe
Deoarece imaginile necesit un timp mare de ncrcare n browser deseori se
prefer ca n pagina Web s fie inserat numai un link ctre imagini lsnd utilizatorului
posibilitatea de a ncrca sau nu imaginea.
n exemplul urmtor se arat cum se insereaz un link (o legtur) ctre un fiier
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

rezoluie sczut pe post de link ctre aceeai imagine dar stocat ntr-un fiier cu o
rezoluie foarte bun. Utilizatorul vede n pagin imaginea de rezoluie sczut i dac
aceast imagine prezint interes pentru el atunci prin efectuarea unui click n browser se
ncarc imaginea de rezoluie 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

Faciliti ale formatului GIF

Formatul GIF89a a permite urmtoarele trei perfecionri aduse fiierelor
imagine:
1. Imagini ntreesute (interlaced images) sunt imaginile care apar integral n pagina
Web dar pe msur ce sunt ncarcate claritatea imaginii crete;
2. Imaginile transparente (transparent images) sunt imagini care nu au culoare de fond
nct ceea ce se afl n spatele imaginilor devine parial vizibil;
3. Imaginile animate (animated images) sunt fiiere imagine speciale care conin o
succesiune de imagini care sunt afiate periodic in pagina Web.
Observaie: Cele mai multe aplicaii de prelucrare a imaginilor permit salvarea fiierelor
imagine astfel nct facilitile enumerate mai sus s fie exploatate.
Utilizri speciale ale imaginilor
Imaginile pot fi utilizate pentru a obine efecte deosebite ntr-o pagin Web.
Printre aceste utilizri speciale putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor (eventual animate);
2. Simboluri speciale pentru itemii unei liste neordonate (vezi lecia urmtoare).

LINK-URI
Interactivitatea unei pagini Web
Link-urile (legturile) reprezint partea cea mai important a unei pagini Web. Ele
transform un text obinuit n "hipertext" sau "hipermedia", aspecte care permit trecerea
rapid de la o informaie aflat pe un anumit server la alt informaie aflat pe un alt
server oriunde n lume.
Link-urile sunt "zone active" ntr-o pagin Web, adic zone pe ecran sensibile la
apsarea butonului stng al mouse-ului. Un click efectuat cu mouse-ul pe un link este
interpretat ca o cerere ctre un anumit server de pe INTERNET de a expedia ctre
computerul client o resurs ctre care link-ul respectiv puncteaz.
n felul acesta paginile Web devin interactive (adic rspund la aciuni iniiate de
utilizator).
Lucrurile stau n felul urmtor:
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". Cnd mouse-ul se
afl deasupra unei zone active forma mouse-ului se schimb automat ntr-o "mn";
c) Efectund click pe o zona activ ce reprezint un link pe pagina Web, browser-ul
trimite ctre serverul ce stocheaz noua resurs o cerere de a-i expedia respectiva
resurs;
d) Serverul WWW (World Wide Web) ce stocheaz noua resurs primete cererea i
expediaz ctre utilizator (computerul client) resursa solicitat. Dac resursa solicitat
este o nou pagin Web atunci serverul inta expediaz un fiier ".html" mpreun
fiierele imagine, sunet, etc referite de acest fiier;

79

e) Computerul client (care a expediat cererea) primete resursa solicitat i o ncarc n

browser;
f) Pagina veche este nlocuit de pagina nou n acelai browser sau este lansat n
execuie o nou instan a browser-ului care conine noua pagin.
Link ctre o pagin aflat n acelai director
Un link (o legtur) ctre o pagin aflat n acelai director se formeaz cu
ajutorului tag-ului <a> (de la "anchor"=ancor).
Pentru a preciza pagina ctre care puncteaz link-ul se utilizeaz un atribut al tagului <a> numit "href" care ia ca valoare numele fiierului html aflat n acelasi director
care va nlocui vechea pagin.
"Zona activ", adic zona n pagina Web care devine sensibil la apsarea butonului
stng al mouse-ului, este format din textul cuprins ntre tag-urile <a> i </a>.
Observaie: Prezena tag-ului de sfrit </a> este obligatorie.
Exemplul 9_1. Comutarea ntre dou pagini.
Acest exemplu admite c n acelai director (de exemplu n directorul de lucru
"c:\html") se afl create urmtoarele dou fiiere html "p1.html" i "p2.html":
<html><head><title>p1</title></head>
<body>
<h1>Pagina 1</h1>
<hr>
<a href="p2.html">Link catre Pagina 2
</a>
</body></html>

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

Link ctre o pagin aflat pe acelai disc local

Dac pagina referit de link se afl pe acelai disc local dar n directoare diferite
atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea
relativ (vezi Lecia 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>
</head><body>
<h1>Pagina 3</h1><hr>
<a href="../b/bb/p4.html">Link
catre Pagina 2</a>
</body></html>

<html><head><title>p4</title>
</head><body>
<h1>Pagina 4</h1><hr>
<a href="../../a/p3.html">Link
catre Pagina 1</a>
</body></html>

80

Link ctre un site particular

n exemplul urmtor 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 numete "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 "mn" care ndeamn la
apsare.
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 funcioneze trebuie:

Fiierele "p.html" i "aol_sl.gif" trebuie s existe n acelai director;
Fiierul "p.html" trebuie s fie scris corect din punct de vedere al limbajului
HTML.
Observaii:
Pentru a reveni ntr-o pagin Web anterioar apsai butonul "Back" din bara de
instrumente a browser-ului utilizat.
Imaginea utilizat ca zon activ este nconjurat de un chenar de aceeai 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) ctre care s se
defineasc legturi.

81

O ancor se definete dea semenea prin tag-ul <a>. Pentru a identifica ancora se
utilizeaz atributul "name" al tag-ului <a> care primete ca valoare un nume dat ancorei
(de exemplu "ancora1").
Pentru a insera un link ctre ancora "ancora1" definit n aceeai pagin se
utilizeaz tag-ul <a> avnd 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 ctre o ancor definit n alt document (alt pagin)
aflat n acelai director atributul "href" primete o valoare de forma
"nume_fisier.html#nume_ancora".
Pentru a funciona corect urmtorul exemplu presupune c n directorul curent se afl
fiierul "e9_5.html" avnd coninutul 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

Instane multiple pentru un browser

La nceperea unei sesiuni pe INTERNET, pe calculatorul client (al utilizatorului)
se lanseaz n execuie o instan a browser-ului folosit, care ncarc pagina Web
solicitat.
Dac n timpul sesiunii de lucru se efectueaz un click ctre o pagin nou atunci
n mod implicit noua pagin o va nlocui pe cea precedent folosindu-se aceeai instan
(fereastr) a browser-ului.
Dac dorim ca pagina nou solicitat s fie ncarcat ntr-o alt fereastr dect cea
curent atunci trebuie lansat n execuie o nou instant a browser-ului care va conine
noua pagin. Acest lucru se realizeaz folosinduse atributul "target" al tag-ului <a> care
primete ca valoare un nume (de exemplu "fereastra") pentru fereastra n care se va
ncrca 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 aceai valoare pentru atributul "target" nseamn
c paginile referite de aceste link-uri se vor ncrca n aceeai fereastr (vor utiliza
aceeai 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>

Observaii:
Pentru a funciona, exemplul de mai sus presupune c n directorul curent exist
fiierele "p2.html", "p3.html" i "p4.html".
Pentru a vedea mai bine cum funcioneaz exemplul de mai sus, evitai s folosii
pentru ferestre o dimensiune maximizat.
Atributul "target" accept urmtoarele valori cu semnificaie special:
"_blank" (ncrcarea are loc ntr-o fereastr nou anonim);
"_parent" (ncrcarea are loc n fereastra printe);
"_self" (ncrcarea are loc n aceeai fereastr);
"_top" (ncrcarea 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 puin un click pe ele);
O culoare pentru link-urile active (deasupra crora 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 linkuri</h1><hr>
<ul> In aceasta pagina culorile linkurilor 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 ctre un server FTP

Pentru conectarea la un server pe INTERNET specializat n transferul de fiiere
(servere FTP "File Transfer Protocol") se utilizeaz serviciul "ftp://" mpreun cu adresa
serverului FTP i localizarea fiierului 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 potei electronice

ntr-o pagin Web se pot afla link-uri care permit lansarea n execuie a alicaiei
de expediere a mesajelor electronice. Pentru aceasta se utilizeaz n construcia 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>

Observaii: Pentru ca exemplul anterior s funcioneze trebuie ca:

Pe calculatorul utilizatorului s fie instalat o aplicaie 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 ctre fiiere oarecare

ntr-o pagin Web pot apare link-uri ctre orice tipuri de fiiere aflate pe orice
servere de pe INTENET.
Pentru aceasta n fiierul html se utilizeaz tag-ul <a> avnd valoarea atributului "href"
egal cu URL-ul fiierului destinaie (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>

Observaii: Atunci cnd se efectueaz click pe link-ul din exemplul de mai sus
browser-ul deschide o csu de dialog "File download" care v permite:
s salvai pe discul local fiierul sau s lansai n execuie aplicaia capabil s
interpreteze corect fiierele de tipul respectiv;
s optai pentru inhibarea csuei de dialog i ncrcarea direct a fiierelor (cnd
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 ataat oricrui element al
unei pagini Web. Acest atribut va nlocui complet atributul "name" care putea fi ataat
numai anumitor elemente.
Atributul "id" primete 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 ctre 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-informaiile sunt informaiile despre "modul de organizare a informaiilor".
n cazul unei pagini Web meta-informatiile vor furniza date despre modul n care a fost
creat aceast pagin.
Meta-informaiile nu sunt vizibile ntr-o pagin Web. Ele sunt coninute n fiierul
surs ".html" i sunt utilizate de serverele Web aflate pe INTERNET, specializate n
stocarea de "informaii despre informaiile" stocate pe diferite site-uri.
Serverele specializate n stocarea de meta-informaii ofer utilizatorilor motoare
de cutare puternice care permit regsirea informaiilor (a adreselor la care aceste
informaii sunt stocate).
Putem
enumera
ca
exemple:
"www.yahoo.com",
"www.altavista.com",
"www.excite.com", "www.lycos.com" etc.

86

Un element pentru meta-informaii

Meta-informaiile adic informaiile despre informaiile coninute ntr-o pagin
Web se introduc cu ajutorul unui element special <meta> plasat n interiorul blocului
<head><head>. Acest element accept patru atribute a cror semnificaie o vom
furniza pe parcurs:
"name";
"http-equiv";
"content";
"scheme";
la care se poate aduga 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) avnd caracter opional.
Descrierea unei pagini Web
Pentru a face cunoscut motoarelor de cutare aflate pe INTERNET despre scopul pentru
care a fost creat o pagin Web putem insera un element <meta> avnd atributele:
"name" setat la valoarea "description";
"content" setat la un string ce conine 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 cnd se efectueaz o regsire a unei informaii prin
intermediul unui motor de cutare. De aceea selectarea acestor cuvinte cheie trebuie
fcut cu atenie pentru ca informaia s poat fi regsit.
Cuvintele cheie ofer o alt metod de descriere a informaiilor coninute 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 informaii legate de autorul
paginii i de Copyright (drepturile de autor).Exemplul urmtor 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 regsirea informaiilor pe
INTERNET date legate de data crerii i data reactualizrii 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 sptmn (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>

Observaie: Dac data este furnizat ntr-un format ambiguu (de exemplu "03-07-1999")
atunci s adugai atributul "scheme" care precizeaz formatul utilizat pentru dat (de
exemplu scheme="Month-Day-Year").
Persoana de contact
Pentru a putea furniza informaii despre persoana care se ocup de administrarea
site-ului utilzai 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 fiierului
Pentru a preciza informaii legate de tipul fiierului i setul de caractere utilizate
folosii 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 regsirea informailor cu ajutorul motoarelor de cutare se pot utiliza
cuvinte cheie scrise n diferite limbi atunci se pot insera informaii 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 rencrcarea
automat a browser-ului cu aceeai pagin (de exemplul pagina cu evoluia cursurilor la o
burs) sau cu alt pagin.
n acest fel se obin faciliti dinamice pentru un site Web. Pentru a rencrca
aceeai pagin la un interval precizat de secunde folosii atributul "http-equiv" setat la
valoarea "refresh" iar n atributul "content" punei numarul de secunde dup care dori 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 numr 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
fiier surs ".html". Comentariile sunt ignorate de ctre browser la ncarcarea paginii.
Pentru a insera un bloc de comentarii utilizai 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 rnduri;
Nu sunt permise spaii libere ntre "<!" i "--" dar sunt permise spaii 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 fiierele de sunet
Sunetele pot fi stocate n fiiere n diverse formate. Unele dintre acestea sunt
recunoscute de browser-e i deci pot fi inserate n paginile Web.
Formatele i extensiile corespunztoare pentru fiierele utilizabile n paginile Web
sunt urmtoarele:
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 ctre fiiere de sunet
Un link ctre un fiier de sunet se realizeaz folosind tag-ul <a> destinat
legturilor ctre orice tip de fiiere unde atributului "href" va avea valoarea egal cu
URL-ul fiierului 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>

Observaii: Pentru a funciona corect exemplul de mai sus trebuie:

nlocuite fiierele de sunet cu numele unor fiiere de sunet disponibile pe
calculatorul dumneavoastr (folosii utilitarul Find din Windows pentru a cuta
fiiere cu o anumit extensie);
calea ctre aceste fiiere s fie corect (eventual copiai-le n directorul n care se
afl i pagina html).

Formate pentru fiierele de videoclipuri

Videoclipurile pot fi stocate n fiiere n diverse formate. Unele dintre acestea
sunt recunoscute de browser-e i deci pot fi inserate n paginile Web.
Formatele i extensiile corespunztoare pentru fiierele utilizabile n paginile Web
sunt urmtoarele:
Formatul MPEG cu extensiile posibile ".mpeg" sau ".mpg";
Formatul QuickTime cu extensia ".mov";
Formatul AVI cu extensia ".avi".

91

Link-uri ctre fiiere de video-clipuri

Un link ctre un fiier de video-clip se realizeaz folosind tag-ul <a> destinat
legturilor ctre orice tip de fiiere unde atributului "href" va avea valoarea egal cu
URL-ul fiierului de video-clip.
<html><head><title>Exemplul
11_2</title><head><body>
<h1>Link-uri catre fisiere de videoclipuri</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>

Observaii: Pentru a funciona corect exemplul de mai sus trebuie:

nlocuite fiierele de video-clip cu numele unor fiiere de video-clip disponibile pe
calculatorul dumneavoastr (folosii utilitarul Find din Windows pentru a cuta
fiiere cu o anumit extensie);
calea ctre aceste fiiere s fie corect (eventual copiai-le n directorul n care se
afl i pagina html);
Pe calculatorul utilizatorului s fie instalat aplicaia capabil s intrepreteze corect
fiierul de video-clip corespunztor.

Sunetul de fond pentru o pagin Web

Pentru ca vizitarea unei pagini Web s fie nsoit de un sunet de fond browser-ul
Internet Explorer accept tag-ul <bgsound>. Fiierul 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
numrului de repetiii care sunt executate pn cnd sunetul de fond nceteaz.
Valorile posibile sunt:
"-1" sau "infinite" pentru ca sunetul de fond s se repete de un numr infinit de ori;
un numar ntreg pozitiv pentru ca sunetul s se repete de un numr 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>

Observaie: Trebuie avut n vedere ca fiierele de sunet ataate unei pagini Web s aib o
dimensiune rezonabil pentru a nu suprancrca 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") primete ca valoare URL-ul fiierului

care contine video-clipul;
2. Atributul "loop" determin numrul de repetiii ale video-clipului, valorile posibile
fiind:
"-1" sau "infinite" pentru ca video-clipul s se repete de un numr infinit de ori;
un numar ntreg pozitiv pentru ca video-clipul s se repete de un numr precizat de
ori.
3. Atributul "start" permite precizarea momentului n care video-clipul va ncepe, lund
urmtoarele valori:
"fileopen" (video-clipul va ncepe cnd pagina Web s-a ncrcat n browser);
"mouseover" (video-clipul va ncepe cnd mouse-ul este trecut peste imaginea ce
reprezint video-clipul).
4. Atributul "controls" (fr valori specifice);
5. Atributul "loopdelay" permite setarea n intervalului de timp (n numr de
milisecunde) ntre dou reluri succesive ale video-clipului.
Obs: Cnd nu se afl n rulare video-clipul este afiat 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

Hri de imagini
Folosirea unei imagini ca "hart de imagini"
Am vzut n capitolul referitor la imagini c o imagine poate fi utilizat ca "zon
activ" adic sensibil la apsarea butonului stng la mouse-ului. Pentru aceasta imaginea
trebuie s fie inserat n documentul HTML ntre tag-urile <a> i </a>.
Exist ns posibilitatea crerii hrilor de imagini ("Image Map" n englez) care
permit ca diferite zone ale unei imagini s fie definite ca link-uri ctre diferite pagini
Web.
Crearea unei hri de imagini presupune dou etape:
1. Definirea unei imagini ca "hart de imagini". Pentru aceasta se folosete tag-ul <img>
nsoit de dou atribute:
Atributul "src" care primeste ca valoare URL-ul imaginii folosite pe post de "hart
de imagini";
Atributul "usemap" a crui valoare este de forma "#harta1" unde "harta1" numele
hrii definit la punctul 2.
Observaii: Harta de imagini se poate afla i ntr-o alt pagin Web caz n care atributul
"usemap" primete o valoare de forma:
"nume_pagina.html#harta1";
"www.cnmv.ro/harti.html/harta1".
2. Definirea hrii.
Definirea hrii se face n interiorul unui bloc special delimitat de tag-urile <map> i
</map>. Un atribut obligatoriu al tag-ului <map> este "name" care primete ca
valoare este un nume (numele hrii) (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 urmtor).

Atributul "href" primete ca valoare URL-ul paginii ctre care puncteaz link-ul
zonei respective.
Obs: Dac n locul unui atribut "href" apare nimic sau atributul "nohref" (fr valori
suplimentare) atunci acea zon nu puncteaz ctre nici un alt document HTML.
Atributul <area> poate avea de asemenea i atributul "target" care primete ca valoare
numele unei instane a browser-ului n care va fi afiat pagina ctre care puncteaz linkul zonei respective.

94

Coordonatele zonelor active

Pentru determinarea coordonatelor unei figuri
geometrice (dreptunghi, cerc sau poligon) se
utilizeaz un sistem de coordonate rectangular avnd
originea n colul stnga-sus al imaginii utilizate ca
hart, axa OX orizontal i orientat spre dreapta iar
axa OY vertical i orientat n jos (vezi figura
alturat).
Unitatea de msur este pixelul.

Un dreptunghi este determinat de coordonatele

vrfurilor stnga-sus (x1, y1) i dreapta-jos (x2, y2)
(vezi figura alaturat).
Atributul "coords" primete atunci o valoare de forma
"x1, y1, x2, y2".
Exemplu: coords="100, 100, 200, 200".

x1

x2
X

y1
y2
Y

Un cerc este determinat de coordonatele centrului

(x,y) i de raza cercului (r) (vezi figura alturat).
Atributul "coords" primete atunci o valoare de forma
"x, y, r).
Exemplu: coords="400, 200, 100"

x
X
y

Un poligon este determinat prin succesiunea de

coordonate ale vrfurilor (x1, y1), (x2, y2), (x3, y3) etc.
Atributul "coords" primete ca o valoare de forma:
"x1, y1, x2, y2, x3, y3, ".
Exemplu:
coords="100,300,200,300,400,400,100,400".

(x1,y1) (x2,y2)

(x4,y4)
Y

95

(x3,y3)

Utilizarea unei hri de imagini

Admitem c avem creat imaginea din figura

alturat (vezi Anexa Hart de imagini pentru un
mod de construire). Aceast imagine este salvat
pe disc n directorul curent de lucru sub numele
de "harta de imagini.gif".
ntruct dimensiunile de afiare a imaginii vor fi
setate la 600 X 500 pixeli, figurile geometrice
vor avea coordonatele (vezi paragraful
precedent):
"100,100,200,200" pentru ptrat;
"400,200,100" pentru cerc;
"100,300,200,300,400,400,100,400" pentru
poligon.

100 200 300 400 500 600

100
200
300
400
500

<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 ctre 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. Afiarea acestei ferestre
are loc att timp ct 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 nct utilizatorul s obin informaia de care
are nevoie.
Limbajul HTML, fiind o form particular de realizare a HiperText-ului, ofer
posibilitatea navigrii ntre diversele surse de informaii 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" alctuit din butoane de apsat,
csue de selecie, cmpuri de editare, etc. O sesiune de lucru cu o pagin Web ce conine
un formular cuprinde urmtoarele etape:
1. Utilizatorul completeaz formularul i l expediaz unui server;
2. O aplicaie dedicat pe server analizeaz formularul completat i (dac este necesar)
stocheaz datele ntr-o baz de date;
3. Serverul expediaz (dac este necesar) un rspuns utilizatorului.
Un formular este definit ntr-un bloc delimitat de tag-urile corespondente <form>
i </form>.
Observaii:
Blocurile <form> nu pot fi imbricate;
ntr-o pagin Web pot fi create oricte formulare.

97

Atribute eseniale ale elementului <form>

Exist dou atribute eseniale ale elementului <form>:
1. Atributul "action" precizeaz ce se va ntmpla cu datele formularului odat ce
acestea ajung la destinaie. De regul valoarea atributului "action" este URL-ul unui
script aflat pe un server WWW care primete datele formularului, efectueaz o
prelucrare a lor i expediaz ctre utilizator un rspuns. 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
depete nivelul acestei cri.
Observaie: Valoarea atributului "action" poate fi de asemenea o adres valid de email caz n care datele formularului sunt expediate prin pot electronic pe adresa
specificat. n acest caz nu are loc o prelucrare automat a datelor din formular rmnnd
destinatarului responsabilitatea citirii i interpretrii 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 urmtoarele valori:
"get" (valoarea implicit). n acest caz datele din formular sunt adugate la URL-ul
precizat de atributul "action".
Nu sunt permise cantiti mari de date (maxim 1 Kb);
Datele expediate se vor gsi pe serverul destinaie stocate n variabila de
mediu "QUERY_STRING".
ntre URL i date este pus "?". Datele sunt adugate 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 cantiti mari de date.
(chiar de ordinul Mb).
Obs: Datele formularului se gsesc dispozitivul de intrare al serverului destinaie iar
numrul de octei transmii se afl n variabila de mediu "CONTENT_LENGTH.POST".
Expedierea unui formular vid prin pot electronic
Pentru ca un formular s fie funcional trebuie s fie precizat ce se va ntmpla cu
el dup completare i expediere.
Cel mai simplu mod de utilizare al unui formular este ca el s fie expediat prin
pot electronic (e-mail). Pentru aceasta se folosete un atribut al al tag-ului <form> i
anume "action" care primete ca valoare "mailto:" concatenat cu o adres valid de email ctre 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 email.</h1><hr>
Formularul nu se vede ntruct nu
contine nici un element.
<form action="mailto:stanp@edu.ro"
method="post">
</form>
</body></html>

98

Un formular cu un cmp de editare i un buton de expediere

Acest exemplu prezint un formular ce conine un cmp 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 folosete atributul "type" al tag-ului <input>. Pentru
un cmp de editare acest atribut primete valoarea "text".
Alte atribute sunt importante pentru un element <input> i anume:
Atributul "name" permite ataarea unui nume fiecrui element al formularului;
Atributul "value" permite atribuirea unei valori iniiale unui element al
formularului. Aceast valoare iniial poate fi ulterior modificat de utilizator.
La expedierea formularului se transmit ctre 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 ctre destinatar
acesta va gsi n interiorul mesajului urmtorul coninut:
"numele=GUGOIU+TEODORU", caracterul "spaiu" fiind reprezentat de "+".
Pentru elementul <input> de tipul cmp de editare (type="text") alte dou atribute
sunt pot fi utile:
Atributul "size" specific limea cmpului de editare. Dac valoarea tastat ntr-un
cmp de editare depsete aceast lime atunci se execut automat un "scroll" al
acestui cmp.
Atributul "maxlength" specific numrul maxim de caractere pe care le poate primi
un cmp de editare. Caracterele tastate peste numrul 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

Observii:
Dac atributul "type" lipsete ntr-un element <input> atunci cmpul respectiv este
considerat implicit ca fiind de tip "text";
Formularele cu un singur cmp (de tip text) nu au nevoie de un buton de expediere.
Datele sunt expediate automat dup completarea cmpului i apsarea tastei
"ENTER";
ntr-un formular pot exista mai multe butoane de expediere avnd 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 apsarea 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" lipsete 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>

Cmp de editare de tip "Password"

Dac se utilizeaz tag-ul <input> avnd atributul "type" setat la valoarea
"password" atunci n formular se introduce un element asemntor cu un cmp de editare
obinuit (introdus prin type="text"). Toate atributele de la un cmp de editare rmn
valabile.
Singura deosebire const n faptul c n cmpul 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 cmp.
La expedierea formularului ns se transmite n clar valoarea tastat ntr-un cmp
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>

Observaie: La completarea formularului ca n figura de mai sus i la completarea

cmpului de tip "password" cu "mishu" destinatarul va primi un mesaj avnd urmtorul
coninut:
"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> avnd atributul "type" setat la
valoarea "radio".
Obs:
Toate butoanele ce aparin unei familii de butoane radio au acelai nume setat prin
atributul "name".
Atributul "value" primete ca valoare un text care va fi expediat server-ului
mpreun cu numele familiei de butoane.
Atributul "checked" (fr alte valori) permite selecia implicit a unui buton dintr-o
familie de butoane radio. Cel mult un atribut "checked" poate apare pentru o
aceeai 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 funcie de alegerea facut de utilizator.

101

Casete checkbox
O caset de tip validare (checkbox) permite selecia sau deselecia unei opiuni.
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
lipsete atunci se va expedia perechea "name=on". Casetele care sunt deselectate nu
trimit ctre 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"
Coninutul ntreg al unui fiier poate fi pe post de valoare ntr-o pereche
"name=value" a unui formular.
Pentru aceasta se insereaz un element <input> ntr-un formular avnd ca
atributul "type" setat la "file" ("file" n englez nseamn fiier).
Alte trei atribute sunt utile pentru un element de tip "file":
Atributul "name" permite ataarea unui nume. Acest nume va apare n perechea
"name=value" expediat serverului;
Atributul "value" primete ca valoare URL-ul fiierului care va fi expediat odat cu
formularul. Aceast valoare poate fi atribuit direct atributului "value", poate fi
tastat ntr-un cmp 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
apsarea butonului "Browse" din formular;
Atributul "enctype" metoda utilizat la criptarea fiierului 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 hrile 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 aciuni).
Pentru aceasta utilizm tag-ul <input> avnd atributul "type" setat la valoarea
"image". Urmtoarele atribute sunt utile cnd utilizm acest element ntr-un formular:
Atributul "src" primete ca valoare URL-ul imaginii care va fi folosit pe post de
hart;
Atributul "name" primete ca valoare un "nume" care va fi folosit la expedierea
datelor ctre server;
Atributul "align" este folosit pentru alinierea imaginii n cadrul paginii Web. El
primete aceleai valori i cu aceleai semnificaii cu cele utilizate la alinierea unei
imagini.
Harta de imagini este de tip "server" i funcioneaz n felul urmtor:
Utilizatorul efectueaz click ntr-o zon anumit pe suprafaa imaginii;
Imediat sunt trimise date ctre server-ul de pagini Web la care suntem conecai.
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 fcut click pe imagine fa de colul
stnga-sus al imaginii.
O aplicaie dedicat pe server analizeaz aceste date i n funcie 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 ncrca sunt luate de o aplicaie 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

Observaii:
n exemplul de mai sus lipsesc butoanele "Reset" i "Submit Query" ntruct
formularul cu date este expediat ctre server ori de cte 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 jumtate funcional. La efectuarea unui click pe
imagine, datele sunt cuprinse ntr-un e-mail i expediate la adresa menionat n
formular. n realitate datele sunt expediate ctre server n alt format (nu prin email), sunt analizate imediat de o aplicaie aflat pe server (un script CGI) care
formuleaz i trimite un rspuns utilizatorului. Configurarea serverului i scrierea
unei asemenea aplicaii depsete nivelul acestei cri;
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. Cnd utilizatorul apas un buton se
declaneaz n execuie o funcie de tratare a acestui eveniment. Limbajul HTML nu
permite scrierea unor astfel de funcii (acest lucru este posibil dac se utilizeaz limbajele
"JavaScript" sau "Java").
Pentru a insera un buton ntr-un formular se utilizeaz tag-ul <input> avnd
atributul "type" setat la valoarea "button". Alte dou atribute utile ale elementului
"button" sunt:
Atributul "name" permite ataarea unui nume butonului;
Atributul "value" primete ca valoare textul care va fi afiat 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 apsarea butonului din exemplul de mai sus nu se execut nimic ntruct
n pagina html nu exist un script "JavaScript" care s trateze evenimentul de apsare al
butonului. Scrierea unei astfel de script depsete nivelul acestei cri.
Elementul "hidden"
Elementul "hidden" este un cmp ascuns ntr-un formular n sensul c valoarea lui
nu va fi afiat n pagina Web.
Elementul "hidden" este inserat n formular cu ajutorul tag-ului <input> al crui atribut
"type" primete valoarea "hidden". Un atribut esenial 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 ctre 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 selecie
Lista de selecie permite utilizatorului s aleag unul sau mai multe elemente
dintr-o lista finit de elemente posibile.
Lista de selecie este inclus n formular cu ajutorul tag-urilor corespondente
<select> i </select>.
O list de selecie poate avea setate urmtoarele atribute:
Atributul "name" care ataeaz un nume listei de selecie (utilizat n perechile
"name=value" care sunt expediate server-ului);
Atributul "size" care precizeaz (printr-un numr ntreg pozitiv, valoarea implicit
fiind "1") cte elemente din list sunt vizibile la un moment dat pe ecran (celelalte
devenind vizibile prin aciunea "scroll-bar-ului" ataat automat listei).
Obs: n mod implicit un singur element din list poate fi selectat la un moment dat.
Pentru listele ce permit selecii multiple vezi paragraful urmtor.
Elementele unei liste de selecie sunt incluse n list cu ajutorul tag-ului <option>.
Dou atribute ale tag-ului <option> se dovedesc utile:
Atributul "value" primete ca valoare un text care va fi expediat server-ului n
perechea "name=value". Dac acest atribut lipsete atunci ctre server va fi
expediat textul ce urmeaz dup <option>.
Atributul "selected" (fr alte valori adiionale) 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 selecie cu selecii multiple

n mod implicit o list de selecie permite selecia 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 selecie care s permit selectarea la un
moment dat a mai multor elemente din list.
O list de selecie ce permite selecii multiple se creaz ntocmai ca o list de
selecie obinuit. n plus tag-ul <select> are un atribut "multiple" (fr alte valori).
Cnd formularul este expediat ctre server pentru fiecare element al listei care
este selectat se insereaz cte 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>

Cmpul de editare multilinie

ntr-un formular pot fi incluse i cmpuri de editare multilinie. Acest lucru se face
cu ajutorul tag-ului <textarea>.Pentru a particulariza un cmp de editare multilinie se
folosesc urmtoarele atribute:
Atributul "cols" specific numrul de caractere care vor fi afiate ntr-o linie;
Atributul "rows" specific numrul de linii care vor fi afiate simultan;
Atributul "name" permite ataarea unui nume cmpului de editare multilinie;
Atributul "wrap" ("wrap" vine de la "word wrap"=desprirea n silabe a unui
cuvnt) determin comportamentul cmpului de editare fa de sfritul de linie.
Acest atribut poate primi urmtoarele valori:
a) "off". n acest caz are loc:
ruperea cuvintelor la marginea dreapt a editorului se produce numai
cnd dorete utilizatorul;
includerea caracterului de sfrit 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 sfrit 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 sfrit de linie n textul transmis serverului odat cu formularul;

<html><head><title>Exemplul
13_13</title></head><body>
<h1>Un formular cu un cmp 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 execuie a unei aciuni poate fi introdus ntr-un
formular prin elementul <input> avnd atributul "type" setat la valoarea "button" aa cum
s-a vzut mai sus.
Exist o a doua modalitate de a introduce ntr-o pagin Web un buton de apsat i
anume prin intermediul blocului <button></button>.
Un astfel de buton poate fi inserat ntr-un formular, n acest caz avnd aciuni
legate de acel formular sau poate fi inserat oriunde n pagin avnd aciuni independente
de formulare.
Atributele posibile ale elemntului "button" sunt:
"name" acord elementului un nume;
"value" precizeaz textul care va fi afiat pe buton;
"type" precizeaz aciunea ce se va executa la apsarea butonului dac acesta este
inclus ntr-un formular. Valorile posibile pentru acest atribut sunt:
"button";
"submit";
"reset".
Observaie: 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
Pn n acest moment n fereastra browser-ului era ncrcat un singur document
HTML. Frame-urile ne permit s definim n fereastra browser-ului sub-ferestre n care s
fie ncrcate documente HTML diferite.
Frame-urile sunt definite ntr-un fiier ".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 primete ca valoare URL-ul documentului
HTML care va fi nrcat n acel frame.
Definirea frame-urilor se face din aproape n aproape prin mprirea ferestrelor (i
a sub-ferestrelor) n linii i coloane:
mprirea unei ferestre ntr-un numr de sub-ferestre de tip "coloan" se face cu
ajutorul atributului "cols" al tag-ului <frameset> ce descrie acea fereastr.
mprirea unei ferestre ntr-un numr 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 subfereastr cte un element) separate prin virgul care descriu modul n care se face
mprirea. Elementele listei pot fi:
a) Numr ntreg de pixeli;
b) Procente din dimensiunea ferestrei (numr ntre 1 i 99 terminat cu "%");
c) "n*" care nseamn n pri din spaiul rmas posibil.
Obs: Dac mai multe elemente din list sunt setate cu "*" atunci spaiul rmas
disponibil pentru ele se va mpri n mod egal.
Exemplu 1: "200, *, 50%, *" nseamn o mprire n 4 sub-ferestre, prima fiind de
200 de pixeli, a treia fiind jumtate din spaiul total disponibil, a doua i a patra ocupnd
restul de spaiu rmas disponibil n mod egal.
Exemplu 2: "200, 1*, 50%, 2*" nseamn o mprire n 4 sub-ferestre, prima fiind
de 200 de pixeli, a treia fiind jumtate din spaiul total disponibil, a doua i a patra
ocupnd restul de spaiu rmas disponibil care se mparte n trei pri egale, a doua
fereastr lund o parte iar a patra fereastr lund 2 pri.
Obs: O sub-fereastr poate fi un frame (folosinduse <frame>) n care se va ncrca un
document HTML sau poate fi mprit la rndul 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>

Observaie: Exemplul de mai sus presupune c n prealabil au fost create dou

fiiere ".html" numite "p1.html" i "p2.html" i c acestea se afl n directorul curent de
lucru.

108

n exemplul urmtor 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 urmtor 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 urmtor este creat o pagin Web avnd trei frame-uri mixte. Pentru
a o crea se procedeaz din aproape n aproape. Mai nti pagina este mprit n dou
sub-ferestre de tip "coloan" dup care a dou sub-fereastr este mprit n dou subferestre 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 urmtor pagina Web este construit cu ajutorul a dou fiiere ".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 primete ca valoare un nume de culoare sau o culoare setat n conformitate
cu modelul de culoare RGB. Atributul "bordercolor" poate fi ataat att 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 limii chenarului
tuturor frame-urilor incluse la un numr dorit de pixeli.
Obs:
Valoarea implicit a atributului "border" este de 5 pixeli;
O valoarea de "0" pixeli va implica frame-uri fr 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 urmtor se utilizeaz border="0" pentru a obine frame-uri fr 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 afiat i are un aspect tridimensional.
Afiarea chenarului unui frame poate fi inhibat dac se utilizeaz atributul
"frameborder" setat la valoarea "no". Acest atribut poate fi ataat att tag-ului <frameset>
(inhibarea fiind valabil pentru toate frame-urile incluse) ct 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 aduga unui frame o
bar de defilare care permite navigarea n interiorul documentului afiat n interiorul
frame-ului.
Valorile posibile sunt:
"yes", barele de defilare sunt adugate ntotdeauna;
"no", barele de defilare nu sunt utilizabile;
"auto", barele de defilare sunt vizibile atunci cnd 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>

Poziionarea documentului ntr-un frame

Atributele "marginheight" i "marginwidth" ale tag-ului <frame> permit setarea
distanei n pixeli dintre coninutul unui frame i marginile verticale respectiv orizontale
ale unui frame.
Valorile posibile sunt:
numr de pixeli;
procent din limea respectic nlimea 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> (fr 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 asemntor cu o
imagine. Pentru a insera un frame "in-line" utilizm 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 frameuri in-line</a>
</iframe></center></body></html>

113

8. Elemente de design ale paginilor Web

Un element esenial pentru oricare site este uurina n navigare n cadrul
acestuia. Aici sunt importante etichetele i indicaiile (tool tip-urile) care descriu exact i
n acelai timp succint destinaia i/sau rezultatul unui anumit link. Vizitatorul trebuie s
poat identifica rapid legturile pe care dorete 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 seciunea aleas de vizitator. n cazul unui meniu cu submeniuri
este util ca n momentul n care s-a realizat o selecie a unui element de meniu s se
deschid submeniul acestuia i s se ascund cel al opiunii selectate anterior.
Link-urile ctre pagina principal (home page) i ctre 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 adiionale mai jos. Este recomandabil
includerea n fiecare pagin a unor link-uri ctre seciunile cele mai importante ale siteului. Pentru o navigare uoar se poate furniza i o hart a site-ului.
Dac n pagin exist multe informaii (care depesc dimensiunea vertical a
ferestrei browser-ului) atunci se vor plasa link-uri ctre partea superioar a paginii astfel
nct 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, totui de
cele mai multe ori vizitatorii caut informaii 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 coninutul
seciunilor (sau al articolelor) astfel nct vizitatorul s poat gsi foarte repede ceea ce
caut. Este recomandabil utilizarea unui sistem piramidal astfel nct vizitatorul s poat
vedea nc de la nceput cteva detalii despre subiect i dac dorete s poat accesa tot
textul.
Se recomand ca seciunile de link-uri s fie separate de text. De asemenea
seciunile de link-uri se vor plasa la nceputul i la sfritul textului pentru a nu distrage
atenia n citirea i nelegerea acestuia.
O problem important o reprezint alegerea caracterelor cu care va fi scris
textul. Browser-ele vor afia diferit textul n funcie 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 afiate corect sau nu n funcie de
meta tag-urile utilizate n pagini i de configurarea browser-ului. De exemplu pentru a
putea fi realizat corect scrierea cu diacritice romneti 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 privina formatrii textului au indicat c este mai uor de citit
un paragraf aliniat la stnga dect unul centrat sau aliniat la dreapta.
n ceea ce privete browser-ul i rezoluia, unele site-uri specific n mod expres
aceste elemente (browser-ul, rezoluia i adncimea de culoare) pentru care au fost
proiectate. Grafica utilizat n site reprezint un subiect foarte important ce trebuie
cunoscut de ctre proiectanii de pagini Web. Atunci cnd se ncepe proiectarea unui site

114

Web primul lucru care trebuie efectuat este stabilirea unei scheme de culori. Dei pare o
decizie simpl schema de culori aleas poate atrage sau ndeprta muli vizitatori.
Cu ct sunt utilizate mai multe culori ntr-un un site, cu att mai mult se dovedete
un aspect neprofesional al proiectrii 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 obinuiete 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. Totui 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 ntlnite mai multe scheme de culori recomandate poate fi
gsit la www.colorschemer.com.
Imaginile reprezint un element grafic de atracie al site-ului. Ele pot fi statice
sau animate, ns n ambele cazuri se recomand ca dimensiunea lor s fie ct mai mic,
pentru a determina o vitez ridicat de ncrcare a paginilor site-ului.
ntr-un site imaginile pot fi ajuttoare sau detaliate. Cele ajuttoare au dimensiuni
mai mici i o rezoluie mai sczut. Opional prin accesarea lor pot deveni vizibile
imaginile detaliate care au dimensiuni mai mari i rezoluii mai bune. Este bina ca suma
imaginilor ajuttoare de pe o pagin s nu depeasc cteva 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 suprafee fr detalii.
Totui formatul GIF este limitat doar la o palet de maxim 256 culori. Imaginile care
conin diferite tonaliti de culoare pot fi redate cel mai bine n formatul JPEG care
permite afiarea a peste 16 milioane de culori. Imaginile animate sunt de tip GIF animat
care permite memorarea unei secvene formate din mai multe imagini succesive ce pot fi
afiate cu o anumit vitez de rulare n mod transparent sau nu. Dac se dorete utilizarea
unor animaii speciale pot fi folosite obiectele flash - Macromedia, dar care necesit
foarte multe resurse att n proiectare ct i n afiare, ceea ce determin pentru vizitator
necesitatea de a avea o lime de band destul de mare pentru a nu atepta foarte mult
ncrcarea acestora.
Foarte frecvent fiierele de tip imagine au foarte multe culori i nuane. Astfel ele
tind s fie foarte mari i implic un timp mare de descrcare, ceea ce poate determina pe
unii vizitatori s abandoneze consultarea site-ului. Fiierele 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 descrcare a
ei. Dimensiunea fiierelor de tip imagine poate fi micorat prin reducerea paletei de
culori i prin reducerea dimensiunilor orizontale i verticale ale imaginii. Rezoluia
standard pentru imaginile de Web este de 72 dpi.

115

Glosar de termeni
browser /
navigator

utilitar de vizualizare a fiierelor coninute de un server WWW

client

o staie de lucru, un terminal sau un PC, o component software,

solicitnd 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 fiier de pe un calculator server pe calculatorul

client utilizat

e-mail

pota electronic; serviciu de reea oferind faciliti de schimb

electronic de mesaje i fiiere ataate ntre utilizatori

FTP

File Transfer Protocol; protocol Internet pentru transfer de fiiere

hiperdocument

colecie de noduri nrudite, legate prin hiperlegturi. Un

hiperdocument poate conine hiperlegturi ctre date care exist
intern n acelai document

hiperlegtur

un set de una sau mai multe ancore; uzual se folosete termenul

"legatur"

hipertext

format al informaiei n care documentele sunt legate unul cu

cellalt printr-un set de cuvinte selectate (marcate n text); pentru
fiecare cuvnt marcat n document, hipertextul d posibilitatea
crerii unei legturi logice cu alt document care explic
semnificaia conceptului sau d detalii suplimentare referitoare la
el

HTML

HyperText Markup Language; limbaj de marcare care definete

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 reea (Internet), aceste
companii mai pot oferi i alte servicii gzduire 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 afiat, cuprinznd opiuni sau funcii din care utilizatorii

pot alege una pentru a activa programele sau operaiile dorite

Netscape

Browser, software de navigare (de tip client WWW)

116

procesare
client/server

distribuirea resurselor calculator ntr-o reea, utiliznd un client

(o staie de lucru sau un terminal), un server care asigur puterea
de calcul, o reea care conecteaz mpreuna clienii cu server-ele
i un software care ruleaz pe server i pe client

reea

o configuraie de echipamente de procesare de informaie

conectate prin linii de comunicaie pentru a mpri informaia i
resursele

server

un nod sau un proces care execut un serviciu sau un set de

servicii nrudite pentru clienii si. Vezi client

TCP/IP

nume generic folosit pentru un set de protocoale de reea pe

diverse niveluri; unele dintre acestea, cum ar fi IP, TCP si UDP
furnizeaz funciile de nivel inferior necesare celor mai multe
aplicaii, altele sunt protocoale dedicate unor funcii specifice

Telnet

protocol de terminal virtual n Internet

tipul mediului

un atribut al datelor care descrie natura prezentrii. Valoarea

acestui atribut poate fi una din urmtoarele:

text

sunet

imagine (ex.: fotografie)

grafica (ex.: desen)

animaie (grafic animat)

film (imagine animat)

upload

copierea unor fiiere de pe calculatorul client pe un calculator

server

URL

Universal/Uniform Resource Locator; definete numele (modul

de localizare) a unui nod sau a unei resurse din Internet

WEB

abreviere pentru WWW (World Wide Web); este constituit

dintr-o colecie neorganizat de milioane de documente
rspndite 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, permind navigarea (deplasarea) de la un document la
altul n cadrul unei reele de informare

117

Bibliografie
Courtner, Gini
Marquis Annette
Eddings, Joshua
Gugoiu, Teodoru
Jamsa, K.
Kerman, Phillip
Lon, Coley
Ptru, Bogdan
Tyler, Denise
Crystal D. Erickson
***
***
***

Iniiere n Microsoft Office 2000, Editura ALL,

Bucureti, 1999
How the Internet Works, Ziff-Davis Press, Emeryvile,
California, 1994
HTML prin exemple, Editura TEORA 2000
Programarea Web, Editura ALL, Bucureti, 1999
Macromedia Flash 5, Editura Teora 2001
Dreamweaver 4 i Firewors 4 n imagini, Editura Kondyli,
Timioara, 2001
Internet pentru nceptori, Editura Teora, 2003
Microsoft FrontPage 98, Editura TEORA 1999
Informatic Internet, Note de Curs
Informatic Internet, Curs Multimedia
Dreamweaver, FrontPage, Netscape Composer,
Fireworks Help i Tutorial

Not:
n realizarea crii s-au folosit i foarte multe resurse din Internet, studii sau articole
scrise de diferii autori din lumea ntreag.

118