HTML - Extras Din Manual

LECIA 1
Ce este HTML?
HTML este o abreviere de la Hypertext Markup Language i reprezint scheletul oricrei pagini
de Web. HTML nu este un limbaj de programare. Nu vei lucra aici cu variabile, expresii, tipuri de date,
structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale
paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care
l are pagina din punct de vedere grafic. n fond, HTML este modul n care i comunicam browserului ce
elemente dorim s introducem n pagina Web i care este aspectul acestora.
HTML este un limbaj standardizat, aceasta nsemnnd ca orice browser poate interpreta i afia
corect un document Web. Sintaxa de baz a limbajului HTML este definit n versiunea HTML 3.2.
Coninut i aspect ntr-un document HTML
Pentru a realiza documente Web eficiente, cu impact asupra cititorului, i pentru a valorifica pe
deplin puterea limbajului HTML, trebuie s inei seama de o idee fundamental: HTML este destinat
structurrii documentele i nu doar formatrii n vederea afirii lor.
HTML furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de
fonturi (tipurile de caractere), de formatare a textului, de culori, etc. Desigur, aspectul formal este
important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilor prezentate.
Totui, nu aspectul formal, ci coninutul documentului primeaz. HTML conine numeroase ci

de structurare a coninutului documentului fr a pune problema felului cum vor fi afiate elementele:
titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite n limbajul HTML fr a impune
browserului s le afieze ntr-un anumit mod. Browserului i se las astfel posibilitatea de a afia
respectivele elemente n conformitate cu rolul pe care l au ele n structura documentului i nu respectnd
regulile impuse de creatorul documentului HTML.
Marele avantaj al abordrii bazate pe coninut fa de cea bazat pe aspect rezid n faptul c
paginile dumneavoastr vor fi vizualizate cu tipuri diferite de browsere, fiecare avnd versiuni diferite.
n abordarea bazat pe aspect, dac browserul nu recunoate indicaiile de formatare specificate,

fie nu le execut, fie le execut eronat, astfel c structurarea paginii va avea de suferit.
n abordarea bazat pe coninut, indiferent cum va alege browserul s execute indicaiile de formatare,
semnificaia elementelor din pagin va rmne neschimbat.
De exemplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturi,
caractere cu stiluri variate: aldine (bold, sau ngroate), cursive (italice, sau nclinate), subliniate, etc., un
browser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care afieaz restul
textului, astfel c semnificaia lor n pagin i-ar pierde relevana.
Pe de alt parte, dac vei folosi etichetele speciale pentru titluri, chiar daca browserul nu le
recunoate, are posibilitatea de a evidenia totui titlurile n cea mai bun manier pe care o are la
dispoziie, astfel nct semnificaia lor pentru restul documentului se va pstra.
Uneltele de care avei nevoie
Instrumentele minime de care avei nevoie pentru a realiza documente HTML sunt, n esen,
urmtoarele: un editor de text, cu ajutorul cruia s scriei documentul, un browser, prin intermediul
cruia s vizualizai aspectul i coninutul documentului, un editor grafic cu care s prelucrai imaginile
pe care le vei introduce n pagin i o conexiune la Internet.
Editorul
1
Pentru a scrie documente HTML avei la dispoziie trei posibiliti:
1. Folosirea unui simplu editor de text.
Cel mai cunoscut i accesibil este Notepad-ul din Windows.
Atenie!
Nu este recomandat s folosii un procesor de text complex cum este Microsoft Word, chiar dac acesta
poate salva documentele n format HTML (cu extensia .html), deoarece la salvarea documentelor Word-
ul adaug automat la textul documentului dumneavoastr o mare cantitate de cod coninnd informaii
lipsite de relevan care ncarc inutil documentul i mrete dimensiunile fiierului.
2. Folosirea unui editor HTML.

Acest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea documentului
din punct de vedere sintactic i chiar scriu secvene de cod pentru anumite elemente pe care dorii s le
inserai n document.
3. Folosirea unui editor WYSIWYG (What You See Is What You Get, n traducere liber "ceea ce vezi
la editare este ceea ce obii la vizualizare" ).
Un editor de tip WYSIWYG permite alegerea i formatarea, cu ajutorul mouse-ului, a elementelor pe care
dorii s le includei n pagin: tabele, link-uri, formulare, putei stabili tipul fonturilor, culorile, aranjarea
textului n pagina. Pe msur ce un anumit element este inserat, editorul scrie n mod automat codul
HTML corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra lui. Totui, dac avei cunotine
de HTML putei interveni la nivelul codului n orice manier dorii, orice schimbare pe care o facei n
cod, reflectndu-se automat n aspectul paginii.
Printre profesioniti persist o controvers n privina tipurilor de editoare care ar trebui folosite
pentru a edita documentele HTML. n esen, problema este aceasta: este mai bine s-i construieti
paginile folosind HTML "pur", adic scriind totul tu nsui, sau este de preferat s foloseti un editor de
tipul WYSIWYG? Editoare deosebit de puternice de acest tip: Macromedia Dreamweaver, Microsoft
Front Page, Coffee Cup, ca s dm numai cteva exemple, par a nclina definitiv balana n favoarea
acestui tip de editare. Ele ofer facilitai avansate de editare a paginii, inclusiv posibilitatea de a crea
pagini dinamice i de a include script-uri JavaScript sau applet-uri Java. Cu ajutorul lor se pot construi
site-uri extrem de complexe.
Exist, de asemenea i editoare de tip "built-in". Acestea sunt cel mai uor de folosit i adesea
sunt puse la dispoziie de providerii care ofer i servicii gratuite de hosting ( www.home.ro, www.rhp.ro,
etc.).
Editoarele de acest tip ofer un numr (de obicei redus) de template-uri (pagini preformatate), i
doar cteva opiuni de editare: putei aduga text, modifica tipul fonturilor, culoarea fundalului i a
textului, forma butoanelor de navigare, putei include un numr prestabilit de imagini. Din pcate, gradul
de control asupra aspectului paginii este foarte redus. Utilizatorul este limitat la cteva opiuni, iar
numrul mic de template-uri puse la dispoziie face c pagina s fie lipsita de originalitate.
Ai putea, atunci, s v ntrebai de ce mai este nevoie s nvai HTML dac exist editoare
profesionale care scriu codul n locul dumneavoastr. n fond, muli dintre web designerii profesioniti le
folosesc, deoarece a scrie codul unui site "by hand", cu ajutorul unui simplu editor de text, este o munca
titanic i mare consumatoare de timp.
Rspunsul este simplu: trebuie s cunoatei HTML deoarece orict de performant ar fi un editor
WYSIWYG, mai devreme sau mai trziu v vei gsi n situaia de a interveni la nivelul codului. Cea mai
comun situaie este aceea n care, datorit multiplelor operaii de editare cum sunt mutarea, copierea,
tergerea elementelor, anumite pri ale paginii nu vor mai funciona corect.
De obicei, interveniile necesare asupra codului pentru depanarea sa sunt minime i uor de realizat... cu
condiia s tii ce trebuie s facei. Cu alte cuvinte, s tii HTML.
2
n concluzie, oricare ar fi opiunea dumneavoastr, fie c vei folosi un editor de HTML de tip
text, fie c vei folosi unul de tip WYSIWYG, pentru a putea construi documente Web corecte i
funcionale este nevoie s stpnii bine limbajul HTML.
Browserul
Evident, pentru a vizualiza documentele dumneavoastr avei nevoie de un browser.

Recomandarea noastr este s deinei cel puin dou dintre cele mai rspndite browsere, Internet
Explorer i Netscape Navigator, de dorit ar fi chiar cu versiuni diferite ale aceluiai browser . Testarea
paginilor dumneavoastr sub diferite browsere este o etap important naintea publicrii lor pe Web.
Editorul grafic
Desigur, vei dori s introducei imagini n paginile dumneavoastr. Pentru a putea s prelucrai
imaginile n conformitate cu inteniile dumneavoastr i cu rolul lor n pagin avei nevoie de un editor
grafic.
Numrul editoarelor de acest tip este foarte mare. Putei alege ns acel editor cu care suntei deja
familiarizat, chiar dac mai puin performant, mai ales dac pentru nceput nu dorii s facei prelucrri
foarte complexe ale imaginilor.
Conexiunea la Internet
Spre deosebire de primele trei instrumente, conexiunea la Internet nu este absolut esenial n
etapa de construire a documentului HTML. Aa cum spuneam, documentele HTML se pot construi i
vizualiza local, pe propriul computer. Cu toate acestea, existena unei conexiuni Internet v va ajuta foarte
mult n procesul de nvare, i nu numai.
Pe de-o parte deoarece pe Web vei gsi nenumrate exemple, i bune i rele, pe care le putei
studia. n plus, vei avea acces la o cantitate uria i n continu cretere de resurse, documentaie i
produse care v vor ajuta cu siguran la construirea paginilor dumneavoastr. i, n fine, accesul la
Internet este esenial n etapa de testare a legturilor cu pagini externe.
Cum s procedai?
Pentru a folosi eficient informaiile din aceast carte iat mai jos cteva indicaii n privina modului n
care v putei organiza activitatea:
Creai-v n folderul My Documents (sau ntr-o alta locaie aleas de dumneavoastr) un folder de
lucru numit Work.
Deschidei editorul de text n care ai ales s lucrai (ar fi de dorit ca pe parcursul procesului de
nvare s folosii un simplu editor text, de exemplu Notepad).
Scriei (editai) fiecare exemplu pe care l gsii aici.
Salvai-l n folderul dumneavoastr cu numele indicat n blocul <TITLE> i extensia .html. Putei
folosi att extensia .html ct i extensia .htm dar este bine ca odat ce ai ales o anumit extensie s
fii consecvent n folosirea ei. Denumii-v fiierele cu litere mici.
3
Atenie!
Editorul de text Notepad salveaz fiierele cu extensia implicita ".txt". De aceea cnd salvai este
necesar s precizai n mod explicit extensia dorit (.html sau .htm)
Cnd vei salva fiierul creat n Notepad s-ar putea s constatai c restul de fiiere HTML pe care
le-ai salvat anterior nu apar n fereastr. Pentru a le vedea, deschidei meniul File > Save As..., iar n
fereastra deschis selectai din list All files.
Deschidei cu browserul utilizat fiierul HTML (File > Open > Browse) pentru a vedea cum arat
pagina Web descris n fiierul dumneavoastr.
Dup fiecare modificare pe care o facei n fiierul HTML nu uitai s-l salvai, altminteri schimbrile
fcute nu se vor reflecta n aspectul final al paginii.
Pentru a observa felul cum modificrile pe care le facei n codul HTML schimb aspectul paginii,
trebuie s apsai butonul Refresh/Reload al browserului.
Pentru a putea s vizualizai cu uurin aspectul paginilor dumneavoastr este bine s avei
deschise permanent att editorul de text n care scriei documentul HTML ct i browserul cu care l
vizualizai.
Convenii de notaie
HTML nu este un limbaj case-sensitive, adic nu face distincia ntre literele mici i cele mari
(majuscule). Aceasta nseamn c indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele
vor fi corect interpretate de browser. Din acest motiv pe parcursul acestei lucrri vom utiliza o convenie
de notaie n care etichetele HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu
litere mici pentru o mai bun difereniere i evideniere a acestora.
Desigur c n documentele pe care le scriei putei respecta aceast convenie sau putei scrie cu
un singur tip de litere, dup cum v este mai uor.
Peste tot n cadrul textului, unde apar etichete, atribute sau valori ale acestora am folosit caractere
Courier New pentru a diferenia elementele de limbaj de restul textului.
De asemenea, vei observa c, n exemplele prezentate, codul HTML este scris indentat, adic
aliniat la diverse nivele. Ca i n cazul etichetelor, acest lucru nu are importan pentru browser.
Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uor diversele elemente pe
care le includei n document. Totui, dac n cazul etichetelor putei opta pentru orice variant dorii n
privina scrierii lor, indentarea este recomandat chiar i programatorilor cu experien. Un cod neindentat
este foarte greu de citit i de depanat, n cazul apariiei unor erori.
4
LECIA 2
Structura unui document HTML

Ce este un document HTML?
Un document HTML nu este altceva dect un fiier text care, pe lng textul propriu-zis ce va
aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje (tags, n limba
englez).
Not
Toate celelalte elemente, de tip multimedia, care nsoesc documentul HTML, cum sunt sunetul,
imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referine la
aceste elemente, prin intermediul unor etichete speciale, care indic browserului modul n care ele vor fi
ncrcate i integrate n pagina Web.
Etichetele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica
browserului semnificaia i modul de afiare al elementelor incluse, privind aspectul textului, al fonturilor
(tipurilor de caractere) i n general, al tuturor elementelor prezente n pagin. Etichetele sunt delimitate
de perechi de paranteze unghiulare "< >".
Unele etichete permit precizarea anumitor caracteristici ale elementului pe care l introduc n
document prin intermediul unor perechi caracteristic - valoare numite atribute. Exist atribute specifice
doar anumitor elemente i atribute ce sunt utilizate n conjuncie cu mai multe etichete. O etichet poate
avea unul, nici unul, sau mai multe atribute. La rndul lor, atributelor li se pot atribui valori diferite.
Att etichetele ct i atributele sunt case-insensitive, ca atare nu va exista nici o diferen de

aciune ntre, s spunem, <head>, <Head>, <HEAD>, sau chiar <HeaD>. Ele sunt echivalente. Pe de
alt parte, valoarea unui atribut poate fi case-sensitive, cum, n principiu, este cazul locaiilor fiierelor i
adreselor URL.
Regulile de folosire a etichetelor, atributelor i valorilor acestora reprezint sintaxa limbajului

HTML. Similar limbajelor de programare, n HTML respectarea sintaxei limbajului este determinant
pentru o bun funcionare a documentului.
Spre deosebire de limbajele compilate cum ar fi limbajul C, n care programele trec nainte de
execuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de sintax, la
documentele HTML nu se ntmpl acest lucru. Documentele HTML sunt interpretate de browser exact
aa cum au fost ele scrise. Prin urmare, orice greeal de sintax se va reflecta direct n aspectul paginii
Web, conducnd, de cele mai multe ori, la o funcionare defectuoas a acesteia.
Dac la vizualizarea paginii dumneavoastr cu browserul constatai c anumite secvene ale
paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate, revenii
asupra documentului HTML i verificai nc o dat sintaxa acestor elemente.
HTML lucreaz ntr-o manier foarte uor de neles. n esen trebuie s scriei textul i s
precizai elementele care dorii s apar n pagin i s le includei ntre anumite etichete specifice.
De exemplu, dac dorim s afim o propoziie cu caractere ngroate (bold), vom marca
nceputul acesteia folosind eticheta <B> iar pentru marcarea sfritului propoziiei eticheta </B>.
<B> Acesta este un text scris cu litere aldine</B>
5
Atenie!
Browserul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu-se invariabil cu un singur
spaiu. De asemenea, nu se poate preciza mrimea liniilor de text, acestea fiind de mrimea ferestrei
browserului (prin redimensionarea ferestrei se vor rearanja i liniile de text).
Dup cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd i cum
se poate alinia un text n pagin.
Etichetele HTML sunt de dou tipuri:
etichete container (container tags)

etichete vide (empty tags)
Etichetele container sunt de forma:
<TAG>bloc de text</TAG>
unde:
<TAG> - marcheaz nceputul unui bloc
</TAG> - marcheaz sfritul blocului
Etichetele specific formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de
final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul
unora dintre ele, prezena etichetei de nchidere (</TAG>) este opional. Pe parcursul capitolelor care
vor urma, vom preciza explicit care anume sunt etichetele care au aceast proprietate.
Etichetele vide au forma:
<TAG>
Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de

exemplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii browserului despre ce
element este vorba i despre cum s afieze acel element.
Etichetele vide nu au etichet de nchidere.
Etichete de structur
Orice document HTML conine dou seciuni:

antetul (head)
corpul documentului (body)
Structura general a unui document HTML este urmtoarea:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Documentul este delimitat de etichetele <HTML> </HTML> i este format din cele dou pri:
6
antet (head) - este delimitat de etichetele <HEAD> </HEAD> i conine titlul documentului precum
i alte informaii privind documentul. n antetul documentului se mai insereaz i anumite secvene de
program (script-uri), care se execut la ncrcarea documentului n browser.
corp (body) - care delimiteaz coninutul propriu-zis al documentului i este inclus ntre etichetele
<BODY> </BODY>
Iat acum i semnificaia etichetelor menionate i care fac parte n mod obligatoriu din structura
oricrui document HTML:
<HTML> </HTML>
ntre aceste etichete este inclus ntregul document HTML. Ele comunic browserului unde ncepe
i unde se termin documentul.
<HEAD> </HEAD>
ntre aceste etichete sunt incluse titlul, deja menionat, precum i alte informaii despre
documentul HTML. Aceste elemente, numite metatag-uri sunt deosebit de importante pentru ca pagina s
fie ct mai bine cotat de ctre motoarele de cutare. Ele vor face obiectul unui capitol separat.
Metatag-urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina Web. Totui,
la fel ca ntreg codul HTML al paginii, antetul poate fi vizualizat selectnd din meniul browserului
opiunea View > Source.
<TITLE> </TITLE>
Stabilete titlul documentului HTML.
]Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de
motoarele de cutare pentru indexarea paginii. Prin urmare, strduii-v s gsii un titlu care s descrie
ct mai corect i complet coninutul paginii dumneavoastr.
Atenie!
Eticheta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare obinuit n
bara de titlu a browserului.
<BODY> </BODY>
Conine descrierea textului i elementelor paginii. n corpul documentului se stabilesc, deci,
aspectul i coninutul paginii Web. Elementele coninute n aceast seciune sunt vizibile n pagin.
Poate nu v vine s credei, dar acum avei deja posibilitatea de a crea o pagin foarte simpl de
text. Avei Notepad-ul deschis? Dac nu, deschidei-l acum i scriei exemplul urmtor:
Exemplul:
<HTML>
<HEAD>
<TITLE>Pagina mea</TITLE>
</HEAD>
<BODY>
Am reusit sa scriu prima mea pagina de Web. Urmatoarea va fi cu
mult mai buna.
</BODY>
</HTML>
Salvai fiierul cu numele primapagina.html. Apoi deschidei browserul pe care l folosii,

selectai meniul File > Open > Browse, cutai folderul n care ai salvat fiierul, deschidei-l i v vei
afla n faa primului dumneavoastr document HTML.
Dac dorii s scriei un text pe mai multe linii n pagin, va trebui s folosii eticheta <BR> (line
break), care face trecerea pe o linie noua. Eticheta <BR> este de tip empty, deci nu are etichet de
7
nchidere. ncercai exemplul de mai jos, n care afiarea textului documentului se va face pe dou
rnduri.
Exemplul:
<HTML>
<HEAD>
<TITLE>Pagina mea</TITLE>
</HEAD>
<BODY>
Am reusit sa scriu prima mea pagina de Web.<BR>Urmatoarea va fi cu
mult mai buna.
</BODY>
</HTML>
Deoarece structura documentelor HTML obinuite este n realitate mult mai complex, este
recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n text pentru a face
aceast structur ct mai explicit. Comentariile nu sunt vizibile pentru browser, ele servesc creatorului
paginii pentru a da un grad crescut de lizibilitate documentului HTML.
Comentariile constau n scurte informaii, explicaii la elementele de cod utilizate, etc., fiind
deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului.
Comentariile se introduc prin includerea textului ntre etichetele de mai jos.

Iat dou exemple:
<!- - Acesta este un comentariu introdus in pagina Web - ->
<!Acesta este un comentariu

pe mai multe randuri
care ia sfarsit aici -->
Folosirea corect a etichetelor
Etichetele container se compun, aa cum am vzut mai devreme, din perechi de etichete: etichet
de deschidere <TAG> i de nchidere </TAG>.
La construirea unei pagini Web complexe vei fi pus adesea n situaia de a folosi mai multe
etichete pentru aceeai secven de text.
De pild, vei dori s atribuii unui text dou proprieti: litere aldine sau ngroate (bold) i text
centrat n pagin. Pentru aceasta va trebui s utilizai dou perechi de etichete, care descriu cele dou
proprieti, n mod simultan, metod numit imbricarea etichetelor (nested tags), ca n exemplul de mai
jos:
<CENTER><B>Text cu aldine si centrat</B></CENTER>
Este foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie
plasate n mod corect.
n aceast situaie, principiul de utilizare este: "Last In - First Out" (LIFO). Acest lucru
nseamn c ultima etichet deschis trebuie s fie prima care se nchide.
Atenie!
Trebuie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul LIFO. n caz contrar,
secvena de cod din pagin nu va funciona corect.
Iat un exemplu generic de folosire corect a dou etichete:

8
<TAG1><TAG2>Etichete utilizate corect</TAG2></TAG1>
i un altul de folosire incorect:
<TAG1><TAG2>Etichete utilizate incorect</TAG1></TAG2>
9
LECIA 3
Culori
Culoarea reprezint o caracteristic extrem de important a unei pagini Web. Utilizat cu grij i
msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i mai atractiv, iar textul
mai uor de parcurs.
Pe de alt parte, utilizarea excesiv sau inadecvat a culorilor poate transforma un text de calitate
ntr-un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune la
a-l mai parcurge.
Datorit faptului c ea reprezint un atribut al multor elemente ale documentelor Web (text,
fundaluri, margini, link-uri), am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc
din aceast etap a lucrrii noastre.
Sistemul de definire a culorilor
Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru
fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun.
n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele
dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea
de albastru.
Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea
coresponden ntre cifrele hexazecimale i cele zecimale:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0 1 2 3 4 5 6 7 8 9 A B C D E F
De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea: cantitatea
de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul pentru verde pur este
#00FF00 iar pentru albastru este #0000FF.
Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod,
standardul HTML 3.2 stabilete un set de 16 culori standard. n acest caz, pentru valoarea atributului de
culoare se utilizeaz direct numele culorii.
Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele:

Nume culoare Cod hexazecimal
aqua #00FFFF
black #000000
blue #0000FF
fuchsia #FF00FF
gray #808080
green #008000
lime #00FF00
maroon #800000
navy #000080
olive #808000
10
purple #800080
red #FF0000
silver #C0C0C0
teal #008080
yellow #FFFF00
white #FFFFFF
Mai trebuie menionat faptul c se pot utiliza, pe lng culori, 100 de nuane de gri (gray). Ele
sunt numerotate de la 1 la 100, "gray 1" fiind nuana cea mai nchis, iar "gray 100" cea mai deschis.
Corespondena dintre codurile hexazecimal i zecimal
Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Dei se bazeaz i
ele pe acelai sistem RGB de definire a culorilor, numerele care stabilesc cantitile celor trei culori sunt
specificate n sistemul zecimal.
De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128.
Aceast coresponden se realizeaz simplu, trecnd fiecare dintre cele trei numere hexazecimale din
codul culorii n sistemul zecimal: 63(16)=99(10) , FF(16)=255(10), 80(16)=128(10)
Motivul pentru care trebuie s cunoatei aceast coresponden este acela c pentru a folosi n
documentul HTML o culoare al crei cod este dat n sistemul zecimal, aceasta trebuie convertit n cod
hexazecimal.
Conversia se poate realiza foarte simplu folosind calculatorul din Windows (Start > Accessories
> Calculator) care trebuie setat pe opiunea Scientific din meniul View. Vei observa o serie de butoane
radio dintre care ne intereseaz dou: Hex i Dec. Nu avei altceva de fcut dect s selectai Dec, s
tastai numrul n baza 10 i apoi s selectai opiunea Hex. Rezultatul conversiei va aprea pe ecran.
Conversia invers se realizeaz n mod similar.
i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu-i culori. Vom
lua pe rnd atributele etichetei <BODY>. Cu ajutorul lor se pot seta culorile fundalului, textului i
linkurilor:
bgcolor - culoarea fundalului

text - culoarea textului
link - culoarea linkurilor
vlink - culoarea linkurilor vizitate
alink - culoarea linkului activ
Culoarea fundalului
Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color)
al etichetei <BODY>, cruia i atribuim o valoare astfel:
<BODY bgcolor="#RGB sau nume_culoare">
Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie
numele ei. Iat un exemplu de pagin cu fundal verde:
Exemplu:
<HTML>
11
<HEAD>
<TITLE>culori1</TITLE>
</HEAD>
<BODY bgcolor="#00FF00">
<H1 align="center">Pagina cu fundal verde</H1><HR>
</BODY>
</HTML>
Culoarea textului
Pentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei
<BODY>, conform sintaxei:
<BODY text="#RGB sau nume_culoare">
Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o
anumit seciune a textului (culoarea unui bloc de text), vom folosi o etichet despre care vom vorbi pe
larg n capitolul urmtor: eticheta <FONT>. Aceasta este o etichet container care cuprinde ntre
etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face
folosind atributul color al etichetei conform sintaxei:
<FONT color="#RGB sau nume_culoare">Text</FONT>
n Exemplul urmtor culoarea textului este albastru iar anumite cuvinte sunt colorate n rou.
Exemplu:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#0000FF">
<H1 align="center">Text albastru si rosu</H1>
<HR>
Textul din aceasta pagina este albastru cu mici
<FONT color="#FF0000"> exceptii</FONT>
</BODY>
</HTML>
Culoarea legturilor
n general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel:
blue (albastru) - pentru legturi

red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng
apsat)
purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un click
Pentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei <BODY>:
link pentru legturi

alink pentru legturile active
vlink pentru legturile vizitate
conform sintaxei:
<BODY link="#RGB sau nume_culoare"

