UNIVERSITATEA TRANSILVANIA DIN BRAŞOV

FACULTATEA DE MATEMATICĂ-INFORMATICĂ
CATEDRA DE INFORMATICĂ

ÎNDRUMAR DE UTILIZARE A LIMBAJULUI HTML

ANCA VASILESCU

2002
 ÎNDRUMAR HTML 2

CUPRINS

1. HTML – UTILITATE ŞI UTILIZARE -------------------------------- 3

1.1. WORLD WIDE WEB ŞI INTERNET ---------------------------------------- 3
1.2. LIMBAJUL HTML --------------------------------------------------------- 5
1.2.1. Sintaxa de bază a limbajului HTML------------------------------- 6
1.2.2. Formatarea unitară a paginii -------------------------------------- 7
1.2.3. Formatarea textelor ------------------------------------------------- 8
1.2.3.1. Aspectul caracterelor -------------------------------------------- 9
1.2.3.2. Stiluri fizice ------------------------------------------------------ 9
1.2.3.3. Formatarea pe paragrafe ---------------------------------------- 9
1.2.3.4. Stiluri predefinite ------------------------------------------------ 9
1.2.3.5. Inserarea caracterelor speciale ------------------------------- 10
1.2.4. Aranjarea textului în pagină ------------------------------------- 10
1.2.4.1. Inserarea listelor şi a definiţiilor ----------------------------- 11
1.2.5. Definirea legăturilor. TAG-ul <A>…</A> -------------------- 13
1.2.5.1. Atributele HREF şi TARGET ------------------------------- 13
1.2.5.2. Atributul TITLE ----------------------------------------------- 15
1.2.5.3. Utilizarea secţiunilor. Atributul NAME -------------------- 16
1.2.5.4. Inserarea imaginilor. TAG-ul <IMG> ---------------------- 17
1.2.6. Crearea şi utilizarea tabelelor ----------------------------------- 18
1.2.7. Crearea şi utilizarea frame-urilor ------------------------------- 21
1.2.7.1. Crearea frame-urilor------------------------------------------- 22
1.2.7.2. Definirea conţinutului ----------------------------------------- 23
1.2.8. Crearea şi utilizarea formularelor ------------------------------ 25
1.2.8.1. Definirea formularelor ---------------------------------------- 25
1.2.8.2. Inserarea obiectelor de control în formular ---------------- 26

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 3

1. HTML – UTILITATE ŞI UTILIZARE

1.1. World Wide Web şi Internet

Internetul este o colecţie de reţele de calculatoare care partajează
resurse comune şi informaţii comune, prin intermediul unor conexiuni fizice şi a
unui set de protocoale.
In general, reţeaua Internet foloseşte aplicaţii WWW (World Wide Web),
adică un set de programe care formează un sistem de comunicare bazat pe
informaţii hypertext. WWW funcţionează prin comunicare de date pe baza unui
model client/server. Prin hypertext înţelegem un sistem de grupare asociativă
a informaţiilor rezidente pe mai multe servere Web, astfel încât să ofere
utilizatorului senzaţia că el consultă un singur document. Limbajul de descriere
a hypertext-ului este HTML (HyperText Markup Language). Programele care
permit vizualizarea (consultarea) paginilor Web sunt browser-ele. Un browser
este deci un client Web care are acces la informaţii multimedia şi multiprotocol
oferite de serverul Web accesat.
Dintr-o perspectivă cronologică, putem aminti că în 1990, Tim Berners-
Lee a dezvoltat un nou sistem standard de comunicare, numit de atunci World
Wide Web, pe scurt, WWW. Domeniul de aplicare iniţial a fost fizica nucleară,
la centrul CERN (European Particle Physics Laboratory), Elveţia. Noutatea
sistemului consta în faptul că nucleul îl reprezenta partea de comunicare în
reţea şi astfel se crease posibilitatea transferului în sistem a unei cantităţi mari
de informaţii, fără restricţii (world wide).
In 1993 centrul NCSA (National Center for Supercomputing), de la
Universitatea din Illinois, a dezvoltat browserul Mosaic. Importanţa şi noutatea
acestei aplicaţii era interfaţa comodă, orientată pe ferestre, care recunoştea
transferul paginilor hypertext într-un sistem de informare. Incepând cu Mosaic,
amploarea pe care au luat-o sistemele de tip WWW a fost explozivă. Enorm de
multe companii, universităţi şi particulari şi-au construit servere de informare
care să poată fi citite (vizitate) de oricine are calculatorul conectat în Internet şi,
în plus, are instalat un browser de navigare.
Fiecare pagină hypertext poate să conţină text, imagini şi legături către
alte pagini. Rezultă astfel pagini complexe, numite şi pagini hipermedia, care
sunt create folosind un limbaj de marcare de tip HTML (HyperText Markup
Language).
Intr-un server de informare cum este WWW fiecare pagină este
identificată printr-un nume, adică o adresă URL (Universal Resource Locator),
care se foloseşte ca legătură (link) către pagina respectivă. Dacă o pagină
P-părinte trebuie să vadă (să conţină o legătură către) o altă pagină, P-copil,
atunci în pagina P-părinte afişată vom avea un text de legătură (highlighted)
către pagina P-copil. In acelaşi timp, codul HTML al paginii P-părinte va conţine
atât textul de legătură cât şi adresa URL a lui P-copil. Deci, în pagina părinte
nu apare obligatoriu adresa URL a paginii copil. Pentru a deschide pagina copil,
este suficient un click de mouse pe textul de legătură (link) din pagina părinte.
Pentru a localiza pagina copil, browserul contactează serverul care conţine
pagina identificată de linkul ales pe pagina părinte, transferă informaţia

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 4

furnizată de acel server şi o afişează în locul paginii părinte. Protocolul de

comunicare respectat de browserul de WEB şi de serverul de web implicate în
secvenţa de operaţii anterioare este protocolul http, hypertext transfer
protocol.
Pentru a înţelege structura şi modul de formare a unei adrese URL este
important de abordat conceptul de domeniu în Internet. Din acest punct de
vedere putem privi Internetul ca fiind divizat în câteva sute de domenii de nivel
superior, fiecare domeniu cuprinzând mai multe sisteme (servere sau clienţi).
La rândul lui, fiecare domeniu este partiţionat în subdomenii, care pot fi, de
asemenea, partiţionate ş.a.m.d. Toate aceste domenii pot fi reprezentate ca o
structură arborescentă. Frunzele acestui arbore sunt domenii care nu au
subdomenii.
Domeniile de pe primul nivel (nivelul rădăcină) se împart în două
categorii: domenii generice şi domenii de ţări. Domeniile generice sunt: com
(comercial), edu (instituţii educaţionale), gov (guvernul federal SUA), int
(organizaţiile internaţionale), mil (forţele armate ale SUA) şi org (organizaţii
nonprofit).
Numele fiecărui domeniu este format prin concatenarea numelor
subdomeniilor lui, de la numele domeniului respectiv până la rădăcină.
Componentele sunt separate prin punct. Numele de domenii nu fac distincţie
între litere mari şi mici.
In principiu, domeniile pot fi inserate în arbore în două moduri: după tip
sau după ţară. In practică, aproape toate organizaţiile din USA sunt repartizate
după criteriul generic, iar cele din afara USA fac parte din domeniul ţării lor.
Fiecare domeniu controlează cum sunt alocate subdomeniile lui directe.
Pentru a crea un nou domeniu se cere permisiunea domeniului în care va fi
inclus (domeniul al cărui fiu va fi). O dată ce un nou domeniu a fost creat şi
înregistrat, el poate crea subdomenii, fără a cere permisiunea de la vreun
domeniu din partea superioară a arborelui.
Atunci când este transmisă o adresă URL, fiecare client (browser)
lucrează secvenţial, putând să vizualizeze (să afişeze) la un moment dat o
singură pagină. Un server oarecare poate să primească simultan oricâte cereri
de furnizare de pagini de informaţii. Deci avem aici un exemplu în care serverul
poate să aibă mai mulţi clienţi simultan.
Dintre aplicaţiile frecvente ale WWW amintim: distribuirea ştirilor,
înscrierea într-un grup cu interese comune, consultarea unor note bibliografice
sau referinţe ştiinţifice, comandarea şi trimiterea cadourilor prin cataloage on-
line, orientarea electronică pentru itinerariul de vacanţă, s.a.m.d.
In particular, pentru scopul acestei lucrări, să amintim că Internetul este
o verigă foarte importantă în organizarea şi desfăşurarea activităţilor didactice
în contextul învăţământului la distanţă. Ne referim aici atât la realizarea
materialelor didactice suport pentru activităţile tutoriale, dar şi la o modalitate
modernă de comunicare continuă între studenţi, cadre didactice şi tutori. Din
descrierea părţii aplicative a acestei lucrări se poate vedea că s-a folosit, pe de
o parte, limbajul HTML pentru realizarea unei pagini WEB pentru un curs pentru
învăţământ la distanţă şi, pe de altă parte, resurse Internet pentru realizarea

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 5

