Ce Este HTML

Ce este HTML ?
Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML
( Hypertext Markup Language ), care descrie formatul primar in care documentele sunt
distribuite si vzute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de
platforma, structurarea formatrii si legaturile hypertext, fac din el un foarte bun format
pentru
documentele
Internet
si
Web.
Primele specificaiile de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o
posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe ntre ei informaie
utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma,
posibiliti hypertext si structurarea documentelor.Independenta de platforma nseamn ca
un document poate fi afiat in mod asemntor de computere diferite ( deci cu fonte, grafica
si
culori
diferite
),
lucru
vital
pentru
o
audienta
att
de
variata.
Hipertext nseamn ca orice cuvnt, fraza, imagine sau alt element al documentului vzut de
un utilizator ( client ) poate face referina la un alt document, ceea ce uureaz mult
navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document.
Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul
precum si interogarea unor baze de date formate din aceste documente.
Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet
Engineering Task Force (IETF). W3C a enunat cteva versiuni ale specificaiei HTML, printre
care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelai
timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile
"extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele
cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de
autorii
de
browsere.
HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate
browserele curente -- inclusiv cele mod text. HTML 2.0 reflecta concepia originala a HTML ca
un limbaj de marcare independent de obiectele existente pentru aezarea lor in pagina, in
loc de a specifica exact cum ar trebui sa arate acestea. Dac dorii sa fii siguri ca toi
vizitatorii vor vedea paginile aa cum trebuie, folosii tagurile HTML 2.0.
Specificaia HTML 3.0, Enunata in 1995, a ncercat sa dezvolte HTML 2.0 prin adugarea unor
faciliti precum tabelele si un mai mare control asupra textului din jurul imaginilor. Dei
unele din noutile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau nc. In
unele cazuri, taguri asemntoare implementate de autorii de browsere au devenit mai
rspndite dect tagurile "oficiale". Specificaia HTML 3.0 acum a expirat, deci nu mai este
un
standard
oficial.
In Mai 1996, W3C a scos pe piaa specificaia HTML 3.2, care era proiectata sa reflecte si sa
standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce
erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML rspndite.
In Bilanul asupra HTML, W3C recomanda ca providerii de informaii sa utilizeze specificaia
HTML 3.2.Versiunile curente ale majoritii browserelor ar trebui sa suporte toate, sau
aproape
toate
aceste
taguri.
De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificaia HTML
3.2, ori pentru ca sunt mai puin utilizate, ori au fost omologate dup apariia HTML 3.2.
Pentru ca navigatorul Netscape a fost printre primele browsere care suporta anumite taguri
HTML 3.0, iar Netscape deine in jur de 70% din piaa de browsere, muli au crezut eronat ca
toate extensiile Netscape (incluznd taguri ca si facilitai ca ferestrele) fac parte din HTML
3.0
sau
HTML
3.2.
La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja publicate
specificatiile
HTML
4.01.
Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu orice editor
de texte. Au fost insa dezvoltate editoare specializate care permit editarea intr-un fel de
WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit navigatoarele afieaz acelasi
document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de asemenea

dezvoltate convertoare care permit formatarea HTML a documentelor generate ( si formatate
) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare
deoarece limbajul HTML este inca incomplet.
1. Structura documentului HTML.
Orice document HTML ncepe cu notaia <html> si se termina cu notaia </html>. Aceste
"chestii" se numesc in literatura de specialitate "TAG-uri".Prin convenie, toate informaiile
HTML ncep cu o paranteza unghiulara deschisa " < " si se termina cu o paranteza unghiulara
nchisa "
>
".
Tag-urile intre aceste paranteze transmit comenzi ctre browser pentru a afia pagina intr-un
anumit mod. Unele blocuri prezint delimitator de sfrit de bloc, in timp ce pentru alte
blocuri
acest
delimitator
este
opional
sau
chiar
interzis.
Intre
cele
doua
marcaje <html> si </html> vom
introduce
doua
seciuni:
- sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>.
Blocul <body>...</body> cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi
afiat in fereastra browser-ului.
O eticheta poate fi scris att cu litere mici, cat si cu litere mari.

Adic <html> = <HTML> = <Html>. Caracterele "spaiu" si "CR/LF" ce apar intre etichete sunt
ignorate
de
ctre
browser.
Deci un prim document HTML ar fi ceva de genul asta:
1
2
3
4
5
<html>
<head> </head>
<body>
</body>
</html>
Aa arata primul document HTML. Copiai-l folosind Copy/Paste ntr-un fiier nou i salvai-l
ca PRIM.HTM sau PRIM.HTML. Apoi pornii Internet Explorer sau Google Crome, dai CTRL-O si
introducei
calea
spre
fiier.
Dai
OK
si
...
nimic.
S nu disperam ... vom aduga primele elemente la pagina noastr. n primul rnd, titlul unei
pagini se obine insernd n seciunea<head>...</head> a urmtoarei linii:
<title>Aceasta
este
prima
mea
pagina
de
Web</title>
n plus, n seciunea <body>...</body> putem scrie texte ct dorim. Daca nu ntlnim nici un
marcaj < sau > atunci interpretorul HTML le va lua ca texte simple si le va afia pe ecran. Sa
vedem o noua versiune a paginii noastre:
1 <html>
<head>
3
4
5
6
7
8
<title>Aceasta este prima mea pagina de Web</title>

</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>
Coninutul blocului <title>...</title> va aprea in bara de titlu a ferestrei browser-ului.

Daca acest bloc lipsete ntr-o pagina HTML, atunci n bara de titlu a ferestrei browser-ului va
aprea
numele
fiierului.
Daca introducem mai multe linii intr-o pagina browser-ul va afia intr-un singur rnd, ntruct
caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie noua se face la o comanda
explicita,
care
trebuie
sa
apar
n
pagina
html.
Aceasta comand este marcajul <br> ( de la " line break " - ntrerupere de linie ).
Folosind aceleai operaii ca mai sus, vizualizai noua pagina! Vei vedea textul ce apare n
fereastra navigatorului. n plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.
1
2
3
4
5
6
7
8
<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
Bine ati venit in <br> pagina mea de Web!
</body>
</html>
Blocuri preformatate
Pentru ca browser-ul s interpreteze corect caracterele " spaiu ", " tab " si " CR/LF " ce apar
n cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>.
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>Bloc preformatat </title>
</head>
<body>
<pre>
Prima linie
A doua linie
A treia linie
</pre>
</body>
</html>
Culoarea de fond
O culoare poate fi precizata n dou moduri:
Printr-un nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black, fuchsia,
gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
Prin construcia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot
lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536
de culori.
Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabilete cu atributul bgcolor al etichetei <body>, de
exemplu:
<body
bgcolor
Urmtorul exemplu realizeaz o pagin cu fondul de culoare gri.
1
2
3
4
5
6
7
8
culoare>.
<html>
<head>
<title>Culoare de fond </title>
</head>
<body bgcolor="gray">
O pagina Web cu fondul GRI!
</body>
</html>
Culoarea textului
Acest lucru se face prin intermediul atributului text al etichetei <body> dup sintaxa <body
text=culoare>. n urmtorul exemplu textul are culoarea roie.
1
2
3
4
5
6
7
8
<html>
<head>
<title>culoare textului </title>
</head>
<body text="red">
Un text de culoare rosie.
</body>
</html>
O eticheta poate avea mai multe atribute. De exemplu , o eticheta cu trei atribute arata
astfel: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>. Urmtorul
exemplu prezint o pagina cu fondul de culoare albastra si textul de culoare galben.
1
2
3
4
5
6
7
8
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor="blue" text="yellow">
Fond de culoare albastra si text de culoare galbena.
</body>
</html>
Textul afiat este caracterizat de urmtoarele atribute: Mrime ( size), Culoare ( color ), Font
(style).
Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fr delimitator de
sfrit
de
bloc).
<basefont
size
= numar color
= culoare style
= font>
unde:
numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru fontul cel mai
mare);
culoare - este o culoare precizata prin nume sau printr-o construcie RGB;
font - poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau
un font specific instalat pe calculatorului clientului, ca " Times New Roman ", " Helvetica " sau "
Arial ".Se accepta ca valoare si o lista de fonturi separate prin virgula, de exemplu:
" Times New Roman, serif, monospace ".
Domeniul de valabilitate al caracteristicilor precizate de aceasta eticheta se ntinde de la
locul in care apare eticheta pana la sfaritul paginii sau pana la urmtoarea
eticheta <basefont>.
Daca acest atribut lipsete atunci textul din pagina Web are atribute prestabilite sau atribute
1
2
3
4
5
6
7
8
9
precizate
de
browser-ul
utilizat.
Atributele prestabilite sunt: size = 3, color = black, i style = " Times New Roman " .
Poziionarea coninutului paginii Web fata de marginile ferestrei browser-ului se poate face
cu ajutorul a dou atribute ale etichetei<body>:
leftmargin ( stabilete distanta dintre marginea stnga a ferestrei browser-ului si marginea

stng a coninutului paginii );
topmargin ( stabilete distanta dintre marginea de sus a ferestrei browser-ului si marginea de

sus a coninutului paginii );
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br>
<basefont style="Arial" color="blue" size="6">Textul este scris cu fontul "Arial", culoa
marime 6.
</body>
</html>
Stiluri pentru blocurile de text
Pentru ca un bloc de text sa apar in pagina evideniat (cu caractere aldine), trebuie inclus
intre
delimitatorii <b>...</b> (
b
vine
de
la
"bold"
=
ndrzne).
Pentru ca un text sa fie scris cu caractere mai mari cu o unitate dect cele curente acesta
trebuie
inclus
intr-un
bloc
delimitat
de
etichetele <big>...</big>.
Pentru ca un text sa fie scris cu caractere mai mici cu o unitate dect cele curente acesta
trebuie
inclus
intr-un
bloc
delimitat
de
etichetele <small>...</small>.
Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus intr-un bloc delimitat
de
etichetele <i>...</i> (
i
vine
de
la
"
italic
").
Pentru a insera secvene de text aliniate ca indice (sub-script) sau ca exponent (superscript) , aceste fragmente trebuie delimitate de etichetele <sub>...</sub>,
respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele <u>...</u> (u vine de
la
"
underline
").
Pentru
a
insera
un
bloc
de
caractere
tiate
se
utilizeaz
etichetele <strike>...</strike> sau <s>...</s>.
n exemplul urmtor vom utiliza toate etichetele menionate anterior.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<title>Stiluri pentru blocuri de text </title>
</head>
<body>
<b>Text scris cu caractere ingrosate.</b><br />
<big>Text cu caractere marite cu o unitate <big>mai mare<big>si mai mare<big>si mai
mare.</big></big></big></big>
<br><small>Textul este scris cu caractere micsorate cu o unitate <small>mai mic.</smal
<i>Text scris cu caractere italice.</i>
<br>In aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscirpt
<strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike> <b
In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> se
</body>
</html>
Stiluri fizice si logice
Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite si stiluri fizice
intrucat nu s-a acordat nici o atentie semnificatiei informatiei continute de aceste blocuri.
In continuare sunt prezentate stilurile utilizate la formatarea unui bloc.
Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web.
Pentru a pune in evidenta ( prin silul cursiv ) fragmente de text se utilizeaza etichetele:
<cite>...</cite> ( " cite " inseamna citat);

<em>...</em> (em vine de la " emphasize " = a evidentia).
n locul lor se poate utiliza eticheta echivalenta <i>...</i>.

Urmatoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu
caractere monospatiate (de tipul celor folosite de o main de scris):
<code>...</code> ( " code " inseamna cod sau surs);

<kbd>...</kbd> ( kbd vine de la " keyboard " = tastatura);
<tt>...</tt> ( tt vine de la " teletype " = teleprinter).
Eticheta de tip bloc <blink>...</blink> delimiteaz fragmente de text clipitoare. Aceasta

eticheta funcioneaz numai in browser-ul Netscape Communicator.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>Blocuri de caractere monospatiate si clipitoare </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 comanda DOS:
<kbd> copy c:\windows\* c:\temp</kbd><br>
<tt>Asa scrie un teleprinter</tt><br>
Acest cuvant clipeste<blink>Blink</blink>
</body>
</html>
Exemplul urmtor ilustreaz c etichetele pot fi imbricate.

Un fragment de text poate fi scris cu aldine i cursive in acelai timp.
Pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mrit si cursiv.
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Imbricarea etichetelor </title>
</head>
<body>
Aceasta linie este formata din text normal.<br />
Normal<b>ingrosat<i>ingrosat si italic</i>ingrosat</b>.<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>
Blocul <q>...</q> permite inserarea in-line a citatelor. Brouwser-ul afieaz citatele n

ghilimele.
"q"
vine
de
la
"
in-line
quotation
"
(citate
inserate
in-line).
i blocurile " q " pot fi imbricate.
Exemplu(de sine stttor).
&-consecutiviti
Simbolurile "<" i ">" sunt percepute de sistemele browser ca nceputuri i sfrituri de HTMLtaguri. Apare ntrebarea, cum sreprezentm aceste simboluri pe ecran?
n limbajul HTML aceasta se poate realiza cu ajutorul &- consecutivitilor (ele se mai numesc
obiecte simbolice sau escapeconsecutiviti).
Exist mai multe consecutiviti de acest tip:
"<"
">"
"&"
Ghilimelele(") se codific - "
(ampersand)
<
>
&
Pentru escape-consecutiviti sunt dou restricii suplimentare:

1.
2.
Fiecare consecutivitate se scrie numai cu minuscule

Sfritul fiecrei consecutivit!i este marcat de
n general, asemenea consecutiviti exist pentru toate simbolurile cu codurile ASCII mai
mari dect 127. Motivul este c unele servere nu susin transmiterea datelor cte 8 bii.
Exist mai multe metode de a include semnele diacritice romne n documentele HTML. Cea
mai simpl este codificarea direct a lor prin &-consecutiviti:
1
2
3
4
5
6
7
8
9
Ă
ă
Î
î
Ş
ş
Ţ
ţ
Â
- â
Exemplu:
<html >
<head>
<title>Codificarea semnelor diacritice româneşti în
limbajul HTML </title>
</head>
<h3>Codificarea semnelor diacritice româneşti în
limbajul HTML</h3>
<p> <b>Ă</b> - Ă</p>
<p> <b>ă </b> - ă</p>
<p> <b> Î</b> - Î</p>
<p> <b> î</b> - î</p>
10
11
12
13
14
15
16
17
18
19
<p> <b> Ş </b> - Ş</p>

<p> <b> ş </b> - ş</p>
<p> <b> Ţ </b> - Ţ</p>
<p> <b> ţ </b> - ţ</p>
<p> <b> Â </b> - Â</p>
<p> <b>â </b> - â</p>
</body>
</html>
Comentarii
Sistemele browser ignor reproducerea oricrui text situat ntre . Este o opiune
special pentru introducerea n textul documentului HTML a unor comentarii, ce nu for fi
afiate
pe
ecran.

2. Formatarea caracterelor, organizarea textului.
Un font este caracterizat de urmtoarele atribute:
culoare (stabilita prin atributul color);

tipul sau stilul (stabilit prin atributul face);
mrimea (definita prin atributul size);
mrimea in puncte tipografice (stabilita prin atributul point-size);
grosime (definita prin atributul weight).
Toate aceste atribute aparin etichetei <font>, care permite inserarea de blocuri de texte
personalizate.
Culori
O culoare poate fi precizata n dou moduri:
printr-un nume de culoare.

printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de
constant se formeaz astfel: #rrggbb, unde r, g si b sunt cifre hexazecimale.
Culoarea fontului
Pentru a scrie un fragment de text cu caractere de o anumit culoare se ncadreaz acest
fragment ntre delimitatorii <font>...</font>avnd stabilit atributul color la valoarea
necesara. De exemplu:
<font color=red>fragment de text de culoare rosie</font>
Familia fontului
Pentru a scrie un text intr-o pagin pot fi folosite mai multe fonturi (stiluri de caractere).
Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate calculatoarele
utilizatorilor: serif,
sans
serif,
cursive,
monospace
i
fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei <font>.
Pot fi introduse mai multe fonturi separate prin virgula.
<font face = " Arial, serif, monospace ">
n acest caz browser-ul va utiliza primul font pe care l cunoate.
<html>
1
<head>
2
<title> Culoarea si familia fontului</title>
3
</head>
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
Aceste linie este scrisa cu caractere normale.<br />
<font color="red">Aceasta linie este rosie.</font><br />
Aici<font color="green">fiecare</font>
<font color="blue">cuvant</font>
<font color="yellow">are</font>
<font color="cyan">alta</font>
<font color="#3478fa">culoare.</font><br />
<font face="monospace">Linie scrisa cu caractere monospatiate.</font> <br />
<font face="arial">Linie scrisa cu caractere arial.</font>
</body>
</html>
Mrimea fontului
Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei <font>. Valorile
acestui atribut pot fi:
1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);
+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;
-1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.
Mrimea unui font poate fi stabilita exact cu ajutorul atributului point-size. Valorile
acceptate de acest atribut pot fi orice numere naturale pozitive. Numrul astfel precizat
reprezint
mrimea
fontului
n
puncte
tipografice.
Acest atribut funcioneaz numai cu Netscape Communicator.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
<html>
<head>
<title> Marimea fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale. <br />
<font size="5">Fonturi de marime 5.</font><br />
<basefont size="4">Fonturi de marime 4.</font><br />
<font size="-3">Fonturi de marime 1.</font><br />
<font size="+2">Fonturi de marime 6.</font><br />
<font point-size="30">Fonturi de marime 30 pt (numai cu
<font point-size="50">Fonturi de marime 50 pt (numai cu
</body>
</html>
Netcape Communicator).</font>
Netcape Communicator).</font>
Grosimea unui font

Grosimea unui caracter poate fi definit cu ajutorul atributului weight al etichetei <font>.
Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100
pentru fontul cel mai subire si 900 pentru cel mai gros).
<html>
<head>
<title> Grosimea fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale. <br>
<font weight="100">Fonturi de grosime 100.</font> <br>
<font weight="500">Fonturi de grosime 500.</font> <br>
8
9
10
11
<font weight="900">Fonturi de grosime 900.</font>

</body>
</html>
3. Blocuri de text
Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile
pe
care
le
poate
avea
un
bloc
de
text
in
cadrul
paginii
Web.
Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu
suplimentar.
Inserarea unei adrese
Daca intr-o pagina web trebuie inclusa o adresa ,atunci putem utiliza facilitatile oferite de o
eticheta dedicata: <address>...</address>.
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title> Adresa</title>
</head>
<body>
Adresa institutiei noastre este :<address> Colegiul de Informatic din Chiinu <br>
Str: Sarmizegetusa 48 <br>
Chiinu Moldova </address>
</body>
</html>
Indentarea unui bloc

Pentru ca un bloc de text sa fie indentat ( marginea din stanga a textului sa fie deplasata la
dreapta la o anumita distanta fata de marginea paginii ), acesta trebuie inclus intre
etichetele <blockquote>...</blockquote>.
1<html>
2<head>
3<title> Indentarea unui bloc</title>
</head>
4<body>
5Textul ce urmeaza este indentat:<blockquote> Aceste etichete nu se refera la particularita
6text in cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rand nou s
7</body>
8</html>
1
2
3
4
5
6
7
8
9
Blocul preformatat
Intr-un
bloc <pre>...</pre>,
semnificatia
marcajelor
HTML
se
pastreaza.
Blocul <pre>...</pre> este indicat pentru a insera randuri vide ( spatiu intre randurile
succesive ). Caracterul " spatiu " poate fi luat in considerare de browser daca este inserat
explicit prin .
<html>
<head>
<title> Bloc preformatat</title>
</head>
<body>
Orar:
<pre>
Ora/Ziua
Luni
Marti
Miercuri
8:00
9:00
Romana
Geografie
Matematica
Istorie
Sport
Fizica
10
11
12
13
14
</pre>
</body>
</html>
ntr-un fiier HTML, caracterele "<"i ">" au o semnificaie special pentru browser. Ele
incadreaza comenzile i atributele de afiare a elementelor intr-o pagina. Dac dorim ca un
fragment de text s conin astfel de caractere, acest fragment trebuie incadrat de una
dintre perechile de etichete:
<xmp>...</xmp> ( 80 de caractere pe rand );
<listing>...</listing> ( 120 de caractere pe rand ).

Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta "i "CR/LF ". Textul
afiat n pagina este monospaiat.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
<html>
<head>
<title> xmp si listing</title>
</head>
<body>
Un fisier html standard arata astfel:
<xmp>
<html>
<head>
<title> </title>
</head>
<body>
O pagina Web ...
</body>
</html>
</xmp>
</body>
</html>
Blocuri paragraf
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua si permite:
inserarea unui spatiu suplimentar inainte de blocul paragraf;
inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste

delimitatorul </p> (acesta fiind optional);
alinierea textului cu ajutorul atributului align, avand valorile posibile " left ", " center " sau "
right ".
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la stanga).
<p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf alinia
dreapta.Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat
9
1
centru.Paragraf aliniat in centru.
0 </body>
11</html>
1
2
Blocuri de titlu
Intr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor <h1>.
<h2>,
<h3>,
<h4>,
<h5>,
<h6>.
Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de
incheiere
similara.
Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga (in
mod prestabilit ) , in centru si la dreapta. Tag-ul <h1> permite scrierea unui titlu cu
caractere mai mari si aldine, pe cand <h6> foloseste caracterele cele mai mici.
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align="center"> Titlu de marime 1 aliniat in centru </h1>
<h2 align="right"> Titlu de marime 2 aliniat la dreapta. </h2>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
Linii orizontale
Intr-o pagina Web pot fi inserate linii orizontale.acest lucru se face cu ajutorul
etichetei <hr>. Pentru a configura o linie orizontala se utilizeaza urmatorele atribute ale
etichetei <hr>:
align permite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " si " right ";
width permite alegerea lungimii liniei;
size permite alegerea grosimii liniei;
noshade cand este prezent defineste o linie fara umbra;
color permite definirea culorii liniei.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea stanga
<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 aliniata la dreapta , d
pixeli , de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
Blocuri <center>
Blocul introdus de etichetele <center>...</center> aliniaza centrat toate elementele pe care

