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 Wordul 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.
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.
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.
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>
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:
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>
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
10
11
12
13
14
15
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
13
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,
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>
<SMALL>textului</SMALL>
</BODY>
</HTML>
aspectul
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
pagina Web<BR>
</BODY>
</HTML>
Mos
Craciun<BR>Invat
sa
construiesc
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
</BODY>
</HTML>
normal
normal
normal
normal
normal
normal
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
<HTML>
26
<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>
Adresa scolii noastre este
27
<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
caracter
Reprezentarea
grafic
Comanda
HTML

Spaiu liber
Copyright
©
Trademark

Registered
®
®
Mai mic dect
<
<
Mai mare dect
>
>
Ampersand
&
&
Ghilimele
"
"
Cent
&#162
Un sfert
&#188
O jumtate
&#189
Trei sferturi
&#190
Grade
&#176
sau
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
document</A></H1>
name="ancora1">Ancore
definite
in
acelasi
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
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
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
Google.com">Google</A>
</BODY>
</HTML>
catre
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

magenta pentru legaturi active<BR>
<A href="legaturi2.html">Link catre pagina 1 </A><BR>
</BODY>
</HTML>
vizitate
si
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
top - aliniere deasupra; partea de sus a imaginii se aliniaz cu prima linie a textului ce precede
imaginea
47
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
(bottom)</H1><HR>
<IMG
src="../Imagini/eaglehed.gif"
align="bottom"
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.Imagine
text.Imagine text.Imagine text.Imagine text.
</BODY>
</HTML>
textului
width="100"
text.Imagine
text.Imagine
text.Imagine
text.Imagine
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"
height="66" alt="vultur" vspace="10" hspace="10">
width="100"
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>
Imagine
text.Imagine
text.Imagine
text.Imagine
<IMG
src="../Imagini/devil.gif"
width="64"
alt="dracusor">
</DIV>
text.Imagine
height="64"
48
Imagine
text.Imagine
text.Imagine
text.Imagine
</BODY>
</HTML>
text.Imagine
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>
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
49
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"
alt="culori">
</A>
</BODY>
</HTML>
height="80"
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
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.
50
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"
loop="infinite">
src="../Imagini/intro.gif"
controls
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"
loop="infinite" start="fileopen, mouseover">
controls
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
inchide pagina</FONT>
<BGSOUND src="../Sunet/Welcom98.wav" loop="infinite">
</BODY>
</HTML>
cand
veti
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
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
pixeli pe orizontala fara de tabel. Acest text este plasat
dreapta tabelului la distanta de 10 pixeli pe orizontala fara
tabel. Acest text este plasat in dreapta tabelului la distanta
10 pixeli pe orizontala fara de tabel.
</BODY>
</HTML>
10
in
de
de
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
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>
de
200
de
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"
background="../Imagini/lace.gif>
<TR>
<TD>celula 11
<TD>celula 12
<TR>
<TD>celula 21
<TD>celula 22
</TABLE>
</BODY>
</HTML>
height="120"
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
<A></A>
Creeaz o legtur (cu atributul href) sau

identific o ancor (cu atributul name)
Standard
HTML 3.2
Class=nume
Specific o clas de stiluri care controleaz

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

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

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

browserele non-grafice
Standard
HTML 3.2
Coords=lista
coord
Coordonatele care definesc aria, desprite

prin virgule
Standard
HTML 3.2
Href=URL
Specific adresa URL asociat ariei
Standard
HTML 3.2
Shape=forma
Definete forma zonei active
Standard
HTML 3.2
Target=nume
Specific numele ferestrei n care se va

deschide documentul referit prin aria
respectiv
Netscape
Title=string
Specific un titlu pentru aria respectiv
Explorer
<B></B>
Textul este scris cu caractere aldine (bold)
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
81
<BASEFONT>
Precizeaz caracteristicile fonturilor din

documentul curent
Standard
HTML 3.2
Color=culoare
Specific culoarea fonturilor
Explorer
Face=tip
fonturi
Specific tipul fonturilor
Explorer
Size=valoare
Specific dimensiunea fonturilor
Explorer
<BIG></BIG>
Afieaz textul cu fonturi mai mari
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<BGSOUND>
Definete fundalul sonor pentru un