unui forum de comunicare între partenerii implicaţi în activitatea didactică legată

de cursul respectiv.

1.2. Limbajul HTML

Limbajul HTML (HyperText Markup Language) este suportul pentru
scrierea paginilor hipermedia recunoscute de browserele de Internet.
Este de reţinut faptul că de pe un calculator se pot crea şi vizualiza fişiere
HTML chiar dacă acel calculator nu este conectat la Internet. Aceasta pentru
că se poate configura fictiv un modem pe calculatorul respectiv şi, implicit, se
simulează conexiunea la Internet. Acest artificiu este important şi pentru a
putea rula aplicaţii de tip browser (Internet Explorer, Netscape Navigator).
Limbajul HTML este un limbaj de marcare şi nu unul de programare.
Entitatea elementară a sintaxei limbajului HTML este TAG-ul şi nu instrucţiunea
– specifică limbajelor de programare algoritmice (Pascal, C, Java) sau
declarative (ProLog) – şi nici comanda – specifică modului de lucru programat
în limbajele sistemelor de gestiune a bazelor de date (FoxPro).
Un fişier care foloseşte elemente ale limbajului HTML este un fişier
HTML. Un fişier HTML este codul sursă pentru o pagină WEB. Aplicaţia care
recunoaşte şi interpretează codul HTML este un browser de Internet (de
exemplu, Mosaic, Internet Explorer, Netscape Navigator).
Rezultă astfel următoarele etape de lucru cu HTML:
1. se scrie codul HTML pentru viitoarea pagină WEB, folosind un editor
de texte oarecare;
2. se salvează fişierul cu extensia .html sau .htm, ambele recunoscute
de browsere;
3. se deschide un browser;
4. din ferestra browserului se deschide fişierul HTML salvat anterior,
precizându-se calea completă a fişierului (de exemplu,
C://Lucru/Georgescu/HelloWorld.html).
Ceea ce rezultă în urma parcurgerii acestor etape este pagina WEB
definită de fişierul HTML apelat din browser.
Observaţii.
A) Pentru HTML nu există un mediu integrat de dezvoltare şi de aceea,
utilizatorul îşi va alege un editor de texte şi un browser după propriile
preferinţe. Este bine ca la alegerea browserului să se ţină cont de
TAG-urile folosite în fişierul HTML deoarece nu toate browserele
recunosc şi interpretează identic toate TAG-urile HTML.
B) Utilitarul Microsoft Word are posibilitatea de a salva un document (un
fişier cu extensia .doc) în format HTML, deci ca fişier cu extensia
.html (vezi Save As… – Save As Type: HTML Document). In acest
caz aplicaţia Word preia textul formatat şi îi completează TAG-urile
HTML pentru a fi recunoscut de browser.

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 6

C) Operaţia 4. anterioară este similară cu operaţia de accesare a unei

pagini de Internet prin adresa ei URL (de exemplu,
http://www.unitbv.ro). Deosebirea este că fişierul este salvat local, pe
discul C: al calculatorului gazdă, în timp ce pagina WEB poate fi la
distanţă, pe un alt calculator conectat la Internet.
In general, limbajul HTML permite definirea decumentelor interactive
(care comunică prin legături speciale de tip hypertext, hypertext links). Aceste
documente conţin texte, imagini, pentru care sintaxa HTML defineşte modul de
aliniere, aranjarea în pagina Web, eventuale legături între aceste elemente. In
plus, informaţiile de pe o pagină pot fi grupate în ferestre (frames), în tabele
(tables) sau în formulare (forms).

1.2.1. Sintaxa de bază a limbajului HTML

Elementul fundamental în sintaxa limbajului HTML este TAG-ul. Un TAG
este un cuvânt rezervat care apare scris între paranteze unghiulare. De
exemplu, avem următoarele TAG-uri:
<HTML> cod_html </HTML>
<HEAD> cod_html </HEAD>
<TITLE>cod_html</TITLE>
<P> text_paragraf_nou
<HR>
<IMG adresa_unui_fişier_imagine>
Se poate observa din aceste exemple că unele dintre TAG-uri apar
simple (cum sunt ultimele trei exemple) sau ca şi TAG-uri perechi (cum sunt
primele trei exemple).
Un TAG pereche este deschis de TAG-ul simplu şi este închis de
perechea lui, formată cu acelaşi nume, dar precedat de caracterul slash, /. In
interiorul unui TAG pereche poate să apară orice secvenţă de cod HTML. Rolul
unui TAG pereche este de a defini comportarea pe pagina WEB a codului
cuprins între TAG-ul de deschidere şi TAG-ul de închidere.
TAG-urile simple definesc comportarea pe pagina WEB a elementului
pe care îl introduc sau a secvenţei care urmează după TAG-ul respectiv.
Sintaxa limbajului HTML precizează pentru fiecare TAG o serie de
atribute asociate. Elementele influenţate de un TAG vor fi afişate de browser
pe pagina WEB conform cu valorile pe care programatorul le-a dat atributelor
acelui TAG. Dacă un TAG recunoaşte mai multe atribute atunci acestea pot fi
folosite de programator în mod convenabil: niciunul, unul sau mai multe, în orice
ordine. Atribuirea unei valori pentru un atribut se face cu caracterul egal, =.
Valoarea unui atribut se scrie între ghilimele, “ ”.
De exemplu, TAG-ul <FONT> text </FONT> defineşte aspectul cu care
se afişează textul text. Acest TAG admite atributele COLOR şi SIZE. Astfel,
pentru a scrie textul Hello, World! cu culoarea roşu şi de mărime 6 pixeli vom
folosi descrierea următoare:
<FONT COLOR=”red” SIZE=”6”>Hello, World!</FONT>
ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 7

Structura minimală, obligatorie a unui fişier HTML conţine următoarele

TAG-uri şi în următoarea ordine:
<HTML>
<HEAD>
<TITLE>
text care apare în bara de titlu a ferestrei în care se
afişează pagina WEB
</TITLE>
</HEAD>
<BODY>
codul html propriu-zis
</BODY>
</HTML>
Exemplu. Fişierul HTML care să afişeze mesajul Hello, World! cu
caracteristicile de mai sus este:
<HTML>
<HEAD>
<TITLE>
Prima mea pagina…
</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”red” SIZE=”6”>Hello, World!</FONT>
</BODY>
</HTML>
In afară de TAG-urile obligatorii enumerate în structura minimală
anterioară, principalele TAG-uri HTML pe care le vom descrie în continuare se
grupează astfel:
1. TAG-uri pentru formatarea unitară a paginii
2. TAG-uri pentru formatarea textelor
3. TAG-uri pentru aranjarea textului în pagină
4. TAG-uri pentru legături
5. Lucrul cu frame-uri. TAG-ul pereche <FRAME>
6. Lucrul cu tabele. TAG-ul pereche <TABLE>
7. Lucrul cu formulare. TAG-ul pereche <FORM>
In HTML comentariile sunt descrise prin
<! – – Acesta este un comentariu – –>

1.2.2. Formatarea unitară a paginii

TAG-ul <BODY> are a serie de atribute cu ajutorul cărora se pot defini
caracteristici unitare pentru întreaga pagină WEB de afişat. Aceste atribute şi
semnificaţia lor rezultă din următorul tabel:

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 8

BACKGROUND defineşte o imagine care să fie fondul pentru pagina WEB

Exemplu. <BODY BACKGROUND=”Fall.gif”>…</BODY>
BGCOLOR defineşte culoarea fondului
Exemplu. <BODY BGCOLOR=lightblue>…</BODY>
TEXT defineşte culoarea de afişare a textului; ulterior, TAG-ul
<FONT> cu atributul COLOR va avea prioritate maximă
pentru textul pe care îl defineşte
Exemplu. <BODY TEXT=darkblue>…</BODY>

Următoarele atribute ale TAG-ului <BODY> influenţează culoarea de

afişare a textului legăturilor.

LINK Defineşte culoarea de afişare a legăturilor încă nedeschise

VLINK Defineşte culoarea de afişare a legăturilor care au fost
deschise
ALINK Defineşte culoarea de afişare a legăturii active (cea pe care
se află mouse-ul la momentul curent)

Exemplu. <BODY LINK=red VLINK=purple ALINK=yellow>…</BODY>

Observaţie. In funcţie de combinaţia de culori aleasă pentru afişarea
legăturilor şi în funcţie de browserul folosit, se poate ca rezultatul să nu fie
conform aşteptărilor…
Definirea culorilor în HTML se poate face în două moduri:
a) prin combinaţia RedGreenBlue, dată în valori reprezentate în
hexazecimal. In acest caz culoarea se defineşte între glilimele,
precedată de caracterul diez, folosind pentru fiecare dintre culorile
fundamentale (roşu, verde şi albastru) câte o valoare hexazecimală
cuprinsă între 00 şi FF (deci pe două poziţii). Aceste valori corespund
valorilor zecimale de la 0 la 256.
Exemple. alb – “#FFFFFF”, roşu – “#FF0000”, verde – “#00FF00”,
albastru – “#0000FF”, negru – “#000000”.
b) prin numele standard al culorii (în engleză): aqua, gray, navy, silver,
black, green, olive, teal, blue, lime, purple, yellow, fuchsia, maroon,
red, white.

