Manual HTML

Capitolul 12
LIMBAJUL HTML
Dup studierea acestui capitol, vei fi capabili s:
elaborai pagini Web utiliznd sintaxa HTML;
formatai coninutul documentelor Web cu ajutorul instrumentelor HTML;
alctuii i s organizai liste cu ajutorul instrumentelor HTML;
creai i s utilizai n interiorul documentelor HTML referine interne i externe;
inserai n documente HTML imagini;
creai i s editai tabelele n documente HTML;
utilizai tabelele pentru amplasarea n pagin a elementelor HTML.
12.1. Structura general a unui document HTML
12.1.1. Despre documente HTML
Am menionat deja c cele mai utilizate documente Web snt documentele HTML. Cele mai apreciate
caracteristici ale formatului HTML snt: independena fa de platform (acelai document HTML este afiat
asemntor de calculatoare diferite), referinele, formatarea structurat. Referinele simplific esenial
navigarea printr-un document mare i/sau prin mulimea documentelor unui site. n calitate de referin poate
servi un cuvnt, o fraz, o imagine sau orice alt element al paginii Web.
Prima versiune HTML a fost lansat n 1989 (proiectat de Tim Berners-Lee
). Chiar dac unele programe

de explorare nu recunosc toate cuvintele-cheie ale limbajului HTML, acesta rmne a fi unul dintre cele mai
utilizate i mai moderne limbaje pentru elaborarea paginilor Web. Fiierele HTML snt fiiere n format
ASCII, deci pot fi create cu orice editor de texte. Fr a exagera, menionm c proiectarea unei pagini Web
simple se realizeaz (dup cum vei vedea ulterior) foarte uor.
Prin element al unui document HTML vom nelege orice component a structurii documentului: tabel,
paragraf, list, titlu, buton, caset de text, imagine etc.
Pentru a marca elementele unui fiier HTML, se utilizeaz diferite cuvinte-cheie, numite etichete sau marcaje
(tags). Orice etichet se ncadreaz ntre simbolurile < i >.
Etichetele, de regul, snt pereche pentru ncadrarea unui element. Eticheta de sfrit arat ca i cea de
nceput, mai avnd n faa ei caracterul / (slash). O etichet de nceput poate avea unul sau mai multe atribute
care se pot specifica n forma urmtoare:
<Etichet a
1
=v
1
, a
2
=v
2
,...a
i
=v
i
>
, unde
v
i este valoarea atributului
a
i.
De reinut c limbajul HTML nu face diferen dintre literele mari i mici.
12.1.2. Structura general a unui document HTML
Un document HTML are, de regul, urmtoarea structur:
<HTML>

nceputul documentului

<HEAD>
<TITLE>
Titlul documentului
</TITLE>
</HEAD>

Seciunea de antet a documentului

<BODY>
Coninutul documentului
</BODY>

Seciunea de text a documentului

</HTML>

Sfritul documentului