document
Explorer
loop=valoare
Seteaz numrul de reluri ale bucii

muzicale.
Valori posibile: un numr ntreg sau
infinite
Explorer
src=URL
Furnizeaz adresa URL a fiierului audio.
Explorer
<BLOCKQUOTE></
BLOCKQUOTE>
Include un citat. Textul este indentat fa de

marginea din stnga a ferestrei
Standard
HTML 3.2
<BODY></BODY>
Delimiteaz corpul documentului
Standard
HTML 3.2
Alink=culoare
Definete culoarea legturii active
Standard
HTML 3.2
Background=URL
Specific adresa URL a imaginii de fundal

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

Explorer,
Netscape
Leftmargin=val
oare
Specific dimensiunea n pixeli a marginii

din stnga a paginii
Explorer
Link=culoare
Definete culoarea legturilor
Standard
HTML 3.2
Style=stil
Explorer,
Netscape
Text=culoare
Definete culoarea textului din pagin
Standard
HTML 3.2
Topmargin=valo
are
Specific dimensiunea n pixeli a marginii

de sus a paginii
Explorer
Vlink=culoare
Definete culoarea legturilor vizitate
Standard
HTML 3.2
82
<BR>
Specific sfritul unei linii i nceputul

unei linii noi
Standard
HTML 3.2
clear=margine
ntrerupe linia curent i ncepe noul rnd la

marginea dorit.
Valori posibile: left, right, none, all.
Standard
HTML 3.2
<CAPTION></CAP
TION>
Definete titlul unui tabel
Standard
HTML 3.2
Align=pozitie
Specific poziia n care se aliniaz titlul.

Valori posibile: top, bottom (Netscape),
left, right, center (Explorer)
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
Valign=pozitie
Specific poziia pe vertical a titlului.

Valori posibile: top, bottom
Explorer
<CENTER></CENT
ER>
Centreaz textul
Standard
HTML 3.2
<CITE></CITE>
Insereaz un citat
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<CODE></CODE>
Insereaz o mostr de cod
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<COL>
Definete o coloan n cadrul unui grup de

coloane
Explorer
Align=pozitie
Specific alinierea coloanei.

Valori posibile: left, center, right
Explorer
Span=n
Specific numrul de coloane afectate de

eticheta <COL>
Explorer
<COLGROUP></CO
LGROUP>
Definete un grup de coloane n cadrul unui

tabel
Explorer
Align=pozitie
Specific alinierea pe orizontal a textului

din coloane.
Explorer
Class=nume

Explorer
Span=n
Stabilete numrul de coloane din grup
Explorer
83
Style=stil
Explorer
Valign=pozitie
Seteaz alinierea pe vertical a textului din

coloane.
Valori posibile: top, middle, bottom
Explorer
Width=valoare
Seteaz limea fiecrei coloane din grup, n

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

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<DFN></DFN>
Formateaz textul inclus ca o definiie
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<DIR></DIR>
Creeaz o list de directoare, elementele

fiind introduse prin eticheta <LI>
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
Type=marcaj
Specific tipul de marcaj.

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

<DIV>.
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Nowrap
Interzice ntreruperea liniilor din bloc
Explorer
Style=stil
Explorer,
Netscape
<DL></<DL>
Creeaz o list de definiii
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<DT></DT>
Introduce un element al unei liste de

definiii
Standard
HTML 3.2
84
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<EM></EM>
Accentueaz textul inclus ntre etichete prin

scrierea cu caractere italice
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<FONT></FONT>
Seteaz caracteristicile textului inclus ntre

etichete
Standard
HTML 3.2
Color=culoare
Seteaz culoarea textului
Standard
HTML 3.2
Face=lista
tipuri font
Specific tipurile de font
Explorer,
Netscape
Size=valoare
Specific dimensiunea textului. Valori

posibile: 1-7 (valori absolute), +n sau n
(valori relative la dimensiunea curent)
Standard
HTML 3.2
<FORM></FORM>
Definete un formular
Standard
HTML 3.2
Action=URL
Specific adresa URL a script-ului care va

prelucra datele din formular
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Enctype=mod de
codare
Specific modul de codare al datelor
Standard
HTML 3.2
Method=metoda
Specific metoda de transmitere a datelor.