1.2.3. Formatarea textelor

Limbajul HTML permite definirea caracteristicilor de afişare şi aliniere a
textelor. In acest context se vor regăsi elementele specifice din editorul de texte
MS Word.

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 9

1.2.3.1. Aspectul caracterelor

Aşa cum am anticipat într-unul din paragrafele anterioare, HTML are
TAG-ul <FONT> pentru definirea caracteristicilor elementare ale textului:
culoare de afişare, dimensiune, aspect. Atributele corespunzătoare sunt:
COLOR, SIZE şi, respectiv, FACE.
Dimensiunea implicită a caracterelor este 3 pixeli, dar atributul SIZE
admite valori de la 1 la 7. In plus, dimesiunea caracterelor se poate da şi relativ
la textul standard. Astfel, dacă se doreşte mărirea caracterelor cu o unitate
atunci opţiunea este SIZE=”+1”, iar dacă se doreşte micşorarea caracterelor cu
o unitate, aceasta se va preciza prin SIZE=”–1”. In acest context caracterele “
” sunt opţionale.
Atributul FACE al TAG-ului <FONT> defineşte aspectul caracterelor.
Astfel, utilizatorul poate opta pentru unul din font-urile cunoscute din editoarele
de texte: Arial, Courier, Times New Roman, Impact ş.a.m.d.
Observaţie. Pentru mărirea, respectiv micşorarea dimensiunii
caracterelor se pot folosi şi TAG-ul simplu <BIG>, respectiv <SMALL>.

1.2.3.2. Stiluri fizice

Pentru a introduce text îngroşat (bold), înclinat (italic) sau subliniat
(underline) se folosesc respectiv TAG-urile:
<B>acest text se va scrie îngroşat</B>
<I>acest text se va scrie înclinat</I>
<U>acest text se va scrie subliniat</U>
Ca şi în editoarele de texte, aceste TAG-uri pot apărea combinate.
Trebuie însă să se ţină cont de regula TAG-urilor imbricate: ultimul TAG
deschis este primul închis.

1.2.3.3. Formatarea pe paragrafe

Este de remarcat faptul că browserele nu recunosc trecerea la rând nou
din textul sursă HTML. Astfel, apăsarea tastei <Enter> în fişierul HTML este
neinterpretată de browser. Pentru a forţa browserul să treacă la rând nou se
foloseşte TAG-ul pereche <P>…</P>. Acest TAG acceptă atributul ALIGN cu
valorile: left, right, center, justify prin care se defineşte tipul de aliniere a textului
în cadrul paragrafului respectiv.
Pentru a forţa browserul să ţină cont de toate caracterele introduse în
textul sursă HTML, inclusiv caracterele neimprimabile (<Enter>, rând liber,
spaţii libere), se poate folosi TAG-ul pereche <PRE>…</PRE>.
In plus faţă de varianta <P ALIGN=center>…</P>, HTML oferă şi TAG-
ul pereche <CENTER>…</CENTER> cu acelaşi efect: alinierea la centru a
textului scris între TAG-uri.

1.2.3.4. Stiluri predefinite

Limbajul HTML are predefinite şase stiluri de scriere denumite heading1,
heading2, …, heading6. Acestea corespund respectiv TAG-urilor pereche

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 10

<h1>…</h1>, <h2>…</h2>, …, <h6>…</h6>. Deşi se pot folosi şi pentru text

obişnuit, aceste stiluri sunt recomandate pentru definirea titlurilor de capitole şi
subcapitole. Singurul atribut recunoscut de aceste TAG-uri este ALIGN, cu
aceeaşi semnificaţie ca şi în cazul TAG-ului paragraf <P>.

1.2.3.5. Inserarea caracterelor speciale

Caracterele speciale se pot introduce în fişierul HTML în două moduri:
a) folosind codul zecimal al caracterului, precedat de secvenţa de două
caractere &# şi urmat de caracterul ;. Codul zecimal al unui caracter special
se poate obţine prin conversia valorilor furnizate de utilitarul Character Map
care dă codul hexazecimal al fiecărui caracter. De exemplu, pentru a insera
caracterele româneşti se folosesc următoarele coduri:

ă &#259; Ă &#258;
â &#226; Â &#194;
î &#238; Î &#206;
ş &#351; Ş &#350;
ţ &#355; Ţ &#354;

b) folosind numele caracterului special, precedat de &. Exemple:

< &lt; ® &reg;

> &gt; © &copy;
§ &sect; ± &plusmn;

1.2.4. Aranjarea textului în pagină

Pentru aranjarea textului în pagină sunt utile următoarele TAG-uri:
<BR> – line breaks – lasă o linie liberă
<HR> – horizontal rule – trasează o linie orizontală. Atributele
recunoscute de acest TAG sunt:

ALIGN defineşte alinierea liniei în linia curentă; valorile posibile sunt:

left, center, right
NOSHADE inhibă afişarea liniei cu umbră
SIZE defineşte grosimea liniei; implicit linia este de 3 pixeli
WIDTH defineşte lungimea liniei; valoarea poate fi dată în pixeli sau
în procente (relativ la lăţimea paginii de afişare)

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 11

Alte TAG-uri utile pentru aranjarea textului în pagină sunt descrise în

paragrafele următoare.

1.2.4.1. Inserarea listelor şi a definiţiilor