Textul scris ntre marcajele
<TITLE>
i
</TITLE>
este afiat pe bara de titlu a ferestrei programului de
explorare.
Etichetele
<BODY>
i
</BODY>
cuprind coninutul propriu-zis al documentului HTML, care va fi afiat n
fereastra programului de explorare i va fi vzut de utilizator.
Menionm cteva dintre atributele etichetei
<BODY>
:
bgcolor = #n
1
n
2
n
3
n
4
n
5
n
6
, unde snt numere hexazecimale care determin intensitatea culorilor rou,
verde, respectiv, albastru ale fundalului paginii. Culoarea poate fi precizat i prin numele ei (red, blue,
black, yellow, green, cyan, purple, white, gray etc.);
text = #n
1
n
2
n
3
n
4
n
5
n
6
specific culoarea textului;
background = URL, unde URL este adresa i numele fiierului grafic a crui imagine va fi utilizat
ca fundal al documentului;
leftmargin = n, unde n este numr natural, stabilete distana n pixeli dintre marginea stng a ferestrei
programului de explorare i marginea stng a coninutului paginii;
topmargin = n, unde n este numr natural, stabilete distana n pixeli dintre marginea de sus a ferestrei
programului de explorare i marginea de sus a coninutului paginii.
Exemplu: Urmtorul fiier HTML interpretat de un program de explorare va afia o pagin Web cu fundalul
de culoare aqua i textul de culoarea #FF2233.
<HTML>
<Head> <Title> Exemplu </Title> </Head>
<Body leftmargin=140 topmargin=200 bgcolor=aqua text=#FF2233>
Salut! Acesta este un document .html
</Body>
</HTML>
ntrebri i exerciii
O
Explicai semnificaia referinelor ntr-un document HTML.
O
Ce editor de texte poate fi folosit pentru crearea unui fiier HTML?
O
Ce nelegei prin element al unui document HTML?
O
Ce semnificaie au etichetele ntr-un document HTML?
O
Ce simboluri se utilizeaz pentru a pune n eviden o etichet?
O
Care este deosebirea dintre eticheta de nceput i cea de sfrit?
O
Care este structura general a unui document HTML?
O
Cum se utilizeaz etichetele <TITLE> i </TITLE> ?
O
La ce folosesc etichetele <BODY> i </BODY> i care snt atributele lor?
G Creai o pagin Web cu fundalul galben i textul verde, coninutul paginii fiind afiat la 110 pixeli de la marginea
stng i 105 pixeli de la marginea de sus ale ferestrei programului de explorare.
Creai o pagin Web cu fundalul albastru i textul alb, coninutul paginii fiind afiat la 10 pixeli de la marginea
stng i 15 pixeli de la marginea de sus ale ferestrei programului de explorare.
Ce va afia documentul HTML cu urmtorul coninut?
<HTML>
<Head> Ce este un fisier .html? <Title> PROBLEMA </Title> </Head>
<Body>
Care este structura unui document .html?
</Body>
</HTML>
Creai o pagin Web care va afia pe bara de titlu a ferestrei programului de explorare textul PRIMUL
PARAGRAF HTML i va avea n calitate de fundal o imagine.
12.2. Formatarea textului
n HTML se utilizeaz 6 niveluri de titlu, care pot fi specificate cu ajutorul etichetelor <Hn> i </Hn>,
unde n poate lua valori de la 1 la 6. Fiecare dintre aceste perechi de etichete stabilesc un anumit nivel de titlu.
Nivelul 1 este cel mai proeminent, iar nivelului 6 i corespund cele mai mici i mai subiri caractere.
Etichetele de titlu pot avea atributul align = tip, unde tip este unul dintre cuvintele center, left, right,
pentru stabilirea modului de aliniere a titlului.
Spre deosebire de un editor de texte obinuit, HTML nu ine cont de lungimea textului, de returul de car
(Enter) i de numrul consecutiv de spaii. Acestea din urm vor fi afiate ca un singur spaiu. Programul de
explorare afieaz din rnd nou un text dac acesta este precedat de unul din marcajele <P>, <BR>, <PRE>,
<DIV> sau <CENTER>.
a) Astfel, textul cuprins ntre etichetele <P> i </P> se consider paragraf. Eticheta <P>, de asemenea,
accept atributul align.
b) Eticheta <BR> realizeaz trecerea la o linie nou n paragraful curent.
c) Textul ncadrat ntre etichetele <PRE>, </PRE> este afiat exact aa cum este scris, deci este un text
preformatat.
d) Deseori un bloc de text se formateaz cu ajutorul etichetelor <DIV>, </DIV>. Eticheta <DIV> poate
avea atributele align i nowrap (care interzice ntreruperea rndurilor de ctre programul de explorare).
Un bloc <DIV>...</DIV> poate include alte subblocuri. n acest caz, alinierea precizat de atributul
align al blocului are efect asupra tuturor subblocurilor incluse n blocul <DIV>.
e) Elementele cuprinse ntre etichetele <CENTER> i </CENTER> snt automat centrate.
Blocul de text cuprins ntre etichetele <NOBR> i </NOBR> va fi afiat ntr-un rnd. Dac fereastra
programului de explorare va fi micorat de utilizator, se poate ntmpla ca textul s fie trunchiat.
Liniile orizontale snt folosite pentru divizarea unei pagini n seciuni logice. n funcie de necesitate,
eticheta <HR>, care insereaz o linie orizontal, poate include cteva atribute: align (stabilete alinierea
liniei); size (specific nlimea liniei n pixeli); width (specific limea liniei n pixeli sau n procente fa de
limea ferestrei programului de explorare); color (specific culoarea liniei); noshade (specific o linie fr
nicio evideniere).
Fontul unui text poate fi precizat utiliznd marcajele <FONT> i </FONT>. El poate fi caracterizat de
urmtoarele atribute: face (precizeaz familia de caractere i poate avea ca valoare una sau mai multe constante
delimitate prin virgule, cum ar fi arial, serif, cursive, monospace, fantasy etc.); color (precizeaz culoarea
fontului); size (specific mrimea caracterelor i poate avea ca valoare constantele 1, 2, ..., 7 sau +1, +2, ...
(mrind astfel dimensiunea caracterelor fa de dimensiunea curent), sau 1, 2, ... (micornd astfel
dimensiunile caracterelor fa de dimensiunea curent));weight (determin grosimea caracterelor, avnd valori
posibile 100, 200, ..., 900).
Exemplul 1 (fig. 12.1):
<HTML>
<Head>
<Title> Text preformatat </Title>
<H1 align=center> Chisinau</H1>
</Head>
<Body leftmargin=20 topmargin=20 bgcolor=lightgreen text=blue>
<HR size=5 width=70% color=black>
<Font color=purple>
<H2>Sectoarele Chisinaului:</H2>
<H3>
<Pre>
Centru
Buiucani
Riscani
Botanica
Ciocana
</Pre>
</H3>
</Font>
</Body>
</HTML>
Pentru a pune n eviden un fragment de text, se utilizeaz stilurile. Acestea se mpart n dou categorii:
a) stilurile fizice, care stabilesc nfiarea exact a textului;
b) stilurile logice, care marcheaz textul n funcie de semnificaia lui.
Stilurile fizice afieaz acelai text la fel n orice program de navigare. Pentru stabilirea stilului fizic se
utilizeaz etichetele:
<B>
,
</B>
text cu caractere ngroate (bold);
<I>
,
</I>
text cu caractere nclinate (italic);
<U>
,
</U>
text cu caractere subliniate;
<TT>
,
</TT>
text cu caractere monospaiate;
<BIG>
,
</BIG>
text cu caractere mai mari cu o unitate dect cele curente;
<SMALL>
,
</SMALL>
text cu caractere mai mici cu o unitate dect cele curente;
<SUB>
,
</SUB>
text cu caractere aliniate ca indice;
<SUP>
,
</SUP>
text cu caractere aliniate ca exponent;
<S>
,
</S>
text cu caractere tiate de o linie.
Etichetele pentru stilurile fizice pot fi imbricate.
<HTML>
<Head>
<Title> Exemplul 2 </Title>
<H2 align=center> Stiluri HTML</H2>
</Head>
<Body>
<H3>Stiluri fizice:</H3>
<Pre>
Text obisnuit
<B>Text cu caractere ingrosate</B>
<I>Text cu caractere inclinate</I>
<U>Text cu caractere subliniate</U>
<TT>Text cu caractere monospatiate</TT>
<big>Text cu caractere marite</big>
<small>Text cu caractere micsorate</small>
Y = X<sup>2</sup>
M = (m<sub>1</sub>, m<sub>2</sub>)
<s>Text taiat</s>
<B><I>Text cu caractere ingrosate si inclinate</I></B>
</Pre>
</Body>
</HTML>
Stilurile logice depind de modul de configurare a programului de navigare i in cont de rolul textului n
cadrul paginii Web. Pentru ele se utilizeaz urmtoarele etichete:
<EM>
,
</EM>
text evideniat (de regul, italic);
<STRONG>
,
</STRONG>
text important (de regul, bold);
<KBD>
,
</KBD>
text cules de la tastatur (de regul, font cu grosime fix);
<CODE>
,
</CODE>
text de program pentru calculator (de regul, font cu grosime fix);
<DFN>
,
</DFN>
text-definiie (de regul, italic);
<VAR>
,
</VAR>
identificator de variabil;
<ADDRESS>
,
</ADDRESS>
text-adres;
<CITE>
,
</CITE>
text-citat.
Una dintre modalitile de includere a semnelor diacritice romne ntr-un document HTML este
codificarea direct a lor prin &-consecutiviti (escape-consecutiviti). Unele programe de explorare recunosc
o &-consecutivitate dac sfritul ei este marcat cu simbolul ;.
Litera