le contine.
1
2
3
4
5
6
7
8
9
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%><hr width=100%> <hr width=70%> <hr wi
width=10%> </center>
</body>
</html>
Blocuri <nobr>
Blocul de text cuprins intre etichetele <nobr>...</nobr> va fi afisat pe o singura linie.
1
2
3
4
5
6
7
8
9
1
0
<html>
<head>
<title> Blocul <nobr></title>
</head>
<body>
<nobr> O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.
linie.O singura linie.O singura linie.O singura linie.O singura linie.
</nobr>
</body>
</html>
Blocuri <div>
Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea
caracteristicilor
unui
bloc <div> (
diviziune
)
este align (
aliniere
).
Valorile posibile ale acestui parametru sunt:
left " ( aliniere la stanga );
center " ( aliniere centrala );
right " ( aliniere la dreapta ).

Un bloc <div>...</div> poate include alte subblocuri. In acest caz , alinierea precizata de
atributul align al blocului are efect asupra tuturor subblocurilor incluse in blocul <div>;
Un bloc <div>...</div> admite atributul " nowrap " care interzice intreruperea randurilor de
catre browser.
<html>
1
<head>
2
<title> Blocul <div></title>
3
</head>
4
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.
5
<div align="right">
6
O singura linie.O singura linie.O singura linie.O singura linie.<br>
7
8
9
</div>
10 <div align="center">
11 Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
12 Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
13
14
15
16
17
18
19
4.
</div>
</body>
</html>
Liste.
Noiuni
marcaje
utilizate.
Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de
definiii, referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt
listate n ordine alfabetic, urmate de definiii ale termenilor respectivi. n HTML, ntreaga
seciune a unui glosar va fi gestionat printr-o lista de definiii, care este inclusa ntr-o
pereche de marcaje de lista de definiii: <dl>...</dl> (de la "definition list" = lista de
definiii).
Observaii:
- Un termen al listei este iniiat de eticheta <dt> (de la "definition term" = termen definit);
- Definitia unui termen este iniiata de eticheta <dd> (de la "definition description" =
descrierea
definiiei);
- Definitia unui termen ncepe pe o linie noua si este indentat;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
<html>
<head>
<title>Liste_ex1</title>
</head>
<body><h1 align="center">O lista de definitii</h1><hr>
<dl>
Glosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd> - o interconectare Web de informatii de tip text, in care orice cuvant sau fraza
sau catre un alt document
<dt><b>date</b>
<dd> - fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de <em>info
valoare
<dt><b>informatie</b>
<dd> - sub-setul de date care are efectiv semnificatie si care este util la momentul
</dl>
</body>
</html>
Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> ("
ul " vine de la " unordered list " = lista neordonata). Fiecare element al listei este iniiat de
eticheta <li> (list
item).
Lista va fi intentata fata de restul paginii Web si fiecare element al listei ncepe pe un rnd
noua.
<html>
<head>
</head>
<body><h1 align="center">O lista neordonata</h1><hr>
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul>Culori uzuale disponibile prin nume

<li>Black
<li>White
<li>Red
<li>Green
<li>Blue
<li>Yellow
<li>Purple
<li>Aqua
</ul>
</body>
</html>
Tag-urile <ul> si <li> pot avea un atribut type care stabilete caracterul afiat n faa fiecrui
element al listei. Valorile posibile al acestui atribut sunt:
"circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);
"square" (ptrat)
Listele neordonate pot fi imbricate pe mai multe niveluri
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
</head>
<body>
<h1 align="center">O lista neordonata de liste
<hr>
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset
<ul>Atribute:
<li>cols
<li>rows
<li>border
</ul>
<li>Frame
<ul>Atribute:
<li>src
<li>name
<li>scrolling
</ul>
</ul>
</body>
</html>
neordonate</h1>
Liste ordonate
O list ordonat de elemente este un bloc de text delimitat de etichetele
corespondente <ol>...</ol> (" ol " vine de la " ordered list " = lista ordonat). Fiecare element
al
listei
este
iniiat
de
eticheta <li> (list
item).
Lista va fi identat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd
nou.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>listex_4</title>
</head>
<body>
<h1 align="center">O lista ordonata</h1>
<hr>
<ol>Culori uzuale disponibile prin nume
<li>Black
<li>White
<li>Red
<li>Green
<li>Blue
<li>Yellow
<li>Purple
<li>Aqua
</ol>
</body>
</html>
Tag-urile <ol> si <li> pot avea un atribut type care stabilete tipul de caractere utilizate
pentru ordonarea listei. Valorile posibile sunt:
" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );
" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
" I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );
" i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - opiune prestabilita );
Urmtorul exemplu este o lista ordonata cu cifre romane:
<html>
1
<head>
2
3
</head>
4
<body>
<h1 align="center">O lista ordonata cu cifre romane</h1>
5
<hr>
6
<ol type="I">Culori uzuale disponibile prin nume
7
<li>Black
8
<li>White
9
<li>Red
<li>Green
10
<li>Blue
11
<li>Yellow
12
<li>Purple
13
<li>Aqua
14 </ol>
15 </body>
</html>
16
17
18
19
Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniiala a secvenei de
ordonare. Valoarea acestui atribut trebuie sa fie un numar ntreg pozitiv.
Urmtorul exemplu este o lista ordonata cu litere mari, ncepnd de la valoarea C.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<h1 align="center">O lista ordonata cu litere mari, ncepnd de la valoarea C</h1>
<hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red
<li>Green
<li>Blue
<li>Yellow
<li>Purple
<li>Aqua
</ol>
</body>
</html>
Tag-ul <li> poate avea un atribut value care stabilete valoare pentru elementul respectiv al
listei. Valoarea acestui atribut trebuie sa fie un numar ntreg pozitiv (vezi urmtorul
exemplu):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
<html>
<head>
</head>
<body>
<h1 align="center">O lista ordonata avand itemi setati individual</h1>
<hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati fisierul;
<li value="6">incarcati fisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou fisierul
</ol>
</body>
</html>
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca n exemplul urmtor:
<html>
<head><title>listex_8</title></head>
<body><h1 align="center">O lista ordonata de liste ordonate si neordonate</h1><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>placa de baza
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>
O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>.

Fiecare element al listei este initiat de eticheta<li> ( list item ). Cele mai multe browsere
afieaz
lista
de
meniuri
ca
pe
o
lista
neordonata.
O lista de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la "
director "). Fiecare element al listei este iniiat de eticheta <li> (list item). Cele mai multe
browsere
afieaz
lista
de
directoare
ca
pe
o
lista
neordonata.
(Nu se recomanda utilizarea acestori tipuri de liste).
Utilizri speciale ale listelor
Dac ntr-o list, n loc de elementele acesteia introduse prin <li>, se insereaz un bloc de
text, aceasta va fi identat ( ntocmai ca elementele unei liste), exemplu:
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<h1>Un bloc de text indentat</h1><hr>
<ol>Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un b
Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc
bloc de text indentat.
</ol>
</body>
</html>
n exemplul urmtor lista de definiii are itemii <dt> si <dd> multipli:

<html>
1
<head>
2
3
</head>
5
6
7
8
9
10
11
12
13
14
15
16
<body><h1 align="center">O lista de definiii speciala</h1>

<hr>
<dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Insciere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl>
</body>
</html>
Ultimul exemplu este o lista neordonata personalizat care utilizeaz pe post de elemente
imagini si texte.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
<html>
<head>
</head>
<body><h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt:<br />
<img src="images/reddot.gif">Golf<br />
<img src="images/reddot.gif">Jetta<br />
<img src="images/reddot.gif">Passat<br />
<img src="images/reddot.gif">Bora<br />
<img src="images/reddot.gif">Corrado<br />
<img src="images/reddot.gif">Transporter<br />
</body>
</html>
5. Tabele. Noiuni i marcaje utilizate.

Tabelele ne permit s cream o reea dreptunghiular de domenii, fiecare domeniu avnd
propriile opiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel
este format din rnduri. Pentru a insera un rnd intr-un tabel se folosesc
etichetele <tr>...</tr> ( de la " table row "= rnd de tabel ).Folosirea etichetei de
sfrit </tr> este
opional.
Un
rnd
este
format
din
mai
multe
celule
ce
conin
date.
O celula de date se introduce cu eticheta <td>..</td>, exemplu:
<html>
<head>
<title>Tabel_ex1</title>
</head>
<body>
<h1 align="center">Un tabel simplu format din 4 linii si 2 coloane</h1>
<hr>
<table>
<tr><td>cell 11</td><td>cell 11</td></tr>
10
11
12
13
14
15

</table>
</body>
</html>
n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se
utilizeaz
un
atribut
al
etichetei <tabel> numitborder.
Acest atribut poate primi ca valoare orice numar ntreg ( inclusiv 0 ) si reprezint grosimea n
pixeli
a
chenarului
tabelului.
Dac atributul border nu este urmat de o valoare atunci tabelul va avea o grosime
prestabilit egal cu 1 pixel, o valoare egal cu 0 a grosimii semnific absenta chenarului.
Cnd atributul border are o valoare nenul chenarul unui tabel are un aspect tridimensional,
exemplu:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel simplu cu chenar</h1>
<hr>
<table border="4">
<tr><td>cell 11</td> <td>cell 11</td></tr>
</table>
</body>
</html>
Alinierea tabelului
Pentru a alinia un tabel intr-o pagin Web se utilizeaz atributul align al etichetei <table>,
cu urmtoarele valori posibile:
"left " ( valoarea prestabilita );
"center ";
"right ".
Alinierea este important pentru textul ce nconjoar tabelul. Astfel :
1
2
3
4
5
daca tabelul este aliniat stanga ( <table align="left"> ), atunci textul care urmeaz dup
punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului.
daca tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmeaz dup
punctul de inserare al tabelului va fi dispus in partea stanga a tabelului.
daca tabelul este aliniat pe centru ( <table align="center"> ), atunci textul care urmeaz dup
punctul de inserare al tabelului va fi afiat pe toata limea paginii, imediat sub tabel.
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel aliniat la dreapta</h1>
6
7 <hr>
8 Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de ta
9 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.
1 inainte
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inaint
0 <table border align="right">
11<tr><td>cell 11</td><td>cell 11</td></tr>
1 <tr><td>cell 21</td><td>cell 22</td></tr>
2 </table>
Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup
1 tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.T
3 tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.T
1 tabel.Text dup tabel.Text dup tabel.Text dup tabel.
4 </body>
1 </html>
5
Distanta dintre tabel i celelalte elemente din pagina Web poate fi stabilit cu ajutorul
atributelor hspace si vspace al etichetei <table>. Valoarea atributului hspace poate fi orice
numar pozitiv, inclusiv 0, si reprezint distanta pe orizontala dintre tabel si celelalte
elemente
ale
paginii
Web.
Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, si reprezint distanta pe
verticala
dintre
tabel
si
celelalte
elemente
ale
paginii
Web.
Aceste atribute funcioneaz numai cu Netscape Communicator.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabilete cu ajutorul atributului bgcolor, care poate fi atasat ntregului
tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin
eticheta <td>.
Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.
Dac n tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este
urmtoarea: <td>, <tr>, <table>(cu prioritate cea mai mica).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel simplu colorat</h1>
<hr>
<table border="3" bgcolor="green">
<tr><td>verde 11</td><td bgcolor="red">rosu 12</td></tr>
<tr bgcolor="blue"><td>albastru 21</td><td bgcolor="yellow">galben 22</td></tr>
<tr bgcolor="cyan"><td>cell 31</td><td>cell 32</td></tr>
<tr><td>cell 41</td> <td bgcolor="white">cell 42</td></tr>
</table>
</body>
</html>
Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:

<font color="valoare">...</font>.
Dimensionarea celulei unui tabel
Distanta dintre doua celule vecine se definete cu ajutorul atributului cellspacing al
etichetei <table>. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, si
reprezint
distanta
in
pixeli
dintre
Valoarea prestabilita a atributului cellspacing este 2.
1
2
3
4
5
6
7
8
9
10
11
12
13
doua
celule
vecine.
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel fara chenar de celule alipite</h1>
<hr>
<table cellspacing="0">
<tr><td bgcolor="gray">gri 11</td><td bgcolor="red">rosu 12</td></tr>
<tr bgcolor="blue"><td>albastru 21</td><td bgcolor="yellow">galben 22</td></tr>
</table>
</body>
</html>
Distanta dintre marginea unei celule si coninutul ei poate fi definita cu ajutorul

atributului cellpadding al etichetei <table>. Valorile acestui atribut pot fi numere ntregi
pozitive, si reprezint distanta in pixeli dintre celule si coninutul ei.
Valoarea prestabilita a atributului cellpadding este 1.
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>tabelex_6</title>
</head>
<body><h1 align=center>Un tabel de celule mari</h1>
<hr>
<table border cellpadding="20">
<tr><td>gri 11</td><td>rosu 12</td></tr>
<tr><td>albastru 21</td><td>galben 22</td></tr>
</table>
</body>
</html>
Dimensionarea unui tabel

Dimensiunile unui tabel - latime si nlimea - pot fi stabilite exact prin intermediul a doua
atribute, width i height,
ale
etichetei<table>.
Valorile acestor atribute pot fi:
numere ntregi pozitive reprezentnd latime respectiv nlimea in pixeli a tabelului;
numere ntregi intre 1 si 100, urmate de semnul %, reprezentnd fraciunea din latime si
nlimea totala a paginii.
<html>
1
<head>
2
3
</head>
4
<body>
<h1 align="center">Un tabel de de 200 pixeli X 50%</h1>
5
<hr>
6
<table border width="200" height="50%">
7
8
9
</table>
10 </body>
11
12
13
</html>
n exemplul urmtor se utilizeaz un truc care permite afiarea intr-o pagin Web a unui text
poziionat n centrul paginii.
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<h1 align="center">Un text centrat intr-o pagina</h1>
<table width="100%" height="100%">
<tr><td align="center"><h2>Text centrat.</h2></td></tr>
</table>
</body>
</html>
Titlul unui tabel

Unui tabel i se poate ataa un titlu cu ajutorul etichetei <caption> ( de la "table caption" =
titlu
tabel
).
Aceasta eticheta trebuie plasata in interiorul etichetelor <table>...</table>, dar nu in
interiorul etichetelor <tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul
atributului align al etichetei <caption> care poate lua una dintre valorile:
" bottom " ( sub tabel );
" top " ( deasupra tabelului );
" left " ( la stanga tabelului );
" right " ( la dreapta tabelului ).
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel cu titlu</h1>
<table border><caption align="top">Masini
<tr><td>Mercedes</td><td>Citroen</td><td>Jaguar</td></tr>
<tr><td>BMW</td><td>Volvo</td><td>Renault</td></tr>
</table>
</body>
</html>
Cap de tabel
Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt introduse de
eticheta <th> ( de la " tabel header " = cap de tabel ) n loc de <td>.
Toate atribute care pot fi ataate etichetei <td> pot fi de asemenea ataate etichetei <th>.
Coninutul celulelor definite cu <th> este scris cu caractere aldine si centrat.
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel cu titlu si cap de tabel</h1>
6
7
8
9
10
11
12
13
<table border><caption align="bottom">Preturile masinii

<tr><th>Pret</th><th>Citroen</th><th>Jaguar</th><th>BMW</th><th>Volvo</th></tr>
<tr><th>In dolari</th><td>5000</td><td>100000</td><td>50000</td><td>80000</td></tr>
<tr><th>In lei</th><td>2000000</td><td>2000000000</td><td>2000000</td><td>16000000</t
</table>
</body>
</html>
Alinierea coninutului unei celule

Alinierea pe orizontala a coninutului unei celule se face cu ajutorul atributului align care
poate lua valorile:
"left" ( la stanga );
"center" ( centrat , valoarea prestabilita );
"right" ( la dreapta );
"char" ( alinierea se face fata de un caracter ).

Alinierea pe verticala a coninutului unei celule se face cu ajutorul atributului valign care
poate lua valorile:
"baseline" ( la baza );
"bottom" ( jos );
"middle" ( la mijloc, valoarea prestabilita );
"top" ( sus ).
Aceste atribute pot fi ataate att etichetei <tr> pentru a defini tuturor elementelor
celulelor unui rnd, cat si etichetelor <td> si <th>pentru a stabili alinierea textului intr-o
singura celula.
1
<html>
<head>
2
3
</head>
4
<body>
5
<h1 align="center">Un tabel avand coninutul celulelor aliniate</h1>
<table border width="50%" height="50%">
6
<tr align="right"><td>Aici</td><td>alinierea</td><td>este centru</td><td>dreapta</td></
7
<tr><td align="left">stanga</td><td align="center">centru</td><td valign="top">sus</td><
8
valign="bottom">jos</td></tr>
9
<tr align="left"><td>aici</td><td>alinierea</td><td>este centru</td><td>stanga
10 (implicita)</td></tr></table>
11 </body>
12 </html>
1
2
3
4
5
6
Dimensionarea exacta a celulelor unui tabel

Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a dou
atribute
ale
acestor
etichete: width pentru
latime
i height pentru
nlime.
Valorile posibile ale acestor atribute sunt:
numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a

inaltimii unei celule;
procente din latime , respectiv inaltimea tabelului.

<html>
<head>
</head>
<body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1>
<hr>
<table border>
7
8
9
10
11
12
<tr><td width="100" height="150">cell 11</td><td width="100" height="150">cell 11</td></

<tr><td width="100" height="150">cell 21</td><td width="100" height="150">cell 22</td></
</table>
</body>
</html>
Tabele de forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale
etichetelor <td> si <th>,
o
celula
se
poate
extinde
peste
celule
vecine.
Astfel:
extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a
crui valoare determin numarul de celule care se unific.
extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a carui
valoare determin numarul de celule care se unific.
Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. In acest caz , in
etichetele <td> si <th> vor fi prezente ambele atribute colspan i rowspan.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel simplu cu chenar</h1>
<hr>
<table border="3">
<tr><td rowspan="3">cell 11<br>cell 21<br>cell 31</td><td>cell 12</td><td colspan="2" ro
24<br>cell 33, cell 34</td></tr>
<tr><td>cell 22</td></tr>
<tr><td>cell 32</td></tr>
<tr><td>cell 41</td> <td colspan="3">cell 42, cell 43, cell 44</td></tr>
</table>
</body>
</html>
Atributul " nowrap "

Atributul nowrap apartine elementelor <td> si <th> ; el interzice ntreruperea unei linii de
text.Astfel , n tabel pot aprea coloane cu o lime orict de mare.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel cu celule de latime mare</h1>
<hr>
<table border>
<tr><td nowrap>cell 21</td> <td>cell 22 este foarte lata,aceasta celula este foaret lat
</table>
</body>
</html>
Celule vide ale unui tabel
Dac un tabel are celule vide, atunci aceste celule vor aparea n tabel far un chenar de
delimitare.
n scopul de a afia un chenar pentru celule vide se utilizeaz urmatoarele trucuri:
dupa <td> se pune ;
dupa <td> se pune <br>.

Caracterul ( no break space ) este de fapt caracterul spatiu. Un spaiu ntrodus prin
intermediul acestui caracter nu va fi ignorat de browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
</head>
<body>
<h1 align="center">Un tabel cu celule vide</h1>
<hr>
<table border>
<tr><td>cell 11<td><td>cell 12</td><td>cell 13</td></tr>
<tr><td> </td> <td></td></tr>
</table>
</body>
</html>
Atribute Internet Explorer pentru tabele

Urmatoarele atribute ale etichetei <table> functioneaza cu Internet Explorer 4.0 , 5.0, dar
nu cu Netscape Communicator 4.5:
background permite stabilirea unei imagini pentru fondul unui tabel.Primeste ca valoare adresa
URL a imaginii folosite pentru fond;
bordercolor permite stabilirea culorii pentru chenarul unui tabel;
bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<body>
<h1 align="center">Atribute "Internet Explorer"</h1><hr>
<table border="5" background="Taj_Mahal.jpg" cellspacing="15" bordercolor="maroon" border
<tr bgcolor="yellow"><td>cell 11</td><td>cell 12</td><td>cell 13</td></tr>
<tr bgcolor="yellow"><td> </td><td></td><td></td></tr>
</table>
</body>
</html>
Grupuri de coloane
Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane. Atributele
acceptate de <colgroup> sunt:
span determina numarul de coloane dintr-un grup;
width determina o latime unica pentru coloanele din grup;
align determina un tip unic de aliniere pentru coloanele din grup.

Exemplu:
<colgroup
span="3"
width="100"></colgroup>
ntr-un bloc <colgroup>, coloanele pot avea configurri diferite dac se utilizeaz
elementul <col>, care admite atributele:
span identifica acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci
coloanele sunt configurate n ordine;
width determina o latime pentru coloana identificata prin span;
align determina o aliniere pentru coloana identificata prin span.
1
2
3 <html>
<head>
4 <title>Tabel_ex17</title>
5 </head>
6 <body>
7 <h1 align="center">Grupuri de coloane</h1>
<hr>
8 <table width="400" cellspacing="10">
9 <colgroup><col width="100" align="right"><col width="100" align="center"><col width="200" a
1 <tr><td valign="top">Text in prima coloana. Text in prima coloana. Text in prima coloana.
0 doua.Text in coloana doua.Text in coloana doua.</td><td valign="top">Text in coloana a t
11treia.</td></tr>
</table>
1 </body>
2 </html>
1
3
1
2
3
4
5
6
Atributele frame si rules

Atributul frame al etichetei <table> permite specificarea parilor din chenarul unui tabel
care
vor
fi
afiate.
Valorile posibile ale acestui atribut sunt:
void - elimina toate muchiile exterioare ale tabelului;
above - afieaz o muchie in partea superioara a cadrului tabelului;
below - afieaz o muchie in partea inferioara a cadrului tabelului;
hsides - afieaz cate o muchie in partea superioara si inferioara cadrului tabelului;
lhs - afieaz o muchie in partea din stanga a cadrului tabelului;
rhs - afieaz o muchie in partea din dreapta a cadrului tabelului;
vsides - afieaz o muchie in partea din stanga si din dreapta a cadrului tabelului;
box - afieaz o muchie pe toate laturile cadrului tabelului;
border - afieaz o muchie pe toate laturile cadrului tabelului;

Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui
tabel. Valorile posibile sunt:
none - elimina toate muchiile interioare ale tabelului;
groups - afieaz muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate
prin elementele <thead>, <tbody>, <tfoot>si<colgroup>.
rows - afieaz muchii orizontale intre toate liniile tabelului;
cols - afieaz muchii verticale intre toate coloanele tabelului;
all - afieaz muchii intre toate liniile si coloanele;

<html>
<head>
</head>
<body>
<h1 align="center">Atributele frames si rules</h1>
<table width="400" frame="box" rules="rows" cellspacing="10">
7
8
9
10
11
12
<tr><td>cell 11</td><td>cell 12</td><td>cell 13</td></tr>

<tr><td>cell 21</td><td>cell 22</td><td>cell 23</td></tr>
</table>
</body>
</html>
Subblocurile unui tabel

n specificatiile HTML 4.0, continutul unui tabel poate fi mprit n subblocuri prin
elementele:
<thead><tr><td>...</thead> ( un singur rand );

<tfoot><tr><td>...</tfoot> ( un singur rand );
<tbody><tr><td>...</tbody> ( oricate randuri );
ntr-un tabel exista un singur subbloc de tipul <thead> i un singur subbloc de tipul <tfoot>,
dar pot exista mai multe subblocuri de tip<tbody>.
6. Operarea cu obiecte. Inserarea imaginilor, sunetelor i videoclipurilor.
6.1.Inserarea imaginilor
Folosirea imaginilor sporete atractivitatea i designul paginii, duce la o mai bun inelegere
a mesajului, dar trebuie luat n consideraie i faptul c excesul de imagini va duce la
ncrcarea greoaie a site-ului. Exist numeroase formate grafice, dar cele mai rspndite
sunt:
GIF (Graphics Interchange Format) introdus de Compuserve

JPEG (Joint Photographic Expert Group)
PNG (Portable Network Graphic Format Grafic portabil n reea)
Aceste formate sunt dependente de platform. Imaginile grafice sunt construite din pixeli,
care sunt puncte distincte de informaie de imagine. Fiecare pixel necesit un bit de culoare.
Principalele caracteristici ale formatelor de imagine sunt: numrul de culori, compresia,
transparena, ntreeserea i animaia. Asemnrile i deosebirile dintre cele trei formate
grafice sunt:
Imaginile GIF pot utiliza doar 256 de culori, avnd nevoie de 8 bii, n timp ce formatele JPEG
i PNG pot utiliza milioane de culori, avnd 24 de bii de culoare, respectiv 32 de bii /pixeli de
culoare. Ceea ce face formatul GIF att de utilizat nu este numai paleta mic de culori (256),
dar i posibilitatea reducerii numrului de culori, astfel, dac este nevoie doar de 2 culori, se
utilizeaz numai un bit, ceea ce reduce dimensiunea fiierului de 8 ori.
Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile
fiierelor. Comprimarea se poate face, n mod diferit, pentru fiecare format, i, din aceste
motive, ele pot avea dimensiuni mai mici ntr-un format dect n altul.
Formatele GIF i PNG admit culoarea transparent, n timp ce formatul JPEG nu admite
transparena.
Formatele GIF i PNG admit animaia, n timp ce, cu formatul JPEG, nu se poate obine
animaie. De exemplu, pentru a obine animaie pentru imagini GIF se poate folosi pentru
Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder.
Toate cele trei formate accept ntreeserea. De exemplu, cnd se vizualizeaz o pagin web,
se pot observa imaginile care apar linie cu linie, de la forma brut pn la redarea final,
aceasta reprezint ntreeserea. Dei dimensiunea fiierelor crete cu pn la 10%, cu ajutorul

acestei ntreeseri, vizitatorul poate s-i fac o imagine despre ceea ce se va descrca.
Avnd n vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi
recomandate:
GIF pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc.,
datorit dimensiunii mici a fiierelor.
JPEG pentru fotografii, cnd se dorete s se redea ct mai exact culoarea real a imaginii.
PNG pentru desene complexe, dar i pentru fotografii, acesta fiind formatul care mbin
caracteristicile celor dou.
Imaginile pot fi descrcate de la adrese absolute sau relative. Adresele URL (Uniform
Resource Locator) reprezint standarde de identificare a resurselor (de exemplu, fiiere) i
pot fi adrese URL absolute i relative.
Adrese URL absolute
Adresele absolute identific locaia unui fiier imagine de pe Internet sau alte calculatoare
conectate la Internet i au sintaxa:protocol/nume_calculator/cale/nume_fiier
Un
exemplu
de
adres
URL
absolut: http://ciobanu.cich.md/images/eu.jpg
unde:
htpp:// este protocolul Internet utilizat;
ciobanu.cich.md este numele calculatorului;
images este calea pn la fiierul imagine dorit;
eu.jpg este fiierul imagine C.A.

Adrese URL relative
O adres relativ identific locaia unei imagini, descriind o cale relativ la directorul curent
unde se afl fiierul imagine. Adresele relative se refer la localizarea fiierului imagine de
pe calculatorul personal i are sintaxa: cale/nume_fiier.
Referirea
la:
directorul
printe
se
poate
face
prin
../
directorul
rdcin
se
poate
face
prin
/
Un
exemplu
de
adres
URL relativ: /../../../friend.jpg sau
se
mai
poate
scrie c:/windows/web/wallpaper/friend.jpg
Toate imaginile cu care vom lucra vor avea adresa URL exprimat n funcie de directorul ce
conine documentul HTML care face referire la imagine, adic adres relativ.
Imaginile se inseraez n pagini cu ajutorul tag-ului <img>, care este un element inline, adic
poate fi inserat oriunde n pagin. Sintaxa acestui element este: <img atribute>.
n continuare este prezentat un exemplu de utilizare a elementului <img>:
1
2
3
4
5
6
7
<html>
<head></head>
<body>
Hotelul TRUMP Taj Mahal
<img src="Taj_Mahal.jpg" height="150" width="150" border="4"> de la Atlantic City
<body>
<html>
Pentru ca acest exemplu s poat fi executat, trebuie ca fiierul Taj_Mahal.jpg s fie n

acelai folder cu pagina, deoarece nu s-a indicat nicio adres.
Atributele elementului img
Atributele elementului <img> sunt: src, alt, align, border, height, width,hspace, vspace.
n continuare vor fi descrise succint aceste atribute.

Atributul src
Atributul src este un atribut obligatoriu al elementului IMG, care identific fiierul ce conine
imaginea care se dorete a fi inserat. Fiierele imagine pot avea extensia: .jpg, jpeg, png
etc. Fiierul care conine imaginea se gsete n directorul curent (ca n exemplul de mai
sus), n alt folder din calculatorul curent sau n reeaua web. n cazul n care fiierul se afl:
n alt locaie dect directorul curent, numele fiierului trebuie precedat de calea relativ la
directorul curent;
n reeaua web, trebuie dat adresa URL absolut, ca de

exemplu http://cich.md/galerie/img_1631.jpg.
Atributul alt
Exist posibilitatea ca imaginile s nu se poat ncrca din diferite motive, situaie n care se
folosete atributul alt al elementului <img>. Valoarea acestui atribut este un text, care va fi
afiat n locul imaginii.
1
2
3
4
5
6
<html>
<head></head>
<body>
<img src="Taj_Mahal.jpg" height =150 width = 150 alt="Hotelul TRUMP Taj Mahal">de la Atlan
</body>
</html>
Atributul align
Atributul align indic browser-ului cum va fi aliniat poza fa de text. n lipsa unei opiuni,
poza este plasat acolo unde este scris n cod (<img>este element inline, iar textul ncepe
de la baza pozei).Valorile atributului sunt:
left aliniere la stnga i textul curge pe lng imagine n dreapta ei, ncepnd din partea
superioar;
right aliniere la dreapta i textul curge pe lng imagine n stnga ei, ncepnd din partea
superioar ;
top textul este plasat n partea superioar a imaginii;
middle textul are plasat, la mijlocul imaginii, numai primul rnd, restul continund sub
imagine;
bottom textul este plasat n partea de jos a imaginii i continu sub imagine.
n exemplul urmtor se poate vedea modul de aliniere a imaginii ntr-o pagin:
<html>
1
<head>
2
</head>
3
<body>
4
<h2 align="center">Alinieri Imagini</h2>
<pre>Aliniere Bottom </pre>
5
<img src="Taj_Mahal.jpg" height="100" width="100" align="bottom">
6
Aceasta este o imagine aliniata <i>bottom </i> care este alinierea implicita pe vertic
7
Numai primul rnd este aliniat bottom restul textului este sub imagine.
8
<pre>Aliniere Top</pre>
9
<img src="Taj_Mahal.jpg" height ="100" width="100" align="top">
10 Aceasta este o imagine aliniata <i>Top </i>, care este alinierea <i> sus</i> pe vertic
11 Numai primul rnd este aliniat <i>Top </i> restul textului este sub imagine.
<pre>Aliniere Middle </pre>
12 <img src="Taj_Mahal.jpg" height="100" width="100" align="middle">
13 Aceasta este o imagine aliniata <i>Middle</i> care este alinierea <i>pe centru </i> pe
14 Numai primul rind este aliniat <iI>Middle </i> restul textului este sub imagine.
15 <pre>Aliniere Left </pre>
16
17
18
19
20
21
22
23
24
25
26
27
<img src="Taj_Mahal.jpg" height="100" width="100" align="left">

Aceasta este o imagine aliniata<i>Left</i>care este alinierea<i>stinga</i> pe orizonta
<p>Textul curge pe lng poz n dreapta ei.
<pre>Aliniere Right </pre>
<img src="Taj_Mahal.jpg" height="100" width="100" align="right">
Aceasta este o imagine aliniata <i>Right</i> care este alinierea <i>dreapta</i> pe ori
<p>Textul curge pe linga poz n stnga ei.
</body>
</html>
Atributul border
Atunci cnd se insereaz o imagine, browser-ul o va afia fr chenar. Pentru a aduga un
chenar unei imagini se folosete atributulborder=nr_pixeli, unde nr_pixeli reprezint
grosimea chenarului n pixeli. Valoarea implicit este 0. Dac n exemplul de mai sus se mai
adaug acest atribut <img src="Taj_Mahal.jpg" height ="150" width = "150" border =
"4"> browser-ul va afia: vezi ...
Atributele width i height
Imaginea este transferat de browser-e de la adresele URL la adresa de unde se vizualizeaz
pagina, la dimensiunile ei reale. Pentru a redimensiona o imagine pe lime se folosete
atributul width, iar pe nlime se folosete atributul height. Redimensionarea unei imagini se
face n mod absolut n pixeli sau prin raportare la ecran, astfel c valorile acestor atribute
pot fi date n:
Numere naturale, ce reprezint dimensiunea n pixeli;
n procente, ce reprezint o fraciune din dimensiunea ferestrei.

OBSERVAII!
1.
Dac se modific doar o dimensiune, imaginea va fi afiat de browser proporional;
2.
Dac se modific ambele dimensiuni, imaginea va fi afiat de browser deformat.
Un exemplu de redimensionare a imaginii este dat mai jos.
1
2
3
4
5
6
7
8
<html>
<head></head>
<body>
<img src="Taj_Mahal.jpg" height="150" width="150" alt="Hotelul TRUMP Taj Mahal">de la Atl
<img src="Taj_Mahal.jpg" width="80" height="200" alt="Hotelul TRUMP Taj Mahal">de la Atla
<img src="Taj_Mahal.jpg" height="350" alt="Hotelul TRUMP Taj Mahal">de la Atlantic City
</body>
</html>
Atributele hspace i vspace

Aceste atribute au acelai efect ca i atributele cu acelai nume ale elementului <table>, i,
anume, asigur distana de la imagine la celelalte componente din pagin, pe orizontal
(hspace) i pe vertical (vspace), adic definesc spaii albe n jurul imaginilor.
Un exemplu n care sunt folosite aceste atribute este dat mai jos.
<p><html>
2
3
4
5
6
7
8
9
10
11
12
13
<head></head>
<body>
<p>Taj Mahal-ul a fost construit de al cincilea mprat mogul, Shah Jahan, n memoria
Mumtaz Mahal, printesa persan musulman. mprteasa a murit dup naterea celui de-a
su, n timpul campaniei de zdrobire a rebeliunilor din Burhanpur. Moartea ei l-a afec
i-a albit n numai cteva luni. nainte de ultima suflare Mumtaz l-a rugat pe mprat
mormnt,
s se recstoreasc, sa-i iubeasc fiii i s-i viziteze mormntul la aniversare. a
nu numai o consoart, ci i un abil i inteligent sfetnic politic. Aa a jurat mprat
mare i
fr egal n lume.</p>
<p>Hotelul TRUMP Taj Mahal <img src="Taj_Mahal.jpg" height="150" width="150" alt="Hotelu
de la Atlantic City
</body>
</html>
Atributul clear al elementului BR

Dac se dorete a se terge textul din jurul unei imagini se folosete elementul <br
clear=valoare>, unde valoare poate fi:
all se terge tot textul din jurul imaginii
left se terge tot textul din stnga imaginii
right se terge tot textul din dreapta imaginii
none se las textul din jurul imaginii

n exemplul de mai sus se adaug <BR clear=right>, dup elementul <img>
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste
atributul background al etichetei <body>, avnd ca valoare adresa URL a imaginii.
Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head><title>Imagini pentru fundal</title><head>
<body background="../images/bg.gif">
<pre>
1
2
3
4
5
6
7
8
9
</pre>
</body>
</html>
Utilizari speciale ale imaginilor

Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.Printre aceste
utilizri speciale putem enumera:
Linii orizontale formate cu ajutorul imaginilor;

Simboluri speciale pentru elementele unei liste neordonate.
6.2.Inserarea sunetelor si videoclipurilor
Multimedia se prezint ntr-o multitudine de formate, iar pe Internet vei gsi multe dintre
aceste elemente nglobate n pagini web. Browser-ele actuale ofer suport pentru multe
dintre aceste formate, dar nu pentru toate. Suportul pentru sunete, animaii i video este
tratat n mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele
necesit anumite plug-in-uri, n vreme ce altele pot solicita activarea anumitor controale
ActiveX.
n acest capitol vei afla despre diferitele formate multimedia i cum s le folosii ntr-o
pagin web.
Elementele multimedia (precum sunetele i video) sunt stocate n fiiere media. Modalitatea
cea mai simpl de a determina tipul unui fiier media este de a analiza extensia fiierului
respectiv .
Formatul fiierelor multimedia ce conin sunete.
Sunetele pot fi stocate n diferite formate de fiiere. Astfel deosebim:
a) Formatul MIDI
MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de
informaii muzicale ntre dispozitive electronice muzicale (precum sintetizatoare) i plcile
de sunet ale calculatoarelor.Formatul MIDI a fost implementat n 1982 de ctre industria
muzical. Acest format este foarte flexibil i poate fi folosit pentru (aproape) orice, de la
crearea unor sunete foarte simple, pn la crearea unora cu adevrat profesionale. Fieierele
MIDI nu conin sunete, ci un set de instruciuni digitale muzicale (note muzicale) care pot fi
interpretate de plcile de sunet ale calculatoarelor.Dezavantajul la acest tip de fiiere const
n faptul c nu pot stoca muzic (n toat complexitatea ei), ci doar note muzicale.Avantajul
l constituie mrimea mic a acestor fiiere, prin urmare se pot ncrca uor ntr-o pagin
web, precum i faptul c acest format este suportat de majoritatea sistemelor de operare i
de cele mai populare browsere de Internet. Fiierele de tip MIDI au extensia .mid sau .midi.
b) Formatul RealAudio
Formatul RealAudio a fost dezvoltat pentru Internet de ctre Real Media. Acest format
suport chiar i video.Formatul permite difuzarea de informaii audio (muzic on-line,
Internet radio) cu lime de band joas. Din cauza acestei limi de band, calitatea este,
de cele mai multe ori, slab.Fiierele de tip RealAudio au extensia .rm sau .ram.
c) Formatul AU
Acest formatul a fost dezvoltat de ctre Sun Microsystems i este suportat de majoritatea
sistemelor de operare.Aceste fiierele au extensia .au.
d) Formatul AIFF
AIFF (Audio Interchange File Format) a fost dezvoltat de ctre Apple. Acest tip de fiiere nu
sunt suportate de toate browser-ele.Aceste fiierele au extensia .aif sau .aiff.
e) Formatul SND
SND (Sound) a fost dezvoltat, de asemenea, de ctre Apple i au acelai dezavantaj, i anume
c nu sunt suportate de toate browser-ele.Aceste fiierele au extensia .snd.
f)
Formatul WAVE
WAVE (waveform) a fost dezvoltat de ctre IBM i Microsoft. Este un format suportat de toate
computerele pe care ruleaz Windows i este recunoscut de majoritatea browserelor.Fiierele de tip WAVE au extensia .wav.
g) Formatul MP3
Fiierele MP3 sunt de fapt fiiere MPEG, dezvoltate iniial pentru video de ctre Moving
Pictures Experts Group. Se poate afirma c fiierele MP3 reprezint partea de sunet dintr-un
fiiere video n format MPEG.MP3 este n prezent unul dintre cele mai populare formate
folosite la nregistrarea muzicii. Sistemul de codificare MP3 combin o bun compresie (ce
duce la fiiere mici) cu calitate nalt. Este de ateptat ca pe viitor toate sistemele de
operare s ofere suport pentru acest tip de format.Fiierele de tip MP3 au extensia .mp3
sau .mpga.
n funcie de scopul pentru care creai o pagin web multimedia va trebui s v orientai i
asupra unui anumit format de fiier. Astfel, dac dorii ca sunetele nregistrate (muzic sau
de alt tip) s poat fi asculatet de toi vizitatorii paginii web, atunci trebuie s folosii fiiere
n format WAV, ntruct este cel mai popular format pe Internet i este suportat de
majoritatea browsere-lor. Dac pagina web este despre nregistrri muzicale, atunci formatul
cel mai potrivit este MP3.
Formatul fiierelor multimedia ce conin video
i imaginile video pot fi stocate n diferite formate de fiiere. Astfel deosebim:
a) Formatul AVI
Formatul AVI (Audio Video Interleave) a fost dezvoltat de ctre Microsoft. Este un format
suportat de toate computerele pe care ruleaz Windows i este recunoscut de majoritatea
browsere-lor. Dei este un format des ntlnit pe Internet, nu este ntotdeauna suportat de
calculatoarele cu sisteme de operare non-Windows.Fiierele de tip AVI au extensia .avi.
b) Formatul Windows Media
Acest formatul a fost dezvoltat de ctre Microsoft. i acest format este unul suportat de
toate computerele pe care ruleaz Windows, dar nu este suportat de calculatoarele cu
sisteme de operare non-Windows dect n urma instalrii unor extra componente (playere
specializate).Fiierele de tip Windows Media au extensia .wmv.
c) Formatul MPEG
Formatul MPEG (Moving Pictures Expert Group) este n prezent unul dintre cele mai populare
formate folosite pe Internet. Acest format este suportat de majoritatea sistemelor de operare
i de cele mai populare browsere de Internet. Fiierele de tip MPEG au extensia .mpg sau
.mpeg.
d) Formatul QuickTime
Formatul QuickTime a fost dezvoltat de ctre Apple i nu poate rula pe platformele Windows
fr instalarea unui player specializat. Fiierele de tip QuickTime au extensia .mov sau .qtm.
e) Formatul RealVideo
Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media.Formatul permite
difuzarea de informaii video (video on-line, Internet video) cu lime de band joas. Din
cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip
RealVideo au extensia .rm sau .ram.
f)
Formatul Shockwave (Flash)
Formatul Shockwave a fost dezvoltat de ctre Macromedia. Acest format necesit instalarea
unui player specializat pentru a putea rula. n prezent, aceast component este oferit
preinstalat de ultimele versiuni ale browsere-lor Netscape i Internet Explorer. Fiierele de
tip Shockwave au extensia .swf.
Adugarea de informaii multimedia unei pagini web
Informaiile multimedia pot fi redate direct de browser sau prin intermediul unui program
ajuttor (un player specializat), n funcie de elementul HTML i de formatul fiierului
multimedia folosit.
Cea mai simpl cale de a realiza acest lucru este prin folosirea unei ancore (link) care s duc
la sursa elementului multimedia. Este cea mai prietenoas metod ntruct ofer
posibilitatea vizitatorilor de a alege ntre a vedea o pagin web cu elemente multimedia sau
fr acestea. n acest caz pagina se ncarc mult mai repede nemaifiind nevoie s se ncarce
toate informaiile multimedia.
O metod specific, mai complex, ce are ca rezultat includerea n pagina web (ca parte
integrant din aceasta) a unor informaii multimedia, se realizeaz prin intermediul
elementului <OBJECT>.
Not: Dei, n funcie de browser-ul folosit, mai pot fi folosite i alte elemente, cum ar
fi <BGSOUND>, recunoscut de Internet Explorer, i <EMBED>, recunoscut de Internet
Explorer i Netscape, consoriul W3C (World Wide Web Consortium) recomand
utilizarea elementului <OBJECT>.
Atributele utilizate cu acest element sunt:
Atribut
Descriere
archive
Precizeaz locaia (URL-ul) fiierelor arhiv
classid
Precizeaz locaia (URL-ul) obiectului. Valorile posibile depind de proiectantul elementului de control. n
Windows, aceste valori sunt nscrise n regitri i pot fi accesate cu aplicaia Registry Editor
codebas
e
Precizeaz calea (URI-ul) n care se gsete clasa obiectului specificat prin