Limbajul HTML recunoaşte două tipuri de liste:
a) liste neordonate sau marcate (corespunzătoare lui bulleted list din
MS Word), definite de TAG-ul pereche <UL>…</UL> (unordered list)
şi
b) liste ordonate (Ordered list), definite de TAG-ul pereche
<OL>…</OL> (corespunzătoare opţiunii numbered list din MS
Word).
Indiferent dacă lista este ordonată sau nu, fiecare entitate din listă
trebuie introdusă de TAG-ul simplu <LI> şi browserul o va afişa pe un rând nou.
Alinierea textului în cadrul listei este implicit definită de sintaxa HTML.
Pentru o listă neordonată utilizatorul poate preciza semnul cu care să se
facă marcarea. Aceasta se defineşte prin valoarea atributului TYPE al TAG-ului
<UL> şi poate fi: disc, circle sau square. Implicit, marcarea se face cu circle.
Pentru o listă ordonată TAG-ul <OL> acceptă atributele START şi TYPE.
Valoarea atributului START este valoarea iniţială a numerotării entităţilor din
listă. Valoarea atributului TYPE defineşte tipul de numerotare şi poate avea
valorile:

A numerotare cu majuscule A, B, C, D, …
a numerotare cu litere mici a, b, c, d, …
I numerotare cu cifre romane I, II, III, IV, …
i numerotare cu cifre romane mici i, ii, iii, iv, …
1 numerotare cu cifre arabe 1, 2, 3, 4, …

Numerotarea implicită este cu cifre arabe.

Observaţie. Este foarte util de reţinut că sintaxa HTML permite
descrierea de liste ordonate şi/sau neordonate imbricate.
Exemplu. Să descriem într-un fişier HTML următoarea structură de liste:
 Luni
a. Analiză matematică
b. Geometrie
 Marţi
1. Algoritmică şi Programare
 Miercuri
 Joi
i. Sport
ii. Engleză
iii. Opţionale
 Vineri
ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 12

a. Laboratoare

Fişierul HTML corespunzător este:

<HTML>

<HEAD>
<TITLE>
Definirea listelor
</TITLE>
</HEAD>

<BODY BGCOLOR=lavender TEXT="#0000FF">

<UL>
<LI>Luni
<OL TYPE="a">
<LI>Analiz&#259; matematic&#259;
<LI>Geometrie
</OL>
<LI>Mar&#355;i
<OL>
<LI>Algoritmic&#259;&#351;i Programare
</OL>
<LI>Miercuri
<LI>Joi
<OL TYPE="i">
<LI>Sport
<LI>Englez&#259;
<LI>Op&#355;ionale
</OL>
<LI>Vineri
<OL TYPE="a">
<LI>Laboratoare
</OL>
</UL>

</BODY>
</HTML>
Pentru enumerarea mai multor definiţii ale aceleiaşi noţiuni se poate
folosi TAG-ul pereche <DL>…</DL> (definition list) cu următoarea structură:

<DL>
<DT>entitatea de definit
<DD>primul aliniat al definiţiei
<DD>al doilea aliniat al definiţiei
…
<DD>ultimul aliniat al definiţiei
</DL>

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 13

Chiar dacă nu ne referim efectiv la definiţii, această structură este utilă

pentru că browserul aplică o anumită aliniere pentru textele introduse de <DT>
şi <DD>.

1.2.5. Definirea legăturilor. TAG-ul <A>…</A>

Se poate spune că elementul caracteristic al paginilor WEB, cu alte
cuvinte, ceea ce le face atât de atractive, este posibilitatea de a trece cu
uşurinţă de la o pagină la alta. Practic, este vorba de facilitatea HTML de a
permite definirea legăturilor (links sau hyperlinks) între pagini.
TAG-ul care defineşte legăturile este <A>…</A>, anchor TAG. Prin
acest element, pagina în care apare TAG-ul <A> devine pagină părinte pentru
entitatea de care se leagă. Pentru structura standard
<A atribute>text_de_legătură</A>
ceea ce apare între TAG-uri, adică text_de_legătură, este textul care apare pe
pagina părinte, text care implicit recunoaşte trecerea mouse-ului pe deasupra
lui şi poate recepţiona semnalul de click de mouse. Legătura se stabileşte
efectiv când se dă click de mouse pe text_de_legătură şi are ca efect afişarea
de către browser a entităţii stabilite de TAG-ul <A> prin valorile atributelor sale.
Atributele uzuale recunoscute de TAG-ul <A> sunt enumerate în
următorul tabel şi vor fi detaliate în acest paragraf.

HREF este atributul cel mai folosit; stabileşte o referinţă la entitatea

la care se face legătura
TARGET defineşte destinaţia pentru afişarea entităţii la care se face
legătura
TITLE defineşte o notă explicativă pentru entitatea la care se face
legătura
NAME se foloseşte în definirea secţiunilor

1.2.5.1. Atributele HREF şi TARGET

Uzual, valoarea atributului HREF introduce trei tipuri de entităţi:
1. numele unui fişier;
2. adresa URL a unui site de Internet;
3. o adresă de e-mail.
Indiferent de entitatea introdusă, atributul HREF asigură că acea entitate
va fi activată de browser când se dă click de mouse pe text(ul)_de_legătură al
TAG-ului <A> respectiv.
Vom explica aceste trei variante de utilizare prin trei exemple
reprezentative.

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 14

Varianta 1. Dacă într-un fişier HTML apare descrierea

Aici sunt <A HREF=”teste.html” TARGET=”new”>teste de evaluare.</A>
atunci pe pagina WEB apare textul Aici sunt teste de evaluare. şi secvenţa
teste de evaluare poate să preia semnalul de click de mouse. Practic, când se
dă click de mouse pe acest text de legătură, browserul va afişa conţinutul
fişierului teste.html, în locul paginii din care s-a apelat legătura (varianta
implicită, când nu apare atributul TARGET) sau într-o pagină nouă, dacă
valoarea atributului TARGET este “new”.
Varianta 2. Dacă într-un fişier HTML apare descrierea
Aici g&#259;si&#355;i informa&#355;ii despre
<A HREF=”http://www.unitbv.ro”>
Universitatea <I>Transilvania</I> din Bra&#351;ov.</A>
atunci pe pagina WEB apare textul Aici găsiţi informaţii despre
Universitatea Transilvania din Braşov. şi dând click de mouse pe secvenţa
Universitatea Transilvania din Braşov, browserul va afişa conţinutul paginii
de Internet http://www.unitbv.ro pe care o descarcă (de pe serverul pe care este
găzduită) la momentul stabilirii legăturii. De asemenea, şi în această situaţie
este util uneori să se folosească atributul TARGET cu valoarea “new”.
Varianta 3. Dacă într-un fişier HTML apare descrierea
De <A HREF=”mailto: popescu@yahoo.com”> aici </A>
pute&#355;i s&#259; ne contacta&#355;i direct prin e-mail.
atunci pe pagina WEB apare textul De aici puteţi să ne contactaţi direct prin
e-mail. şi dând click de mouse pe cuvântul aici, browserul va deschide utilitarul
de poştă electronică asociat de pagina respectivă, de obicei, Outlook Express.
Implicit, la adresa destinatarului este trecută adresa care apare în referinţă
după mailto:, iar la adresa expeditorului este trecută adresa utilizatorului care
a deschis legătura. Acesta din urmă are acum posibilitatea să scrie un mesaj
care se va expedia la destinatar conform cu setările din utilitarul de poştă
electronică folosit.
Observaţie. La definirea secţiunilor şi a ferestrelor (vezi în continuare)
vor apărea şi alte utilizări ale atributului HREF, respectiv ale perechii de atribute
HREF şi TARGET.
Dacă atributul HREF introduce o referinţă către un fişier atunci browserul
caută implicit acel fişier în directorul curent, adică în directorul în care este şi
fişierul care descrie pagina părinte. Dacă se doreşte referirea unui fişier din alt
director atunci se vor folosi următoarele reguli:
Adresare relativ la directorul curent:
– referinţa la directorul părinte al unui anumit director se face cu
combinaţia de caractere “..”; astfel, cu ../ se ajunge la conţinutul
directorului părinte, deci un nivel în sus în structura ierarhică de
organizare a directoarelor; cu ../../ se ajunge două nivele în sus,
ş.a.m.d. în acest fel directorul referit devine directorul curent;
– din directorul curent se poate coborâ în structura de subdirectoare
prin numirea concretă a directoarelor; de exemplu, dacă

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 15

GEORGESCU este subdirector al directorului curent atunci