Codul

&#258

&#259

&Acirc

&acirc

&Icirc

&icirc

&#350

&#351

&#354

&#355

De asemenea, &-consecutivitile se folosesc pentru reprezentarea diferitor simboluri speciale:
Simbolul

&

<

>

spaiu

Codul

&amp

&lt

&gt

&quot

&reg

&copy

&nbsp

&sect

Simbolul

|

1/2

1/4

3/4

Codul

&plusmn

&times

&brvbar

&frac12

&frac14

&frac34

&deg

<HTML>
<Head><Title> Exemplul 3 </Title><Body>
<H4>
Acest capitol v&#259 &icircnva&#355&#259 s&#259 crea&#355i pagini Web
</H4>
</Body>
</HTML>
ntrebri i exerciii
O
Care etichet indic un nivel de titlu?
O
Cte niveluri de titlu se pot utiliza n HTML?
O
Care snt atributele etichetei de titlu?
O
Care etichete se utilizeaz pentru a delimita un paragraf?
O
Ce etichete se folosesc pentru trecerea n rnd nou?
O
Cum se insereaz o linie orizontal?
O
Ce etichete se folosesc pentru specificarea fontului?
O
Numii atributele etichetei <FONT>.
O
Ce snt stilurile i la ce folosesc?
G
Care este deosebirea dintre stilurile logice i cele fizice?
Numii etichetele pentru punerea n eviden a stilurilor: a) logice; b) fizice.
Creai o pagin Web pentru un magazin, astfel nct denumirea magazinului s apar ca un titlu de nivelul 1
avnd culoare neagr. Mai jos se vor afia produsele unui stoc. Denumirea stocului va avea nivelul 3, iar
produsele lui vor fi prezentate ca un text preformatat. Denumirea magazinului va fi delimitat de stoc printr-o
o linie orizontal de grosimea 4 i de culoare albastr, aliniat la stnga i ocupnd 80% din limea ferestrei
programului de explorare.
Creai o pagin Web care va afia dou teoreme de congruen a triunghiurilor. Cuvntul Teorema va fi scris ca
un titlu de nivelul 3, avnd culoarea neagr, caractere ngroate i subliniate. Cele dou enunuri vor fi
nclinate i delimitate unul de altul de o linie roie orizontal de grosimea 2, aliniat la centru, avnd lungimea
70% din limea ferestrei programului de explorare.
Creai o pagin Web care va afia n centrul paginii formula:
a) (a + b)
2
= a
2
+ 2ab + b
2
;
b) (a
1
+ a
2
+ a
3
)
2
= a
1
2
+ a
2
2
+ a
3
2
+ 2a
1
a
2
+ 2 a
1
a
3
+ 2 a
2
a
3
;
c) | a + b| < |a| + |b|, pentru orice numere nenule a i b.
Creai un document HTML care va afia urmtoarea pagin Web (fig. 12.4 a, b):
Creai o pagin care va afia o poezie cu titlul de culoare verde, centrat, pe fundal galben, cu nivelul de titlu
3, desprit de restul textului cu o linie de grosimea 5 i lungimea 50% din limea ferestrei programului de
explorare. Caracterele textului vor fi ngroate i nclinate.
12.3. Liste
Pentru organizarea structurat a informaiei unui document HTML se pot folosi listele. Deosebim:
a) liste neordonate;
b) liste ordonate;
c) liste de definiii.
Listele neordonatese utilizeaz pentru a indica o succesiune fr o subordonare ierarhic.
Pentru a specifica nceputul i sfrtul unei astfel de liste, se utilizeaz etichetele <UL> i </UL>
(unordered list list neordonat).
Orice element al listei este precedat de eticheta <LI> (list item element al listei).
Fiecrei dintre etichetele <UL>, <LI> i se poate ataa atributul type, care poate lua una dintre urmtoarele
trei valori: Circle, Square, Disc. Acest atribut specific marcajul care precede fiecare element al listei.
Listele ordonate(se mai numesc liste numerotate) se ncadreaz ntre etichetele <OL> i </OL> (ordered
list list ordonat).
Ca i n cazul listei neordonate, orice element al listei ordonate este precedat de eticheta <LI>. Atributul
type al etichetei <OL> poate lua una din valorile: A, a, I, i, 1.
Dac atributul type nu este specificat, elementele listei vor fi numerotate cu cifre arabe.
Listele de definiii se utilizeaz, de regul, pentru organizarea glosarelor. Termenii unui glosar snt listai
n ordine alfabetic, fiecare fiind urmat de definiia lui.
Listele de definiii se ncadreaz ntre etichetele <DL> i </DL> (definition list list de definiii).
Fiecare termen al listei este precedat de eticheta <DT> (definition term termen definit), iar definiia
(descrierea) lui de eticheta <DD> (definition description descrierea definiiei).
Observaii:
1. Listele pot fi imbricate.
2. n interiorul unei liste snt permise utilizarea etichetelor <P> i <BR> i a elementelor de formatare a
textului.
3. O list ordonat poate fi ntrerupt pentru un text. n acest caz se folosesc dou seturi de etichete <OL>:
una pentru prima parte a listei (pn la textul inserat) i alta pentru partea a doua (dup text). n acest
caz, etichetei <OL> din partea a doua a listei i se ataeaz atributul start cu valoarea ntreag, care
indic nceputul numerotrii.
<HTML>
<Head> <Title> Liste neordonate</Title> </Head>
<Body>
<H4> Unele domenii ale matematicii</H4>
<UL>
<LI> Algebra
<LI> Geometria
<LI> Teoria ecuatiilor diferentiale
<LI> Analiza matematica
</UL>
<H4> Unele domenii ale informaticii</H4>
<UL TYPE=square>
<LI> Teoria algoritmilor
<LI> Programarea Web
<LI> Teoria bazelor de date
<LI> Criptografia
</UL>
</Body>
</HTML>
<HTML>
<Head> <Title> Liste ordonate</Title> </Head>
<Body>
<H4> Unele discipline studiate in clasa a X-a </H4>
<OL>
<LI> Limba romana
<LI> Matematica
<LI> Informatica
</OL>
<H4> Unele discipline studiate
in clasa a XII-a</H4>
<OL TYPE=A>
<LI> Informatica
<LI> Biologia
<LI> Matematica
</OL>
</Body>
</HTML>
<HTML>
<Head> <Title> Lista de definitii</Title> </Head>
<Body>
<H4> Citeva notiuni din informatica </H4>
<DL>
<DT> Constanta <DD> - marime a carei valoare nu se poate
modifica pe parcursul executiei algoritmului
<DT> Variabila <DD> - marime a carei valoare se poate modifica pe
parcursul executiei algoritmului
<DT> Identificator <DD> - secventa de caractere care incepe (de regula) cu
o litera, ce poate fi urmata de nici una sau de mai multe litere sau cifre,
utilizata pentru a denumi constante, variabile, tipuri, subprograme.
</DL>
</Body>
</HTML>
ntrebri i exerciii
O
Cu ce scop se folosesc listele?
O
Ce tipuri de liste cunoatei?
O
Numii etichetele utilizate pentru fiecare tip de list.
O
Cum se specific un element al unei liste?
O
Care snt atributele acestor etichete i ce valori pot primi acestea?
O
Creai o pagin Web care va afia titlul Disciplinele preferate pe fundal bleu, de nivelul 4, dup care va urma o
list neordonat cu disciplinele respective. n calitate de marcaj se va folosi ptratul.
O
Creai o pagin Web care va afia titlul Disciplinele studiate n primul semestru al clasei a 12-a pe fundal
bleu, de nivelul 3, dup care va urma o list neordonat cu aceste discipline. n calitate de marcaj se va
folosi discul. Dup list vor fi 2 rnduri goale, apoi va aprea o alt list neordonat cu disciplinele la care
urmeaz s susinei examenul de bacalaureat.
O
Creai o pagin Web care va afia titlul Lista elevilor clasei a 12-a pe fundal de culoare aqua, de nivelul 5,
aliniat la centru, dup care va urma o list neordonat cu numele elevilor clasei voastre. Dup list vor fi 2
rnduri goale i va aprea alt list neordonat cu numele elevilor care au absolvit clasa a 11-a cu media
general mai mare dect 8.
O
Creai o pagin Web care va afia titlul CUPRINS de nivelul 3, dup care vor urma capitolele unei cri i
temele cuprinse n aceste capitole. Folosii liste ordonate i liste imbricate.
G
Creai o pagin Web care va afia 2 liste ordonate: prima cu titlul Produse alimentare de nivelul 2, n care
elementele vor fi numerotate, iar cealalt cu titlul Produse industriale de nivelul 3, n care elementele vor fi
marcate cu litere.
Creai o pagin Web care va afia o list ordonat a unor produse culinare. Lista va fi ntrerupt de urmtorul
text cursiv: Aceste produse culinare snt pe placul meu, acum urmeaz produsele culinare care nu-mi plac:.
Titlul listei va avea nivelul 4 i culoarea albastr.
Creai un document HTML care va afia pagina Web din figura 12.8.
Creai o pagin Web care va afia definiiile a 5 noiuni geometrice precedate de titlul Noiuni geometrice de
nivelul 3 avnd culoare gri, aliniat la dreapta i desprit de noiuni printr-o linie orizontal neagr cu nlimea
3, aliniat la centru.
12.4. Referine
n paragraful 12.1 am menionat c referinele (se mai numesc linkuri, legturi, hiperlegturi) reprezint,
probabil, cea mai important caracteristic a limbajului HTML. Prin intermediul unei referine se poate
ajunge rapid ctre alt secven a documentului curent sau ctre alt document (pe acelai sau pe alt server).
Referinele snt zone active ale paginii Web, n sensul c la executarea unui clic pe ele, programul de explorare
va actualiza pagina.
Pentru a pune n eviden o referin, se folosesc etichetele <A> (de la ancor) i </A>. Atributul href al
etichetei <A> este obligatoriu. Valoarea acestui atribut este numele fiierului HTML cu care se face legtura.
Numele acestui fiier se scrie ntre simbolurile i . Textul sau imaginea cuprins ntre etichetele <A> i
</A> devine zon activ.
Astfel, o referin se declar n modul urmtor:
<A href=URL> text sau imagine</A>,
unde URL (Uniform Resourse Locator identificator unic al resursei) este numele fiierului-destinaie.
Observaie: n acest paragraf vom examina doar referine, n care zona activ este un text.
n general o referin poate:
lega documentul curent cu un document aflat n acelai director;
lega documentul curent cu un document aflat pe acelai disc local;
lega documentul curent cu un alt site;
lega documentul curent cu o alt secven a aceluiai document;
lega documentul curent cu o secven a altui document:
lansa la execuie o aplicaie de expediere a mesajelor electronice;
lega documentul curent cu un fiier de format arbitrar cu scopul crerii unei copii pe disc a acestui
fiier.
a) Dac documentul referit se afl n acelai director, atunci URL-ul este chiar numele acestui document.
b) Dac documentul referit se afl pe acelai disc local, dar ntr-un alt director, atunci se utilizeaz
adresarea relativ.
c) Dac documentul referit reprezint un alt site, atunci se indic adresa acestui site, scris ntre
simbolurile i .
Prezentm coninutul fiierului D:\HTML\exemplul4.html, care conine legturi ctre:
fiierul D:\HTML\exemplul1.html (fiierul referit se afl n acelai director);
fiierul D:\HTML\EXEMPLE\exemplul2.html
(fiierul referit se afl n subdirectorul EXEMPLE al directorului curent);
fiierul D:\exemplul3.html (fiierul referit se afl pe discul D:, deci pe un nivel ierarhic imediat
superior);
site-ul Universitii de Stat din Tiraspol: http://www.ust.md.
<HTML>
<Head> <Title> Referinte</Title> </Head>
<Body>
<H4> <a href = exemplul1.html> Treci la exemplul 1 </a>
<p> <a href = EXEMPLE\exemplul2.html> Treci la exemplul 2 </a> </p>
<p> <a href = ..\exemplul3.html> Treci la exemplul 3 </a> </p>
<p> <a href = http:\\www.ust.md> Universitatea de Stat din
Tiraspol </a> </p>
</H4>
</Body>
</HTML>
d) O referin ctre o alt secven a aceluiai document se numete ancor cu nume. n acest caz URL-ul
este numele atribuit secvenei, precedat de simbolul #. Pentru a atribui unei secvene un nume, se va
scrie o ancor de genul:
<A name = numele secvenei> </A>, unde numele secvenei se scrie ntre simbolurile i .
e) URL-ul ctre o secven a altui document este format din numele fiierului i numele secvenei, ultimul
fiind precedat de simbolul #.
De exemplu, URL-ul secvenei cu numele capitolul2 al fiierului exemplul1.html din acelai catalog este
exemplul1.html#capitolul2.