Valori posibile Post, Get
Standard
HTML 3.2
Name=nume
Specific un nume pentru formular pentru a

fi folosit de un script JavaScript
Netscape
Style=stil
Explorer,
Netscape
Target=nume
Specific numele ferestrei n care vor fi

afiate rezultatele dup procesarea
formularului
Explorer,
Netscape
<FRAME></FRAME
>
Definete un cadru ntr-un set de cadre
Explorer,
Netscape
Border=n
Seteaz grosimea chenarului unui cadru
Netscape
Bordercolor=cu
loare
Seteaz culoarea chenarului unui cadru
Explorer,
Netscape
85
Frameborder=va
loare
Stabilete dac chenarul cadrului va fi

afiat.
Valori posibile: yes/no (Netscape),
1 / 0 (Netscape, Explorer)
Explorer,
Netscape
Marginheight=n
Seteaz distana n pixeli, dintre coninutul

cadrului i marginile superioar i inferioar
Explorer,
Netscape
Marginwidth=n

cadrului i marginile din stnga i din
dreapta
Explorer,
Netscape
Name=nume
Specific numele cadrului
Explorer,
Netscape
Noresize
Anuleaz posibilitatea utilizatorului de a

redimensiona cadrul
Explorer,
Netscape
Scrolling=valo
are
Specific dac sunt prezente barele de

derulare.
Valori posibile: yes, no, auto
Explorer,
Netscape
Src=URL
Specific adresa URL a documentului care

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

set
Netscape
Bordercolor=cu
loare
Seteaz culoarea chenarelor cadrelor din set
Explorer,
Netscape
Cols=lista
Specific numrul i limea cadrelor din set
Explorer,
Netscape
Frameborder=va
loare
Stabilete dac chenarele cadrelor vor fi

afiate.
Valori posibile: yes/no (Netscape),
1 / 0 (Netscape, Explorer)
Explorer,
Netscape
Framespacing=n
Definete grosimea chenarelor cadrelor din

set
Explorer
Rows=lista
Specific numrul i nlimea cadrelor din

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

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

Valori posibile: left, right, center
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<HEAD></HEAD>
Delimiteaz antetul documentului
Standard
HTML 3.2
86
<Hn></Hn>
Insereaz un n text titlu de nivel n, unde n

este ntre 1 i 6.
Standard
HTML 3.2
Align=type
Specific alinierea titlului.

Valori posibile: left, center, right.
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<HR>
Introduce o linie orizontal
Standard
HTML 3.2
Align=pozitie
Specific alinierea liniei.

Standard
HTML 3.2
Class=nume

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

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

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<IFRAME></IFRA
ME>
Definete un cadru intern
Explorer
Align=pozitie
Seteaz poziia cadrului fa de textul care l

nconjoar.
Valori posibile: top, center, bottom,
left, right
Explorer
Frameborder=va
loare
Stabilete dac chenarul cadrului va fi

afiat.
Valori posibile: 1 sau 0.
Explorer
Height=n
Seteaz nlimea cadrului, n pixeli
Explorer
Marginheight=n

cadrului i marginile superioar i inferioar
Explorer
Marginwidth=n

cadrului i marginile din stnga i din
dreapta
Explorer
87
Name=nume
Specific numele cadrului
Explorer
Scrolling=valo
are
Specific dac sunt prezente barele de

derulare.
Valori posibile: yes, no
Explorer
Src=URL

se va deschide n cadru
Explorer
Width=n
Seteaz limea cadrului, n pixeli
Explorer
<IMG>
Insereaz o imagine n document
Standard
HTML 3.2
Align=pozitie
Aliniaz imaginea fa de textul din jur.

Valori posibile: top, middle, bottom,
left, right
Standard
HTML 3.2
Alt=string
Specific un text alternativ imaginii
Standard
HTML 3.2
Border=n
Seteaz limea n pixeli a chenarului n

jurul imaginii
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Controls
Adaug butoane de control ferestrei n care

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

imagine i textul din jur
Standard
HTML 3.2
Ismap
Indic faptul c imaginea este o zon activ,

atunci cnd este inclus ntre etichetele
<A></A>
Standard
HTML 3.2
Loop=valoare
Seteaz numrul de reluri al clipului video.

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