referirea la un fişier din acest director se face cu
HREF=”GEORGESCU/teste.html”
– combinând cele două reguli anterioare, avem că referinţa
HREF=”../POPESCU/examene.html” este către fişierul
examene.html din directorul POPESCU, care este frate cu directorul
curent din care se apelează referinţa.
..
director_curent
GEORGESCU
teste.html
POPESCU
examene.html

Adresare relativ la rădăcina structurii de directoare

– dacă fişierul referit se află mai aproape de rădăcină decât de
directorul curent atunci se poate folosi o adresare relativă la
rădăcină. Pentru aceasta se foloseşte caracterul / la începutul
adresei fişierului, ceea ce arată browserului că trebuie să caute direct
din rădăcină. De exemplu, dacă fişierul paginii curente este undeva
pe discul local C: şi se doreşte legătura la fişierul cu calea
C:/IONESCU/test.html atunci referirea se va face cu
HREF=”/IONESCU/test.html”, indiferent care este directorul fişierului
din care se apelează legătura.
Adresare absolută:
– pentru fiecare fişier referit se foloseşte calea completă a fişierului, de
la rădăcină până la numele fişierului.
Dacă se creează un site şi se organizează fişierele într-o structură
specifică de directoare şi subdirectoare atunci, pentru ca regăsirea fişierelor să
fie corectă la transferul sitelui de pe un calculator pe altul, se recomandă ca
toate referinţele să se facă relativ la directorul curent al paginii principale a
sitelui.

1.2.5.2. Atributul TITLE

Atributul TITLE al TAG-ului <A>…</A> defineşte o notă explicativă
pentru textul de legătură. De exemplu, să considerăm următoarea structură:
<A HREF=”IMAGINI/woman.gif” TARGET=”new” TITLE=”Imagine cu o
profesoara”>imagine</A>
Conform cu această descriere, când mouse-ul este pe textul de legătură,
adică pe cuvântul imagine, atunci browserul afişează valoarea atributului
TITLE ca notă explicativă pentru conţinutul fişierului referit.

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 16

1.2.5.3. Utilizarea secţiunilor. Atributul NAME

O secţiune este o secvenţă (un fragment) din pagina WEB curentă,
secvenţă care poate fi referită DIRECT din cadrul aceleiaşi pagini sau din alte
pagini. Utilizarea secţiunilor presupune două etape:
1. definirea secţiunii şi
2. referirea la o secţiune deja definită.
Definirea unei secţiuni foloseşte structura
<A NAME=”nume_secţiune”>cod HTML pentru conţinutul secţiunii</A>
In această definire, numele secţiunii nu este obligatoriu să apară între
ghilimele. Codul secţiunii este orice cod HTML corect, indiferent câte linii are şi
ce TAG-uri foloseşte.
Referirea la o secţiune deja definită foloseşte structura
<A HREF=”#nume_secţiune”>text_de_legătură</A>
In această sintaxă caracterul # este obligatoriu pentru a preciza că este
o referire la o secţiune.
Când se activează legătura către o secţiune, browserul va căuta
începutul acelei secţiuni şi va încărca pe pagină codul secţiunii respective exact
de la începutul ei.
Observaţie. O secţiune poate fi referită din acelaşi fişier HTML în care
este definită sau din alt fişier. Dacă este referită din acelaşi fişier atunci referinţa
foloseşte direct numele secţiunii precedat de caracterul #. Dacă secţiunea este
referită din alt fişier atunci referinţa se face cu numirea atât a fişierului cât şi a
secţiunii.

Exemplu. Să considerăm fişierul index.html în care avem definită

secţiunea următoare:
<A NAME=”orar”>
Orarul pentru s&#259;pt&#259;m&#226;na aceasta este:
<UL>
<LI>Luni
<OL TYPE="a">
<LI>Analiz&#259; matematic&#259;
<LI>Geometrie
</OL>
<LI>Mar&#355;i
<OL>

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 17

<LI>Algoritmic&#259;&#351;i Programare
</OL>
</UL>
</A>
Dacă dorim să ne referim la această secţiune din fişierul unu.html atunci
trebuie să folosim TAG-ul <A> sub forma
Pentru <A HREF=”index.html#orar”>20 – 24 Ian</A>
Când utilizatorul va da click de mouse pe textul de legătură
20 – 24 Ian, browserul va deschide fişierul index.html DIRECT cu afişarea
secţiunii orar, adică direct de la textul Orarul pentru săptămâna aceasta este:
…

1.2.5.4. Inserarea imaginilor. TAG-ul <IMG>

Inserarea imaginilor pe o pagină WEB se face cu ajutorul TAG-ului
simplu <IMG>. Concret, pe pagina WEB browserul va încărca imaginea pe
poziţia în care apare în fişierul HTML TAG-ul <IMG>. Acest TAG recunoaşte
următoarele atribute:

SRC defineşte sursa, adică fişierul imagine care se va încărca;

pentru numirea fişierului se folosesc aceleaşi reguli ca şi
pentru referinţele introduse prin HREF
ALT defineşte un text, afişat ca o alternativă la încărcarea imaginii
ALIGN permite alinierea imaginii în raport cu textul alăturat
BORDER defineşte un chenar la afişarea imaginii
HEIGHT defineşte înălţimea de afişare a imaginii
WIDTH defineşte lăţimea de afişare a imaginii
Valoarea atributului ALT este un text care este interpretat diferit de
browser. Astfel, dacă imaginea se poate afişa atunci textul asociat atributului
ALT va apărea ca o notă explicativă a imaginii când se întârzie cu mouse-ul pe
imagine. Dacă imaginea nu se poate afişa (browserul nu găseşte imaginea sau
utilizatorul şi-a dezactivat încărcarea imaginilor) atunci browserul poate folosi
textul introdus prin atributul ALT în locul în care ar fi trebuit să apară imaginea.
Valorile uzuale ale atributului ALIGN sunt: left, right, top, middle, bottom.
Dacă imaginea este aliniată left sau right atunci spaţiul rămas liber la
dreapta, respectiv la stânga ei, se umple cu textul care urmează în fişierul
HTML după TAG-ul <IMG>. Browserul umple acest spaţiu şi apoi continuă
afişarea textului sub imagine.
Exemplu. Următoarea secvenţă pune imaginile una la marginea din
stânga, una la marginea din dreapta ale paginii şi textul între ele.
<IMG SRC=”Stanga.gif” ALIGN=left>
<IMG SRC=”Dreapta.gif” ALIGN=right>
<p>Acest text se va afi&#351;a &#238;ntre cele dou&#259;
imagini.

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 18

Valorile top, middle, bottom ale atributului ALIGN se folosesc pentru a

alinia imaginea pe verticală, în raport cu PRIMUL rând de text care urmează în
fişierul HTML. Aceste alinieri sunt utile când se inserează imagini mici, de tip
butoane sau pictograme, care introduc următorul rând de text.
Valoarea atributului BORDER este dimensiunea în pixeli a lăţimii
chenarului care va încadra imaginea.
Atributele HEIGHT (înălţime) şi WIDTH (lăţime) ale TAG-ului <IMG>
definesc mărimea spaţiului în care se va afişa imaginea. Valorile acestor
atribute sunt numere întregi care reprezintă dimensiunea în pixeli a înălţimii şi
respectiv a lăţimii imaginii.
Observaţie. Un efect deosebit se obţine dacă se combină TAG-ul
<IMG> cu TAG-ul <A HREF=…>…</A> astfel încât imaginea să fie
textul_de_legătură, adică entitatea care să primească click de la mouse pentru
a activa legătura.
Exemplu. Considerăm următoarea secvenţă de fişier HTML:
<A HREF=”DespreParc.html” TARGET=”new”>
<IMG SRC=”DinParc.bmp” ALT=”Toamna, 2001”></A>
Browserul va afişa imaginea din fişierul DinParc.bmp şi va recunoaşte
mesajul de click de mouse pe această imagine. Când un utilizator dă click pe
imaginea respectivă, browserul va deschide o nouă pagină (pentru că s-a
specificat TARGET=”new”) în care va afişa interpretarea fişierului
DespreParc.html.