<HTML>
<Head> <Title> Referinte</Title> </Head>
<Body>
<H2>
<a name=inceput></a>
<P>A</P> <P>fost</P> <P>odata</P> <P>ca-n</P> <P>povesti</P>
<P>A</P> <P>fost</P> <P>ca</P> <P>niciodata</P>
<P>Din</P> <P>rude</P> <P>mari</P> <P>imparatesti</P>
<P>O</P> <P>prea</P> <P>frumoasa</P> <P>fata</P>
<a href=#inceput> Treci la inceput </a>
</H2>
</Body>
</HTML>
f) Pentru lansarea la execuie a unei aplicaii de expediere a mesajelor electronice (se presupune c aceast
aplicaie este instalat pe calculatorul utilizatorului) se va scrie o ancor de forma:
<A href = mailto: adresa e-mail valid>.
g) Pentru a crea o referin ctre un fiier de format arbitrar cu scopul crerii unei copii pe disc a acestui
fiier sau cu scopul lansrii la execuie a aplicaiei care va interpreta astfel de fiiere, se va utiliza o
ancor de forma:
<A href=URL> text,
unde URL este numele fiierului, iat text este zona activ.
Observaie: Etichetei <A> i se poate ataa atributul title, care se folosete pentru a furniza informaii
suplimentare despre semnificaia legturii, atunci cnd mouse-ul este plasat asupra ei. Valoarea atributului
title se scrie ntre simbolurile i .
<HTML>
<Head> <Title> Referinte</Title>
<H2>Exemplul 3</H2>
</Head>
<Body>
<a href=mailto: delta_mi@mail.md> Cutia postala a revistei Delta </a>
<p><a href=exemplul6.doc title=Salvarea pe disc a fisierului
exemplul6.doc > Salveaza exemplul.doc </p>
</Body>
</HTML>
n urma executrii unui clic pe referina Salveaza exemplul6.doc, va aprea fereastra din figura
12.12, care ne permite s crem pe disc o copie a fiierului exemplul6.doc sau s deschidem acest fiier n
aplicaia Microsoft Word.
ntrebri i exerciii
O Ce semnificaie au referinele pentru o pagin Web?
O Care snt etichetele folosite pentru declararea unei referine?
O Numii atributul obligatoriu pentru eticheta <A>. Ce valoare poate avea acest atribut?
O Ce este o zon activ?
O Care este forma general de declarare a unei referine?
O Care elemente ale unei pagini Web pot fi referine?
O Unde se poate afla documentul referit?
O Ce este o ancor cu nume?
O Cum se atribuie nume unei secvene de document HTML?
G Explicai n ce caz simbolul # se folosete la scrierea URL-ului.
Cum se creeaz o legtur ctre o secven din acelai document?
Din ce este format URL-ul unei secvene din alt document?
Cum dintr-un document HTML se poate lansa la execuie o aplicaie de expediere a mesajelor electronice?
Creai o pagin Web care va afia o list cu disciplinele studiate. Fiecare element al listei va fi o referin
ctre un fiier (aflat n acelai director ca i pagina Web) cu informaia despre disciplina respectiv.
Creai o pagin Web care va afia o list ordonat cu denumirea unor universiti din Republica Moldova.
Fiecare element al listei va fi o referin ctre site-ul universitii respective.
Creai o pagin Web care va afia o list de licee. Fiecare element al listei va fi o referin ctre fiierul (site-
ul) liceului respectiv. Pagina creat se va afla n directorul LICEE, iar fiecare fiier referit n subdirectorul cu
numele liceului. Toate subdirectoarele se vor afla n directorul LICEE.
Examinai desenul exemplului 1. Care este URL-ul referinei ctre fiierul:
a) exemplul1.html dac referina se afl n fiierul exemplul3.html;
b) exemplul2.html dac referina se afl n fiierul exemplul1.html;
c) exemplul4.html dac referina se afl n fiierul exemplul2.html;
d) exemplul3.html dac referina se afl n fiierul exemplul2.html?
Creai o pagin Web care va afia o list cu cteva titluri de cri. Fiecare titlu va fi o referin ctre o scurt
prezentare n acelai document HTML a crii cu acest titlu.
Examinai desenul. Care este URL-ul referinei ctre fiierul:
a) f1.html dac referina se afl n f4.html;
b) f2.html dac referina se afl n f3.html;
c) f4.html dac referina se afl n f2.html;
d) f4.html dac referina se afl n f3.html?
Examinai desenul. n ce director se afl documentul HTML care conine referina dac URL-ul ei este:
a) Mapa4\fisier4.html;
b) Mapa1\Mapa2\Mapa4\fisier4.html;
c) ..\ Mapa1\Mapa2\Mapa4\fisier4.html;
d) ..\ ..\ Mapa3\fisier3.html?
Creai dou pagini Web, astfel nct prima va conine cteva referine ctre diferite secvene ale paginii a
doua, iar pagina a doua cteva referine ctre diferite secvene ale primei pagini.
Creai o pagin Web care va afia o list cu referine ctre fiiere de diferite tipuri pentru a fi deschise spre
vizionare sau stocare.
12.5. Imagini
n afar de faptul c imaginile furnizeaz informaii, ele pot conferi unei paginii Web atractivitate. Totui
utilizarea lor ntr-un document HTML se va face raional, deoarece fiecare imagine consum timp pentru
descrcarea, decodificarea i afiarea ei.
Fiierele-imagini au diferite formate, cele mai utilizate n Web design fiind:
GIF (Grafics Interchange Format) fiiere cu extensia .gif;
JPEG (Join Photographic Expert Group) fiiere cu extensia .jpeg sau .jpg;
BMP (BitMap) fiiere cu extensia .bmp.
Pentru a insera o imagine inline (adic lng text), se utilizeaz eticheta <IMG>, cu atributul obligator
SRC, a crui valoare este adresa URL a imaginii:
<IMG SRC = URL>
Sintaxa pentru URL este identic cu cea utilizat pentru referine (vezi paragraful 12.4).
n afar de atributul SRC, eticheta <IMG> poate avea urmtoarele atribute:
ALIGN, utilizat pentru alinierea imaginii i care are una din valorile top (aliniere deasupra partea de
sus a imaginii se aliniaz cu partea de sus a textului ce precede imaginea), bottom (aliniere la baz partea de
jos a imaginii se aliniaz cu linia de baz a textului), middle (aliniere la mijloc mijlocul imaginii se aliniaz
cu linia de baz a textului ce precede imaginea), left (aliniere la stnga textul i celelalte elemente snt
plasate n dreapta), right (aliniere la dreapta textul i celelalte elemente snt plasate n stnga);
ALT, utilizat pentru afiarea unui text explicativ n locul imaginii (n cazul n care programul de
explorare nu ncarc imaginea opiune stabilit de utilizator sau o alt cauz) i care are ca valoare nsui
textul explicativ (scris ntre "i");
WIDTH i HEIGHT, folosite pentru specificarea mrimii n pixeli a imaginii;
BORDER, folosit pentru crearea n jurul imaginii a unui chenar de grosime (n pixeli) egal cu valoarea
atributului;
HSPACE i VSPACE, utilizate pentru precizarea distanei n pixeli pe orizontal, respectiv pe vertical,
dintre imagine i restul elementelor din pagin.
<HTML>
<Head>
<Title>Exemplul 1. Imagine</Title>
</Head>
<Body>
<H3 align=center>Universitatea de Stat din Tiraspol</H3>
<P>
Universitatea de Stat din Tiraspol (UST) este prima institutie de
invatamint superior din Republica Moldova, fondata la 1 octombrie 1930.