a fi folosit de un script JavaScript
Netscape
Src=URL
Specific adresa URL a imaginii
Standard
HTML 3.2
Start=valoare
Specific momentul nceperii clipului.

Valori posibile: FileOpen, MouseOver
Explorer
Style=stil
Explorer,
Netscape
Usemap=URL
Specific legtura cu identificatorul hrii

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

imagine i textul din jur
Standard
HTML 3.2
88
Width=n
Specific limea imaginii, n pixeli
Standard
HTML 3.2
<INPUT
type="button">
Creeaz un element de tip buton n cadrul

unui formular
Explorer,
Netscape
Name=nume
Specific numele parametrului care va fi

transmis script-ului care proceseaz
formularul
Explorer,
Netscape
onClick=script
Specific script-ul care va fi executat dac

se efectueaz click pe buton
Explorer,
Netscape
Value=string
Specific textul care va fi afiat pe buton
Explorer,
Netscape
<INPUT
type="checkbox
">
Creeaz un element de tip caset de validare

n cadrul unui formular
Standard
HTML 3.2
Checked
Marcheaz elementul ca fiind iniial selectat
Standard
HTML 3.2
Name=nume

formularul, dac acest element este selectat
Standard
HTML 3.2
onClick=script
Specific script-ul care va fi apelat dac

acest element este selectat
Explorer,
Netscape
value=string
Specific valoarea parametrului care va fi

Standard
HTML 3.2
<INPUT
type="hidden">
Creeaz un element ascuns n cadrul

formular
Standard
HTML 3.2
Name=nume

formularul
Standard
HTML 3.2
Value=string
Specific valoarea acestui element care va fi

transmis script-ului
Standard
HTML 3.2
<INPUT
type="image">
Creeaz un element de tip imagine n cadrul

unui formular
Standard
HTML 3.2
Align=pozitie
Aliniaz elementul fa de textul care

nsoete elementele din formular.
Valori posibile: top, middle, bottom
Standard
HTML 3.2
Border=n
Seteaz grosimea chenarului imaginii, n

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

efectueaz click pe imagine
Explorer,
Netscape
Name=nume

formularul
Standard
HTML 3.2
Src=URL
Specific adresa URL a imaginii
Standard
HTML 3.2
89
<INPUT
type="password
">
Creeaz un cmp de tip password ntr-un

formular
Standard
HTML 3.2
Maxlength=n
Specific numrul maxim de caractere care

pot fi introduse
Standard
HTML 3.2
Name=nume

formularul
Standard
HTML 3.2
onBlur=script
Specific un script care va fi apelat cnd

mouse-ul prsete elementul
Explorer,
Netscape
onChange=scrip
t

coninutul cmpului este schimbat
Explorer,
Netscape
onFocus=script

mouse-ul se afl poziionat pe acest cmp
Explorer,
Netscape
onSelect=scrip
t
Specific un script care va fi apelat cnd se

efectueaz click pe acest cmp
Explorer,
Netscape
Size=n
Specific numrul de caractere care vor fi

afiate n interiorul cmpului
Standard
HTML 3.2
Value=string
Specific valoarea iniial a cmpului i

valoarea care va fi transmis script-ului care
proceseaz formularul
Standard
HTML 3.2
<INPUT
type="radio">
Creeaz un element de tip buton radio n

cadrul unui formular
Standard
HTML 3.2
Checked
Marcheaz elementul ca iniial selectat
Standard
HTML 3.2
Name=nume

Standard
HTML 3.2
onClick=script
Specific script-ul care va fi apelat dac

acest element este selectat
Explorer,
Netscape
Value=string
Specific valoarea parametrului care va fi

transmis script-ului, dac acest element este
selectat
Standard
HTML 3.2
<INPUT
type="reset">
Creeaz un buton de tip Reset ntr-un

formular
Standard
HTML 3.2
onClick=script

Explorer,
Netscape
Value=string

(prestabilit acesta este Reset)
Standard
HTML 3.2
<INPUT
type="submit">
Creeaz un buton de tip Submit ntr-un

formular
Standard
HTML 3.2
Name=nume

formularul
Standard
HTML 3.2
90
onClick=script

Explorer,
Netscape
Value=string

(prestabilit acesta este Submit)
Standard
HTML 3.2
<INPUT
type="text">
Creeaz un element de tip cmp de editare