12
alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">
Documentul din Exemplul 3.3 creeaz o pagin n care textul este negru iar legturile au culoarea
verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n exemplu este folosit eticheta
<A> i atributul sau href, care vor fi prezentate pe larg n capitolul despre legturi. n acest moment
singurul lucru care ne intereseaz este cum putem stabili culorile acestora.
Exemplu:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00"
alink="#0000FF" vlink="#FF0000">
<H1 align="center">Legaturi colorate</H1>
<HR>
<A href="culori1.html">Legatura catre primul exemplu</A>
</BODY>
</HTML>
Alegerea culorilor
Sunt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin Web.
Primul i cel mai important este acela de a face coninutul uor de citit. Aceasta nseamn...ai ghicit!
Litere negre pe fond alb.
Dei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr-o pagin Web literele
roii pe fond albastru nu arat bine i sunt greu de citit. O alt combinaie nefericit este cea cu fondul
negru sau de culoare foarte nchis i textul de culoare alb.
S nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale
contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana ochiului,
de iluminarea camerei, etc.
Pe un monitor cu reglaje medii ale contrastului i strlucirii, un text de culoare roie dispus pe un
fundal negru va fi ilizibil, chiar dac la valori maxime ale acestor caracteristici combinaia poate genera
efecte interesante.
n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psihologia
culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei.
Iat cteva dintre sentimentele pe care le sugereaz culorile:
Rou - agresivitate, pasiune, putere, vitalitate

Roz - feminitate, inocen, moliciune
Portocaliu - amuzament, veselie, cldur, exuberan
Galben - sentimente pozitive i cordialitate
Verde - linite, sntate, prospeime
Albastru - autoritate, demnitate, securitate, ncredere
Violet - sofisticare, spiritualitate, mister
Maro - utilitate, legtura cu pmntul, bogie
Alb - puritate, ncredere, modernitate, rafinament
Gri - sobrietate, autoritate, sim practic
Negru - seriozitate, distincie, hotrre
Alegerea culorilor pentru site trebuie s fie n concordan cu tema site-ului i s sublinieze
mesajul su. Astfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele i luminoase,
13
n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sunt potrivite culori
sobre i care sugereaz seriozitate i ncredere.
Alegerea culorilor pentru legturi este, de asemenea, important. Legturile au, n mod prestabilit,
anumite culori. Schimbarea acestora, dei posibil, l poate induce n eroare pe vizitator. Ca i n cazul
textului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu
culoarea sau imaginea de fundal a paginii. Rmnei consecvent culorilor alese pentru legturi, pe
parcursul ntregului site.
Culori "sigure"
Aa cum era de ateptat, nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate
de codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori
pot reproduce corect doar un set limitat de 256 de culori, aa-numit palet Web sau "culorile sigure
Web".
Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat n tabelul de mai sus sau
sunt realizate prin combinaii ale urmtoarelor numere hexazecimale: 00 33 66 99 CC FF
Codul hexazecimal variaz ntre #FFFFFF (alb) i #000000 (negru).
Un monitor setat s afieze 256 de culori va ncerca afiarea unei culori din afara acestui set prin
fenomenul numit "dithering" (alternarea unui pixel de o culoare cu un pixel de alt culoare), ceea ce
uneori d rezultate, dar adesea rezultatul e departe de culoarea real. Alteori, computerul va afia culoarea
"sigur" cea mai apropiat de cea original.
n principiu, o astfel de problem poate prea minor. n realitate, presupunnd c o pagin Web
conine att textul ct i fundalul ambele n culori "nesigure", prin modificarea lor de ctre computerul
cititorului, nuanele "aproximate" pot face textul total ilizibil.
Pentru a evita astfel de surprize neplcute este suficient s v menine n limita celor 256 de
culori "sigure".
Desigur, putei folosi o combinaie hexazecimal ciudat, ca aceasta: #12EC8B, dar nu vei avea
nici o garanie n privina modului n care va fi afiat aceast culoare n diferite browsere i pe diferite
platforme.
14
LECIA 4
Caractere (fonturi)
HTML nu este un limbaj orientat spre aspectul (layout) paginii, ci spre coninutul acesteia.
Importana acestei meniuni rezid n aceea c etichetele HTML nu impun, cum s-ar putea crede,
ci "sftuiesc" marea varietate de browsere care proceseaz pagina Web, cum s afieze textul. Ceea ce
impun ele cu adevrat este coninutul, textul n sine, nu forma de prezentare.
Exist numeroase etichete care permit formatarea caracterelor i ne ofer posibilitatea de a da
textului din pagina Web aspectul dorit.
1. Formatarea caracterelor
Eticheta care se folosete pentru a da unui caracter sau unui ir de caractere (unui text) aspectul
dorit este eticheta container <FONT> </FONT>.
ntre eticheta de nceput i cea de sfrit se insereaz textul sau caracterul ale crui caracteristici
dorim s le stabilim.
Exemplu:
<FONT size="2" color="red" face="arial">Ion Luca Caragiale </FONT>
Efectul liniei de mai sus este afiarea textului " Ion Luca Caragiale" cu fonturi Arial, de culoare
roie i de mrime egal cu 2 puncte.
S analizm succesiv cele trei atribute ale etichetei <FONT>:
size - dimensiunea textului - poate fi un numr ntre 1 i 7 (dimensiuni absolute), ntre -1 i -3 sau ntre
+1 i +4 (dimensiuni relative, adic raportate la dimensiunea deja existent a fontului). Dimensiunea
prestabilit (default) a fonturilor este 3.
Dac dimensiunile menionate depesc intervalul 1-7, browserul rotunjete automat valorile pentru a le
ncadra n acest interval.
color - culoarea textului - este culoarea cu care va fi afiat textul prezent ntre etichete (n exemplul
nostru, "Ion Luca Caragiale" ).
face - tipul de font - determin tipul de font care va fi utilizat la afiarea textului.
Tipurile cele mai uzuale sunt:
Arial
Tahoma
Helvetica
Times New Roman
Courier
Verdana
Atributul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin
virgul. Precizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe
calculatorul celui care viziteaz pagina, i se face ca n exemplul de mai jos.
<FONT face="arial, verdana, times new roman">
n aceast situaie browserul va alege singur din list primul tip de font pe care l recunoate, ignorndu-le
pe urmtoarele.
15
Atenie!
La stabilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au instalate
pe computerele lor acelai set de caractere ca i dumneavoastr. Din acest motiv, folosirea unor
caractere exotice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalat acel font.
Din acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt cele menionate mai
sus.
n Exemplul 4.1 vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui text, aspectul
paginii descrise de acest document fiind cel din Figura 4.1.
Exemplul 4. 1
<HTML>
<HEAD>
<TITLE>fonturi1</TITLE>
</HEAD>
<BODY bgcolor="yellow">
<FONT size="5" face="tahoma" color="green">Manual de HTML si
design Web</FONT><BR>
<FONT size="+3" face="arial" color="red">Manual de HTML si design
Web</FONT><BR>
<FONT size="-1" face="courier new" color="blue">Manual de HTML si
design Web</FONT>
</BODY>
</HTML>
Pentru a stabili aspectul textului unei ntregi pagini Web, putem folosi eticheta <BASEFONT>.
Spre deosebire de <FONT> aceasta nu este o etichet container, deoarece efectul ei se refer la tot textul
din pagin. Nu se folosete pentru a stabili caracteristicile unui bloc de text.
Este indicat s fie inclus n documentul HTML imediat dup eticheta <BODY>. Atributele
etichetei <BASEFONT> sunt aceleai cu cele ale etichetei <FONT>, respectiv: size, color,
face.
n Exemplul 4.2 vom construi o pagin creia i setm textul cu atributele:

face - tip de font Arial, size - dimensiunea fontului 2, color - culoare albastr. O parte din text va
avea alt tip de font, alt mrime i culoare, acestea fiind stabilite prin folosirea etichetei <FONT>.
Exemplul 4. 2
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="white">
<BASEFONT face="arial" color="blue" size="2">
Am ajuns la lectia despre fonturi a <FONT face="arial black"
color="red" size="4">Manualului de HTML</FONT>
</BODY>
</HTML>
Dup cum putei observa, caracteristicile textului din pagin au fost setate cu ajutorul etichetei
<BASEFONT>. Pentru a afia simultan o parte din text ntr-un mod diferit am folosit eticheta <FONT>.
Dei eticheta <BASEFONT> face parte din standardul HTML 3.2, atributele sale nu sunt
recunoscute de unele browsere (Netscape, Moxilla). Ca urmare, acesta va afia textul utiliznd propriile
setri prestabilite (default), ignornd atributele menionate n eticheta <BASEFONT>.
16
Urmtorul exemplu (Exemplul 4.3) afieaz un cuvnt avnd literele de mrimi diferite.
Exemplul 4. 3
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="white">
<BASEFONT face="arial black" color="red">
<FONT size="4">G</FONT>
<FONT size="5">R</FONT>
<FONT size="6">A</FONT>
<FONT size="7">T</FONT>
<FONT size="6">U</FONT>
<FONT size="5">I</FONT>
<FONT size="4">T</FONT>
</BODY>
</HTML>
S trecem n revist, n continuare, alte etichete care schimb aspectul unui caracter sau al unui
bloc de text.
2. Accentuarea textului
1. Eticheta <BIG> </BIG> face fonturile mai mari dect dimensiunea curent.
<BIG>Text cu caractere mari</BIG>

Text cu caractere mari
2. Eticheta <SMALL> </SMALL> face fonturile mai mici dect dimensiunea curent.
<SMALL>Text cu caractere mici</SMALL>

Text cu caractere mici
3. Etichetele <B> </B> (bold) i <STRONG> </STRONG> realizeaz scrierea cu caractere aldine,
sau ngroate (bold).
<B>Text ingrosat 1</B>

Text ingrosat 1
<STRONG>Text ingrosat 2</STRONG>

Text ingrosat 2
4. Etichetele <I> </I> (italic) i <EM> </EM> (emphasized) realizeaz scrierea cu caractere italice.
<I>Text inclinat 1</I>

Text inclinat 1
<EM> Text inclinat 2</EM>

Text inclinat 2
5. Etichetele <S> </S> i <STRIKE> </STRIKE> realizeaz scrierea textului tiat de o linie
orizontal.
<S>Text taiat 1</S>

17
Text taiat 1
<STRIKE>Text taiat 2</STRIKE>

Text taiat 2
6. Eticheta <U> </U> (underlined) realizeaz sublinierea textului.
<U>Text subliniat</U>
Text subliniat
Atenie!
Utilizarea textului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un link.
7. Eticheta <SUP> </SUP> (superscript). Prin intermediul ei se pot insera n document caractere/texte
plasate deasupra nivelului liniei de scriere.
Apa ingheata la 0 <SUP>0</SUP>C

Apa ingheata la 0 0C
8. Eticheta <SUB> </SUB> (subscript). Prin intermediul ei se insereaz texte plasate sub nivelul liniei
de scriere.
Coordonatele X<SUB>1</SUB>, Y<SUB>2</SUB>

Coordonatele X1, Y2
Este de remarcat faptul c etichetele <BIG> i <SMALL> sunt executate diferit n diverse
browsere.
Astfel, n Netscape <BIG> face textul mai mare cu un punct iar <SMALL> mai mic cu un punct
dect dimensiunea curenta.
n Internet Explorer, <BIG> afieaz textul cu fonturi de dimensiune 4 iar <SMALL> cu fonturi de
dimensiune 2. Etichetele <BIG> i <SMALL> pot fi repetate pentru a obine un efect mai accentuat.
Exemplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete.

Exemplul 4. 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<BASEFONT face="arial" color="blue">
<BIG>Etichete</BIG> care <EM>schimba</EM> aspectul
<SMALL>textului</SMALL>
</BODY>
</HTML>
Exemplul 4. 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT face="arial" size="5">Acesta este font Arial </FONT><BR>
<FONT face="algerian" size="4" color="green">Acesta este font
Algerian </FONT><BR>
<FONT face="courier" color="blue"><STRONG>Acesta este font Courier
</STRONG></FONT><BR>
18
<FONT FACE="vivaldi" size="5" color="gray"><U>Acesta este font
Vivaldi </U></FONT><BR>
<FONT FACE="garamond"><EM>Acesta este font Garamond
</EM></FONT><BR>
<FONT FACE="modern" size="7" color="brown"><STRIKE>Acesta este
font Modern </STRIKE></FONT><BR>
</BODY>
</HTML>
Dup cum ai observat mai sus, exist dou etichete al cror efect este acelai: accentuarea
textului fie prin scrierea cu caractere italice fie cu caractere aldine.
3. Etichete logice i etichete fizice
Etichetele <B> i <I> se numesc etichete fizice, iar <EM> i <STRONG> etichete logice.
Etichetele de titluri de la <H1> la <H6> sunt, de asemenea, etichete logice. Diferena dintre cele dou
tipuri de etichete este legat de felul cum sunt ele executate de diversele tipuri de browsere.
Astfel, etichetele fizice impun browserului afiarea n formatul exact, precizat prin intermediul
lor. Dac browserul nu suport acest format, etichetele sunt ignorate.
Spre deosebire de etichetele fizice, cele logice las browserului libertatea de a alege cel mai bun
mod de a ndeplini comanda transmis prin eticheta. De exemplu, efectul etichetei <EM> este, n cele mai
multe browsere, scrierea textului cu caractere italice. Totui, dac un anumit tip de browser nu suport
acest format de caractere, va accentua totui textul ntr-un alt mod, cel mai bun de care dispune.
Alte etichete logice utilizate n documentele HTML sunt:
<CITE> </CITE> (citation) Etichet folosit pentru inserarea unui citat. De obicei, citatul este afiat
cu caractere italice.
<CODE> </CODE> (code) Etichete folosite pentru inserarea n text a unor secvene de cod scrise ntr-un
limbaj de programare. n general secvenele de cod sunt afiate cu fonturi Courier.
<DFN> </DFN> (definition) Eticheta este folosit pentru a insera n text definiia unor termeni. Este
util la crearea indexului sau glosarului unui document.
<KBD> </KBD> (keyboard) Aceast etichet logic se folosete pentru a indica un text care urmeaz a fi
introdus de la tastatur, ca n urmtorul exemplu:
Pentru a parasi programul tastati <KBD>quit</KBD>
<SAMP> </SAMP> (sample) Este o etichet logic folosit pentru a insera o mostr de text.
<TT> </TT> (teletype) Aceast etichet se folosete pentru a afia textul inclus ntre etichete cu fonturi
monospaiate. Tipul de font monospaiat (cum este de exemplu Courier) are proprietatea c fiecrui
caracter i se rezerv acelai numr de pixeli pe ecran. Astfel, caracterul "i" va avea alocat tot atta spaiu
pe ecran ca i caracterul "W":
"Courier" este un font monospaiat.
Mai trebuie precizat i faptul c utilizarea unora dintre etichetele de formatare a fonturilor aa
cum au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri (Cascade Style Sheets)
despre care vom vorbi ntr-un capitol viitor.
19
4. Rezumat
Pentru a stabili aspectul unei anumite secvene de text aceasta este inclus ntre etichetele
<FONT> </FONT> conform sintaxei:
<FONT size="numar" color="#RGB sau nume_culoare" face="tip_font"> text

</FONT>
Pentru a seta aspectul textului n toat pagina Web se folosete eticheta <BASEFONT> conform
sintaxei:
<BASEFONT size="numar" color="#RGB sau nume_culoare" face="tip_font">
Accentuarea textului se poate face folosind diverse etichete pentru scrierea cu caractere aldine, cu
caractere italice, cu caractere mai mari sau mai mici dect dimensiunea curent a fonturilor.
Etichetele sunt de dou tipuri: fizice i logice, etichetele fizice fiind orientate ctre aspectul
textului iar cele logice ctre semnificaia textului n cadrul documentului.
20
LECIA 5
Formatarea textului
Etichetele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la
felul n care poate fi amplasat un text n cadrul paginii. nainte de a discuta n amnunt despre etichetele
care permit formatarea textului, s facem cteva precizri privind felul cum sunt afiate textele.
Dup cum tii, fiierele HTML sunt fiiere text. Aceasta nseamn c atunci cnd salvai fiierul
respectiv, el este salvat numai ca text, deci browserul nu poate recunoate i executa dect strict acele
comenzi prevzute de etichetele HTML. Din acest motiv, trecerea la un rnd nou, care n editorul de text
se realizeaz prin apsarea tastei Enter, nu este recunoscut de browser.
Un alt aspect este plasarea n text a spaiilor. Chiar dac vei introduce spaii suplimentare ntre
cuvinte atunci cnd scriei documentul HTML n editorul de text, browserul va afia invariabil un singur
spaiu ntre dou cuvinte.
Acesta este motivul pentru care fiecare dintre aceste elemente de formatare a textului are o
etichet proprie care indic browserului cum anume s fac afiarea.
1. Trecerea la un rnd nou
Trecerea la un rnd nou se realizeaz cu ajutorul etichetei <BR> (de la line break). Eticheta <BR>
nu este o etichet container. Ea are rolul de a comunica browserului c texul care urmeaz dup etichet
va fi afiat pe un rnd nou aa cum rezult din Exemplul 5.1.
Exemplul 5. 1
<HTML>
<HEAD>
<TITLE>text1</TITLE>
</HEAD>
<BODY>
Buna ziua<BR>Ma numesc Mos Craciun<BR>Invat sa construiesc o
pagina Web<BR>
</BODY>
</HTML>
Eticheta <BR> admite atributul clear care poate lua valorile left, right sau all.
n mod normal, la ntlnirea etichetei <BR> linia curent de text este ntrerupt i se face trecerea
la o linie nou, ca i la acionarea tastei Enter ntr-un editor de text. Exist ns situaii cnd dorim ca linia
s fie afiat lng un anumit element (o imagine, sau un tabel, de exemplu) care blocheaz partea din
stnga sau din dreapta a liniei.
n aceste cazuri putem folosi atributul clear al etichetei <BR> ca n Exemplul 5.2.
Exemplul 5. 2
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG src="../Imagini/toad.jpg" align="left">
Acest text va fi afisat intre imagine si marginea dreapta a
documentului.
<BR clear="left">Acest text va fi afisat sub imagine, aliniat
stanga. Intre acest text si dreapta imaginii va exista un spatiu
gol.
21
</BODY>
</HTML>
2. Titlurile (Headings)
Utilizarea titlurilor este justificat de nevoia de a sublinia prin format structura logic a unui
document, dar, nu n ultimul rnd, i de monotonia la care expune un text lung, lipsit de variaie n aspect.
Firete c un asemenea text sfrete prin a obosi cititorul Web, obinuit cu texte scurte i concentrate.
Din acest motiv se recomand "spargerea" textelor mai lungi i organizarea lor n secvene mai scurte,
marcate de titluri i subtitluri, organizate ierarhic, pe nivele.
Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor <H1>, <H2>, <H3>,
<H4>, <H5>, <H6>. Ele sunt etichete container, deci necesit eticheta corespunztoare de nchidere.
Eticheta <H1> definete titlul de dimensiunea maxim, iar <H6> pe cel de dimensiune minim.
Atenie!
Dei standardul HTML nu interzice utilizarea n orice ordine a titlurilor, este de preferat ca acestea s
fie folosite n ordinea "normal", progresiv, fr a sri peste vreun nivel (de pild de la H1 direct la H5),
pentru a evita eventualele probleme la convertirea textului n alte tipuri de fiiere.
n Exemplul 5.3 vom folosi toate cele ase etichete pentru titluri pentru a face o comparaie cu
dimensiunea standard a textului.
Exemplul 5. 3
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Titlu H1</H1>Text normal
</BODY>
</HTML>
Este de menionat o proprietate interesant a etichetelor de titluri, i anume aceea c un text scris
pe aceeai linie cu un titlu este afiat n pagin pe rndul urmtor titlului, lsndu-se o linie liber ntre
titlu i text, dei nu este prezent nici una dintre etichetele <BR> sau <P>.
Etichetele de titlu accept atributul align cu valorile left, center i right pentru
alinierea titlului blocului de text la stnga (n mod prestabilit), n centru i respectiv la dreapta.
Exemplul 5. 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Titluri</H1><HR>
<H1 align="center">
Titlu de marime 1 aliniat in centru
</H1>
<H2 align="right">
22
Titlu de marime 2 aliniat la dreapta
</H2>
<H4>
Titlu de marime 4 aliniat la stanga
</H4>
</BODY>
</HTML>
3. Paragrafele
Trecerea la un nou paragraf n cadrul textului se realizeaz cu ajutorul etichetei <P> </P>.
Aceast etichet comunic browserului s insereze o linie liber n text i s nceap o nou linie. Eticheta
<P> este o etichet container dar prezena etichetei de nchidere </P> este opional n anumite situaii.
Dac ea este prezent, indic browserului s insereze o linie liber i dup blocul de text cuprins ntre cele
dou etichete.
Eticheta <P> admite atributul align cu cele trei valori ale acestuia: left, center i right,
care permit alinierea textului la stnga, centrat respectiv la dreapta.
Exemplul 5.5 ilustreaz cele trei modaliti de aliniere a textului.
Exemplul 5. 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Paragrafe</H1><HR>
<P> Acesta este un paragraf aliniat la stanga.
<P align="right"> Acesta este un paragraf aliniat la dreapta.
<P align="center"> Acesta este un paragraf aliniat la centru.
</BODY>
</HTML>
Din exemplu se poate observa c alinierea la stnga este implicit (nu mai trebuie specificat
align="left"). Se mai poate observa c nu a fost folosit eticheta de nchidere a paragrafelor,
deoarece la ntlnirea unei noi etichete <P> vechiul paragraf se consider nchis. Totui, prezena sau
absena etichetei de nchidere a paragrafului atunci cnd este prezent atributul align trebuie stabilit cu
grij, pentru a nu obine rezultate neconforme cu dorinele dumneavoastr.
n Exemplul 5.6 dorim s aliniem un nou paragraf n dreapta paginii, iar textul de pe rndul
urmtor paragrafului, care este introdus prin eticheta <BR>, s fie scris normal, de la captul din stnga
al paginii.
Exemplul 5. 6
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Paragrafe</H1><HR>
Acest text este scris normal, incepand e la marginea din stanga.
<P align="right">Acest text este aliniat la dreapta
<BR>Unde este afisat acest text?
</BODY>
<HTML>
23
Se poate observa c afiarea nu s-a fcut conform inteniilor noastre. Motivul este faptul c
eticheta <P align=right> nu are eticheta de nchidere </P>, i prin urmare efectul su se
prelungete pn la ntlnirea unei alte etichete <P>.
Dac vei nchide paragraful n mod explicit cu ajutorul etichetei de nchidere, nainte de trecerea la o
linie nou.
Dei aparent etichetele <BR> i <P> au un efect asemntor, i anume trecerea la o linie nou, ele
nu sunt executate la fel. <BR> comunic browserului unde se ncheie o linie, n vreme ce <P> i impune
s lase o linie liber i s treac la un nou paragraf. Dac folosim atributul align al etichetei <P> n
situaiile cnd dup paragraf este introdus un alt element n pagin este recomandat nchiderea n mod
explicit a etichetei respective.
4. Preformatarea textului
Aa cum am precizat la nceputul capitolului, atunci cnd editai documentul HTML cu ajutorul
unui editor de text, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de text, browserul va afia
textul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor n funcie de mrimea
ferestrei. Cu alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignorate de ctre browser . Aa
cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etichetei <BR> iar inserarea unei
linii libere se face cu ajutorul etichetei <P>.
Exist, ns, i o etichet care impune browserului s afieze textul ntocmai cum a fost el
formatat n documentul HTML. Este vorba despre eticheta
<PRE> </PRE>.
Eticheta <PRE> permite preformatarea textului i menine spaierea i alinierea textului aa cum
a fost fcut n documentul surs HTML.
Eticheta de nchidere </PRE> este obligatorie.
Exemplul 5.7 ilustreaz modul cum poate fi folosit eticheta <PRE>.
Testai exemplul folosind eticheta <PRE> iar apoi eliminai-o, pentru a observa mai bine efectul
su.
Exemplul 5. 7
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Textul preformatat</H1><HR>
Acesta este un text normal <P>
Orar:
Luni
8:00 Romana
9.00 Matematica
10:00 Geografie
11.00 Istorie
12.00 Fizica<P>
Acesta este textul de mai sus preformatat

<PRE>
Orar:
Luni
8:00 Romana
9.00 Matematica
24
10:00 Geografie
11.00 Istorie
12.00 Fizica
</PRE>
</BODY>
</HTML>
5. Centrarea textului
Aa cum am vzut mai sus, afiarea textului centrat n pagin se poate face cu ajutorul etichetei
<P> avnd atributul align setat la valoarea "center".
O alt posibilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluznd textul
ntre etichetele <CENTER> </CENTER>.
Eticheta <CENTER> este o etichet container, prezena etichetei de nchidere fiind obligatorie.
Exemplul 5. 8
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Centrarea textului </H1><HR>
<CENTER>
Acesta este un text centrat. Acesta este un text centrat. Acesta
este un text centrat. Acesta este un text centrat. Acesta este
un text centrat. Acesta este un text centrat. Acesta este un
text centrat. Acesta este un text centrat.
</CENTER>
</BODY>
</HTML>
6. Afiarea textului pe o singur linie
n cazul cnd se dorete afiarea unui text pe o singur linie, chiar dac acest lucru nseamn
depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de text ntre etichetele
<NOBR> </NOBR>.
Aceast etichet mpiedic browserul s limiteze lungimea liniei la dimensiunea ferestrei.
Exemplul 5.9 ilustreaz folosirea etichetei <NOBR>.
Exemplul 5. 9
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Textul pe o singura linie </H1><HR>
<NOBR>
Acesta este un text care va fi afisat pe o singura linie, chiar
daca depaseste dimensiunile unei ferestre obisnuite. Puteti
verifica acest fapt prin reducerea dimensiunilor ferestrei
browserului.
</NOBR>
</BODY>
</HTML>
25
7. Blocul <DIV>
O alt modalitate de delimitare i de formatare a unui bloc de text este folosirea etichetei
container <DIV> </DIV>. Prezena etichetei de nchidere este obligatorie.
Eticheta <DIV> realizeaz divizarea unui document HTML n seciuni distincte, diviziune n care
pot fi incluse, pe lng text, i alte elemente: legturi, imagini, formulare. Ca i n cazul etichetei pentru
introducerea paragrafelor, eticheta <DIV> admite atributul align, pentru alinierea textului. Valorile
posibile ale acestui atribut, deja cunoscute, sunt:
left - aliniere la stnga