<IMG SRC=ust.jpg align=right hspace=10 vspace=10>

Din anul 1992 UST se afla in Chisinau. UST a pregatit peste 60 000 de
specialisti cu studii superioare. Multi dintre ei au devenit personalitati
marcante in diverse domenii - invatamint preuniversitar si universitar,
savanti in pedagogia si economia nationala. Majoritatea cadrelor de
instruire detin titluri stiintifice si didactice. UST colaboreaza cu institutii
din tara si de peste hotare - Romania, Rusia, Ucraina, SUA, Germania,
Italia, Portugalia s.a.

</Body>
</HTML>
Imaginile pot fi utilizate i n calitate de referine.
Urmtoarea pagin Web afieaz 4 imagini-referin. La executarea unui clic pe una dintre referine se va
afia imaginea corespunztoare avnd dimensiuni reale.
Aceast tehnic este deseori folosit la crearea aa-numitelor galerii-foto (referinele pot fi fiiere de
dimensiuni mai mici dect fiierele-imagini referite). Fiierele-imagini se afl n subdirectorul DESENE al
directorului curent.
<HTML>
<head> <Title>Imagini</Title> </head>
<Body>
<A HREF=Desene\desen1.jpg><img src=Desene\desen1.jpg width=
=50 height=50></A>
=50 height=50></A>
=50 height=50></A>
<A HREF=Desene\desen4.jpg><img src=Desene\desen4.jpg width=5
=0 height=50></A>
</Body>
</HTML>
ntrebri i exerciii
O
Care snt formatele fiierelor-imagini acceptate de programele de explorare Web?
O
Ce etichet se utilizeaz pentru inserarea unei imagini ntr-un document HTML? Care este atributul
obligatoriu al acestei etichete?
O
Explicai sensul expresiei imaginea este inserat inline.
O
Ce atribute neobligatorii poate avea eticheta pentru inserarea imaginilor ntr-un document HTML i care snt
valorile acestor atribute?
O
Cum poate fi creat o referin-imagine?
O
Creai o pagin Web care va afia un CV cu fotografia autorului acestui CV, aliniat la centrul paginii.
O
Creai o pagin Web care va afia cteva imagini-referine cu dimensiunile 5 cm x 5 cm. La executarea unui
clic pe fiecare imagine, programul de explorare va afia aceast imagine cu dimensiunile 15 cm x 15 cm.
O
Creai o pagin Web care va afia un text despre localitatea natal cu titlul de nivelul 5 avnd culoarea
neagr i fundalul gri. O imagine a localitii va aprea n chenar i va fi aliniat la dreapta textului.
O
Creai o pagin Web care va afia graficul unei funcii.
Indicaie: Acest grafic poate fi construit cu programul Microsoft Excel.
G
Creai o pagin Web care va afia o organigram.
Creai un document HTML care va afia urmtoarea pagin Web (fig. 12.15 a, b) (se pot folosi alte imagini):
12.6. Tabele
n cele mai dese cazuri tabelele se utilizeaz pentru organizarea structurat a datelor. De asemenea, aa
cum fiecare celul a tabelului poate avea propriile culori, stiluri, efecte pentru text i fundal, tabelele se
folosesc i pentru soluii de design.
Un tabel, de regul, are:
a) titlu pentru specificarea numelui tabelului;
b) rnduri i coloane;
c) cap de tabel (table header) pentru descrierea coninutului coloanelor sau al rndurilor;
d) celule de date, care formeaz rndurile i coloanele tabelului.
Etichete pentru definirea unui tabel ntr-un document .html
Etichete