1.2.6. Crearea şi utilizarea tabelelor

Limbajul HTML permite lucrul cu tabele prin intermediul TAG-ului
pereche <TABLE>…</TABLE>. Atunci când se doreşte crearea unei tabele,
utilizatorul va descrie tabelul respectiv între <TABLE> şi </TABLE >. Pentru
organizarea tabelului în linii şi coloane, precum şi pentru organizarea datelor
propriu-zise se vor folosi TAG-urile <TR>...</TR> (table row, TAG pereche) şi
<TD>…</TD> (table data, TAG pereche). In plus, pentru definirea capului de
tabel sau a antetului pentru fiecare linie se va folosi TAG-ul pereche
<TH>…</TH>.
Structura de bază a unui tabel cu M linii şi N coloane este următoarea:

<TABLE>
<TR><TD>Linia1_Data1</TD>
<TD>Linia1_Data2</TD>…
…
<TD>Linia1_DataN</TD></TR>
<TR><TD>Linia2_Data1</TD>
<TD>Linia2_Data2</TD>…
…
<TD>Linia2_DataN</TD></TR>

…
<TR><TD>LiniaM_Data1</TD>

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 19

<TD>LiniaM_Data2</TD>…
…
<TD>LiniaM_DataN</TD></TR>
</TABLE>

Observaţie. Din această structură se observă că descrierea tabelului se

face PE LINII. Astfel, pe fiecare linie, fiecare TAG <TD> defineşte conţinutul
câte unei celule. Dacă nu se definesc celule unite (vezi în continuare) atunci
pentru fiecare TAG <TR> apar atâtea TAG-uri <TD> câte coloane are tabelul.
Dacă tabelul trebuie să aibă şi cap de tabel atunci imediat după TAG-ul
de început <TABLE> se inserează secvenţa:

<TR><TH>Titlu_Coloana1</TH>
<TH>Titlu_Coloana2</TH>…
…
<TH>Titlu_ColoanaN</TH></TR>

Dacă prima coloană de pe fiecare linie se doreşte să fie afişată ca şi

antet atunci pe fiecare linie, pe poziţia primei coloane se va folosi nu TAG-ul
<TD> ci <TH> (vezi exemplul).

Principalele atribute acceptate de TAG-ul <TABLE > sunt:

BGCOLOR defineşte culoarea fondului de afişare a tabelului*

BORDER defineşte tipul de linii cu care să se afişeze tabelul
(chenarul şi liniile dintre celule)
BORDERCOLOR defineşte culoarea de afişare a chenarului tabelului*
COLS defineşte numărul de coloane
ALIGN defineşte alinierea tabelului în pagină*
VALIGN defineşte alinierea textului în cadrul tuturor celulelor*
WIDTH defineşte lăţimea tabelului pe pagina pe care se afişează
CELLSPACING defineşte distanţa dintre celule şi tabel, respectiv dintre
celulele alăturate; implicit, 2 pixeli

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 20

CELLPADDING defineşte marginea logică a fiecărei celule

* Şi TAG-urile <TR>, <TD> şi <TH> admit acest atribut, dar cu referire
la textul introdus de fiecare dintre ele.

Atributul BGCOLOR este util când se doreşte ca fondul de afişare a

tabelului să fie altul decât fondul paginii curente.
Valoarea atributului BORDER este lăţimea (în pixeli) a chenarului
tabelului şi a liniilor dintre celule. Implicit, valoarea este 1. Valoarea 0 este
interpretată fără linii.
Valorile acceptate pentru atributul ALIGN sunt left şi right. Pentru
alinierea tabelului la centrul paginii se va folosi structura

<CENTER>
<TABLE>
…
</TABLE>
</CENTER>

Alinierea verticală a textului, unitar, pentru toate celulele se defineşte cu

atributul VALIGN. Valorile posibile sunt top şi bottom. Alinierea pe verticală la
mijloc este implicită.
Atributul WIDTH defineşte lăţimea de afişare a tabelului. Valoarea
acestui atribut poate să fie lăţimea exactă (valoare absolută), dată în pixeli sau
poate fi lăţime relativă la lăţimea paginii în care se afişează tabelul (valoare
relativă), dată în procente. Precizarea lăţimii tabelului în procente este utilă
când se doreşte ca browserul să ajusteze lăţimea tabelului o dată ce utilizatorul
îşi redimensionează pagina WEB.
Pe lângă opţiunile de definire unitară a tabelului, programatorul poate
folosi atribute şi direct la nivelul celorlalte TAG-uri implicate în lucrul cu tabele:
<TR>, <TD> şi <TH>. In continuare, vom preciza pentru fiecare dintre aceste
TAG-uri elementele caracteristice.
Toate aceste trei TAG-uri admit atributele uzuale ALIGN, BGCOLOR,
BORDERCOLOR şi VALIGN. Semnificaţia fiecăruia dintre aceste atribute este
similară cu semnificaţia aceluiaşi atribut pentru TAG-ul <TABLE>, dar, evident,
se va referi la textul din entitatea precizată de TAG-ul care defineşte atributul.
Astfel, atributul folosit cu TAG-ul <TR> se va referi la textul de pe linie, atributul
folosit cu TAG-ul <TD> se va referi la textul din celulă, iar atributul folosit cu
TAG-ul <TH> se va referi la o celulă din capul de tabel.
In plus, numai TAG-urile <TD> şi <TH> preiau şi atributul WIDTH cu rolul
de a defini lăţimea unei coloane.
Faţă de aceste atribute preluate de la <TABLE>, TAG-urile <TD> şi
<TH> au şi atribute specifice. Acestea sunt COLSPAN şi ROWSPAN şi
reprezintă opţiunea Merge Cells din editoarele de texte (posibilitatea de a uni

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 21

mai multe coloane sau linii într-una singură). Valoarea acestor atribute este un
întreg care reprezintă câte coloane în jos, respectiv linii la dreapta, vor fi unite.
Exemplu. Propunem un exemplu de fişier HTML pentru realizarea
tabelului unui orar simplu:

<HTML>
<BODY BGCOLOR = "#FFFFCC" TEXT = "#11AA11">
<h2><center>ORARUL cursurilor &#351;i laboratoarelor de TEHNICI
DE COMPILARE</center></h2><br>
<CENTER>
<TABLE BORDER=1 COLS=2 WIDTH="75%">
<TR><! – – cap de tabel – –>
<TH>&nbsp</TH>
<TH align=center>CURS</TH>
<TH align=center>LABORATOR</TH>
</TR><TR>
<TH>Grupa 7281</TH> <! – – antet pe prima linie – –>
<TD rowspan=3> <center>Luni 13:00 PIII1</center></TD>
<TD align=center>Luni 9:30 PII5, Asist. Cristina Luca</TD>
</TR><TR>
<TH>Grupa 7282</TH><! – – antet pe linia a doua– –>
<TD align=center>Luni 15:30 PII5, Asist. S. Dumitrescu</TD>
</TR><TR>
<TH>Grupa 7581</TH><! – – antet pe linia a treia– –>
<TD align=center>Luni 17:30 PII5, Asist. S. Dumitrescu</TD>
</TR>
</CENTER>
</TABLE>
</BODY>
</HTML>

Conform acestor specificaţii, tabelul orarului afişat pe o pagină WEB

este:

ORARUL cursurilor şi laboratoarelor de TEHNICI DE COMPILARE

CURS LABORATOR
Grupa 7281 Luni 9:30 PII5, Asist. Cristina Luca
Grupa 7282 Luni 13:00 PIII1 Luni 15:30 PII5, Asist. S. Dumitrescu
Grupa 7581 Luni 17:30 PII5, Asist. S. Dumitrescu

1.2.7. Crearea şi utilizarea frame-urilor

Ferestrele HTML (frame-uri sau cadre) sunt o variantă mai puternică de
tabele HTML. Ferestrele împart pagina WEB în mai multe zone, cu avantajul
principal că programatorul poate defini prin codul HTML ca fiecare fereastră să
afişeze un anumit conţinut: text, imagini, legături către diferite entităţi (fişiere,
imagini, pagini de Internet legate prin adrese URL). Astfel, rezultă principala

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 22