atributele classid, data i archive
codetype
Specific tipul fiierului specificat prin atributul classid
data
Precizeaz numele i locaia (URL-ul) obiectului. Se poate folosi mpreun sau ca o alternativ
a atributului classid, n funcie de tipul obiectului
declare
Cnd este prezent, acet atribut face ca definiia curent introdus de elementul <OBJECT> s fie tratat ca
o simpl declaraie
height
Specific nlimea suprafeei n care va fi afiat obiectul
name
Precizeaz denumirea obiectului (cnd acesta este cuprins ntr-un formular)
standby
Precizeaz textul ce va fi afiat pn cnd este ncrcat obiectul
tabindex
Precizeaz poziia elementului curent n document (ordinea n care va fi focalizat de utilizator cnd se
folosete tastatura)
type
Determin tipul MIME asociat cu fiierul respectiv. Este un atribut opional dar recomandat cnd se
folosete atributul data
width
Specific limea suprafeei n care va fi afiat obiectul
Acest element necesit n mod obligatoriu tag-ul de nchidere corespunztor </OBJECT>.

mpreun cu elementul <OBJECT> (n interiorul acestuia) se folosete i elementul asociat
<PARAM> care definete parametrii elementului <OBJECT>.
Atributele utilizate cu acest element sunt:
Atribut
Descriere
id
Precizeaz un identificator unic pentru element
name
Precizeaz o denumire pentru element
type
Determin tipul coninutului
value
Specific valoarea parametrului
valuetype
Specific tipul valoarii parametrului
Elementul <OBJECT> poate suporta diferite tipuri de informaii multimedia, cum ar fi