center - aliniere la centru
right - aliniere la dreapta
Alinierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n
blocul <DIV>. Blocul <DIV> admite i atributul nowrap, care interzice ntreruperea rndurilor de ctre
browser.
n documentul descris n Exemplul 5.10 este ilustrat utilizarea acestei etichete.

Exemplul 5. 10
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Blocul div</H1><HR>
Aceasta linie este o linie de text normala.
<DIV align="right">
Aceasta este prima sectiune a textului, aliniata dreapta.<BR>
</DIV>
<DIV align="center">
Aceasta este a doua sectiune a textului, aliniata central.<BR>
</DIV>
<DIV align="left">
Aceasta este a treia sectiune a textului, aliniata stanga.<BR>
</DIV>
</BODY>
</HTML>
8. Linii orizontale
ntr-o pagina Web pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale
paginii sau de a mbunti aspectul ei estetic. Acest lucru se face cu ajutorul etichetei <HR>. Eticheta
<HR> nu este o etichet container deci nu exist o etichet de nchidere.
Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <HR>:
align - permite alinierea liniei orizontale. Valorile posibile sunt left, center i right
width - specific lungimea liniei - lungimea poate fi stabilit n pixeli sau n procente din
limea ecranului.
size - specific grosimea liniei, exprimat n pixeli
color - permite definirea culorii liniei
Atributele etichetei <HR> sunt ilustrate n Exemplul 5.11.

Exemplul 5. 11
26
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center"> Linii orizontale </H1>
Linie aliniata la stanga, lungime 100%, grosime 2 <HR>
Linie aliniata in centru , lungime 50%, grosime 5 pixeli.
<HR align="center" width="50%" size="5" color="black">
Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12
pixeli , de culoare rosie.
<HR align="right" width=150 size=12 color="red">
</BODY>
</HTML>
Se poate observa c simpla prezen a etichetei <HR> fr nici un fel de atribute duce la afiarea
unei linii predefinite, de lungime egal cu 100% din pagin i grosimea egal cu 2 pixeli.
Atributul color al etichetei <HR> nu este suportat de browserul Netscape.
n exemplul urmtor (Exemplul 5.12) vom ilustra modul n care eticheta <DIV> aliniaz
elementele coninute n interiorul su, n cazul nostru text i linii orizontale.
Exemplul 5. 12
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Linii orizontale</H1><HR>
Linia de mai jos este aliniata la stanga
<HR size="3" color="blue" width="40%" align="left">
Liniile de mai jos sunt aliniate la centru cu ajutorul blocului
DIV
Linii aliniate la centru
<HR size="10" color="cyan" width="50%">
<HR size="5" color="navy" width="400">
</DIV>
</BODY>
<HTML>
9. Inserarea unei adrese potale
Dac ntr-o pagin Web trebuie inclus o adres potal, atunci putem folosi eticheta urmtoare:
<ADDRESS> </ADDRESS>.
Eticheta <ADDRESS> este o etichet logic i are drept efect, n cele mai multe browsere,
afiarea textului cu caractere italice.
n Exemplul 5.13 este inserat n pagin o adres.

Exemplul 5. 13
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center"> Adresa </H1><HR>
27
Adresa scolii noastre este
<ADDRESS>
Colegiul National Ion C. Bratianu <BR>
Str. Armand Calinescu, Nr. 14<BR>
Pitesti
</ADDRESS>
</BODY>
</HTML>
10. Inserarea unui citat
Pentru a insera un citat ntr-un text se pot folosi dou etichete, n funcie de dimensiunea citatului.
Astfel, dac citatul depete cteva linii, se folosete eticheta
<BLOCKQUOTE> </BLOCKQUOTE>.
Efectul acestei etichete este afiarea indentat a textului cuprins ntre eticheta de nceput i cea de
sfrit (n majoritatea browserelor) sau afiarea acestuia cu caractere italice (rareori).
Dac dorim ca ntr-un text s citam un termen, titlul unei lucrri sau s dm o referin, putem
include textul respectiv ntre etichetele <CITE> </CITE>.
n cele mai multe dintre browsere, textul inclus ntre etichetele <CITE> va fi afiat cu caractere
italice.
Exemplul 5.14 ilustreaz modul de folosire al celor dou etichete.
Exemplul 5. 14
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Inserarea unui citat</H1><HR>
Textul de mai jos este un citat
<BLOCKQUOTE>
Probabilitatea ca o felie de paine unsa cu unt sa cada pe covor
cu fata unsa in jos este direct proportionala cu valoarea
covorului
</BLOCKQUOTE>
Citatul de mai sus face parte din <CITE>Legile lui Murphy</CITE>
</BODY>
</HTML>
11. Inserarea caracterelor speciale
Dei este impropriu s numim caracterul "blank" sau space un caracter special, avnd n vedere
frecvena cu care este folosit, totui acesta, ca i alte caractere, este inserat n pagin cu ajutorul unei
comenzi speciale: comanda & (comanda ampersand).
Aa cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentul HTML,
browserul le va ignora i va afia cuvintele cu un singur spaiu ntre ele.
Pentru a fora introducerea spaiilor suplimentare se folosete comanda (no break
space).
Atenie
Comanda ncepe cu simbolul & (ampersand) i se termin cu ; (punct i virgul).
n Exemplul 5.15 este ilustrat modul cum pot fi spaiate cuvintele folosind comanda
Exemplul 5. 15
28
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Inserarea caracterelor speciale</H1><HR>
<FONT size="2" face="arial">
Cuvintele din
acest text sunt
despartite de
grupuri de
trei spatii.
</FONT>
</BODY>
</HTML>
Dup cum observai cuvintele sunt desprite prin trei spaii n loc de unul singur. Putei aduga
oricte spaii dorii n acest mod. De asemenea, pentru a indenta un text, putei insera la nceputul fiecrei
linii numrul de comenzi egal cu numrul de spaii cu care vrei s indentai textul.
Iat mai jos un tabel cu comenzile necesare pentru a insera n text cele mai cunoscute caractere.
Tabelul 5. 1
Denumire Reprezentarea Comanda

caracter grafic HTML
Spaiu liber
Copyright ©
Trademark
® sau
Registered ®
Mai mic dect < <
Mai mare dect > >
Ampersand & &
Ghilimele " "
Cent &#162
Un sfert &#188
O jumtate &#189
Trei sferturi &#190
Grade &#176
12. Sugestii privind aspectul textului
Aspectul textului ntr-o pagin Web este esenial pentru calitatea acesteia. Un text lizibil, scris cu
caractere de dimensiune potrivit, bine organizat i aezat n pagin va face din pagina dumneavoastr un
29
mediu accesibil i prietenos care l va stimula pe vizitatorul acesteia s parcurg cu plcere informaiile
oferite.
Iat cteva sfaturi referitoare la aspectul paginilor Web, menite s v ajute la crearea unor texte
lizibile, ct mai uor de parcurs de ctre cititori.
Nu folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este Times New Roman. Dei
este tipul cel mai utilizat pentru publicaiile tiprite, textele scrise cu Times New Roman sunt mai
greu de citit de pe monitor. Preferai tipurile Arial, Verdana, Helvetica.
Nu folosii numai litere mari (majuscule). Textele scrise cu majuscule sunt mai greu de citit.
Nu facei exces de caractere aldine (ngroate, bold). Limitai-v la a accentua cuvinte sau poriuni
reduse din text. De asemenea, nu folosii caractere cursive (nclinate, sau italice) n exces.
Nu folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. Folosirea unui mare numr de
fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu de citit.
Folosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aib instalate pe
computerul propriu, astfel c textul va fi afiat de browser cu fonturile prestabilite.
Nu aranjai textul n pagin pe dou coloane. Aceasta este o practic obinuit n ziare i reviste dar
nu este potrivit ntr-o pagin Web deoarece foreaz vizitatorul ca odat ajuns la baza paginii s o
deruleze din nou pentru a citi ce-a de-a dou coloan.
Este bine s folosii fiecare etichet n scopul pentru care a fost ea definit. Nu folosii etichetele de
titlu pentru a accentua anumite pri ale textului care nu sunt titluri. Nu folosii eticheta <ADDRESS>
pentru a insera alte texte dect adrese sau eticheta <CITE> pentru a realiza scrierea cu caractere
italice a textului.
Motoarele de cutare indexeaz paginile Web i n funcie de elementele (etichetele) care sunt
incluse n ele iar folosirea lor neadecvat conduce la o indexare eronat a paginii dumneavoastr.
Multe motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc o schi
a paginii.
Dac vei folosi etichetele de titlu pentru a accentua anumite pri ale textului (operaie pe care o
putei realiza n mod corect folosind eticheta <FONT>) vei oferi informaii eronate motoarelor de
cutare. n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de cei interesai.
Atenie!
Nu uitai c paginile vor fi publicate pe Web, unde, pentru a-i atinge scopul, adic pentru a fi citite,
trebuie mai nti descoperite de cititori, cel mai frecvent prin intermediul motoarelor de cutare.
13. Rezumat
Browserul afieaz textele cu cte un singur spaiu ntre cuvinte i nu recunoate sfritul de linie i
nceputul unei linii noi. Elementele de formatare a textului se introduc n documentul HTML prin
intermediul unor etichete specifice:
trecerea la un rnd nou: eticheta <BR>

<BR clear="left, right, all">text
introducerea unui titlu: etichetele <H1> - <H6>

<Hn align="left, right, center">text</Hn>
introducerea unui paragraf: eticheta <P> </P>

<P align="left, right, center" nowrap>text</P>
30
preformatarea textului: eticheta <PRE> </PRE>
<PRE>text</PRE>
centrarea textului: eticheta <CENTER> </CENTER>

<CENTER>text</CENTER>
afiarea textului pe o singur line: eticheta <NOBR> </NOBR>

<NOBR>text</NOBR>
crearea unui diviziuni n text: eticheta <DIV> </DIV>

<DIV align="left, right, center">text</DIV>
inserarea unei linii orizontale: eticheta <HR>

<HR size="valoare" width="valoare" color="#RGB sau nume_culoare"
align="left, right, center">
inserarea unei adrese: eticheta <ADDRESS> </ADDRESS>

<ADDRESS>text</ADDRESS>
inserarea unui citat: etichetele <BLOCKQUOTE> </BLOCKQUOTE> i <CITE> </CITE>

<BLOCKQUOTE>text</BLOCKQUOTE>
<CITE>text</CITE>
inserarea caracterelor speciale prin comanda &;
31
LECIA 6
Legturi (link-uri)
Legturile (links) reprezint, poate, partea cea mai important a unei pagini Web. Ele transform un text
obinuit n hypertext - un nou tip de text, diferit de cel din clasicele pagini de carte, care permite trecerea
rapid de la o informaie aflat pe un anumit computer la alt informaie memorat pe un alt computer
localizat oriunde n lume.
1. Adresa URL
Pentru a stabili o legtur cu o alt pagin (un alt fiier) trebuie s specificm adresa URL a acestuia.
URL este un acronim, de la Uniform Resource Locator, i reprezint adresa de identificare a unei resurse
(a unui fiier) aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la Internet. O
adres URL const dintr-un ir de caractere care identific n mod unic o anumit resurs, oferind
informaii despre numele serverului pe care este stocat acea resurs precum i despre localizarea ei.
Exist mai multe etichete HTML care folosesc adresa URL drept valoare pentru anumite atribute:
etichetele care introduc legturi, imagini sau formulare. Toate acestea folosesc aceeai sintax a adresei
URL pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia.
Sintaxa general a unei adrese URL este:
schema://server_gazda:port/calea_catre_fisier
unde:
schema - reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi HTTP, FTP,
Gopher, Telnet, etc.
server_gazda - reprezint identificatorul serverului pe care este gzduit fiierul respectiv. Acest
identificator poate fi adresa IP a serverului sau numele su.
port - reprezint numrul portului de comunicaie prin intermediul cruia browserul se conecteaz la
server. Serverele dein mai multe astfel de porturi, fiecare servind unui alt tip de comunicaie: HTTP,
FTP, pot electronic, etc. Portul prestabilit n cazul transferului prin HTTP are numrul 80.
Numrul portului trebuie precizat numai n cazul cnd acesta este diferit de 80.
calea_catre_fisier - reprezint localizarea ierarhic a fiierului n sistemul de directoare de pe server.
Aceasta const ntr-unul sau mai multe nume desprite prin caracterul "/" (slash)
Iat cteva exemple de adrese URL mpreun cu explicaii referitoare la sintaxa lor:
http://www.autor.com/carti.html
n acest exemplu adresa URL indic documentul HTML numit carti.html care se afl directorul rdcin
al serverului www.autor.com
http://www.autor.com/
Aceast adres indic prima pagin (home page) a aceluiai server.
http://www.autor.com:8080/
Exemplul de mai sus indic de asemenea spre prima pagin a serverului www.autor.com, dar specificnd
i numrul portului care este diferit de cel prestabilit.
http://www.autor.com/carti.html#webdesign
n acest exemplu este indicat calea spre documentul HTML carti.html aflat pe acelai server, dar
specificndu-se o anumit seciune a acestui document, seciune denumit webdesign.
32
n cazul cnd fiierul spre care este fcut legtura este stocat pe propriul calculator se folosete o adres
URL de forma urmtoare:
file://server/calea_catre_fisier
unde:
server - reprezint numele computerului pe care este stocat fiierul (acelai pe care ruleaz
browserul). n acest caz, browserul va accesa fiierul folosind facilitile obinuite ale sistemului de
operare de pe computerul propriu.
calea_catre_fisier - reprezint localizarea fiierului n structura de directoare conform regulilor
sistemului de operare
Numele computerului personal poate fi nlocuit cu numele generic "localhost". n acest caz, adresa URL
poate avea urmtoarea form:
file://localhost/calea_catre_fisier
De exemplu fiierul culori.html care este salvat n folderul de lucru Work din My Documents pe
computerul personal va avea urmtoarea adres URL:
file://localhost/C:\My Documents\Work\culori.html
Termenul localhost poate fi omis, deoarece este numele prestabilit al computerului propriu. n acest caz
este necesar prezena unui caracter "/" suplimentar:
file:///C:\My Documents\Work\culori.html
n practic, atunci cnd dorim s adresm un fiier aflat pe computerul propriu putem omite prima parte a
adresei URL obinnd urmtoarea form:
C:\My Documents\Work\culori.html
Atenie!
Se poate observa c n cazul resurselor stocate pe servere externe, numele directoarelor care fac parte
din calea ctre resurs sunt desprite prin caracterul "/" (slash).
La fiierele stocate pe computerul propriu, directoarele i subdirectoarele care formeaz calea ctre
fiier sunt desprite prin caracterul "\" (backslash). Cele dou moduri de scriere sunt specifice celor
dou sisteme de operare: UNIX, respectiv DOS-Windows.
Deoarece marea majoritate a serverelor Web folosesc sistemul de operare UNIX, calea ctre resursele
stocate pe ele se scrie respectnd conveniile acestui sistem. Mai mult, aceast convenie s-a extins i la
adresele URL referite de pe sisteme Windows. Astfel, dac dorii s adresai un fiier numit foto.jpg aflat
pe discul C:, n My Documents,folderul Imagini putei folosi adresa URL:
C:/My Documents/Imagini/foto.jpg
2. Adrese absolute i adrese relative
Pentru a putea localiza un fiier n structura ierarhic de directoare, n scopul de a stabili o legtur ctre
el, se poate folosi adresarea absolut sau adresarea relativ.
Adresa absolut a unui fiier conine calea precis i complet ctre fiierul respectiv pornind de la
vrful ierarhiei de directoare:
C:/Manual HTML/Exemple/culori.html
33
Fiierul culori.html se afl plasat pe discul C:, n directorul Manual HTML, subdirectorul Exemple.
Adresa relativ a unui fiier precizeaz poziia acestuia n raport cu documentul HTML din care este
apelat. Vom reveni ceva mai jos asupra acestui subiect.
3. Stabilirea legturilor
Pentru a insera legturi ntr-un document HTML folosim eticheta <A> </A>.
Eticheta <A> este o etichet container, prezena etichetei de nchidere fiind obligatorie.
Atributul obligatoriu al etichetei <A> este href (Hypertext Reference) care primete ca valoare adresa
URL a fiierului cu care dorim s stabilim legtura. Acest fiier poate fi un document HTML, o imagine
sau un fiier de alt tip. Documentul HTML n care este prezent legtura se numete surs iar fiierul
ctre care este fcut legtura se numete int. Sintaxa etichetei <A> este urmtoarea:
<A href="adresa_URL">text sau imagine</A>
ntre etichetele <A> i </A> poate fi plasat un text obinuit sau o imagine. n mod prestabilit textul inclus
ntre etichetele <A> este afiat subliniat i de culoare albastr iar imaginile au un chenar de culoare
albastr. Folosirea etichetei <A> imbricat cu etichete de formatare a textului, fonturi, liste sau tabele se
face plasnd eticheta <A> n interiorul acestora.
n acest sens, standardul HTML consider incorect o construcie ca aceasta:
<A href="adresa_URL"><FONT face="tip"> Legatura</FONT></A>
n locul ei vom folosi construcia:
<FONT face="tip"><A href="adresa_URL"> Legatura</A></FONT>
Atenie!
Nu este permis imbricarea mai multor etichete <A>.
n funcie de localizarea intei (a resursei referite de legtur) putem clasifica legturile astfel:
legturi n cadrul aceleiai pagini (ancore)

legturi ctre o pagin aflat n acelai folder
legturi ctre o pagin aflat n alt folder
legturi ctre pagini externe
4. Ancore - legturi n cadrul aceleiai pagini
Pentru a facilita navigarea ntr-o pagin care conine un text de mari dimensiuni se pot insera n acesta
anumite puncte de reper ctre care se definesc legturi. Acestea se numesc ancore.
Pentru a plasa o ancor sunt necesare dou elemente:
1. Punctul spre care dorim s facem legtura.

Acesta se definete insernd n punctul din pagin dorit (de obicei n dreptul unui anumit element din
pagin: un titlu, o imagine, o alt legtur, un tabel, etc.) eticheta <A>, nsoit de atributul name
care primete ca valoare un nume de identificare atribuit ancorei (de exemplu "nume_ancora" ). Prin
urmare, identificarea punctului spre care se face legtura se realizeaz astfel:
<A name="nume_ancora"> </A>
34
2. Legtura propriu-zis, care se definete folosind atributul href al etichetei <A>. n exemplul de
mai sus, acesta primete ca valoare "#nume_ancora". Stabilirea legturii se realizeaz dup
urmtoarea sintax:
<A href="#nume_ancora">text explicativ</A>
Textul explicativ va fi afiat n mod diferit, n format hyperlink, subliniat i de culoare prestabilit
albastr.
n momentul cnd se efectueaz click cu mouse-ul pe text explicativ se realizeaz un salt n cadrul
paginii, browserul afind partea din pagin care ncepe de la elementul n dreptul cruia a fost inserat
ancora.
Atenie!
Prezena semnului #, plasat naintea numelui ancorei, este obligatorie. Acesta indic browserului faptul
c este vorba despre o legtur intern, n cadrul paginii. n cazul n care semnul este omis, browserul
va cuta acest nume n afara paginii, unde, evident, nu l va gsi.
Pentru a introduce o legtur ctre o ancor definit n alt document (alt pagin) aflat n acelai director,
atributul href primete o valoare de forma:
href="nume_fisier.html#nume_ancora".
Exemplul 6.1 ilustreaz cele dou situaii. Pentru a exemplifica modul n care poate fi inserat o ancor
ntr-un alt document i cum poate fi ea referit, am inserat n documentul text14.html ancora <A
name="citat">.
Exemplul 6. 1
<HTML>
<HEAD>
<TITLE>legaturi1</TITLE>
</HEAD>
<BODY>
<A name="ancora1"></A>
<H1 align="center">Ancore definite in acelasi document</H1><HR>
<BR>A<BR>B<BR>C<BR>D<BR>E
<BR>F<BR>G<BR>H<BR>I<BR>J
<BR>K<BR>L<BR>M<BR>N<BR>O
<BR>P<BR>R<BR>S<BR>T<BR>U
<BR>V<BR>W<BR>Z<BR>X<BR>
<A href="#ancora1">Sus</A>
<BR><BR>
<H1 align="center" >Ancore definite in alt document</H1><HR><P>
Click
<A href="text14.html#citat">AICI </A>
pentru a deschide un document situat in alta pagina
</BODY>
</HTML>
Observaie
Construciile de mai jos au acelai rol, i anume inserarea unei ancore denumit "ancora1" n punctul
din pagin care conine elementul "ELEMENT".
<A name="ancora1">ELEMENT</A>
<A name="ancora1"></A>ELEMENT
35
n mod normal, eticheta <A> fiind o etichet container, ntre etichetele de deschidere i de nchidere
trebuie s figureze un text. Totui, n exemplul de mai sus, dorind s inserm o ancor n dreptul titlului,
am folosit cea de-a doua construcie:
<A name="ancora1"></A>
<H1 align="center">Ancore definite in acelasi document</H1>
Motivul este acela c este considerat o practic incorect includerea etichetelor de titlu ntre etichetele
<A> i </A>.
Se poate utiliza i construcia urmtoare:
<H1 align="center"><A name="ancora1">Ancore definite in acelasi

document</A></H1>
5. Legtura ctre o pagin aflat n acelai director (folder)
Pentru a realiza o legtur ctre o pagin aflat n acelai director se procedeaz astfel:
<A href="nume_fisier.html">text explicativ</A>
unde:
href reprezint atributul care stabilete calea ctre inta cu care se face legtura. Dac fiierul int
este n acelai director, atributul primete ca valoare chiar numele fiierului.
text explicativ - reprezint textul pe care se face click cu mouse-ul pentru a activa legtura.
(De exemplu "Click aici" ). Acest text este afiat diferit fa de restul textului - n general, subliniat i
de culoare albastr.
n Exemplul 6.2 este realizat o legtur reciproc ntre dou pagini aflate n folderul de lucru Work.
Exemplul 6. 2
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Pagina 1 </H1><HR>
<A href="legaturi3.html">Link catre pagina 2 </A>
</BODY>
</HTML>
Salvai acest exemplu cu numele legaturi2.html iar exemplul urmtor (Exemplul 6.3) cu numele
legaturi3.html.
Exemplul 6. 3
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Pagina 2 </H1><HR>
</BODY>
</HTML>
La fel cum ai procedat i pn acum, deschidei una dintre cele dou pagini cu browserul i testai
funcionarea legturii dintre ele.
36
Ambele documente HTML trebuie salvate n acelai folder. Vei observa c atunci cnd v aflai n Pagina
1 i facei click cu mouse-ul pe textul Link ctre Pagina 2 se va deschide cel de-al doilea document
HTML i invers, legtura dintre cele dou pagini fiind astfel reciproc.
Atenie!
Numele fiierelor care reprezint valori ale atributului href sunt case sensitive. Acelai lucru se
ntmpl i cu textul care desemneaz valorile atributului name.
Aceasta nseamn c fiierul legaturi5.html este diferit de fiierul Legaturi5.html, iar ancora <A
name="ancora1"> este diferit de
<A name="Ancora1">
Pentru a evita greelile, este recomandat s v denumii toate fiierele sau numele pentru ancore cu litere
mici.
6. Legtura ctre o pagin localizat n alt director (folder)
Dac pagina cu care vrem s facem legtura se afl pe acelai calculator, dar ntr-un alt folder, atunci
pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ sau adresarea
absolut.
Adresarea absolut se realizeaz preciznd calea (path) complet, pornind de la directorul rdcin, prin
care se poate ajunge la fiierul de care vrem s legm pagina.
De exemplu, dac fiierul culori1.html se afl pe discul C:,n folderul My Documents, n folderul Work, o
legtur ctre el se va face n modul urmtor:
<A href="C:/My Documents/Work/culori1.html>Link</A>
Adresarea relativ precizeaz calea ctre documentul cu care facem legtura pornind de la documentul n
care ne aflm. Pentru a urca un nivel n structura de directoare se folosete irul de caractere "../ "
Exemplu
S presupunem c ne aflm ntr-un document HTML numit legaturi2.html plasat n folderul de lucru
Work. n afar de folderul Work n care lucrm, n My Documents se mai afl un folder, numit
Imagini,ca n structura prezentat n Schema 6.1.
Schema 6.1.
C:
C:
My Documents
Work
e legaturi2.html
Imagini
trandafir.gif
Dorim s realizm o legtur cu un fiier numit trandafir.gif din folderul Imagini.

n acest caz, eticheta <A>, plasat n documentul legaturi2.html, va avea urmtoarea form:
37
<A href="../Imagini/trandafir.gif">Deschide imaginea</A>
Semnificaia este urmtoarea:
Prin folosirea irului de caractere "../" (punct punct slash) se urc un nivel n ierarhia de directoare, n
raport cu directorul curent. Prin urmare, ntruct folderul curent, n care se afl pagina de pornire este
C:/My Documents/Work, prin utilizarea irului de caractere "../" se ajunge n folderul printe, care este
C:/My Documents. De aici se continu calea n folderul Imagini, dup care se specific numele fiierului
din acest folder cu care vrem s stabilim legtura.
Exemplu
S presupunem c ne aflm n documentul legaturi2.html poziionat ca n Schema 6.2.