ntr-un formular
Standard
HTML 3.2
Maxlength=n
Specific numrul maxim de caractere

acceptate
Standard
HTML 3.2
Name=nume

formularul
Standard
HTML 3.2
onBlur=script

Explorer,
Netscape
onChange=scrip
t

Explorer,
Netscape
onFocus=script

Explorer,
Netscape
onSelect=scrip
t

Explorer,
Netscape
Size=n
Specific numrul de caractere care vor fi

afiate n interiorul cmpului
Standard
HTML 3.2
Value=string
Specific valoarea iniial pentru acest

cmp i valoarea care va fi transmis scriptului
Standard
HTML 3.2
<KBD></KBD>
Textul inclus ntre etichete este un text de

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

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

listei la valoarea n
Standard
HTML 3.2
<LINK>
Definete o legtur ntre documentul n

care este prezent eticheta i un alt
document
Standard
HTML 3.2
Href=URL
Specific adresa URL a documentului int
Standard
HTML 3.2
Rel=relatie
Specific relaia dintre documentul curent i

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

documentul curent
Standard
HTML 3.2
91
Title=string
Specific un titlu pentru documentul int
Standard
HTML 3.2
Type=string
Specific tipul documentului int. Se

folosete n asociere cu foile de stiluri unde
tipul are valoarea text/css
Explorer,
Netscape
<MAP></MAP>
Definete o hart coninnd zone active n

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

jur.
Valori posibile: top, bottom, middle
Explorer
Behavior=tip
de miscare
Definete tipul de micare.

Valori posibile: scroll, slide,
alternate
Explorer
Bgcolor=culoar
e
Definete un fundal pentru textul derulant
Explorer
Class=nume

Explorer
Direction=dire
ctia de
miscare
Definete direcia de deplasare.

Valori posibile: left, right
Explorer
Height=n
Definete nlimea zonei de text, n pixeli
Explorer
Hspace=n
Specific distana pe orizontal ntre textul

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

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

Explorer,
Netscape
Style=stil
Explorer,
Netscape
Type=tip
marcaj
Definete tipul de marcaj pentru list.

Valori posibile: circle, disc, square
Explorer,
Netscape
<META>
Furnizeaz informaii suplimentare despre

document
Standard
HTML 3.2
Charset=set de
caractere
Specific setul de caractere care va fi

utilizat n document
Explorer
92
Content=string
Specific valoarea meta-informaiei
Standard
HTML 3.2
Httpequiv=string
Specific numele meta-informaiei, n

echivalent HTTP. Provoac includerea
informaiilor despre document n headerul
HTTP care este transmis de server,
browserului
Standard
HTML 3.2
Name=nume
Specific numele meta-informaiei
Standard
HTML 3.2
<NOBR></NOBR>
Interzice ntreruperea liniilor n textul inclus

ntre etichete
Explorer,
Netscape
<NOFRAMES></NO
FRAMES>
Definete coninutul furnizat browserelor

care nu suport cadre
Explorer,
Netscape
<NOSCRIPT></NO
SCRIPT>
Definete coninutul furnizat browserelor

care nu suport script-uri
Netscape
<OL></OL>
Definete o list ordonat
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Start=n
Seteaz numerotarea listei ncepnd de la

valoarea n
Standard
HTML 3.2
Style=stil
Explorer,
Netscape
Type=format
Seteaz formatul de marcare a listei.

Valori posibile: A (litere mari), a (litere
mici), I (cifre romane mari), i (cifre romane
mici), 1 (cifre arabe)
Standard
HTML 3.2
<OPTION></OPTI
ON>
Definete o opiune n cadrul unui bloc

<SELECT>ntr-un formular
Standard
HTML 3.2
Class=nume

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

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

Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
93
<PRE></PRE>
Creeaz un bloc de text care respect

formatarea predefinit n documentul
HTML
Standard
HTML 3.2
<S></S>
<STRIKE></STRI
KE>
Realizeaz afiarea textului tiat de o linie

orizontal
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<SCRIPT></SCRI
PT>
Definete un script n cadrul unui document
Explorer,
Netscape
Language=limba
Specific limbajul script-ului.

Valori posibile: javascript, vbscript
Explorer,
Netscape
Src=URL