facilitate a lucrului cu ferestre şi anume posibilitatea de a afişa simultan

conţinutul a mai multe pagini de Internet, în ferestre diferite.
Prin împărţirea paginii de afişare în mai multe ferestre, fiecare putând fi
actualizată individual, rezultă o varietate mare de organizare a interfeţei
(aspectului) paginii respective.
Utilizarea ferestrelor (frame-urilor) este recomandată mai ales în
următoarele situaţii:
 crearea unui cuprins al conţinutului întregului site – în general, un
astfel de cuprins apare ca un meniu în stânga paginii; dacă acest
meniu este definit într-o fereastră atunci apare avantajul că el va
rămâne afişat pe toată durata vizualizării site-ului, indiferent de
conţinutul celorlalte ferestre;
 păstrarea constantă a unui element grafic într-o anumită zonă a
ecranului – dacă, de exemplu, se doreşte afişarea unei sigle într-o
anumită zonă de ecran, indiferent de modificările conţinutului altor
zone, atunci sigla respectivă se va defini într-o fereastră proprie.

1.2.7.1. Crearea frame-urilor

Pentru crearea ferestrelor HTML (frame-uri) se foloseşte TAG-ul
pereche <FRAMESET> … </FRAMESET>.
Dacă pe o pagină sunt definite ferestre atunci toată pagina va fi ocupată
de aceste ferestre (nu se pot defini ferestre pentru o parte a paginii). De aceea,
este important de reţinut că TAG-ul <FRAMESET> înlocuieşte TAG-ul
<BODY>. Rezultă următoarea structură de bază a unui fişier HTML cade
defineşte o pagină WEB cu ferestre:

<HTML>
<HEAD>
<TITLE>
…
</TITLE>
</HEAD>
<FRAMESET>
codul pentru definirea ferestrelor şi, eventual, alte TAG-uri
</FRAMESET>
</HTML>
TAG-ul <FRAMESET> împarte pagina într-un tabel definit de numărul
de linii şi de coloane. Pentru aceasta, TAG-ul recunoaşte două atribute: ROWS
(linii) şi COLS (columns, coloane). Pentru ambele atribute valorile sunt
secvenţe de numere, câte unul pentru fiecare linie (coloană) de definit. Aceste
numere reprezintă dimensiunea absolută (în pixeli) sau dimensiunea relativă
(în procente) a fiecărei linii (coloane) pe pagină. In plus, în secvenţă poate să
apară caracterul „*” cu semnificaţia linia (coloana) ocupă restul paginii. Implicit,

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 23

numărul de linii (coloane) rezultă din numărul de elemente din secvenţa de

valori.
Observaţie. Este important de reţinut că pentru fiecare apariţie a TAG-
ului <FRAMESET> se va folosi sau numai atributul ROWS sau numai COLS.
Pentru a creea linii în coloane (sau coloane în linii) se vor folosi TAG-uri
<FRAMESET> imbricate.
Exemplu. Ne propunem să definim o pagină împărţită în cinci ferestre,
o coloană cu două linii şi o coloană cu trei linii. Schema de organizare a paginii
va fi următoarea:
25% 75%

fereatra 1 fereatra 3 33%

50%

fereatra 4 33%

fereastra 2
50%
fereatra 5 33%

Pentru definirea acestei structuri folosim următoarea descriere HTML:

<FRAMESET COLS = ”25%, 75%”>

<FRAMESET ROWS = ”50%, 50%”>
descrierea primei ferestre (coloană cu două linii)
</FRAMESET>
<FRAMESET ROWS = “33%, 33%, *”>
descrierea ferestrei a doua (coloană cu trei linii)
</FRAMESET>
</FRAMESET>

1.2.7.2. Definirea conţinutului

TAG-ul <FRAME> este folosit în interiorul TAG-ului <FRAMESET>
pentru a defini conţinutul fiecărei ferestre. Practic, TAG-ul <FRAMESET>
defineşte structura paginii (numărul de ferestre şi felul în care acestea ocupă
pagina), în timp ce TAG-ul <FRAME> defineşte conţinutul fiecărei ferestre.
Principalul atribut folosit de TAG-ul <FRAME> este SRC (source).
Valoarea acestui atribut este sursa, entitatea care se va afişa în fereastra
respectivă: fişier HTML, imagine, pagină WEB dată prin adresa URL ş.a.m.d.
De exemplu, putem detalia descrierea coloanei a doua din exemplul
anterior precizând ce entitate să se deschidă în fiecare fereastră astfel:

<FRAMESET ROWS = ”33%, 33%, *”>

<FRAME SRC = “Documente/Introducere.html”>
<FRAME SRC = “Imagini/Schema.jpg”>
<FRAME SRC = “http://cs.unitbv.ro”>
</FRAMESET>

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 24

Pe lângă atributul SRC, TAG-ul <FRAME> recunoaşte şi următoarele

atribute:

NAME defineşte numele ferestrei

MARGINWIDTH defineşte lăţimea marginii logice* a ferestrei (în pixeli)
MARGINHEIGHT defineşte înălţimea marginii logice* a ferestrei (în pixeli)
SCROLLING pune (sau nu) bară de defilare în fereastră
NORESIZE inhibă posibilitatea utilizatorului de a redimensiona
fereastra
* Marginea logică a unei ferestre este spaţiul liber lăsat între marginea
ferestrei şi textul din interiorul ei.

Atributul SCROLLING are valoarea implicită auto. Această valoare

asigură că browserul va pune în fereastra respectivă bară de defilare dacă
textul ocupă mai mult decât suprafaţa activă de afişare a ferestrei. Alte valori
sunt Yes şi No prin care programatorul impune apariţia (respectiv inhibă
apariţia) barei de defilare.
Atributul NAME pentru TAG-ul <FRAME> defineşte numele ferestrei
respective. Operaţia de numire a unei părţi dintr-o pagină WEB a fost întâlnită
şi la numirea secţiunilor (vezi anterior atributul NAME pentru TAG-ul <A>).
O dată ce o fereastră are un nume, ea poate fi accesată DIRECT din alte
ferestre. Mai mult, numele ferestrei poate fi folosit ca valoare a atributului
TARGET pentru definirea destinaţiei de afişare a conţinutului unei legături (vezi
anterior combinaţia de atribute HREF şi TARGET pentru TAG-ul <A>).
Exemplu. Să reluăm din exemplul anterior următoarea secvenţă
detaliată:
…
<FRAMESET ROWS = ”50%, 50%”>
<FRAME SRC = “vedere.html” NAME = “fereastra1”>
<FRAME SRC = “http://cs.ubbcluj.ro” NAME = “fereastra2”>
</FRAMESET>
…
O dată ce această structură este definită, orice fişier HTML poate referi
cele două ferestre prin numele lor (fereastra1 şi fereastra2). Astfel, următoarele
linii HTML definesc deschiderea conţinutului legăturilor respectiv în una dintre
cele două ferestre:
<A HREF = “Documente/Analiza.html” TARGET = “fereastra1”>ANALIZA</A>
<A HREF = “http://www.unibuc.ro” TARGET = “fereastra2”>BUCURESTI</A>

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 25

1.2.8. Crearea şi utilizarea formularelor

Formularele sunt elemente HTML care fac cu adevărat ca paginile WEB
să fie interactive. Prin intermediul formularelor utilizatorii pot comunica direct cu
proprietarii paginilor WEB.
Un formular HTML este o entitate care, pe lângă elemente generale de
tip text sau imagine, preia de la formularele standard (imprimate pe hârtie)
elemente specifice, cum ar fi: linii de editare, comutatoare (butoane de tip
check-box individuale sau grupate), butoane radio (individuale sau grupate),
liste şi liste ascunse. In plus, elementul care asigură dinamica comunicării prin
formulare sunt declanşatoarele – butoane de tip <Ok>, <Cancel>, <Submit> –
prin care utilizatorul decide cum să încheie lucrul cu formularul respectiv.