Schema 6.2
C:
C:
My Documents
Manual HTML
Exemple
Legaturi
e legaturi2.html
Dorim s stabilim o legtur cu un fiier numit text2.html care se afl n directorul Exemple (directorul
printe al folderului nostru, Legaturi). Atunci referirea se va face astfel:
<A href="../text2.html">Link la text</A>
Am urcat un nivel n ierarhie ajungnd n directorul Exemple i am specificat numele fiierului cu care
dorim s facem legtura.
Dac fiierul text2.html se afl cu dou nivele mai sus fa de folderul n care lucrm, adic dac se afl n
folderul Manual HTML, atunci adresarea se face astfel:
<A href="../../text2.html">Link la text</A>
n general, de cte ori este posibil, este de preferat s folosii adresarea relativ, pentru ca documentele
HTML s fie portabile (mutarea lor s nu invalideze legturile stabilite ntre diverse documente).
7. Legtura ctre pagini externe
O legtur ctre o pagina extern se realizeaz simplu, prin utilizarea etichetei <A> </A>, specificnd
adresa URL a paginii ca valoare a atributului href
astfel:
href="http://URL_pagina"
Reamintim c specificarea adresei URL se poate face fie folosind numele serverului pe care este stocat
pagina fie adresa IP a acestuia.
Evident, pentru ca link-ul s funcioneze, trebuie ca utilizatorul s fie conectat la Internet (lucru valabil
pentru toate legturile externe).
38
n Exemplul 6.4 este stabilit o legtur ctre pagina de start Yahoo.
Exemplul 6. 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Link catre Yahoo.com</H1><HR>
<A href="http://www.yahoo.com"> Yahoo!</A>
</BODY>
</HTML>
Un atribut util al etichetei <A> este title. Acesta determin apariia unei mici ferestre (tool tip) n
pagina Web cnd mouse-ul se afla pe o legtur, fereastr n care este afiat valoarea dat acestui atribut,
care are astfel menirea de a furniza informaii suplimentare despre semnificaia unei legturi.
Exemplul 6.5 ilustreaz utilitatea atributului title.
Exemplul 6. 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Atributul title</H1><HR>
<A href="http://www.google.com" title="Legatura catre
Google.com">Google</A>
</BODY>
</HTML>
8. Alegerea culorilor pentru legturi
Am mai discutat despre acest subiect i la capitolul despre culori. n mod prestabilit (default) se utilizeaz
trei culori pentru legturi:
culoare pentru legturile nevizitate (nu s-a efectuat nici un click pe ele) - albastru
culoare pentru legturile vizitate (s-a efectuat cel puin un click pe ele) - violet
culoare pentru legturile active (deasupra crora se afl mouse-ul la un moment dat, dar nc nu s-a
efectuat click) - rou
Pentru a modifica dup preferine aceste culori se folosesc cele trei atribute ale etichetei <BODY>:
link pentru legturile nevizitate;

vlink pentru legturile vizitate;
alink pentru legturile active.
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform codului hexazecimal.
Exemplul 6.6 ilustreaz modul cum pot fi modificate culorile legturilor.
Exemplul 6. 6
<HTML>
<HEAD>
</HEAD>
<BODY link="yellow" vlink="green" alink="magenta">
<H1 align="center">Setarea culorilor pentru link-uri</H1><HR>
39
<BR>galben pentru legaturi, verde pentru legaturi vizitate si
magenta pentru legaturi active<BR>
<A href="legaturi2.html">Link catre pagina 1 </A><BR>
</BODY>
</HTML>
9. Utilizarea potei electronice (e-mail)
ntr-o pagin Web se pot afla legturi care permit lansarea n execuie a aplicaiei de expediere a
mesajelor electronice a celui care viziteaz pagina. Fcnd click pe textul care nsoete legtura,
programul de pota electronic al vizitatorului paginii se va deschide automat, avnd cmpul adresei
destinatarului, "To:" deja completat cu adresa de mail specificat n pagin. Pentru a realiza acest lucru se
folosete comanda mailto: atributul primind ca valoare adresa respectiv:
<A href="mailto:adresa_e-mail">
Dac pagina este vizualizat cu browserul Internet Explorer iar vizitatorul are instalat un e-mail manager,
cum sunt de pild aplicaiile Microsoft Outlook sau Outlook Expres, activarea legturii va determina
deschiderea unuia dintre aceste programe. n cazul n care managerul de e-mail default este de alt tip
dect aplicaia Microsoft, (Eudora, de exemplu) aceasta va porni de asemenea automat, cu o nou pagin
Send i cu adresa destinatarului pre-completat.
Dac pagina este vizualizat n Netscape, se va deschide programul de pot electronic ncorporat n
browser.
n exemplul urmtor (Exemplul 6.7), n momentul cnd vizitatorul paginii face click pe textul " Trimitei
un mesaj", aplicaia de pot electronic este lansat automat, prin intermediul serviciului mailto:, iar
cmpul care trebuie completat cu adresa de mail a destinatarului mesajului este de asemenea completat
automat cu adresa autor@domeniu.com.
Exemplul 6. 7
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Expediere de mesaje electronice
</H1><HR>
<A href="mailto:autor@domeniu.com" title="adresa mea de mail">
Trimiteti un mesaj </A>
</BODY>
</HTML>
10. Legturi ctre fiiere oarecare
O pagin Web poate conine legturi nu doar ctre alte fiiere HTML, dar i ctre fiiere de orice alt tip,
aflate pe calculatorul propriu sau oriunde pe Web. Ca i n cazul legturilor cu alte pagini (documente
HTML) vom folosi eticheta <A> </A>, astfel:
<A href="URL_fisier_destinatie">text explicativ<A>
Nefiind vorba despre un fiier HTML, browserul nu va putea s l proceseze, astfel c va activa procesul
de transfer sau de descrcare (download), urmnd ca, dup transferul integral al fiierului, utilizatorul s l
deschid cu un program adecvat.
n Exemplul 6.8, atunci cnd se efectueaz click pe legtur se deschide caseta de dialog File download
care permite:
40
salvarea fiierului pe disc sau
deschiderea fiierului n locaia curent
Exemplul 6. 8
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Legaturi catre fisiere oarecare</H1><HR>
<A href="html.zip">
Link catre fisierul download.zip
</A>
</BODY>
</HTML>
11. Deschiderea paginilor referite printr-o legtur
Pagina nou, apelat prin activarea unei legturi se poate deschide n dou moduri, n raport cu pagina
surs:
n aceeai fereastr
ntr-o fereastr nou
n mod prestabilit, legturile deschid pagina pe care o refer n fereastra curent. Aceasta nseamn c
dac vei face click pe un link, noua pagin se va ncrca n locul paginii deja deschise (n aceeai instan
a browserului). Pentru a reveni la pagina anterioar trebuie s apsai butonul Back al browserului.
Acest comportament se poate schimba cu ajutorul valorilor atributului target, asupra cruia vom reveni
la capitolul Cadre.
Vom meniona aici doar dou dintre aceste valori, corespunztoare celor dou situaii amintite.
Pentru ca pagina apelat s se deschid ntr-o fereastr nou, se utilizeaz sintaxa generic de mai jos, n
care atributul target are valoarea "_blank":
<A href="adresa_URL" target="_ blank">text explicativ</A>
Pentru ca pagina referit s se deschid n aceeai fereastr cu pagina surs, atributului i se asociaz
valoarea "_self":
<A href="adresa_URL" target="_self">text explicativ</A>
Modul n care se deschide o pagin ntr-o nou fereastr - exemplul 6.9.

Exemplul 6. 9
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Deschiderea paginii in alta fereastra</H1> <HR>
Pagina de mai jos se va deschide intr-o fereastra noua
<P>
<A href="tabel culori.html" target="_blank">Tabelul culorilor</A>
</BODY>
</HTML>
41
12. Crearea unei bare secundare de navigare
n foarte multe site-uri ai observat, probabil, existena, n partea de jos a paginii, a unui bloc de text care
conine legturi ctre paginile care compun site-ul, legturile fiind delimitate de mici linii verticale, ca n
exemplul de mai jos:
|Culori| |Fonturi| |Blocuri de text|
Utilitatea acestei bare este evident legat de facilitarea navigrii n site, mai ales n cazurile cnd
dimensiunea paginii depete un ecran. n acest caz, utilizatorul trebuie s deruleze la citire paginile pe
vertical, astfel c link-urile de pe bara de navigare superioar nu mai sunt accesibile.
O astfel de bar secundar de navigare se poate realiza procednd ca n Exemplul 6.10. Evident, legturile
vor face referire la fiierele HTML dorite de dumneavoastr.
Exemplul 6. 10
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Bara de navigare</H1><HR>
<H4 align="center">
<A href="culori1.html">|Culori|</A>
<A href="fonturi1.html">|Fonturi|</A>
<A href="text1.html">|Formatarea textului|</A>
</H4>
</BODY>
</HTML>
Bara vertical inserat ntre textele care trimit la paginile respective este de obicei plasat pe tastatur pe
aceeai tast cu caracterul "\" (backslash). Dac dorii ca bara s fac parte din textul activ, o vei insera
ntre etichetele <A> i </A>, altminteri ea trebuie plasat n afara acestora, astfel:
|<A href="culori1.html">Culori</A>|
13. Rezumat
Adresa URL const dintr-un ir de caractere care identific n mod unic o anumit resurs oferind
informaii despre numele serverului pe care este stocat acea resurs i despre localizarea ei n structura
de directoare de pe server.
Legturile se introduc ntr-un document HTML prin intermediul etichetei container <A> </A>
conform urmtoarei sintaxe generale:
<A href="adresa_URL" name="nume" title="text" target="tinta">text sau

imagine</A>
n funcie de locul unde este plasat documentul referit exist mai multe tipuri de legturi:
Legturi n cadrul aceleiai pagini (legturi interne, ancore). Pentru a crea o legtur intern sunt
necesari doi pai: definirea numelui ancorei i stabilirea legturii .
Legturi cu pagini aflate n acelai director. Pentru a stabili o legtur cu o pagin aflat n acelai
director se specific drept valoare a atributului href chiar numele fiierului HTML.
42
Legturi cu pagini aflate n alt director. Pentru a stabili locaia documentului cu care facem legtura
se poate folosi adresarea relativ (recomandat) sau adresarea absolut.
Legturile externe. n cazul legturilor externe, atributul href primete ca valoare adresa URL a
paginii respective.
Se pot stabili i legturi ctre fiiere oarecare (nu neaprat documente HTML). La activarea unei astfel de
legturi se deschide fereastra de download a sistemului.
Cu ajutorul comenzii mailto: se lanseaz automat n execuie aplicaia de pot electronic a

vizitatorului paginii.
43
LECIA 7
IMAGINI I ELEMENTE MULTIMEDIA
Imaginile i elementele multimedia constituie, fr ndoial, o latur interesant i

spectaculoas a oricrei pagini de Web. Putei include n paginile dumneavoastr fotografii, imagini
animate, sunete sau imagini video. Atunci cnd sunt folosite n mod judicios, aceste elemente pot
mbogi coninutul paginilor Web, oferindu-le un aspect atractiv i profesional. Pe de alt parte, folosirea
lor n exces poate da paginilor un aspect ncrcat i confuz i poate conduce la mrirea considerabil a
timpului de ncrcare al paginii.
1. Formatele fiierelor grafice
Imaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe Web fiind, aa cum era
firesc, cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului.
Aceast opiune este determinat de faptul c majoritatea utilizatorilor Internetului dispun de
conexiuni telefonice dial-up, cu viteze destul de mici, astfel c timpul de ncrcare al fiierelor, care
depinde de dimensiunea acestora, devine un factor determinant.
Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint Photographic Experts
Group) i GIF (Graphics Interchange Format).
Formatul GIF
Formatul GIF (.gif) folosete 256 de culori i este ideal pentru icon-uri, ilustraii i animaie.
Acest format utilizeaz o tehnologie special de comprimare care reduce semnificativ dimensiunile
fiierelor grafice pentru un transfer mai rapid prin reea. n procesul de comprimare se pstreaz toate
caracteristicile imaginii originale, astfel c dup decomprimare imaginea are acelai aspect ca i
originalul.
Imaginile GIF suport efecte de transparen i animaie, asupra crora vom reveni pe larg n
capitolul Elemente avansate de grafic.
Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent
utilizat n paginile Web. Poate fi folosit pentru a include imagini direct n pagini (imagini in-line) precum
i pentru a referi imaginile prin intermediul unor legturi externe.
Totui, datorit numrului redus de culori, formatul GIF nu este potrivit pentru fotografii sau
imagini de calitate nalt. Pentru acest tip de imagini, cel mai adecvat este formatul JPEG.
Formatul JPEG
Formatul JPEG (.jpg), pe de alt parte, suport un numr mult mai mare de culori (aproximativ 16
milioane). Dac dorii s folosii imagini fotografice, formatul JPEG este recomandat, datorit calitii
superioare a imaginii. Dimensiunile unui fiier JPEG nu depind de numrul de culori ci de gradul de
comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat dect cel al formatului
GIF. Nu este neobinuit, de exemplu, ca un fiier GIF care are 200 de Kb s fie comprimat ca fiier JPEG
pn la dimensiunea de 30 de Kb.
Pentru a realiza un grad att de nalt de comprimare a imaginilor, formatul JPEG pierde anumite
informaii din imaginea original. Cu toate c la decomprimare imaginea JPEG nu va fi absolut identic
cu imaginea original, diferenele vor fi de cele mai multe ori inobservabile.
44
Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraii,
desene sau imagini de dimensiuni reduse. Algoritmii folosii pentru comprimarea i decomprimarea
imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singur nuan. Din acest
motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie care folosete un numr redus de
culori, formatul GIF este cel mai potrivit.
2. Cteva metode de obinere a imaginilor
Avei la ndemn diverse moduri n care putei crea sau procura imagini pe care s le includei n
paginile dumneavoastr:
Crearea imaginilor cu ajutorul unui program de grafic - cele mai performante sunt Adobe Photoshop
i CorelDraw.
Scanarea fotografiilor realizate cu aparate foto tradiionale i, eventual, prelucrarea lor ulterioar cu
editoare grafice.
Folosirea aparatelor de fotografiat digitale - dei sunt nite echipamente nc destul de costisitoare
prezint marele avantaj c furnizeaz imagini digitale sub form de fiiere grafice n formate comune,
care se pot descrca direct pe hard-disk, i care se pot utiliza ca atare sau dup o prelucrare grafic
minim.
Preluarea imaginilor de pe Web. Numrul site-urilor care ofer colecii de imagini gratuite i care pot
fi utilizate liber este imens. Totui, atunci cnd dorii s folosii n pagina dumneavoastr o imagine
care nu face parte dintr-o astfel de colecie, trebuie s avei n vedere aspectul drepturilor de autor.
Pentru a prelua o imagine de pe Web trebuie s o salvai pe hard-disk-ul dumneavoastr. Putei realiza
acest lucru astfel:
- plasai cursorul pe imaginea respectiv i apsai butonul drept al mouse-ului

- selectai din meniul care se deschide Save Image As...
- n fereastra de dialog selectai folderul de destinaie i numele fiierului
- apsai butonul Save
Este util s v creai unul sau mai multe foldere dedicate imaginilor, organizate pe tipuri (icon,
fundaluri, butoane, imagini propriu-zise, etc.), uneori alctuind adevrate biblioteci, n care s pstrai
toate imaginile pe care intenionai s le folosii n paginile dumneavoastr. Deasemenea, de mare utilitate
sunt aplicaiile de gestionare a imaginilor, cum este de exemplu cunoscutul ACDSee.
Atenie!
Dac imaginea nu este salvat n acelai folder n care se afl documentul HTML surs care folosete
imaginea respectiv, referina la imagine trebuie s conin calea corect ctre locaia ei, altminteri
imaginea nu va fi afiat n pagin.
3. Inserarea unei imagini
Pentru a insera o imagine n cadrul unei pagini (o imagine in-line), se utilizeaz eticheta <IMG>
(de la image). Eticheta <IMG> nu este o etichet container, prin urmare nu necesit o etichet
corespunztoare de nchidere.
Pentru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src (source) al
etichetei <IMG>. Atributul src i comunica browserului numele i locaia imaginii care urmeaz s fie
inserat. Valoarea acestui atribut este adresa URL a imaginii respective.
Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine, atunci
adresa URL a imaginii este formata numai din numele fiierului, inclusiv extensia.
45
<IMG src="imagine.extensie">
Dac imaginea se afla ntr-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea
absolut fie, preferabil, prin cea relativ.
Exemplul 7.1 ilustreaz modul n care se pot insera ntr-o pagin dou imagini, una dintre ele
aflndu-se n acelai folder ca i pagina surs, iar cealalt n folderul Imagini. Figura 7.1 red aspectul
paginii descrise n exemplu.
Exemplul 7. 1
<HTML>
<HEAD>
<TITLE>imagini1</TITLE>
</HEAD>
<BODY>
<H1 align="center">Imagini in pagina</H1><HR>
Imagine aflata in acelasi folder<P>
<IMG src="tiger.gif" border="5"><P>
Imagine aflata in folderul Imagini<P>
<IMG src="../Imagini/bernese.jpg" border="1" >
</BODY>
</HTML>
n acest exemplu este prezent i atributul border al etichetei <IMG>. Acesta este folosit pentru
a plasa un chenar n jurul imaginii. Valoarea atributului border este numrul de pixeli care reprezint
grosimea chenarului din jurul imaginii. Absena atributului sau setarea la valoarea "0" face ca acest
chenar s nu fie prezent.
Un alt atribut util asociat etichetei <IMG> este alt. Acest atribut permite afiarea unui text
explicativ n spaiul n care va fi afiat imaginea n pagin.
n Exemplul 7.2 este ilustrat utilitatea atributului alt.

Exemplul 7. 2
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center"> Atributul alt </H1><HR>
Acesta este un...<BR>
<IMG src="../Imagini/orangerose" alt="trandafir">
</BODY>
</HTML>
Dup cum putei observa din Figura 7.2 imaginea pe care am inclus-o n document nu este
afiat. Motivul este faptul c am omis intenionat extensia .gif a fiierului pentru a exemplifica utilitatea
atributului alt. Prin urmare, dac dintr-un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc
mai greu, sau este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii va fi afiat
textul specificat ca valoare a atributului alt.
De asemenea, textul specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici
ferestre care se deschide n momentul cnd cursorul mouse-ului este meninut deasupra imaginii.
Un alt motiv pentru care este indicat folosirea atributului alt este acela c vizitatorul paginii
are posibilitatea de a vedea nc nainte de ncrcarea complet a imaginii ce anume se va afia n zona
respectiv. Astfel, el are posibilitatea de a atepta ncrcarea complet a imaginii sau de a trece la alt
pagin.
46
4. Dimensionarea imaginii
Dimensionarea imaginii se realizeaz cu ajutorul atributelor width - prin care se stabilete

limea imaginii i height - prin care se stabilete nlimea imaginii.
n Exemplul 7.3 sunt precizate i dimensiunile imaginii incluse n document. Se observ c

dimensionarea imaginilor se face n pixeli. Este, desigur, posibil, ca dimensionarea s se fac n procente,
ca i la liniile orizontale, de exemplu. Totui, n afara unor cazuri speciale, aceasta este considerat o
practic greit, deoarece browserul va redimensiona imaginea iar rezultatele vor fi de calitate slab.
Exemplul 7. 3
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Dimensionarea imaginilor</H1><HR>
<IMG src="tiger.gif" width="350" height="250"><P>
</BODY>
</HTML>
Observnd Figura 7.4 care red aspectul paginii descrise mai sus putem remarca faptul c
setarea dimensiunilor a afectat calitatea imaginii deoarece dimensiunile originale ale imaginii erau
mai mici. Dimensiunile originale ale imaginii tiger.gif, determinate cu ajutorul unui editor grafic,
sunt: lime=200 pixeli, nlime=125 pixeli.
Dac dimensiunile imaginii n pagin sunt setate la valori considerabil mai mari dect
dimensiunile imaginii originale calitatea imaginii incluse n pagin va avea de suferit. Concluzia care se
impune este c dimensionarea imaginilor din pagin trebuie s se fac la valori ct mai apropiate de
dimensiunile iniiale ale imaginilor.
V putei ntreba atunci, de ce mai este necesar includerea atributelor de dimensionare a

imaginii. Nu numai c este necesar, dar este considerat o practic defectuoas absena lor din cadrul
etichetei <IMG>.
Motivul este acela c includerea dimensiunilor imaginii ofer browserului posibilitatea de a

rezerva spaiu pentru imagine i de a ncepe ncrcarea textului simultan cu ncrcarea imaginii. Dac
atributele de dimensionare nu sunt prezente, browserul va efectua nite pai suplimentari pentru a calcula
spaiul din pagin necesar afirii imaginii. Din acest motiv afiarea textului nu va putea ncepe dect
dup ce imaginea este ncrcat n ntregime.
Este indicat s evitam o asemenea situaie deoarece imaginile se ncarc mai greu dect textul i
muli vizitatori ai paginii nu vor atepta suficient pentru ca ntreaga pagin (imagini i text) s fie
ncrcat.
5. Alinierea imaginii i a textului
Alinierea unei imagini n raport cu textul din pagin se realizeaz prin intermediul atributului
align, care poate lua urmtoarele valori:
left - aliniere la stnga; textul este dispus n partea dreapt a imaginii ncadrnd imaginea
right - aliniere la dreapta; textul este dispus n partea stnga a imaginii ncadrnd imaginea
47
top - aliniere deasupra; partea de sus a imaginii se aliniaz cu prima linie a textului ce precede
imaginea
middle - aliniere la mijloc; mijlocul imaginii se aliniaz cu prima linie a textului ce precede
imaginea.
bottom - aliniere dedesubt, la baz; partea de jos a imaginii se aliniaz cu prima linie a textului.
Valorile left, right, i bottom ale atributului align permit ca textul s fie dispus n jurul
imaginii, n vreme ce top i middle nu permit acest lucru.
Exemplul 7.4 ilustreaz modul de aliniere bottom.
Exemplul 7. 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Alinierea imaginii si textului
(bottom)</H1><HR>
<IMG src="../Imagini/eaglehed.gif" align="bottom" width="100"
height="66" alt="vultur">
Imagine text.Imagine text.Imagine text.Imagine text.Imagine
text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine
text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine
text.Imagine text.
text.Imagine text.Imagine text.Imagine text.
</BODY>
</HTML>
Alte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin,
sunt atributele hspace i vspace. Ele precizeaz distana, n pixeli, pe orizontal, respectiv pe
vertical, dintre imagine i restul elementelor din pagin.
n Exemplul 7. 4 vom schimba modul de aliniere n cadrul etichetei <IMG> i vom aduga atributele
hspace, respectiv vspace, astfel:
<IMG src="../Imagini/eaglehed.gif" align="left" width="100"