conine script-ul
Explorer,
Netscape
<SELECT></SELE
CT>
Definete un element de tip meniu ntr-un

formular
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Multiple
Permite selectarea de opiuni multiple din

meniu
Standard
HTML 3.2
Name=nume
Definete numele parametrilor

corespunztori opiunilor din meniu.
Acestea vor fi transmise script-ului care
proceseaz formularul
Standard
HTML 3.2
onBlur=script

Netscape
onChange=scrip
t

Netscape
onClick=script

Netscape
onFocus=script

mouse-ul este poziionat pe acest cmp
Netscape
Size=n
Dac n=1 este afiat un meniu de tip sus/jos,

daca n>1 se afieaz un meniu cu bar de
derulare
Standard
HTML 3.2
Style=stil
Explorer,
Netscape
<SMALL></SMALL
>
Afieaz textul cu fonturi de dimensiune

mai mic dect cea curent
Standard
HTML 3.2
Class=nume

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

aplica un stil
Explorer,
Netscape
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<STRONG></STRO
NG>
Afieaz textul cu caractere aldine
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<STYLE></STYLE
>
Definete un stil n cadrul unui document
Explorer,
Netscape
Type=format
Specific formatul stilului. ntotdeauna

valoarea este text/css
Explorer,
Netscape
<SUB></SUB>
Permite scrierea indicilor inferiori
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<SUP></SUP>
Permite scrierea indicilor superiori
Standard
HTML 3.2
Class=nume

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

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

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

ale tabelului
Explorer
Bordercolorlig
ht=culoare
Definete culoarea laturilor de sus i stnga

ale tabelului
Explorer
95
Cellpadding=n
Specific distana dintre marginea celulelor

i textul din interiorul lor
Standard
HTML 3.2
Cellspacing=n
Specific distana dintre celule
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Cols=n
Specific numrul de coloane din tabel
Explorer,
Netscape
Frame=pozitie
chenar
Definete poziia laturilor din chenar care

vor fi afiate.
Valori posibile: border, void, above,
below, hsides, vsides, lhs, rhs,
box
Explorer
Height=n
Definete nlimea tabelului n pixeli sau

procente
Standard
HTML 3.2
Hspace=n
Specific distana pe orizontal ntre

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

celulelor tabelului
Explorer
Rules=margini
Specific unde vor fi afiate chenarele

celulelor.
Valori posibile: none, rows, cols, all
Explorer
Style=stil
Explorer,
Netscape
Valign=pozitie
Aliniaz textul din tabel.

baseline
Explorer
Vspace=n
Specific distana pe vertical ntre

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

procente din limea paginii
Standard
HTML 3.2
<TD></TD>
Definete o celul de date n tabel
Standard
HTML 3.2
Align=pozitie
Aliniaz coninutul celulei.

Standard
HTML 3.2
Background=URL
Specific o imagine de fundal pentru celul
Explorer
Bgcolor=culoar
e
Specific o culoare de fundal pentru celul
Explorer,
Netscape
Bordercolor=cu
loare
Definete culoarea chenarului celulei
Explorer
Bordercolordar
k=culoare

ale celulei
Explorer
Bordercolorlig
ht=culoare

ale celulei
Explorer
96
Class=nume

Explorer,
Netscape
Colspan=n
Specific extinderea celulei curente peste n

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

linii vecine
Standard
HTML 3.2
Style=stil
Explorer,
Netscape
Valign=pozitie

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

cadrul unui formular
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Cols=n
Specific numrul de coloane (caractere)

disponibile pe orizontal
Standard
HTML 3.2
Name=nume

formularul
Standard
HTML 3.2
onBlur=script

Netscape
onChange=scrip
t

Netscape
onFocus=script

Netscape
onSelect=scrip
t

Netscape
Rows=n
Specific numrul de linii disponibile pe

orizontal
Standard
HTML 3.2
Style=stil
Explorer,
Netscape
Seteaz tipul de ntrerupere a liniilor de text.

Wrap=tip
<TH></TH>
Valori posibile: off, virtual

(ntreruperea textului e afiat dar nu e
transmis la server), physical
(ntreruperea e afiat i transmis la server)
Definete un cap de tabel
Netscape
Standard
HTML 3.2
97
Align=pozitie
Aliniaz coninutul celulelor.