1.2.8.1. Definirea formularelor

Din punctul de vedere al sintaxei HTML, TAG-ul pentru crearea şi
definirea formularelor este <FORM>…</FORM>. O dată ce formularul a fost
definit, se va folosi TAG-ul <INPUT> pentru a insera fiecare obiect de control
(linie de editare, comutator, buton radio, listă, declanşator).
Atributele uzuale ale TAG-ului <FORM> sunt ACTION şi METHOD.
Valoarea atributului ACTION defineşte destinaţia pentru care este scris
formularul, practic aplicaţia care va prelua şi va interpreta formularul completat
de utilizator. In general, valoarea atributului ACTION este adresa URL a
aplicaţiei destinatar sau o referinţă la o adresă de e-mail la care se va trimite
formularul completat.
Un exemplu cu adresă URL este:
<FORM ACTION = “http://www.prince.com/cgi-bin/update”>
descrierea conţinutului formularului
inserarea declanşatorului de trimitere a formularului
</FORM>
Adresa URL din acest exemplu este corectă dacă în directorul cgi-bin
din directorul gazdă al site-ului www.prince.com se găseşte aplicaţia cu numele
update care ştie să interpreteze datele transmise prin formular.
Un exemplu de definire a unui formular cu destinaţie cont de e-mail este:
<FORM ACTION = “mailto:o.georgescu@ info.unitbv.ro”>
descrierea conţinutului formularului
inserarea declanşatorului de trimitere a formularului
</FORM>
In acest caz declanşarea butonului de trimitere va împacheta datele din
formular şi le va trimite sub forma unui mesaj electronic la adresa
o.georgescu@ info.unitbv.ro.
Atributul METHOD al TAG-ului <FORM> defineşte metoda de folosit
pentru trimiterea formularului de la pagina WEB a utilizatorului la serverul care
va prelucra datele din formular. Valorile acestui atribut pot fi “GET” sau ”POST”.
Transmiterea de tip GET se face într-un singur pas (asincron): browserul
contactează serverul destinaţie şi adaugă datele din formular o dată cu

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 26

declanşarea butonului de trimitere de pe pagina utilizatorului. Transmiterea de

tip POST se face în doi paşi (sincron): în primul pas browserul contactează
serverul destinaţie şi, dacă conexiunea s-a putut stabili, atunci în al doilea pas
transmite datele din formular.
Observaţie. Dacă formularul HTML este creat pentru a transmite
parametri către un program sursă (de exemplu, o aplicaţie JAVA) atunci
trebuiesc cunoscute regulile pe baza cărora parametrii respectivi sunt preluaţi
de browser în fiecare dintre cele două metode, GET şi POST.

1.2.8.2. Inserarea obiectelor de control în formular

O dată definit un formular, el trebuie încărcat cu obiecte de control
specifice (linii de editare, butoane, declanşatoare, liste). Pentru aceasta,
limbajul HTML recunoaşte TAG-ul simplu <INPUT> şi TAG-ul pereche
<SELECT>…</SELECT>.
Fiecare apariţie a unui astfel de TAG inserează un obiect exact la poziţia
la care apare TAG-ul. Cu alte cuvinte, obiectele de control din formular pot fi
înconjurate de texte şi imagini şi poziţia controlului este dată de poziţia TAG-
ului <INPUT>, respectiv <SELECT> în fişierul sursă HTML.
TAG-ul <INPUT> inserează linii de editare, butoane şi declanşatoare.
Principalele atribute ale TAG-ului <INPUT> sunt:

ALIGN defineşte alinierea controlului pe pagină

TYPE defineşte tipul de control care se va insera
NAME defineşte numele controlului
VALUE defineşte valoarea implicită a controlului; aceasta se
afişează pe pagină
CHECKED defineşte starea bifat a controlului ca fiind implicită
SIZE stabileşte dimensiunea (în caractere) a suprafeţei de
afişare a liniei de editare
MAXLENGTH stabileşte numărul maxim de caractere care se pot
introduce într-o linie de editare

Valorile uzuale ale atributului TYPE sunt:

text pentru o linie de editare

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 27

checkbox pentru un comutator (buton de tip check-box)

radio pentru un buton radio
submit pentru un declanşator

Exemplu. Să considerăm următoarea secvenţă dintr-un fişier HTML.

<FORM ACTION="mailto:popescu@hotmail.com" METHOD="post">
P&#259;rerea Dumneavoastr&#259;:
<INPUT TYPE="text" NAME="parere" VALUE="Scrieti aici" SIZE=30>
<br><br>
<TABLE border="0" cols=2>
<TR><TD>Apreciere general&#259;:</TD>
<TD><INPUT TYPE="checkbox" NAME="interes">curs interesant</TD>
</TR><TR>
<TD>&nbsp;</TD>
<TD><INPUT TYPE="checkbox" NAME="util">curs util</TD>
</TR><TR>
<TD>&nbsp;</TD>
<TD><INPUT TYPE="checkbox" NAME="predat">curs bine predat</TD>
</TR>
</TABLE>
<br>
Se expediaz&#259; la Profesor: <INPUT TYPE="SUBMIT" VALUE="Trimite">
</FORM>
In acest formular s-au inserat:
– o linie de editare cu numele “parere”, în care apare de la început
textul “Scrieti aici” şi de dimensiune de afişare 30 de caractere;
utilizatorul va putea să şteargă textul “Scrieti aici” şi va completa
propria părere despre curs;
– urmează trei comutatoare organizate pe coloana a doua a unui tabel
(pe prima coloană apare numai în prima linie textul Apreciere
generală); niciunul dintre comutatoare nu este bifat implicit pentru că
niciunul nu este marcat cu atributul CHECKED;
– pe ultima linie a formularului apare declanşatorul de tip <Submit> cu
valoarea implicită “Trimite”; aceasta înseamnă că pe buton apare
cuvântul “Trimite”.
Rezultă următorul formular:

Ce puteţi spune despre acest curs…

Părerea Dumneavoastră: Scrieti aici

Apreciere generală: □ curs interesant

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 28

□ curs util
□ curs bine predat

Se expediază la Profesor: Trimite

TAG-ul pereche <SELECT>…</SELECT> inserează liste şi liste

ascunse. Pentru aceasta, în interiorul TAG-ului <SELECT> fiecare opţiune din
listă se introduce prin TAG-ul simplu <OPTION>. TAG-ul <SELECT> acceptă
atributele NAME şi SIZE.
Lista va afişa atâtea opţiuni cât este dimensiunea ei (valoarea atributului
SIZE). Dacă numărul de opţiuni este mai mare decât dimensiunea listei atunci
browserul pune implicit marca de listă ascunsă (▼) prin care utilizatorul are
acces la opţiunile iniţial ascunse.
Exemplu. Ne propunem să construim un formular cu o linie de editare,
două butoane radio, o listă ascunsă (adică o listă de dimensiune 1) cu trei
opţiuni şi declanşatorul de trimitere a formularului.

Datele Dumneavoastră personale:

Nume:
Sex : feminin masculin
Vârsta: Sub 20 ani ▼

Trimite

Pentru acest formular, secvenţa HTML este:

<FORM ACTION="mailto:popescu@hotmail.com" METHOD="post">
Datele Dumneavoastr&#259; personale:
<INPUT TYPE="text" NAME="nume" SIZE=30 MAXLENGTH=30>
<BR>
Sex:
<INPUT TYPE="radio" NAME="F">feminin</TD>
<INPUT TYPE="radio" NAME="M">masculin</TD>
<BR>
V&#226;rsta:
<SELECT NAME=”varsta” SIZE=1>
<OPTION>Sub 20 ani
<OPTION>Intre 20 ani &#351; 30 ani
<OPTION>Peste 30 ani
</SELECT>
<BR>
<CENTER><INPUT TYPE="SUBMIT" VALUE="Trimite"></CENTER>

ANCA VASILESCU
vasilex@info.unitbv.ro
 ÎNDRUMAR HTML 29

</FORM>

ANCA VASILESCU
vasilex@info.unitbv.ro