height="66" alt="vultur" vspace="10" hspace="10">
Ai observat, probabil, c dintre valorile pe care le poate lua atributul align lipsete valoarea
center. ntr-adevr, alinierea unei imagini la centrul paginii nu se poate face prin intermediul
atributului align. Centrarea unei imagini se poate realiza numai dac este izolat de textul care o
nconjoar. Pentru aceasta se poate folosi eticheta <CENTER> sau se poate include imaginea ntr-un bloc
paragraf sau ntr-un bloc <DIV> avnd atributul align setat la valoarea center.
Exemplul 7.5 ilustreaz acest mod de aliniere folosind eticheta <DIV>.
Exemplul 7. 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Centrarea unui imagini</H1><HR>
48
<IMG src="../Imagini/devil.gif" width="64" height="64"
alt="dracusor">
</DIV>
</BODY>
</HTML>
Exemplul 7.6 ilustreaz modul n care pot fi aliniate dou imagini fa de textul din pagin.
Exemplul 7. 6
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Alinierea a doua imagini</H1><HR>
<IMG src="../Imagini/mtnscene.jpg" align="left" width="200"
height="144" align="left" hspace="10" vspace="10">
Imagine text. Imagine text. Imagine text. Imagine text.Imagine
text. Imagine text. Imagine text. Imagine text.
<IMG src="../Imagini/sunscene.jpg" align="right" width="202"
height="132" hspace="10" vspace="10">
Imagine text. Imagine text. Imagine text. Imagine text.Imagine
text. Imagine text. Imagine text. Imagine text.Imagine text.
Imagine text. Imagine text. Imagine text.Imagine text. Imagine
text. Imagine text. Imagine text.Imagine text. Imagine text.
Imagine text. Imagine text.Imagine text. Imagine text. Imagine
text. Imagine text.
</BODY>
</HTML>
6. Imagini folosite ca fond (background) al paginii
O imagine poate fi utilizat i pentru a stabili fondul unei pagini Web. n acest scop se folosete
atributul background al etichetei <BODY>, avnd ca valoare adresa URL a imaginii. Imaginea se
multiplic aliniat (tiling) pe orizontal i pe vertical pn umple ntregul ecran.
Exemplul 7.7 ilustreaz utilizarea atributului background.
Exemplul 7. 7
<HTML>
<HEAD>
</HEAD>
<BODY background="../Imagini/silk.jpg">
<H1 align="center">Imaginea ca fond al paginii</H1><HR>
Fond de matase...
</BODY>
</HTML>
7. Imagini folosite ca legturi
Pentru a folosi o imagine drept legtura se procedeaz ca n urmtorul exemplu:
<A href="tabel_culori.html">
<IMG src="prism.gif" width="100" height="80" alt="culori">
</A>
49
S-a folosit eticheta <A> prin intermediul creia am creat legtura cu fiierul
tabel_culori.html. ntre etichetele <A> i </A> am inclus o imagine care nlocuiete textul
explicativ pe care vizitatorul urmeaz s fac click cu mouse-ul. Imaginea servete, deci, ca legtur ctre
o anumit pagin. Imaginea folosit ca legtura este prism.gif iar pagina spre care este fcut legtura
este tabel_culori.html. n mod prestabilit imaginea utilizat pe post de zon activ este nconjurat de un
chenar avnd culoarea unei legturi (albastru). Dac stabilim pentru atributul border al etichetei
valoarea "0" acest chenar dispare.
Exemplul 7.8 prezint codul complet.
Exemplul 7. 8
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center"> Imagini cu legaturi </H1><HR>
<BR>Am pus o imagine cu legatura pe pagina<P>
<A href="tabel culori.html">
<IMG src="../Imagini/prism.gif" width="100" height="80"
alt="culori">
</A>
</BODY>
</HTML>
8. Imaginile miniaturale (thumbnails)
Dac ntr-o pagin Web este necesar afiarea unui numr mare de imagini, ncrcarea paginii se
va face destul de greu. De multe ori, vizitatorii paginii nu vor avea rbdarea necesar pentru a atepta
ncrcarea integral a paginii.
O soluie de compromis frecvent aplicat pentru scurtarea timpului de ncrcare a unei pagini ce
prezint multe imagini o reprezint utilizarea imaginilor miniaturale (thumbnail-uri). O imagine
thumbnail este o versiune de dimensiuni reduse a unei imagini mai mari, care se ncarc mult mai rapid i
care, dei este de dimensiuni mici i de calitate sczut, permite vizitatorului s afle ce anume reprezint
i s decid dac este interesat sau nu s deschid versiunea integral..
Imaginea miniatural reprezint o legtur spre fiierul cu imaginea original din care provine. n cazul n
care vizitatorul paginii dorete s vad imaginea original, o poate deschide efectund click imaginea
thumbnail.
Realizarea imaginilor miniaturale se poate face fie prin micorarea proporional a imaginilor, fie
prin reducerea lor la o dimensiune prestabilit (strech) chiar dac imaginea se distorsioneaz, n cazul n
care se dorete, de pild, ca toate thumbnail-urile dintr-o pagin s aib aceleai dimensiuni.
Exista dou metode pentru a plasa o imagine thumbnail n pagin:
folosind dou imagini, una fiind imaginea thumbnail iar cealalt, imaginea original
folosind o singur imagine, redimensionat (micorat) direct n pagin
Folosirea a dou imagini
O imagine thumbnail este foarte uor de realizat. Oricare ar fi programul de grafic pe care l
folosii, tot ceea ce avei de fcut este s gsii opiunea Resize (care de obicei face parte din meniul Edit
sau Image) i s precizai n caseta de dialog care se deschide, dimensiunile dorite. Vei observa c exist
50
de regul o opiune setabil pentru pstrarea proporionalitii cu dimensiunile. Dac este activat, dup
stabilirea uneia dintre dimensiuni (width, de exemplu), cealalt (height) este calculat automat.
n Exemplul 7.9 este plasat o imagine thumbnail n pagin, folosind prima metod.
Exemplul 7. 9
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Thumbnails - doua imagini</H1><HR>
<P>
<A href="../Imagini/zdog.gif">
<IMG src="../Imagini/zdog_th.gif"></A>
</BODY>
<HTML>
Fiierul zdog_th.gif conine imaginea thumbnail care este folosit ca legtur, pentru a referi
imaginea original, zdog.gif. Deoarece imaginea thumbnail este folosit ca o legtura ctre imaginea
original, n jurul ei este afiat un chenar prestabilit albastru. Dac dorii ca acest chenar s nu mai fie
afiat, putei folosi atributul border al etichetei <IMG> setat la valoarea "0". Imaginea original se va
deschide n aceeai fereastr cu pagina n care este plasat imaginea thumbnail. Pentru a reveni n pagin,
trebuie s apsai butonul Back al browserului.
Folosirea unei singure imagini
Aceast metod este adesea preferat, deoarece folosete un singur fiier, cel care conine
imaginea original, miniaturizarea ei fcndu-se chiar n pagin, cu ajutorul atributelor width i
height. Este o metoda mai eficient i mai rapid, deoarece imaginea de dimensiuni mari care urmeaz
a fi afiat este deja ncrcat n memoria cache a browserului i este imediat disponibil pentru afiare.
n exemplul urmtor (Exemplul 7.10) am folosit o singur imagine pentru a ncrca att imaginea
thumbnail ct i pe cea cu dimensiunile originale.
Exemplul 7. 10
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Thumbnails - o singura imagine</H1><HR>
<P>
<A href="../Imagini/zdog.gif">
<IMG src="../Imagini/zdog.gif" width="70" height="76"></A>
</BODY>
<HTML>
Dup cum se poate observa, am creat un link (cu ajutorul etichetei <A>) la fiierul zdog.gif care
conine imaginea original. Am folosit drept legtur aceeai imagine, dar redimensionat, folosind
atributele width i height.
n exemplul anterior, imaginea thumbnail este ncrcat prima. n momentul cnd vizitatorul face
click pe ea, este ncrcat imaginea cu dimensiunile originale. Avantajul ultimei metode este faptul c
imaginea este ncrcat de la nceput i redimensionat pentru thumbnail, ceea ce face ca afiarea imaginii
cu dimensiunile originale s fie mai rapid.
51
9. Imaginile video
Pentru a insera o imagine video ntr-un document HTML se folosesc atributele dynsrc,
controls, loop i start ale etichetei <IMG>.
Atributul dynsrc nlocuiete atributul src i permite inserarea n documentul HTML a unei
imagini video n acelai mod n care este inserat o imagine static.
Valoarea atributului dynsrc este adresa URL a fiierului video care va fi inclus n pagin
conform sintaxei:
<IMG dynsrc="URL_fisier_video">
Acest atribut este o extensie Internet Explorer i nu este recunoscut de browserele Netscape.
Pentru a vizualiza o imagine video in-line ntr-un browser Netscape, vizitatorul paginii trebuie s
instaleze un program auxiliar de tip plug-in. Dac programul plug-in nu este disponibil pe computerul
vizitatorului, imaginea video nu va putea fi afiat.
Singurul format de fiiere video care este suportat de extensiile Internet Explorer este AVI (Audio
Video Interleave), deoarece acesta este formatul de redare care este inclus n browser. Construcia de mai
jos include ntr-un document HTML fiierul video introducere.avi care se afl n folderul Video:
<IMG dynsrc="../Video/introducere.avi">
Efectul acestei etichete este deschiderea de ctre browser a unei ferestre de vizualizare n
interiorul paginii Web, fereastr n care va rula clipul video introducere.avi, inclusiv sunetul, dac acesta
face parte din clip i computerul vizitatorului este setat s redea sunetele. Ca i imaginile obinuite,
imaginea video este afiat pe msur ce este ncrcat.
Deoarece nici un alt browser n afar de Internet Explorer nu recunoate aceast extensie, este
recomandat s includei n cadrul etichetei <IMG> i atributul src prin care s furnizai o imagine static
ce va fi afiat n acelai cadru. Browserele care nu recunosc extensia dynsrc vor afia imaginea static
pe cnd Internet Explorer va afia imaginea video. Ordinea n care apar cele dou atribute nu are
importan. De exemplu:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif">
n mod normal, Internet Explorer red clipul video ntr-o fereastr n care nu sunt afiate nici un
fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectund click
dreapta cu mouse-ul n interiorul ferestrei.
Pentru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etichetei
<IMG>. Atributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga
butoanele de control asemntoare celor de la aparatele video. De exemplu:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls>
Clipul video inclus n pagin este redat de browser o singur dat, de la nceput pn la sfrit.
Pentru a repeta redarea clipului de un anumit numr de ori este folosit atributul loop. Valorile posibile
ale atributului sunt:
un numr ntreg care reprezint numrul de reluri ale clipului
infinite, caz n care clipul este redat pn cnd utilizatorul stopeaz derularea sa apsnd butonul
stop al ferestrei de vizualizare (n cazul cnd fereastra conine butoanele de control) sau efectueaz
click dreapta cu mouse-ul n fereastra de vizualizare.
Exemplul de mai jos ilustreaz modul n care poate fi setat atributul loop:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls

loop="infinite">
52
Aa cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n
pagin. Pentru a schimba acest comportament se folosete atributul start care poate avea valorile:
mouseover, situaie n care derularea imaginii video ncepe n momentul cnd mouse-ul este plasat
deasupra imaginii
fileopen, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup ncrcarea n
pagin
Cele dou valori pot fi combinate pentru a se realiza redarea imaginii mai nti imediat dup
ncrcarea n pagin i apoi de fiecare dat cnd mouse-ul este plasat deasupra ei, ca n exemplul urmtor:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls

loop="infinite" start="fileopen, mouseover">
Imaginile video in-line pot fi tratate ca i imaginile statice. O astfel de imagine poate fi aliniat
folosind atributul align, sau poate fi spaiat fa de textul care o nconjoar.
Exemplul 7.11 ilustreaz atributele prezentate mai sus.
Exemplul 7. 11
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Imagini video</H1><HR>
<FONT size="4" color="blue">Clipul video de mai jos face parte din
jocul Heroes 3</FONT><P>
<CENTER>
<IMG dynsrc="../Video/shield.avi" src="../Imagini/banana.gif"
controls start="fileopen, mouseover" loop="infinite">
</CENTER>
</BODY>
</HTML>
10. Sunetele
Dac eticheta <IMG> permite afiarea unei imagini de fundal, exist i o etichet care realizeaz
includerea n pagina Web a unei muzici de fundal i anume eticheta <BGSOUND>. Aceast etichet este,
de asemenea, o extensie Internet Explorer deci nu este recunoscut i executat n alte browsere.
Browserul Internet Explorer conine un decodor de sunet ncorporat i permite integrarea prin
eticheta <BGSOUND> a sunetului de fundal pentru o pagin. Sintaxa etichetei <BGSOUND> este
urmtoarea:
<BGSOUND src="URL_fisier_sunet" loop="valoare">
Atributul src are drept valoare adresa URL a fiierului de sunet care este folosit ca fundal sonor
al paginii.
n mod curent, Internet Explorer recunoate trei tipuri de fiiere de sunet:
fiiere cu extensia .wav care este formatul nativ pentru PC
fiiere cu extensia .au, formatul nativ pentru sistemele UNIX
fiiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor
Pentru a include ntr-o pagin un fiier de sunet se procedeaz ca n exemplul urmtor:
<BGSOUND src="../Sunet/wellcome.wav>
53
Ca i n cazul imaginilor video in-line, fiierul de sunet este redat o singur dat, la ncrcarea
paginii. Pentru redarea sa repetat se folosete atributul loop al etichetei <BGSOUND> care poate avea
ca valori:
un numr ntreg, care reprezint numrul de reluri ale piesei

infinite, caz n care piesa muzical este reluat pn cnd utilizatorul prsete pagina sau
nchide fereastra browserului.
Executai Exemplul 7.12 cu un browser Internet Explorer pentru a observa efectul etichetei
<BGSOUND>. Desigur, este necesar s schimbai adresa URL a fiierului de sunet specificnd un fiier
existent pe hard-disk-ul dumneavoastr.
Exemplul 7. 12
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Muzica de fundal</H1><HR>
<P>
<FONT size="4" color="red">Muzica se va auzi pana cand veti
inchide pagina</FONT>
<BGSOUND src="../Sunet/Welcom98.wav" loop="infinite">
</BODY>
</HTML>
11. Sugestii privind folosirea imaginilor i elementelor multimedia
Cnd folosii imagini ntr-o pagin Web, trebuie s v punei ntrebarea: "Este necesar aceast
imagine sau ar fi suficient s folosesc text?". Chiar dac se spune c o imagine face ct o mie de cuvinte,
acest lucru nu este ntotdeauna adevrat pe Web. nlocuirea textului care conine informaiile eseniale
dintr-o pagin Web cu imagini este adesea o greeal.
Un prim motiv este c nc mai exist browsere non-grafice cum este Lynx, care nu afieaz dect
textul.
Apoi, chiar i n browserele grafice, anumii utilizatori ar putea opta, din varii motive, pentru
dezactivarea afirii imaginilor.
Un alt motiv ar fi acela c, din cauza duratei mari de ncrcare a fiierelor cu imagini de mari
dimensiuni, unii utilizatori ar putea renuna pur i simplu la deschiderea paginii.
i nu n ultimul rnd, deoarece, spre deosebire de text, imaginile pot ntmpina diverse dificulti
tehnice la afiare.
Imaginile dintr-o pagin Web trebuie gndite ca nite instrumente vizuale care au rolul de a
susine i ilustra coninutul scris al paginii. De exemplu, ntr-un catalog on-line imaginile produselor
prezentate sunt eseniale pentru coninutul paginii respective. Icon-urile cu rol de legturi sau instrumente
de navigaie pot reprezenta repere vizuale deosebit de utile n cadrul unui site. Dar dac o imagine nu
servete unui scop bine definit n pagin, e bine s v gndii de dou ori, nainte de a o folosi.
De asemenea se recomand s fii precaut i n privina imaginilor folosite ca fundal

(background).
ntr-adevr, acestea pot oferi un aspect spectaculos paginii dumneavoastr. ns trebuie s fii
contient de faptul c o imagine folosit ca fundal va crete cu siguran timpul necesar ncrcrii paginii.
Dac n cazul imaginilor in-line textul se poate afia naintea sau n timpul ncrcrii imaginii, la
imaginile de fundal afiarea celorlalte elemente din pagin nu va putea ncepe dect dup ncrcarea n
ntregime a fundalului.
54
Mai mult, spre deosebire de imaginile in-line, care pot mbogi coninutul informaional al
paginilor, imaginile de fundal nu aduc cu adevrat dect foarte rar un supliment de informaie. Dei
aspectul unei asemenea pagini poate fi atrgtor, de cele mai multe ori folosirea imaginilor de fundal n
combinaii nefericite cu fonturi de anumite tipuri sau culori, fr contrast suficient, poate face pagina
ncrcat i greu de citit.
Dac totui v decidei s folosii o imagine ca fundal al paginii este recomandat s specificai
simultan i o culoare de fundal, adic s setai atributul bgcolor. Astfel, dac dintr-un motiv oarecare
imaginea de fundal nu se ncarc, pagina va avea totui culoarea prestabilit de dumneavoastr.
Ca i imaginile, i celelalte elemente multimedia trebuie folosite cu discernmnt ntr-o pagin

Web.
Imaginile video au dimensiuni semnificativ mai ari dect iamginile statice, deci se ncarc mult
mai ncet dect acestea astfel nct includerea lor in-line va mri considerabil timpul de ncrcare al
paginii.
n plus, formatele diverse utilizate nu pot fi deschise ntotdeauna cu browserul, unele impunnd
existena unor plug-in-uri sau chiar unor programe speciale.
O metod de compromis recomandat este descrierea coninutului fiierului, eventual inserarea

unui fragment video exemplificativ (sample) de dimensiuni mult mai mici, similar cumva metodei
thumbnail-urilor. Se asigur o legtur i spre fiierul integral, astfel nct, dup vizualizarea exemplului,
vizitatorul s poat alege dac va atepta timpul necesar ncrcrii sale sau nu.
Muzica de fundal este de cele mai multe ori nerecomandat. Foarte muli vizitatori pot vizualiza
paginile dumneavoastr avnd sunetul dezactivat. Folosirea unei muzici de fundal ncetinete ncrcarea
paginii i, n plus, este foarte posibil ca muzica pe care ai ales-o s nu fie pe gustul celor care v viziteaz
pagina, ba chiar s i determine s o prseasc nainte de a citi coninutul acesteia.
Dac este necesar, totui, s introducei muzic sau sunet n paginile dumneavoastr, este o
prevedere neleapt s plasai fiierele de sunet separat i s asigurai legturi ctre acestea astfel nct
vizitatorul s le poat audia, dac dorete.
12. Imaginile i timpul de ncrcare al paginii
Unul dintre cele mai importante aspecte care trebuie luate n considerare la includerea imaginilor
ntr-un document este timpul de ncrcare a documentului.
Durata de ncrcare a paginilor depinde de muli factori. Depinde de modemul i conexiunea

vizitatorului, de performanele serverului gazd, de trafic, de limea de band, etc. Cum nu putei avea
control asupra acestora, singurul lucru care v rmne de fcut este s v construii paginile astfel nct s
aib o bun vitez de ncrcare chiar i n cazul unui vizitator care deine o conexiune modest ca
performane.
Pe lng alegerea cu foarte mult grij a imaginilor care vor fi incluse n document, mai exist
cteva modaliti prin care poate fi ameliorat durata de ncrcare a paginii:
Optimizarea imaginilor. Folosii-v n mod judicios de instrumentele de control al imaginilor puse la

dispoziie de editorul grafic folosit, optimizai dimensiunile imaginii i numrul de culori la ct mai
puine posibil. ncercai s gsii un raport optim ntre dimensiunea fiierului i calitatea imaginii.
Evitai fotografiile sau imaginile de fundal de dimensiuni foarte mari.
Reutilizarea imaginilor. Aceast metod este eficient mai ales n cazul icon-urilor sau elementelor
grafice de navigaie care sunt prezente n mai multe pagini pe parcursul unui site. Cele mai multe
browsere rein n memoria cache elementele documentelor care urmeaz a fi afiate. Astfel, dac o
imagine este utilizat n mai multe pagini aceasta nu trebuie ncrcat de fiecare dat n memorie ci
este disponibil pentru a fi afiat oricnd se face referirea la ea.
55
Divizarea documentelor de dimensiuni mari n mai multe documente de dimensiuni reduse. Aceast
regul general include i paginile care conin imagini in-line. Mai multe documente de dimensiuni
mai mici legate ntre ele prin legturi sunt mai bine acceptate de vizitatori dect un singur document
foarte mare care necesit un timp de ncrcare ndelungat. Regula general acceptat este meninerea
dimensiunilor unui document Web n jurul valorii de 50Kb, incluznd aici i imaginile, desigur.
Folosirea imaginilor thumbnail. Dac pagina conine un mare numr de imagini, folosii imagini
miniaturale care s refere imaginile originale. n plus, ntruct imaginea original referit prin
imaginea thumbnail se poate deschide ntr-o nou fereastr, nefiind asociat cu restul elementelor din
pagin, este mai comod pentru vizitator s o salveze pe computerul propriu pentru o vizualizare
ulterioar.
Specificarea dimensiunile imaginilor. n acest mod este evitat etapa calculrii de ctre browser a
spaiului necesar pentru afiarea imaginii, mbuntindu-se viteza de ncrcare a paginii.
13. Rezumat
Formatele cele mai utilizate pentru fiierele grafice sunt JPEG i GIF.
Inserarea unei imagini ntr-un document HTML se realizeaz cu ajutorul etichetei <IMG>.
Sintaxa etichetei <IMG> este urmtoarea:
<IMG src="URL_imagine" align="pozitie" width="valoare"

height="valoare" vspace="valoare" hspace="valoare" alt="text"
border="valoare" dynsrc="URL_imagine_video" loop="valoare"
start="valoare" controls>
unde:
src precizeaz locaia imaginii
width i height stabilesc dimensiunile imaginii
vspace i hspace stabilesc distana pe vertical i orizontal fa de restul textului din pagin
align aliniaz imaginea fa de textul din jurul ei
alt furnizeaz un text explicativ asupra imaginii
border stabilete grosimea chenarului imaginii
dynsrc introduce o imagine video i precizeaz locaia ei
loop specific numrul de reluri ale imaginii video
start precizeaz momentul nceperii redrii imaginii
controls afieaz butoanele de control ale ferestrei video
Imaginile pot fi folosite ca fond al paginii cu ajutorul atributului background al etichetei <BODY>.
O imagine poate servi drept legtur ctre un alt document HTML prin includerea etichetei <IMG> ntre
etichetele <A> </A>.
O practic des folosit este inserarea n pagin a imaginilor miniaturale care la executarea unui click pe
ele deschid imaginea original.
Muzica de fundal poate fi adugat unui document prin intermediul etichetei <BGSOUND>.
Alegerea imaginilor care vor fi incluse ntr-un document HTML trebuie fcut cu grij, n funcie de rolul
acestora n structura documentului i avnd permanent n vedere timpul de ncrcare al paginii.
56
LECIA 8
Liste
Listele reprezint unele dintre cele mai obinuite elemente dintr-o pagin Web. Acestea sunt deseori
folosite pentru a prezenta informaiile n mod organizat, ntr-o manier accesibil i uor de parcurs.
Ele pot fi de trei tipuri:
liste ordonate (marcate prin numere sau litere),

liste neordonate (marcate prin cratime, buline sau alte simboluri)
liste de definiii, afiate fr nici un fel de marcaj.
n interiorul etichetelor care delimiteaz o list pot fi folosite orice alte etichete HTML, cum ar fi etichete
de formatare a textului, legturi, imagini, etc.
1. Liste neordonate
O list neordonat reprezint o colecie de elemente nrudite, dispuse ntr-o ordine oarecare. Un exemplu
tipic pentru o pagin Web este o list de link-uri spre alte documente.
Acest tip de list este de fapt un bloc de text delimitat de etichetele
<UL> </UL> (unordered list=list neordonat). Eticheta de nchidere </UL> este obligatorie.
Fiecare element al listei este introdus prin eticheta <LI> (list item). Cu toate c eticheta <LI> este o
etichet container, eticheta sa de nchidere, </LI>, este opional. Dac nu este prezent, la ntlnirea
unei noi etichete <LI> se consider c vechea etichet este nchis.
Lista va fi afiat indentat fa de restul paginii i fiecare element al listei ncepe pe un rnd nou. n mod
prestabilit, fiecare element al listei va fi marcat (bulleted) cu "bulin". Exemplul 8.1 construiete o list
neordonat.
Exemplul 8. 1
<HTML>
<HEAD>
<TITLE>liste1</TITLE>
</HEAD>
<BODY>
<H1 align="center">Lista neordonata</H1><HR>
<UL>Culori
<LI>Black
<LI>White
<LI>Red
<LI>Green
<LI>Blue
<LI>Yellow
<LI>Purple
<LI>Aqua
</UL>
</BODY>
</HTML>
Etichetele <UL> i <LI> pot avea definit atributul type care stabilete caracterul afiat n faa fiecrui
element al listei. Valorile posibile al acestui atribut sunt:
circle (cerc)
disc (disc plin) - valoarea prestabilit
square (patrat)
57
Lista din Exemplul 8.2 are atributul type setat la valoarea "square".
Exemplul 8. 2
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Atributul type la liste neordonate</H1><HR>
<UL type="square">Limbaje de programare
<LI>C
<LI>C++
<LI>Pascal
<LI> Basic
<LI>Perl
</UL>
</BODY>
</HTML>
Setarea atributului type pentru un item al listei nlocuiete tipul de marcaj cu tipul specificat pentru acel
item.
n Figura 8.3 putei observa efectul setrii atributului type pentru un item individual la listei.
Exemplul 8. 3
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Atributul type la itemul unei liste </H1><HR>
<UL type="square">Limbaje de programare
<LI>C
<LI>C++
<LI>Pascal
<LI type="circle">Basic
<LI>Perl
</UL>
</BODY>
</HTML>
Forme particulare de liste neordonate
Lista de directoare - este o list introdus prin eticheta <DIR> </DIR>. Eticheta a fost iniial
utilizat pentru alctuirea listelor de fiiere. Multe browsere nu fac nici o diferen ntre etichetele
<DIR> i <UL>, efectul lor fiind acelai.
Lista de meniuri - utilizeaz eticheta <MENU>. Unele browsere afieaz lista doar n format uor
diferit fa de listele neordonate, altele ns folosesc chiar un fel de meniu grafic de tip pull-down
pentru afiarea acestor liste.
2. Liste ordonate
58
O list ordonat este un bloc de text delimitat de etichetele <OL> </OL> (ordered list - list ordonat),
eticheta de nchidere fiind obligatorie.
Fiecare element al listei este iniiat de eticheta <LI> (list item). Ca i n cazul listelor neordonate, lista va
fi indentat fa de restul paginii Web i fiecare element al listei va ncepe pe o linie nou.
Diferena fa de listele neordonate este aceea c n acest caz marcarea elementelor se face prin cifre, nu
prin simboluri.
Exemplul 8.4 afieaz o list ordonat, marcat cu cifre arabe.
Exemplul 8. 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Lista ordonata</H1><HR>
<OL>Castigatorii concursului sunt:
<LI>Popescu Maria
<LI>Ionescu Ion
<LI>Bratu Ana
</OL>
</BODY>
</HTML>
Pentru etichetele <OL> i <LI> se poate seta atributul type, care stabilete tipul de caractere utilizate
pentru ordonarea listei. Valorile posibile ale acestui atribut sunt:
A - pentru ordonare de tipul A , B , C...(litere mari)