Standard
HTML 3.2
Background=URL
Specific o imagine de fundal pentru celul
Explorer
Bgcolor=culoar
e
Specific o culoare de fundal pentru celul
Explorer,
Netscape
Bordercolor=cu
loare
Definete culoarea chenarului celulei
Explorer
Bordercolordar
k=culoare

ale celulei
Explorer
Bordercolorlig
ht=culoare

ale celulei
Explorer
Class=nume

Explorer,
Netscape
Colspan=n

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

linii vecine
Standard
HTML 3.2
Style=stil
Explorer,
Netscape
Valign=pozitie

Valori posibile: top, center, bottom, baseline
Standard
HTML 3.2
Width=n
Definete limea celulei n pixeli
Standard
HTML 3.2
<TITLE></TITLE
>
Definete titlul documentului HTML
Standard
HTML 3.2
<TR></TR>
Definete o linie de celule ntr-un tabel
Standard
HTML 3.2
Align=pozitie
Aliniaz coninutul celulelor din line.

Standard
HTML 3.2
Bgcolor=culoar
e
Specific o culoare de fundal pentru

ntreaga linie
Explorer,
Netscape
Bordercolor=cu
loare
Definete culoarea chenarului liniei
Explorer
Bordercolordar
k=culoare

ale liniei
Explorer
Bordercolorlig
ht=culoare

ale liniei
Explorer
Class=nume

Explorer,
Netscape
98
Nowrap
Interzice ntreruperea liniilor de text pentru

toate celulele liniei
Explorer
Style=stil
Explorer,
Netscape
Valign=pozitie
Aliniaz coninutul celulelor din cadrul

liniei.
baseline
Standard
HTML 3.2
<TT></TT>
Formateaz textul inclus ntre etichete n stil

monospaiat
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<U></U>
Afieaz textul subliniat
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
<UL></UL>
Definete o list neordonat
Standard
HTML 3.2
Class=nume

Explorer,
Netscape
Style=stil
Explorer,
Netscape
Type=format
Definete formatul marcajului pentru

elementele listei.
Valori posibile: circle, disc, square
Standard
HTML 3.2
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
(Common Gateway
Interface)
Un set de reguli care descrie modul de comunicare

dintre un server Web i anumite aplicaii aflate pe
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
(computer ~
aplicaie ~)
Un computer sau o aplicaie software care este folosit

pentru a contacta i a obine anumite date de la un alt
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
(File Transfer Protocol)
Metoda de transfer a fiierelor ntre dou locaii de pe

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
(Graphic Interchange
Format)
Unul dintre cele mai folosite formate pentru codificarea

imaginilor, folosit mai ales n cazul imaginilor cu
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
(Hypertext Markup
Language)
Limbajul folosit pentru a crea documente Web.

Documentele HTML pot fi vizualizate folosind un
browser.
HTTP
(Hypertext Transfer
Protocol)
Protocolul de transfer al fiierelor de tip hypertext. Este

cel mai important protocol folosit n World Wide Web.
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
(Internet Protocol)
Un numr format din patru grupuri de numere mai mici

de 256, separate prin punct care identific n mod unic
fiecare computer conectat la Internet.
ISP
(Internet Service
Provider)
O instituie care furnizeaz contra cost acces la reeaua

Internet.
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
(Joint Photographic
Experts Group)
Un format foarte utilizat pentru fiierele grafice. Este

folosit pentru imagini fotografice cu numr foarte mare
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
(Multipurpose Internet
Mail Extensions)
La origine, standardul care definete tipurile de fiiere

ataate unui mesaj prin e-mail. Este folosit pe scar
larg pentru a defini diversele tipuri de fiiere transmise
prin reea.
motor de cutare
(search engine)
Un sistem de aplicaii folosit pentru a cuta informaii

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
(Simple Mail Transfer
Protocol)
Protocolul principal utilizat pentru a transmite

informaii de tip e-mail de la un server la altul
TCP/IP
(Transmission Control
Protocol/Internet
Protocol)
O suit de protocoale care definesc n ansamblu

transmiterea datelor pe Internet. La origine, a fost
destinat sistemului de operare UNIX, n prezent este
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
(Uniform Resource
Locator)
Adresa unei resurse disponibile pe Internet. Prima parte