imagini, sunete, video, pagini web etc. n funcie de tipul acestor informaii, difer i sintaxa
folosit n limbajul HTML. Astfel, pentru a insera o imagine (n format .jpg), prin intermediul
elementului <OBJECT>, se folosete urmtoarea sintax:
<OBJECT HEIGHT="..."
</OBJECT>
WIDTH="..."
TYPE="image/jpeg"
DATA="nume_fisier.jpg">
Pentru a insera un sunet (n format .wav) se folosete urmtoarea sintax:

<OBJECT
<PARAM
</OBJECT>
CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
NAME="FileName"
VALUE="nume_fisier.wmv">
Pentru a insera un film (n format .wmv) se folosete urmtoarea sintax:

<OBJECT
<PARAM
</OBJECT>
CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
NAME="FileName"
VALUE="nume_fisier.wmv">
Pentru a insera o pagin web se folosete urmtoarea sintax:

<OBJECT
TYPE="text/html"
WIDTH="..." DATA="http://www.pagina_web.com">
</OBJECT>
HEIGHT="..."
Pentru a insera o animaie creat n Flash (n format .swf) se folosete urmtoarea sintax:
<OBJECT
WIDTH="..."
HEIGHT="..." CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8444553540000"CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flas
h/swflash.cab#4,0,0,0">
<PARAM
NAME="SRC"
VALUE="
</OBJECT>
Inserarea unui film QuickTime ntr-o pagin web
nume_fisier.swf">
Formatul QuickTime a fost dezvoltat de ctre Apple i, dei este un format des ntlnit pe
Internet, nu poate rula pe platformele Windows fr instalarea unui player specializat.
Fiierele de tip QuickTime au extensia .mov sau .qtm. Cu ajutorul elementului <OBJECT>
poate fi uor adugat cod ntr-o pagin web astfel nct un film QuickTime s poat fi inserat
ntr-o pagin web. Astfel, se poate seta instalarea automat a unui player QuickTime n cazul
n care nu este deja instalat.
Sintaxa folosit n mod uzual este de forma urmtoare:
<OBJECT
WIDTH="240"
HEIGHT="300" CLASSID="clsid:02BF25D5-8C17-4B23-BC80D3488ABDDC6B"CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM
NAME="src"
VALUE="sample.mov">
<PARAM
NAME="autoplay"
VALUE="true">
<PARAM
NAME="controller"
VALUE="true">
</OBJECT>
Atributele width i height trebuie setate astfel nct s corespund dimensiunii fimului
QuickTime (n pixeli).
Atributul classid identific n mod unic software-ul ce va rula filmul. Trebuie setat
"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" astfel nct s identifice controlul ActiveX
ce trebuie instalat pe computer nainte ca filmul s poat fi rulat. Dac utilizatorul nu are
instalat respectivul control ActiveX, browser-ul poate n mod automat s-l descarce i s-l
instaleze.
Atributul codebase specific calea (URI-ul) n care se gsete clasa obiectului specificat prin
atributul clsid. Internet Explorer folosete acest atribut pentru a specifica locaia de unde
poate fi descrcat player-ul corespunztor. n acest caz, trebuie setat
"http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locaia unde se gsete ultima
variant a player-ului QuickTime.
Parametrul src trebuie s se orienteze asupra fiierului ce conine filmul.
Parametrul autoplay se seteaz "true" n cazul n care se dorete ca filmul s nceap s
ruleze automat.
La fel i parametrul controller se seteaz "true" n cazul n care se dorete s fie afiat bara
de control a player-ului.
Inserarea unui film Real Video ntr-o pagin web
Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media. Formatul permite
difuzarea de informaii video (video on-line, Internet video) cu lime de band joas. Din
cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip
RealVideo au extensia .rm sau .ram. Cu ajutorul elementului <OBJECT> se introduce codul n
pagina web astfel nct filmele Real Video s poat fi inserate ntr-o pagin web. Spre
deosebire de formatul QuickTime, nu se poate seta instalarea automat a player-ului
corespunztor n cazul n care nu este deja instalat. Prin urmare, nainte de a putea rula un
film n format Real Video, este necesar instalarea programului RealPlayer. Versiunea pentru
Windows poate fi descrcat de la adresa http://uk.real.com/?mode=rp .
Sintaxa folosit n mod uzual este de forma urmtoare:
<OBJECT
WIDTH="320"
0020AFBBCCFA">
<PARAM
HEIGHT="240" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84BNAME="controls"
VALUE="All">
<PARAM
NAME="autostart"
VALUE="true">
<PARAM
NAME="src"
VALUE="sample.rm">
</OBJECT>
Atributele width i height trebuie setate astfel nct s corespund dimensiunii fimului Real
Video (n pixeli).
Atributul classid identific n mod unic software-ul ce va rula filmul. Trebuie setat "clsid:
CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" astfel nct s identifice controlul ActiveX ce
trebuie instalat pe computer nainte ca filmul s poat fi rulat.
Parametrul src trebuie s se orienteze asupra fiierului ce conine filmul.
Parametrul autostart se seteaz "true" n cazul n care se dorete ca filmul s nceap s
ruleze automat.
Parametrul controls se seteaz "All" n cazul n care se dorete s fie afiat bara de control a
player-ului sau "ImageWindow " n cazul n care NU se dorete s fie afiat bara de control a
player-ului.
Alte metode de inserare a unor sunete ntr-o pagin web
Aa cum am atras atenia anterior, pentru introducerea de sunete ntr-o pagin web mai pot
fi folosite i alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, i
<EMBED>, recunoscut de Internet Explorer i Netscape.Elementul <BGSOUND> este folosit
pentru a insera un sunet pe fundalul unei pagini web. Fiierele suportate de acest element
pot fi n format WAV, AU sau MID. Atributele caracteristice acestui element sunt:
Atribut
Descriere
balance
Precizeaz balansul. Poate lua valori ntre -10000 (100% stnga) i +10000 (100% dreapta)
delay
Definete timpul de pauz dintre repetiii
id
Definete un identificator atribuit sunetului
loop
Precizeaz de cte ori va fi repetat sunetul (-1 = infinit)
src
Precizeaz locaia (URL-ul) fiierului ce conine sunete
title
Precizeaz un titlu atribuit sunetului
volume
Precizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.)
Sintaxa folosirii acestui element este foarte simpl:

<html>
<body>
<H2>Muzica
in
fundal
</H2>
<BGSOUND
SRC="http://ciobanu.cich.md/muz/town.mid">
</body>
</html>
Folosind codul de mai sus vei obine o pagin web pe fundalul crei se va auzi o pies
instrumental.Elementul <EMBED> este folosit pentru a insera elemente multimedia ntr-o
pagin web n cazul browsere-lor care nu suport elementul <OBJECT>. Elementul <OBJECT>
poate fi folosit cu browserele mai noi, care suport controale ActiveX (Internet Explorer 5),
n vreme ce elementul <EMBED> este recomandat s fie folosit pentru browserele mai vechi.
Pentru compatibilitate, se recomand folosirea simultan a celor dou elemente. n aceast
situaie, un browser care recunoate elementul <OBJECT> va ignora elementul <EMBED>.
Atributele caracteristice acestui element sunt:
Atribut
autostar
Descriere
Stabilete dac obiectul multimedia pornete n mod automat la ncrcarea paginii web. Poate lua
valorile true sau false
height
Specific nlimea suprafeei n care va fi afiat obiectul
hidden
Stabilete dac obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate lua
valorile true sau false
src
Precizeaz locaia (URL-ul) fiierului ce conine sunete
width
Specific limea suprafeei n care va fi afiat obiectul
volume
Precizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.)

mpreun cu elementul <EMBED> se recomand folosirea elementului <NOEMBED> care ar
trebui s conin informaii ce vor fi afiate n cazul n care browser-ul nu suport elementul
<EMBED>. Din nefericire, un browser care suport elementul <EMBED> va ignora elementul
<NOEMBED>, chiar dac este incapabil s afieze obiectul introdus de elementul
<EMBED>.
Sintaxa recomandat pentru folosirea acestui element este urmtoarea:

<EMBED
SRC="http://ciobanu.cich.md/cale/fiier_multimedia"
WIDTH="..."
HEIGHT="..."
>
<NOEMBED>
<P>Din pcate nu avei instalat plugin-ul corespunztor pentru a vedea acest tip de
fiier
multimedia. Putei
vedea
n
continuare
o
imagine
edificatoare.
<IMG SRC="http://ciobanu.cich.md/cale/fiier_imagine" WIDTH="..." HEIGHT="..."
ALT="o
imagine
edificatoare">
</NOEMBED>
Se poate folosi chiar i o combinaie ntre elementele <EMBED> i <BGSOUND>, astfel nct,
dac unul din elemente nu este suportat de browser, s fie recunoscut cellalt.
Folosirea codului urmtor:
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
<html>
<body>
<embed src="m_v/RM.mid" width ="100" height="40" >
<noembed>
<h2>Muzica in fundal </h2>
<bgsound src="m_v/RM.mid">
</noembed>
</body>
</html>
Not: Bara de control afiat aparine player-ului QuickTime deoarece a fost setat ca
"Default Player" pentru fiierele de tip .MID.
Aplicaie practic
Pentru exemplificare, vom crea un fiier test.html ce va cuprinde o parte dintre elementele
prezentate anterior:
<html>
<head>
<title>Adaugarea de informatii multimedia unei pagini web</title>
</head>
<body>
<h2>Inserarea unei imagini</h2>
<object height="200" width="200" type="image/jpeg" data="../images/Taj_Mahal.jpg">
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
7.
</object>
<br />
<h2>Inserarea unui sunet (format .wav)</h2>
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" valua="Ready.wav">
<embed src="m_v/Ready.wav" width="100" height="40" >
<noembed> Browser-ul dvs. nu suport elementele object i nici embed</noembed>
</object>
<br />
<h2>Inserarea unui film (format .wmv)</h2>
<object width="240" height="160" type="video/x-ms-asf" url="3d.wmv" data="m_v/news.wmv" c
<param name="url" value="m_v/news.wmv">
<param name="filename" value="m_v/news.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="m_v/news.wmv" width="240" height="160" autostar
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
<br />
<h2>Inserarea unei pagini web</h2>
<object type="text/html" heght="200" width="400" data="ex40.html">
</object>
<br />
<h2>Inserarea unei animatii Flash (format .swf)</h2>
<object width="400" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"
<param name="movie" value="m_v/flash.swf">
<embed src="m_v/flash.swf" width="400" height="200">
</embed>
</object>
</body>
</html>
Referine.
Referine
interne
externe.
Pn acum am nvat s crem documente HTML n care am ntrodus text i imagini. n acest
capitol vom arta cum putem accesa orice resurs Web, Internet i intern cu ajutorul
referinelor (legturi, link-uri, hiperlegturi).
Referinele au urmtoarele roluri:
Permit trecerea de la o pagin la alta de pe Web i revenire la pagina iniial prin apsarea
butonului Back al browser-ului;
Permit trecerea de la o pagin la alta de pe calculatorul propriu;
Permit trecerea la fiiere non web de pe Internet (ftp, telnet etc.);
Permit trecerea la fiiere non HTML (.txt, .jpg, .pdf etc.);
Permit vizitarea unei pagini ncepnd dintr-un anumit loc, renunnd la barele de defilare;
Permit trimiterea unui e-mail.

7.1. Marcajul <a>
Pentru a crea o legtur se folosete marcajul <a> ancor, care are

sintaxa: <a atribute> coninut </a>
Coninutul dintre marcajele <a> i </a> poate fi text i/sau imagine, este afiat de browser
sub form de legtur (colorat i subliniat), i poate accepta comenzi de la mouse (un clic)
sau de la tastatur (ENTER). Cnd este deasupra unei legturi, cursorul grafic ia forma unei
mini, indicndu-ne astfel c browser-ul este pregtit s descarce resursa Internet de la
adresa URL indicat. Dac un document are mai multe legturi ne putem deplasa de la una
la alta i cu mouse-ul i cu ajutorul tastei TAB, iar pentru a face o legtur activ se execut
clic cu butonul stng pe legtur sau se tasteaz ENTER.
Atributele tag-ului <a> sunt:
href;
target;
title;
name;
Atributul href
Atributul href (referin hipertext) este obligatoriu pentru tag-ul legtur (ca src pentru
elementul <img>), are sintaxa href="adresa URL"i are rolul de a identifica o adres URL
absolut (de pe Internet) sau relativ (local). n exemplul de mai jos dm o referin ctre
un fiier local, flori.jpg, i ctre pagina Colegiului de Informatic, de pe WEB:
1
2
3
4
5
6
7
8
<html>
<head> <title>Referinte</title></head>
<body>
<p>Florile mele preferate<a href="images/crini.jpg">Crini</a>
<p>Detalii despre Colegiul de Informatica
<a href="http://cich.md">CIC</a>
</body>
</html>
Atributul target
Cnd utilizatorul activeaz o legtur, browser-ul nlocuiete fereastra care conine legtura
cu o nou fereastr, specificat de adresa URL din href. Atributul target face s se schimbe
aceast operaie implicit i el are sintaxa target="nume", unde nume definete fereastra n
care va fi ncrcat noua pagin. Numele este orice ir de caractere sau valori constante:
_blank pagina va fi ncrcat ntr-o nou fereastr;
_parent pagina va fi ncrcat n fereastra printe;
_top pagina va fi ncrcat n fereastra top a cadrului;
_self pagina va fi ncrcat n aceeai fereastr(implicit).
1
2
3
4
5
6
7
8
<html>
<body>
<a href="http://cich.md" target="_blank" >CIC</a>
</body>
</html>
Atributul title Acest atribut are un caracter general i poate fi ataat la majoritatea
elementelor HTML. Sintaxa acestui element este:title="valoare". Cnd mouse-ul este
deasupra coninutului tag-ului <a> coninut </a> se transform ntr-o mn i va afia
valoarea atributului title, ntr-o sugestie de instrument (ntr-un cadru).
1 <html>
3
4
5
6
7
8
<body>
<a href="http://cich.md" title="Colegiul de Informatica" >CIC</a>
</body>
</html>
Atributul name Acest atribut este utilizat pentru a defini o ancor n interiorul unei pagini.
Sintaxa acestui atribut este: name="valoare".
7.2. Referine ctre alte pagini Web
Dac se dorete accesarea unei pagini de pe alt site, valoarea atributului href este o adres
URL absolut. Amintim c o adresa URL absolut are sintaxa: protocol /numecalculator/cale/fiier unde
protocol
poate
fi,
de
exemplu,
http.
Exemplu:
1
2
3
4
5
6
7
8
<html>
<head></head>
<body>
Pentru mai multe informatii despre <br>
nvatamnt vizitati site-ul Ministerul Educatiei
<a href="http://www.edu.md"> ME</a>
</body>
</html>
Acelai rezultat obinem dac scriem i numele fiierului index(default) care se ncarc <a
href="http://www.edu.md/index.php"> ME </a>
Dac se dorete s se viziteze alt pagin a respectivului site, se scrie numele fiierului
.php(.html), respectiv.
7.3.Referine cu imagini
Aa cum am specificat mai sus, o legtur poate fi creat i cu ajutorul unei imagini. Ca i n
cazul n care coninutul unei legturi este un text, i n cazul n care coninutul este o
imagine, accesarea paginii se face cu un clic, sau un ENTER pe imagine. Exemplu:
1
2
3
4
5
6
7
8
9
10
<html>
<head> <title> Legaturi cu imagini </title> </head>
<body>
Colegiul de Informatica din Chisinau
<a href="http://cich.md">
<img src= "http://cich.md/galerie/content/Exteriorul colegiului/IMG_1631.jpg">
</a>
</body>
</html>
Un link poate fi format i din text i din imagine adic:
1
2
3
<html>
<head> <title> Legaturi cu imagini </title> </head>
<body>
Colegiul de Informatica din Chisinau
4
5
6
7
8
9
<a href="http://cich.md">CIC
<img src= "http://cich.md/galerie/content/Exteriorul colegiului/IMG_1631.jpg" width=70 h
</a>
</body>
</html>
7.4.Referine cu adrese URL relative

Adresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu,
indicnd cale/nume-fiier, fr a fi prefixate de protocol i nume calculator. n adresele
relative putem folosi caracterele ../ pentru a urca un nivel n structura de directoare(ctre
directorul printe).
Se cunoate faptul c un site poate s aib paginile (fiierele) organizate ntr-o structur
arborescent de directoare. S presupunem c avem urmtoarea structura arborescent :
Conform structurei arboriscente date din pagina pag6.html din mapa M5 se pot accesa
celelalte pagini, utiliznd urmtoarele referine:
1.
../../pag1.html
2.
../../M1/pag2.html
3.
../../M3/M6/pag7.html
4.
...
1
2
3
4
5
6
7
<html>
<head> <title> Referinte relative </title> </head>
<body>
Pagina7
<a href="../../M4/pag5.html"> Referinta catre pagina pag5.html
</body>
</html>
1
2
<html>
<head> <title> Referinte relative </title> </head>
<body>
</a>
3
4
5
6
7
Pagina5
<a href="../M3/M6/pag7.html"> Referinta catre pagina pag7.html
</body>
</html>
</a>
7.5. Referine ctre informaii non Web

Se pot face referine i la adrese URL absolute de pe Internet, care nu sunt resurse Web. n
adresele URL absolute se nlocuiete protocolul http cu alte protocoale non Web (ftp, telnet,
gopher etc.).
Exemplu:
1
2
3
4
5
6
7
8
9
10
11
<html>
<head></head>
<body>
<ul>
<li><a href="ftp://gatekepper.dec.com" >Vizitati locatia</a></li>
<li><a href="ftp://ftp.arsc.edu"> Educatie</a> </li>
<li><a href="telnet://well.com" > Whole Earth</a></li>
<li><a href="gopher://gopher.loc.gov"> GongresGopher</a></li>
</ul>
</body>
</html> </p>
7.6.Referine ctre fiiere non HTML

Se pot stabili legturi ctre orice tip de fiiere, nu numai html, ca de exemplu .pdf, .txt, .gif,
.rar, .zip, etc. n aceste condiii se ntlnesc dou situaii:
I.
II.
Browser-ul nu poate lucra cu fiierul ntlnit i atunci ncearc s-l descarce, executnd
operaia download.
Browser-ul cunoate tipul de fiier i acesta va fi deschis n fereastra sa.
Exemplu:
1
2
3
4
5
6
7
8
9
<html>
<head></head>
<body>
<a href="pag_2.pdf"> Fisier PDF</a> <br>
<a href="doc.txt">Fisier TXT </a> <br>
<a href="../files/tabel_culori.rar"> Fisier RAR </a> <br>
<a href="http://cich.md/galerie/content/Exteriorul colegiului/IMG_1631.jpg">Fisier JPG
</body>
</html></p>
7.7.Referine interne n cadrul unei pagini

n aceast seciune vom defini ancore (inte) ntr-o pagin, adugarea legturilor ctre
aceste inte, precum i legturi ctre inte din documente externe. Dac documentele HTML
sunt prea lungi i sunt greu de parcurs, pentru a evita parcurgerea cu bara de defilare, se
definesc ancore. Ancorele ne permit s ne deplasm rapid ntr-un loc din document. Ancora
este un identificator al nceputului unui element dintr-o pagin web. Dac au fost definite
ancore ntr-o pagin, se pot crea legturi ctre respectivele ancore.
Ancorele se pot defini n dou moduri:
utiliznd orice element HTML, inclusiv elementul <a> cu atributul id, de exemplu: <p
id="valoare_id"> sau <a id="valoare_id"> </a>
utiliznd tag-ul <a> cu atributul name, de exemplu: <a name="valoare_nume"> </a>
Pentru a crea o legtur la o ancor se folosete tag-ul <a>...</a> cu atributul href, care are
ca valoare o referin de ancor, precedat de simbolul #, astfel:
# valoare_nume
# valoare_id
Fiierul trebuie s fie suficient de mare, astfel nct secvena care conine o ancor s nu fie
vizibil n momentul trimiterii ctre ea. Ca exemplu s considerm agenda grpei I-942:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<title>Agenda grupei</title>
</head>
<body>
<h1 align="center"> Agenda grupei I-942<br />
<p>
<a href="#a-c"> [A-C] </a>
<a href="#d-h"> [D-H] </a>
<a href="#i-l"> [I-L] </a>
<a href="#m-n"> [M-N] </a>
<a href="#o-s"> [O-S] </a>
<a href="#t-w"> [T-W] </a>
</h1>
<br />
<hr size="4" width="100%" align="center" color="#666666">
<br />
<pre>
<h1>
<p id="a-c"> [A-C] </p>
1.Bogdan Constantin
2.Budu Tudor
3.Buzu Gheorghe
4.Casian Olea
5.Casparov Pavel
6.Cebotari Ecaterina
7.Cibuc Nicolae
8.Ciusca Cristian
9.Coslet Vladislav
10.Cotru Alina
11. ...
<p id="d-h"> [D-H] </p>
1.Dabija Viorel
2.Gabura Ruslan
3.Gorobet Lilian
4. ...
<p id="i-l"> [I-L] </p>
1.Lungu Inga
2. ...
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
1
2
3
4
5
6
<p id="m-n"> [M-N] </p></p>

1.Melestean Alexandru
2.Mititelu Dumitru
3. ...
<p id="o-s"> [O-S] </p>
1.Podolean Ion
2.Popovici Victor
3.Puzur Gheorghe
4.Savin Victor
5.Scutelnic Valeria
6.Smolenschi Mihai
7.Stefanica Victor
8.Strelciuc Victoria
9. ...
<p id="t-w"> [T-W] </p>
1.Todirascu Mihaela
2.Toma Cristian
3.Vasiloi Alexandru
4. ...
</body>
</html>
7.8. Trimiterea automat a unui e-mail