Descrierea etichetelor

<TABLE>
</TABLE>
Definesc un tabel. Eticheta <TABLE> poate avea atributele:
BORDER, care adaug un chenar tabelului i a crui valoare ntreag
pozitiv este grosimea n pixeli a chenarului (valoarea 1 este prestabilit, iar
valoarea 0 semnific absena chenarului);
ALIGN, care stabilete modul de aliniere a tabelului n document i poate
avea una din valorile left, right, center;
BGCOLOR, care specific culoarea de fond pentru tot tabelul;
CELLSPACING, care stabilete distana n pixeli dintre dou celule
vecine ale tabelului (valoarea prestabilit este 2);
CELLPADDING, care stabilete distana n pixeli dintre marginea celulei
i coninutul ei (valoarea prestabilit este 1);
WIDTH i HEIGHT, care specific limea i nlimea tabelului (valori
ale atributului pot fi numere ntregi pozitive (numr de pixeli) sau numere
ntregi pozitive mai mici dect 101 i urmate de simbolul % (specificnd
astfel fraciuni din limea i nlimea paginii)).
<CAPTION>
</CAPTION>
Definesc titlul tabelului i pot fi plasate ntre etichetele <TABLE> i
</TABLE>, dar nu n interiorul etichetelor care definesc celulele sau
rndurile tabelului.
Eticheta <CAPTION> poate avea atributul ALIGN, care stabilete poziia
titlului fa de tabel i care va avea una din valorile bottom, top, left, right.
<TR>
</TR>
Specific un rnd n tabel. Eticheta <TR> poate avea atributele:
ALIGN pentru alinierea orizontal (cu una din valorile left, center, right);
VALIGN pentru alinierea vertical (cu una din valorile top, middle, bottom).
<TH>
</TH>
Definesc o celul-antet. n mod prestabilit, textul unei astfel de celule este
centrat i ngroat. Eticheta <TH> poate avea atributele:
WIDTH i HEIGHT pentru stabilirea limii i nlimii celulei;
ALIGN i VALIGN;
ROWSPAN, care unific celula cu cteva celule de desubtul ei (valoarea
atributului este numrul total de celule care se unific);
COLSPAN, care unific celula cu cteva celule din dreapta ei (valoarea
atributului este numrul total de celule care se unific);
NOWRAP, care interzice ntreruperea liniei de text din celul (deci
coloana care conine celula poate deveni orict de mare) i care se scrie fr
valori;
BGCOLOR, care specific culoarea de fond pentru celul (culoarea
textului celulei poate fi stabilit cu ajutorul atributului Color al etichetei
<Font>).
<TD>
</TD>
Definesc o celul de date obinuit. Eticheta <TD> poate avea oricare
dintre atributele etichetei <TH>.