a - pentru ordonare de tipul a , b , c...(litere mici)
I - pentru ordonare de tipul I , II , III , IV...(cifre romane mari)
i - pentru ordonare de tipul i , ii , iii , iv...(cifre romane mici)
1 - pentru ordonare de tipul 1 , 2 , 3...(cifre arabe - opiune prestabilit)
De asemenea eticheta <OL> poate avea setat atributul start, care stabilete valoarea iniial a
secvenei de ordonare. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv.
Exemplul 8.5 construiete o list numerotat cu cifre romane mari ncepnd de la poziia a treia.
Exemplul 8. 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Atributul type la liste ordonate</H1><HR>
<OL type="I" start="3">Manuale
<LI>Istorie
<LI>Geografie
<LI>Biologie
<LI>Chimie
</OL>
</BODY>
</HTML>
Ca i n cazul listelor neordonate, setarea atributului type pentru un anumit item al listei nlocuiete tipul
de numerotare stabilit pentru ntreaga list cu tipul specificat pentru acel element.
59
3. Imbricarea listelor
n cadrul unei liste, fie ea ordonat sau neordonat, se pot include alte liste, procedeu numit imbricare.
Fiecare list nou inclus n precedenta se va afia indentat fa de nivelul listei anterioare.
Listele pot fi imbricate n toate modurile dorite, ca n Exemplul 8.6.
Exemplul 8. 6
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Liste imbricate</H1><HR>
<UL>
<LI>Bulina 1
<OL>
<LI>Numarul 1
<LI>Numarul 2
</OL>
<LI>Bulina 2
<LI>Bulina 3
<UL type="square">
<LI>Patrat 1
<LI>Patrat 2
<LI>Patrat 3
</UL>
<LI>Bulina 4
</UL>
</BODY>
</HTML>
4. Liste de definiii
Listele de definiii reprezint un tip special de liste n care elementele listei nu sunt nici numerotate (ca n
listele ordonate), nici marcate prin buline (ca n listele neordonate) i care prezint dou nivele de
indentare.
Listele de definiii sunt blocuri de text incluse ntre etichetele <DL> </DL> (definition list), eticheta de
nchidere fiind obligatorie. Fiecare element al listei este introdus prin eticheta <DT> (definition term).
Fiecare element introdus prin eticheta <DT> conine la rndul su un numr de elemente care l definesc,
introduse prin eticheta <DD> (definition description).
Ca i n cazul etichetei <LI>, etichetele de nchidere </DT> i </DD> sunt opionale. n Exemplul 8.7
este construit o list de definiii.
Exemplul 8. 7
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Liste de definitii</H1><HR>
<DL>
<DT>Iarna
<DD>Ninge
<DD>E frig
60
<DD>Ziua e mai scurta dect noaptea
<DT>Primavara
<DD>Natura se trezeste la viata
<DD>Infloresc pomii
<DD>Se intorc pasarile calatoare
<DT>Vara
<DD>Totul e verde
<DD>E foarte cald
<DD>Ziua e mai lunga dect noaptea
<DT>Toamna
<DD>Se coc fructele
<DD>Se strange recolta
<DD>Cad frunzele
</DL>
</BODY>
</HTML>
Etichetele <DL> i </DL> marcheaz nceputul i sfritul listei, termenii care fac parte din list ( Iarna,
Primvara, Vara, Toamna ) sunt introdui prin eticheta <DT> iar definiiile termenilor, prin etichetele
<DD>.
Se pot realiza liste ale cror elemente s fie link-uri, imagini sau blocuri de text. n Exemplul 8.8,
elementele listei sunt imagini.
Exemplul 8. 8
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Liste de imagini</H1><HR>
<DL>
<DT>Flori
<DD>
<IMG src="../Imagini/rose1.jpg" width="120" height="120">
<DD>
<IMG src="../Imagini/orangerose.gif" width="120" height="120">
<DT>Texturi
<DD>
<IMG src="../Imagini/silk.jpg" width="120" height="120">
<DD>
<IMG src="../Imagini/lace.gif" width="120" height="120">
</DL>
</BODY>
</HTML>
Exemplul 8.9 creeaz dou liste imbricate de legturi. Putei testa direct funcionarea listei dac ai salvat
fiierele HTML construite la capitolele anterioare sub numele specificat n blocul <TITLE> al fiecrui
document. n cazul cnd ai preferat alte denumiri pentru fiiere, putei schimba numele fiierelor
prezente n cadrul exemplului cu propriile dumneavoastr fiiere.
Exemplul 8. 9
<HTML>
<HEAD>
</HEAD>
<BODY>
61
<H1 align="center">Liste de legaturi</H1><HR>
<OL type="I">
<LI>Culori
<OL>
<LI><A href="culori1.html">Culoarea fundalului</A>
<LI><A href="culori2.html">Culoarea textului</A>
<LI><A href="culori3.html">Culoarea legaturilor</A>
</OL>
<LI>Fonturi
<OL>
<LI><A href="fonturi1.html">Eticheta FONT</A>
<LI><A href="fonturi2.html">Eticheta BASEFONT</A>
<LI><A href="fonturi4.html">Etichete de accentuare a
textului</A>
</OL>
</OL>
</BODY>
</HTML>
5. Rezumat
ntr-o pagin Web pot fi introduse diverse tipuri de liste:
Liste neordonate prin eticheta <UL> </UL>, marcate prin simboluri de tip buline, cercuri sau ptrate
Liste ordonate prin eticheta <OL> </OL> marcate prin cifre arabe, cifre romane mari sau mici, litere
mari sau mici
Liste de definiii prin eticheta <DL> </DL> nemarcate
Elementele listelor ordonate i neordonate se introduc prin eticheta <LI>.
Elementele listelor de definiii se introduc prin etichetele <DT> i <DD>.
Listele pot conine orice tip de elemente: text, imagini, link-uri sau alte liste (n acest caz obinndu-se
liste imbricate).
62
LECIA 9
Tabele
Tabelul este un element structural de baz n alctuirea unei pagini Web. n cadrul unui tabel pot fi
incluse oricare dintre elementele care fac parte din corpul unui document HTML: text, imagini, linii
orizontale, titluri, legturi, alte tabele, etc. Tabelele constituie un instrument extrem de util de organizare a
paginii Web, realiznd alinierea elementelor i plasarea lor n locurile dorite de designerul paginii.
Un tabel este o gril dreptunghiular format din linii i coloane. Caseta format la intersecia unei linii
cu o coloan se numete celul.
O linie a tabelului este format dintr-un ir de celule aliniate pe orizontal, iar o coloan este format
dintr-un ir de celule aliniate pe vertical.
Celulele tabelului conin date (text, imagini, link-uri), fiecare celul avnd propriile opiuni pentru
culoarea fondului, culoarea textului, alinierea textului etc.
1. Crearea unui tabel
Pentru a insera un tabel ntr-un document HTML se folosesc etichetele corespondente <TABLE>
</TABLE>. Eticheta <TABLE> este o etichet container, deci eticheta de final este obligatorie. Absena
ei face ca tabelul s nu fie afiat corect.
Pentru a insera o linie ntr-un tabel se folosesc etichetele <TR> </TR> (table row). Folosirea etichetei
de nchidere </TR> este opional.
Aa cum spuneam, fiecare linie de tabel este format din mai multe celule ce conin date. O celul de date
se introduce cu eticheta <TD> </TD> (table data). Eticheta de nchidere </TD> este de asemenea
opional.
n Exemplul 9.1 am construit un tabel format din patru linii, fiecare linie avnd cte dou celule de date.
Exemplul 9. 1
<HTML>
<HEAD>
<TITLE>tabele1</TITLE>
</HEAD>
<BODY>
<H1 align="center">Crearea unui tabel</H1><HR>
<TABLE>
<TR>
<TD>celula 11
<TD>celula 11
<TR>
<TD>celula 21
<TD>celula 22
<TR>
<TD>celula 31
<TD>celula 32
<TR>
<TD>celula 41
<TD>celula 42
</TABLE>
</BODY>
</HTML>
63
n mod prestabilit, un tabel nu are chenar vizibil. Pentru a aduga un chenar unui tabel, se utilizeaz
atributul border al etichetei <TABLE>. Acest atribut poate primi ca valoare orice numr ntreg (inclusiv
0) i reprezint grosimea n pixeli a chenarului tabelului.
Daca atributul border nu este urmat de o valoare atunci chenarul tabelului va avea o grosime
prestabilit egal cu 1 pixel, iar o valoare egal cu 0 a atributului border semnific absena chenarului.
Cnd atributul border are o valoare nenul chenarul tabelului are un aspect tridimensional.
n Exemplul 9.2 este construit un tabel cu chenar. Pentru a testa funcionarea atributului border,
nlocuii n exemplul de mai jos valoarea "4" i cu alte valori. Nu uitai ca dup fiecare modificare s
salvai fiierul i s apsai butonul Refresh/Reload al browserului.
Exemplul 9. 2
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Chenarul unui tabel</H1><HR>
<TABLE border="4">
<TR>
<TD>celula 11
<TD>celula 12
<TR>
<TD>celula 21
<TD>celula 22
<TR>
<TD>celula 31
<TD>celula 32
<TR>
<TD>celula 41
<TD>celula 42
</TABLE>
</BODY>
</HTML>
Celulele unui tabel pot conine i alte elemente n afar de text: imagini, legturi, formulare, etc.
Exemplul 9.3 construiete un tabel cu dou linii i dou coloane, celulele tabelului avnd drept coninut
imagini.
Exemplul 9. 3
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Tabel care contine imagini</H1><HR>
<TABLE border="4">
<TR>
<TD><IMG src="../Imagini/donut.gif">
<TD><IMG src="../Imagini/gift.gif">
<TR>
<TD><IMG src="../Imagini/invest.gif">
<TD><IMG src="../Imagini/globe.gif">
</TABLE>
</BODY>
</HTML>
64
2. Alinierea tabelului n pagin
Pentru a alinia un tabel ntr-o pagina Web se utilizeaz atributul align al etichetei <TABLE>, cu
urmtoarele valori posibile:
left (valoarea prestabilit) - textul care urmeaz dup punctul de inserare al tabelului va fi dispus n
partea dreapt a tabelului.
center - textul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toat limea
paginii, imediat sub tabel.
right - textul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea stng a
tabelului.
n Exemplul 9.4 este ilustrat construirea unui tabel aliniat la dreapta.

Exemplul 9. 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Alinierea tabelului in pagina</H1><HR>
<TABLE border="3" align="right">
<TR>
<TD>celula 11
<TD>celula 12
<TR>
<TD>celula 21
<TD>celula 22
</TABLE>
Acest text este plasat in stanga tabelului
</BODY>
</HTML>
Distana dintre tabel i celelalte elemente din pagina Web poate fi stabilit cu ajutorul atributelor hspace
i vspace al etichetei <TABLE>.
Valoarea atributului hspace poate fi orice numr pozitiv, inclusiv 0, i reprezint distana pe orizontal
dintre tabel i celelalte elemente ale paginii Web.
Analog, valoarea atributului vspace reprezint distana pe vertical dintre tabel i celelalte elemente ale
paginii. Atributele hspace i vspace sunt recunoscute numai de browserele Netscape.
Exemplul 9.5 ilustreaz utilitatea celor dou atribute.
Exemplul 9. 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Spatierea tabelului fata de restul textului
</H1><HR>
Tabelul de mai jos este spatiat pe verticala fata de acest text cu
15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de
acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe
verticala fata de acest text cu 15 pixeli<BR>
<TABLE border align="left" vspace="15" hspace="10">
<TR>
<TD>celula 11
65
<TD>celula 12
<TR>
<TD>celula 21
<TD>celula 22
</TABLE>
Acest text este plasat in dreapta tabelului la distanta de 10
pixeli pe orizontala fara de tabel. Acest text este plasat in
dreapta tabelului la distanta de 10 pixeli pe orizontala fara de
tabel. Acest text este plasat in dreapta tabelului la distanta de
10 pixeli pe orizontala fara de tabel.
</BODY>
</HTML>
3. Dimensionarea unui tabel
Dimensiunile unui tabel - limea i nlimea - pot fi stabilite exact prin intermediul atributelor width i
height ale etichetei <TABLE>.
Valorile acestor atribute pot fi:
numere ntregi pozitive reprezentnd limea respectiv nlimea n pixeli a tabelului

numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd procente din limea i nlimea
total a paginii.
Iat un exemplu de tabel cu nlimea de 200 de pixeli i limea egal cu 50% din limea paginii
(Exemplul 9.6)
Exemplul 9. 6
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Dimensionarea unui tabel</H1><HR>
Tabel cu lungimea de 50% din pagina si inaltimea de 200 de
pixeli<P>
<TABLE border width="50%" height="200">
<TR>
<TD>celula 11
<TD>celula 12
<TR>
<TD>celula 21
<TD>celula 22
</TABLE>
</BODY>
</HTML>
Dimensiunile unui tabel includ i valoarea dat atributului border. De exemplu, un tabel cu o singur
linie i o singur coloan, cu dimensiunile width="100", height="50" i avnd atributul
border setat la valoarea 10, va avea drept spaiu util 80 de pixeli pe lime i 30 de pixeli pe nlime.
Una dintre cele mai frecvente utilizri a tabelelor este poziionarea unui text ntr-o anumit zon a paginii,
prin realizarea unui tabel fr chenar (border="0") cu o singur linie i o singur coloan, ca n
Exemplul 9.7.
66
Exemplul 9. 7
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Pozitionarea unui text</H1>
<TABLE border="0" width="60%" height="100%" align="center">
<TR>
<TD>
Acest text este pozitionat in centrul paginii. Acest text
este pozitionat in centrul paginii. Acest text este
pozitionat in centrul paginii. Acest text este pozitionat in
centrul paginii. Acest text este pozitionat in centrul
paginii.
</TABLE>
</BODY>
</HTML>
4. Spaierea celulelor unui tabel
Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al etichetei
<TABLE>.
Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint distana n pixeli dintre
dou celule vecine. Valoarea prestabilit a atributului cellspacing este de 2 pixeli.
Exemplul 9.8 ilustreaz funcionarea atributului cellspacing. Putei modifica valoarea atributului
cellspacing pentru a observa cum se spaiaz celulele n funcie de valorile pe care le dai.
Exemplul 9. 8
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Spatierea celulelor</H1><HR>
<TABLE border="3" cellspacing="10">
<TR>
<TD>Maria
<TD>Bogdan
<TR>
<TD>Alexandru
<TD>Irina
</TABLE>
</BODY>
</HTML>
Distana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului
cellpadding al etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive, i
reprezint distana n pixeli dintre marginile celulei i coninutul ei. Valoarea prestabilit a atributului
cellpadding este 1 pixel.
Exemplul 9.9 construiete un tabel n care distana dintre marginea celulelor i coninutul lor este de 20 de
pixeli.
Exemplul 9. 9
<HTML>
67
<HEAD>
</HEAD>
<BODY>
<H1 align="center"> Spatierea textului in celule</H1><HR>
<TABLE border cellpadding="20">
<TR>
<TD>Maria
<TD>Bogdan
<TR>
<TD>Alexandru
<TD>Irina
</TABLE>
</BODY>
</HTML>
5. Dimensionarea celulelor unui tabel
Dimensiunile unei celule de tip <TD> sau de tip <TH> (vezi mai jos eticheta <TH>) pot fi stabilite exact
cu ajutorul a dou atribute ale acestor etichete: width pentru lime i height pentru nlime. Valorile
posibile ale acestor atribute sunt:
numere ntregi pozitive (inclusiv 0) reprezentnd dimensiunea n pixeli a limii, respectiv a nlimii
unei celule
procente din limea, respectiv nlimea tabelului.
n Exemplul 9.10 am dimensionat celula 11 la limea de 20% din limea tabelului i nlimea egal cu
75% din nlimea lui. Dimensionarea individual a unei celule va afecta dimensionarea tuturor celulelor
din linia i coloana din care face parte celula respectiv. Se observ c celula 12 are limea egal cu
restul de 80% din limea tabelului. Celula 21 aflat pe aceeai coloana cu celula dimensionat are
aceleai dimensiuni ca i ea.
Exemplul 9. 10
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Dimensionarea celulelor</H1><HR>
Tabel cu celule dimensionate individual<P>
<TABLE border>
<TR>
<TD width="20%" height="75%">celula 11
<TD>celula 12
<TR>
<TD>celula 21
<TD>celula 22
</TABLE>
</BODY>
</HTML>
6. Alinierea coninutului unei celule
Alinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului align care poate lua
valorile:
68
left - la stnga
center - centrat , valoarea prestabilit
right - la dreapta
Alinierea pe vertical a coninutului unei celule se face cu ajutorul atributului valign care poate lua
valorile:
baseline - la baz
bottom - jos
middle - la mijloc, valoarea prestabilit
top - sus
Aceste atribute pot fi ataate att etichetei <TR> pentru a defini alinierea tuturor celulelor unei linii, ct
i etichetelor <TD> i <TH> (vezi mai jos eticheta <TH>) pentru a stabili alinierea textului ntr-o singur
celul. n Exemplul 9.11 este ilustrat funcionarea atributelor align i valign.
Textul din celulele primei, celei de-a doua i celei de-a patra linii a fost aliniat prin atributul align
asociat liniei, iar textul din celulele liniei a treia a fost aliniat prin atributul align asociat fiecrei celule
n parte.
Exemplul 9. 11
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center"> Alinierea continutului celulelor</H1><HR>
<TABLE border width="50%" height="80%">
<TR align="right">
<TD>dreapta
<TD>dreapta
<TR align="center">
<TD>centru
<TD>centru
<TR>
<TD valign="top">sus
<TD valign="bottom">jos
<TR align="left">
<TD>stanga
<TD>stanga
</TABLE>
</BODY>
</HTML>
Dac este prezent un atribut de aliniere ataat etichetei <TR> i pe linia respectiv o anumit celul are
propriul su atribut de aliniere, atributul de aliniere asociat etichetei <TD> are prioritate fa de cel
asociat etichetei <TR>.
7. Definirea culorilor pentru un tabel
Culoarea de fond a unui tabel se stabilete cu ajutorul atributului bgcolor, care poate fi ataat dup cum
urmeaz:
ntregului tabel prin eticheta <TABLE>,

unei linii prin eticheta <TR>
unei celule de date prin eticheta <TD>
69
Valorile pe care le poate primi atributul bgcolor sunt cele cunoscute pentru culori.
Dac ntr-un tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este, n ordine
descresctoare, urmtoarea:
1. <TD>
2. <TR>
3. <TABLE> (prioritatea cea mai mica)
n Exemplul 9.12 este ilustrat folosirea atributului bgcolor.

Exemplul 9. 12
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Culori in tabel</H1><HR>
<TABLE border="5" bgcolor="lime">
<TR>
<TD>celula 11 verde
<TD bgcolor="red">celula 12 rosu
<TR bgcolor="blue">
<TD>celula 21 albastru
<TD bgcolor="yellow">celula 22 galben
<TR bgcolor="cyan">
<TD>celula 31 cyan
<TD>celula 32 cyan
<TR>
<TD>celula 41 verde
<TD bgcolor="white">celula 42 alb
</TABLE>
</BODY>
</HTML>
Astfel, culoarea ntregului tabel a fost stabilit prin eticheta:
<TABLE bgcolor="lime">
Dac o linie nu are stabilit nici o alta culoare, culoarea liniei este verde deschis. Pentru linia a doua a
tabelului este stabilit culoarea albastru:
<TR bgcolor="blue">.
Celulele care fac parte din aceasta linie i care nu au stabilit o alta culoare, vor fi albastre (celula 21).
Celelalte celule vor avea culoarea stabilit explicit pentru ele (celula 22 va fi galben):
<TD bgcolor="yellow">
Un tabel poate avea drept fundal nu numai o culoare, ci i o imagine. Acest efect se obine folosind
atributul background al etichetei <TABLE>, atributul primind ca valoare adresa URL a imaginii.
Atributul background poate fi ataat i unei linii, stabilind fundalul tuturor celulelor din linia
respectiv precum i unei celule individuale, n acest caz stabilind fundalul acelei celule.
Exemplul 9.13 ilustreaz acest atribut.
Exemplul 9. 13
<HTML>
70
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Fundalul unui tabel</H1><HR>
<TABLE border="5" width="200" height="120"
background="../Imagini/lace.gif>
<TR>
<TD>celula 11
<TD>celula 12
<TR>
<TD>celula 21
<TD>celula 22
</TABLE>
</BODY>
</HTML>
Culorile chenarului unui tabel se pot stabili folosind atributele:
bordercolor - permite stabilirea culorii pentru chenarul unui tabel

bordercolorlight - permite stabilirea culorii marginilor din stnga i de sus ale tabelului
bordercolordark - permite stabilirea culorii marginilor din dreapta i de jos ale tabelului
Culoarea textului din fiecare celul se poate stabili cu ajutorul expresiei:
<FONT color="#RGB sau nume_culoare">text</FONT>.
Exemplul 9.14 ilustreaz folosirea acestor atribute.

Exemplul 9. 14
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Culorile chenarului unui tabel</H1><HR>
<TABLE border="10" bordercolordark="blue" bordercolorlight="cyan">
<TR>
<TD><FONT color="green">celula 11</FONT>
<TD><FONT color="blue">celula 12</FONT>
<TD><FONT color="red">celula 13</FONT>
<TR>
<TD><FONT color="teal">celula 21</FONT>
<TD><FONT color="magenta">celula 22</FONT>
<TD><FONT color="lime">celula 23</FONT>
</TABLE>
</BODY>
</HTML>
Am setat grosimea chenarului tabelului la valoarea de 10 pixeli, pentru a avea un aspect tridimensional
mai pronunat.
Cu ajutorul atributului bordercolordark am stabilit culoarea prii "umbrite" a chenarului (marginile
de jos i din dreapta) iar cu ajutorul atributului bordercolorlight, culoarea prii "luminate" a
acestuia (marginile de sus i din stnga) iar textul din celule l-am scris cu culori diferite, folosind eticheta
<FONT>.
71
Culorile stabilite pentru chenarul exterior al tabelului sunt folosite i pentru a colora liniile despritoare
dintre celulele tabelului. Pentru acestea partea "umbrit" este format din muchiile de sus i din stnga iar
partea "luminat" este format din muchiile de jos i din dreapta.
Dac dorim s colorm separat muchiile care despart liniile sau celulele tabelului putem asocia atributele
bordercolor, bordercolordark i bordercolorlight etichetelor <TR> i <TD>.
Atenie!
Atributele bordercolor, bordercolordark i bordercolorlight nu sunt recunoscute de
browserul Nescape.
8. Titlul unui tabel
Unui tabel i se poate ataa un titlu cu ajutorul etichetei <CAPTION> (table caption).
Aceast etichet trebuie plasat n interiorul etichetelor <TABLE> </TABLE>, dar nu n 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 - deasupra, la stnga tabelului
right - deasupra, la dreapta tabelului
n Exemplul 9.15 titlul tabelului este aliniat deasupra sa.