a adresei se numete schem. Schema precizeaz
protocolul de transfer al datelor, cea utilizat n cadrul
Web fiind http.
World Wide Web

(WWW)
O colecie imens de documente de tip hypertext

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
33CC00
33CC33
33CC66
33CC99
33CCCC
33CCFF
00FF00
00FF33
00FF66
00FF99
00FFCC
00FFFF
33FF00
33FF33
33FF66
33FF99
33FFCC
33FFFF
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
66CC00
66CC33
66CC66
66CC99
66CCCC
66CCFF
99CC00
99CC33
99CC66
99CC99
99CCCC
99CCFF
66FF00
66FF33
66FF66
66FF99
66FFCC
66FFFF
99FF00
99FF33
99FF66
99FF99
99FFCC
99FFFF
CC0000
CC0033
CC0066
CC0099
CC00CC
CC00FF
FF0000
FF0033
FF0066
FF0099
FF00CC
FF00FF
CC3300
CC3333
CC3366
CC3399
CC33CC
CC33FF
FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF
CC6600
CC6633
CC6666
CC6699
CC66CC
CC66FF
FF6600
FF6633
FF6666
FF6699
FF66CC
FF66FF
CC9900
CC9933
CC9966
CC9999
CC99CC
CC99FF
FF9900
FF9933
FF9966
FF9999
FF99CC
FF99FF
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

Descriere:

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?

Descriere:

Drepturi de autor:

Formate disponibile

HTML - Extras Din Manual

Încărcat de

Descriere:

Drepturi de autor:

Formate disponibile

LECIA 1

Coninut i aspect ntr-un document HTML

Uneltele de care avei nevoie

Pentru a scrie documente HTML avei la dispoziie trei posibiliti:

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

Structura unui document HTML

etichete container (container tags)

Etichetele container sunt de forma:

Folosirea corect a etichetelor

<TAG1><TAG2>Etichete utilizate corect</TAG2></TAG1>

Sistemul de definire a culorilor

Corespondena dintre codurile hexazecimal i zecimal

blue (albastru) - pentru legturi

link pentru legturi

alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">

Rou - agresivitate, pasiune, putere, vitalitate

Text cu caractere mari

<STRONG>Text ingrosat 2</STRONG>

<EM> Text inclinat 2</EM>

<STRIKE>Text taiat 2</STRIKE>

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

<FONT FACE="vivaldi" size="5" color="gray"><U>Acesta este font

3. Etichete logice i etichete fizice

1. Trecerea la un rnd nou

Titlu de marime 2 aliniat la dreapta

6. Afiarea textului pe o singur linie

left - aliniere la stnga

9. Inserarea unei adrese potale

10. Inserarea unui citat

11. Inserarea caracterelor speciale

Mai mic dect

Mai mare dect

12. Sugestii privind aspectul textului

trecerea la un rnd nou: eticheta <BR>

introducerea unui titlu: etichetele <H1> - <H6>

introducerea unui paragraf: eticheta <P> </P>

preformatarea textului: eticheta <PRE> </PRE>

centrarea textului: eticheta <CENTER> </CENTER>

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

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

inserarea unei linii orizontale: eticheta <HR>

inserarea unei adrese: eticheta <ADDRESS> </ADDRESS>

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

inserarea caracterelor speciale prin comanda &;

Aceast adres indic prima pagin (home page) a aceluiai server.

2. Adrese absolute i adrese relative

legturi n cadrul aceleiai pagini (ancore)

4. Ancore - legturi n cadrul aceleiai pagini

5. Legtura ctre o pagin aflat n acelai director (folder)

6. Legtura ctre o pagin localizat n alt director (folder)

<A href="../Imagini/trandafir.gif">Deschide imaginea</A>

7. Legtura ctre pagini externe

n Exemplul 6.4 este stabilit o legtur ctre pagina de start Yahoo.

8. Alegerea culorilor pentru legturi

<BR>galben pentru legaturi, verde pentru legaturi

9. Utilizarea potei electronice (e-mail)

10. Legturi ctre fiiere oarecare

salvarea fiierului pe disc sau

11. Deschiderea paginilor referite printr-o legtur

12. Crearea unei bare secundare de navigare

1. Formatele fiierelor grafice

dup eticheta <TD> se adaug