Dac o celul a tabelului este vid, atunci n mod normal ea este afiat fr chenar. Pentru a evita acest
efect, n locul coninutului celulei se va scrie textul sau <br>.
Exemplul (fig. 12.16):
<HTML>
<Head> <Title>Exemplul 1. Tabele</Title> </Head>
<Body>
<Table border=2 width=90% height=80% align=center bgcolor=lightcyan>
<Caption align=left><Font color=Red Size=6> Orarul lectiilor </font>
</Caption>
<Tr><Th Colspan=2>Luni<Th>Marti<Th>Miercuri<Th>Joi<Th>Vineri </Tr>
<Tr align=center><Td>1<Td>Romana<Td>Chimia<Td>Fizica
<Td>Istoria<Td>Algebra </Tr>
<Tr align=center><Td>2<Td>Engleza<Td>Fizica<Td>Informatica
<Td>Rusa<Td>Biologia </Tr>
<Tr align=center><Td>3<Td>Franceza<Td>Algebra<Td>Geometria
<Td>Muzica<Td> Munca </Tr>
</Table>
</Body>
</HTML>
ntrebri i exerciii
O
Pentru ce snt utilizate tabelele?
O
Numii atributele etichetei <TABLE> i valorile posibile ale acestor atribute.
O
Care snt atributele etichetei <CAPTION> i valorile posibile ale acestor atribute?
O
Cum se specific un rnd de tabel?
O
Care etichete definesc o celul antet?
O
Care snt atributele acestor etichete i valorile lor posibile?
O
Care etichete definesc o celul de date? Care snt atributele acestor etichete?
O
Creai o pagin Web care va afia urmtorul tabel:
a)
A