Exemplul 9. 15
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Titlul unui tabel</H1><HR>
<TABLE border><CAPTION align="top">Masini
<TR>
<TD>Mercedes
<TD>Citroen
<TD>Jaguar
<TR>
<TD>BMW
<TD>Volvo
<TD>Renault
</TABLE>
</BODY>
</HTML>
9. Capul de tabel
Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt introduse de eticheta <TH>
(tabel header) n loc de <TD>.
Toate atributele care pot fi ataate etichetei <TD> pot fi de asemenea ataate i etichetei <TH>. Coninutul
celulelor definite cu <TH> este scris cu caractere aldine i centrat.
Exemplul 9.16 ilustreaz modul n care se pot insera celule cu rol de cap de tabel. Putei observa din
exemplu c elementele cu rol de cap de tabel pot fi plasate att pe orizontal ct i pe vertical.
72
Exemplul 9. 16
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Capul de tabel</H1><HR><P>
<TABLE border><CAPTION align="bottom">Preturi masini
<TR>
<TH>Pret
<TH>Citroen
<TH>Jaguar
<TH>BMW
<TH>Volvo
<TR>
<TH>In dolari
<TD>5000
<TD>100000
<TD>50000
<TD>80000
<TR>
<TH>In lei
<TD>5
<TD>100
<TD>50
<TD>80
</TABLE>
</BODY>
</HTML>
10. Tabele de forme oarecare
Exist situaii cnd dorim ca o celul s se extind peste celulele vecine, pe orizontal sau pe vertical. n
acest mod se obine o singur celul cu suprafaa egal cu suma suprafeelor celulelor iniiale.
Acest lucru se poate realiza cu ajutorul atributelor colspan i rowspan ale etichetelor <TD> i <TH>.
Astfel:
colspan - realizeaz extinderea unei celule peste celulele din dreapta ei. Valoarea atributului determin
numrul de celule care se unific.
rowspan - realizeaz extinderea unei celule peste celulele de sub ea. Valoarea atributului determin
numrul de celule care se unific.
Sunt posibile extinderi simultane ale unei celule pe orizontal i pe vertical. n acest caz, n etichetele
<TD> sau <TH> vor fi prezente ambele atribute colspan i rowspan. Exemplul 9.17 ilustreaz modul
cum se realizeaz un tabel cu celule unificate.
Exemplul 9. 17
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Tabele cu forma oarecare</H1><HR>
<TABLE border>
<TR>
<TD rowspan="3">celula 11<BR>celula 21<BR>celula 31
73
<TD>celula 12
<TD colspan="2" rowspan="3">celula 13 , celula 14<BR>celula
23, celula 24<BR>celula 33, celula 34
<TR>
<TD>celula 22
<TR>
<TD>celula 32
<TR>
<TD>celula 41
<TD colspan="3">celula 42, celula 43, celula 44
</TABLE>
</BODY>
</HTML>
Tabelul construit n acest exemplu are 4 linii i 4 coloane. Prin folosirea atributelor colspan i
rowspan configuraia tabelului s-a modificat astfel: celula 11 s-a extins n jos peste celulele 21 i 31
(<TD rowspan="3">), celula 12 a rmas nemodificat, celula 13 s-a extins att spre dreapta peste
celula 14 ct i n jos, peste celulele 23 i 24
(<TD colspan="2" rowspan="3">).
Celulele 22, 32 i 41 au rmas nemodificate iar celula 42 s-a extins spre dreapta peste celulele 43 i 44
(<TD colspan="3">.
Etichetelor <TD> i <TH> li se poate ataa atributul nowrap. El interzice ajustarea automat a lungimii
unei linii de text, astfel nct n tabel pot aprea coloane cu o lime orict de mare. Un tabel n care este
folosit atributul nowrap este cel construit n Exemplul 9.18.
Exemplul 9. 18
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center"> Atributul nowrap</H1><HR>
<TABLE border>
<TR>
<TD>celula 11
<TD>celula 12
<TR>
<TD>celula 21
<TD nowrap>celula 22 Textul din aceasta celula este foarte
lung
</TABLE>
</BODY>
</HTML>
11. Celule fr coninut
Dac un tabel are celule fr coninut (celule vide), atunci aceste celule vor aprea n tabel fr un chenar
de delimitare. n scopul de a afia un chenar pentru celulele vide se poate proceda astfel:
dup eticheta <TD> se adaug

dup eticheta <TD> se adaug <BR>
Caracterul (no break space) este, aa cum am vzut la capitolul Formatarea textului, caracterul
spaiu. Un spaiu introdus prin intermediul acestui caracter nu va fi ignorat de browser.
74
n Exemplul 9.19 este ilustrat modul n care pot fi create celule fr coninut care s aib totui chenar de
delimitare. Celula 23 nu are chenar de delimitare. Celulele de pe a doua linie a tabelului sunt vide dar au
chenar deoarece am folosit &nbsp i <BR>.
Exemplul 9. 19
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Celule fara continut</H1><HR>
<TABLE border>
<TR>
<TD>celula 11
<TD>celula 12
<TD>celula 13
<TR>
<TD>
<TD><BR>
<TD>
</TABLE>
</BODY>
</HTML>
12. Grupuri de coloane
Etichetele <COLGROUP> </COLGROUP> permit definirea unui grup de coloane n cadrul unui tabel.
Atributele acceptate de <COLGROUP> sunt:
span - determin numrul de coloane dintr-un grup

width - determin o lime unic pentru coloanele din grup
align - determin un tip unic de aliniere pentru coloanele din grup
De exemplu:
<COLGROUP span="3" width="100"></COLGROUP>
Am definit astfel un grup de trei coloane, fiecare avnd limea de 100 de pixeli.
ntr-un bloc <COLGROUP>, coloanele pot avea configurri diferite dac se utilizeaz eticheta <COL>,
care admite atributele:
span - identific acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci coloanele
sunt configurate n ordine.
width - determin limea coloanei identificate prin span.
align - determin alinierea coninutului coloanei identificate prin span.
Cel mai bine putei nelege funcionarea acestei etichete din Exemplul 9.20. Tabelul din acest exemplu
are dimensiunile de 420 de pixeli lime i 200 de pixeli nlime i este format din dou linii i patru
coloane.
n tabel a fost delimitat un grup de trei coloane (primele trei coloane) prin eticheta <COLGROUP> iar n
cadrul acestui grup au fost definite limea i alinierea textului din fiecare coloane n parte. Cea de-a patra
coloan a tabelului nu face parte din grupul de coloane. Dup nchiderea etichetei <COLGROUP>, celulele
de date au fost introduse n mod normal, cu ajutorul etichetei <TD>.
75
Exemplul 9. 20
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Grupuri de coloane</H1><HR>
<TABLE border width="420" height="200">
<COLGROUP>
<COL width="60" align="left">
<COL width="120" align="center">
<COL width="180" align="right">
</COLGROUP>
<TR>
<TD valign="top">celula 11
<TD>celula 12
<TD valign="bottom">celula 13
<TD>celula 14
<TR>
<TD>celula 21
<TD>celula 22
<TD>celula 33
<TD>celula 34
</TABLE>
</BODY>
</HTML>
In cadrul celulei 11 este respectat alinierea la stnga a textului, deoarece ea a fost setata ca atare prin
construcia <COL width="60" align="left">.
n plus, n cadrul etichetei <TD> a fost stabilita i alinierea pe
verticala a textului din celul, atributul valign primind valoarea
"top".
n celula 12 nu este setat atributul valign astfel nct textul
respect alinierea stabilit prin construcia <COL width="120"
align="center">. n celula 13 alinierea pe orizontal a textului
este stabilit prin construcia <COL width="180" align="right"> iar
alinierea pe vertical este setat n cadrul etichetei <TD> la
valoarea "bottom".
Din figur se mai observ c toate celulele care fac parte din
coloanele incluse n blocul <COLGROUP> respect setrile fcute n
cadrul acestui bloc (celulele 21, 22 i 23). Celulele 14 i 24 care
formeaz coloana a patra a tabelului neinclus n grupul de
coloane, respect atributele de aliniere specificate n cadrul
etichetei <TD>, dac exist.
Eticheta <COLGROUP> nu este recunoscut de browserele Netscape i prin urmare nici atributele legate
de dimensionarea coloanelor i alinierea textului n interiorul lor.
13. Atribute pentru aspectul chenarului unui tabel
Atributul frame
Atributul frame al etichetei <TABLE> permite specificarea laturilor din chenarul unui tabel care vor fi
vizibile.
76
Valorile posibile ale acestui atribut sunt:
void - elimin toate muchiile exterioare ale tabelului

above - afieaz o muchie n partea superioar a cadrului tabelului
below - afieaz o muchie n partea inferioar a cadrului tabelului
hsides - afieaz cte o muchie n partea superioar i inferioar cadrului tabelului
vsides - afieaz o muchie n partea din stnga i din dreapta a cadrului tabelului
lhs - afieaz o muchie n partea din stnga a cadrului tabelului
rhs - afieaz o muchie n partea din dreapta a cadrului tabelului
box - afieaz o muchie pe toate laturile cadrului tabelului
Atributul rules
Atributul rules al etichetei <TABLE> permite alegerea unor delimitatori pentru celulele unui tabel.
Valorile posibile sunt:
none - elimin toate muchiile interioare ale tabelului

rows - afieaz muchii orizontale ntre toate liniile tabelului
cols - afieaz muchii verticale ntre toate coloanele tabelului
all - afieaz muchii ntre toate liniile i coloanele
Exemplul 9.21 ilustreaz aceste atribute. Atributele frame i rules pot fi combinate i cu atributele de
colorare a chenarului i se pot folosi pentru a crea efecte interesante de aliniere n pagin.
Exemplul 9. 21
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Atributele frame si rules</H1><HR>
<TABLE bordercolor="red" width="400" frame="lhs" rules="cols">
<TR>
<TD>celula 11
<TD>celula 12
<TD>celula 13
<TR>
<TD>celula 21
<TD>celula 22
<TD>celula 23
<TR>
<TD>celula 21
<TD>celula 22
<TD>celula 23
</TABLE>
</BODY>
</HTML>
14. Tabele imbricate
Un tabel poate conine n celulele sale i alte elemente n afar de text, inclusiv un alt tabel, formnd
astfel un ansamblu de tabele imbricate.
n Exemplul 9.22 vom ilustra modul n care se pot imbrica dou tabele.
77
Exemplul 9. 22
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align="center">Imbricarea tabelelor</H1><HR>
<TABLE border="5">
<TR>
<TD>celula 11 tabelul 1
<TD>
<TABLE border>
<TR>
<TR>
<TR>
</TABLE>
<TR>
</TABLE>
</BODY>
</HTML>
Tabelul este format din dou linii i dou coloane. n celula 21 a tabelului am inclus un alt tabel, format
din trei linii i dou coloane.
15. Recomandri privind folosirea tabelelor
Tabelele se numr printre cele mai folosite elemente ntr-o pagin Web. Ele reprezint un instrument
practic indispensabil pentru definirea aspectului paginii, ntruct permit alinierea corect a elementelor
din pagin: text, imagini, legturi, etc. n interiorul unui tabel se pot include i alte tabele, n funcie de
necesiti, formnd o reea de tabele imbricate.
Singura precauie pe care trebuie s o avei n vedere cnd folosii tabele n paginile dumneavoastr este
cea legat de etichetele i atributele specifice unui anumit tip de browser. Aa dup cum ai observat din
exemplele prezentate, aspectul paginilor poate s difere simitor de la un tip de browser la altul, atunci
cnd un anumit element nu este recunoscut. Dac vei considera c aspectul tabelelor este esenial pentru
paginile site-ului, este recomandat s v limitai la etichetele standard, recunoscute de toate browserele.
n Anexa 1 vei gsi o list a celor mai utilizate etichete mpreun cu meniunea dac fac parte din
standardul HTML 3.2.
16. Rezumat
Tabelele se insereaz ntr-un document HTML cu ajutorul etichetei container <TABLE> </TABLE>
Tabelele sunt formate din linii, care se introduc prin eticheta <TR> iar fiecare linie este format din celule
introduse prin eticheta <TD>.
Celulele unui tabel pot conine text, etichete de formatare a textului, imagini, legturi, formulare sau alte
tabele.
Etichetele <TABLE>, <TR> i <TD> au o serie de atribute comune:
78
align
- cnd este asociat cu <TABLE> stabilete alinierea tabelului fa de textul din jur
- cnd este asociat cu <TR> stabilete alinierea textului din celulele liniei respective
- cnd este asociat cu <TD> stabilete alinierea textului din celul
bgcolor stabilete culoarea fundalului pentru ntregul tabel, o linie sau o celul.
bordercolor, bordercolordark i bordercolorlight stabilesc culorile chenarelor
valign aliniaz textul pe vertical n cadrul tabelului, al celulelor unei linii sau al unei celule
individuale
Tabelul n ntregime sau o celul a sa pot avea o imagine ca fundal, specificat cu ajutorul atributului
background.
Grosimea chenarului tabelului se stabilete cu ajutorul atributului border.
Dimensiunile tabelului sau ale unei celule individuale se stabilesc prin intermediul atributelor width i
height.
Cu ajutorul atributelor cellspacing i cellpadding se stabilesc distana dintre celulele tabelului,

respectiv distana dintre coninutul celulelor i marginile lor.
Pentru a crea tabele de forme oarecare se folosesc atributele colspan i rowspan care permit
extinderea unei celule peste celulele din dreapta ei, respectiv peste celulele de sub ea.
Unui tabel i se poate ataa un titlu prin eticheta <CAPTION> i se pot introduce celule cu rol de cap de
tabel prin eticheta <TH>.
ntr-un tabel se pot defini grupuri de coloane cu ajutorul etichetei container <COLGROUP>
</COLGROUP>. n cadrul acestui grup, aspectul fiecrei coloane n parte este stabilit prin eticheta
<COL>.
Modul de afiare al marginilor tabelului precum i al liniilor despritoare dintre linii i celule se poate
stabili cu ajutorul atributelor frame i rules.
79
LECIA 10
Cadre (frames)
80
Anexe
Anexa 1
Index etichete
Etichet/Atribut Descriere Browser

Creeaz o legtur (cu atributul href) sau Standard
<A></A>
identific o ancor (cu atributul name) HTML 3.2
Class=nume Specific o clas de stiluri care controleaz Explorer,

aspectul acestei etichete Netscape
Href=URL Standard
Specific adresa URL a intei legturii
HTML 3.2
Name=nume Standard
Specific identificatorul unei ancore
HTML 3.2
Style=stil Explorer,
Specific un stil in-line pentru etichet
Netscape
Target=nume Definete numele ferestrei n care se va Explorer,

deschide documentul referit Netscape
Title=string Specific un titlu pentru fereastra n care se Standard

va deschide documentul specificat HTML 3.2
<ADDRESS></ADD Standard
RESS> Insereaz o adres potal
HTML 3.2
<AREA> Standard
Definete o zon activ ntr-o imagine hart
HTML 3.2
Alt=string Specific un text alternativ pentru Standard

browserele non-grafice HTML 3.2
Coords=lista Coordonatele care definesc aria, desprite Standard
coord prin virgule HTML 3.2
Href=URL Standard
Specific adresa URL asociat ariei
HTML 3.2
Shape=forma Standard
Definete forma zonei active
HTML 3.2
Specific numele ferestrei n care se va
Target=nume deschide documentul referit prin aria Netscape
respectiv
Title=string Specific un titlu pentru aria respectiv Explorer
<B></B> Standard
Textul este scris cu caractere aldine (bold)
HTML 3.2

Netscape
81
<BASEFONT> Precizeaz caracteristicile fonturilor din Standard
documentul curent HTML 3.2
Color=culoare Specific culoarea fonturilor Explorer
Face=tip
fonturi Specific tipul fonturilor Explorer
Size=valoare Specific dimensiunea fonturilor Explorer
<BIG></BIG> Standard
Afieaz textul cu fonturi mai mari
HTML 3.2

Netscape
<BGSOUND> Definete fundalul sonor pentru un

Explorer
document
Seteaz numrul de reluri ale bucii
loop=valoare muzicale.
Explorer
Valori posibile: un numr ntreg sau
infinite
src=URL Furnizeaz adresa URL a fiierului audio. Explorer
<BLOCKQUOTE></ Include un citat. Textul este indentat fa de Standard
BLOCKQUOTE> marginea din stnga a ferestrei HTML 3.2
<BODY></BODY> Standard
Delimiteaz corpul documentului
HTML 3.2
Alink=culoare Standard
Definete culoarea legturii active
HTML 3.2
Background=URL Specific adresa URL a imaginii de fundal Standard

al paginii HTML 3.2
Bgcolor=culoar Standard
e Definete culoarea fundalului paginii
HTML 3.2

Leftmargin=val Specific dimensiunea n pixeli a marginii
oare Explorer
din stnga a paginii
Link=culoare Standard
Definete culoarea legturilor
HTML 3.2
Netscape
Text=culoare Standard
Definete culoarea textului din pagin
HTML 3.2
Topmargin=valo Specific dimensiunea n pixeli a marginii
are Explorer
de sus a paginii
Vlink=culoare Standard
Definete culoarea legturilor vizitate
HTML 3.2
82
<BR> Specific sfritul unei linii i nceputul Standard
unei linii noi HTML 3.2
ntrerupe linia curent i ncepe noul rnd la
Standard
clear=margine marginea dorit.
HTML 3.2
Valori posibile: left, right, none, all.
<CAPTION></CAP Standard
TION> Definete titlul unui tabel
HTML 3.2
Specific poziia n care se aliniaz titlul.
Align=pozitie Valori posibile: top, bottom (Netscape), Standard
HTML 3.2
left, right, center (Explorer)

Netscape
Specific poziia pe vertical a titlului.
Valign=pozitie Explorer
Valori posibile: top, bottom
<CENTER></CENT Standard
ER> Centreaz textul
HTML 3.2
<CITE></CITE> Standard
Insereaz un citat
HTML 3.2

Netscape
<CODE></CODE> Standard
Insereaz o mostr de cod
HTML 3.2

Netscape
<COL> Definete o coloan n cadrul unui grup de

Explorer
coloane
Specific alinierea coloanei.
Align=pozitie Explorer
Valori posibile: left, center, right
Specific numrul de coloane afectate de
Span=n Explorer
eticheta <COL>
<COLGROUP></CO Definete un grup de coloane n cadrul unui
LGROUP> Explorer
tabel
Specific alinierea pe orizontal a textului
Align=pozitie din coloane. Explorer
Class=nume Specific o clas de stiluri care controleaz

Explorer
aspectul acestei etichete
Span=n Stabilete numrul de coloane din grup Explorer
83
Style=stil Specific un stil in-line pentru etichet Explorer
Seteaz alinierea pe vertical a textului din
Valign=pozitie coloane. Explorer
Valori posibile: top, middle, bottom
Width=valoare Seteaz limea fiecrei coloane din grup, n

Explorer
pixeli sau n procente
<DD></DD> Standard
Definete elementul unei liste de definiii
HTML 3.2

Netscape
<DFN></DFN> Standard
Formateaz textul inclus ca o definiie
HTML 3.2

Netscape
Creeaz o list de directoare, elementele Standard
<DIR></DIR>
fiind introduse prin eticheta <LI> HTML 3.2

Netscape
Specific tipul de marcaj. Explorer,
Type=marcaj
Valori posibile: circle, disc, square. Netscape
<DIV></DIV> Standard
Creeaz o diviziune ntr-un document
HTML 3.2
Aliniaz elementele incluse n blocul
Align=pozitie Standard
<DIV>.
HTML 3.2

Nowrap Interzice ntreruperea liniilor din bloc Explorer
Netscape
<DL></<DL> Standard
Creeaz o list de definiii
HTML 3.2

Netscape
<DT></DT> Introduce un element al unei liste de Standard

definiii HTML 3.2
84
Netscape
<EM></EM> Accentueaz textul inclus ntre etichete prin Standard

scrierea cu caractere italice HTML 3.2

Netscape
<FONT></FONT> Seteaz caracteristicile textului inclus ntre Standard

etichete HTML 3.2
Color=culoare Standard
Seteaz culoarea textului
HTML 3.2
Face=lista Explorer,
tipuri font Specific tipurile de font
Netscape
Specific dimensiunea textului. Valori
Size=valoare Standard
posibile: 1-7 (valori absolute), +n sau n
HTML 3.2
(valori relative la dimensiunea curent)
<FORM></FORM> Standard
Definete un formular
HTML 3.2
Action=URL Specific adresa URL a script-ului care va Standard

prelucra datele din formular HTML 3.2

Enctype=mod de Standard
codare Specific modul de codare al datelor
HTML 3.2
Specific metoda de transmitere a datelor. Standard
Method=metoda
Valori posibile Post, Get HTML 3.2
Name=nume Specific un nume pentru formular pentru a

Netscape
fi folosit de un script JavaScript
Netscape
Specific numele ferestrei n care vor fi
Target=nume Explorer,
afiate rezultatele dup procesarea
Netscape
formularului
<FRAME></FRAME Explorer,
> Definete un cadru ntr-un set de cadre
Netscape
Border=n Seteaz grosimea chenarului unui cadru Netscape
Bordercolor=cu Explorer,
loare Seteaz culoarea chenarului unui cadru
Netscape
85
Stabilete dac chenarul cadrului va fi
Frameborder=va afiat. Explorer,
loare Valori posibile: yes/no (Netscape), Netscape
1 / 0 (Netscape, Explorer)
Marginheight=n Seteaz distana n pixeli, dintre coninutul Explorer,

cadrului i marginile superioar i inferioar Netscape
Seteaz distana n pixeli, dintre coninutul
Marginwidth=n Explorer,
cadrului i marginile din stnga i din
Netscape
dreapta
Name=nume Explorer,
Specific numele cadrului
Netscape
Noresize Anuleaz posibilitatea utilizatorului de a Explorer,

redimensiona cadrul Netscape
Specific dac sunt prezente barele de
Scrolling=valo Explorer,
derulare.
are Netscape
Valori posibile: yes, no, auto
Src=URL Specific adresa URL a documentului care Explorer,

se va deschide n cadru Netscape
<FRAMESET></FR Explorer,
AMESET> Definete un set de cadre
Netscape
Border=n Seteaz grosimea chenarelor cadrelor din

Netscape
set
Bordercolor=cu Explorer,
loare Seteaz culoarea chenarelor cadrelor din set
Netscape
Cols=lista Explorer,
Specific numrul i limea cadrelor din set
Netscape
Stabilete dac chenarele cadrelor vor fi
Frameborder=va afiate. Explorer,
loare Valori posibile: yes/no (Netscape), Netscape
1 / 0 (Netscape, Explorer)
Framespacing=n Definete grosimea chenarelor cadrelor din

Explorer
set
Rows=lista Specific numrul i nlimea cadrelor din Explorer,

set Netscape
<Hn></Hn> Inserarea titlurilor. N ia valori ntre 1 (titlu Standard

de nivel maxim) i 6 (titlu de nivel minim) HTML 3.2
Align=pozitie Specific alinierea titlului. Standard

Valori posibile: left, right, center HTML 3.2

Netscape
<HEAD></HEAD> Standard
Delimiteaz antetul documentului
HTML 3.2
86
<Hn></Hn> Insereaz un n text titlu de nivel n, unde n Standard
este ntre 1 i 6. HTML 3.2
Specific alinierea titlului. Standard
Align=type
Valori posibile: left, center, right. HTML 3.2

Netscape
<HR> Standard
Introduce o linie orizontal
HTML 3.2
Specific alinierea liniei. Standard
Align=pozitie
Valori posibile: left, center, right HTML 3.2

Color=culoare Seteaz culoarea liniei Explorer
Size=valoare Standard
Specific grosimea liniei, n pixeli
HTML 3.2
Netscape
Width=valoare Specific limea liniei, n pixeli sau n Standard

procente din limea paginii HTML 3.2
<HTML></HTML> Standard
Delimiteaz documentul HTML
HTML 3.2
<I></I> Standard
Afieaz textul cu caractere italice
HTML 3.2

Netscape
<IFRAME></IFRA
ME> Definete un cadru intern Explorer
Seteaz poziia cadrului fa de textul care l

nconjoar.
Align=pozitie Explorer
Valori posibile: top, center, bottom,
left, right
Stabilete dac chenarul cadrului va fi
Frameborder=va
afiat. Explorer
loare
Valori posibile: 1 sau 0.
Height=n Seteaz nlimea cadrului, n pixeli Explorer
Marginheight=n Seteaz distana n pixeli, dintre coninutul

Explorer
cadrului i marginile superioar i inferioar
Seteaz distana n pixeli, dintre coninutul
Marginwidth=n cadrului i marginile din stnga i din Explorer
dreapta
87
Name=nume Specific numele cadrului Explorer
Specific dac sunt prezente barele de
Scrolling=valo
derulare. Explorer
are
Valori posibile: yes, no
Src=URL Specific adresa URL a documentului care

Explorer
se va deschide n cadru
Width=n Seteaz limea cadrului, n pixeli Explorer
<IMG> Standard
Insereaz o imagine n document
HTML 3.2
Aliniaz imaginea fa de textul din jur.
Standard
Align=pozitie Valori posibile: top, middle, bottom,
HTML 3.2
left, right
Alt=string Standard
Specific un text alternativ imaginii
HTML 3.2
Border=n Seteaz limea n pixeli a chenarului n Standard

jurul imaginii HTML 3.2

Controls Adaug butoane de control ferestrei n care

Explorer
ruleaz un clip video
Dynsrc=URL Specific adresa URL a fiierului video Explorer
Height=n Standard
Specific nlimea imaginii, n pixeli
HTML 3.2
Hspace=n Specific distana pe orizontal dintre Standard

imagine i textul din jur HTML 3.2
Indic faptul c imaginea este o zon activ,
Ismap Standard
atunci cnd este inclus ntre etichetele
<A></A> HTML 3.2
Seteaz numrul de reluri al clipului video.

Loop=valoare Valoarea poate fi un numr ntreg sau Explorer
infinite.
Name=nume Furnizeaz un nume pentru imagine, pentru

Netscape
a fi folosit de un script JavaScript
Src=URL Standard
Specific adresa URL a imaginii
HTML 3.2
Specific momentul nceperii clipului.
Start=valoare Explorer
Valori posibile: FileOpen, MouseOver
Netscape
Usemap=URL Specific legtura cu identificatorul hrii Standard

aplicate imaginii HTML 3.2
Vspace=n Specific distana pe vertical dintre Standard

imagine i textul din jur HTML 3.2
88
Width=n Standard
Specific limea imaginii, n pixeli
HTML 3.2
<INPUT Creeaz un element de tip buton n cadrul Explorer,
type="button"> unui formular Netscape
Specific numele parametrului care va fi
Name=nume Explorer,
transmis script-ului care proceseaz
Netscape
formularul
onClick=script Specific script-ul care va fi executat dac Explorer,

se efectueaz click pe buton Netscape
Value=string Explorer,
Specific textul care va fi afiat pe buton
Netscape
<INPUT
type="checkbox Creeaz un element de tip caset de validare Standard
"> n cadrul unui formular HTML 3.2
Checked Standard
Marcheaz elementul ca fiind iniial selectat
HTML 3.2
Name=nume Standard
HTML 3.2
formularul, dac acest element este selectat
onClick=script Specific script-ul care va fi apelat dac Explorer,

acest element este selectat Netscape
Specific valoarea parametrului care va fi
value=string Standard
HTML 3.2
<INPUT Creeaz un element ascuns n cadrul Standard
type="hidden"> formular HTML 3.2
Name=nume Standard
HTML 3.2
formularul
Value=string Specific valoarea acestui element care va fi Standard

transmis script-ului HTML 3.2
<INPUT Creeaz un element de tip imagine n cadrul Standard
type="image"> unui formular HTML 3.2
Aliniaz elementul fa de textul care
Standard
Align=pozitie nsoete elementele din formular.
HTML 3.2
Valori posibile: top, middle, bottom
Border=n Seteaz grosimea chenarului imaginii, n Standard

pixeli HTML 3.2
onClick=script Specific script-ul care va fi apelat dac se Explorer,

efectueaz click pe imagine Netscape
Name=nume Standard
HTML 3.2
formularul
Src=URL Standard
Specific adresa URL a imaginii
HTML 3.2
89
<INPUT
type="password Creeaz un cmp de tip password ntr-un Standard
"> formular HTML 3.2
Maxlength=n Specific numrul maxim de caractere care Standard

pot fi introduse HTML 3.2
Name=nume Standard
HTML 3.2
formularul
onBlur=script Specific un script care va fi apelat cnd Explorer,

mouse-ul prsete elementul Netscape
onChange=scrip Specific un script care va fi apelat cnd Explorer,
t coninutul cmpului este schimbat Netscape
onFocus=script Specific un script care va fi apelat cnd Explorer,

mouse-ul se afl poziionat pe acest cmp Netscape
onSelect=scrip Specific un script care va fi apelat cnd se Explorer,
t efectueaz click pe acest cmp Netscape
Size=n Specific numrul de caractere care vor fi Standard

afiate n interiorul cmpului HTML 3.2
Specific valoarea iniial a cmpului i
Value=string Standard
valoarea care va fi transmis script-ului care
HTML 3.2
proceseaz formularul
<INPUT Creeaz un element de tip buton radio n Standard
type="radio"> cadrul unui formular HTML 3.2
Checked Standard
Marcheaz elementul ca iniial selectat
HTML 3.2
Name=nume Standard
HTML 3.2
onClick=script Specific script-ul care va fi apelat dac Explorer,

acest element este selectat Netscape
Specific valoarea parametrului care va fi
transmis script-ului, dac acest element este
HTML 3.2
selectat
<INPUT Creeaz un buton de tip Reset ntr-un Standard
type="reset"> formular HTML 3.2

Value=string Specific textul care va fi afiat pe buton Standard

(prestabilit acesta este Reset) HTML 3.2
<INPUT Creeaz un buton de tip Submit ntr-un Standard
type="submit"> formular HTML 3.2
Name=nume Standard
HTML 3.2
formularul
90
Value=string Specific textul care va fi afiat pe buton Standard

(prestabilit acesta este Submit) HTML 3.2
<INPUT Creeaz un element de tip cmp de editare Standard
type="text"> ntr-un formular HTML 3.2
Maxlength=n Specific numrul maxim de caractere Standard

acceptate HTML 3.2
Name=nume Standard
HTML 3.2
formularul
onBlur=script Specific un script care va fi apelat cnd Explorer,

mouse-ul prsete elementul Netscape
onChange=scrip Specific un script care va fi apelat cnd Explorer,
t coninutul cmpului este schimbat Netscape
onFocus=script Specific un script care va fi apelat cnd Explorer,

mouse-ul se afl poziionat pe acest cmp Netscape
onSelect=scrip Specific un script care va fi apelat cnd se Explorer,
t efectueaz click pe acest cmp Netscape
Size=n Specific numrul de caractere care vor fi Standard

afiate n interiorul cmpului HTML 3.2
Specific valoarea iniial pentru acest
cmp i valoarea care va fi transmis script-
HTML 3.2
ului
<KBD></KBD> Textul inclus ntre etichete este un text de Standard

tip "intrare de la tastatur" HTML 3.2
<LI></LI> Standard
Delimiteaz elementul unei liste
HTML 3.2

Netscape
Type=format Standard
Specific forma de marcaj a elementului.
HTML 3.2
Value=n Seteaz numrul acestui element n cadrul Standard

listei la valoarea n HTML 3.2
Definete o legtur ntre documentul n
<LINK> Standard
care este prezent eticheta i un alt
HTML 3.2
document
Href=URL Standard
Specific adresa URL a documentului int
HTML 3.2
Rel=relatie Specific relaia dintre documentul curent i Standard

documentul int HTML 3.2
Rev=relatie Specific relaia dintre documentul int i Standard

documentul curent HTML 3.2
91
Title=string Standard
Specific un titlu pentru documentul int
HTML 3.2
Specific tipul documentului int. Se
Type=string Explorer,
folosete n asociere cu foile de stiluri unde
Netscape
tipul are valoarea text/css
<MAP></MAP> Definete o hart coninnd zone active n Standard

cadrul unei imagini hart HTML 3.2
Name=nume Standard
Specific un nume pentru hart
HTML 3.2
<MARQUEE></MAR
QUEE> Creeaz un text derulant Explorer
Aliniaz textul derulant fata de textul din

Align=pozitie jur. Explorer
Valori posibile: top, bottom, middle
Definete tipul de micare.
Behavior=tip
Valori posibile: scroll, slide, Explorer
de miscare
alternate
Bgcolor=culoar
e Definete un fundal pentru textul derulant Explorer
Class=nume Specific o clas de stiluri care controleaz

Explorer
aspectul acestei etichete
Direction=dire
Definete direcia de deplasare.
ctia de Explorer
Valori posibile: left, right
miscare
Height=n Definete nlimea zonei de text, n pixeli Explorer
Hspace=n Specific distana pe orizontal ntre textul

Explorer
derulant i textul din jur
Loop=valoare Seteaz numrul de animaii ale textului Explorer
Style=stil Specific un stil in-line pentru etichet Explorer
Vspace=n Specific distana pe vertical ntre textul

Explorer
derulant i textul din jur
Width=n Definete limea ariei de text derulant Explorer
<MENU></MENU> Standard
Definete o list de tip meniu
HTML 3.2

Netscape
Type=tip Definete tipul de marcaj pentru list. Explorer,
marcaj Valori posibile: circle, disc, square Netscape
<META> Furnizeaz informaii suplimentare despre Standard

document HTML 3.2
Charset=set de Specific setul de caractere care va fi
caractere Explorer
utilizat n document
92
Content=string Standard
Specific valoarea meta-informaiei
HTML 3.2
Specific numele meta-informaiei, n
Http- echivalent HTTP. Provoac includerea
Standard
equiv=string informaiilor despre document n headerul
HTML 3.2
HTTP care este transmis de server,
browserului
Name=nume Standard
Specific numele meta-informaiei
HTML 3.2
<NOBR></NOBR> Interzice ntreruperea liniilor n textul inclus Explorer,

ntre etichete Netscape
<NOFRAMES></NO Definete coninutul furnizat browserelor Explorer,
FRAMES> care nu suport cadre Netscape
<NOSCRIPT></NO Definete coninutul furnizat browserelor
SCRIPT> Netscape
care nu suport script-uri
<OL></OL> Standard
Definete o list ordonat
HTML 3.2

Start=n Seteaz numerotarea listei ncepnd de la Standard

valoarea n HTML 3.2
Netscape
Seteaz formatul de marcare a listei.
Type=format Valori posibile: A (litere mari), a (litere Standard
mici), I (cifre romane mari), i (cifre romane HTML 3.2
mici), 1 (cifre arabe)
<OPTION></OPTI Definete o opiune n cadrul unui bloc Standard
ON> <SELECT>ntr-un formular HTML 3.2

Selected Standard
Marcheaz elementul ca fiind iniial selectat
HTML 3.2
Netscape
Value=string Specific valoarea returnat script-ului care Standard

prelucreaz formularul HTML 3.2
<P></P> Standard
Specific nceputul i sfritul unui paragraf
HTML 3.2
Aliniaz textul din paragraf. Standard
Align=pozitie

Netscape
93
Creeaz un bloc de text care respect
<PRE></PRE> Standard
formatarea predefinit n documentul
HTML 3.2
HTML
<S></S>
<STRIKE></STRI Realizeaz afiarea textului tiat de o linie Standard
KE> orizontal HTML 3.2

Netscape
<SCRIPT></SCRI Explorer,
PT> Definete un script n cadrul unui document
Netscape
Specific limbajul script-ului. Explorer,
Language=limba
Valori posibile: javascript, vbscript Netscape
Src=URL Specific adresa URL a documentului care Explorer,

conine script-ul Netscape
<SELECT></SELE Definete un element de tip meniu ntr-un Standard
CT> formular HTML 3.2

Multiple Permite selectarea de opiuni multiple din Standard

meniu HTML 3.2
Definete numele parametrilor
Name=nume corespunztori opiunilor din meniu. Standard
Acestea vor fi transmise script-ului care HTML 3.2
proceseaz formularul
onBlur=script Specific un script care va fi apelat cnd

Netscape
mouse-ul prsete elementul
onChange=scrip Specific un script care va fi apelat cnd
t Netscape
coninutul cmpului este schimbat
onClick=script Specific un script care va fi apelat cnd se

Netscape
efectueaz click pe acest cmp
onFocus=script Specific un script care va fi apelat cnd

Netscape
mouse-ul este poziionat pe acest cmp
Dac n=1 este afiat un meniu de tip sus/jos,
Size=n Standard
daca n>1 se afieaz un meniu cu bar de
HTML 3.2
derulare
Netscape
<SMALL></SMALL Afieaz textul cu fonturi de dimensiune Standard
> mai mic dect cea curent HTML 3.2

Netscape
94
<SPAN></SPAN> Definete un sector de text pentru a i se Explorer,
aplica un stil Netscape

Netscape
<STRONG></STRO Standard
NG> Afieaz textul cu caractere aldine
HTML 3.2

Netscape
<STYLE></STYLE Explorer,
> Definete un stil n cadrul unui document
Netscape
Specific formatul stilului. ntotdeauna Explorer,
Type=format
valoarea este text/css Netscape
<SUB></SUB> Standard
Permite scrierea indicilor inferiori
HTML 3.2

Netscape
<SUP></SUP> Standard
Permite scrierea indicilor superiori
HTML 3.2

Netscape
<TABLE></TABLE Standard
> Definete un tabel
HTML 3.2
Align=pozitie Aliniaz tabelul fa de textul din jur. Standard

Valori posibile: left, right, center HTML 3.2
Background=URL Definete o imagine de fundal pentru tabel Explorer
Bgcolor=culoar Explorer,
e Definete o culoare de fundal pentru tabel
Netscape
Border=n Specific grosimea n pixeli a chenarului Standard

tabelului HTML 3.2
Bordercolor=cu
loare Definete culoarea chenarului Explorer
Bordercolordar Definete culoarea laturilor de jos i dreapta

k=culoare Explorer
ale tabelului
Bordercolorlig Definete culoarea laturilor de sus i stnga
ht=culoare Explorer
ale tabelului
95
Cellpadding=n Specific distana dintre marginea celulelor Standard
i textul din interiorul lor HTML 3.2
Cellspacing=n Standard
Specific distana dintre celule
HTML 3.2

Cols=n Explorer,
Specific numrul de coloane din tabel
Netscape
Definete poziia laturilor din chenar care
vor fi afiate.
Frame=pozitie
Valori posibile: border, void, above, Explorer
chenar
below, hsides, vsides, lhs, rhs,
box
Height=n Definete nlimea tabelului n pixeli sau Standard

procente HTML 3.2
Hspace=n Specific distana pe orizontal ntre

Netscape
marginile tabelului i elementele din jur
Nowrap Interzice ntreruperea liniilor n cadrul

Explorer
celulelor tabelului
Specific unde vor fi afiate chenarele
Rules=margini celulelor. Explorer
Valori posibile: none, rows, cols, all
Netscape
Aliniaz textul din tabel.
Valign=pozitie Valori posibile: top, center, bottom, Explorer
baseline
Vspace=n Specific distana pe vertical ntre

Netscape
marginile tabelului i elementele din jur
Width=n Definete limea tabelului n pixeli sau Standard

procente din limea paginii HTML 3.2
<TD></TD> Standard
Definete o celul de date n tabel
HTML 3.2
Aliniaz coninutul celulei. Standard
Align=pozitie
Background=URL Specific o imagine de fundal pentru celul Explorer
e Specific o culoare de fundal pentru celul
Netscape
Bordercolor=cu
loare Definete culoarea chenarului celulei Explorer

k=culoare Explorer
ale celulei
ht=culoare Explorer
ale celulei
96
Colspan=n Specific extinderea celulei curente peste n Standard

coloane vecine HTML 3.2
Height=n Standard
Definete nlimea celulei n pixeli
HTML 3.2
Nowrap Standard
Interzice ntreruperea linei de text n celul
HTML 3.2
Rowspan=n Specific extinderea celulei curente peste n Standard

linii vecine HTML 3.2
Netscape
Valign=pozitie Aliniaz coninutul celulei. Standard

Valori posibile: top, center, bottom, baseline HTML 3.2
Width=n Standard
Definete limea celulei n pixeli
HTML 3.2
<TEXTAREA></TE Creeaz un cmp de editare multi-linie n Standard
XTAREA> cadrul unui formular HTML 3.2

Cols=n Specific numrul de coloane (caractere) Standard

disponibile pe orizontal HTML 3.2
Name=nume Standard
HTML 3.2
formularul
onBlur=script Specific un script care va fi apelat cnd

Netscape
mouse-ul prsete elementul
onChange=scrip Specific un script care va fi apelat cnd
t Netscape
coninutul cmpului este schimbat
onFocus=script Specific un script care va fi apelat cnd

Netscape
mouse-ul se afl poziionat pe acest cmp
onSelect=scrip Specific un script care va fi apelat cnd se
t Netscape
efectueaz click pe acest cmp
Rows=n Specific numrul de linii disponibile pe Standard

orizontal HTML 3.2
Netscape
Seteaz tipul de ntrerupere a liniilor de text.
Valori posibile: off, virtual

Wrap=tip Netscape
(ntreruperea textului e afiat dar nu e
transmis la server), physical
(ntreruperea e afiat i transmis la server)
<TH></TH> Standard
Definete un cap de tabel
HTML 3.2
97
Align=pozitie Aliniaz coninutul celulelor. Standard
Background=URL Specific o imagine de fundal pentru celul Explorer
e Specific o culoare de fundal pentru celul
Netscape
Bordercolor=cu
loare Definete culoarea chenarului celulei Explorer

k=culoare Explorer
ale celulei
ht=culoare Explorer
ale celulei

Colspan=n Specific extinderea celulei curente peste n Standard

coloane vecine HTML 3.2
Height=n Standard
Definete nlimea celulei n pixeli
HTML 3.2
Nowrap Standard
Interzice ntreruperea linei de text n celul
HTML 3.2
Rowspan=n Specific extinderea celulei curente peste n Standard

linii vecine HTML 3.2
Netscape
Valign=pozitie Aliniaz coninutul celulei. Standard

Valori posibile: top, center, bottom, baseline HTML 3.2
Width=n Standard
Definete limea celulei n pixeli
HTML 3.2
<TITLE></TITLE Standard
> Definete titlul documentului HTML
HTML 3.2
<TR></TR> Standard
Definete o linie de celule ntr-un tabel
HTML 3.2
Aliniaz coninutul celulelor din line. Standard
Align=pozitie
Bgcolor=culoar Specific o culoare de fundal pentru Explorer,
e ntreaga linie Netscape
Bordercolor=cu
loare Definete culoarea chenarului liniei Explorer

k=culoare Explorer
ale liniei
ht=culoare Explorer
ale liniei

98
Nowrap Interzice ntreruperea liniilor de text pentru
Explorer
toate celulele liniei
Netscape
Aliniaz coninutul celulelor din cadrul
liniei. Standard
Valign=pozitie
Valori posibile: top, center, bottom, HTML 3.2
baseline
<TT></TT> Formateaz textul inclus ntre etichete n stil Standard

monospaiat HTML 3.2

Netscape
<U></U> Standard
Afieaz textul subliniat
HTML 3.2

Netscape
<UL></UL> Standard
Definete o list neordonat
HTML 3.2

Netscape
Definete formatul marcajului pentru
Standard
Type=format elementele listei.
HTML 3.2
Valori posibile: circle, disc, square
99
Anexa 2
Dicionar de termeni
applet (~ Java) Un program Java de dimensiuni reduse care poate fi

inclus ntr-un document HTML. Applet-urile difer de
programele Java prin aceea c sunt restricionate din
punct de vedere al accesului la anumite resurse ale
computerului pe care ruleaz, precum i al accesului la
resursele reelei. Aceste restricii sunt impuse pentru a
preveni nclcrile accidentale sau deliberate ale
securitii sistemului.
ASCII Sistemul standard de codificare a caracterelor folosit
pentru a reprezenta literele mari i mici, cifrele,
caracterele speciale de pe tastatur, etc. Sistemul ASCII
cuprinde 128 de coduri, fiecare dintre acestea fiind
reprezentat printr-un numr binar de 7 cifre, ntre
0000000 i 1111111. Sistemul ASCII extins cuprinde
256 de coduri, ultimele 128 fiind folosite pentru a
reprezenta caractere nestandard: litere accentuate sau
care nu fac parte din alfabetul latin, de exemplu.
bps (bits per second) Unitatea de msur a vitezei de transfer a datelor. Un
modem de 56K poate transmite datele cu o vitez de
pn la 57 000 bps.
Browser Un program care permite vizualizarea hypertextului i
navigarea ntre diferite resurse aflate pe Web.
CGI Un set de reguli care descrie modul de comunicare
(Common Gateway dintre un server Web i anumite aplicaii aflate pe
Interface) acesta, numite programe CGI. Orice aplicaie poate fi
un program CGI dac respect regulile de intrare a
datelor, respectiv de afiare a rezultatelor impuse de
standardul CGI.
cgi-bin Numele atribuit directorului de pe serverul Web n care
sunt stocate programele CGI.
client Un computer sau o aplicaie software care este folosit
(computer ~ pentru a contacta i a obine anumite date de la un alt
aplicaie ~) computer sau aplicaie (server).
dial-up O conexiune temporar ntre dou computere prin
intermediul liniei telefonice.
Director Un nod n sistemul ierarhic de fiiere, care poate
conine alte noduri: fiiere sau alte directoare.
Download Procesul de transfer al unui fiier de pe un alt computer
pe computerul propriu.
domeniu (~ Internet) Un grup de computere din reeaua Internet care mpart
acelai nume de domeniu. Numele de domeniu sunt
formate din dou sau mai multe pri separate prin
punct. Partea din stnga este cea mai specific, cea din
dreapta este cea mai general. Un computer poate face
parte din mai multe domenii (poate avea mai multe
nume de domeniu), dar un nume de domeniu indic n
mod unic spre un singur computer.
100
e-mail (electronic mail) Un sistem de transmitere a datelor (mesaje tip text,
imagini, HTML, etc.) ntre doi sau mai muli utilizatori,
pe reeaua Internet. Pot electronic.
Folder Sinonim, n sistemele Windows, cu director.
FTP Metoda de transfer a fiierelor ntre dou locaii de pe
(File Transfer Protocol) Internet. Prin FTP un computer poate fi conectat la un
alt computer de pe Internet pentru a se realiza trimiterea
sau primirea fiierelor. Sistemul FTP a fost inventat i
utilizat cu mult nainte de World Wide Web.
GIF Unul dintre cele mai folosite formate pentru codificarea
(Graphic Interchange imaginilor, folosit mai ales n cazul imaginilor cu
Format) numr redus de culori (256) i care conin zone extinse
colorate cu aceeai culoare.
Gopher Un sistem ierarhizat de meniuri care conin informaii
despre resursele disponibile pe Internet. Gopher
folosete o interfa de tip text i funcioneaz pe
principiul client/server, ceea ce nseamn c pentru a
putea accesa sistemul este necesar o aplicaie Gopher
client. Dei a cunoscut o larg popularitate la mijlocul
anilor '90 n prezent este n general nlocuit de World
Wide Web. Astzi nu mai exist dect relativ puine
servere Gopher.
Header Partea de la nceputul unui pachet de date care conine
informaii despre coninutul pachetului, adresa sursei i
a destinaiei, verificri ale erorilor i alte cmpuri.
host Un computer dintr-o reea care este furnizorul unor
servicii pentru celelalte computere din reea cum ar fi
SMTP (e-mail) sau HTTP (WWW)
HTML Limbajul folosit pentru a crea documente Web.
(Hypertext Markup Documentele HTML pot fi vizualizate folosind un
Language) browser.
HTTP Protocolul de transfer al fiierelor de tip hypertext. Este
(Hypertext Transfer cel mai important protocol folosit n World Wide Web.
Protocol)
hypertext, hypermedia Un text care conine legturi (link-uri) ctre alte
documente. Extinderea hypertextului prin includerea
elementelor media: sunet, imagini, video este cunoscut
sub numele de hypermedia.
Internet O imens reea de reele de computere interconectate,
care acoper ntreg globul.
IP Un numr format din patru grupuri de numere mai mici
(Internet Protocol) de 256, separate prin punct care identific n mod unic
fiecare computer conectat la Internet.
ISP O instituie care furnizeaz contra cost acces la reeaua
(Internet Service Internet.
Provider)
101
Java Un limbaj de programare orientat pe obiecte, inventat
de firma Sun Microsystems, folosit adesea pentru a
realiza aplicaii pentru Internet. Limbajul Java este
utilizat foarte frecvent pentru a crea aplicaii de
dimensiuni reduse numite applet-uri care pot fi incluse
n paginile Web.
JavaScript Un limbaj de programare utilizat pentru face paginile
Web dinamice i interactive.
JPEG Un format foarte utilizat pentru fiierele grafice. Este
(Joint Photographic folosit pentru imagini fotografice cu numr foarte mare
Experts Group) de culori.
legtura (link) O referin aflat ntr-un document ctre un alt punct
din acelai document sau ctre un document diferit. La
efectuarea de click cu mouse-ul pe legtur, browserul
afieaz documentul specificat n referin.
MIME La origine, standardul care definete tipurile de fiiere
(Multipurpose Internet ataate unui mesaj prin e-mail. Este folosit pe scar
Mail Extensions) larg pentru a defini diversele tipuri de fiiere transmise
prin reea.
motor de cutare Un sistem de aplicaii folosit pentru a cuta informaii
(search engine) n World Wide Web.
Exemple: Google, Yahoo, Lycos, etc.
Port 1. Locul de intrare sau ieire a informaiilor n/din
computer. De exemplu, un port serial este locul unde
este conectat modemul.
2. Un numr care face parte uneori din adresa URL,
semnificnd un anumit serviciu oferit de server. Fiecare
serviciu oferit de server deine un numr standard de
port, de exemplu HTTP deine portul 80.
protocol (~ Internet) Un set de reguli formale care regleaz transferul de
informaii prin reeaua Internet. Protocoalele de nivel
sczut definesc standardele de tip electric sau fizic iar
protocoalele de nivel nalt definesc standardele privind
formatarea datelor, sintaxa mesajelor, setul de caractere,
etc.
plug-in O aplicaie de dimensiuni reduse care adaug anumite
caracteristici sau extinde ntr-o anumit direcie
posibilitile unei aplicaii mai largi.
RGB (Red, Green, Blue) Sistemul standard de codificare a culorilor. Fiecare
culoare este desemnat printr-o combinaie de trei
numere scrise fie n sistemul zecimal fie n cel
hexazecimal, care specific ce cantitate de rou, verde
i albastru intr n componena culorii respective.
Script Un program scris ntr-un limbaj de programare cum ar
fi C/C++, Perl, JavaScript i altele, care poate fi
executat de browser (client-side script) sau de server
(server-side script)
102
Server 1. Un computer care furnizeaz anumite servicii altor
computere conectate n reea.
2. O aplicaie care asigur anumite servicii altor
aplicaii numite clieni. Legtura dintre client i server
are drept scop transmiterea de informaii respectnd un
anumit protocol.
SMTP Protocolul principal utilizat pentru a transmite
(Simple Mail Transfer informaii de tip e-mail de la un server la altul
Protocol)
TCP/IP O suit de protocoale care definesc n ansamblu
(Transmission Control transmiterea datelor pe Internet. La origine, a fost
Protocol/Internet destinat sistemului de operare UNIX, n prezent este
Protocol) inclus n toate sistemele de operare importante.
UNIX Cel mai utilizat sistem de operare folosit pentru
serverele de Internet.
Upload Procesul de transfer al datelor de pe computerul
personal pe un alt computer.
URL Adresa unei resurse disponibile pe Internet. Prima parte
(Uniform Resource a adresei se numete schem. Schema precizeaz
Locator) protocolul de transfer al datelor, cea utilizat n cadrul
Web fiind http.
World Wide Web O colecie imens de documente de tip hypertext
(WWW) conectate prin intermediul reelei Internet i care
folosete protocolul HTTP pentru transferul
informaiilor.
Prescurtri uzuale: Web, WWW, W3.
103
Anexa 3
Tabelul culorilor
000000 000033 000066 000099 0000CC 0000FF
330000 330033 330066 330099 3300CC 3300FF
003300 003333 003366 003399 0033CC 0033FF
333300 333333 333366 333399 3333CC 3333FF
006600 006633 006666 006699 0066CC 0066FF
336600 336633 336666 336699 3366CC 3366FF
009900 009933 009966 009999 0099CC 0099FF
339900 339933 339966 339999 3399CC 3399FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
660000 660033 660066 660099 6600CC 6600FF
990000 990033 990066 990099 9900CC 9900FF
663300 663333 663366 663399 6633CC 6633FF
993300 993333 993366 993399 9933CC 9933FF
104
666600 666633 666666 666699 6666CC 6666FF
996600 996633 996666 996699 9966CC 9966FF
669900 669933 669966 669999 6699CC 6699FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
105
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
800000 800033 800066 800099 8000CC 8000FF
800080 008000 808000 000080 008080 C0C0C0
106

HTML - Extras Din Manual

Încărcat de

Informații document

Titlu original

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

HTML - Extras Din Manual

Încărcat de

Drepturi de autor:

Formate disponibile

LECIA 1

Coninut i aspect ntr-un document HTML

Totui, nu aspectul formal, ci coninutul documentului primeaz. HTML conine numeroase ci

n abordarea bazat pe aspect, dac browserul nu recunoate indicaiile de formatare specificate,

Uneltele de care avei nevoie

2. Folosirea unui editor HTML.

Evident, pentru a vizualiza documentele dumneavoastr avei nevoie de un browser.

Scriei (editai) fiecare exemplu pe care l gsii aici.

Structura unui document HTML

Att etichetele ct i atributele sunt case-insensitive, ca atare nu va exista nici o diferen de

Regulile de folosire a etichetelor, atributelor i valorilor acestora reprezint sintaxa limbajului

<B> Acesta este un text scris cu litere aldine</B>

Etichetele HTML sunt de dou tipuri:

etichete container (container tags)

Etichetele container sunt de forma:

Etichetele vide au forma:

Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de

Orice document HTML conine dou seciuni:

Structura general a unui document HTML este urmtoarea:

Salvai fiierul cu numele primapagina.html. Apoi deschidei browserul pe care l folosii,

Iat dou exemple:

<!- - Acesta este un comentariu introdus in pagina Web - ->

<!Acesta este un comentariu

Folosirea corect a etichetelor

<CENTER><B>Text cu aldine si centrat</B></CENTER>

Iat un exemplu generic de folosire corect a dou etichete:

i un altul de folosire incorect:

<TAG1><TAG2>Etichete utilizate incorect</TAG1></TAG2>

Sistemul de definire a culorilor

Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele:

Corespondena dintre codurile hexazecimal i zecimal

bgcolor - culoarea fundalului

<BODY bgcolor="#RGB sau nume_culoare">

<BODY text="#RGB sau nume_culoare">

<FONT color="#RGB sau nume_culoare">Text</FONT>

blue (albastru) - pentru legturi

link pentru legturi

<BODY link="#RGB sau nume_culoare"

Iat cteva dintre sentimentele pe care le sugereaz culorile:

Rou - agresivitate, pasiune, putere, vitalitate

S analizm succesiv cele trei atribute ale etichetei <FONT>:

<FONT face="arial, verdana, times new roman">

n Exemplul 4.2 vom construi o pagin creia i setm textul cu atributele:

<BIG>Text cu caractere mari</BIG>

<SMALL>Text cu caractere mici</SMALL>

<B>Text ingrosat 1</B>

<STRONG>Text ingrosat 2</STRONG>

<I>Text inclinat 1</I>

<EM> Text inclinat 2</EM>

<S>Text taiat 1</S>

<STRIKE>Text taiat 2</STRIKE>

6. Eticheta <U> </U> (underlined) realizeaz sublinierea textului.

Apa ingheata la 0 <SUP>0</SUP>C

Coordonatele X<SUB>1</SUB>, Y<SUB>2</SUB>

Exemplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete.

3. Etichete logice i etichete fizice

Alte etichete logice utilizate n documentele HTML sunt:

Pentru a parasi programul tastati <KBD>quit</KBD>

"Courier" este un font monospaiat.

<FONT size="numar" color="#RGB sau nume_culoare" face="tip_font"> text

<BASEFONT size="numar" color="#RGB sau nume_culoare" face="tip_font">

1. Trecerea la un rnd nou

Acesta este textul de mai sus preformatat