Dac dorim s trimitem un e-mail dintr-o pagin, se creeaz o legtur la o adres e-mail.
Legtura va avea atributul href a crui valoare este mailto (protocol pentru pot), urmat
de: i de o adres de e-mail valid, de exemplu:
<a href="mailto:cio3banu@yahoo.com"> Puteti sa-mi scrieti </a>
Se poate folosi elementul <adress> de formatare logic, care are rolul de a evidenia o
adres (mesajul se va scrie la nceput de linie), aa cum reiese din exemplu de mai jos.
Sintaxa elementului <adress> este:
<adress> <a href="mailto:cio3banu@yahoo.com"> Puteti sa-mi scrieti </a> </adress>
Cnd se execut clic pe o legtur e-mail, se va deschide o aplicaie e-mail care are, n
cmpul To, adresa din legtur i care permite s introducem mesajul. Se poate trece i un
subiect, care va fi desprit de adres prin ?, precum i un text n interiorul mesajului (de
forma body=text) i care se va separa de subiect prin caracterul &, ca n exemplul de mai
jos:
<html>
<head></head>
<body>
<adress>
<a href="mailto:cio3banu@yahoo.com"> Puteti sa-mi scrieti</a>
</adress>
</body>
</html>
7
8
7.9. Culorile referinelor
O referin poate fi n una din strile:
activ
vizitat
nevizitat
n funcie de starea n care se afl, o legtur are o anumit culoare i anume:
1
2
3
4
5
6
7
8
9
10
Starea activ are culoarea implicit rou (#FF0000). Culoarea se poate schimba cu
atributul alink=culoare al elementului < body>
Starea vizitat are culoarea implicit purple (#800080). Culoarea se poate schimba cu
atributul vlink=culoare al elementului < body>
Starea nevizitat are culoarea implicit albastru (#0000FF). Culoarea se poate schimba cu
atributul link=culoare al elementului < body>
<html>
<head></head>
<body alink="green" vlink="red" link="blue">
<ul>
<li><a href="http://cich.md">CIC</a>
<li><a href="http://cfbc.md">CFBC</a>
<li><a href="http://ccc.md">CCC</a>
</ul>
</body>
</html>
8. Documentarea unei pagini Web

Meta-informaiile sunt informaiile despre modul de organizare a informaiilor. n cazul
unei pagini Web meta-informaiile 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 n INTERNET, specializate n stocarea de
informaii despre informaiile stocate pe diferite site-uri. Meta-informaiile
sunt culese de ctre aplicaiile speciale ale motoarelor de cutare numite spiders sau robots.
Serverele specializate n stocarea i indexarea de meta-informaii ofer utilizatorilor motoare
de
cutare
puternice
care
permit
regsirea
informaiilor
(a
adreselor
la care aceste informaii exist). Cteva exemple n acest sens sunt: www.google.com,
www.yahoo.com, www.altavista.com, www.excite.com, www.lycos.com etc.
Meta-informaiile adic informaiile despre informaiile coninute ntr-o pagin Web se
introduc cu ajutorul tag-ului <meta> plasat n interiorul blocului <head><head>. Acest tag
se utilizeaz cel mai frecvent mpreun cu trei atribute:
name;
http-equiv;
content.
Cele trei atribute se folosesc n perechi "name/content" sau "http-equiv/content".
8.1.
Descrierea
unei
pagini
Web
Pentru a face cunoscut motoarelor de cutare din Internet scopul pentru care a fost creat o
pagin Web poate fi inserat un element<meta> avnd atributele:
name - setat la valoarea description;
content - setat la un ir de caractere ce conine o descriere general a paginii.

Iat n continuare un exemplu de utilizare:
1
2
3
4
5
6
7
8
9
<html>
<head>
<title>Colegiul de Informatic </title>
<meta name="description" content="Site-ul prezint informaii importante despre Colegiu
</head>
<body>

<body>
</html>
8.2. Cuvintele cheie pentru o pagin Web

Cuvintele cheie ofer o alt metod de descriere a informaiilor coninute de o pagin Web.
Cuvintele cheie trebuie alese cu atenie pentru ca informaia indexat pe baza lor de ctre
spiders, s poat fi regsit corect n bazele de date ale mooarelor de
cutare.
Pentru a preciza cuvintele cheie ale paginii Web se utilizeaz:
atributul name - setat la valoarea keywords;

atributul content - care va primi ca valoare lista cuvintelor cheie separate prin ",".
Iat un exemplu de utilizare:

<meta
name="keywords"
content="Colegiu,
Informatica,
Chiinu,
Moldova">
8.3. Drepturile de autor

Atributul name poate fi utilizat pentru a furniza informaii legate de autorul paginii i
despre Copyright (drepturile de autor). Exemplul urmtor ilustraz aceste
lucruri:
<meta
name="author"
content="Ciobanu
Andrei
">
<meta name="copyright" content="cich.md">
8.4. Persoana de contact
Pentru a putea furniza informaii despre persoana care se ocup de administrarea site-ului se
utilizeaz atributul http-equiv. n acest caz valoarea atributului content va conine o
adres e-mail eventual urmat n paranteze rotunde de un nume complet al
persoanei.
Exemplu:
<meta
http-equiv="from"
content="ciobanu@cich.md
(Ciobanu
Andrei)">
<meta http-equiv="reply-to" content=="cio3banu@yahoo.com (Andrei Ciobanu)">
8.5. Setul de caractere utilizat
Setul de caractere se stabilete prin intermediul atributului charset. n mod implicit setul de
caractere al unei pagini Web este western. Opional acest set de caractere poate fi stabilit
prin urmtoarea exprimare:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Pentru a se putea utiliza diacriticele limbii romne trebuie ales setul de caractere Sud-Est
European:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
8.6. Rencrcarea automat a unei pagini Web
O utilizare interesant a atributului http-equiv este aceea de a seta rencrcarea automat
n fereastra browser-ului a aceleiai pagini (de exemplul pagina cu evoluia cursurilor la o
burs)
sau
a
unei
pagini
noi.
n acest fel se obin faciliti dinamice pentru un Website. Pentru a rencrca aceeai pagin
la un interval precizat de secunde se utilizeaz atributul http-equiv setat la
valoarea refresh iar atributul content setat la valoarea numrului de secunde dup care se
dorete ca pagina s fie reactualizat.
Exemplul 1. Aceeai pagin va fi rencrcat dup 5 secunde:
<meta http-equiv="refresh" content="5">
Exemplul 2. O alt pagin (cuprins.html) va fi rencrcat dup 9 secunde:
<meta http-equiv="refresh" content="9; url='cuprins.html'">
8.7. Comentariile
Comentariile sunt blocuri de text utile care prezint informaii de proiectare utile despre
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 se utilizeaz sintaxa:
<!-Comentarii
-->
Blocul de comentarii poate fi plasat oriunde este necesar n cadrul paginii .html i se poate
extinde pe mai multe rnduri;
9. Operarea cu formulare. Marcaje utilizate.

Un formular este un ansamblu de zone active alcatuit din butoane ,casete de
selecie,cmpuri
de
editare
etc.
Formularele va asigura construirea unori pagini Web care permit utilizatorilor s introduc
efectiv informaii i s le transmit serverului. Formularele pot varia de la o simpl caset de
text, pentru introducerea unui ir de caractere pe post de cheie de cautare - element
caracteristic tuturor motoarelor de cutare din Web - pn la o structur complex ,cu
multiple seciuni, care ofer faciliti puternice de transmisie a datelor. O sesiune cu o
pagin web ce conine un formular cuprinde urmtoarele etape:
1.
Utilizatorul completeaz formularul i l expedieaz unui server;
2.
O aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar)
stocheaz datele ntr-o baz de date;
3.
Dac este necesar serverul expedieaz un raspuns utilizatorului.
Un
formular
este
definit
ntr-un
bloc
delimitat
de
etichetele
corespondente <form>i </form>.
Atribute eseniale ale elementului <form>
Exist dou atribute eseniale ale elementului <form>:
1. Atributul action precizeaz ce se va ntampla cu datele formularului odat ce acestea
ajung la destinaie. De regul ,valoarea atributului action este adresa URL a unui script aflat
pe un srver WWW care primete datele formularului, efectueaz o prelucrare a lor i

expedieaz ctre utilizator un rspuns.
<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.
Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell.
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 adresa URL
precizat de atributul action;
nu
sunt
permise
cantiti
mari
de
date
(maxim
1
Kb);
- intre adresa URL i date este inserat un "?".
Datele sunt adugate conform sintaxei: nume_camp = valoare_camp. ntre diferite seturi de
date este introdus un "&".
Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 =
valoare2";
post n acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (ordinul
MB)
Pentru ca un formular s fie funcional, trebuie precizat ce se va ntmpla cu el dup
completarea i expediere. Cel mai simplu mod de utilizare a unui formular este expedierea
acestuia prin pota electronic (e-mail). Pentru aceasta se folosete un atribut al
etichetei<form>: i anume action care primete ca valoare " mailto: " concatenat cu o adres
valid de e-mail ctre care se va expedia formularul completat.
Un formular cu un cmp de editare i un buton de expediere
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a
preciza tipul elementului se folosete atributul type al etichetei <input>. Pentru un cmp de
editare, acest atribut primeste valoarea "text". Alte atribute pentru un element<input> sunt:
name - permite ataarea unui nume fiecrui element al formularului;
value - care permite atribuirea unei valori iniiale unui element al formularului.
Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, n care
atributul type este configurat 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 a fost stabilit.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>Form_ex1</title>
</head>
<body>
<h1>Un formular cu un camp de editare si un buton de expediere</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele si prenumele"><br />
<input type="submit" value="Expedieaza">
</form>
</body>
</html>
Pentru elementul <input> de tipul cmp de editare (type = "text") , alte doua atribute pot fi
utile:
size - specific lmea cmpului de editare ce depete aceast lme ,atunci se execut
automat o derulare acestui cmp;
maxlength - specific numrul maxim de caractere pe care le poate primi un cmp de editare,
caracterele tastate peste numrul maxim sunt ignorate.
Observaii:
- dac atributul type lipsete ntr-un element <input>, atunci cmpul respectiv este
considerat
n
mod
prestabilit
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 dupa completarea i apsarea tastei ENTER.
Butonul Reset
Daca un element de tip <input> are atributul type configurat la valoarea "reset", atunci n
formular se introduce un buton pe care scrie "Reset". La apsarea acestui buton, toate
elementele din formular primesc valorile prestabilite (definit odata 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. Un asemenea buton afieaz textul "Reset" dac atributul value lipsete,
respectiv valoarea acestui atribut n caz contar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
</head>
<body>
<h1>Un formular cu un buton reset</h1><br />
<hr> <br />
<form action="mailto:xxxxx@xxx.com" method="post"> <br />
Introduceti numele:<input type="text" name="nume" value="Numele"><br /> <br />
Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br /><br />
<input type="reset" value="Sterge"> <input type="submit" value="Expedieaza"> <br />
</form>
</body>
</html>
Cmp de editare de tip "password"

Dac se utilizeaz eticheta <input> avnd atributul type configurat la valoarea "password" ,
atunci n formular se introduce un element asemntor cu un cmp de editare obinuit
introdus prin type="text". Toate atributele unui cmp de editare rmn valabile. Singura
deosebire const n faptul c acest cmp de editare nu afieaz caracterele clar, ci numai
caractere *, care ascund de privirile altui utilizator aflat n apropiere valoarea introdus ntrun asemenea cmp. La expedierea formularului ns, valoarea tastat ntr-un cmp de tip
"password" se transmite clar.
<html>
1
<head>
2
3
</head>
4
<body>
<h1>Un formular cu un buton reset</h1>
5
<hr> <br />
6
7
Nume:<input type="text" name="nume" value="Numele"><br>
8
Prenume:<input type="text" name="prenume" value="Prenumele"><br>
9
Password:<input type="password" name="parola" ><br>
10 <input type="reset" value="Sterge"> <input type="submit" value="Expedieaza">
11 </form>
12 </body>
13
14
15
</html>
Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe
posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type avnd valoarea
"radio".
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
</head>
<body>
<h1>Un formular cu butoane radio</h1>
<hr>
<p>
Alegeti sexul:<br>
Barbatesc: <input type="radio" name="sex" value="b"> <br />
Femeiesc: <input type="radio" name="sex" value="f"> <br />
<input type="reset"> <input type="submit">
</p>
</form>
</body>
</html>
La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", n

funcie de alegerea fcut de utilizator.
Casete de validare
O caset de validare(checkbox) permite selectarea sau deselctarea unei opiuni. Pentru
inserarea unei casete de validare se utilizeaz eticheta <input> cu atributul type configurat
la valoarea "checkbox".
Observaii:
fiecare
caset
poate
avea
un
nume
definit
prin
atributul name.
- fiecare caset poate avea valoarea prestabilit selectat definit prin atributul checked.
<html>
1
<head>
2
3
</head>
4
<body>
<h1>Un formular cu casete checkbox</h1>
5
<hr>
6
7
Alegeti meniul:<br />
8
<input type="checkbox" name="pizza" value="o portie"> Pizza<br />
9
<input type="checkbox" name="nectar" value="un pahar"> Nectar<br />
10 <input type="checkbox" name="bere" value="o sticla"> Bere<br />
11 <input type="checkbox" name="cafea" value="o ceasca"> Cafea<br />
12 <input type="reset"> <input type="submit">
</form>
13 </body>
14 </html>
15
16
17
Casete de fiiere
ntr-o pereche "name = value" a unui formular se poate folosi ntregul coninut al unui fiier
pe post de valoare. Pentru aceasta se insereaz un element <input> ntr-un formular, cu
atributul type avnd valoarea "file"(fiier).
Atributele pentru un element de tip caset de fiiere:
1
2
3
4
5
6
7
8
9
10
11
12
13
name - permite ataarea unui nume;

value - primete ca valoare adresa URL a fiierului care va fi expediat o dat cu formularul.
Aceast valoare poate fi atribuit direct atributuluivalue, sau poate fi selectat prin intermediul
unei casete de tip File Upload sau Choose File care apare la apsarea butonului Browse... din
formular;
enctype - precizeaz metoda utilizat la criptarea fiierului de expediat.Valoarea acestui
atribut este "multipart/form-data".
<html>
<head>
</head>
<body>
<h1>Un formular cu caseta de fisiere</h1>
<hr>
Alegeti fisierul:<input type="file" name="fisier" enctype="multipart/form-data"><br />
</form>
</body>
</html>
Liste de selecie
O list de selecie permite utilizatorului s aleag unul sau mai multe elemente dintr-o list
finit. Lista de selecie este inclus n formular cu ajutorul etichetelor
corespondente <select>si </select>.
O list de selecie poate avea urmtoarele atribute:
1
2
3
4
5
name - ataeaz listei un nume (utilizat n perechile "name=value" expediat serverului);

size - care precizeaz(printr-un numr ntreg pozitiv, valoarea prestabilit fiind 1) cte
elemente din list sunt vizibile la un moment dat pe ecran(celelalte devenind vizibile prin
acionarea barei de derulare ataate automat listei).
Elementele unei liste de selecie sunt incluse n lista cu ajutorul etichetei <option>. Dou
atribute ale etichetei <option> se dovedesc utile:
value - primete ca valore 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>;
selected(fara alte valori) - permite selectarea prestabilit a unui element al listei.

<html>
<head>
</head>
<body>
<h1>Un formular cu o lista de selectie</h1>
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<hr>
Universitatea absolvita:<br><br>
<select name="universitate" size="3">
<option value="USM">Universitatea de Stat din Moldova
<option value="UST" selected>Universitatea de Stat din Tiraspol
<option value="UTM">Universitatea Tehnica din Moldova
<option value="UCCM">Universitatea Cooperatist Comerciala din Moldova
</select>
<br><br>
</form>
</body>
</html>
List de selecie cu selecii multiple

O list de selecie ce permite selecii multiple se creeaz ntocmai ca o list de selecie
obisnuit. n plus, eticheta <select> are un atribut multiple(far alte valori). Cnd
formularul este expediat ctre server pentru fiecare element selectat al listei care este se
insereaz ctre o pereche "name=value" unde name este numele listei.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
</head>
<body>
<h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1>
<hr>
Limbi straine cunoscute:<br><br>
<select name="limbi straine" size="5" multiple >
<option value="e"> Engleza
<option value="f" selected>Franceza
<option value="s">Spaniola
<option value="i">Italiana
<option value="r">Rusa
<option value="g">Germana
</select><br><br>
</form>
</body>
</html>
Cmpuri de editare multilinie

ntr-un formular cmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>.
Eticheta are urmtoarele atribute:
cols - specific numrul de caractere afiate ntr-o linie;
rows - specific numrul de linii afiate simultan;
name - permite ataarea unui nume cmpului de editare multilinie;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wrap - determin comportamentul cmpului de editare fa de sfritul de linie. Acest atribut

poate primi urmatoarele valori:
o
"off" - ntreruperea cuvintelor se produce la marginea dreapt a editorului, cnd
dorete utilizatorul. Caracterul de sfrit de linie este inclus n textul transmis serverului o
data cu formularul;
o
"hard" - ntreruperea cuvintelor se produce la marginea dreapt a editorului. Caracterul
de sfrit de linie este inclus n textul transmis serverului o dat cu formularul;
o
"soft" - ntreruperea cuvintelor se produce la marginea dreapt a editorului. Nu se
include caracterul de sfrit de linie n textul transmis serverului o dat cu formularul.
<html>
<head>
</head>
<body>
<h1>Un formular cu un camp de editare multilinie</h1>
<hr>
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial.
</textarea><br /><br />
</form>
</body>
</html>
Un formular complex
n exemplul urmtor este prezentat un formular coninnd elemente prezentate anterior.
Cmpurile formularului sunt incluse n celulele unui tabel pentru a obine o aliniere dorit.
<html>
1
<head>
2
3
</head>
4
<body>
<h1>Un formular complex</h1>
5
<hr>
6
<center>
7
<table bgcolor="orange"> <form action="mailto:xxxxx@xxx.com" method="post">
8
<caption align="top">MENIU</caption>
9
<tr align="left"><th>Numele: <td><input type="text" name="numele">
10 <tr align="left"><th>Preumele: <td><input type="text" name="prenumele">
11 <tr align="left"><th>Telefonul: <td><input type="text" name="telefonul">
<tr align="left"><th>Alegeti pizza:
12 <td>
13 <input type="checkbox" name="ciuperci">cu ciuperci
14 <input type="checkbox" name="mexicana">mexicana
15 <input type="checkbox" name="europeana">europeana
align="left"><th>Alegeti plata:
16 <tr
<td bgcolor="lightblue">
17
<ul>
18
<li><input type="radio" name="plata">cash
<li><input type="radio" name="plata">card
19
</ul>
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<tr align="left"><th>Comentarii:
<td>
<textarea name="comentarii" cols="30" rows="5" wrap="off">
Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre
</textarea>
<tr align="left" valign="top">
<td>
<input type="reset" value="Sterge"><td><input type="submit" value="Expedieaza">
</form>
</table>
</body>
</html>
Butoane
ntr-un formular pot fi afiate butoane. Cnd utilizatorul apas un buton, se lanseaz 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 nsera un buton ntr-un formular, se utilizeaz eticheta <input> avnd
atributul type configurat
la
valoarea
"button".
Alte
dou
atribute
ale
elementului <input> sunt:
name - permite ataarea unui nume butonului;
value -primete ca valoare textul ce va fi afiat pe buton.

Un buton pentru lansarea n execuie a unei aciuni poate fi introdus ntr-un formular prin
elementul <input> avnd atributul typeconfigurat la valoarea "button", aa cum s-a vzut
mai
nainte.
Exist o a doua modalitate de a introduce ntr-o pagina Web un buton, i anume prin
intermediul blocului <button>...</button>. Un astfel de buton poate fi inserat ntr-un
formular, n acest caz declannd aciuni legate de acel formular, sau poate fi introdus
oriunde n pagin pentru iniierea unor aciuni independente de formulare. Atributele posibile
ale elementului "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 ntrun formular.Valorile posibile pentru acest atribut sunt:
o
"button";
o
"submit";
o
"reset".
n corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a
unei
imagini.
Observaii finale:
- elementul <form> poate avea un atribut target, care primete ca valoare numele unei
ferestre a browserului n care va fi ncrcat rspunsul trimis serverului WWW la expedierea
unui
formular.
- toate elementele cuprinse ntr-un formular pot avea un atribut disabled care permite
dezactivarea
respectivului
element.
- toate elementele de tip text cuprinse ntr-un formular pot avea un atribut readonly care
interzice modificarea coninutului acestor elemente.
10. Ferestre n HTML. Comenzi de construire a ferestrelor(cadrelor).
Ferestrele sau cadrele ne permit s definim n fereastra browser-ului subferstre n care s fie
ncrcate documente HTML diferite. Ferestrele sunt definite ntr-un fiier HTML special , n
care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n interiorul
acestui
bloc,
fiecare
cadru
este
introdus
prin
eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa URL a
documentului HTML care va fi ncrcat n acelframe. Definirea cadrelor se face prin
mprirea ferestrelor (i a subferestrelor) n linii i coloane:
1.
mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu ajutorul
atributului cols al etichetei <frameset> ce descrie acea fereastr;
2.
mprirae unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul
atributului rows al etichetei <frameset> ce descrie acea fereastr.
Valoare atributelor cols i rows este o list de elmente separate prin virgul, care descriu
modul n care se face mprirea. Elementele listei pot fi:
un numr ntreg de pixeli;
procente din dimensiunea ferestrei(numr ntre 1 si 99 terminat cu %);
n* care inseamna n pari din spaiul rmas;

Exemplu 1: cols="200,*,50%,*" nseamn o mprire n 4 subferestre, dintre care prima
are 200 pixeli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a patra ocup
n mod egal restul de spaiu rmas disponibil.
Exemplu 2: cols="200,1*,50%,2*" nseamn o mprire n 4 subferestre, dintre care prima
are 200 pixeli, a treia ocup jumtate din spaiul total disponibil iar a doua i a patra ocup
n mod egal restul din spaiul rmas disponibil, care se mparte n trei pri egale, a doua
fereastr ocupnd o parte, iar a patra ocupnd 2 pri.
Observaii:
- Dac mai multe elemente din list sunt configurate cu *, atunci spaiul disponibil rmas
pentru
ele
se
va
mpari
n
mod
egal.
- O subfereastr poate fi un cadru (folosind <frame>) n care se va ncarc un document
HTML sau poate fi mprit la rndul ei n alte subfereste (folosind <frameset>).
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
<html>
<head>
<title>Fer_ex1</title>
</head>
<frameset cols="*,*">
<frame src="p1.html">
</frameset>
</html>
n exemplul urmtor este creat o pagina Web cu trei cadre orizontale. Pentru al doilea cadru
valoarea atributului src este adresa URL a unei imagini.
<html>
<head>
</head>
<frameset rows="100,*,10%">
<frame src="Taj_Mahal.jpg">
7
8
9
10
</frameset>
</html>
n exemplul urmtor este creat o matrice de 4 cadre (2 x 2).Pentru a realiza acest lucru, se
folosesc simultan cele dou atribute cols irows.
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<frameset rows="*,*" cols="*,*">
</frameset>
</html>
n exemplul urmtor este creat o pagina Web cu trei cadre mixte. Pentru a o crea se
procedeaz din aproape n aproape. Mai nti, pagina este mprit n dou subferestre de
tip coloan, dup care a doua subfereastr este mprit n dou subferestre de tip linie.
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
<html>
<head>
</head>
<frameset cols="20%,*">
<frameset rows="*,*">
</frameset>
</frameset>
</html>
Culori pentru chenarele cadrelor i dimensionarea chenarului unui cadru

Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul bordercolor. Acest
atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu
modelul
de
culoare
RGB.
Atributul bordercolor poate
fi
ataat
att
etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, ct i
etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual.
Atributul border al etichetei <frameset> permite configurarea limii chenarelor tuturor
cadrelor la un numr dorit de pixeli. Valoarea prestabilit a atributului border este de 5
pixeli. O valoare de 0 pixeli va defini un cadru fr chenar.
<html>
<head>
</head>
<frameset cols="20%,*" bordercolor="green" border="15">
7
8
9
10
11
12
</frameset>
</frameset>
</html>
Pentru a obine cadre fr chenar se utilizeaz border="0". n mod prestabilit, chenarul unui
cadru este afiat i are aspect tridimensional. Afiarea chenarului unui cadru poate fi
dezactivat
dac
se
utilizeaz
atributul frameborder cu
valoare "no".
Acest atribut poate fi ataat att etichetei <frameset> (dezactivarea fiind valabil pentru
toate cadrele incluse) ct i etichetei <frame>(dezactivarea fiind valabil numai pentru un
singur cadru). Valorile posibile ale atributului frameborder sunt:
yes - echivalent cu 1;
no - echivalent cu 0;
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<frameset cols="20%,*" border="0">
</frameset>
</frameset>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<frameset cols="20%,*" frameborder="no">
</frameset>
</frameset>
</html>
Bare de defilare
Atributul scrolling al etichetei <frame> este utilizat pentru a adaug unui cadru o bar de
derulare care permite navigarea n interiorul documentului afiat n interiorul cadrului.
Valorile posibile sunt:
yes - barele de derulare sunt adugate ntotdeauna;
no - barele de derulare nu sunt utilizabile;
auto - barele de derulare sunt vizibile atunci cnd este necesar.

<html>
1
<head>
3
4
5
6
7
8
9
10
</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>
Atributul noresize al etichetei <frame> (fr nici o valoare suplimentara) dac este prezent,
inhib posibilitatea prestabilit a utilizatorului de a redimensiona cadrul cu ajutorul mouseului.
Poziionarea documentului ntr-un cadru
Atributele marginheight i marginwidth ale etichetei <frame> permit stabilirea distanei n
pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului.
Valori posibile:
numr de pixeli;
procent din limea, respectiv din nlimea cadrului;
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
</head>
<frameset cols="*,*,*">
<frame src="p.html">
<frame src="p.html" marginheight="20">
<frame src="p.html" marginwidth="20">
</frameset>
<noframes>
Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta frame-uri.
</noframes>
</html>
Exist browsere care nu suport cadre pentru aceasta se utilizeaz n interiorul

blocului <frameset> eticheta <noframes>. Dac programul de navigare tie s interpreteze
cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n
zona <noframes>...</noframes> va fi singurul care va fi neles i afiat. De precizat este
faptul c ntre <noframes> ... </noframes> se pot introduce orice alte tag-uri HTML (inclusiv
imagini, hiperlink-uri, tabele).
Cadre interne
Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru
intern se insereaz ntr-o pagina Web n mod asemntor cu o imagine sau n modul n care se
specific marcajul <frame>, aa cum rezult din urmtorul exemplu:
<iframe src="pagina1.html" height=40% width=50%> </iframe>
n acest caz, am specificat c doresc o fereastr de cadru intern care are 40% din nlimea i
50% din limea paginii curente. Atributele acceptate de eticheta <iframe> sunt n parte
preluate
de
la
etichetele <frame>i <frameset>,
cum
ar
fi: src, frameborder,marginheight, marginwidth, scrolling, name, noresize;
sau de la eticheta <img>: vspace, hspace, align, width, height;
<html>
1
<head>
2
3
</head>
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<a href="p1.html" target="icad">Pagina1</a><br />
<a href="p.html" target="icad">Home</a><br>
<center>
<iframe width="60%" height="50%" frameborder="1" name="icad" src="p.html"> Daca vedeti a
inseamna ca
browserul dumnevoastra nu suporta cadre interne. Ar fi preferabil sa reveniti, folosin
Navigator versiune 4.0
(/ulterioara) sau I.Explorer 4.0. (/ulterioara)
<a href="p0.html">Pagina fara cadre interne</a>
</iframe>
</center>
</body>
</html>
inte pentru legturi

n mod prestabilit, la efectuarea unui clic pe o legatur nou, pagina ctre care indic
legtura o nlocuiete pe cea curent, n aceeai fereastr(cadru). Acest comportament se
poate schimba n dou moduri:
1.
prin plasarea n blocul <head>...</head> a unui element <base> care precizeaz, prin
atributul target numele ferestrei(cadrului) n care se vor ncrca toate paginile noi referite de
legaturile din pagina curent conform sintaxei:
<base target="nume_ferastra/frame_de_baza">
2.
prin plasarea n eticheta <a> a atributului target, care precizeaz numele ferestrei (cadrului)
n care se va ncrca pagina nou referit de legtur, conform sintaxei:
<a href="legatura" target="nume_fereastra/frame">...</a>
Observatie:
Dac este prezent att un atribut target n <base> ct i un atribut target n <a>, atunci
cele precizate de atributul target din <a> sunt prioritare. Numele unui cadru este stabilit
prin atributul name al etichetei <frame> conform sintaxei: <farme name="nume_frame">
n exemplul urmtor este prezentat o pagin Web cu dou cadre. Toate legturile din cadrul
1 ncarc paginile n cadrul 2.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
<html>
<head>
</head>
<frameset cols="20%,*">
<frame src="left.html">
<frame src="p.html" name="main">
</frameset>
</html>
Exemplul urmtor este pagina left.html

<html>
<head>
<title>Fer_ex12_left</title>
</head>
<body>
<a href="p1.html" target="main">Pagina1</a><br />
6
7
8
9
10
11
12
13
<a href="p2.html" target="main">Pagina2</a><br />

<a href="p3.html" target="main">Pagina3</a><br><br />
<a href="p1.html" target="_blank">Pagina1 intr-o fereastra noua</a><br /><br />
<a href="p1.html" target="_self">Pagina1 in fereastra curenta</a><br /><br />
<a href="p.html" target="main">Home</a><br />
</body>
</html>
Valori pentru atributul target

Atributul target al etichetei <frame> accept anumite valori predefinite de o valoare
deosebit pentru creatorii de pagini Web. Aceste valori sunt:
_self - ncrcarea noii pagini are loc in cadrul curent;
_blank - ncrcarea noii pagini are loc intr-o fereastr nou anonim;
_parent - ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exist,
altfel are loc n fereastra browser-ului curent;
_top - ncrcarea noii pagini are loc n fereastra browser-ului ce conine cadrul curent;

Ce Este HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ce Este HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Ce este HTML ?

document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de asemenea

O eticheta poate fi scris att cu litere mici, cat si cu litere mari.

<title>Aceasta este prima mea pagina de Web</title>

Coninutul blocului <title>...</title> va aprea in bara de titlu a ferestrei browser-ului.

leftmargin ( stabilete distanta dintre marginea stnga a ferestrei browser-ului si marginea

topmargin ( stabilete distanta dintre marginea de sus a ferestrei browser-ului si marginea de

Stiluri fizice si logice

<cite>...</cite> ( " cite " inseamna citat);

n locul lor se poate utiliza eticheta echivalenta <i>...</i>.

<code>...</code> ( " code " inseamna cod sau surs);

Eticheta de tip bloc <blink>...</blink> delimiteaz fragmente de text clipitoare. Aceasta

Exemplul urmtor ilustreaz c etichetele pot fi imbricate.

Blocul <q>...</q> permite inserarea in-line a citatelor. Brouwser-ul afieaz citatele n

Pentru escape-consecutiviti sunt dou restricii suplimentare:

Fiecare consecutivitate se scrie numai cu minuscule

<p> <b> &#350; </b> - &amp;&#35;350;</p>

culoare (stabilita prin atributul color);

printr-un nume de culoare.

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);

Grosimea unui font

<font weight="900">Fonturi de grosime 900.</font>

Indentarea unui bloc

<xmp>...</xmp> ( 80 de caractere pe rand );

<listing>...</listing> ( 120 de caractere pe rand ).

inserarea unui spatiu suplimentar inainte de blocul paragraf;

inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste

width permite alegerea lungimii liniei;

size permite alegerea grosimii liniei;

noshade cand este prezent defineste o linie fara umbra;

color permite definirea culorii liniei.

Blocul introdus de etichetele <center>...</center> aliniaza centrat toate elementele pe care

left " ( aliniere la stanga );

center " ( aliniere centrala );

right " ( aliniere la dreapta ).

<ul>Culori uzuale disponibile prin nume

"disc" (disc plin) (valoarea prestabilita);

" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );

" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );

O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>.

n exemplul urmtor lista de definiii are itemii <dt> si <dd> multipli:

<body><h1 align="center">O lista de definiii speciala</h1>

5. Tabele. Noiuni i marcaje utilizate.

<tr><td>cell 41</td><td>cell 42</td></tr>

"left " ( valoarea prestabilita );

Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:

Distanta dintre marginea unei celule si coninutul ei poate fi definita cu ajutorul

Dimensionarea unui tabel

numere ntregi pozitive reprezentnd latime respectiv nlimea in pixeli a tabelului;

Titlul unui tabel

" bottom " ( sub tabel );

" top " ( deasupra tabelului );

" left " ( la stanga tabelului );

" right " ( la dreapta tabelului ).

<table border><caption align="bottom">Preturile masinii

Alinierea coninutului unei celule

"center" ( centrat , valoarea prestabilita );

"char" ( alinierea se face fata de un caracter ).

"middle" ( la mijloc, valoarea prestabilita );

Dimensionarea exacta a celulelor unui tabel

numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a

procente din latime , respectiv inaltimea tabelului.

<tr><td width="100" height="150">cell 11</td><td width="100" height="150">cell 11</td></

Tabele de forme oarecare

<p> <b> Ş </b> - Ş</p>

dupa <td> se pune ;