C

E

B

D

F

b)
A

B

C

D

E

c)
A

D

B

C

E

d)
A

C

E

B

e)
A

B
C
D

E

F

G

H

I

f)
A

C

E

B

D

F

G

H

g)
A

B
D

E

F

G

H

C

O
Creai un document HTML care va afia urmtoarea pagin Web (fig. 12.17 a, b) (se pot folosi alte imagini):
G
Ce va afia pagina Web cu urmtorul cod HTML?
a) <HTML>
<Head><Title>Ce afisam?</Title> </Head>
<Body>
<Table align=center border=2 width=100>
<Tr align=center>
<Td colspan=2>B</Td><Td rowspan=2>D</Td>
</Tr>
<Tr align=center>
<Td>C</Td><Td>A</Td>
</Tr>
</Table>
</Body>
</HTML>
b) <HTML>
<Head><Title>Ce afisam?</Title> </Head>
<Body>
<Table align=center width=100 border=2>
<Tr align=center>
<Td rowspan=2>B</Td><Td>C</Td><Td>A</Td>
</Tr>
<Tr align=center>
<Td colspan=2>D</Td>
</Tr>
</Table>
</body>
</HTML>
Test de evaluare
1. Stabilii valoarea de adevr a propoziiei:
a) Textul scris ntre etichetele <HEAD> i </HEAD> ale unui document HTML va fi afiat pe bara
de titlu a ferestrei programului de explorare n care a fost interpretat acest document.
b) O etichet poate avea cteva atribute.
c) Programul de explorare va afia din rnd nou un text, dac acesta va fi precedat de oricare din
etichetele <P>, <BR>, <HR>.
d) Un text cuprins ntre etichetele <DIV> i </DIV> este un text preformatat.
2. Selectai etichetele care se folosesc pentru a stabili stiluri fizice pentru un text: <B>, </B>, <DFN>,
</DFN>, <VAR>, </VAR>, <BIG>, </BIG>, <EM>, </EM>, <SUB>, </SUB>.
3. Scriei un cod HTML care, fiind interpretat de programul de explorare, va afia urmtoarele liste
imbricate:
Fructe
a) Mere
b) Pere
c) Prune
d) Caise
Legume
1. Cartofi
2. Morcovi
3. Ceap
Lactate
o Lapte
o Brnz
o Iaurt
4. Fiierul f1.html se afl n mapa A, iar fiierul f2.html se afl n mapa B. Care este URL-ul referinei
din fiierul f1.html ctre fiierul f2.html, dac:
a) mapele A i B se afl n acelai catalog;
b) mapa A se conine n mapa B;
c) mapa B se conine n mapa A;
d) mapa A se conine n submapa C a mapei B?
5. Comentai semnificaia urmtorului cod HTML:
<A HREF=..\TEST\d1.jpg><img src=d2.jpg width=50 height=50></A>.
6. Scriei un cod HTML care, fiind interpretat de programul de explorare, va afia urmtorul tabel:
A

B

C

D

E

F

G

H I J

Manual HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Capitolul 12

). Chiar dac unele programe

Você também pode gostar