Carte X-HTML

(X)HTML
CUPRINS
Conversaţia 1. HTML 4 , XHTML şi XML.......................................... 3
HTML4 strict, XHTML sau XML?............................................................... 3
HTML – HyperText Markup Language …………………………………………………. 4
XHTML – eXtensible HyperText Markup Language ………………………………… 9
XML – eXtensible Markup Language ……………………………………………………. 13
HTML, XHTML, XML – Temă ………………………………………………………………. 16
Conversaţia 2. Structura unei pagini Web ..................................... 17

Regulile de … aur ale paginilor Web ……………………………………………………. 17
HTML – Structura unui document HTML4 strict ……………………………………. 19
XHTML – Structura unui document XHTML 1.0 …………………………………….. 33
(X)HTML – Temă …………..……………………………………………………….…………. 43
Conversaţia 2 (continuare). Convertiţi HTML în XHTML ................. 45

De ce trebuie să convertiţi documentele HTML? …………………………………… 45
Convertiţi manual documentele HTML …………………………………………………. 46
Convertiţi (automat) documentele HTML cu HTML Tidy ………………………… 48
(X)HTML – Temă ………………………………………………………………………………. 51
Conversaţia 3. Introduceţi şi formataţi caracterele cu HTML 4 şi

XHTML ..................................................................... 53
HTML4, XHTML – Introduceţi text ………………………………………………………. 54
HTML4, XHTML – Inseraţi caractere speciale ……………………………………….. 66
HTML4, XHTML – Inseraţi caractere proprii (X)HTML ……………………………. 69
HTML4, XHTML – Aplicaţi unui text formatele fizice şi logice ………………….. 71
HTML4, XHTML – Scrieţi un text cu exponent sau cu indice …………………… 93
HTML4 – Definiţi tipul de font ………………………………………………… 97
HTML4 – Definiţi dimensiunea fontului ……………………………………. 101
HTML4 – Definiţi culorile ………………………………………………………… 106
XHTML – Definiţi tipul de font, dimensiunea fontului şi culorile ….. 114
(X)HTML – Temă …………………………………………………………………….. 115
Conversaţia 4. Creaţi şi formataţi paragrafele cu HTML 4 şi

XHTML ..................................................................... 117
HTML 4, XHTML – Creaţi un paragraf ………………………………………………….. 117
HTML 4, XHTML – Schimbaţi alinierea unui paragraf …………………………….. 121
HTML 4, XHTML – Începeţi o nouă linie ………………………………………………. 128
HTML 4, XHTML – Indentaţi un paragraf ……………………………………………… 131
HTML 4 – Definiţi un spaţiu înaintea unui paragraf …………………… 134
HTML 4 – Comunicaţi browser-ului să afişeze linii vide, spaţiile
suplimentare etc. …………………………………………………… 136
HTML 4, XHTML – Creaţi un titlu ………………………………………………………… 137
HTML 4, XHTML – Creaţi liste. Aplicaţii ………………………………………………… 141
(X)HTML – Temă ……………………………………………………………………. 170
Conversaţia 5. Inseraţi şi personalizaţi o linie orizontală cu HTML 4

şi XHTML ................................................................. 173
HTML 4, XHTML – Inseraţi o linie orizontală ………………………………………... 173
HTML 4, XHTML – Coloraţi o linie orizontală ………………………………………… 177
HTML 4, XHTML – Definiţi lungimea şi înălţimea unei linii ……………………… 182
HTML 4, XHTML – Aliniaţi o linie orizontală ………………………………………….. 187
(X)HTML – Temă ……………………………………………………………………. 192
Conversaţia 6. Creaţi şi utilizaţi foi de stiluri cu HTML 4 şi

XHTML ..................................................................... 193
(X)HTML – Foile de stiluri în cascadă CSS1, CSS2, CSS3 ……………… 193
(X)HTML – Creaţi stiluri CSS …………………………………………….……… 195
(X)HTML – Categorii de proprietăţi de stiluri ……………………….…….. 199
HTML 4, XHTML – Creaţi şi aplicaţi o foaie de stiluri (incorporate)
internă …………………………………………………………..…….. 200
HTML 4, XHTML – Creaţi şi aplicaţi o clasă …………………………………………… 208
HTML 4, XHTML – Incorporaţi o foaie de stiluri într-un document ………….. 215
HTML, XHTML – Creaţi şi aplicaţi o foaie de stiluri externă …………………. 257
XHTML – Controlaţi culorile legăturilor (link-urilor) într-un
document ……………………………………………………………… 264
XHTML – Proprietăţile de bordură ale unei zone ……………………… 265
XHTML – Proprietăţile foilor de stiluri sonore …………………………… 266
XHTML – Proprietăţile de clasificare ……………………………………….. 267
XHTML – Proprietăţile documentelor imprimate ………………………. 268
XHTML – Proprietăţile de poziţionare a unui element ………………. 268
XHTML – Viitorul foilor de stiluri în XHTML ……………………………… 268
(X)HTML – Temă ……………..……………………………………………………… 270
Conversaţia 7. Inseraţi imagini cu HTML 4 şi XHTML ................... 271

Manipulaţi formatele de imagine Web …………………………………………………. 271
HTML 4, XHTML – Inseraţi o imagine ………………………………………………….. 274
HTML 4, XHTML – Centraţi o imagine ………………………………………………….. 283
HTML 4, XHTML – Aplicaţi o bordură unei imagini ………………………………… 286
HTML 4, XHTML – Folosiţi un text de înlocuire (substituţie) pentru o
imagine …………………………………………………………………. 289
HTML 4, XHTML – Aliniaţi vertical o imagine în raport cu un text ………..…. 293
HTML 4, XHTML – Plasaţi un text în jurul unei imagini ………………………….. 297
HTML 4, XHTML – Întrerupeţi ... îmbrăcarea cu text a unei imagini ………… 303
HTML 4, XHTML – Adăugaţi mai multe spaţii în jurul unei imagini ………….. 307
HTML 4, XHTML – Aplicaţi o imagine de background …………………………….. 311
HTML 4, XHTML – Propuneţi o versiune în miniatură a imaginii originale…. 315
HTML 4, XHTML – Creaţi o imagine cu zone reactive ……………………………. 321
(X)HTML – Temă ……………………………………………………….…………… 329
Conversaţia 8. Creaţi legături cu HTML 4 şi XHTML ..................... 331

HTML 4, XHTML – Creaţi o legătură hipertext către o altă pagină Web …… 331
HTML 4, XHTML – Creaţi legături în aceeaşi pagină Web ………………………. 363
HTML 4, XHTML – Creaţi o legătură externă către un site Web, având
ca suport o imagine ………………………………………………… 355
HTML 4, XHTML – Creaţi o legătură hipertext (externă) către un alt site
Web ………………………………………………………………………. 361
HTML 4, XHTML – Creaţi o legătură hipertext externă către o adresă
e-mail ……………………………………………………………………. 365
HTML 4, XHTML – Modificaţi culoarea legăturilor hipertext ……………………. 369
HTML 4, XHTML – Creaţi o legătură hipertext către o pagină care se
deschide în propria sa fereastră ……………………………….. 372
(X)HTML – Temă …………………………………………………………………….. 377
Conversaţia 9. Creaţi tabele cu HTML 4 şi XHTML ....................... 379

HTML 4, XHTMLCreaţi un tabel ……………………………………………………….. 379
–
HTML 4, XHTMLAliniaţi un tabel ……………………………………………………... 394
–
HTML 4, XHTMLAtribuiţi un titlu tabelului ………………………………………… 399
–
HTML 4, XHTMLAplicaţi o bordură tabelului ……………………………………… 404
–
HTML 4, XHTMLAliniaţi orizontal datele unui tabel ……………………………. 414
–
HTML 4, XHTMLAliniaţi vertical datele unui tabel ………………………………. 418
–
HTML 4, XHTMLModificaţi spaţiul dintre celulele unui tabel ………………… 422
–
HTML 4, XHTMLModificaţi dimensiunile liniilor unui tabel …………………… 425
–
HTML 4, XHTMLModificaţi marginile interioare ale celulelor unui tabel…. 431
–
HTML 4, XHTMLExtindeţi o celulă pe mai multe coloane sau linii ………… 435
–
HTML 4, XHTMLAplicaţi o culoare elementelor unui tabel ………………….. 440
–
HTML 4, XHTML –
Aplicaţi o imagine de background unui tabel sau unei
celule a tabelului …………………………………………………….. 445
HTML 4, XHTML – Utilizaţi un tabel ca un instrument de punere
în pagină ……………………………………………………………….. 449
(X)HTML – Temă ……………………………………..…………………………….. 453
Conversaţia 10. Creaţi formulare cu HTML 4 şi XHTML ................ 455

Regulile de aur … ale formularelor ………………………………………………………. 455
HTML 4, XHTML – Creaţi un formular ………………………………………………….. 459
HTML 4, XHTML – Precizaţi metoda şi script-ul utilizate ………………………… 463
HTML 4, XHTML – Creaţi un buton pentru expedierea (submit) unui
formular ……………………………………………………………….. 469
HTML 4, XHTML – Creaţi un buton pentru resetarea (reset) unui
formular ……………………………………………………………….. 475
HTML 4, XHTML – Inseraţi o zonă simplă de text …………………………………. 478
HTML 4, XHTML – Definiţi mărimea unei zone (simple) de text ……………… 483
HTML 4, XHTML – Inseraţi o zonă de text multilinie ……………………………… 487
HTML 4, XHTML – Creaţi o casetă de validare ……………………………………… 490
HTML 4, XHTML – Creaţi un buton radio ……………………………………………… 495
HTML 4, XHTML – Creaţi un meniu derulant ………………………………………… 501
(X)HTML – Temă …………………………………………………………………….. 508
Conversaţia 11. Inseraţi obiecte multimedia cu HTML 4 şi

XHTML .................................................................... 511
Reguli pentru inserarea obiectelor multimedia ……………………………………… 511
HTML 4, XHTML – Inseraţi un fişier sunet pentru Internet Explorer ……….. 515
HTML 4, XHTML – Inseraţi un fişier video ……………………………………………. 520
HTML 4, XHTML – Inseraţi un fişier sunet extern sub forma unei legături
hipertext ………………………………………………………………. 524
HTML 4, XHTML – Inseraţi un fişier video extern sub forma unei legături
hipertext ……………………………………………………………….. 527
HTML 4, XHTML – Inseraţi un applet Java …………………………………………… 531
(X)HTML – Temă …………………………………………………………………….. 536
Conversaţia 12. Creaţi cadre cu HTML 4 şi XHTML ....................... 539

Reguli pentru utilizarea cadrelor …………………………………………………………. 539
HTML 4, XHTML – Apreciaţi cadrele (X)HTML ………………………………………. 541
HTML 4, XHTML – Creaţi cadre care se afişează în coloane (fixe,
dinamice) ……………………………………………………………… 546
HTML 4, XHTML – Introduceţi pagini Web într-un cadru ……………………….. 551
HTML 4, XHTML – Creaţi cadre care se afişează în linii (fixe, dinamice) ….. 554
HTML 4, XHTML – Numiţi un cadru ……………………………………………………… 562
HTML 4, XHTML – Creaţi o legătură (link) către un cadru ……………………… 565
HTML 4, XHTML – Formataţi bordurile cadrelor ……………………………………. 573
HTML 4, XHTML – Controlaţi prezenţa sau absenţa barelor de defilare …… 576
HTML 4, XHTML – Creaţi o alternativă pentru cadre ……………………………… 579
(X)HTML – Temă …………………………………………………………………….. 583
Bibliografie ....................................................................................... 585

Conversaţia 1
HTML 4 , XHTML şi XML

•••••••••••••••••••••••••••••••••••••••••
În această conversaţie:
f HTML4 strict, XHTML sau XML?
f HTML – HyperText Markup Language
f XHTML – eXtensible HyperText Markup Language
f XML – eXtensible Markup Language
f HTML, XHTML, XML – Temă
•••••••••••••••••••••••••••••••••••••••••
HTML HTML 4 strict, XHTML sau XML?
Din obligaţie sau curiozitate am citit multe cărţi despre HTML, XHTML şi
XML. Mai era nevoie de încă o carte, mă veţi întreba? Răspunsul este
da. Să mă explic.
Internetul, şi în particular World Wide Web, a bulversat complet viaţa

privată şi viaţa profesională. Succesul fulminant şi imediat al Web-ului se
explică prin aspectul său intuitiv şi prin independenţa sa în raport cu
sistemul de operare.
Standardizarea limbajului de descriere a paginilor HTML şi varianta sa

modernă XHTML au contribuit decisiv la democratizarea Internetului.
4
Progresul extraordinar al Internetului de la începutul anilor ´90 a avut
loc datorită faptului că HTML este foarte uşor de învăţat (HTML nu este
un limbaj de programare!).
Companiile pot distribui informaţiile angajaţilor lor, clienţilor şi

partenerilor de afaceri repede şi ieftin. Din păcate (sau din fericire,
depinde de punctul dumneavoastră de vedere), primul pas în
dezvoltarea Internetului şi a Web-ului a trecut, iar companiile au început
deja să caute noi metode de diseminare a informaţiei.
Auzind acest strigăt de ajutor, Consorţiul W3 a dezvoltat limbajul XML ce

poate fi folosit de autorii de pagini Web ale căror nevoi depăşesc
HTML-ul.
A începe astăzi să învăţaţi HTML 4 în conformitate cu „DTD HTML 4.01

strict” este în final un avantaj, deoarece veţi învăţa să evitaţi vechile
obiceiuri în crearea paginilor Web. Veţi învăţa să respectaţi reguli,
principii, care în final vă vor aduce nu numai satisfacţia lucrului bine
făcut dar şi eticheta de calitate W3C, cum veţi vedea în continuare.
În plus, după ce aţi creat paginile dumneavoastră în HTML 4, veţi simţi

cu siguranţă nevoia de a utiliza XHTML, XML pentru a le face mai
atractive şi … nu doar atât!
HTML HyperText Markup Language
Puţină istorie
Rădăcinile HTML (Hypertext Markup Language) merg până în anii ´80 şi
debutul anilor ´90. În anul 1989, Tim Berners – Lee, membru CERN (Centrul
European de Cercetare Nucleară cu sediul la Geneva, Elveţia), a inventat un
limbaj capabil de a structura datele şi de a crea legături hipertext permiţând
schimbul de documente pe Internet. În acest mod, cercetătorii de la CERN
5
aveau la dispoziţie un instrument simplu pentru a putea schimba datele
rezultate din rapoartele de cercetare. World Wide Web (www) şi HTML se
născuseră!
HTML este bazat la rândul său pe o definiţie formală utilizând un puternic

metalimbaj numit SGML (Standard Generalized Markup Language). SGML este
un instrument standard ISO (International Standards Organization) special
conceput pentru crearea limbajelor de marcaj de diferite tipuri. Începând cu
anul 1991, fizicienii de la CERN puteau utiliza acest sistem care funcţiona pe
maşinile NeXT sau în mod Linie. În anul 1993, NCSA (National Center for
Supercomputing Applications) a creat primul navigator cu numele Mosaic. La
sfârşitul anului 1993, 500 servere Web cunoscute reprezentau 1% din traficul
Internet.
Adevărata mobilitate Internet s-a declanşat la finele anului 1994. Un grup

internaţional a fost înfiinţat cu scopul de a crea norme astfel încât toţi actorii
(cercetători şi întreprinderi) să-şi poată unii propriile lor eforturi. IETF (Internet
Engineering Task Force) a avut ca obiectiv stabilirea unei liste de marcatori
(tag-uri) care dădea utilizatorilor din lumea întreagă posibilitatea de a citi şi a
scrie pagini Web. Aşa a apărut versiunea HTML 2.0.
Din păcate, evoluţiile au depăşit rapid normele lui HTML 2.0. În anul 1996, un
nou grup internaţional de profesionişti, W3C (World Wide Web Consortium), a
fost creat şi condus de INRIA (Franţa), MIT (SUA) şi Universitatea KEYO (Asia).
Scopul acestui grup a fost acela de a dezvolta facilităţile Web şi de a proteja
drepturile şi libertatea utilizatorilor definind tag-urile care trebuiau să reprezinte
norma pentru toate navigatoarele şi autorii de pagini Web. Aşa a apărut în
timpul anului 1997 versiunea HTML 3.2.
Vizitaţi site-ul consorţiului W3C la adresa: www.w3.org.
Câteva luni mai târziu, versiunea HTML 3.2 a fost înlocuită cu o alta, 4.0, care
din fericire a fost validată de W3C. HTML 4 este mereu de actualitate, chiar
dacă între timp a apărut XHTML, ca succesor al său. XHTML asociază puterea
limbajului HTML cu rigoarea limbajului XML.
6
Versiuni HTML
Întrucât HTML este un limbaj „închis”, el a cunoscut mai multe versiuni,
începând cu versiunea 1.0 şi terminând cu versiunea 4.01. În anul 1969, IBM a
pus bazele limbajului SGML (Standard Generalized Markup Language) care a
fost normalizat de către ISO în anul 1986. Principalele limbaje născute din
SGML sunt: HTML, DHTML şi XML.
HTML 1.0 a apărut în anul 1991. HTML era structurat de o manieră elementară.
Tag-urile limbajului HTML 1.0 erau uşor de reţinut, permiteau generarea de
titluri, liste, imagini şi, cel mai important, legături hipertext. Dar, interfaţa
grafică nu exista încă. Versiunea HTML 1.0 nu mai este utilizată.
Mosaic şi apoi Netscape au fost primele navigatoare care au fost dotate cu o

interfaţă grafică. W3C va publica târziu (1995) normele limbajului HTML 2.0.
Numeroase standarde neoficiale văzuseră deja lumina zilei. HTML 2.0 nu
regrupa decât tag-uri de bază: structurarea documentului (titluri, antet, corpul
documentului), formatări mai puternice, liste, tabele şi alte componente. În
acelaşi timp, editorii browser-elor continuau dezvoltarea propriului lor standard.
Versiunea HTML 2.0 era depăşită. În anul 1996 (luna mai) a fost publicată
versiunea HTML 3.2 la conferinţa World Wide Web de la Paris. Unele din tag-
urile vechi au primit noi atribute iar noi tag-uri au fost create. Microsoft şi
Netscape au continuat dezvoltarea propriilor navigatoare în afara acestor
norme. Foarte puţine pagini sunt încă realizate în HTML 3.2.
W3C revine în forţă şi prezintă în vara anului 1997 versiunea 4.0 a limbajului
HTML. Microsoft şi Netscape au declarat serios că browser-ele lor se vor
conforma la această nouă normă. Dar … Microsoft va continua în voie cu Active
X iar Netscape cu al său DHTML. HTML 4.0 integrează într-un mod fericit cadre,
noi tag-uri şi CSS (Cascading Style Sheets, foi de stiluri în cascadă). După
aproape trei ani, HTML 4.0 a devenit standard.
Remarcă. Câte navigatoare există? Există zeci de navigatoare mai mult sau mai puţin
importante. Majoritatea sunt gratuite! Consultaţi ghidul:
http://browserwatch.internet.com/browsers.html.
7
Elemente şi tag-uri
HTML (HyperText Markup Language) este un limbaj bazat pe tag-uri
(comenzi sau les balises, în limba franceză) ca şi primele procesoare de
text. Acest limbaj permite programarea unei pagini cu ajutorul tag-urilor
de formatare care sunt apoi interpretate de către un navigator (sau
browser în limba engleză). De exemplu, atunci când scrieţi:
<H1> Prima mea pagină Web </H1>
navigatorul nu va afişa decât textul „Prima mea pagină Web”, tag-ul

<H1> având rolul de a-i preciza că este vorba de un titlu de nivel 1 şi că
tot ceea ce urmează trebuie să fie afişat pe o nouă linie şi cu caractere
îngroşate (bolduite). Tot aşa tag-ul </H1> semnifică pentru navigator că
textul pentru titlu s-a terminat şi că urmează să fie efectuat un retur de
linie (H vine de la header, în limba engleză).
Numim <H1> Prima mea pagină Web </H1> un element HTML care
este alcătuit din tag-ul de deschidere <H1>, conţinutul propriu-zis,
textul titlului dumneavoastră (Prima mea pagină Web) şi tag-ul de
închidere </H1>. Toate tag-urile HTML trebuie să fie scrise între
simbolurile „<” şi „>” şi nu sunt admise spaţii între cele două simboluri.
Cea mai mare parte a tag-urilor HTML trebuie să fie deschise şi închise.
Un tag de închidere este identic cu tag-ul de deschidere, dar în plus
necesită o bară oblică (/ sau slash) după simbolul „<”.
Există mai multe tipuri de tag-uri:
9 tag-uri care conţin metainformaţii;

9 tag-uri de formatare a paginii Web;
9 tag-uri pentru legături hipertext;
9 tag-uri pentru inserarea obiectelor multimedia (imagini, sunete,
video).
8
Majoritatea tag-urilor HTML posedă atribute. De exemplu, pentru
centrarea unui titlu în <H1> atributul este ALIGN:
<H1 ALIGN=”center”>Prima mea pagină Web</H1>
Remarci:
9 Versiunea HTML utilizată în această lucrare corespunde limbajului HTML 4.01,
cel definit de W3C. Găsiţi aceste specificaţii la adresa: www.w3.org/TR/REC-
html40 (în limba engleză).
9 Puteţi scrie tag-urile HTML cu majuscule sau minuscule.
9 Este bine să le scrieţi cu minuscule pentru a facilita conversia în XHTML.
9 În această carte tag-urile HTML au fost scrise cu majuscule pentru a le pune
mai bine în evidenţă.
Care sunt instrumentele de care aveţi nevoie?

Pentru primele documente HTML nu aveţi nevoie decât de următoarele
instrumente de bază:
9 un editor de text simplu pentru crearea şi salvarea documentelor

HTML;
9 un instrument de validare (X)HTML (vezi XHTML);
9 un navigator Web pentru vizualizarea şi testarea documentelor
HTML (vezi XHTML).
Editoare HTML
În general, există două categorii de editoare:
9 editoare pe bază de text sau de cod;

9 editoare WYSIWYG („What You See Is What You Get”, în
traducere: obţineţi ceea ce vedeţi).
Remarci:
9 Editoarele WYSIWYG, precum DREAMWEAVER, NETSCAPE COMPOSER şi
MICROSOFT FRONTPAGE, creează în mod rapid documentele HTML. Aceste
editoare vă oferă numai o metodă aproximativă de punere în pagină, de
proiectare, de definire a culorilor etc.
9 Numai după ce aţi creat mai multe documente HTML şi numai după ce aţi
înţeles principiile de bază HTML puteţi trece la utilizarea unui editor WYSIWYG
şi a unui editor pe bază de cod. Puteţi începe, de exemplu, cu un editor
WYSIWYG.
9 Vă recomandăm să începeţi prin a scrie manual codul HTML cu un editor de
text standard, Notepad de exemplu.
9
XHTML eXtensible Hyper Text Markup Language
XHTML: un vocabular XML pentru Web

Limbajul XHTML, recomandare a consorţiului W3, este o versiune HTML
care respectă sintaxa limbajului XML (eXtensible Markup Language) şi în
care sunt excluse toate impreciziile pe care le întâlnim în general în
paginile Web.
HTML permite afişarea datelor într-un navigator chiar dacă sintaxa este
aproximativă. Navigatoarele sunt foarte permisive, fapt care-i
încurajează pe foarte mulţi dintre noi să realizeze pagini lipsite de
rigoare. Chiar dacă într-un document HTML lipsesc tag-uri sau
documentul nu este bine structurat, Internet Explorer şi alte navigatoare
fac tot posibilul pentru a le afişa. Utilizând o sintaxă mult mai strictă,
XHTML garantează calitatea documentelor şi stabilitatea afişării
acestora.
XHTML este un tip de limbaj de tranziţie care poate fi utilizat pentru a

pregăti trecerea la XML. În sfârşit, XHTML este limbajul HTML integrat în
XML. Dacă trebuie să creaţi pagini XHTML, începeţi prin a vă obişnui cu
regulile stricte XML pe care le adoptă XHTML. Documentele XHTML pot fi
afişate ca documente HTML, dar care pot fi în egală măsură valide.
În consecinţă, XHTML este HTML cu o structură strictă. În loc de

preocuparea privind asigurarea minimului necesar pentru afişarea
documentului într-un navigator, este mai important să asigurăm o mai
mare atenţie modului de utilizare a tag-urilor.
Remarcă. XHTML permite crearea unui cod modern, perfect lizibil, construit cu claritate,
care garantează afişarea perfectă a paginilor Web pentru versiunile viitoare ale
navigatoarelor. Reformularea HTML în XHTML este un mare pas înainte.
10
Elemente şi tag-uri
Ca şi HTML, XHTML este alcătuit din elemente, tag-uri şi atribute.
Elementele XHTML au în principal două funcţiuni. Mai întâi ele identifică
părţile logice ale documentului, altfel spus principalele componente
structurale ale documentului, precum antet-uri (h1, de exemplu), liste
numerotate (ol, numite de asemenea liste ordonate) şi paragrafe (p). Pe
de altă parte diferite elemente dintr-un document XHTML se referă la cu
totul altceva. Nu puţine sunt elementele XHTML care pot insera pointeri
şi legături hipertext către alte documente, imagini, fişiere sunet, fişiere
video, aplicaţii multimedia, animaţii, applet-uri etc. De exemplu,
elementul:
<bgsound src=”c:/Windows/Media/tada.wav” />
inserează în pagina dumneavoastră Web, din folder-ul Windows/Media,

fişierul sunet tada.wav.
Remarci:
9 Toate tag-urile XHTML se scriu cu minuscule.
9 Tag-urile XHTML pot avea două forme:
• o pereche de tag-uri, precum <h1> … </h1>, <title> … </title> etc.
• un tag unic, precum <br />, <bgsound />, sau <img /> numit şi
element vid. În XHTML astfel de tag-uri trebuie să se termine cu un
spaţiu şi o bară oblică (/ sau slash) înainte de simbolul „>”. Spaţiul
lăsat (un mic truc!) permite vechilor navigatoare care nu recunosc
XHTML de a trata aceste tag-uri ca şi în HTML. Fără a lăsa un spaţiu
înaintea caracterului „/”, vechile navigatoare pot să le ignore pur şi
simplu.
9 Într-un document XHTML fiecare element vid trebuie să se termine cu „/>”,
iar fiecărui tag de deschidere trebuie să-i corespundă un tag de închidere.
9 Nu includeţi spaţii suplimentare în interiorul tag-urilor. Excepţie de la această
regulă sunt elementele vide care necesită un spaţiu înaintea barei oblice de
închidere ( />).
Diferite elemente XHTML conţin atribute. De exemplu,

<h1 style=”text-align:center”> Prima mea pagină Web </h1>
are aceeaşi semnificaţie ca şi vechiul enunţ HTML, cu deosebirea că în
XHTML se preferă utilizarea atributului style=”text-align:center” în locul
atributului align=”center”.
11
Remarci:
9 Toate atributele sunt separate de alte atribute şi de tag-ul însuşi prin spaţii.
9 În XHTML toate valorile atributelor se plasează între ghilimele.
9 În interiorul tag-urilor de deschidere sau tag-urilor care corespund
elementelor vide, atributele se pot plasa în orice ordine, după numele
elementului, cu condiţia ca numele elementului să apară întotdeauna pe prima
poziţie.
Ce puteţi realiza cu limbajul XHTML?

Cunoaşteţi desigur că limbajele HTML şi XHTML permit crearea paginilor
Web, dar fiecare dintre ele pot servi la:
9 crearea site-urilor intranet sau extranet;

9 crearea fişierelor de help;
9 crearea aplicaţiilor în reţea;
9 crearea aplicaţiilor de tip chioşc;
9 publicarea documentelor (XHTML) pe ecranele portabilelor.
Care sunt instrumentele de care aveţi nevoie?

Pentru primele documente XHTML pe care urmează să le creaţi nu aveţi
nevoie decât de următoarele instrumente de bază:
9 un editor de text simplu, pentru crearea şi salvarea

documentelor XHTML;
9 un instrument de validare XHTML, pentru verificarea sintaxei şi
structurii documentelor XHTML;
9 un navigator Web, pentru vizualizarea şi testarea documentelor
XHTML.
Editoare de text (X)HTML

Deşi există numeroase editoare (X)HTML WYSIWYG („What You See Is
What You Get”) performante, nu vă sfătuim să renunţaţi la crearea de
cod (X)HTML cu un editor de text standard.
12
Cu Notepad, de exemplu, va trebui să scrieţi codul manual. Aceasta
înseamnă că dumneavoastră, nu Dreamweaver sau Front Page (editoare
WYSIWYG), introduceţi tag-urile şi atributele (X)HTML. Codificarea
manuală vă ajută să învăţaţi elementele (X)HTML, atributele şi
structurile şi vă permite totodată să identificaţi cu exactitate zonele în
care au fost generate erori. Puteţi, de asemenea, să includeţi cu uşurinţă
în documentele dumneavoastră ultimele facilităţi (X)HTML.
Remarci:
9 Există editoare de text foarte bune – Notepad (pentru toate versiunile
Windows), vi sau pico (pentru Unix) cu care să generaţi codul (X)HTML.
9 Întrucât noile versiuni XHTML nu sunt încă implementate în editoarele
WYSIWYG, este bine să utilizaţi metoda de codificare manuală.
9 Utilizarea procesoarelor de text – Word, Wordperfect sau WordPad pentru
crearea documentelor (X)HTML nu este recomandată!
Aplicaţia de validare W3C validator

Validarea trebuie să fie considerată ca o etapă importantă în procesul de
redactare al codului XHTML. În acest mod veţi avea siguranţa că cea
mai mare parte a navigatoarelor va putea afişa conţinutul documentelor
XHTML.
Pentru a verifica dacă este valid sau nu codul XHTML pe care l-aţi creat
manual, utilizaţi aplicaţia de validare W3C – W3C validator.
Utilizarea acestui instrument de validare este foarte uşoară. Vizitaţi

site-ul: http://validator.w3.org/file-upload.html şi veţi constata singuri
cât de simplu este în continuare.
Navigatoarele Web
Dacă aţi navigat pe Web, aţi utilizat fără îndoială un navigator pentru a
vizualiza documentele HTML sau XHTML. Navigatoarele cel mai des
folosite sunt: Microsoft Internet Explorer (IE) şi Netscape Navigator. Mai
13
există de asemenea şi alte navigatoare, dintre care noi apreciem în mod
deosebit, Opera (www.opera.com, gratuit) şi Amaya
(www.w3.org/Amaya, gratuit).
Consultaţi regulat următoarea listă de site-uri:

• http://developer.netscape.com/docs/manuals/htmlguid/index.htm
(pentru elemente şi atribute Netscape);
• http://msdn.microsoft.com/workshop/author/default.asp (pentru
Microsoft);
• www.htmlhelp.com (Web Design Group);
• www.wdvl.com (Web Develorer´s Library);
• www.hwg.org (HTML Writer´s Guild);
• www.builder.com (C\Net´s Builder.com);
• www.zvon.org (zvon)
Remarcă. Până să finalizez redactarea acestei cărţi, societatea W3C a avansat versiunea
XHTML 1.1 cu titlul de recomandare, ceea ce înseamnă că această nouă versiune a
devenit standard curent XHTML. Recomandarea XHTML 1.1 se găseşte pe site-ul:
www.w3.org/TR/2001/REC-xhtml1.1-20010531. Specificaţia XHTML 1.1 este practic
aceeaşi cu versiunea XHTML 1.0. Versiunea XHTML 1.1 reprezintă o versiune
intermediară între HTML4 şi XHTML 1.0.
XML eXtensible Markup Language
XML este acronimul de la eXtensible Markup Language (se traduce prin

limbaj de tag-uri extensibil sau limbaj de tag-uri extensibile), fiind un
limbaj alcătuit din tag-uri. Pus la punct de către XML Working Group sub
direcţia lui World Wide Web Consortium (W3C) din anul 1996, el este
destinat structurării documentelor. În anul 1998, specificaţiile XML 1.0
au devenit recomandări (XML a fost oficial definit şi recunoscut ca
standard).
Remarci:
9 XML nu vine de la HyperText Markup Language! XML derivă din Standard
Generalized Markup Language sau SGML definit în anul 1986 prin standardul
ISO 8879.
14
9 XML (eXtensible Markup Language) este cel mai nou limbaj dezvoltat
de consorţiul W3 (specializat în standarde Web).
9 Documentele şi specificaţiile XML sunt accesibile la adresele
http://www.w3c.org/MarkUp; www.w3.org/XML/; www.ibiblio.org/pub/sun-
info/standards/xml/why/xmlapps.htm; www.xml.com.
Diferenţe majore între XML şi HTML

Scopul XML-ului nu este în nici un caz înlocuirea XHTML-ului întrucât
cele două limbaje alcătuite din tag-uri nu au deloc aceleaşi obiective.
XML poate fi privit ca un mijloc de descriere a datelor, fiind specializat
pe tot ceea ce reprezintă date, în timp ce HTML a fost conceput numai
pentru afişarea datelor şi nimic mai mult.
XML nu face nimic!

Poate surprinde acest titlu dar … acesta este adevărul! XML a fost creat
pentru structurarea, stocarea şi manipularea datelor. XML este în fond
un metalimbaj.
Iată un mic exemplu de document XML (figura 1.1), care … nu face

absolut nimic! El descrie datele e-mail de o manieră structurată.
<email>
<to> ADAM VASILE </to>
<from> EVA TATIANA </from>
<date> 1 septembrie 2002 </date>
<subject> scripturi </subject>
<body> Trimite urgent script-urile </body>
Figura 1.1 </email>
15
XML, complementul HTML-ului
Trebuie bine înţeles că XML nu înlocuieşte HTML-ul. În dezvoltările
viitoare, XML-ul va fi utilizat pentru descrierea datelor, în timp ce HTML
va fi utilizat pentru formatarea şi afişarea datelor. XML este un
instrument gramatical sau structural independent de toate platformele
hard şi soft care permit transmisia informaţiilor structurate.
XML în viitor
În viitor, XML-ul va reprezenta cu siguranţă instrumentul standard
pentru descrierea, manipularea şi transmisia datelor.
XML-ul este generator de noi limbaje:
9 WML (Wirelles Markup Language) – permite afişarea datelor pe

telefoanele mobile;
9 HR – XML (Human Ressources XML) – permite descrierea
domeniului de resurse umane;
9 SVG (Scalable Vector Graphics) – permite crearea imaginilor în
două dimensiuni XML;
9 SMIL (Synchronized Multimedia Integration Language) –
permite crearea obiectelor multimedia (sunet, video etc.);
9 MathML – permite definirea ecuaţiilor matematice, reprezentări
algebrice, sisteme de sinteză vocală.
Remarcă. Pentru mai multe informaţii, consultaţi lucrarea: Liviu Dumitraşcu, XML,
Editura Universităţii din Ploieşti, 2003.
#__________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
16
HTML, XHTML, XML Temă
Testaţi-vă cunoştinţele
1. Ce puteţi realiza cu limbajul (X)HTML?
2. Câte navigatoare Web cunoaşteţi?
3. Care este structura unui element (X)HTML?
4. Ce este un element vid?
5. Cum traduceţi: HTML (HyperText Markup Language), XHTML
(eXtensible Markup Language) şi XML (eXtensible Markup Language)?
6. Care este deosebirea dintre (X)HTML şi XML?
7. Care sunt resursele de care aveţi nevoie pentru a crea documente
(X)HTML?
#_______________________________________________________
__________________________________________________________
__________________________________________________________
Vizitaţi site-urile
9 www.w3.org
9 www.w3.org/XML
9 www.microsoft.com
9 www.netscape.com
9 www.operasoftware.com
9 www.djtracyyoung.com
Conversaţia 2
Structura unei pagini Web

•••••••••••••••••••••••••••••••••••••••••
f Regulile de … aur ale paginilor Web
f HTML – Structura unui document HTML4 strict
f XHTML – Structura unui document XHTML 1.0
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
Regulile de … aur ale paginilor Web

Înainte de a începe crearea unei pagini este important să cunoaşteţi
câteva din regulile de aur ale paginilor Web pe care este bine să le
respectaţi.
Reguli:
9 Pagina de primire
Este prima pagină a unui site.

Numiţi pagina de primire index.htm sau index.html.
Ea trebuie să conţină un rezumat succint al site-ului
dumneavoastră şi/sau un sumar.
În cazul ideal, ea trebuie să conţină o prezentare scurtă a
proprietarului site–ului (persoană, societate, asociaţie etc.).
18
9 Alte pagini
Fiecare pagină trebuie să înceapă cu informaţii importante, date

esenţiale.
Formatul A4 nu are nici o semnificaţie pe Web.
Nu publicaţi o pagină în curs de realizare.
Actualizaţi în mod regulat paginile (o pagină veche de … doi ani
nu este deloc atractivă).
Gândiţi-vă la persoanele care dezactivează afişarea imaginilor în
navigatorul acestora. Pagina trebuie ca tot timpul să fie grăitoare
iar textul suficient de explicit fără imagini.
Utilizaţi fişiere de dimensiune minimală pentru ca vizitatorul să
nu aştepte minute în şir apariţia întregii pagini pe ecran.
9 Textul
Structuraţi textul utilizând titluri de nivele diferite.

Pentru a garanta o bună lizibilitate, utilizaţi cel mult două sau trei
fonturi diferite.
Verificaţi corectitudinea tuturor informaţiilor pe care le-aţi
menţionat.
9 Ţineţi-vă bine pe Web!
Fiţi curtenitori şi politicoşi, respectaţi eticheta.

Asiguraţi estetica paginilor dumneavoastră, evitaţi înfloriturile!
Nu utilizaţi resurse pirat (imagini, text etc.) fără a fi obţinut în
prealabil copyright–ul!
9 Privilegiaţi interactivitatea
Fiţi universal, evitaţi pe cât posibil instrucţiunile specifice unui

anumit tip de navigator.
Creaţi o legătură (link) de tip mailto pentru ca vizitatorii să poată
să vă expedieze cu uşurinţă un e-mail.
Prevedeţi un FAQ (Frequently Asked Questions). Astfel, nu va
trebui să răspundeţi de mai multe ori la întrebări puse frecvent.
19
HTML Structura unui document HTML4 strict
Înainte de a începe lungul drum al programării în HTML trebuie să faceţi

cunoştinţă cu structura generală a unui document HTML conform
specificaţiilor HTML 4.01. Vom face un prim tur al elementelor care
trebuie să se regăsească în mod obligatoriu în fiecare din paginile
dumneavoastră Web.
Iată cum se înfăţişează codul sursă (HTML 4.01) al primei

dumneavoastră pagini Web care afişează mesajul „Prima mea pagină
Web”. Puteţi să recopiaţi acest cod pe care-l găsiţi afişat în figura 2.1 ca
pe un schelet comun tuturor documentelor pe care urmează să le creaţi.
Figura 2.1
Codul sursă de mai sus nu va afişa în navigatorul dumneavoastră decât

o pagină (figura 2.2), care conţine cuvintele „Prima mea pagină Web”
(titlu de nivel 1, după cum vom vedea mai târziu).
20
Figura 2.2
Remarcă. O pagină Web validă este alcătuită din trei părţi:

9 tipul documentului;
9 secţiunea de en-tête;
9 corpul paginii Web.
Elementele comune (HTML) ale paginilor Web

După cum am promis vom realiza împreună, într-un ritm care să nu vă
streseze, un prim tur al elementelor HTML prezentate în figura 2.1 –
codul sursă al primei pagini Web, intitulată „Debut Web” (vedeţi bara de
titlu a navigatorului – figura 2.2).
Tag-urile de comentarii
Tag-ul  este tag-ul de
închidere pentru comentarii. Puteţi plasa orice text în interiorul acestora
(vezi figura 2.3), care să vă ajute în înţelegerea codului (el nu va fi
interpretat de navigator dacă conţine tag-uri HTML).
Figura 2.3
21
Remarcă. Comentariile joacă un rol particular în cadrul stil-urilor. Ele permit
vechilor navigatoare să nu afişeze definiţia stilurilor, script-urile utilizate etc.
Declaraţia DOCTYPE
Toate documentele HTML trebuie să înceapă cu o declaraţie DOCTYPE
care precizează tipul de document ce va fi creat.
Ultimele specificaţii ale consorţiului W3C au definit trei DTD-uri

(Document Type Definition), după cum urmează:
9 DTD HTML 4.01 strict, care defineşte versiunea cea mai corectă a
limbajului HTML 4, pentru care declaraţia DOCTYPE va fi (figura 2.4):
<! DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01//EN”
Figura 2.4 ”http://www.w3.org/TR/html4/strict.dtd”
9 DTD HTML 4.01 frameset, care permite în plus crearea cadrelor,

pentru care declaraţia DOCTYPE va fi (figura 2.5):
<! DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Frameset//EN”
Figura 2.5 ”http://www.w3.org/TR/html4/frameset.dtd”>
9 DTD HTML 4.01 transitional, care, în plus faţă de elementele DTD-ului

strict, suportă încă elemente nerecomandate ale versiunii 3.2. În ceea
ce ne priveşte noi nu vom folosi acest DTD. Pentru informarea
dumneavoastră, declaraţia DOCTYPE va fi următoarea:
<! DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 //EN”
Figura 2.6 ”http://www.w3.org/TR/html4/loose.dtd”>
Elementul <HTML>
Elementul <HTML> numit şi elementul rădăcină în terminologia XML,
este de nivelul cel mai înalt în cadrul unui document HTML.
Observăm că tag-urile <HTML> şi </HTML> încadrează două mari

secţiuni:
9 en-tête-ul documentului, introdus prin tag-urile <HEAD> şi </HEAD>;

9 corpul documentului, introdus prin tag-urile <BODY> şi </BODY>.
22
Elementul <HEAD>
Secţiunea de en-tête <HEAD> poate conţine diferite elemente:
<BASE>, <LINK>, <META>, <SCRIPT>, <STYLES> şi <TITLE>, dintre
care numai utilizarea elementului <TITLE> este obligatorie.
În figura 2.7 este prezentată structura posibilă a unui en-tête:
Figura 2.7
Elementul META
În en-tête-ul documentului HTML 4 strict (figura 2.7) s-a introdus tag-ul
<META> pentru a preciza cuvintele cheie ale paginii.
Remarci:
9 Elementul <META> este un element vid, deci fără tag de închidere. Numele
informaţiei conţinute de tag-ul <META> poate fi definit în două moduri
diferite – cu atributele name sau http-equiv, dar numai unul singur trebuie să
fie utilizat în acelaşi element <META>. Dacă name nu este utilizat, trebuie
folosit atributul http-equiv, care permite în plus faţă de name adăugarea
perechilor nume/valoare în en-tête-ul http al documentului transmis prin
server. Diferite valori ale atributului name sunt cuvinte cheie utilizate de
motoarele de căutare pentru indexarea paginilor Web; altele nu au decât un
caracter de informaţie internă.
9 Exemple de tag-uri <META>:
• <META name=”description” content=”Prima pagină HTML”>
• <META name=”keywords” content=”HTML, Internet”>
• <META name=”author” content=”ANDREI DUMITRAŞCU”>
23
• <META name=”generator” content=”DREAMWEAVER MX”>
• <META name=”robots” content=”index, follow”>
• <META name=”revisit-after” content=”15 days”>
• <META name=”date” content=”2003-09-01 11:11:00”>
• <META http-equiv=”expires” content=”01.09.2003”>
• <META http-equiv=”refresh” content=”5”; url=http://www.upg-
ploieşti.ro>
• <META http-equiv=”reply-to”; content=”ldumitrascu@mail.upg-
ploiesti.ro”>
• <META http-equiv=”content-type”; content=”text/html; charset=ISO-
8859-1”>
9 Pentru mai multe detalii privind tag-urile <META> vizitaţi site-ul:
http://vancouver-webpages.com/META/metatags.detail.html
Elementul <TITLE>
Elementul <TITLE> conţine titlul paginii. Conţinutul titlului nu trebuie să
fie decât textul cuprins între tag-urile <TITLE> şi </TITLE> (figura 2.8).
Figura 2.8
Remarcă. Titlul paginii este prima informaţie care se afişează în bara de titlu a
navigatorului (figura 2.9) şi oferă o primă idee asupra conţinutului paginii.
Figura 2.9
Daţi un titlu semnificativ şi nu prea lung (cel mult 100 de caractere!).

Altfel, este neplăcut să vă întâmpinaţi vizitatorii cu mesajul „untitled”
afişat în bara de titlu a navigatorului! Şi încă ceva! Titlul joacă de
asemenea un rol important în indexarea site-ului!
24
Remarcă. Semnificaţia celorlalte elemente HTML prezentate în figura 2.7 este
următoarea:
9 Elementul <BASE> conţine valoarea atributului href (pentru URL-uri relative).
<BASE> este un element vid.
9 Elementul <SCRIPT> este folosit pentru inserarea codului JavaScript într-o
pagină HTML. Codul JavaScript trebuie să fie plasat între tag-urile
<SCRIPT> şi </SCRIPT>. Pentru navigatoarele care nu recunosc script-urile
se recomandă includerea codului JavaScript în comentarii. Codul va fi în acest
caz ignorat şi considerat ca un text de comentariu ordinar.
9 Elementul <STYLE> conţine definiţia unei foi de stiluri. Ca şi în cazul script-
urilor, pentru navigatoarele care nu recunosc foile de stiluri (CSS) se
recomandă utilizarea comentariilor.
9 Elementul <LINK> stabileşte o legătură între pagina HTML curentă şi alt
document (este un element vid!). <LINK> poate fi folosit de asemenea
pentru a lega un document de o foaie de stiluri externă.
Corpul documentului. Elementul <BODY>

Tag-urile <BODY> şi </BODY> definesc corpul documentului (figura
2.10).
Figura 2.10
Remarcă. Toate tag-urile (de nivel 1) imbricate în elementul <BODY> trebuie să fie
conforme cu DTD HTML 4 strict.
Crearea unui en-tête. Tag-ul următor (<H1>) permite afişarea cu

caractere mari şi bolduite a mesajului „Prima mea pagină Web” (figura
2.11).
Figura 2.11
25
Tag-ul <H1> este utilizat pentru crearea unui titlu (H de la header, în
limba engleză). Cifra care urmează lui H indică importanţa şi mărimea
titlului. Cu cât cifra este mai mică, cu atât titlurile sunt mai importante –
se afişează cu caractere mai mari! Cifrele variază între 1 şi 6 (vezi
Conversaţia 4).
Aplicaţie
În figura 2.12 este prezentat un document care conţine toate elementele

HTML conforme cu DTD 4 strict. Ele sunt afişate în ordine alfabetică şi pot
constitui baza pentru documentele dumneavoastră HTML.
Figura 2.12
26
Figura 2.12
(continuare)
27
În figura 2.13 este afişat rezultatul vizualizării documentului în Microsoft
Internet Explorer.
Figura 2.13
28
Figura 2.13
(continuare)
Validaţi documentele HTML 4 strict

Dacă respectaţi regulile de redactare (scriere) a documentelor
dumneavoastră care figurează în DTD HTML 4 strict (sau DTD frameset
pentru cadre, vedeţi conversaţia 12), veţi fi răsplătiţi cu eticheta de
conformitate W3C pe care puteţi să o afişaţi în paginile dumneavoastră
(figura 2.14) Web.
29
Figura 2.14
Remarcă. În afară de plăcerea de a fi primit această recompensă atribuită lucrului bine

făcut, serviciul de validare vă oferă avantajul unei verificări a paginilor dumneavoastră
şi a unei semnalări a eventualelor erori generate. Numărul de linie şi tipul de eroare vă
vor fi semnalate, şi dacă aţi utilizat HTML-Kit care numerotează liniile de cod, nu veţi
întâmpina nici-o dificultate în a identifica zona erorii de corectat.
Instrumentul de validare W3C - validator

Pentru a valida documentele dumneavoastră utilizaţi aplicaţia (gratuită!)
validator, care este disponibilă pe site-ul: http://validator.w3.org. Veţi
obţine un ecran (vezi figura 2.15) care conţine un formular în care
trebuie să introduceţi adresa completă a fişierului dumneavoastră, de
exemplu: C:\Documents and Settings\Liviu\Desktop\imagini\debut.htm.
Figura 2.15
Remarci:
9 Interfaţa aplicaţiei validator nu este elegantă dar este însă foarte practică.
9 În meniul derulant Document type alegeţi valoarea Specified Inline sau
selectaţi versiunea limbajului XHTML sau HTML pe care doriţi s-o utilizaţi.
Aveţi la dispoziţie opt opţiuni:
• XHTML 1.0 strict;
30
• XHTML 1.0 transitional;
• XHTML 1.0 frameset;
• HTML 4.01 strict;
• HTML 4.01 transitional;
• HTML 4.01 frameset;
• HTML 3.2;
• HTML 2.0.
9 După caz, folosiţi şi cele patru butoane de validare (auto explicite): Show
source input, Show parce tree, Show an outline of this document, exclude
attributes from the parce tree.
9 Dacă se întâmplă să comiteţi şi erori care violează regulile XML sau regulile de
validare a DTD-urilor, aplicaţia validator va afişa mesaje de eroare. La prima
vedere, mesajele par a fi impersonale! Dar vă veţi convinge singuri că este
doar … o simplă impresie!
Dacă aţi respectat modelul de bază conform modelului prezentat în

această conversaţie (debut.htm) nu va trebui să mai precizaţi nici
DTD-ul, nici setul de caractere utilizat, întrucât ele vor fi detectate în
mod automat.
Remarcă. Executaţi clic pe butonul Validate this document (figura 2.16) pentru ca
programul Validator să înceapă analiza documentului dumneavoastră!
Figura 2.16
31
Dacă aţi respectat indicaţiile din această conversaţie, veţi obţine textul
prezentat în a doua parte a figurii 2.17 care vă precizează că
documentul dumneavoastră este conform şi valid: Congratulation, this
document validates as HTML 4.01 strict!
Figura 2.17
Adăugaţi icon-ul de conformitate HTML
Pentru a afişa icon-ul de conformitate W3C în pagina

dumneavoastră Web nu vă rămâne decât să recopiaţi codul indicat în
pagina de rezultate W3C (figura 2.18).
Figura 2.18
În figura 2.19 este prezentat noul document HTML 4 strict în care s-a
inserat codul indicat în pagina de rezultate W3C din figura precedentă.
Figura 2.19
32
În figura 2.20 este afişat rezultatul vizualizării paginii Web în Microsoft
Internet Explorer.
Figura 2.20
Remarcă. Navigatorul a afişat icon-ul de conformitate W3C la baza paginii Web.
Atribute HTML comune

Cea mai mare parte a tag-urilor HTML conţin atribute comune, după
cum urmează:
9 id=”nume” Atribuie un nume unic unui element din interiorul

documentului. Când un element conţine de
asemenea un atribut name este de dorit să
utilizăm simultan cele două atribute (id şi name)
afectându-le aceeaşi valoare.
Exemplu: <P id=”p1”> Text paragraf </P>.
9 class=”nume” Atribuie o clasă sau un element de clasă unui
element. Acest atribut este frecvent utilizat cu
foile de stiluri CSS.
Exemplu: <P class=”avantaje”> Text paragraf
</P>.
9 style=”stil” Permite crearea unui stil local.
Exemplu: <P style=”background-color: red”>
Text paragraf </P>.
9 title=”text” Se aplică numai unui element dedicat şi nu
întregului document.
Exemplu: <P title=”citiţi paragraful”> Text
paragraf </P>.
9 lang=”cod” Precizează codul ISO al limbii.
Exemplu: <P lang=”fr”> Text paragraf </P>.
9 dir=”ltr\rtl” Precizează sensul de citire (left to right\ right to
33
left) al unui text.
9 onclick, ondblclick, Atribute pentru gestionarea evenimentelor.
onkeydown,
onkeypress,
onkeyup,
onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup
XHTML Structura unui document XHTML 1.0
Întrucât limbajul XHTML este o aplicaţie a limbajului XML, el este deci

extensibil şi, în consecinţă el poate fi … combinat cu vocabularele XML.
De exemplu, elementele SVG-ului (Scalable Vector Graphics) pot fi
adăugate unui document XHTML întrucât cele două limbaje sunt
vocabulare XML.
Puteţi de asemenea adăuga propriile elemente şi atribute documentelor

XHTML. Dacă utilizaţi un DTD, va trebui să definiţi toate elementele şi
atributele utilizate în cadrul documentului dumneavoastră. Această
regulă semnifică faptul că va trebui să extindeţi definiţia proprie DTD a
XHTML-ului. În consecinţă, trebuie să aveţi capacitatea de a citi şi a
scrie un DTD!
Iată cum scriem manual codul sursă (XHTML 1.0) al primei

dumneavoastră pagini Web, care afişează mesajul „Prima mea pagină
Web” (vezi figura 2.21).
34
Figura 2.21
Elementele comune (XHTML) ale paginilor Web
Tag-urile de comentarii
În XHTML comentariile au aceeaşi sintaxă ca în HTML. Comentariile
cuprind informaţii despre cod (ce face, cine este autorul), despre
modificările ce urmează a fi făcute etc. În conversaţiile viitoare dedicate
script-urilor, foilor de stiluri etc., vom descoperi şi alte funcţii pe care le
îndeplinesc comentariile.
Declaraţia DOCTYPE
Specificaţia XHTML 1 are trei versiuni: strict, transitional şi frameset.
Versiunea strict nu acceptă decât limbajul XHTML … „curat”; ea poate fi
utilizată în situaţia în care aveţi documente XHTML care nu utilizează
elemente de formatare bazate pe foile de stiluri. Pentru a preciza că
documentul dumneavoastră se conformează unui DTD strict, utilizaţi
tag-ul prezentat în figura 2.22.
35
Figura 2.22
Remarcă. Pentru versiunea XHTML Strict, puteţi folosi şi declaraţia DOCTYPE …

prescurtată (figura 2.23).
Figura 2.23
Pentru versiunea XHTML transitional utilizaţi tag-ul prezentat în figura

2.24.
Figura 2.24
Remarcă. Întrucât standardele XHTML evoluează, această declaraţie va fi modificată

pentru a indica noile versiuni. De exemplu, într-un an declaraţia DOCTYPE ar putea
avea forma:
<!DOCTYPE xhtml PUBLIC ”-//W3C//DTD XHTML 2.0 Transitional//EN”
”http://www.w3.org/TR/xhtml2/DTD1/xhtml2-transitional.dtd”>
În sfârşit, pentru versiunea XHTML frameset utilizaţi tag-ul prezentat în

figura 2.25.
Figura 2.25
36
Remarci:
9 Versiunea XHTML1 strict este utilizată numai pentru documentele XHTML …
„pur”.
9 Versiunea XHTML1 transitional suportă elementele necesare formatării (CSS).
Elementul <html>
Elementul <html> identifică documentul ca pe un document HTML sau
XHTML. Pentru a preciza că documentul este un document XHTML, va
trebui să adăugaţi un spaţiu de nume XHTML.
Remarcă. Limbajul XML vă permite să creaţi propriile elemente şi atribute. Puteţi de

asemenea combina mai multe tipuri de documente XML. Acelaşi document poate
conţine elemente care aparţin mai multor vocabulare. Este de asemenea posibil ca
acelaşi nume al unui element să fie utilizat în diferite vocabulare. Spaţiul de nume
permite realizarea unei legături a unui element la un vocabular cu ajutorul prefixelor
specifice. În exemplul nostru (figura 2.21) spaţiul de nume XHTML a fost declarat în
interiorul tag-ului <html> cu atributul xmlns a cărei valoare este numele spaţiului de
nume (figura 2.26).
Figura 2.26
Elementul <head>
Prezent în toate documentele XHTML, elementul <head> conţine
informaţii privind titlul, script-ul utilizat, definiţia stilurilor şi descrierile
documentului.
Elementul <head> trebuie inserat între tag-urile <html> şi </html>.
Remarcă. Nu confundaţi elementul <head> care este un element de structură cu

elementul en-tête (h1, de exemplu) care creează un text de en-tête în corpul
documentului.
37
În afară de elementele meta şi title, elementul <head> poate conţine de
asemenea şi următoarele elemente (fiu): script, style, link, isindex (este
înlocuit de elementul input), base.
Elementul <meta>
Elementul <meta> este un element fiu al elementului <head> (poate fi
imbricat în <head>); este de asemenea un element vid (figura 2.27).
Figura 2.27
Remarcă. Deoarece elementul <meta> este un element vid, nu uitaţi să-l închideţi cu un
spaţiu urmat de o bară oblică înaintea semnului „>” ( />).
Elementul <title>
Elementul <title>, obligatoriu într-un document XHTML1 conţine titlul
documentului. Pentru a utiliza elementul <title>, inseraţi-l între tag-urile
<head> de început şi de sfârşit (figura 2.28).
Figura 2.28
38
Remarci:
9 Exemple de titluri corecte:
• Exemplu de cod XHTML
• Învăţăm XHTML
• Adrese de site-uri XHTML
9 Exemple de titluri mai puţin utile:
• Capitolul 4
• Aplicaţii
• Exemple
9 Atenţie la titlurile implicite generate de editoarele WYSIWYG. Daţi propriul
titlu documentului dumneavoastră.
9 Informaţiile din elementul <title> sunt de asemenea utilizate de către
motoarele de căutare şi programele de indexare.
Alţi fii ai elementului <head>

În afară de elementele <title> şi <meta>, elementul <head> poate
conţine de asemenea următoarele elemente fiu: base, script, style, link,
isindex (este înlocuit de elementul input pentru a crea un control pentru
introducere text).
Corpul documentului. Elementul <body>

Elementul <body> conţine elementele, atributele şi informaţiile pe care
doriţi să le afişaţi în navigator. Pentru a utiliza elementul <body>
inseraţi-l între tag-ul de închidere </head> şi tag-ul de închidere
</html> (figura 2.29).
Figura 2.29
39
Crearea unui en-tête. En-tête-urile divizează textul, anunţă subiectele
care urmează şi aranjează informaţiile într-o ierarhie logică. Limbajul
XHTML ca şi limbajul HTML 4 Strict permite utilizarea a şase nivele de
en-tête: <h1>…</h1>; <h2>…</h2>; <h3>…</h3>; <h4>…</h4>;
<h5>…</h5>; <h6>…</h6> (vezi Conversaţia 4).
Tag-ul <h1>…</h1> utilizat în continuare (figura 2.30) a fost introdus

cu rolul de a afişa cu caractere mari şi bolduite mesajul: „Prima mea
pagină Web”.
Figura 2.30
Remarcă. În general, este bine să utilizaţi elementele de en-tête numai pentru

documentele de en-tête, altfel spus nu utilizaţi aceste elemente pentru
legende sau pentru a accentua informaţiile din interiorul textului.
Atribute XHTML1 comune

Ca şi în HTML, atributele: id, style, class, lang, dir, title, onclick,
ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup sunt comune şi
elementelor XHTML.
Remarci:
9 Atributul style nu poate fi utilizat cu elementele: <html>, <head>, <title>,
<meta>, <style>, <script>, <param>, <base> şi <basefont>.
9 Atributul title nu poate fi utilizat cu elementele: <html>, <head>, <meta>,
<title>, <script>, <param>, <base> şi <basefont>.
40
Elemente HTML … depăşite în versiunea XHTML1
Unul din obiectivele principale ale limbajului XHTML îl constituie
separarea structurii documentului de forma de prezentare a sa.
Următoarele elemente HTML, care sunt depăşite în versiunea XHTML1,

dar mereu utilizate de diverşi autori vor fi cu siguranţă eliminate din
viitoarea versiune XHTML.
9 applet, înlocuit de elementul object;

9 basefont, înlocuit de CSS;
9 center, înlocuit de CSS;
9 dir, înlocuit de elementul ul;
9 font, înlocuit de CSS;
9 isindex, înlocuit de elementul input;
9 menu, înlocuit de elementul ul;
9 s sau strike, înlocuit de CSS;
9 u, înlocuit de CSS.
Remarcă. În cadrul lucrării, vom prezenta pentru fiecare din elementele HTML depăşite o
alternativă (acolo unde este posibil!).
Validaţi documentele XHTML 1.0

Pentru a valida un document XHTML vă recomandăm să folosiţi tot
aplicaţia W3C validator pe care aţi utilizat-o şi la validarea documentelor
HTML 4 Strict.
Dacă documentul XHTML pe care l-aţi creat (figura 2.21) este validat,
veţi primi mesajul: „Congratulations, this document validates as XHTML
1.0 Transitional!”, iar apoi puteţi adăuga icon-ul de conformitate XHTML
în pagina dumneavoastră Web.
În figura 2.31 este afişat rezultatul validării:

41
Figura 2.31
Icon-ul XHTML (vezi figura 2.32) indică utilizatorilor că documentul

dumneavoastră este conform specificaţiilor limbajului XHTML. Felicitări!
Figura 2.32
Adăugaţi icon-ul de conformitate XHTML
Pentru a adăuga icon-ul în pagina dumneavoastră Web,

inseraţi în documentul XHTML următorul paragraf (figura 2.33):
Figura 2.33
42
Cred că v-aţi convins că procesul de validare este de o simplitate
uimitoare!
În figura 2.34 este prezentat noul document XHTML 1.0 în care s-a
inserat codul indicat în paragraful precedent.
Figura 2.34
Rezultatul vizualizării paginii Web în Microsoft Internet Explorer este

prezentat în figura 2.35. Remarcaţi, la baza paginii, icon-ul de
conformitate W3C.
Figura 2.35
43
(X)HTML Temă
1. Comentaţi pe scurt următoarele două reguli de … aur ale paginilor
Web:
9 Nu publicaţi o pagină în curs de realizare.
9 Nu utilizaţi resurse pirat (imagini, text etc.) fără a fi obţinut în
prealabil copyright-ul!
2. Care sunt elementele comune (X)HTML ale paginilor Web?
3. Cum validaţi un document (X)HTML?
4. Ce este icon-ul de conformitate ?
9 http://validator.w3.org
9 www.w3.org/Markup
9 www.yahoo.com
Conversaţia 2
(continuare)
Convertiţi HTML în XHTML

•••••••••••••••••••••••••••••••••••••••••
f De ce trebuie să convertiţi documentele HTML?
f Convertiţi manual documentele HTML
f Convertiţi (automat) documentele HTML cu HTML Tidy
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
A converti un document HTML în XHTML nu înseamnă a relua totul de la

zero! XHTML utilizează exact aceleaşi elemente şi atribute ca HTML (mai
puţin spaţiile de nume XHTML). Aveţi deci nevoie de a schimba numai o
parte a vocabularului şi de a rescrie sintaxa elementelor. Acest lucru
este posibil în două moduri:
9 convertire în mod manual;

9 convertire în mod automat, utilizând aplicaţia HTML Tidy.
De ce trebuie să convertiţi documentele HTML?

Pentru a înţelege mai bine de ce trebuie să convertiţi documentele HTML
în XHTML, trebuie să ştiţi mai întâi de unde provine XML şi care este
destinaţia sa. (vezi Liviu Dumitraşcu, XML, Editura Universităţii din
Ploieşti, 2003).
46
Prezentăm în continuare câteva argumente, sperăm convingătoare:
9 Întrucât limbajul XHTML este o aplicaţie XML, un procesor XML poate

prelucra XHTML.
9 XHTML poate fi extins pentru a integra alte modele de documente
(vocabulare) ca de exemplu, SVG (Scalable Vector Graphics), SMIL
(Synchronized Multimedia Integration Language), MathML
(Mathematic Markup Language) sau de ce nu propriul dumneavoastră
vocabular XML.
9 XHTML încurajează separarea stilului (documentului) de structura
documentului.
9 XHTML oferă un cod mai clar, mai uşor de citit atât pentru procesor
cât şi pentru ochiul uman.
9 Furnizorii de telefoane mobile au ales XHTML ca limbaj privilegiat.
9 Conexiunea XHTML-XML a demonstrat costuri reduse în materie de
copyright, de mentenanţă şi de dezvoltare. Dacă acestea se
concretizează, aceste beneficii nu vor întârzia să atragă piaţa.
9 W3C nu va mai dezvolta HTML, decât sub formă de noi versiuni
XHTML.
Convertiţi manual documentele HTML

Numai dumneavoastră puteţi decide de a converti manual paginile HTML
în XHTML. Pentru a fi oneşti, trebuie să mărturisim că metoda manuală
de conversie este superfluă! Aveţi la dispoziţie un fantastic instrument
gratuit – HTML Tidy de care trebuie să profitaţi fără nici-o ezitare.
Pentru a vă convinge de ceea ce poate face HTML Tidy, o descriere a

metodei manuale devine necesară.
XHTML este compatibil în amonte, cu vechile navigatoare. Cum XHTML

preia vocabularul utilizat de HTML, singurul veritabil obstacol care poate
încă împiedica compatibilitatea XHTML cu navigatoarele din generaţiile
mai vechi se limitează la convenţiile de sintaxă. Din fericire, sintaxa XML
47
este suficient de apropiată de cea a limbajului SGML deci, şi de HTML,
ceea ce face ca diferenţele sintactice să fie minime.
Reguli de convertire manuală:

9 Atunci când utilizaţi sintaxa elementului vid XML, inseraţi un spaţiu
înaintea barei oblice (/); exemplu: <br />.
9 Utilizaţi o foaie de stiluri externă sau documente de script în loc de a
le imbrica între <head> şi </head> ale documentului XHTML. Înainte
de apariţia XHTML, creatorii Web foloseau comentariile pentru a
masca script-urile şi foile de stiluri ale vechilor navigatoare. XHTML
utilizează secţiunile CDATA din XML pentru a masca script-urile interne
şi sintaxa foilor de stiluri. Vechile şi noile procesoare sunt susceptibile
de a intra în conflict. Dacă nu puteţi utiliza script-uri sau foi de stiluri
externe, asiguraţi-vă că sintaxa internă nu conţine <,&,]], sau >. La
ora actuală nici-un navigator nu este capabil de a se servi de
secţiunile CDATA ale limbajului XML.
9 Convertiţi toate numele de elemente şi atribute (şi valorile atributelor)
care sunt scrise cu majuscule, în minuscule.
9 Nu utilizaţi rupturi de linie pentru a mări lizibilitatea documentului;
inseraţi un spaţiu alb numai între elemente.
9 Utilizaţi împreună atributele name şi id pentru a asigura o
compatibilitate … perfectă cu navigatoarele! Exemplu: <a
name=”unu” id=”unu”> … </a>.
9 Pentru a asigura o compatibilitate în aval şi în amonte utilizaţi în
acelaşi timp atributele lang şi xml.
9 Închideţi toate elementele, inclusiv elementele vide.
9 Plasaţi între ghilimele toate valorile atributelor.
9 Atribuiţi valori tuturor atributelor. Exemplu: <input type=”checkbox”
checked=”checked” />.
9 Imbricaţi corect elementele.
9 Utilizaţi declaraţia DOCTYPE corespunzătoare.
9 Introduceţi în tag-ul de deschidere <html> spaţiul de nume XHTML:
<html xmlns=”http://www.w3.org/1999/xhtml”>.
48
Aplicând regulile de convertire manuală (HTML → XHTML) documentului
HTML 4 (Conversaţia 2, figura 2.1) s-a obţinut documentul XHTML 1.0
ilustrat în figura de mai jos (figura 2.36).
Figura 2.36
Remarcă. Revedeţi Conversaţia 2.
Convertiţi (automat) documentele HTML cu HTML Tidy

HTML Tidy, un instrument conceput de David Ragett este o veritabilă …
providenţă pentru toţi creatorii Web. Disponibil pe platformele Windows
şi Mac, Tidy converteşte documentele HTML în XHTML de o manieră
precisă, în câteva secunde.
Destinat la început … curăţării codului HTML el a sfârşit prin a fi integrat

ca plugin în cea mai mare parte a editoarelor HTML. În plus, Tidy
posedă şi o versiune grafică, Tidy Gui.
Prezentăm în continuare câteva din virtuţile acestui instrument:
9 corectează tag-urile finale desperecheate;

9 corectează erorile de imbricare;
49
9 localizează elementele prost plasate (exemplu: elementul td este
plasat în interiorul elementului form);
9 modifică în mod automat toate numele de elemente şi atribute care
au fost scrise cu majuscule;
9 adaugă ghilimele (simple sau duble) valorilor atributelor.
Pentru informaţii suplimentare privind facilităţile şi opţiunile aplicaţiei
HTML Tidy, vizitaţi site-ul www.w3.org/People/Ragett/Tidy.
Şi-acum la treabă!
Încărcaţi HTML-Kit de pe site-ul www.chami.com/html-Kit/, deschideţi-l

şi faceţi cunoştinţă cu interfaţa. Nu vă emoţionaţi. Nu este nimic
complicat!
Identificaţi documentul debut.htm. Deschideţi fişierul (File → Open).
În HTML-Kit, selectaţi Actions / Tools / HTML Tidy / Convert to XHTML

(figura 2.37).
Figura 2.37
În câteva minute veţi obţine un document (debut.htm) XHTML …

perfect! (vezi figura 2.38).
50
Figura 2.38
Nu vă grăbiţi! Mai există şi … mai mult ca perfect!
Remarci:
9 Dacă doriţi să înlocuiţi vechiul document (debut.htm) HTML cu noul document
XHTML, executaţi un clic dreapta în fereastra din dreapta a ecranului şi
selectaţi Copy Output To Editor (figura 2.39).
Figura 2.39
51
9 Selectaţi File → Save.
9 Executaţi apoi clic pe Editor situat la baza ferestrei pentru a continua
modificările în documentul dumneavoastră sau pentru a vedea limbajul
XHTML în toată splendoarea sa! (figura 2.40).
Figura 2.40
(X)HTML Temă
1. De ce trebuie să convertiţi documentele HTML în XHTML?
2. Care sunt virtuţile aplicaţiei HTML Tidy?
3. Comentaţi pe scurt următoarele două reguli de convertire manuală
(HTML XHTML):
9 Convertiţi toate numele de elemente şi atribute (şi valorile
atributelor) care sunt scrise cu majuscule, în minuscule.
9 Închideţi toate elementele, inclusiv elementele vide.
52
9 www.altavista.com
9 www.news.com
9 www.multimania.fr
9 www.tripod.fr
9 www.zdnet.com/developer
Conversaţia 3
Introduceţi şi formataţi caracterele cu

HTML 4 şi XHTML
•••••••••••••••••••••••••••••••••••••••••
f HTML4, XHTML – Introduceţi text
f HTML4, XHTML – Inseraţi caractere speciale
f HTML4, XHTML – Inseraţi caractere proprii (X)HTML
f HTML4, XHTML – Aplicaţi unui text formatele fizice şi logice
f HTML4, XHTML – Scrieţi un text cu exponent sau cu indice
f HTML4 – Definiţi tipul de font
f HTML4 – Definiţi dimensiunea fontului
f HTML4 – Definiţi culorile
f XHTML – Definiţi tipul de font, dimensiunea fontului şi culorile
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
Elementele cele mai des întâlnite în paginile Web sunt: textul şi

imaginile. Începeţi să creaţi pagini Web cu HTML pentru a vă familiariza
cu introducerea textului şi cu formatarea acestuia. Veţi descoperi în cele
ce urmează cum definiţi tipul şi dimensiunea fontului, cum inseraţi
caractere proprii HTML, cum daţi ... ordin să clipească un text şi ... nu
doar atât.
54
HTML Introduceţi text

Desigur, una este să plasaţi cod HTML, şi alta să introduceţi text într-o
pagină Web. Pagina Web fără text este ca ... şi irigaţia fără ... ploaie!
În consecinţă, vă propunem să introducem un text în documentul HTML

pe care l–aţi creat.
Iată cum procedaţi să introduceţi următorul text în pagina Web:
Bine aţi venit! Felicitări pentru răbdarea de a ne fi

descoperit!
1. Introduceţi declaraţia DOCTYPE (figura 3.1).
Figura 3.1
2. Introduceţi textul propus între tag–urile <BODY> şi </BODY>

(figura 3.2).
Figura 3.2
55
3. Salvaţi documentul (index.htm) cu extensia .htm sau .html
(figura 3.3).
Figura 3.3
Remarci:
9 Dacă în editorul de texte Notepad acţionaţi tasta ENTER sau inseraţi mai
multe spaţii, aceasta nu vă ajută decât la ... aerisirea documentului HTML
neinfluenţând în nici un fel modul de afişare a paginii într-un browser.
9 Salturile de linie, paragrafele sunt create cu tag–uri specializate (vezi
paragrafele următoare ). Fără aceste tag–uri, un text se întinde pe o singură
linie atunci când se afişează într-un browser.
56
4. Validaţi documentul HTML 4 strict cu aplicaţia validator
(http://validator.w3.org).
Figura 3.4
5. Inseraţi codul HTML care afişează icon-ul de conformitate
(figura 3.5).
Figura 3.5
57
6. Vizualizaţi pagina Web într-un navigator - Internet Explorer, via
index.htm butonul Open (figura 3.6).
Figura 3.6
Remarcă. Internet Explorer afişează textul pe care l-aţi introdus (pe o singură linie) şi
icon-ul de conformitate W3C – la baza paginii (vezi figura 3.7).
Figura 3.7
Remarci:
9 Observaţi modul total diferit de afişare a textului de către editorul Notepad şi
browser–ul Internet Explorer.
58
9 Utilizaţi comanda SOURCE din meniul VIEW pentru a revedea codul sursă
HTML.
9 Activaţi butonul REFRESH de pe bara de instrumente a browser–ului pentru a
actualiza documentul în cazul în care au fost operate modificări.
9 Dacă textul pe care doriţi să-l introduceţi se află deja în alt document, utilizaţi
tehnica COPY → PASTE pentru a-l copia în Notepad. Câştigaţi, evident mult
timp!
XHTML Introduceţi text
Tag-urile (HTML) nu sunt singurele elemente care contribuie la

realizarea unei pagini Web de succes! Dacă HTML este mai tolerant în
ceea ce priveşte scrierea codului, XHTML este foarte exigent! Trebuie să
treceţi de nivelul începător şi să respectaţi alte principii de codificare
Web pentru a vă conforma standardelor XHTML-ului.
Iată cum creaţi manual un document XHTML care conţine textul „Bine
ati venit! Felicitari pentru rabdarea de a ne fi descoperit!”.
Metoda manuală
1. Introduceţi în locul tag-ului <html> următoarele trei linii (figura

3.8): <?xml …>; <!DOCTYPE …> şi <html xmlns= …>.
Figura 3.8
Remarci:
9 Prima linie este prologul XML – HTML integrat în XML. Ea defineşte setul de
caractere iso-8859-1. Atenţie la majuscule şi la minuscule!
9 A doua linie (lungă!) defineşte tipul de document (DOCUMENT TYPE
DEFINITION) utilizat. Noi utilizăm pentru acest exemplu DTD transitional,
59
opţiunea cea mai frecventă. <!DOCTYPE> identifică fişierul ca document
HTML conform cerinţelor XML.
9 Tag-ul <!DOCTYPE> este singurul tag scris cu litere mari. Celelalte tag-uri
HTML trebuie să fie scrise cu litere mici.
9 <!DOCTYPE> poate fi utilizat cu una din opţiunile: strict, transitional şi
frameset.
9 Opţiunea „Strict.dtd” (figura 3.9) oferă mai puţine avantaje şi cere în schimb
mai mult efort de codificare.
Figura 3.9
9 Opţiunea „transitional.dtd” (figura 3.10) se foloseşte atunci când optaţi pentru

un DTD ... moderat. În cadrul acestei lucrări, opţiunea „transitional.dtd” va fi
folosită în majoritatea aplicaţiilor.
Figura 3.10
9 Opţiunea „frameset.dtd” (figura 3.11) se foloseşte atunci când lucraţi cu cadre

(vezi Conversaţia 12).
Figura 3.11
9 Nu intraţi în panică! Un document DTD este redactat în limbajul de descriere a

documentelor SGML.
9 Poate aţi observat unele schimbări la tag-ul <html> din cea de-a treia linie
(figura 3.12). Tag-ul <html> are noi atribute: xmlns, xml:lang şi lang. Când
60
utilizaţi HTML trebuie să introduceţi doar tag-ul <html> pentru a identifica
documentul ca fişier HTML, dar la XHTML trebuie să folosiţi atributul xmlns
pentru a lega documentul dumneavoastră la definiţia Consorţiului W3 a
XHTML-ului, care există încă! E puţin neclar, dar este o încercare pentru viitor.
Mai multe despre aceste planuri de viitor în capitolele următoare.
Figura 3.12
Foarte complicat, nu-i aşa! Puteţi renunţa la primele trei linii pe care vi
le-am recomandat să le integraţi în documentele dumneavoastră HTML
sau XHTML, reţinând numai tag-ul <html>. Legătura către DTD-ul din
linia a doua poate fi considerată total inutilă. De ce? Iată câteva dintre
argumente.
9 Navigatoarele actuale (şi viitoare) pot citi fără probleme

(X)HTML fără DTD, deoarece toate tag-urile sunt „integrate” în
navigator, şi sunt deci cunoscute.
9 Această informaţie este, la ora actuală, uşor ignorată de către

navigatoarele curente.
9 Cele trei linii sunt puţin utilizate în practică şi de multe ori pot
dezorienta începătorii.
Remarci:
9 Renunţaţi la cele trei linii numai atunci când sunteţi siguri că aţi redactat
documente XHTML valide, într-un stil perfect!
9 Pentru navigator este puţin important dacă la începutul documentului
introduceţi cele trei linii sau numai tag-ul <html>.
9 Există programe care convertesc în mod automat HTML în XHTML.
9 Utilizaţi programul utilitar (oferit gratuit de W3C) HTML-TIDY pentru
convertirea automată HTML XHTML.
În continuare vom trece la următorul pas (2) necesar creării primului

nostru document XHTML.
61
2. Introduceţi cu litere mici, tag-urile <head>, <title>, </title> şi
</head> (figura 3.13).
Figura 3.13
Remarci:
9 Pentru a crea documente XHTML este suficient să respectaţi regulile XML cu
următoarele adăugiri:
• Opţional, documentul poate începe cu o declaraţie XML.
• O declaraţie DOCTYPE trebuie să fie prezentă, referind unul din
documentele următoare: strict, transitional sau frameset.
• Un element rădăcină trebuie să conţină întreg documentul. Tag-ul
<html> trebuie să se găsească înaintea tuturor celorlalte elemente, dar
după declaraţia XML.
• Pot fi utilizate toate tag-urile HTML dar numele lor trebuie să fie
introduse cu litere mici (<head> nu <HEAD>, <title> nu <TITLE>).
• Toate tag-urile de deschidere trebuie să corespundă unui tag de
închidere cu acelaşi nume, scris cu minuscule.
• Toate tag-urile elementelor vide trebuie să se termine cu o bară oblică
(Exemplu: <br /> sau <br> </br>).
• Atributele trebuie să aibă un nume şi o valoare.
• Valorile atributelor trebuie să fie cuprinse între ghilimele.
9 Dacă respectaţi aceste reguli simple, documentele dumneavoastră vor fi
conforme cu standardul XHTML. Pentru verificare, puteţi valida aceste
documente.
3. Introduceţi textul între tag-urile <body> şi </body> (figura

3.14).
Figura 3.14
Remarcă. Informaţiile pe care doriţi să le prezentaţi în pagina Web, trebuie să fie definite
în corpul paginii, mai precis între tag-urile <body> şi </body>.
4. Introduceţi tag-ul de închidere </html> (figura 3.15).

62
Figura 3.15
Remarci:
9 Un document XHTML se compune din elementele: antet şi corpul
documentului. Ele sunt delimitate prin tag-urile <html> şi </html>.
9 Un document XHTML începe cu tag-urile <?xml> şi <!DOCTYPE>, care conţin
informaţii privind setul de caractere utilizat şi tipul de document utilizat. Cele
două informaţii permit navigatorului să identifice o pagină scrisă în XHTML.
9 Tag-ul <html> trebuie să includă şi atributele: xmlns, xml:lang, lang.
9 Tag-urile <head> şi </head> conţin informaţii despre document.
9 Tag-urile <title> şi </title> identifică titlurile paginii.
9 Tag-urile <body> şi </body> delimitează corpul paginii.
9 Toate tag-urile XHTML (cu excepţia tag-ului <!DOCTYPE>) trebuie să fie
tastate cu litere mici.
5. Salvaţi documentul (lumina.html), figura 3.16.
Figura 3.16
Remarcă. Extensia fişierului este .html. Nu există extensia .xhtml.
6. Validaţi documentul XHTML cu aplicaţia validator.

63
Odată declaraţia <!DOCTYPE> adăugată, puteţi trece la validarea
documentului XHTML în raport cu DTD-ul care figurează pe site-ul
consorţiului W3. Dacă validarea reuşeşte, aţi obţinut un document
XHTML.
Remarcă. W3C propune o aplicaţie de validare validator (http://validator.w3.org) care vă

poate indica dacă codul XHTML este valid sau nu.
În figura 3.17 este prezentat rezultatul validării obţinut cu aplicaţia

validator.
Figura 3.17
7. Inseraţi codul XHTML care afişează icon-ul de conformitate
(figura 3.18).
64
Figura 3.18
8. Vizualizaţi pagina Web într-un navigator (figura 3.19).
Figura 3.19
Iată cum procedăm pentru a crea acelaşi document XHTML în mod

automat, convertind cu HTML Tidy documentul HTML lumina.html (creat
anterior).
Metoda automată
1. Identificaţi fişierul lumina.html (File → Open)
2. Executaţi clic pe Actions → HTML Tidy → Convert to XHTML

(figura 3.20).
Figura 3.20
65
În câteva minute HTML Tidy afişează un document XHTML … mai mult
ca perfect! (vezi figura 3.21).
Figura 3.21

Internet Explorer.
Figura 3.22
Remarcă. Analizaţi documentul XHTML pe care l-aţi generat în mod automat şi încercaţi
să înţelegeţi regulile XHTML care au fost aplicate. Nu este nimic complicat.
66
HTML Inseraţi caractere speciale

După cum cunoaşteţi, diferite caractere nu figurează pe tastaturile
obişnuite. Aceste caractere, pe care le numim speciale se inserează în
codul sursă HTML în conformitate cu regulile prevăzute de norma
ISO/IEG.
Metoda pe care o folosim pentru inserarea acestor caractere (speciale)

într-o pagină Web, constă în a începe întotdeauna codificarea acestora
cu & şi a o termina cu punct şi virgulă (;).
Iată cum procedăm pentru a insera la finele paginii Web textul:
© 2003 Lumina Blanda.
1. Înlocuiţi caracterul special de copyright © prin codul ©
Figura 3.23
sau,
utilizaţi mnemonicul © (figura 3.24).
Figura 3.24
67
Remarcă. &COPY; sau © inserează simbolul © la poziţia curentă a
cursorului.
2. Validaţi documentul HTML 4 Strict cu aplicaţia validator.
4. Vizualizaţi pagina Web într-un navigator.
Figura 3.25
Remarci:
9 În navigator simbolul © apare explicit.
9 Reţineţi următoarele coduri: ® pentru caracterul ®; @ pentru
caracterul @; &#227 pentru caracterul ă; &#226 pentru caracterul â; &#238
pentru caracterul î; Î pentru caracterul Î.
Aplicaţie
Introduceţi următorul text (în limba franceză) care conţine caractere

accentuate (e cu accent grav):
Ma première page Web est O.K.!
Indicaţie. Pentru caracterul e cu accent grav folosiţi mnemonicul è.
XHTML Inseraţi caractere speciale

Site-ul consorţiului W3 (www.w3.org/TR/REC-html40/sgml/entities.htm)
conţine o listă completă a tuturor caracterelor suportate de HTML. Veţi
vedea cum multe din aceste simboluri sunt uşor de înţeles (Exemple:
68
© pentru simbolul de copyright (©); ® pentru simbolul de
marcă înregistrată (®) etc.; folosit pentru inserarea unui spaţiu
într-un document HTML).
Iată cum procedăm pentru a crea acelaşi document XHTML, în mod

automat, convertind documentul HTML lumina.htm (creat anterior), cu
HTML-TIDY.
În figura 3.26 se prezintă documentul XHTML generat.
Figura 3.26
Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în

figura 3.27.
Figura 3.27
69
HTML Inseraţi caractere proprii HTML

În codul sursă HTML puteţi include de asemenea şi caractere proprii
HTML, precum <, > sau &.
Dacă de exemplu, doriţi să inseraţi într-un text de marketing eticheta

C&A, navigatorul va considera simbolul & ca pe un cod!
Ce facem? Soluţia este de a utiliza norma ISO/IEG 10646 care prevede

tag-uri speciale (entităţi de tip caracter). Ele încep întotdeauna cu un
ampersand (&) şi se termină cu punct şi virgulă (;).
De exemplu, caracterul & (ampersand) are codul (HTML) &
Iată cum inseraţi caracterul propriu HTML & în textul: „Vizitaţi

magazinele C&A!”.
1. Înlocuiţi caracterul & cu mnemonicul &
Figura 3.28
Remarci:
9 Prezentăm în tabelul următor principalele simboluri şi codul (mnemonicul)
HTML asociat.
Simbol Cod HTML
& &
< <
> >
Tabelul 1 " "
70
9 Entitatea de tip caracter special, care este utilizată frecvent în proiectarea
paginilor Web şi care nu se afişează pe ecran este spaţiul neutilizat (non-
breaking space) care are codul HTML (ampersand non– breaking
space punct şi virgulă).
2. Validaţi documentul HTML 4 strict cu aplicaţia validator.
Figura 3.29
Remarcă. Navigatorul afişează simbolul &.
XHTML Inseraţi caractere proprii XHTML

Pe site-ul www.w3.org/TR/REC-html40/sgml/entities.htm care aparţine
consorţiului W3 veţi găsi şi caracterele proprii (X)HTML, care de
asemenea sunt uşor de înţeles şi de aplicat: < (<); > (>); &
(&).
Iată cum procedăm pentru a crea acelaşi document XHTML, în mod

automat, convertind documentul HTML magazin.htm (creat anterior) cu
HTML-TIDY.

71
Figura 3.30

figura 3.31.
Figura 3.31
HTML Aplicaţi unui text formatele fizice şi logice

Până acum aţi învăţat cum să introduceţi text (numai text!). A sosit
momentul să învăţaţi şi cum să-l formataţi. HTML vă permite să aplicaţi
repede unele formate standard (bold, italic) folosind un set de tag-uri
predefinite. Toate aceste tag-uri (pereche) trebuie să încadreze textul pe
72
care doriţi să-l formataţi. Formatarea unui text poate fi pusă în evidenţă
cu două tipuri de formate: formate logice şi formate fizice.
Când utilizaţi formatele logice trebuie să indicaţi tipul de date (Exemplu:

definiţii, adresă) al secţiunii. Afişarea depinde de navigator. Formatele
fizice vă dau libertatea să vă definiţi singuri modul de formatare a
textului.
Remarci:
9 HTML 4 propune două metode (metoda „veche” şi metoda „nouă”) total
diferite pentru aplicarea formatelor fizice şi logice.
9 Tag-urile pe care le studiaţi în această conversaţie sunt aplicate cu metoda
„veche”, care în prezent este descurajată oficial de W3C. Foile de stiluri
reprezintă (vezi Conversaţia 6) noua „metodă” care este încurajată oficial de
W3C.
9 De ce învăţăm o metodă depăşită? Întrucât un număr mare, deloc neglijabil
de utilizatori posedă încă navigatoare Web care nu permit utilizarea foilor de
stiluri.
Formataţi un text cu caractere îngroşate (bolduite) sau cursive

(italice)
Contrar formatelor logice prin care afişajul este reglat de navigator,
formatele fizice vă permit definirea de către dumneavoastră înşivă a
modului în care doriţi formatarea unui text.
În prelucrarea textelor, puteţi aplica rapid unui text formatul fizic bold şi
italic în funcţie de scopul urmărit.
Iată cum bolduim în HTML prima frază din pagină "Bine aţi venit!" şi
cum afişăm cu italice cea de-a doua frază din pagină "Felicitări pentru
răbdarea de a ne fi descoperit!". Vom utiliza formatul fizic <B> şi
formatul fizic <I>.
1. Plasaţi prima frază între tag-urile <B> şi </B>.

73
Figura 3.32
2. Plasaţi fraza "Felicitări pentru răbdarea de a ne fi descoperit"

între tag-urile <I> şi </I>.
Figura 3.33

74
Figura 3.34
Remarcă. În browser, textele definite sunt bolduite, respectiv cursive. Admiraţi

icon-ul de conformitate.
Baraţi sau subliniaţi un text

Puteţi bara (tăia) un text pentru a semnala o schimbare de valori (a se
vedea anunţurile cu mari reduceri de preţuri, preţuri şoc etc.!) sau în
alte scopuri.
Sublinierea este ideală pentru a pune un text în valoare, dar se

recomandă prudenţă întrucât se pot crea confuzii cu textul subliniat
folosit ca link-uri.
Iată cum baraţi în HTML prima frază din pagină şi cum o subliniaţi pe
cea de-a doua. Vom utiliza formatul fizic <S> şi <U>.
1. Plasaţi prima frază între tag-urile <S> şi </S> (figura 3.35).

75
Figura 3.35
Remarcă. Pentru a bara un text puteţi utiliza de asemenea tag-ul pereche

<STRIKE> ... </STRIKE>.
2. Plasaţi cea de-a doua frază din pagină între tag-urile <U> şi
</U> (figura 3.36).
Figura 3.36
.
76
Figura 3.37
Măriţi sau micşoraţi un text

Pentru unii dintre dumneavoastră, utilizarea atributului size poate părea
un pic complicată. HTML elimină şi acest stres, propunându-vă două
tag-uri semnificative: <BIG> şi <SMALL> (formate fizice) pentru
mărirea, respectiv micşorarea unui text.
Iată cum măriţi dimensiunea fontului pentru ultimul cuvânt (venit) din
prima frază, respectiv micşoraţi dimensiunea fontului pentru cea de-a
doua frază. Vom utiliza formatul fizic <BIG> şi <SMALL>.
1. Plasaţi cuvântul pe care doriţi să-l măriţi între tag-urile <BIG>

şi </BIG> (figura 3.38).
77
Figura 3.38
2. Plasaţi textul pe care doriţi să-l micşoraţi între tag-urile

<SMALL> şi </SMALL> (figura 3.39).
Figura 3.39
3. Validaţi documentul HTML4 strict cu aplicaţia validator.
.
78
Figura 3.40
Remarcă. În browser, textele sunt reduse sau mărite în raport cu dimensiunea implicită a
fontului: 3.
Aplicaţie
Forţaţi browser-ul să afişeze următorul text: Universitatea "Petrol-Gaze" din

Ploieşti, tradiţie şi dinamism, pe o singură linie.
Pentru a interzice ruptura cuvintelor din text plasaţi textul care nu trebuie să fie
întrerupt între tag-urile <NOBR> şi </NOBR> (figura 3.41).
Figura 3.41
În navigator, cuvântul sau fraza nu vor fi scindate (figura 3.42).

79
Figura 3.42
Utilizaţi fontul cu pas fix

Fontul cu pas fix produce acelaşi efect ca şi maşina de scris. Acest tip de
font este practicat atunci când nu se doreşte aplicarea fonturilor
specifice.
Iată cum formatăm în HTML prima frază din pagină utilizând fontul cu
pas fix. Vom utiliza formatul fizic <TT>.
1. Plasaţi prima frază între tag-urile <TT> şi </TT> (figura 3.43).
Figura 3.43

80
Figura 3.44
Marcaţi definiţiile
Pentru a nu vă pierde cititorii, definiţi ori de câte ori este nevoie termenii
pe care îi utilizaţi. Numai aşa veţi reuşi să vă faceţi înţeles! Este
preferabil să separaţi definiţiile de restul textului.
Iată cum marcăm în HTML definiţia paragrafului (unitate de text care

conţine una sau mai multe linii). Vom utiliza formatul logic <DFN>.
1. Plasaţi textul definiţiei între tag-urile <DFN> şi </DFN> (figura

3.45).
81
Figura 3.45
Figura 3.46
Remarcă. În navigator, definiţia se reperează cu uşurinţă.
Semnalaţi citatele
Cunoaşteţi cu siguranţă că nu puteţi folosi surse bibliografice ce nu vă
aparţin fără a le cita (Legea dreptului de autor!).
82
Iată cum definim în HTML citatul: "Patria este norodul, nu tagma
jefuitorilor" a spus Tudor Vladimirescu. Vom utiliza formatul logic
<CITE>.
1. Plasaţi citatul între tag-urile <CITE> şi </CITE> (figura 3.47).
Figura 3.47
Figura 3.48
83
Remarci:
9 Puteţi afişa citatele lungi într-un bloc de text (indentat) cu scopul de a-l putea
diferenţia de restul textului din pagina Dvs. Web.
9 Pentru citate mai scurte se recomandă ghilimelele sau tag-ul <Q> şi să lăsaţi
textul în acelaşi rând cu restul conţinutului textului.
9 Dacă mărimea textului citat depăşeşte câteva propoziţii, utilizaţi tag-ul
<BLOCKQUOTE>.
Indicaţi comenzi, coduri de program

Dacă pagina Web pe care o realizaţi conţine comenzi, enunţuri program
este bine să le diferenţiaţi de restul textului.
Iată cum semnalăm într-un text HTML prezenţa cunoscutelor comenzi

Microsoft Office de copiere a unui text: Copy, Paste. Vom utiliza formatul
logic <CODE>.
1. Plasaţi comenzile Microsoft Office de copiere a unui text între

tag-urile <CODE> şi </CODE> (figura 3.49).
Figura 3.49
Remarcă. Puteţi de asemenea semnala comenzi sau enunţuri (cod) program

utilizând tag-ul <SAMP>.
2. Validaţi documentul HTML 4 strict cu aplicaţia validator (figura
3.50).
.
84
Figura 3.50
Remarcă. În navigator, comenzile se formatează cu un font specific.
Daţi ordin ... să clipească un text în pagină

Dacă pagina Web pe care o realizaţi nu necesită o formatare strictă, este
poate amuzant să inseraţi un text care ... clipeşte.
Iată cum procedăm ca textul din pagină din prima frază să ... clipească!
Vom utiliza formatul logic <BLINK>.
1. Plasaţi textul "Bine aţi venit!", care urmează să clipească, între

tag-urile <BLINK> şi </BLINK>.
Figura 3.51
Remarcă. Tag-ul <BLINK> este recunoscut numai de browser-ul Netscape.

85
4. Vizualizaţi pagina Web în browser-ul Netscape (figura 3.52).
Figura 3.52
XHTML Aplicaţi unui text formatele fizice şi logice

Tag-urile (X)HTML permit formatarea paginilor dar proprietăţile lor nu
sunt destul de puternice pentru a realiza pagini estetice.
Există şi alte tag-uri HTML de formatare (formate fizice şi logice) în afara

celor prezentate, dar folosirea lor nu este încurajată în HTML şi este
descurajată în XHTML în favoarea foilor de stiluri. Consorţiul W3 a
hotărât ca HTML-ul să fie folosit la identificarea tipurilor de informaţie
(text, titluri, tabele etc.) dar nu ar trebui să fie folosit la formatarea
acestor informaţii.
Unele tag-uri HTML mai vechi, utilizate în special la formatare, au fost

înlocuite cu foile de stiluri datorită capacităţii lor de formatare.
Dacă doriţi ca într-adevăr codul din documentele dumneavoastră să fie

conform cu XHTML, trebuie să renunţaţi la câteva tag-uri, altădată larg
86
folosite. În tabelul 2 se prezintă lista formatelor fizice (X)HTML în
vigoare.
Format fizic Semnificaţie

<b> ... </b> Bold
<i> ... </i> Italic
<tt> ... </tt> Teletext
<big> ... </big> Font mare
<small> ... </small> Font mic
Tabelul 2 <sup> ... </sup> Scriere cu exponent
<sub> ... </sub> Scriere cu indice
În tabelul 3 se prezintă lista formatelor logice (X)HTML în vigoare.
Format logic Semnificaţie

<em> ... </em> Emphasis
<strong> ... </strong> Strong emphasis
<code> ... </code> Cod
<samp> ... </samp> Sample
<kbd> ... </kbd> Keyboard
<var> ... </var> Variable
<cite> ... </cite> Citare cu URL
<dfn> ... </dfn> Definiţie
<acronym> ... </acronym> Acronim
<abbr> ... </abbr> Abreviere
<address> ... </address> Adresă
<blockquote> ... </blockquote> Citare lungă
<q> ... </q> Citare scurtă
Tabelul 3 <del> ... </del> Text suprimat
<ins> ... </ins> Text inserat
Remarcă. Nu puteţi crea documentele XHTML convingătoare fără a apela la CSS
(Cascading Style Sheets) – metoda „nouă” recomandată oficial de Consorţiul W3.
Principalul argument în utilizarea CSS-urilor îl reprezintă posibilitatea separării datelor
în tag-uri de formatare (vezi Conversaţia 6).

(italice)
Iată cum bolduim în XHTML prima frază din pagină „Bine aţi venit” şi
cum afişăm cu italice cea de-a doua frază din pagină „Felicitări pentru
răbdarea de a ne fi descoperit”, pornind de la documentul HTML
87
index.html creat anterior, pe care apoi îl convertim în XHTML cu
programul utilitar HTML-TIDY.
Figura 3.53
Inseraţi codul XHTML care afişează icon-ul de conformitate .

figura 3.54.
Figura 3.54
88
Baraţi sau subliniaţi un text
În XHTML, renunţaţi la utilizarea tag-urilor:
9 <s> şi <strike> - pentru bararea şirurilor de caractere;

9 <u> - pentru subliniere.
Măriţi sau micşoraţi un text

Iată cum măriţi în XHTML dimensiunea fontului pentru ultimul cuvânt
(venit) din prima frază, respectiv micşoraţi dimensiunea fontului pentru
cea de-a doua frază, pornind de la documentul HTML index.html creat
anterior, pe care apoi îl convertim în XHTML cu programul utilitar HTML-
TIDY.
Figura 3.55

89
figura 3.56.
Figura 3.56
Utilizaţi fontul cu pas fix

Iată cum aplicăm în XHTML formatul fizic <tt> primei fraze din pagină:
„Bine aţi venit!”, pornind de la documentul HTML lumina.html creat
TIDY.
Figura 3.57
90

figura 3.58.
Figura 5.58
Marcaţi definiţiile
Iată cum aplicăm formatul logic <dfn> pentru a marca în XHTML
definiţia paragrafului (unitate de text care conţine una sau mai multe
linii), pornind de la documentul HTML paragraf.html creat anterior, pe
care apoi îl convertim în XHTML cu programul utilitar HTML-TIDY.
Figura 3.59
91

figura 3.60.
Figura 3.60
Semnalaţi citatele
Iată cum aplicăm formatul logic <cite> pentru a defini în XHTML citatul
„Patria este norodul, nu tagma jefuitorilor” a spus Tudor Vladimirescu,
pornind de la documentul HTML tudor.html creat anterior, pe care apoi îl
convertim cu programul HTML-TIDY.
Figura 3.61
92

figura 3.62.
Figura 3.62
Indicaţi comenzi, coduri de program

Iată cum aplicăm formatul logic <code> pentru a marca într-un text
XHTML prezenţa cunoscutelor comenzi COPY, PASTE (Microsoft Office),
pornind de la documentul HTML copy_paste.html creat anterior, pe care
apoi îl convertim cu programul utilitar HTML-TIDY.
Figura 3.63
93
figura 3.64.
Figura 3.64
HTML Scrieţi un text cu exponent sau cu indice

Nu puţine sunt textele (formule, ecuaţii matematice etc.) care utilizează
indici sau exponenţi.
Iată cum scriem în HTML două expresii ... ciudate:
a) LUMINABLÂNDA2=LUMINABLÂNDA*LUMINABLÂNDA;
b) LUMINABLÂNDA12= LUMINABLÂNDA1* LUMINABLÂNDA1.
1. Plasaţi exponentul primei expresii între tag-urile <SUP> şi

</SUP> (figura 3.65).
Figura 3.65
94
2. Plasaţi indicele celei de-a doua expresii între tag-urile <SUB> şi
</SUB> (figura 3.66).
Figura 3.66
Figura 3.67
95
Remarci:
9 Tag-ul <SUB> este utilizat în documentele HTML pentru a specifica un text pe
care browser-ul îl va interpreta ca pe un indice (subscript), utilizând un font
mai mic (comparativ cu cel normal). Tag-ul <SUB> nu permite atribute.
9 Tag-ul <SUP> este utilizat în documentele HTML pentru a specifica un text pe
care browser-ul îl va afişa ca pe un exponent (superscript), cu un font mai mic
(comparativ cu textul normal). Tag-ul <SUP> nu permite atribute.
Aplicaţie
Scrieţi în HTML următoarele texte:
a) Formula apei este: H2O;
mv 2
b) Formula energiei cinetice este: Ec = .
2
XHTML Scrieţi un text cu exponent sau cu indice

Pentru a scrie în XHTML un text cu exponent sau cu indice utilizaţi
formatul fizic <sup> respectiv <sub>.
Iată cum aplicăm formatul fizic <sup> (superscript, exponent) şi <sub>

(subscript, indice) pentru a scrie în XHTML două expresii ... ciudate
(a, b), pornind de la documentul HTML lumina2.html creat anterior, pe
care apoi îl convertim cu programul utilitar HTML-TIDY:
a) LUMINABLÂNDA2=LUMINABLÂNDA*LUMINABLÂNDA;
b) LUMINABLÂNDA12= LUMINABLÂNDA1* LUMINABLÂNDA1.

96
Figura 3.68

figura 3.69.
Figura 3.69
Remarcă. Dacă doriţi să scrieţi ecuaţii, expresii matematice complicate trebuie să fiţi mai
creativi! Există produse comerciale disponibile pe care le puteţi utiliza pentru scrierea
ecuaţiilor şi expresiilor matematice. Puteţi vedea lista acestora pe site-ul Consorţiului
W3 (www.w3.org/Math).
97
Aplicaţie
Scrieţi în XHTML: a3 şi ¾ utilizând entităţile ³ respectiv ¾.
HTML Definiţi tipul de font

Puteţi schimba tipul de font pentru un cuvânt, pentru o frază (porţiune
de text) sau pentru întreg textul din pagina Web cu singura observaţie
că metodele diferă puţin între ele.
Definiţi tipul de font pentru tot textul din pagină

Iată cum definiţi tipul de font pentru textul integral al paginii Web.
1. Tastaţi <BASEFONT imediat după tag–ul <BODY> (figura 3.70).
Figura 3.70
2. Introduceţi în continuare face="?,?"> înlocuind semnele de

întrebare (?,?) prin numele fonturilor pe care doriţi să le utilizaţi
(figura 3.71).
Remarcă: Va trebui să indicaţi mai multe fonturi pentru cazul în care primul nu va fi
recunoscut de browser. Încercaţi: Arial, Times New Roman sau Courier New, Courier,
Mono. Se utilizează ghilimelele atunci când numele fontului este compus din mai multe
cuvinte. Lipsa ghilimelelor determină browser–ul să interpreteze lista de cuvinte până
la primul spaţiu. Dacă nici unul din fonturi nu este disponibil, atunci se utilizează fontul
implicit.
98
Figura 3.71
3. Introduceţi tag–ul pereche </BASEFONT> înaintea tag–ului

</BODY>.
Figura 3.72

99
.
Figura 3.73
Remarcă. În browser (Internet Explorer) textul se afişează într-unul din fonturile găsite.
Definiţi tipul de font pentru un cuvânt sau o frază

Puteţi schimba în cadrul exemplului nostru tipul de font pentru prima
sau a doua frază sau orice cuvânt dorit.
Iată cum definiţi pentru ultima frază fontul Barmeno sau Courier în locul
fontului Arial sau Times New Roman folosit iniţial.
1. Tastaţi <FONT înaintea celei de-a doua fraze.
Figura 3.74
100
2. Introduceţi, în continuare face="?,?" înlocuind semnele de
întrebare (?) prin numele fonturilor pe care doriţi să le utilizaţi
(de exemplu, Barmeno sau Courier), figura 3.75.
Figura 3.75
3. Introduceţi tag-ul pereche </FONT> la finele frazei

(cuvântului), figura 3.76.
Figura 3.76
101
Figura 3.77
HTML Definiţi dimensiunea fontului

Puteţi schimba dimensiunea fontului pentru tot textul din pagină sau
numai pentru un cuvânt sau o frază, metodele fiind puţin diferite.
Definiţi dimensiunea fontului pentru tot textul din pagină

Iată cum definiţi dimensiunea fontului pentru tot textul din pagină.
1. Tastaţi <BASEFONT imediat după tag-ul <BODY> (figura 3.78).

102
Figura 3.78
2. Introduceţi, în continuare size="?"> înlocuind semnul de

întrebare (?) prin dimensiunea fontului pe care doriţi s-o utilizaţi
(4, în exemplul nostru), figura 3.79.
Figura 3.79
103
3. Introduceţi tag-ul pereche </BASEFONT> înaintea tag-ului
</BODY>, figura 3.80.
Figura 3.80
Remarci:
9 Atributul size defineşte mărimea (dimensiunea) fontului.
9 Dimensiunea fonturilor HTML variază de la 1 la 7, în ordine crescătoare, 1
fiind cel mai mic, iar 7 cel mai mare.
9 Dimensiunea implicită a fontului este 3.
9 Dimensiunea fontului poate fi modificată utilizând valori absolute şi relative.
9 Modificările relative nu pot reduce fontul sub size=1 sau peste size=7.
Figura 3.81
104
Remarcă. Nu uitaţi că valorile pentru dimensiunea fontului nu sunt absolute; ele depind
de cele definite în browser-ul vizitatorului.
Definiţi dimensiunea fontului pentru un cuvânt sau o frază

Iată cum definiţi un font cu mărimea de 7 pentru fraza a doua din textul
paginii.
1. Tastaţi <FONT înaintea celei de-a doua fraze (figura 3.82).
Figura 3.82
2. Introduceţi, în continuare size="?"> înlocuind semnul de

întrebare (?) prin dimensiunea fontului pe care doriţi s-o utilizaţi
(7, în exemplul nostru), figura 3.83.
105
Figura 3.83
3. Introduceţi tag-ul pereche </FONT> la sfârşitul frazei

(cuvântului), figura 3.84.
Figura 3.84

106
6. Vizualizaţi pagina Web într-un navigator, figura 3.85.
Figura 3.85
HTML Definiţi culorile

Trebuie să recunoaştem că este o mare plăcere pentru fiecare dintre noi
să ne jucăm cu ... culorile. Sunteţi sensibil la armonia culorilor, nu-i aşa?
Dacă doriţi să coloraţi tot textul din pagină sau numai un cuvânt, o literă
... este foarte simplu, metoda fiind puţin diferită de la caz la caz.
Coloraţi toate textele paginii

Iată cum coloraţi în albastru toate cele trei fraze ale paginii.
1. Tastaţi <BASEFONT imediat după tag-ul <BODY> (figura 3.86).

107
Figura 3.86
2. Introduceţi în continuare color=”?”> înlocuind semnul întrebării

(?) cu numele culorii (blue), sau tastaţi color="#?>" înlocuind
semnul întrebării (?) prin valoarea hexazecimală a culorii
(0000FF), figura 3.87.
Figura 3.87
3. Introduceţi tag-ul </BASEFONT> înaintea tag–ului final

</BODY> (figura 3.88).
108
Figura 3.88
Figura 3.89
109
Remarci:
9 În navigator, textul apare în culoarea definită (albastru).
9 Pentru a aplica o culoare unui text, background–ului etc. există două metode:
utilizaţi numele culorilor;
utilizaţi valorile RGB (roşu, verde, albastru în limba română; red,
green, blue în limba engleză).
9 Prin nume pot fi referite 16 culori importante: AQUA (albastru marin), SILVER
(argintiu), BLACK (negru), GREEN (verde), OLIVE (oliv), TEAL (verde închis),
BLUE (albastru), LIME (verde citron), PURPLE (violet), WHITE (alb), FUCHSIA
(violet deschis), MAROON (maro), RED (roşu), YELLOW (galben).
9 Valorile RGB corespund la:
Un număr de trei cifre pentru a defini cantitatea de roşu (R) ;
Un număr de trei cifre pentru a defini cantitatea de verde (G) ;
Un număr de trei cifre pentru a defini cantitatea de albastru (B).
De exemplu, culoarea roşie se defineşte cu valorile: 255,0,0.
În cod HTML, o culoare se defineşte cu #XXXXXX, unde: primele două valorii
X corespund definirii culorii roşie, următoarele două valori X corespund
definirii culorii verde, iar ultimele două culori X corespund definirii culorii
albastru.
În consecinţă, pentru a defini în HTML valoarea RGB a unei culori trebuie să
utilizaţi numere hexazecimale (16 cifre: de la 00 la FF – cifre de la 0 la 9 şi
litere de la A la F pentru a simboliza “cifrele” 10, 11, 12, 13, 14, 15) în locul
numerelor zecimale (2 cifre în loc de 3 cifre pentru fiecare culoare). De
exemplu, culoarea roşie are codul RGB: #FF0000 (FF pentru Red ; 00 pentru
Green şi 00 pentru Blue). Culoarea verde are codul RGB - #00FF00; culoarea
albastră are codul RGB - #0000FF iar culoarea albă are codul RGB - #FFFFFF.
9 Dacă doriţi să coloraţi un text sau întreaga pagină cu o culoare al cărei nume
nu-l cunoaşteţi, va trebui să calculaţi valoarea sa hexazecimală. Vă sugerăm
să utilizaţi aplicaţia Power Point (Format Font …) pentru a extrage RGB – ul
culorii. Folosiţi apoi aplicaţia Calculator (accesoriu Windows) pentru a calcula
valoarea în sistemul hexazecimal. Desigur, puteţi utiliza şi tabelele dedicate
de corespondenţă.
9 Pentru a defini o culoare tuturor textelor din pagină, puteţi utiliza de
asemenea atributul text (<BODY text = nume culoare> sau <BODY text =
“# valoare hexazecimală culoare”>).
Coloraţi un cuvânt sau o frază

Iată cum coloraţii în roşu fraza de copyright din pagină: „© 2003
LUMINA BLÂNDA”.
1. Introduceţi în faţa frazei de copyright <FONT (figura 3.90).

110
Figura 3.90
2. Introduceţi în continuare color=?> înlocuind semnul întrebării

(?) cu numele culorii (red), sau tastaţi color=”#?>” înlocuind
semnul întrebării (?) cu valoarea hexazecimală a culorii
(#FF0000), figura 3.91.
Figura 3.91
111
3. Introduceţi tag–ul final </FONT> la finele frazei (cuvântului),
figura 3.92.
Figura 3.92
Figura 3.93
112
Remarcă. În navigator tot textul apare în culoarea definită (albastru), cu excepţia
textului de copyright căruia i s-a atribuit o altă culoare (roşie).
Aplicaţii
Daţi ordin să defileze un text –„Bine aţi venit!” în partea superioară a

paginii.
Iată cum … ordonaţi ca textul propus, să defileze, de la stânga la dreapta în

partea superioară a paginii.
1. Plasaţi textul respectiv între tag-urile <MARQUEE> şi </MARQUEE>.
Figura 3.94
Remarcă. În mod implicit, textul defilează de la stânga la dreapta. Pentru a modifica

sensul de defilare, introduceţi în tag-ul <MARQUEE atributul directiva=” ?”>, înlocuind
? prin right (defilare de la dreapta la stânga) sau left (defilare de la stânga la dreapta).
3. Inseraţi codul HTML care afişează icon-ul de conformitate .

113
Figura 3.95
Remarci:
9 În navigator, textul defilează nedefinit.
9 Puteţi modifica viteza de defilare, utilizând atributele: scrollamount (viteza în
pixeli) sau scrolldelay (viteza în milisecunde) în tag-ul <MARQUEE>.
Daţi ordin ca textul „Bine aţi venit!” să defileze pe o bandă de culoare
galbenă.
Iată cum colorăm în galben fondul pe care defilează textul propus.
1. În tag-ul <MARQUEE> introduceţi atributul bgcolor=”?” înlocuind ?

prin numele cu numele culorii (yellow) sau introduceţi atributul
bgcolor=”#?” înlocuind semnul întrebării (?) prin valoarea
hexazecimală a culorii galben (figura 3.96).
Figura 3.96

114
.
Figura 3.97
Remarcă. În navigator, textul colorat în albastru defilează pe un fond galben.
Definiţi tipul de font, dimensiunea

XHTML
fontului şi culorile
În limbajul XHTML elementul <font> nu mai este deloc folosit! La fel şi
elementul <basefont>! În locul acestora au apărut foile de stiluri. Veţi
vedea cum atribuim un stil caracterelor de o manieră mult mai ...
„modernă”. În consecinţă, vom renunţa la abordarea celor două subiecte
(<font>, <basefont>) în cadrul acestei secţiuni, din motive evidente.
Remarci:
9 „Corpurile” tag-ului <font> diferă de „corpurile” definite în foile de stiluri.
9 În Conversaţia 6 sunt prezentate atributele font-urilor CSS:
font-family;
font-size;
color;
font-weight;
font-style;
conform metodei „noi” recomandate oficial de consorţiul W3.
115
(X)HTML Temă
1. Care este semnificaţia următoarele entităţi de tip caracter: ©
& < &quot.
2. Care sunt formatele fizice, logice (X)HTML în vigoare?
3. Precizaţi care este codul sursă HTML care a stat la baza creării paginii
Web ilustrată în figura 3.98.
Figura 3.98
4. Precizaţi care este codul sursă XHTML care a stat la baza creării
paginii Web ilustrată în figura 3.99.
Figura 3.99
116
9 http://developer.netscape.com/docs/examples/dynhtml/colorpick/
9 http://www.clubalpin-id.com
9 www.palettman.com
9 http://perso.wanadoo.fr/mf.coulon/mf.coulor/homepage.htm
Conversaţia 4
Creaţi şi formataţi paragrafele cu

HTML 4 şi XHTML
•••••••••••••••••••••••••••••••••••••••••
f HTML 4, XHTML – Creaţi un paragraf
f HTML 4, XHTML – Schimbaţi alinierea unui paragraf
f HTML 4, XHTML – Începeţi o nouă linie
f HTML 4, XHTML – Indentaţi un paragraf
f HTML 4 – Definiţi un spaţiu înaintea unui paragraf
f HTML 4 – Comunicaţi browser-ului să afişeze linii vide, spaţiile
suplimentare etc.
f HTML 4, XHTML – Creaţi un titlu
f HTML 4, XHTML – Creaţi liste. Aplicaţii
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
HTML Creaţi un paragraf

Nu uitaţi că atunci când introduceţi text într-un editor (Notepad) şi
acţionaţi tasta ENTER spaţiul dintre linii nu influenţează aşezarea în
pagină. Faptul că acţionaţi ENTER după fiecare linie nu afectează
maniera în care liniile sunt separate atunci când fişierul HTML se
afişează într-un browser. Salturile de linie sunt create cu ajutorul unor
tag-uri specifice. Fără a utiliza aceste tag-uri, un text se întinde pe o
singură linie, atunci când este afişat într-un browser.
118
În concluzie, într-un fişier HTML trebuie să specificaţi începutul fiecărui
paragraf.
Iată cum structurăm textul din aplicaţia noastră în trei paragrafe:
9 Primul paragraf: "Bine aţi venit! "
9 Al doilea paragraf: "Felicitări pentru răbdarea de a ne fi

descoperit!"
9 Al treilea paragraf: „Dorim să ne cunoaştem şi să rămânem

împreună! LUMINA BLANDA este puternică şi nu doar atât!”
1. Tastaţi <P> la începutul fiecărui paragraf şi </P> la sfârşitul

fiecărui paragraf (figura 4.1).
Figura 4.1
Remarcă: Pentru a crea un non-breaking space (spaţiu neîntrerupt) într-un paragraf,

inseraţi entitatea de tip caracter în locul dorit.
4. Vizualizaţi pagina Web într-un browser.

119
Figura 4.2
Remarci:
9 Tag-ul <P> specifică trecerea la un paragraf nou.
9 Tag-ul </P> nu este obligatoriu.
9 Se recomandă ca toate tag-urile <P> să fie plasate pe linii distincte.
9 Un paragraf nou încalcă orice setare a alinierii din paragraful anterior.
Dacă alinierea nu este specificată se foloseşte setarea prestabilită (la
stânga).
9 Browser-ul separă cele trei paragrafe printr-o linie vidă.
9 Lărgimea paragrafelor depinde de cea a ferestrei browser-ului.
9 Tag-ul <P> garantează vizualizarea întregului text al paragrafelor.
XHTML Creaţi un paragraf

În paginile următoare (pe care vă invităm să le citiţi în ritmul
Dumneavoastră obişnuit) ale acestei secţiuni, termenul HTML este
sinonim cu XHTML! În consecinţă, nu ne rămâne să ne ocupăm decât de
convertirea HTML t XHTML, utilizând fie procedura automată
(programul utilitar HTML – TIDY) fie procedura manuală (programul
utilitar validator) sau ambele. Analizaţi şi decideţi!
120
Iată cum structurăm în trei paragrafe textul aplicaţiei, pornind de la
documentul HTML paragraph.htm pe care apoi îl convertim în XHTML cu
programul utilitar HTML – TIDY.
9 Primul paragraf: "Bine aţi venit! "
9 Al doilea paragraf: "Felicitări pentru răbdarea de a ne fi

descoperit!"
9 Al treilea paragraf: "Dorim să ne cunoaştem şi să rămânem

împreună! LUMINA BLÂNDĂ este puternică şi nu doar atât!"
Figura 4.3

figura 4.4.
121
Figura 4.4
Aplicaţie
Creaţi două linii vide între paragrafele unui document XHTML.
Indicaţie. Adăugaţi secvenţa XHTML:
<p> </p>
<p> </p>
Remarci:
9 Secvenţa XHTML
<p></p>
<p></p>
nu este ceea ce vă trebuie, întrucât navigatorul nu poate interpreta decât un
singur paragraf vid o dată.
9 Cea mai bună soluţie o reprezintă totuşi utilizarea foilor de stiluri (atributele
margin sau padding).
HTML Schimbaţi alinierea unui paragraf

Pentru a asigura o mai buna structurare a textului dumneavoastră,
definiţi poziţia paragrafelor în pagină.
Iată cum centraţi primul paragraf,cum aliniaţi la dreapta , la stânga cel

de-al doilea respectiv al treilea paragraf.
122
1. Introduceţi în tag-ul <P> al paragrafului pe care doriţi să-l
aliniaţi atributul align=’’?” înlocuind semnul întrebării (?) prin
tipul de aliniere dorit: center pentru centrarea unui paragraf,
right pentru alinierea la dreapta, left pentru aliniere la stânga a
paragrafului.
Figura 4.5
Remarci:
9 Tag-ul <P> admite atribute.
9 Pentru centrarea unui paragraf puteţi folosi şi tag-ul <CENTER>.
9 <CENTER> este definit în HTML 4.0 ca un sinonim al tag-ului <DIV
align=”center”>.
9 Evitaţi centrarea paragrafelor lungi întrucât riscaţi să fie citite cu
dificultate.
9 Utilizarea atributului align în tag-ul <P> reprezintă cel mai bun mod
de aliniere a unui paragraf.
9 Utilizaţi <P align=”justify”> pentru alinierea ambelor margini ale unui
paragraf.

123
Figura 4.6
Remarcă: Navigatorul aliniază paragrafele în mod diferit.
XHTML Schimbaţi alinierea unui paragraf

Iată cum centraţi primul paragraf al aplicaţiei, cum aliniaţi la dreapta cel
de-al doilea paragraf, cum aliniaţi la stânga cel de-al treilea paragraf,
pornind de la documentul HTML paragraph.htm creat, pe care apoi îl
convertim în XHTML cu programul utilitar HTML - TIDY.

124
Figura 4.7

figura 4.8.
Figura 4.8
125
Text-align şi align
Atributul HTML align pe care l-am folosit până în prezent (pentru a nu vă
… zăpăci!) este complet depăşit! În XHTML utilizaţi mai degrabă (în
tag-ul <p>) style=”text-align:center” în loc de align=”center”. Procedaţi
la fel şi pentru celelalte valori ale atributului align: left, right, justify.
Iată cum centraţi primul paragraf al aplicaţiei, cum aliniaţi la dreapta cel
de-al doilea paragraf, cum aliniaţi la stânga cel de-al treilea paragraf
utilizând atributul style.
1. Introduceţi în tag-ul de început <p>, atributul style cu valoarea

text-align: center (figura 4.9).
Figura 4.9
2. Introduceţi <p style=”text-align:right”> (figura 4.10).
Figura 4.10
126
3. Introduceţi linia de cod <p style=”text-align:left”> (figura
4.11).
Figura 4.11
5. Inseraţi codul XHTML care afişează icon-ul de conformitate
6. Vizualizaţi pagina Web într-un browser (figura 4.12).
Figura 4.12
127
Remarci:
9 Atributul style permite adăugarea instrucţiunilor de stil CSS tag-urilor
HTML. Este forma cea mai simplă a extensiei HTML CSS (foi de stiluri
în cascadă).
9 În XHTML definiţi alinierea cu ajutorul atributului CSS text-align şi nu
utilizaţi atributul HTML align.
9 În XHTML tag-urile şi atributele trebuie scrise cu minuscule. Valorile
se vor plasa între ghilimele.
Aplicaţie
Vizualizaţi într-un browser următorul document XHTML (figura 4.13).
Figura 4.13
În figura 4.14 este ilustrat rezultatul pe care trebuie să-l obţineţi.

128
Figura 4.14
Remarci:
9 Pentru a manipula blocuri mari de date, descompuneţi-le în secţiuni cu
ajutorul tag-urilor <div> </div>.
9 Conţinutul paginii este afişat centrat, cu fontul Verdana:
<div style=”font-family:Verdana, Arial; color:red; text-align:center”>
Atunci când fontul Verdana nu este disponibil, navigatorul îl înlocuieşte cu
Arial.
9 Paragrafele se afişează cu 8, 10 respectiv 12 puncte.
<p style=”font-size:8 pt”>
9 Atributul CSS font-size semnifică dimensiunea fontului.
9 Atributul CSS color precizează culoarea fontului.
HTML Începeţi o nouă linie

Aşa cum într-un fişier HTML trebuie să specificaţi începutul fiecărui
paragraf, tot aşa cum trebuie să specificaţi şi începutul fiecărei noi linii.
Iată cum forţaţi trecerea la un rând nou a frazei „LUMINA BLÂNDĂ este
puternică şi nu doar atât!” din cel de-al treilea paragraf al paginii.
1. Introduceţi tag-ul <BR> la începutul liniei menţionate.

129
Figura 4.15
Remarci:
9 Ca orice tag HTML, <BR> poate apărea oriunde în text.
9 <BR> forţează trecerea la o nouă linie în cadrul paragrafului curent,
dar nu începe un nou paragraf.
9 <BR> şi <br>, <bR> şi <Br> reprezintă acelaşi lucru.
Figura 4.16
Remarcă: Browser-ul afişează fraza menţionată pe o nouă linie.

130
XHTML Începeţi o linie nouă

Pentru a insera un salt de linie în XHTML utilizaţi tag-ul vid (fără
conţinut) <br /> (break).
Remarcă. Tag-ul <br/> nu înglobează date (nu are conţinut) precum <p> </p>. El
indică amplasarea saltului de linie, ceea ce explică de ce se termină cu o bară oblică
precedată , atenţie (!), de un spaţiu.
Iată cum forţaţi trecerea la o nouă linie a frazei „LUMINA BLÂNDĂ este
puternică şi nu doar atât” din cel de-al treilea paragraf al paginii,
pornind de la documentul HTML br.html creat, pe care apoi îl convertim
în XHTML cu programul utilitar HTML-TIDY.
Figura 4.17

figura 4.18.
131
Figura 4.18
HTML Indentaţi un paragraf

Pentru a mări lizibilitatea textului, indentaţi, după caz paragrafele.
Iată cum indentăm cel de-al doilea paragraf al textului „Felicitări pentru
răbdarea de a ne fi descoperit!”.
1. Plasaţi paragraful menţionat între tag-urile <BLOCKQUOTE> şi

</BLOCKQUOTE> (figura 4.19).
Figura 4.19
132
Figura 4.20
Remarci:
9 Navigatorul afişează decalat cel de-al doilea paragraf.
Nu toate navigatoarele tratează în acelaşi mod <BLOCKQUOTE>, în special din
punct de vedere al stilului caracterelor (italice/normale).
XHTML Indentaţi un paragraf

Pentru a indenta un paragraf în XHTML, aplicaţi formatul logic
<blockquote> … </blockquote>.
Iată cum indentăm cel de-al doilea paragraf „Felicitări pentru răbdarea
de a ne fi descoperit” pornind de la documentul HTML block.html creat,
pe care apoi îl convertim în XHTML cu programul utilitar HTML-TIDY.

133
Figura 4.21

figura 4.22.
Figura 4.22
HTML Definiţi un spaţiu înaintea unui paragraf

134
Puteţi stabili singuri spaţiul între paragrafele paginii dumneavoastră cu
scopul de a mări lizibilitatea textului.
Iată cum procedaţi pentru a lăsa un spaţiu de 25 de pixeli între

paragrafele aplicaţiei noastre.
1. Tastaţi <SPACER la începutul primului paragraf (figura 4.23).
Figura 4.23
2. Tastaţi, în continuare atributul type=”vertical” (figura 4.24).
Figura 4.24
3. Tastaţi în continuare size =”?”> înlocuind semnul întrebării (?)

prin mărimea în pixeli a indentării (figura 4.25).
135
Figura 4.25
6. Vizualizaţi pagina Web în Netscape Communicator (figura 4.26).
Figura 4.26
Remarci:
9 Numai Netscape Communicator recunoaşte tag-ul <SPACER>.
136
9 Pentru a defini un spaţiu înaintea unui paragraf cu Internet Explorer utilizaţi
foile de stiluri.
Comunicaţi browser-ului să afişeze liniile

HTML
vide, spaţiile suplimentare etc.
După cum aţi putut constata, browser-ele Web ignoră în general liniile
vide şi spaţiile suplimentare dintr-un text. Iată cum remediaţi acest
inconvenient.
Etapele următoare explică procedura prin care între cuvintele ce aparţin

primei fraze din pagină (Bine aţi venit!) lăsăm opt spaţii.
1. Plasaţi textul (cu opt spaţii între cuvinte) între tag-urile <PRE>
şi </PRE> (figura 4.27).
Figura 4.27

137
Figura 4.28
Remarci:
9 În primele versiuni ale HTML-ului, webmasterii utilizau tag-ul <PRE> pentru
simularea coloanelor unui tabel.
9 Tag-ul <PRE> păstrează formatarea originală a documentului.
Tag-ul <PRE> admite atribute (WIDTH defineşte lăţimea textului formatat).
HTML Creaţi un titlu

În HTML antet-urile au fost creat pentru a indica vizual, într-un
document de mari dimensiuni, titlurile – de la cele mai importante la
cele mai puţin importante. Totuşi, nu folosiţi mai mult de trei nivele pe
pagină.
Iată cum punem în evidenţă şase nivele de titlu pentru paragraful

centrat: „Bine aţi venit!”.
1. Plasaţi textul între tag-urile <H?> şi </H?> înlocuind semnul de

întrebare (?) prin valoarea (1-6) nivelului de titlu (figura 4.29).
138
Figura 4.29
Remarci:
9 Puteţi utiliza cel mult 6 nivele de titlu: <H1>, <H2>, <H3>, <H4>,
<H5>, <H6>.
9 Utilizaţi <H1>, <H2>, <H3> pentru titluri şi paragrafe.
9 Utilizaţi <H4> pentru textul principal.
9 Utilizaţi <H5> şi <H6> pentru adresă, copyright etc.
9 Dimensiunea cea mai mică a titlurilor se obţine cu <H6>.
9 Dimensiunea cea mai mare a titlurilor se obţine cu <H1>.
9 Pentru alinierea titlurilor, introduceţi în tag-ul <H> atributul align=”?”,
înlocuind semnul întrebării (?) cu una din valorile: right, left, justify,
center, care nu mai necesită comentarii.

139
Figura 4.30
Remarcă. Navigatorul afişează centrat titlurile cu nivelul indicat (1-6).
XHTML Creaţi un titlu

XHTML recunoaşte şase nivele de titluri, identificate prin tag-urile <h1>,
primul nivel </h1> la <h6>, al şaselea nivel </h6>.
Iată cum punem în evidenţă şase nivele de titlu pentru paragraful

centrat „Bine aţi venit!”, pornind de la documentul HTML h.html creat,
pe care apoi îl convertim în XHTML cu programul utilitar HTML TIDY.

140
Figura 4.31
Remarcă. În loc de align=”center” (atribut HTML) XHTML-ul utilizează style=”text-

align:center” (vezi tag-urile <h1>…<h6>).

figura 4.32.
141
Figura 4.32
HTML Creaţi liste. Aplicaţii

Folosiţi (X)HTML pentru a crea următoarele tipuri de liste:
9 liste cu simboluri (liste neordonate);
9 liste numerotate (liste ordonate);
9 liste de definiţii.
Creaţi o listă cu simboluri

Listele HTML cu simboluri (liste neordonate) conţin elemente (item-uri)
precedate de un marcator (punct negru).
Iată cum creăm o listă cu simboluri pentru serviciile oferite de firma

LUMINA BLÂNDĂ: turism, training, service PC-uri.
142
1. Introduceţi tag-ul <UL> la începutul listei (figura 4.33).
Figura 4.33
2. Introduceţi tag-ul <LI> înaintea fiecărui element al listei (figura

4.34).
Figura 4.34
143
3. Introduceţi tag-ul </UL> la finele listei (figura 4.35).
Figura 4.35
Remarci:
9 <UL> creează o listă cu simboluri.
9 <LI> defineşte un articol din listă.
9 </LI> nu este obligatoriu.
9 <UL> admite atributul TYPE, care stabileşte stilul marcajului din listă.
9 <UL> trebuie să conţină cel puţin un element.
6. Afişaţi pagina Web într-un browser (figura 4.36).
Figura 4.36
144
Remarci:
9 Browser-ul afişează elementele listei cu un bumb în faţă.
9 Dacă doriţii ca elementele să se afişeze diferit faţă de restul textului utilizaţi în
tag-ul <UL> atributul compact.
Aplicaţie
Marcaţi elementele listei neordonate create anterior cu un pătrat (square).
Iată cum schimbaţi stilul marcajului.
1. Introduceţi în tag-ul <UL> atributul type=”?” înlocuind semnul

întrebării (?) cu una din valorile: circle pentru un mic cerc negru, disc
pentru un mic cerc alb, square pentru un mic pătrat negru.
Figura 4.37
4. Afişaţi pagina Web într-un browser.

145
Figura 4.38
Remarcă. Browser-ul afişează lista cu stilul specificat (pătrat).
Creaţi o listă numerotată

Listele HTML numerotate (liste ordonate) conţin elemente (item-uri)
care se afişează într-o ordine precisă.
Iată cum creăm o listă numerotată (1, 2, 3 etc.) pentru serviciile oferite
de firma LUMINA BLÂNDĂ: turism, training, service PC-uri.
1. Introduceţi tag-ul <OL> la începutul listei (figura 4.39).
Figura 4.39
146
2. Introduceţi tag-ul <LI> înaintea fiecărui element al listei (figura
4.40).
Figura 4.40
3. Introduceţi tag-ul </OL> la finele listei (figura 4.41).
Figura 4.41
147
Remarci:
9 <OL> creează o listă numerotată.
9 <LI> depinde de tipul listei: cu simboluri/numerotată.
9 <OL> admite atribute (type şi start).
9 </LI> nu este obligatoriu.
9 Browser-ul plasează în mod automat în faţa fiecărui element al listei un număr
de ordine într-o secvenţă crescătoare. Lista numerotată începe cu 1.
9 În cadrul corpului unei liste sunt permise şi tag-urile <P> şi <BR>.
Figura 4.42
Remarci:
9 Browser-ul afişează elementele listei cu 1, 2, 3, în faţă.
9 Dacă doriţi ca elemente listei să se afişeze diferit faţă de restul textului,
utilizaţi în tag-ul <OL> atributul compact.
Aplicaţii
Schimbaţi stilul de numerotare din lista ordonată creată anterior cu o

numerotare cifre romane minuscule.
1. Introduceţi în tag-ul <OL> atributul type=”?” înlocuind semnul

întrebării (?) cu una din valorile: i pentru o numerotare cu cifre
romane minuscule (cazul nostru), I pentru o numerotare cu cifre
148
romane majuscule, 1 pentru o numerotare cu cifre arabe (figura
4.43).
Figura 4.43
Figura 4.44
149
Schimbaţi numărul de ordine de start (1) cu 7 în lista numerotată anterior.
1. Introduceţi în tag-ul <OL> atributul start=”?” înlocuind semnul de

întrebare (?) cu numărul de start dorit (7, în aplicaţia noastră).
Figura 4.45
Figura 4.46
Remarcă. În navigator lista numerotată începe cu 7.

150
Schimbaţi stilul de numerotare din lista ordonată creată anterior astfel încât
fiecare item să fie marcat printr-o literă majusculă: A, B, C etc.
1. Introduceţi în tag-ul <OL> atributul type=”?” înlocuind semnul de

întrebare (?) prin tipul de literă dorit: A pentru majuscule sau a pentru
minuscule.
Figura 4.47
.
Figura 4.48
Remarcă. În navigator fiecare element al listei este precedat de o majusculă (A,B,C).

151
Creaţi o listă de definiţii
O listă de definiţii conţine unul sau mai mulţi termeni de definit cât şi
definiţia acestora. Altfel spus, lista de definiţii este un glosar de termeni.
Iată cum creăm o listă de definiţii (Glosar de termeni) pentru o parte din
termenii folosiţi în acest capitol: listă cu simboluri şi listă numerotată.
1. Introduceţi la începutul listei tag-ul <DL> (figura 4.49).
Figura 4.49
2. Introduceţi înaintea cuvintelor de definit (listă cu simboluri, listă

numerotată) tag-ul <DT> (figura 4.50).
Figura 4.50
152
3. Introduceţi înaintea definiţiilor tag-ul <DD> (figura 4.51).
Figura 4.51
4. Introduceţi tag-ul </DL> la finele listei (figura 4.52).
Figura 4.52
153
Remarci:
9 <DL> creează o listă de definiţii.
9 <DL> trebuie să conţină cel puţin un element <DT> sau <DD> în orice
ordine.
9 <DD> poate conţine tag-uri la nivel de bloc, ca de exemplu tag-ul <P>.
.
Figura 4.53
Remarcă. Navigatorul afişează lista de definiţii (indentată!).
Creaţi liste imbricate

Listele imbricate sau listele nested (cuib) permit dezvoltarea unui
element din lista principală în subliste ş.a.m.d.
Iată cum creăm liste imbricate care conţin structura iniţială a cărţii pe
care o lecturaţi: Partea întâi cu capitolele 1 şi 2; Partea a doua cu
capitolele 3, 4 şi 5; Partea a treia cu capitolele 6, 7, 8.
154
1. Introduceţi înaintea listei principale tag-ul <OL type=”?”>
înlocuind semnul de întrebare (?) prin tipul de numerotare dorit
(I, II, III), figura 4.54.
Figura 4.54
2. Introduceţi <LI> înaintea fiecărui item al listei principale (figura

4.55).
Figura 4.55
155
3. Introduceţi la finele listei principale tag-ul </OL> (figura 4.56).
Figura 4.56
.
Figura 4.57
156
Remarcă. În navigator se afişează lista principală.
7. Sub fiecare element al listei principale introduceţi tag-ul <OL

type=”?”> înlocuind semnul întrebării (?) cu tipul de
numerotare (A, B, C), figura 4.58.
Figura 4.58
8. Introduceţi tag-ul <LI> înaintea tuturor item-urilor din subliste

(figura 4.59).
157
Figura 4.59
9. Introduceţi la finele sublistelor tag-ul </OL> (figura 4.60).

158
Figura 4.60

159
Figura 4.61
Remarcă. Browser-ul afişează listele imbricate (indentate!) în cadrul listelor principale.
XHTML Creaţi liste. Aplicaţii

XHTML furnizează tag-uri, uşor de utilizat pentru crearea listelor. Pe de
altă parte, foile de stiluri CSS permit crearea listelor personalizate şi a
listelor precedate de simboluri grafice.
Creaţi o listă cu simboluri

În XHTML o listă neordonată sau cu simboluri (nu simboale!) este
delimitată de tag-urile <ul> </ul> (ul pentru unordered list). Articolele
listei cu simboluri sunt delimitate prin tag-urile <li> </li> (li pentru list
item). Pentru a crea documente conforme cu XHTML şi pentru a aplica
160
instrucţiuni de stil listei cu simboluri, este obligatoriu să utilizăm tag-ul
de închidere </li> care în HTML este facultativ.
Iată cum creăm în XHTML o listă cu simboluri pentru serviciile oferite de

firma LUMINA BLÂNDĂ: turism, trening, service PC-uri pornind de la
documentul HTML ul.html creat, pe care apoi îl convertim în XHTML cu
Figura 4.62

figura 4.63.
161
Figura 4.63
Formataţi listele cu simboluri

Utilizaţi stilurile pentru formatarea listelor cu simboluri. Puteţi defini
proprietăţile în mod diferit, utilizând următoarele atribute:
9 list-style-type;
9 list-style-position;
9 list-style-image;
9 list-style.
Aplicaţie
Utilizaţi stilul list-style-image pentru a înlocui marcajele (dintr-o listă cu

simboluri) cu sigla societăţii LUMINA BLÂNDĂ.
Remarcă. Veţi înţelege mai bine această aplicaţie după ce veţi parcurge Conversaţia
referitoare la foile de stiluri (Conversaţia 6). Succes!
În figura 4.64 se prezintă documentul XHTML în care au fost evidenţiate liniile
al căror conţinut îl vom explica puţin mai târziu.
162
Figura 4.64
În figura 4.65 se prezintă rezultatul vizualizării paginii în Microsoft Internet

Explorer.
163
Figura 4.65
Creaţi o listă numerotată

În XHTML o listă ordonată este delimitată de tag-urile <ol> </ol> (ol
pentru ordered list). Articolele listei cu simboluri sunt delimitate prin
tag-urile <li> </li> (li pentru list item). Pentru a crea documente
conforme cu XHTML şi pentru a aplica instrucţiuni de stil listei
numerotate, este obligatoriu să utilizăm tag-ul de închidere </li>, care
în HTML este facultativ.
Iată cum creăm în XHTML o listă numerotată (1, 2, 3) pentru serviciile

oferite de firma LUMINA BLÂNDĂ: turism, trening, service PC-uri pornind
de la documentul HTML ol.html creat, pe care apoi îl convertim în
XHTML cu programul utilitar HTML-TIDY.
164
Figura 4.66

figura 4.67.
Figura 4.67
165
Formataţi listele cu simboluri
Puteţi folosi foile de stiluri pentru formatarea listelor ordonate. CSS nu
face deosebire între listele numerotate şi listele cu simboluri. Puteţi
defini proprietăţile în mod diferit, utilizând atributele: list-style, list-style-
type, list-style-position, list-style-image.
Aplicaţie
Utilizaţi foile de stiluri pentru a crea o listă numerotată (ordonată) cu cifre

romane mici (lower-roman).
Remarcă. Veţi înţelege mai bine această aplicaţie după ce veţi parcurge Conversaţia 6
referitoare la foile de stiluri.
În figura 4.68 se prezintă documentul XHTML în care au fost evidenţiate liniile
al căror conţinut îl vom explica puţin mai târziu.
Figura 4.68
166
Rezultatul vizualizării documentului în Microsoft Internet Explorer este prezentat
în figura 4.69.
Figura 4.69
Creaţi o listă de definiţii

În XHTML o listă de definiţii este delimitată de tag-urile <dl> </dl>.
Inseraţi fiecare cuvânt cheie (cuvânt de definit) între tag-urile <dt>
</dt> iar descrierea lor între tag-urilor <dd> </dd>. Indentaţi
conţinutul listei pentru a mări gradul de lizibilitate (figura 4.70).
…
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
…
Figura 4.70 </dl>
…
Iată cum creăm în XHTML o listă cu definiţii pentru o parte din termenii
folosiţi în acest capitol: listă cu simboluri şi listă numerotată, pornind de
la documentul HTML dl.html creat, pe care apoi îl convertim în XHTML
cu programul utilitar HTML-TIDY.

167
Figura 4.71

figura 4.72.
Figura 4.72
168
Remarci:
9 Utilizaţi stiluri pentru formatarea listelor de definiţii. Creaţi stiluri
pentru elementele <dl> <dd> şi <dt>.
9 Creaţi un stil pentru elementul <dd> utilizând atributele margin-top şi
margin-bottom.
9 Utilizaţi pseudoelementele CSS definite first-letter şi first-line care pun
în evidenţă prima literă şi prima linie a unui bloc de elemente:
p:first-letter{…}
p:first-line{…}
Creaţi liste imbricate

O singură listă nu produce întotdeauna rezultatul scontat. În XHTML
puteţi crea liste pe mai multe nivele, imbricând două liste, cea de-a doua
listă în prima (figura 4.73) ş.a.m.d.
<ol>
<li></li>
…
<ol>
<li></li>
…
Figura 4.73 </ol>
</ol>
Iată cum creăm în XHTML liste imbricate care conţin structura iniţială a
cărţii pe care o lecturaţi: Partea întâi cu capitolele 1 şi 2; Partea a doua
cu capitolele 3, 4 şi 5; Partea a treia cu capitolele 6, 7, 8, pornind de la
documentul HTML li.html creat, pe care apoi îl convertim în XHTML cu

169
Figura 4.74

figura 4.75.
#_______________________________________________________
__________________________________________________________
__________________________________________________________
__________________________________________________________
170
Figura 4.75
Remarci:
9 Definiţi indentări profesioniste utilizând foile de stiluri.
9 Construiţi clase pentru intrările listelor şi utilizaţi atributul CSS left-margin care
permite definirea într-un mod simplu a indentării spre dreapta.
9 Suprimaţi tag-urile <ul> </ul> ale celui de-al doilea nivel şi atribuirea tipului
(primul nivel). Inseraţi următoarele linii în zona style a header-ului:
li{list-style-type:circle}
li{list-style-type:square; margin-left:lem}
(X)HTML Temă
1. Descrieţi pe scurt procedura (X)HTML pentru crearea paragrafelor.
2. Care este semnificaţia tag-urilor: <h1> … <h6>?
3. Ce tipuri de liste puteţi crea cu (X)HTML?

171
Web din figura 4.76.
Figura 4.76
paginii Web din figura 4.77.
Figura 4.77
9 www.efuse.com
9 www.ebookers.com
9 info.med.yale.edu/caim/manual
Conversaţia 5
Inseraţi şi personalizaţi o linie orizontală

cu HTML 4 şi XHTML
•••••••••••••••••••••••••••••••••••••••••
f HTML 4, XHTML – Inseraţi o linie orizontală
f HTML 4, XHTML – Coloraţi o linie orizontală
f HTML 4, XHTML – Definiţi lungimea şi înălţimea unei linii
f HTML 4, XHTML – Aliniaţi o linie orizontală
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
HTML Inseraţi o linie orizontală

Pentru a deosebi vizual două zone ale unei pagini Web se recomandă
inserarea unei linii orizontale.
Iată cum separăm printr-o linie orizontală, umbrită sau nu primele două
paragrafe ale paginii Web.
1. Introduceţi tag-ul <HR> între cele două paragrafe (figura 5.1).

174
Figura 5.1
Remarcă. Implicit, linia orizontală este puţin umbrită!
2. Introduceţi în tag-ul <HR> atributul noshade pentru a suprima

efectul umbririi (figura 5.2).
Figura 5.2

175
Figura 5.3
Remarcă. Navigatorul afişează o linie orizontală umbrită sau nu în locurile indicate.
XHTML Inseraţi o linie orizontală

Pentru a insera o linie (riglă) orizontală într-un document XHTML, care
se întinde pe spaţiul orizontal disponibil utilizaţi tag-ul vid <hr />.
Remarci:
9 În XHTML <hr> este utilizat fără tag-ul </hr>. Pentru a vă conforma cu noile
norme XML şi XHTML, inseraţi un „/” în tag-ul <hr />.
9 Ca şi în cazul tag-ului <br /> normele XHTML nu prevăd prezenţa unui spaţiu
înainte de bara oblică „/”. Lăsaţi acest spaţiu înainte de bara oblică „/”. Totuşi
lăsaţi acest spaţiu dacă doriţi să asiguraţi compatibilitatea cu normele HTML.
De exemplu, <hr/> nu este compatibil cu nici o versiune HTML. Spaţiul este
interpretat ca un separator. Ştiu, este puţin enervant dar trebuie să vă
obişnuiţi să fiţi meticuloşi!
176
Iată cum separăm printr-o linie orizontală, umbrită sau nu primele două
paragrafe ale paginii Web, pornind de la documentul html lumina4.html
creat anterior, pe care apoi îl convertim în XHTML cu programul utilitar
HTML-TIDY.
Figura 5.4
Remarci:
9 Tag-ul <HR> a fost înlocuit cu <hr />.
9 Tag-ul <HR noshade> a fost înlocuit cu <hr noshade=”noshade” />.
9 În XHTML toate atributele trebuie să aibă valori (Exemplu: noshade se scrie
noshade=”noshade”)

figura 5.5.
177
Figura 5.5
HTML Coloraţi o linie orizontală

În mod implicit, linia orizontală se afişează în gri. Dacă doriţi, puteţi
aplica o culoare liniei orizontale.
Remarci:
9 HTML 4 propune două metode (metoda „veche” şi metoda „nouă”) total
diferite pentru personalizarea (culoare, lungime, grosime) unei linii orizontale.
9 Tag-urile pe care le studiaţi în această conversaţie reprezintă „vechea
metodă”, care în prezent este descurajată oficial de W3C.
9 Foile de stiluri reprezintă „noua” metodă care este încurajată oficial de W3C
(vezi Conversaţia 6).
9 De ce învăţăm o metodă depăşită? Întrucât un număr deloc neglijabil de
utilizatori posedă încă navigatoare Web care nu permit utilizarea foilor de
stiluri.
Iată cum aplicăm o culoare (roşie şi albastră) liniilor orizontale care

separă cele două paragrafe ale paginii, utilizând „vechea” metodă, care
în prezent este descurajată de W3C.
1. Introduceţi în tag-ul <HR> atributul color=”?” înlocuind semnul

întrebării (?) cu valoarea hexazecimală a culorii sau cu numele
culorii (figura 5.6).
178
Figura 5.6
Figura 5.7
179
Remarci:
9 În navigator, liniile sunt colorate în roşu respectiv albastru.
9 Atunci când o linie este colorată, efectul de umbră dispare.
XHTML Coloraţi o linie orizontală

Pentru a colora o linie orizontală în XHTML puteţi utiliza atât metoda
„veche”, care în prezent este descurajată oficial cât şi metoda nouă –
foile de stiluri (vezi Conversaţia 6) încurajată în prezent de W3C pentru
avantajele pe care le oferă.
Iată cum aplicăm o culoare (albastră şi roşu) liniilor orizontale care

separă cele două paragrafe ale paginii, pornind de la documentul HTML
lumina4.htm creat anterior, pe care apoi îl convertim în XHTML cu
programul utilitar HTML-TIDY. Vom utiliza metoda „veche”, care … este
descurajată oficial.
Figura 5.8
180
figura 5.9.
Figura 5.9
Iată cum aplicăm o culoare (albastru şi roşu) liniilor orizontale care

separă cele două paragrafe ale paginii, utilizând „noua” metodă
recomandată oficial de W3C – foile de stiluri.
În figura 5.10 este prezentat documentul XHTML creat manual, în care

s-au definit clasele hr.blue şi hr.red. Documentul a fost validat cu
aplicaţia validator. Pentru afişarea icon-ului de conformitate

s-a inserat codul XHTML.
181
Figura 5.10
Remarcă. Atribuirea celor două stiluri (hr.blue şi hr.red) tag-ului <hr /> schimbă
aspectul liniilor orizontale.

figura 5.11.
Figura 5.11
182
Definiţi lungimea şi înălţimea unei linii
HTML
orizontale
În mod implicit, linia orizontală se afişează pe toată lungimea paginii.
Desigur, dumneavoastră puteţi decide şi altfel!
Iată cum definim în procente (75%) lungimea primei linii orizontale care
separă cele două paragrafe şi în pixeli - lungimea (25) şi înălţimea (10)
celei de-a doua linii orizontale, utilizând metoda „veche”, care este
descurajată de W3C.
1. Introduceţi în tag-ul <HR> atributul width=”?” pentru a defini

lungimea liniei înlocuind semnul întrebării (?) prin dimensiunea
în procente (75) sau în pixeli (figura 5.12).
Figura 5.12
2. Introduceţi în tag-ul <HR> atributul size=”?” pentru a defini

grosimea liniei, înlocuind semnul întrebării (?) cu 10 şi în
continuare, atributul width=”?” pentru a defini lungimea liniei,
înlocuind semnul întrebării (?) cu 25 (figura 5.13).
183
! </P>
Figura 5.13
Figura 5.14
Remarcă. În navigator liniile se afişează cu lungimea şi grosimea specificate.

184
Definiţi lungimea şi înălţimea unei linii
XHTML
orizontale
Pentru a defini lungimea şi înălţimea unei linii orizontale în XHTML puteţi
utiliza atât metoda „veche” care în prezent este descurajată oficial cât şi
metoda „nouă” – foile de stiluri (vezi Conversaţia 6) încurajată în prezent
de W3C pentru avantajele pe care le oferă.
separă cele două paragrafe şi în pixeli – lungimea (25) şi înălţimea (10)
celei de-a doua linii orizontale, pornind de la documentul HTML
lumina4.htm creat anterior, pe care apoi îl convertim în XHTML cu
programul utilitar HTML-TIDY. Vom utiliza metoda „veche”, care … este
descurajată oficial!
Figura 5.15
185
figura 5.16.
Figura 5.16
separă cele două paragrafe şi în pixeli – lungimea (25) şi înălţimea (10)
celei de-a doua linii orizontale, utilizând „noua metodă” recomandată
oficial de W3C – foile de stiluri.

s-au definit clasele hr.blue1 şi hr.red1. Documentul a fost validat cu

s-a inserat codul XHTML corespunzător.
186
Figura 5.17

figura 5.18.
Figura 5.18
187
HTML Aliniaţi o linie orizontală

Dacă linia orizontală ocupă întreaga pagină, atunci nu mai este cazul să
o aliniem. În caz contrar, dacă linia este mai mică este indispensabil să
indicăm modul de aliniere (stânga, dreapta, centrat) al acesteia.
Iată cum aliniem, la dreapta, linia orizontală care separă primele două
paragrafe ale paginii şi cum centrăm pe o lungime de 75 de pixeli linia
care separă cel de-al doilea paragraf de restul textului, utilizând metoda
„veche”, care în prezent este descurajată oficial de W3C.
1. Introduceţi în tag-ul <HR> atributul align=”?” înlocuind semnul

întrebării (?) cu una din valorile: right (cazul nostru), left,
center (figura 5.19).
Figura 5.19
Remarci:
9 În (X)HTML atributul align face parte din atributele indezirabile.
9 Tag-urile pe care le studiaţi în această conversaţie reprezintă „vechea
metodă”, care în prezent este descurajată oficial de W3C. Foile de stiluri
reprezintă „noua” metodă care este încurajată oficial de W3C (vezi
Conversaţia 6).
9 De ce învăţăm o metodă depăşită? Întrucât un număr deloc neglijabil de
utilizatori posedă încă navigatoare Web care nu permit utilizarea foilor de
stiluri.
188
2. Introduceţi în tag-ul <HR> atributul align=”center” pentru a
centra cea de-a doua linie orizontală (figura 5.20).
!</P>
Figura 5.20
Remarcă. Observaţi diferenţa între width=75% (din lăţimea totală a paginii), atribut al
primului tag <HR> şi width=75, atribut utilizat în cel de-al doilea tag <HR>.
.
Figura 5.21
Remarcă. În navigator, liniile respectă alinierea definită.

189
XHTML Aliniaţi o linie orizontală

Pentru a alinia o linie orizontală în XHTML puteţi utiliza atât metoda
„veche”, care în prezent este descurajată oficial cât şi metoda „nouă” –
foile de stiluri (vezi Conversaţia 6) încurajată în prezent de W3C pentru
avantajele pe care le oferă.
care separă cel de-al doilea paragraf de restul textului, pornind de la
documentul HTML linie1.html creat anterior, pe care apoi îl convertim în
XHTML cu programul utilitar HTML-TIDY. Vom utiliza metoda „veche”
care … este descurajată oficial.
Figura 5.22
190
figura 5.23.
Figura 5.23
care separă cel de-al doilea paragraf de restul textului, utilizând „noua
metodă” recomandată oficial de W3C – foile de stiluri.

s-au definit clasele hr.red2 şi hr.red3. Documentul a fost validat cu

s-a inserat codul XHTML corespunzător.
191
Figura 5.24

figura 5.25.
Figura 5.25
192
(X)HTML Temă
1. Precizaţi care este semnificaţia tag-urilor: <HR> şi <hr />.
2. De ce inserăm într-un document (X)HTML una sau mai multe linii
orizontale?
3. Cum formataţi o linie orizontală într-un document (X)HTML?
Figura 5.26
9 www.virtualfreesites.com/webmaster.html
9 www.123webmaster.com
9 www.builder.com
9 www.newslinx.com
9 www.trainingtools.com
9 www.htmlhelp.com
Conversaţia 6
Creaţi şi utilizaţi foi de stiluri cu

HTML 4 şi XHTML
•••••••••••••••••••••••••••••••••••••••••
f (X)HTML – Foile de stiluri în cascadă CSS1, CSS2, CSS3
f (X)HTML – Creaţi stiluri CSS
f (X)HTML – Categorii de proprietăţi de stiluri
f HTML 4, XHTML – Creaţi şi aplicaţi o foaie de stiluri (incorporate) internă
f HTML 4, XHTML – Creaţi şi aplicaţi o clasă
f HTML 4, XHTML – Incorporaţi o foaie de stiluri într-un document
f HTML, XHTML – Creaţi şi aplicaţi o foaie de stiluri externă
f XHTML – Controlaţi culorile legăturilor (link-urilor) într-un
document
f XHTML – Proprietăţile de bordură ale unei zone
f XHTML – Proprietăţile foilor de stiluri sonore
f XHTML – Proprietăţile de clasificare
f XHTML – Proprietăţile documentelor imprimate
f XHTML – Proprietăţile de poziţionare a unui element
f XHTML – Viitorul foilor de stiluri în XHTML
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
(X)HTML Foile de stiluri în cascadă CSS1, CSS2, CSS3

Utilizarea foilor de stiluri CSS (Cascading Style Sheets, sau foi de stiluri în
cascadă) este cel mai bun mod – sigur, uşor de formatare a documentelor
(X)HTML.
194
Foile de stiluri constituie o etapă capitală către separarea conţinutului real (text,
imagine etc.) de forma de prezentare a unui document. Această separare este
rezolvată în XML ceea ce ne va determina în scurt timp să trecem de la HTML la
XHTML şi apoi, într-o perioadă nu foarte îndelungată, să trecem la XML.
Foile de stiluri vor domina Web-ul? Da, dacă ne gândim că XHTML a înlocuit o
parte din elementele şi atributele de formatare HTML (elementul <font> şi
atributul align, de exemplu) … depăşite cu foile de stiluri.
În afară de controlul ridicat privind vizualizarea documentelor de către vizitatorii

dumneavoastră, foile de stiluri permit şi o gestiune mai uşoară a documentelor
(X)HTML atunci când acestea conţin elemente de formatare.
Când introduceţi un tag de formatare într-o foaie de stiluri, documentul pare

mult mai ordonat! Foile de stiluri reduc de asemenea timpii de creare şi de
mentenanţă a documentelor (X)HTML. În loc de a formata manual paragrafele
de text, de exemplu, veţi modifica simplu definiţia stilului într-un singur loc,
foaia de stiluri, iar ea este aplicată pentru toate paragrafele în documentul
(X)HTML. Fără dezordine, fără stres! Totul este perfect!
În sfârşit, foile de stiluri permit o mare flexibilitate între documentele din

interiorul unui site Web.
Remarci:
9 Foile de stiluri sunt unic disponibile pentru utilizatorii care posedă Internet
Explorer 3 (sau o versiune mai recentă) sau Netscape Navigator 4 (sau o
versiune mai recentă) sau Opera 3 (sau o versiune mai recentă).
9 Ultimele versiuni ale navigatoarelor Internet Explorer, Netscape Navigator şi
Opera recunosc foile de stiluri CSS1 şi câteva elemente CSS2.
Foile de stiluri CSS1 (Cascading Style Sheets Level 1) au apărut în anul 1996
ca o recomandare a Consorţiului W3C (recomandarea a fost revizuită în ianuarie
1999). Caracteristicile (proprietăţile) stilului CSS1 cuprind: fonturi, aliniere,
mărime, culoare, margini, borduri etc.
Remarcă. Recomandarea W3C CSS1 este disponibilă pe site-ul www.W3.org/TR/REC-

CSS1.
Foile de stiluri CSS2 (Cascading Style Sheets Level 2) au apărut în luna mai
1998 ca o recomandare a consorţiului W3C. Această recomandare are la bază
caracteristicile foilor de stiluri CSS1, la care se adaugă noi proprietăţi, după cum
195
urmează: tipuri de media (foi de stiluri sonore), poziţionare (absolută, relativă şi
fixă), fonturi teleşarjabile, stiluri pentru tabele, modele de formatare vizuală,
umbriri de text, stiluri de cursor etc.).
Remarcă. Recomandarea W3C CSS2 este disponibilă pe site-ul www.W3.org/TR/REC-

CSS2.
Foile de stiluri CSS3 (Cascading Style Sheets Level 3) sunt încă în curs de
dezvoltare bazate pe concepţia de module individuale. Modulele existente în
foile de stiluri CSS3 cuprind proprietăţi de accesibilitate mai avansate, un suport
multimedia îmbunătăţit, capacităţi dinamice şi interactive superioare.
Remarcă. Pentru mai multe informaţii privind toate tipurile de foi de stiluri în limbaj XSL
(Extensible Style Sheet Language), vizitaţi site-ul www.W3.org/Style.
(X)HTML Creaţi stiluri CSS

Există mai multe posibilităţi de a pune în practică stilurile CSS:
9 În elementul <STYLE>, care trebuie să figureze în header-ul

documentului (X)HTML. Se aplică numai blocurilor de text pentru care
sunt definite. Metoda, numită şi metoda stilurilor încorporate este cea
mai eficace şi o recomandăm pentru a fi utilizată cât mai mult posibil.
9 În linie (in–line), pentru un element particular al documentului. În

acest caz stilul definit cu atributul style nu se aplică decât local,
elementului precizat. Metoda numită şi stiluri in-line nu trebuie să fie
utilizată decât în caz de necesitate, având în vedere acţiunea sa
limitată, pentru un singur element.
9 Într-un document extern documentului (X)HTML, care va fi salvat cu
extensia .CSS. Acest fişier va conţine toate definiţiile de stil dorite şi
va fi legat la un document (X)HTML corespunzător prin elementul
<LINK> plasat în header-ul documentului. Metoda cunoscută şi sub
numele de stiluri definite în fişiere externe prezintă avantajul că poate
utiliza aceeaşi foaie de stiluri pentru mai multe documente (X)HTML
diferite, fără a fi nevoiţi de a le recopia în fiecare dintre ele.
9 Într-un element <SPAN>, el însuşi inclus într-un alt element.
196
Reguli generale
Înainte de a aprofunda foile de stiluri (dedicate) interne priviţi cu atenţie figura
6.1 care conţine un eşantion de cod XHTML al unei foi de stiluri.
Figura 6.1
Diferite zone ale foii de stiluri au funcţiuni proprii, după cum urmează:
9 Blocul de stil include elementele de stil cu definiţiile (regulile) de stil şi

tag-ul de comentarii (figura 6.2).
Figura 6.2
9 Selectorii sunt elemente (X)HTML. Selectorii definesc tag-ul căruia i se

va aplica stilul dorit. În acest exemplu, litera p – în elementul paragraf
este un selector (figura 6.3).
Figura 6.3
197
9 Declaraţiile sunt proprietăţi ale elementelor (X)HTML (culoarea,
alinierile, font-ul etc.). Declaraţiile sunt alcătuite din două părţi: o
proprietate şi o valoare separate prin punct şi virgulă (figura 6.4).
Combinaţia proprietate/valoare este plasată între acolade ({}).
Figura 6.4
9 Clasele specifică o definiţie suplimentară a stilului asociată cu o anume

apariţie specifică a unui element (X)HTML. Exemplu: paragrafele
<pclass=”red”> utilizează clasa red definită în figura 6.5.
Figura 6.5
9 Putem defini o clasă generică fără a afecta un element anume. De

exemplu, stilul blanc. {background – color: blue; color: white} creează
stilul identificat prin numele de clasă blanc, care defineşte un fond
bleu şi un text alb. Pentru a o aplica unui element <P>, vom scrie: <P
class=”blanc”> Viaţa merge înainte! </P> textul urmând să se afişeze
în alb pe un fond bleu.
9 Putem defini de asemenea o clasă aplicabilă unui element dat, care va

fi utilizată pentru a modifica local un stil general pre-existent. De
198
exemplu, clasa: P.roşu {background – color: green; color: red}
creează un stil particular (fond verde şi text roşu) ce se aplică
paragrafelor cu codul: <P class= ”roşu”> Afară ninge liniştit! </P>.
9 Pentru a defini acelaşi stil pentru mai multe elemente (X)HTML putem
regrupa elementele indicând o singură declaraţie. De exemplu, H1,
H3, H5 {color: yellow;} permite afişarea conţinutului titlurilor de nivel
1, 3 şi 5 în culoare galbenă.
Reguli de prioritate acordate stilurilor

După cum aţi putut constata, există mai multe metode de a specifica
stilurile pentru un document (X)HTML: foi de stiluri externe, stiluri
incorporate şi stiluri in-line. Nu trebuie să vă surprindă faptul că între
aceste trei stiluri pot apărea conflicte. De exemplu, o foaie de stiluri
externă specifică culoarea roşie pentru tot textul documentului, iar stilul
incorporat precizează culoarea bleu pentru paragrafe. Ce face
navigatorul în acest caz? Răspunsul este simplu: aplică regulile de
prioritate, numite şi cascadă. Cele două tipuri de cascadă sunt:
9 Regula de stil cea mai specifică trebuie aplicată. Aceasta

înseamnă că stilul aplicat paragrafelor are prioritate în raport cu
foaia de stiluri externă.
9 Dacă două reguli de stil sunt toate specifice, atunci ultima regulă
are prioritate.
În consecinţă, ordinea de prioritate, de la cel mai jos până la cel mai sus
este:
3. Foaia de stiluri externă;
2. Stilurile incorporate;
1. Stilurile in-line.
199
(X)HTML Categorii de proprietăţi de stiluri

O definiţie de stil sau regulă de stil precizează caracteristicile de
formatare. Puteţi alege oricare din cele opt categorii de proprietăţi de
formatare, pe care le prezentăm în continuare:
1. Proprietăţile fontului de caractere precizează formatarea la nivelul

caracterelor (in-line) precum stilul de caractere. Dacă fonturile pe
care le specificaţi nu există pe maşina utilizatorului, navigatorul va
afişa textul cu un font disponibil. Pentru a fi siguri că unul din
fonturile dumneavoastră preferate vor fi utilizate, selectaţi mai multe
familii de fonturi şi adăugaţi mereu o familie generică de fonturi.
Remarcă. Cele mai utilizate proprietăţi (X)HTML ale fontului de caractere sunt: font,
font-family, font–size, font-style, font-variant, font-weight.
Proprietăţile fontului de caractere sunt explicate în această conversaţie.

2. Proprietăţile de text precizează caracteristicile de afişare pentru text
precum alinierea sau spaţierea caracterelor.
Remarcă. Cele mai utilizate proprietăţi (X)HTML de text sunt: letter–spacing, line–height,
text–align, text–decoration, text–indent, text–transform, vertical–align, word–spacing.
Proprietăţile de text sunt explicate în această conversaţie.
3. Proprietăţile de zonă precizează caracteristicile pentru secţiunile de

text la nivel de paragraf.
Remarcă. Cele mai utilizate proprietăţi (X)HTML de zonă sunt: border, border–color,
border–style, border–width, clear, float, height, margin, margin–bottom, margin–left,
margin–right, margin–top, width.
Proprietăţile de zonă sunt explicate în această conversaţie.
4. Proprietăţile de culoare şi de background precizează culoarea,

culoarea de background şi imaginile la nivel in-line sau bloc.
Remarcă. Cele mai utilizate proprietăţi (X)HTML de culoare şi de background sunt:

background, background–color, background–image, background–repeat, color.
200
Proprietăţile de culoare şi de background sunt explicate în această
conversaţie.
5. Proprietăţile de clasificare precizează caracteristicile de afişare a

listelor şi elementelor (p sau h1) la nivel in-line sau bloc.
Remarcă. Cele mai utilizate proprietăţi (X)HTML de clasificare sunt: display, list–style–
image, list–style–type.
Proprietăţile de clasificare sunt explicate în această conversaţie.
6. Proprietăţile foilor de stiluri sonore controlează prezentarea

documentelor XHTML (numai foile de stiluri CSS2).
Proprietăţile foilor de stiluri sonore sunt explicate în această conversaţie.
7. Proprietăţile foilor de stiluri de imprimare controlează imprimarea

documentelor XHTML (numai foile de stiluri CSS2).
Proprietăţile foilor de stiluri de imprimare sunt explicate în această

conversaţie.
8. Proprietăţile de poziţionare controlează de o manieră precisă plasarea

elementelor ce urmează a fi afişate (numai foile de stiluri CSS2).
Proprietăţile de poziţionare sunt explicate în această conversaţie.
Creaţi şi aplicaţi o foaie de stiluri

HTML
(incorporate) internă
Iată cum creăm o foaie de stiluri (incorporate) internă, care conţine
selectorii H1 şi P cu proprietăţile:
9 H1 {text–align:center; font–size:24pt; color:red}.
9 P {text–align:center; font–size:18pt; color:blue}.
1. Introduceţi tag-ul <STYLE> în interiorul tag-urilor <HEAD> …

</HEAD> (figura 6.6).
201
Figura 6.6
Remarcă. <STYLE type=”text/css”> este elementul care introduce definiţiile stilurilor;

reţineţi utilizarea atributului type, care precizează că este vorba de stiluri CSS.
2. Introduceţi selectorul H1 (figura 6.7).
Figura 6.7
3. Tastaţi în continuare, { pentru a începe definiţia caracteristicilor

stilului (figura 6.8).
Figura 6.8
202
4. Introduceţi în continuare caracteristicile stilului: aliniere,
mărime şi culoare (separate prin punct şi virgulă) cu ajutorul
proprietăţilor: text–align, font–size şi color (figura 6.9).
Figura 6.9
Remarci:
9 Proprietatea text–align permite alinierea textului la stânga (left), la
dreapta (right), în centru (center) sau justify.
9 Proprietatea font–size permite definirea dimensiunii textului de manieră
absolută sau relativă.
9 Proprietatea color permite definirea culorii textului. Culorile pot fi definite
în mai multe moduri: cu cuvinte cheie (atenţie, ele sunt în engleză, nu
trebuie traduse!); cu coduri RGB (Red, Green Blue) hexazecimale
(precedate de simbolul #); cu funcţia Rgb(R,G,B) – fie un număr zecimal
de la 0 la 255 (echivalentul 0 la FF); fie un procent pentru fiecare culoare
de bază (de la 0 la 100%).
5. Tastaţi } pentru a termina declaraţiile (figura 6.10).
Figura 6.10
203
6. Repetaţi paşii 2 – 4 pentru definirea celui de-al doilea selector,
P (figura 6.11).
Figura 6.11
7. Introduceţi tag-ul pereche </STYLE> (figura 6.12).
Figura 6.12

204
Figura 6.13
Aplicaţie
Creaţi o foaie de stiluri (dedicate) internă, utilizând selectorii H1, H2 şi P cu

proprietăţile:
9 H1 {text–align:center; font–size:24pt; color:red}.
9 H2 {text–align:left; font–size:18pt; color:purple}.
9 P {text–align:left; font–size:14 pt; color:blue}.
1. În zona <HEAD> … </HEAD>, între tag-urile <STYLE> … </STYLE>

introduceţi selectorii H1, H2 şi P (figura 6.14).
205
Figura 6.14
Figura 6.15
206
Remarci:
9 În navigator stilurile definite sunt active.
9 Atunci când pagina dumneavoastră conţine mult text, utilizarea unei foi de stiluri
(incorporate) internă este ideală pentru a-i aplica în mod rapid o formatare
omogenă.
Creaţi şi aplicaţi o foaie de stiluri

XHTML
(incorporate) internă
Iată cum definim o foaie de stiluri (dedicate) internă, care conţine

selectorii h1 şi p cu proprietăţile:
9 h1{text-align:center; font-size:24pt; color:red}
9 p{text-align:center; font-size:18pt; color:blue}
pornind de la documentul HTML stil.htm creat, pe care apoi îl convertim

în XHTML cu programul utilitar HTML-TIDY.
Figura 6.16
207

figura 6.17.
Figura 6.17
Remarci:
9 Pentru a evita situaţii … neplăcute atunci când navigatoarele de generaţie mai
veche generează mesaje de eroare la întâlnirea unei zone <style> …
</style>, definiţi zona de stil ca un comentariu prin  (figura 6.18).
Figura 6.18
9 Puteţi închide ultima pereche de valori prin punct şi virgulă: color: blue;, dar
este facultativ!
9 Când o foaie de stiluri conţine caracterele: <, &, ]] şi > – salvaţi-le într-un
fişier extern (nu le definiţi în header!)
9 Tag-ul <style> include întotdeauna atributul type=”text/css”, deci ar trebui să
vă obişnuiţi să-l adăugaţi!
Aplicaţie
Creaţi o foaie de stiluri (dedicate) internă, care conţine selectorii:

208
9 h1{text-align: center; font-size: 24pt; color: red; background-color:
cyan}
9 h2{text-align: left; font-size: 18pt; color: purple}
9 p{text-align: left; font-size: 14pt; color: blue}
Aplicaţi această foaie de stiluri unei pagini Web. Nu confundaţi bgcolor (în
HTML) cu background-color (în CSS).
HTML Creaţi şi aplicaţi o clasă

Până acum aţi văzut cum se aplică foile de stiluri documentelor (X)HTML
întregi. Stilurile unei foi de stiluri pot fi aplicate de asemenea şi unor
părţi specifice documentelor (X)HTML. Această categorie este numită o
aplicaţie de clase de stil.
Puteţi crea o clasă, în vederea aplicării unui stil unic elementelor din
pagina dumneavoastră Web marcate printr-un tag particular sau celor
care aparţin unei categorii speciale de informaţie.
Iată cum procedăm pentru a crea două clase: avantaje, dezavantaje cu

scopul de a le aplica următoarelor paragrafe:
9 Avantaje: Se câştigă mult timp în activitatea de formatare.
9 Dezavantaje: Nu toate navigatoarele recunosc foile de stil.
Cele două clase au următoarele proprietăţi:
P.avantaje{font-size:24; color:rgb(0, 0, 255)}
P.dezavantaje{font-size:14; color:rgb(255, 0, 0)}
1. În interiorul tag-urilor <STYLE> … </STYLE> introduceţi

P.?{proprietate:valoare;…;…}, înlocuind semnul întrebării (?) cu
numele primei clase pe care dorim s-o creăm, avantaje (figura
6.19).
209
Figura 6.19
2. Introduceţi cea de-a doua clasă, dezavantaje (figura 6.20).
Figura 6.20
3. Introduceţi în tag-ul <P> al primului paragraf, atributul

CLASS=?, înlocuind semnul întrebării (?) cu numele clasei,
avantaje (figura 6.21).
210
Figura 6.21
4. Introduceţi în tag-ul <P> al celui de-al doilea paragraf, atributul

CLASS=?, înlocuind semnul întrebării (?) cu numele clasei,
dezavantaje (figura 6.22).
Figura 6.22
.
211
Figura 6.23
Remarcă. Navigatorul aplică formatările specificate elementelor celor două

clase.
Aplicaţii
Creaţi clasa: P.parag{font-family: Georgia, Times New Roman, Times, Serif;

font-size:24pt; font-weight:bold; color: #00FF00}. Aplicaţi acest stil
paragrafului: „LUMINA BLÂNDA este puternică şi nu doar atât!”
Creaţi clasa: paragmod{font-family: Times New Roman, Times, Serif; font-

size: 24pt; color: #0000FF}. Aplicaţi acest stil modificat paragrafului: „LUMINA
BLÂNDA este puternică şi nu doar atât!”.
Remarcă. Puteţi crea de asemenea o clasă generică, fără un selector anume. (Exemplu:
<STYLE TYPE= ”text/CSS”>. RED {COLOR:#FF0000} </STYLE>). Dacă specificaţi un
element cu o clasă (P.RED, de exemplu) nu puteţi utiliza această clasă decât cu
elementele P.
212
XHTML Creaţi şi aplicaţi o clasă
Iată cum procedăm pentru a crea două clase: avantaje, dezavantaje cu

scopul de a le aplica următoarele paragrafe:
9 Avantaje: Se câştigă mult timp în activitatea de formatare.
9 Dezavantaje: Nu toate navigatoarele recunosc foile de stil.
pornind de la documentul HTML creat stil2.html, pe care apoi îl

convertim în XHTML cu programul utilitar HTML-TIDY.
Figura 6.24
213
figura 6.25.
Figura 6.25
Remarci:
9 Elementele şi atributele XHTML utilizate pentru crearea şi aplicarea unei clase
sunt: div, span, class=”…”, id=”…”.
9 Utilizaţi elementele div şi span pentru a aplica o clasă (clase) anumitor părţi ce
aparţin unui document XHTML. Exemple: <div class= ”margine”> <p> DEMO
</p> <blockquote> „De ce nu eşti ca-n prima zi!” <blockquote> </div>; <p>
Acesta este un <span class=”prima”> DEMOSPAN </span> foarte simplu </p>.
9 Puteţi crea şi aplica o clasă elementelor unui tabel XHTML.
9 Puteţi crea şi aplica clase generice (vezi HTML 4.01).
Aplicaţie
Creaţi clasa principal pentru titlul principal (36 px) al unui document şi clasa
secundar pentru sub-titlurile (14 pt) unui document. Atribuiţi cele două stiluri
diferite paragrafelor documentului, în funcţie de conţinutul acestora.
În figura 6.26 este prezentat documentul (parţial) XHTML creat manual.

214
</head>
Figura 6.26
Validaţi documentul XHTML 1.0 cu aplicaţia validator şi inseraţi codul XHTML
care afişează icon-ul de conformitate . Rezultatul vizualizării paginii

Web în Internet Explorer este ilustrat în figura 6.27.
Figura 6.27
215
Incorporaţi o foaie de stiluri într-un
HTML
document
Aceasta este metoda cea mai simplă pe care v-o recomandăm pentru
asocierea unei foi de stiluri documentelor dumneavoastră (X)HTML.
Pentru a încorpora o foaie de stiluri, utilizaţi elementul STYLE (cu
informaţiile de stil corespunzătoare) pe care-l plasaţi între tag-urile de
început şi de sfârşit ale elementului HEAD.
Definiţi fontul pentru toată pagina

Puteţi aplica acelaşi font textului integral al unei pagini.
Iată cum definim stilul body {font-family: arial, helvetica, sans-serif}

pentru toată pagina Web, care conţine text.
1. În interiorul tag-urilor: <STYLE> ...</STYLE>, introduceţi

body{font-family:X;Y;Z}, înlocuind X-ul cu numele primului font,
Y-ul cu numele celui de-al doilea font şi Z-ul cu numele celui
de-al treilea font (figura 6.28).
216
Figura 6.28

217
Figura 6.29
Remarci:
9 Proprietatea font-family se utilizează pentru a alege unul sau mai multe
fonturi pentru text.
9 Navigatorul atribuie primul font (arial) întregului text al paginii. Dacă
fontul nu este recunoscut de navigator, atunci se va aplica cel de-al
doilea font (helvetica) ş.a.m.d. Se utilizează curent: Times New Roman,
Arial, Courier New.
9 Pentru H1, H2 şi P dimensiunea caracterelor este cea implicită.
Aplicaţie
Afişaţi H1, H2 cu un tip de font şi paragrafele cu alt tip de font.
Iată cum afişăm un text cu diferite fonturi, dar nu mai mult de trei pe pagină.
1. În interiorul tag-urilor <STYLE> ... </STYLE> introduceţi ?{font-

family:X,Y}, înlocuind semnul întrebării (?) cu selectorul căruia doriţi
să-i aplicaţi fontul, X-ul cu numele primului font şi Y-ul cu numele
celui de-al doilea font.
218
Figura 6.30

219
Figura 6.31
Remarcă. În navigator, fiecare tip de text (H1, H2 şi paragraf) se afişează cu primul font. Dacă
numele de familie al fontului conţine un spaţiu atunci plasaţi numele între ghilimele, altfel
ghilimelele sunt opţionale.
Formataţi un text cu caractere îngroşate (bolduite) sau italice

(cursive)
Puteţi scrie îngroşat sau cursiv tot textul unei pagini Web sau numai
pasaje (fragmente) marcate printr-un tag particular.
Iată cum scriem cursiv (italic) tot textul unei pagini Web.
1. Introduceţi body{font-style: italic} în interiorul tag-urilor

<STYLE> ... </STYLE> (figura 6.32).
220
Figura 6.32
Remarcă. Pentru a scrie cu italice (cursiv) un tip de text particular, introduceţi în

interiorul tag-urilor pereche <STYLE>...</STYLE>, ?{font-style: italic;}, înlocuind
semnul întrebării (?) cu selectorul corespunzător. Exemplu: H1{font-style: italic}.
.
!
!
Figura 6.33
Remarcă. Navigatorul afişează cu italice tot textul paginii.

221
Aplicaţii
Afişaţi cu bold tot textul paginii.
Iată cum scriem îngroşat (bolduit) tot textul unei pagini Web.
1. Introduceţi body{font-weight:bold} în interiorul tag-urilor

<STYLE>...</STYLE> (figura 6.34).
Figura 6.34
Remarcă. Pentru a scrie cu caractere îngroşate un tip de text particular utilizaţi ?{font-
weight:bold;}, înlocuind semnul întrebării (?) cu selectorul corespunzător.
.
Figura 6.35
222
Remarcă. Navigatorul afişează cu caractere îngroşate , tot textul paginii.
Anulaţi formatarea cu bold aplicată întregului text al paginii din întreaga

pagină.
Indicaţie. Introduceţi body{font-weight:normal}.
Definiţi dimensiunea fontului

Aţi văzut cât de simplu putem defini tipul de font cu ajutorul foilor de
stiluri! Veţi vedea în cele ce urmează că la fel de simplă este şi
procedura de definire a dimensiunii fontului.
Iată cum aplicăm un font (times new roman) de 30 de puncte, întregului

text al paginii dumneavoastră Web.
1. Introduceţi (în interiorul tag-urilor <STYLE> ... </STYLE>)

body{font-size: Xpt},înlocuind X-ul cu dimensiunea dorită
(30pt), figura 6.36.
Figura 6.36
Remarcă. Pentru a atribui aceeaşi dimensiune unui tip de text precis, introduceţi (în
interiorul tag-urilor <STYLE>...</STYLE>) ?{font-size: X pt}, înlocuind semnul
întrebării (?) cu selectorul corespunzător şi X-ul cu dimensiunea dorită.

223
Figura 6.37
Remarcă. În navigator tot textul se afişează cu dimensiunea specificată (30

puncte).
Definiţi dimensiunea fontului cu ajutorul cuvintelor cheie

Pentru definirea dimensiunii fontului, puteţi utiliza, în locul punctelor
(vezi paragraful precedent) cuvinte cheie.
Iată cum definim cu ajutorul cuvântului cheie small, dimensiunea

fontului pentru paragraful "LUMINA BLANDA este puternică şi nu doar
atât!".
1. Introduceţi (în interiorul tag-urilor <STYLE>...</STYLE>)

?{font-size:X}, înlocuind semnul întrebării (?) cu selectorul P şi
224
X-ul cu Small, cuvânt cheie care are semnificaţia "dimensiune
mică" (figura 6.38).
Figura 6.38
Remarci:
9 Proprietatea font-size permite de asemenea definirea dimensiunii unui font cu
cuvinte cheie în mod absolut şi relativ.
9 Cuvintele cheie utilizate pentru definirea mărimii absolute sunt: xx-small, x-
small, small, medium, large, x-large, xx-large.
9 Cuvintele cheie utilizate pentru definirea mărimii relative sunt: smaller, larger.
Figura 6.39
225
Schimbaţi culoarea unui text
Puteţi schimba culoarea întregului text al unei pagini Web sau numai a
anumitor cuvinte, fraze marcate printr-un tag particular.
Iată cum colorăm în roşu, primele două titluri "Bine aţi venit!", "Felicitări
pentru răbdarea de a ne fi descoperit!" şi cum colorăm în albastru
paragraful "LUMINA BLANDA este puternică şi nu doar atât!" din cadrul
aceleiaşi pagini.
1. Introduceţi (în interiorul tag-urilor <STYLE>...</STYLE>)

X{color:?} sau X{color:rgb(0,0,0)}, înlocuind X-ul cu selectorul
corespunzător (H1, H2) şi semnul de întrebare (?) cu numele
culorii (red) sau 0-urile cu valoarea RGB a culorii (255,0,0),
figura 6.40.
Figura 6.40
226
2. Introduceţi X{color:?} sau X{color:rgb(0,0,0)} înlocuind X-ul cu
selectorul corespunzător (P) şi semnul întrebării (?) cu numele
culorii (blue) sau 0-urile cu valoarea RGB a culorii (0,0,255),
figura 6.41.
Figura 6.41
.
Figura 6.42
227
Remarci:
9 Pentru a schimba culoarea întregului text al unei pagini introduceţi (în
interiorul tag-urilor <STYLE>...</STYLE>) body{color:?} sau
{color:rgb (0,0,0)} înlocuind semnul de întrebare (?) cu numele culorii
sau 0-urile cu valoarea RGB a culorii.
9 Remarcă. Navigatorul aplică textului culorile conform definirii lor.
Schimbaţi spaţiul dintre liniile unui paragraf

Dacă doriţi să îmbunătăţiţi lizibilitatea unui paragraf puteţi schimba
spaţierea dintre liniile acestuia din urmă.
Iată cum aplicaţi o interlinie de 25 de puncte paragrafului „Bine aţi venit!

Felicitări pentru răbdarea de a ne fi descoperit! LUMINA BLÂNDĂ este
puternică şi nu doar atât! Dorim să ne cunoaştem şi să rămânem
împreună!”
1. Introduceţi (în interiorul tag-urilor <STYLE> ... </STYLE>)

?{line-height:X pt}, înlocuind semnul întrebării (?) cu selectorul
(P) şi X-ul cu valoarea exprimată în puncte (25) a interliniei
(figura 6.43).
Figura 6.43
228
Remarcă. Pentru a aplica o interlinie întregului text al paginii, introduceţi (în
interiorul tag-urilor <STYLE>...</STYLE>) body{line-height:? pt} înlocuind
semnul de întrebare (?) cu valoarea în puncte dorită.
Figura 6.44
Remarcă. Browser-ul aplică paragrafului interlinia dorită.
Coloraţi fundalul (background-ul) unui text sau al unei pagini

Aveţi posibilitatea de a colora fundalul unui text sau al unei pagini Web.
Iată cum coloraţi în purpură background-ul unei pagini Web şi în alb

background-ul paragrafului „LUMINA BLANDA este puternică şi nu doar
atât!” din cadrul aceleiaşi pagini.
1. Introduceţi (în interiorul tag-urilor <STYLE>…</STYLE>)

body{background:?} sau body{background:rgb(0,0,0)}
înlocuind semnul întrebării (?) cu numele culorii (purple) sau
229
0-urile cu valoarea culorii (purple) în sistem zecimal (figura
6.45).
Remarcă. În HTML 4.01 puteţi utiliza pentru definirea culorilor – cu cuvinte cheie, cu
coduri RGB hexazecimale, cu funcţia rgb(R,G,B) proprietatea background-color. Succes!
Figura 6.45

X{background:?} sau X{background:rgb(0,0,0)}, înlocuind X-ul
cu selectorul corespunzător (P) şi semnul întrebării (?) cu
numele culorii (white) sau 0-urile cu valoarea RGB a culorii.
Figura 6.46

230
Figura 6.47
Remarcă. Navigatorul aplică culorile de background definite paginii şi

paragrafului.
Aplicaţi o imagine pe fundalul paginii

Dacă doriţi să aplicaţi o imagine de background unui text, asiguraţi-vă că
ea nu alterează lizibilitatea.
Aplicaţia cea mai frecventă este definirea unei imagini de fond pentru
întreaga pagină Web (pentru elementul <BODY>), dar proprietatea se
poate aplica la fel de bine unui paragraf sau unei celule a unui tablou.
HTML 4.01 dispune de mai multe proprietăţi CSS: background-image,

background-position, background-repeat (repetă imaginea orizontal sau
vertical cu ajutorul cuvintelor cheie repeat-x, repeat-y; repetă imaginea
în două sensuri – repeat; nu repetă imaginea – no repeat), background-
attachement (pentru definirea imaginii cu ajutorul cuvintelor cheie scroll
sau fixed).
231
Iată cum atribuim o imagine de background paginii Web.

body{background-image:URL(?)} înlocuind semnul de întrebare
(?) cu calea de acces la imagine (figura 6.48).
Figura 6.48
.
Figura 6.49
232
Remarcă. În navigator, imaginea se afişează pe fundalul paginii.
Controlaţi spaţierea caracterelor

Foile de stiluri permit definirea cu precizie a spaţiului care să figureze
între cuvinte sau între fiecare literă a unui cuvânt.
Iată cum spaţiaţi cu 30 de pixeli literele paragrafului „LUMINA BLÂNDĂ

este puternică şi nu doar atât!”.

X{letter-spacing:?}, înlocuind X-ul cu selectorul corespunzător
(P) şi semnul întrebării (?) cu spaţiul dorit (30) exprimat în
pixeli (figura 6.50).
Figura 6.50
Remarcă. Pentru a defini spaţiul între cuvinte, introduceţi (între tag-urile

<STYLE>…</STYLE>) X{word-spacing:?}, înlocuind X-ul cu selectorul corespunzător şi
semnul întrebării (?) cu spaţiul dorit, exprimat în pixeli.

233
Figura 6.51
Remarcă. Navigatorul spaţiază literele paragrafului cu 30 de pixeli.
Aliniaţi textul
Puteţi utiliza foile de stiluri pentru alinierea unui text, folosind o
procedură deloc complicată.
Iată cum procedaţi pentru a centra textul „Bine aţi venit!”, pentru a
alinia la stânga textul „Felicitări pentru răbdarea de a ne fii descoperit!”
şi pentru a alinia la dreapta textul „LUMINA BLÂNDĂ este puternică şi
doar atât!”.
234
X{text-align:?}, înlocuind X-ul cu selectorul H1 respectiv P şi
semnul întrebări (?) cu valoarea center respectiv right (figura
6.52).
Figura 6.52
Remarcă. Pentru a atribui un aliniament întregului text, introduceţi (în interiorul

tag-urilor <STYLE>…</STYLE>) body{text-align:?}, înlocuind semnul
întrebării (?) cu una din valorile: left, right, center, justify.

235
Figura 6.53
Remarcă. Navigatorul centrează primul text şi aliniază ultimul text la dreapta,

textul din mijloc fiind aliniat, în mod implicit, la stânga.
Daţi ordin … să clipească un text!

Creaţi un text care clipeşte! Cu siguranţă vizitatorii dumneavoastră se
vor amuza! Din nefericire, numai Netscape-ul vă poate oferi această
bucurie!
Iată cum procedăm ca textul „Bine aţi venit!” să ... clipească!

?{text-decoration: blink}, înlocuind semnul întrebării (?) cu
selectorul corespunzător (H1), figura 6.54.
236
Figura 6.54
Remarcă. Pentru a da ordin să … clipească toate textele, introduceţi (în interiorul

tag-urilor <STYLE>…</STYLE>) body{text-decoration: blink}.
.
4. Vizualizaţi pagina Web într-un browser (Netscape - figura 6.55).
Figura 6.55 (a)

237
Figura 6.55 (b)
Remarcă. În browser, titlul de nivel 1 clipeşte.
Aplicaţii
Trasaţi o linie deasupra textului „Bine aţi venit!”.
Indicaţie. Introduceţi (în interiorul tag-urilor <STYLE>…</STYLE>) X{text-

decoration:?}, înlocuind X-ul cu selectorul corespunzător (H1) şi semnul
întrebării (?) cu valoarea overline.
H1{text-decoration:overline}
Trasaţi o linie dedesubtul textului „Bine aţi venit!”.
Indicaţie. Înlocuiţi în codul sursă anterior valoarea overline cu valoarea

underline.
H1{text-decoration:underline}
Remarcă. Proprietatea text-decoration poate avea una din valorile: overline, line-
through, none, underline.
238
Incorporaţi o foaie de stiluri într-un
XHTML document
Definiţi fontul pentru toată pagina

Pentru a crea documente XHTML valide, utilizaţi în exclusivitate
atributele CSS pentru formatarea fonturilor: font-family, font-size, color,
font-weight, font-style, font-variant.
Iată cum definim stilul body{font-family: arial, helvetica, sans-serif}

pentru toată pagina Web, care conţine text, pornind de la documentul
HTML stil4.htm creat anterior, pe care apoi îl convertim în XHTML cu
Figura 6.56
239
Remarcă. Utilizaţi DTD Strict într-un document XHTML care conţine foi de stiluri, întrucât
DTD Transitional permite formatarea elementelor, iar obiectivul foilor de stiluri este de
a nu le utiliza.

figura 6.57.
Figura 6.57
Remarcă. În afară de font-urile serif şi sans-serif noile navigatoare recunosc trei familii
de fonturi adiţionale: cursive, fantasy şi monospace.

(italice)
Iată cum scriem cursiv (italic) tot textul unei pagini Web, pornind de la
documentul HTML stil6.htm creat anterior, pe care apoi îl convertim în

240
!<h1>
!<h2>
Figura 6.58
Remarcă. Proprietatea font-style poate avea următoarele valori: normal, italic, oblique.

figura 6.59.
Figura 6.59
241
Aplicaţie
Scrieţi îngroşat (bolduit) tot textul unei pagini Web.
Indicaţie. Introduceţi body{font-weight: bold} în interiorul tag-urilor <style> …

</style>.
Remarcă. În HTML pentru afişarea cu caractere îngroşate (bold) a unui text aveţi la
dispoziţie numai tag-ul <b>. Atributul CSS font-weight vă oferă următoarele formate:
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Definiţi dimensiunea fontului

Iată cum aplicăm un font (times new roman) de 30 de puncte, întregului
text al paginii dumneavoastră Web, pornind de la documentul HTML
stil8.htm creat anterior, pe care apoi îl convertim în XHTML cu
Figura 6.60
242
figura 6.61.
Figura 6.61
Definiţi dimensiunea fontului cu ajutorul cuvintelor cheie

Iată cum definim cu ajutorul cuvântului cheie small, dimensiunea
fontului pentru paragraful „Felicitări pentru răbdarea de a ne fi
descoperit! LUMINA BLÂNDĂ este puternică şi nu doar atât!”, pornind de
la documentul HTML stil9.htm creat anterior, pe care apoi îl convertim în

243
Figura 6.62

figura 6.63.
Figura 6.63
Remarcă. Pentru a regla cu precizie dimensiunea fontului, utilizaţi atributul CSS font-size
cu atributele: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger,
244
pt (point), pc (pica), in (inch), mm, cm, % (procente în raport cu dimensiunea
normală).
Schimbaţi culoarea unui text

Iată cum colorăm în roşu, primele două titluri „Bine aţi venit!”, „Felicitări
pentru răbdarea de a ne fi descoperit” şi cum colorăm în albastru
paragraful „LUMINA BLANDA este puternică şi nu doar atât!” din cadrul
aceleiaşi pagini, pornind de la documentul HTML stil10.htm creat
TIDY.
Figura 6.64
Remarci:
245
9 Cu ajutorul atributului CSS color definiţi culoarea primului plan sau culoarea
textului.
9 Nu confundaţi: bgcolor din HTML, background-color (atribut CSS pentru
culoarea de fond pentru toate elementele: paragrafe, liste, titluri, celulele unui
tabel, fraze şi cuvinte izolate), color.
9 Un cuvânt se afişează în culoarea afectată şi nu în culoarea de fond a
paragrafului etc.
9 Pentru a colora în roşu primul titlu (h1), mai puteţi defini culoarea, cu una din
metodele:
• h1 (color: #ff0000);
• h1 (color: rgb (255, 0, 0);
• h1 (color: rgb (100%, 0%, 0%).
Recomandăm utilizarea metodei #rrggbb. Ea vă va deveni familiară căci
corespunde declaraţiilor de culoare ale limbajului XHTML.

figura 6.65.
Figura 6.65
Schimbaţi spaţiul dintre liniile unui paragraf

Proprietăţile de text controlează aranjarea sau afişarea liniilor şi a
cuvintelor în cadrul unei pagini şi în interiorul unui element text. Cele
mai des utilizate proprietăţi de text sunt: line-height, letter-spacing,
text-align, text-decoration, text-indent, text-transform, vertical-align,
word-spacing. Cu unele dintre ele aţi făcut deja cunoştinţă (text-align).
246
Iată cum aplicaţi o interlinie de 25 de puncte paragrafului „Bine aţi venit!
Felicitări pentru răbdarea de a ne fi descoperit! LUMINA BLÂNDĂ este
puternică şi nu doar atât!”, pornind de la documentul HTML stil11.htm
creat anterior, pe care apoi îl convertim în XHTML cu programul utilitar
HTML-TIDY.
Figura 6.66

figura 6.67.
247
Figura 6.67
Coloraţi fundalul (background-ul) unui text sau al unei pagini

Web
Iată cum coloraţi în purpură (purple, în limba engleză) background-ul
pagini Web şi în alb (white, în limba engleză) background-ul paragrafului
„LUMINA BLANDA este puternică şi nu doar atât!” din cadrul aceleiaşi
pagini, pornind de la documentul HTML stil12.htm creat anterior, pe care
apoi îl convertim în XHTML cu programul utilitar HTML-TIDY.

248
Figura 6.68

figura 6.69.
Figura 6.69
249
Remarci:
9 În XHTML atribuirea culorilor se efectuează prin numele lor standard sau prin
codul hexazecimal (RGB).
9 Utilizaţi tag-ul <body> şi atributul CSS background-color pentru a atribui
culoarea de background paginii.
9 Utilizaţi atributul color pentru a atribui o culoare unui text. Afectaţi atributul
color tag-ului <body> pentru a defini culoarea de bază a fontului sau fiecărui
tag distinct pentru a defini culoarea acestuia.
Aplicaţi o imagine de fundal paginii

Iată cum atribuim o imagine de background (follow.jpg) paginii
dumneavoastră Web, pornind de la documentul HTML stil13.htm creat
TIDY.
Figura 6.70
250
figura 6.71.
Figura 6.71
Aplicaţie:
Creaţi un efect de mozaic, în direcţia axei X, pentru imaginea de background.

Inseraţi culoarea de fundal #ffffcc (galben deschis).
Indicaţie. Folosiţi proprietăţile: background-color; background-image;

background-repeat cu valoarea repeat-x.
În figura 6.72 se prezintă documentul XHTML creat manual.
Figura 6.72
251
Remarci:
9 Proprietatea background-color poate avea următoarele valori posibile: #rrggbb,
transparent.
9 Proprietatea background-image poate avea una din valorile: url (http:
//example.com) sau none.
9 Proprietatea background-repeat poate avea următoarele valori: repeat (imaginea
se repetă în două sensuri), repeat-x (imaginea se repetă orizontal), repeat-y
(imaginea se repetă vertical), no-repeat (imaginea nu se repetă).
care afişează icon-ul de conformitate. Rezultatul vizualizării paginii Web în
Internet Explorer este ilustrat în figura 6.73.
Figura 6.73
Controlaţi spaţierea caracterelor

Iată cum spaţiaţi cu 30 de pixeli literele paragrafului „LUMINA BLANDA
este puternică şi nu doar atât!”, pornind de la documentul HTML
stil14.htm creat anterior, pe care apoi îl convertim în XHTML cu

252
Figura 6.74

figura 6.75.
Figura 6.75
253
Remarcă. Pentru a mări spaţiul între caracterele unui text utilizaţi atributul CSS letter-
spacing.
Aliniaţi textul
Iată cum procedaţi pentru a centra textul „Bine aţi venit!”, pentru a
alinia la stânga textul „Felicitări pentru răbdarea de a ne fi descoperit” şi
pentru a alinia la dreapta textul „LUMINA BLANDA este puternică şi nu
doar atât”, pornind de la documentul HTML stil15.htm creat anterior, pe
care apoi îl convertim în XHTML cu programul utilitar HTML-TIDY.
Figura 6.76

figura 6.77.
254
Figura 6.77
Remarcă. Utilizaţi atributul CSS text-align pentru a defini tipul de aliniere, cu

una din valorile: left, right, center, justify.
Daţi ordin … să clipească un text

Iată cum procedăm ca textul „Bine aţi venit!” să … clipească!, pornind
de la documentul HTML stil16.htm creat anterior, pe care apoi îl

255
Figura 6.78

figura 6.79.
Figura 6.79
256
Utilizaţi combinaţia specială a proprietăţii font
Dacă utilizaţi combinaţia specială a proprietăţii font pentru a defini o
dată diferitele proprietăţi ale fontului, atunci proprietăţile trebuie să fie
specificate într-o ordine anume, altfel afişarea acestora nu se va face
corect în navigator.
9 Primele proprietăţi sunt: font-style, font-weight şi font-variant.

Ele pot fi plasate în orice ordine dar trebuie să vină înaintea
oricărei alte proprietăţi a fontului. Dacă omiteţi una din aceste
proprietăţi, vor fi utilizate valorile implicite.
9 A doua proprietate este font-size; ea este obligatorie dacă

utilizaţi combinaţia proprietăţii font.
9 Puteţi plasa după font-size o bară oblică şi o valoare line-height,

specificând spaţierea liniilor într-un paragraf (Exemplu: p{font-
size:13pt/15.4pt}). Înălţimea liniei poate fi de asemenea definită
ca o proprietate separată a fontului. (Exemplu: p{font-size:12pt;
line-height:15.4pt}).
9 Pe ultimul loc se plasează proprietatea font-family care este de

asemenea cerută dacă utilizaţi combinaţia proprietăţii font.
În figura 6.80 este prezentat un exemplu în care fiecare proprietate a

fontului este prezentată separat.
257
em;
em;
Figura 6.80
Utilizând combinaţia specială a proprietăţii font, proprietăţile listate în

figura precedentă pot fi combinate după cum urmează (figura 6.81).
em/1.3em
Figura 6.81
Remarcă. Atributul CSS text-decoration poate lua una din valorile: none, underline,
overline, line-through şi blink.
HTML Creaţi şi aplicaţi o foaie de stiluri externă

Foaia de stiluri externă este foarte practică atunci când doriţi să daţi
acelaşi aspect mai multor pagini Web. În această situaţie, creaţi o
singură foaie de stiluri (externă) pe care apoi o aplicaţi tuturor paginilor
dorite.
258
Iată cum creăm o foaie de stiluri externă utilizând selectorii H1, H2 şi P,
cu următoarele proprietăţi:
9 H1 {text-align: center; font-size: 24 pt; color: red; background:

cyan}
9 H2 {text-align: left; font-size: 18 pt; color: purple}
9 P {text-align: left; font-size: 14 pt; color: blue}
1. Creaţi un nou document text.
2. Introduceţi selectorul H1 pentru care doriţi să definiţi stilul

(figura 6.82).
Figura 6.82
3. Plasaţi proprietăţile stilului între acolade ({}), figura 6.83.
Figura 6.83
4. Repetaţi paşii 2 şi 3 pentru fiecare selector (H2 şi P), figura

6.84.
259
Figura 6.84
5. Salvaţi documentul în format text cu extensia .css (figura 6.85).
Figura 6.85
Acum, după ce aţi creat foaia de stiluri externă trebuie s-o ... legaţi la
fiecare din paginile cărora doriţi să le aplicaţi definiţiile de stil. Procedura
este descrisă în cele ce urmează.
260
1. Creaţi pagina dumneavoastră HTML fără a efectua nici o
formatare.
2. Introduceţi în interiorul tag-urilor <HEAD>...</HEAD> tag-ul

<LINK rel=”stylesheet” type =”text/css” href=”?.css”>,
înlocuind semnul întrebării (?) cu calea de acces la foaia de
stiluri (externă), figura 6.86.
Figura 6.86
.
Figura 6.87
261
Remarcă. În navigator, stilul particular se aplică numai textului specificat.
XHTML Creaţi şi aplicaţi o foaie de stiluri externă

Iată cum creăm o foaie de stiluri externă utilizând selectorii H1, H2 şi P,
pornind de la documentul HTML stil19.htm creat anterior, pe care apoi îl
Figura 6.88
262
figura 6.89.
Figura 6.89
Remarci:
9 O foaie de stiluri externă poate fi asociată documentelor XHTML cu una din
metodele: importare şi conexiune (link).
9 Pentru a importa o foaie de stiluri inseraţi declaraţia @import url (...) în elementul
style. Declaraţia @import este recunoscută de toate navigatoarele care acceptă
foile de stiluri. Metoda este recomandată de W3C.
9 Pentru a lega o foaie de stil externă la un document XHTML utilizaţi elementul vid
<link/>. Această metodă va fi prezentată în cadrul lucrării.
Iată cum … legaţi foaia de stiluri externă pe care aţi creat-o la fiecare
din paginile cărora doriţi să le aplicaţi definiţiile de stil, pornind de la
documentul HTML stil19.htm creat anterior, pe care apoi îl convertim în
263
Figura 6.90

figura 6.91.
Figura 6.91
264
Remarcă. Legaţi foile CSS la paginile Web introducând tag-ul <link> cu atributele rel,
type şi href (<link rel="stylesheet" type="text/css" href="stil.css" />), înainte de
tag-ul </head>.
Controlaţi culorile legăturilor (link-urilor)

XHTML
într-un document
Pentru a controla culorile link-urilor din cadrul unui document, utilizaţi
trei clase de stiluri speciale (pseudo-clase), după cum urmează:
9 a: link;
9 a: active;
9 a: visited.
Utilizaţi aceste clase în interiorul definiţiilor foilor de stiluri pentru a

specifica regulile care se aplică link-urilor, link-urilor active, link-urilor
vizitate.
În figura 6.92 se prezintă un exemplu de definire a culorilor link-urilor

nevizitate (culoare bleu), a link-urilor active (culoarea roşie) şi a
link-urilor vizitate (culoare magenta).
Figura 6.92
265
XHTML Proprietăţile de bordură ale unei zone

În mod implicit bordurile nu au nici un stil definit (nu sunt vizibile); fără
elemente de culoare şi de mărime. Valoarea implicită a unei borduri este
o linie de grosime medie.
Proprietăţile de bordură ale unei zone servesc la crearea unor concepte

de zonă, o caracteristică care nu este încă disponibilă în limbajul XHTML
standard. Puteţi crea zone de text de tip avertisment, puteţi ajusta
marginile pentru a regla distanţa dintre text şi bordură, şi în fine pentru
a crea un text flotant.
Cele mai folosite proprietăţi de bordură ale unei zone sunt: border,
border-color(#rrggbb), border-style(none,dotted,dashed,solid,double,
groove,ridge,inset,outset), border-width, clear(right,left,none), height,
margin, margin-bottom, margin-left, margin-right, margin-top, width.
În figura 6.93 este prezentat un exemplu de aplicare a proprietăţilor de

bordură unei zone.
Figura 6.93
Remarcă. Utilizarea zonelor este un excelent mod de a atrage atenţia!

266
XHTML Proprietăţile de clasificare

Acest grup de proprietăţi controlează prezentarea (afişarea) unui anumit
număr de elemente standard, ca de exemplu i, b, p, h etc. Acest grup
de proprietăţi controlează de asemenea afişarea listelor, a elementelor
listelor etc.
Cele mai des folosite proprietăţi de clasificare sunt: display (modifică

valorile de afişare ale unui element), list-style-image (înlocuieşte
caracterul standard-bumb cu o imagine), list-style-type (indică un stil
pentru afişarea elementelor unei liste: disc, circle, square, decimal,
lower-roman, upper-roman, lower-alpha, upper-alpha, none).
De exemplu, pentru a preciza că într-o listă neordonată simbolul utilizat

pentru afişarea elementelor (item-urilor) este un pătrat, utilizaţi
secvenţa XHTML prezentată în figura 6.94.
Figura 6.94
Puteţi folosi de asemenea o imagine, în locul bumbilor, utilizând

proprietatea list-style-image (figura 6.95).
Figura 6.95
267
Remarcă. Dacă specificaţi o proprietate list-style-image este recomandabil să includeţi şi
proprietatea list-style-type în cazul în care imaginea nu va putea fi afişată.
Modificând proprietatea display, puteţi schimba o listă cu tipul de afişaj

vertical într-o listă in-line, în care fiecare element va apărea în interiorul
unei linii de text (figura 6.96).
Figura 6.96
Remarcă. Proprietatea display nu este recunoscută încă de navigatoarele recente:

Netscape Navigator 6, Internet Explorer 5.5, Opera 4 şi versiunile cele mai recente.
XHTML Proprietăţile foilor de stiluri sonore

Foile de stiluri sonore au fost introduse în foile de stiluri CSS2. Ele vă
permit instalarea proprietăţilor necesare pentru o citire sonoră utilizând
un periferic. Utilizatorii care au probleme cu vederea folosesc frecvent
acest tip de foi. Foile de stiluri sonore pot fi folosite de asemenea pentru
prezentări vizuale sau în situaţii speciale (de exemplu, într-o maşină în
mişcare).
Proprietăţile foilor de stiluri sonore – pause, pitch-range, speech-rate (cu

valorile: x-slow, slow, medium, fast, x-fast, faster, slower), volume (cu
valorile: silent, x-soft, soft, medium, loud, loud-x) permit specificarea
documentelor care sunt citite cu voce înaltă, caracteristicilor sunetului şi
a altor opţiuni de audiţie.
De exemplu, pentru a preciza că documentul trebuie să fie citit cu voce

înaltă şi rapid (pentru eficienţă!) utilizaţi secvenţa XHTML listată în figura
268
6.97 în care s-au definit proprietăţile: volume şi speech-rate cu valoarea
fast.
Figura 6.97
Remarci:
9 Foile de stiluri sonore au apărut recent şi nu sunt recunoscute de toate
navigatoarele.
9 Pentru mai multe informaţii consultaţi site-urile:
www.w3.org/TR/CSS-acces
www.webreview.com/style/index.shtml
XHTML Proprietăţile documentelor imprimate

Aceste proprietăţi servesc nevoilor utilizatorilor care imprimă
documentele în loc ca acestea să fie citite. Aceste proprietăţi CSS2
permit definirea coordonatelor pentru zona de imprimare.
Cele mai des utilizate proprietăţi pentru documentele imprimate sunt:

margin, marks, orphans, page-break-after, page-break-before, page-
break-inside, size, windows.
Remarcă. Ca şi foile de stiluri sonore, aceste proprietăţi fac parte din

specificaţia CSS2 şi nu sunt încă recunoscute curent de către navigatoare.
XHTML Proprietăţile de poziţionare a unui element

Pentru a controla poziţionarea elementelor în cadrul unui document
XHTML utilizaţi următoarele proprietăţi: float (cu valorile: left, right,
269
none), overflow (cu valorile: visible, scroll, hidden, auto), position (cu
valorile: static, absolute, relative, fixed), top, bottom, left, right.
În figura 6.98 se prezintă un exemplu care ne va permite să înţelegem

cum funcţionează proprietăţile de poziţionare.
Figura 6.98
Remarci:
9 Proprietăţile de poziţionare fac parte din specificaţia CSS2 care este
suportată de noile navigatoare.
9 Poziţionarea relativă este mult mai bine recunoscută decât cea absolută.
XHTML Viitorul foilor de stiluri în XHTML

În viitor, foile de stiluri externe vor fi probabil cel mai folosite. Opţiunile
pentru stilul incorporat şi stilul in-line sunt disponibile pentru versiunea
XHTML 1.0. Totodată, versiunea XHTML 1.1 necesită utilizarea unui
modul de foi de stiluri pentru punerea în aplicare a elementului style.
Utilizarea foilor de stiluri CSS cu XML nu este posibilă decât cu foile de
stiluri externe.
Remarcă. Dacă doriţi să învăţaţi XML, vă sunt necesare noţiuni de XSL (Extensible
Stylesheet Language) şi de XSLT (vezi Liviu Dumitraşcu, XML, Editura Universităţii din
Ploieşti, 2003).
270
(X)HTML Temă
1. Ce sunt foile de stiluri în cascadă: CSS1, CSS2, CSS3?
2. Cum aplicaţi stilurile CSS?
3. Descrieţi pe scurt procedura (X)HTML de creare a unei foi de stiluri
(incorporate) internă.
4. Descrieţi pe scurt procedura (X)HTML de creare şi aplicare a unei
clase.
5. Descrieţi pe scurt procedura (X)HTML de creare şi aplicare a unei foi
de stiluri externă.
Figura 6.99
9 www.w3.org/TR/REC-CSS1
9 www.w3.org/TR/REC-CSS2
9 www.webpreview.com/style/index.shtml
Conversaţia 7
Inseraţi imagini cu HTML 4 şi XHTML

•••••••••••••••••••••••••••••••••••••••••
f Manipulaţi formatele de imagine Web
f HTML 4, XHTML – Inseraţi o imagine
f HTML 4, XHTML – Centraţi o imagine
f HTML 4, XHTML – Aplicaţi o bordură unei imagini
f HTML 4, XHTML – Folosiţi un text de înlocuire (substituţie) pentru o
imagine
f HTML 4, XHTML – Aliniaţi vertical o imagine în raport cu un text
f HTML 4, XHTML – Plasaţi un text în jurul unei imagini
f HTML 4, XHTML – Întrerupeţi ... îmbrăcarea cu text a unei imagini
f HTML 4, XHTML – Adăugaţi mai multe spaţii în jurul unei imagini
f HTML 4, XHTML – Aplicaţi o imagine de background
f HTML 4, XHTML – Propuneţi o versiune în miniatură a imaginii originale
f HTML 4, XHTML – Creaţi o imagine cu zone reactive
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
Manipulaţi formatele de imagine Web

Am alocat destul timp pentru formatarea caracterelor, paragrafelor, a
textului în general. Ori de câte ori este posibil ar trebui să adăugăm şi
imagini în paginile Web pentru a le face mai atractive şi pentru a facilita
comunicarea!
O pagină Web fără imagini este tristă şi deprimantă!

272
Regulile de aur pentru inserarea imaginilor
Înainte de a insera imagini într-o pagină Web, trebuie să aveţi în vedere
mai multe aspecte.
De unde procurăm imaginile?
3 Există numeroase magazine de IT care oferă vizitatorilor, în mod

gratuit, CD-ROM-uri cu imagini.
3 Există site-uri Web care vă pot oferi, în mod gratuit, biblioteci de
imagini (fără drept de copyright!). Nu ezitaţi să le folosiţi!
3 Folosiţi motoarele de căutare! Introduceţi tipul de imagine pe care îl
căutaţi. Tastaţi search. Se va afişa o listă consistentă de imagini,
adaptată cererii dumneavoastră.
3 Scanaţi: fotografii (de familie, ale copiilor, ale animalelor etc.),
ilustraţii (o imagine poate ilustra uneori un concept mai greu de
explicat în cuvinte!), logo-uri etc.
3 Creaţi propriile imagini cu programe dedicate.
Copyright
Înainte de a insera în pagina dumneavoastră Web imagini care nu vă aparţin,

trebuie să aveţi în vedere copyright-ul. Nu folosiţi imagini fără acordul
proprietarului! Respectaţi legea dreptului de autor!
Gestiunea imaginilor
3 Atunci când creaţi o pagină Web trebuie să treceţi de o importantă

barieră tehnică – gestiunea imaginilor! Imaginile sunt mari
consumatoare de ... octeţi! Dacă nu ne punem în gardă, imaginile pot
multiplica dimensiunea fişierelor de 10 ori, de 100 de ori! Din acest
moment site-ul devine inutilizabil! (Multe din site-urile profesionale
afişează pagini sub 40 KB. Paginile site-ului Yahoo.com sunt sub 20
KB!).
3 Paginile Web care inserează imagini complexe, cu milioane de culori
riscă de a se afişa mai încet pe ecran. Puteţi retuşa imaginea folosind
una din aplicaţiile: Paint Shop Pro (www.jasc.com/psp.html); LviewPro
(www.lview.com); Graphic Converter (www.lemkesoft.de);
Macromedia Fireworks (www.macromedia.com) etc.
3 Asiguraţi-vă că paginile dumneavoastră Web rămân inteligibile şi
atractive şi în absenţa imaginilor! O parte din vizitatori, fie nu pot, fie
optează să nu descarce imagini grafice atunci când vizitează paginile
Web. În consecinţă, în locul imaginilor adăugaţi un text explicativ.
3 Refolosiţi imaginile ori de câte ori este posibil.
273
3 Realizaţi o versiune simplificată a imaginii pe care apoi vizitatorul să o
mărească la dimensiunile reale.
Rezoluţia imaginilor
3 Majoritatea monitoarelor afişează imaginile cu o rezoluţie de 72 dpi. În

consecinţă, nu depăşiţi această valoare pentru imaginile pe care
urmează să le plasaţi în paginile dumneavoastră Web!
3 Ecranele monitoarelor, nu depăşesc în general 620 pixeli pe lăţime.
Este deci preferabil să nu depăşiţi această valoare şi din respect
pentru vizitatorii dumneavoastră.
Creaţi propriile imagini
3 Creaţi un folder special (dedicat) în care să plasaţi toate imaginile pe

care doriţi să le utilizaţi în site-ul dumneavoastră.
3 Creaţi propriile imagini cu una din aplicaţiile: Macromedia Fireworks,
Photoshop, Illustrator, Paint Shop Pro etc.
GIF, JPEG sau PNG?
Înainte de a avansa cu HTML-ul, să ne oprim puţin asupra principalelor

formate de imagine acceptate pe Web: GIF, JPEG şi PNG.
3 Formatul .GIF (Graphics Interchange Format). Creat de Compuserve,

acest format este limitat la 256 de culori. Datorită dimensiunii mai mici
a fişierelor, formatul .GIF este ideal pentru butoane, panouri
publicitare. Există şi GIF-uri animate pe care le puteţi obţine de pe
Internet (www.netmechanic.com). Utilizând formatul .GIF puteţi
reduce paleta de culori până la minimul necesar, ceea ce conduce la o
scădere considerabilă a dimensiunii.
3 Formatul .JPEG (Joint Photographic Experts Group). În acest format
imaginile pot utiliza milioane de culori. Puteţi obţine, deci o imagine
foarte apropiată de original. Formatul .JPEG este ideal pentru
fotografii, desene cu multe detalii şi nuanţe de culori.
3 Formatul .PNG (Portable Network Graphics). Avantajul acestui format
este acela că ţine cont de caracteristicile Web-ului. Încet, încet el va
înlocui formatul .GIF. Formatul .PNG permite un degradeu de nuanţe
şi se aplică mult mai uşor pe fundalul (background-ul) unei pagini
Web. În curând, formatul .PNG va deveni standardul Web-ului. Din
păcate, el nu este mereu recunoscut de către browser-e.
Remarci:
9 Web nu suportă alt format de imagine decât: .GIF, .JPEG sau .PNG;
9 Dacă imaginea dumneavoastră este în alt format, .BMP, de exemplu va trebui
s-o convertiţi într-unul din cele trei formate imagine suportate de Web.
274
Aplicaţii
Creaţi o imagine sugestivă poza.jpg cu una din aplicaţiile (puternice)

existente pe calculatorul dumneavoastră.
Convertiţi imaginea poza.jpg în format .gif (desen.gif).
Definiţi mărimea imaginii desen.gif. Veţi introduce (într-o aplicaţie viitoare)

aceste valori (lungime, lăţime) în tag-ul <IMG> (atributele width şi height)
pentru a accelera încărcarea paginilor dumneavoastră Web (browser-ul nu va
mai avea nevoie să calculeze dimensiunile imaginii!).
Măriţi imaginea desen.gif, atribuind o nouă valoarea lungimii şi lăţimii

acesteia. Evitaţi de a mări foarte mult imaginile, întrucât riscaţi să pierdeţi din
acurateţe.
Reduceţi (cu prudenţă) numărul de culori al imaginii poza.jpg. (Imaginile

RGB admit 256 de culori. Pe Web, numărul de culori este limitat la 251!)
Aplicaţi un efect de transparenţă imaginii poza.jpg. Într-o aplicaţie viitoare

vom plasa această imagine pe fundalul unei pagini Web.
Diminuaţi rezoluţia imaginii poza.jpg, pentru a obţine o versiune în miniatură

a imaginii. Veţi folosi această aplicaţie atunci când doriţi să încărcaţi în pagina
dumneavoastră Web poza.jpg reală, de înaltă rezoluţie. Cum operaţia durează
(timpii de încărcare sunt mari), veţi încărca, la început aceeaşi imagine, dar în
miniatură!
HTML Inseraţi o imagine

Puteţi să vă împodobiţi pagina Web cu imagini sugestive, în format .GIF,
.JPEG sau .PNG.
Iată cum inseraţi imaginea „Smokey Light” (Lumină ... mai puţin
blândă!) din folder-ul My Pictures, în colţul din stânga sus al paginii Web.
Imaginea „Smokey Light”, în format .JPEG (.JPG) se va afişa într-o
casetă de 85 x 85 pixeli.
275
1. Introduceţi tag-ul <IMG SRC=”?”> înlocuind semnul de
întrebare (?) cu calea de acces la imagine, „C:\My
Documents\My Pictures\Smokey Light.jpg” (de exemplu) sau,
mai simplu „Smokey Light.jpg” (figura 7.1).
Remarcă. Neputând fi inclus direct în corpul documentului, elementul <IMG> va

trebui să fie inclus în alt element HTML (<P>, <DIV>, <TD> de exemplu).
Figura 7.1
2. Introduceţi, în continuare, în tag-ul <IMG> atributul align=left

(aliniere la stânga) (figura 7.2).
Figura 7.2
3. Introduceţi, în continuare, în tag-ul <IMG> atributele

height=”85” şi width=”85” pentru a preciza (în pixeli)
coordonatele imaginii inserate (figura 7.3).
276
Figura 7.3
Remarci:
9 Tag-ul <IMG> (image, în limba engleză) inserează o imagine într-un
document HTML.
9 <IMG> nu este un tag pereche (este prevăzut pentru o singură sursă!).
9 <IMG> admite atribute.
9 Atributul SRC (Source, în limba engleză) identifică adresa relativă sau absolută
a imaginii.
9 Prezenţa atributului src este obligatorie.
9 Atributele WIDTH şi HEIGHT definesc lăţimea, respectiv înălţimea imaginii. Ele
pot fi exprimate în pixeli sau în procente.
9 Atunci când imaginea se află în aceeaşi folder cu pagina Web în care urmează
să fie inserată, este suficient să specificaţi doar numele: Smokey Light.jpg.
.
Figura 7.4
277
Remarcă. Navigatorul afişează imaginea în colţul din stânga sus al paginii.
Aplicaţii
Nu reinventaţi roata! Folosiţi imaginile din alte site-uri Web (atenţie la

copyright!) ca punct de plecare pentru crearea propriilor dumneavoastră pagini
Web. În bibliotecile de imagini, în special cele dedicate webmaster-ilor găsiţi
fotografii, logo-uri, pictograme, gif-uri animate.
Vizitaţi site-urile:
3 www.arttoday.com
3 www.clipart.com
3 www.yahoo.com
3 www.animfactory.com
Desenaţi sigla societăţii LUMINA BLÂNDĂ, un bec ... de 10W! Folosiţi
aplicaţia Macromedia Fireworks.
Remarcă. Puteţi găsi o siglă mai inspirată decât cea pe care v-o propunem noi! De
asemenea, puteţi utiliza orice altă aplicaţie pentru crearea imaginilor proprii. Utilizaţi,
de exemplu PhotoShop (părăsiţi Paint-ul din Windows! Aveţi nevoie de instrumente mai
puternice!). Atenţie la dimensiunea fişierului!
Iată cum folosim aplicaţia Macromedia Fireworks pentru desenarea unui bec de
10 W, sigla Societăţii LUMINA BLÂNDĂ, de 85x85 pixeli.
1. Deschideţi aplicaţia Macromedia Fireworks 4.
1.1 Executaţi clic pe Start t All Programs t Macromedia

Fireworks 4 t Fireworks 4 (figura 7.5).
278
Figura 7.5
2. Setaţi dimensiunile 85 x 85 în fereastra New Document ( via File ->

New), figura 7.6.
Figura 7.6
3. Desenaţi becul (de 10 W) utilizând instrumentele de desenare din

panoul cu instrumente; folosiţi paletele de culori.
279
Figura 7.7
4. Salvaţi fişierul cu numele sigla.jpg, în My Documents.
4.1. Selectaţi Jpeg-Better Quality din meniul derulant Settings –

panoul Optimize.
Figura 7.8
4.2. Selectaţi File t Export (din bara de meniuri).
4.3. Introduceţi numele în zona File name (din caseta de dialog

Export) fişierului, sigla.jpg (figura 7.9).
Figura 7.9
280
4.4. Selectaţi Images Only din meniul derulant Save as type,
figura 7.10.
Figura 7.10
4.5. Alegeţi în Save in directorul corespunzător – My Documents

(figura 7.11).
Figura 7.11
4.6. Executaţi clic pe butonul Save (figura 7.12).
Figura 7.12
281
Remarci:
3 Sigla societăţii LUMINA BLANDA – un bec de 10 W! a fost salvată în directorul My
Documents, cu numele sigla.jpg.
3 Sigla este numele fişierului imagine, iar .jpg este extensia.
3 Dimensiunea siglei este de 85 x 85 pixeli.
Inseraţi imaginea sigla.jpg, sigla societăţii „LUMINA BLÂNDĂ” în colţul din

stânga sus al paginii Web. Vizualizaţi pagina Web într-un browser (figura 7.13).
Figura 7.13
XHTML Inseraţi o imagine

Standardul XHTML impune tag-ul <img /> pentru manipularea
imaginilor. De asemenea anumite atribute HTML ale tag-ului <img>
(align, border, hspace, vspace) sunt interzise în XHTML. În locul
acestora va trebui să utilizaţi atributele CSS pentru a defini bordura,
distanţa şi textul din jurul unei imagini.
Remarcă. Consorţiul W3 are în plan să înlocuiască tag-ul <img /> cu un tag mult mai
generic <object>. Orientările W3C sunt pentru a trata toate elementele multimedia
(imagini, sunete, animaţii Flash etc.) cu ajutorul aceluiaşi element <object>. Elementul
<object> cu atributele data (conţine adresa relativă/absolută a fişierului imagine),
type, height şi width trebuie să fie inclus (vezi elementul <img>) într-un alt element
(<p>, <div> de exemplu).
Iată cum inseraţi imaginea „Smokey Light” din folder-ul My Pictures, în

colţul din stânga sus al paginii Web. Imaginea „Smokey Light”, în format
.JPEG (.JPG) se va afişa într-o casetă de 85x85 pixeli.
282
În figura 7.14 este prezentat documentul XHTML creat manual.
Figura 7.14
Remarci:
9 În XHTML tag-ul <img src=”locaţie” /> inserează o imagine în documentul
dumneavoastră. Nu uitaţi să adăugaţi bara „/” la sfârşitul tag-ului de
deschidere <img />.
9 În XHTML utilizaţi style=”text-align:left” în loc de align=”left”; altfel spus, în
XHTML definiţi alinierea cu ajutorul atributului CSS text-align şi nu mai utilizaţi
atributul HTML align.
Validaţi documentul XHTML 1.0 cu aplicaţia validator şi inseraţi codul
XHTML care afişează icon-ul de conformitate . Rezultatul

vizualizării paginii Web în Internet Explorer este ilustrat în figura 7.15.
Figura 7.15
283
HTML Centraţi o imagine

Centrarea unei imagini într-o pagină Web are ca efect ameliorarea
prezentării acesteia din urmă.
Iată cum centraţi sigla societăţii „LUMINA BLÂNDĂ”, sigla.jpg în pagina

dumneavoastră Web.
1. Încadraţi tag-ul <IMG> între <CENTER> şi </CENTER>, figura

7.16.
Figura 7.16
Remarci:
9 Tag-ul <CENTER> (vi-l amintiţi de pe vremea când centraţi entităţile de tip
text!) continuă să fie recunoscut încă de browser-ele Web, dar ... urmează să
fie înlocuit de foile de stiluri.
9 Pentru centrarea imaginii puteţi folosi atributul align cu valoarea center în
tag-ul <P>, <P align=”center”>.

284
Figura 7.17
Remarcă. Navigatorul centrează imaginea.
Aplicaţie
Centraţi în pagina dumneavoastră Web imaginea diagonal.jpg

redimensionând-o (width=”150”, height=”175”).
XHTML Centraţi o imagine
Iată cum centraţi sigla societăţii „LUMINA BLÂNDĂ”, sigla.jpg în pagina

dumneavoastră Web.

285
Figura 7.18
Remarcă. Pentru centrarea imaginii puteţi folosi de asemenea tag-ul <div> cu atributul
style (figura 7.19).
Figura 7.19

286
Figura 7.20
HTML Aplicaţi o bordură unei imagini

Puteţi aplica o bordură imaginilor din pagina dumneavoastră Web,
pentru a le scoate şi mai mult în evidenţă.
Iată cum aplicaţi o bordură (un chenar) de 13 pixeli siglei Societăţii

LUMINA BLÂNDĂ din pagina dumneavoastră Web. Dacă nu aţi creat încă
această imagine (sigla.jpg), aplicaţi aceeaşi bordură imaginii sample.jpg
din folder-ul My Pictures.
1. Introduceţi în tag-ul <IMG> atributul border=”?” înlocuind

semnul de întrebare (?) cu valoarea în pixeli (13) a lăţimii
bordurii (chenarului), figura 7.21.
287
Figura 7.21
Remarci:
9 <IMG border=”?”> defineşte lăţimea bordurii unei imagini.
9 <IMG border=”0”> anulează bordura existentă.
9 Când o imagine apare ca parte dintr-o legătură hipertext, browser-ul
desenează de obicei, în jurul imaginii un chenar colorat. Lăţimea acestui
chenar este fixată prin atributul border.
.
Figura 7.22
288
Remarcă. În browser, imaginea este încadrată de o bordură de 13 pixeli.
XHTML Aplicaţi o bordură unei imagini

Iată cum aplicaţi o bordură de 13 pixeli siglei Societăţii LUMINA BLÂNDĂ
pe care vă invităm s-o centraţi în pagina dumneavoastră Web.
Figura 7.23
Remarci:
9 În XHTML atributul border se foloseşte din ce în ce mai puţin, chiar deloc!
Pentru a afişa o bordură în jurul unei imagini utilizaţi atributele: border-color;
border-style şi border-width.
9 Border-width exprimă grosimea bordurii, exprimate în: pt, px, mm, cm.
9 Border-style exprimă stilul bordurii: none, dotted, dashed, solid, double,
groove.
9 Border-color exprimă culoarea bordurii (Exemplu: red, #FF0000).

289
Figura 7.24
Folosiţi un text de înlocuire (substituţie)

HTML
pentru o imagine
Mulţi dintre vizitatorii site-urilor dezactivează afişarea imaginilor pentru a
reduce timpii de încărcare ai paginilor Web. Este important ca în acest
caz, să le propunem un text alternativă care să descrie imaginea
invizibilă pentru aceştia.
Iată cum folosim textul „Sigla LUMINA BLÂNDĂ” ca alternativă pentru

imaginea sigla.jpg, în cazul în care aceasta nu se poate încărca în pagina
dumneavoastră Web.
1. Introduceţi în tag-ul <IMG> atributul alt=”?” înlocuind semnul

de întrebare (?) cu un text alternativă, "Sigla LUMINA BLÂNDĂ"
(figura 7.25).
Remarcă. Prezenţa atributului alt este obligatorie. Textul alternativă apare la „MOUSE
OVER” pe imagine, în browser.
290
Figura 7.25
4. Dezactivaţi afişajul imaginilor în browser, via Tools t Internet

Options… t Advanced t Multimedia t Show Pictures (figura
7.26).
291
Figura 7.26
Figura 7.27
Remarci:
9 Deoarece afişajul imaginilor a fost dezactivat, browser-ul listează numai textul
de înlocuire a imaginii (figura 7.27).
9 Dacă nu dezactivaţi afişajul imaginilor în browser, însă scrieţi greşit numele
fişierului imagine sigra.jpg, de exemplu, în loc de sigla.jpg, efectul este acelaşi
- se afişează textul alternativă (se poartă … alternativele!). O greşeală de
acest tip, reprezintă un alt motiv pentru a testa paginile dumneavoastră Web,
înainte de a fi vizitate.
292
Folosiţi un text de înlocuire (substituţie)

XHTML
pentru o imagine
Iată cum folosim textul „Sigla LUMINA BLANDA” ca alternativă pentru
imaginea sigla.jpg, în cazul în care aceasta nu se poate încărca în pagina
dumneavoastră Web.
Figura 7.28
Remarcă. Pentru a folosi un text ca alternativă pentru o imagine care nu se poate

încărca într-o pagină Web, utilizaţi tag-ul <img /> cu atributul alt (prezenţa sa este
obligatorie!).

293
Figura 7.29
Aliniaţi vertical o imagine în raport cu un

HTML
text
Puteţi să aliniaţi în mod simplu o imagine în raport cu un text. Dar, în
acest caz nu mai puteţi plasa text în jurul imaginii!
Iată cum aliniem vertical - top, middle, bottom sigla Societăţii "LUMINA
BLANDA". Dacă nu aţi creat încă sigla Societăţii "LUMINA BLÂNDĂ" (Un
bec de … 10W!) aliniaţi în mod vertical imaginea follow.jpg (din folder-ul
c:\Windows\Web\Walpaper) în raport cu acelaşi text.
1. Introduceţi în tag-ul <IMG> atributul align="?" înlocuind

semnul de întrebare (?) prin tipul vertical de aliniere dorit - top
(aliniere sus), figura 7.30.
294
Figura 7.30

semnul de întrebare (?) prin tipul vertical de aliniere dorit -
middle (aliniere la mijloc), figura 7.31.
Figura 7.31

semnul de întrebare (?) prin tipul vertical de aliniere dorit -
bottom (aliniere jos), figura 7.32.
295
Figura 7.32
Remarci:
9 Align este încă folosit, pentru compatibilitatea cu browser-ele mai vechi, dar
este pe drumul … spre ieşire.
9 Bottom este valoarea prestabilită atunci când atributul align nu este specificat
în tag-ul <IMG>.
Figura 7.33
Remarcă. Navigatorul aliniază imaginile sus, la mijloc, jos în raport cu textul "LUMINA
BLÂNDĂ".
296
Aliniaţi vertical o imagine în raport cu un
XHTML
text
Iată cum aliniem vertical – top, middle, bottom sigla Societăţii „LUMINA
BLANDA”.
Figura 7.34

297
Figura 7.35
HTML Plasaţi un text în jurul unei imagini

Atunci când doriţi să plasaţi text în jurul unei imagini, puteţi realiza acest
lucru utilizând opţiuni suplimentare de aliniere a imaginii, astfel încât
pagina dumneavoastră să capete un aspect profesional.
Noile atribute de aliniere - la stânga (îmbrăcarea colţului drept al

imaginii), la dreapta (îmbrăcarea colţului stâng al imaginii) sunt de efect!
Preferăm să le exemplificăm decât să le teoretizăm!
Iată cum îmbrăcăm colţul drept al imaginii sigla.jpg (aliniere la stânga a

imaginii) cu textul introdus în pagina Web: „Bine aţi venit! Felicitări
pentru răbdarea de a ne fi descoperit! Dorim să ne cunoaştem şi să
rămânem împreună. LUMINA BLANDA este puternică şi nu doar atât!”.
Dacă nu aţi creat încă sigla.jpg folosiţi imaginea follow.jpg sau o altă
imagine.
298
1. Introduceţi în tag-ul <IMG> atributul align=? înlocuind semnul
de întrebare (?) prin tipul de aliniere dorit: left (alinierea
imaginii la stânga textului), right (alinierea imaginii la dreapta
textului), figura 7.36.
Figura 7.36
Remarcă. Dacă aţi aliniat (top, middle, bottom) o imagine în raport cu un text, nu puteţi
face ca textul să curgă pe ecran, în jurul imaginii, fie la dreapta, fie la stânga.

299
Figura 7.37
Remarcă. Navigatorul îmbracă imaginea cu text.
Aplicaţii
Îmbrăcaţi colţul stâng al imaginii sigla.jpg (aliniere la dreapta a imaginii) cu

textul introdus în pagina Web.
Indicaţie. Introduceţi în tag-ul <IMG> atributul align="right" (figura 7.38).
Figura 7.38
Plasaţi textul „ZIUA ÎN CARE VIN PEŞTII” între două imagini: follow.jpg.
Iată cum procedaţi pentru a îmbrăca textul „ZIUA ÎN CARE VIN PEŞTII” în
raport cu cele două imagini (aliniate stânga, dreapta) follow.jpg.
1. Introduceţi în tag-ul <IMG> al imaginii care va figura la stânga

textului, atributul align=”left” (figura 7.39).
300
Figura 7.39
2. Introduceţi între cele două tag-uri <IMG> textul care se va poziţiona

între cele două imagini: „ZIUA ÎN CARE VIN PEŞTII” (figura 7.40).
Figura 7.40
3. Introduceţi în tag-ul <IMG> al imaginii care va figura la dreapta

textului atributul align=”right” (figura 7.41).
301
Figura 7.41
Figura 7.42
Remarcă. În navigator, cele două imagini se afişează în jurul textului impus.

302
XHTML Plasaţi un text în jurul unei imagini

Iată cum îmbrăcăm colţul drept al imaginii sigla.jpg (aliniere la stânga a
imaginii) cu textul introdus în pagina Web: „Bine aţi venit! Felicitări
pentru răbdarea de a ne fi descoperit! Dorim să ne cunoaştem şi să
rămânem împreună. LUMINA BLÂNDĂ este puternică şi nu doar atât!”.
Figura 7.43
Remarcă. Cu ajutorul atributului float puteţi preciza unde şi cum textul trebuie
să încadreze imaginea. Float poate lua una din valorile: none (fără text în jurul
imaginii); left (text la dreapta) şi right (text la stânga).
303

Figura 7.44
Întrerupeţi … îmbrăcarea cu text a unei

HTML
imagini
Puteţi întrerupe linia de text din jurul unei imagini şi muta textul de după
întreruperea de linie, dincolo de imagine.
Tag-ul <BR> (fără atribute) şi tag-ul <P> provoacă trecerea la linia

următoare din zona curgătoare a textului, dar acest efect nu reprezintă
întotdeauna ceea ce v-aţi dorit!
Iată cum întrerupeţi linia de text „Bine aţi venit!” care îmbracă imaginea
sigla.jpg şi mutaţi dincolo de siglă, către marginea stângă a ecranului,
restul textului: „Felicitări pentru răbdarea de a ne fi descoperit! Dorim să
ne cunoaştem şi să rămânem împreună! LUMINA BLÂNDĂ este puternică
şi nu doar atât!”. Textul îmbracă colţul drept al imaginii (aliniere la
stânga).
304
1. Executaţi clic în locul în care doriţi să opriţi îmbrăcarea cu text a
imaginii. Introduceţi <BR clear=?> înlocuind semnul de
întrebare (?) cu valoarea de aliniere (left) definită în imagine –
left (stânga), right (dreapta), all (dacă textul este plasat între
două imagini), figura 7.45.
Figura 7.45
Remarci:
9 Atributul clear stabileşte locul pe ecran – left, right, all de unde începe
următoarea linie după imagine.
9 <BR clear=left> mută textul de după întreruperea de linie dincolo de imagine,
către marginea stângă a ecranului.
9 <BR clear=right> mută textul de după întreruperea de linie dincolo de
imagine, până când marginea din dreapta este liberă.
9 <BR clear=all> mută textul de după întreruperea de linie dincolo de imagine,
până când ambele margini sunt libere.

305
.
Figura 7.46
Remarcă. Browser-ul întrerupe îmbrăcarea cu text a imaginii în locul indicat.
Întrerupeţi … îmbrăcarea cu text a unei

XHTML
imagini
Iată cum întrerupeţi linia de text „Bine aţi venit!” care îmbracă imaginea
sigla.jpg şi mutaţi dedesubtul siglei, către marginea stângă a ecranului,
restul textului: „Felicitări pentru răbdarea de a ne fi descoperit! Dorim să
ne cunoaştem şi să rămânem împreună. LUMINA BLÂNDĂ este puternică
şi nu doar atât!”. Textul îmbracă colţul drept al imaginii (aliniere la
stânga).
306
Figura 7.47
Remarcă. Cu atributul clear, dezactivaţi afişarea textului primului paragraf sub imagine.
Clear poate lua una din valorile: none (valoare implicită), left, right şi both
(dezactivează textul pe ambele părţi – stânga, dreapta).

307
Figura 7.48
Adăugaţi mai multe spaţii în jurul unei

HTML
imagini
Un text lipit pe o imagine riscă să nu poată fi citit! Două imagini care nu
sunt separate printr-un spaţiu dau impresia că formează o singură
entitate.
Puteţi remedia aceste neajunsuri adăugând spaţii albe în imediata

apropiere a imaginilor.
Iată cum lăsaţi un spaţiu orizontal şi vertical de 20 de pixeli între

imaginea sigla.jpg şi textul adiacent.
1. Introduceţi în tag-ul <IMG> atributele: hspace=?, înlocuind

semnul de întrebare (?) prin valoarea în pixeli a spaţiului
orizontal (20) care separă imaginea de textul adiacent şi
vspace=? înlocuind semnul de întrebare (?) prin valoarea în
308
pixeli a spaţiului vertical (20) care separă imaginea de textul
adiacent (figura 7.49).
Figura 7.49
Remarci:
9 Spaţiul alb este un termen împrumutat din design pentru „spaţiul care nu
conţine nimic”.
9 Spaţiul orizontal din jurul imaginii creează impresia unor margini inegale faţă
de textul adiacent.
9 În mod prestabilit, hspace şi vspace au ca valori numere mici, diferite de zero,
care furnizează exact atât spaţiu alb cât este necesar pentru ca imaginea să
nu atingă textul adiacent.

309
Figura 7.50
Remarcă. În navigator, textul se afişează decalat cu 20 de pixeli (orizontal şi vertical)

faţă de imagine.
Adăugaţi mai multe spaţii în jurul unei

XHTML
imagini
Cum am stabilit şi mai înainte, atributele HTML hspace şi vspace sunt
atribute declarate ca depăşite sau interzise în XHTML. Pentru a defini
distanţa pe care doriţi să o lăsaţi în jurul unei imagini, utilizaţi atributele
margin sau margin-left, margin-right, margin-top şi margin-bottom.
Iată cum lăsaţi un spaţiu orizontal şi vertical de 20 de pixeli între

imaginea sigla.jpg şi textul adiacent.
310
Figura 7.51
Remarci:
9 Utilizaţi atributele CSS: background-color, color. Primul corespunde culorii de
fond (background) iar cel de-al doilea corespunde culorii textului. Nu
confundaţi bgcolor din HTML cu background-color în CSS. Este posibil de a
atribui culorile cu atributul style în tag-ul <body> sau în zona style din
header.
9 Atributele CSS margin-right şi margin-bottom au fost utilizate în tag-ul <img
/> pentru a lăsa un spaţiu de 20 de pixeli între margine şi textul adiacent
(orizontal şi vertical).

311
Figura 7.52
HTML Aplicaţi o imagine de background

Deşi site-urile pe fond alb cunosc cel mai mare succes (vezi
www.yahoo.com ), nimeni nu ne împiedică să folosim culori şi imagini de
fond. Culorile de fond introduse prin atributul bgcolor (vezi tag-ul
<BODY>) au făcut deja obiectul analizei noastre. Ceea ce vă propunem
în continuare este o nouă provocare – aplicarea imaginilor pe fundalul
(background-ul) paginilor Web.
Iată cum aplicaţi pe fundalul paginii Web imaginea follow.jpg din

folder-ul C:\Windows\Web\Wallpaper.
1. Introduceţi în tag-ul <BODY> atributul background=? înlocuind

semnul de întrebare (?) cu calea de acces la imaginea
follow.jpg (figura 7.53).
312
Figura 7.53
Figura 7.54
Remarcă. În navigator, imaginea apare în background. Dacă alegem o imagine de

dimensiuni reduse, ea se va repeta sub formă de mozaic.
313
Aplicaţie
Următoarele site-uri pun la dispoziţia dumneavoastră imagini de background

în mod gratuit:
9 imagine.metanet.com
9 www.ip.pt/webground/main.htm
9 www.nepthys.com/textures
Dacă vă plac, folosiţi-le.
XHTML Aplicaţi o imagine de background

Pentru a aplica o imagine pe fundalul paginilor Web definiţi un stil şi
utilizaţi atributul CSS background-image.
Iată cum aplicaţi pe fundalul paginii Web imaginea follow.jpg care se

află în folder-ul C:\Windows\Web\Wallpaper.
Figura 7.55
314
Remarci:
9 Declaraţia de stil din tag-ul <body> se compune din proprietatea background-
image şi din valoarea url căreia trebuie să-i transmiteţi, între paranteze,
numele şi calea către fişierul imagine. Indicaţi numele fişierului între
caracterele ” ”, întrucât ghilimelele servesc la definirea valorii stilului.
9 CSS va permite de asemenea să precizaţi cum doriţi să se repete imaginea. În
principiu, navigatoarele repetă imaginea de background orizontal şi vertical
până când background-ul va fi umplut. Contrar HTML-ului, proprietatea
background-repeat a CSS-ului vă permite să precizaţi modul în care
dumneavoastră doriţi să se repete imaginea de background. Imaginaţi-vă
pagina Web ca o histogramă unde axa X reprezintă repetiţia verticală şi axa Y
repetiţia orizontală. Prin valoarea repeat-x cereţi numai o repetiţie verticală şi
interziceţi repetiţia orizontală. Dacă dezactivaţi complet repetiţia prin no-
repeat, imaginea de background se afişează o singură dată în partea
superioară stângă.
9 CSS furnizează de asemenea alte posibilităţi pentru plasarea imaginii de
background. Dacă nu doriţi să umpleţi întreg background-ul cu o imagine,
utilizaţi atributul background-position pentru a defini cu precizie modul de
aliniere şi de poziţionare a imaginii (de background) în raport cu pagina.
Valorile de aliniament ale imaginii de background se pot exprima în procente
şi valori absolute (în pixeli). Utilizaţi de asemenea: top center bottom şi left
center right.
9 Combinaţi imaginea şi culoarea de background. Această combinaţie nu este
posibilă decât în CSS. HTML nu permite această combinaţie. Definiţi în tag-ul
<body> culoarea de background cu atributul background-color.

Figura 7.56
315
Propuneţi o versiune în miniatură a imaginii
HTML
originale
O soluţie practică pentru reducerea timpilor de încărcare a unei imagini
este aceea de a crea o versiune în miniatură a imaginii şi de a propune o
legătură către versiunea originală a imaginii. Executând clic pe versiunea
în miniatură a imaginii, imaginea se va afişa în mărimea sa naturală.
Iată cum creăm o legătură către versiunea originală a imaginii (sigla.jpg)

pornind de la versiunea în miniatură (siglamin.jpg) a acesteia.
1. Creaţi siglamin.jpg, o versiune în miniatură (15 x 15 pixeli) a

imaginii sigla.jpg (sigla Societăţii LUMINA BLÂNDĂ) folosind, de
exemplu, Macromedia Fireworks (figura 7.57).
Figura 7.57
2. Introduceţi tag-ul <A href=”?”>, înlocuind semnul de întrebare

(?) cu calea de acces la imaginea originală (figura 7.58).
316
.
.
Figura 7.58
3. Introduceţi, în continuare <IMG src=”?”>, înlocuind semnul de

întrebare (?) cu calea de acces la versiunea miniatură a siglei
(figura 7.59).
Figura 7.59
4. Introduceţi, în continuare </A> (figura 7.60).
Figura 7.60
317
Figura 7.61
Remarcă. Versiunea miniatură a siglei se afişează în browser. Vizitatorul va trebui să

execute clic pe această imagine pentru a se afişa versiunea originală a imaginii.
Aplicaţie
Creaţi versiunea în miniatură a imaginii follow.jpg

(c:\Windows\Web\Wallpaper\follow.jpg) – 15x15 pixeli. Utilizaţi atributul lowscr
în tag-ul <IMG> indicând calea de acces către imaginea follow.jpg de înaltă
rezoluţie, 283x212 pixeli, dimensiunile exacte ale imaginii. Navigatorul va afişa
versiunea în miniatură a imaginii pe care se va executa un clic pentru a fi
încărcată imaginea follow.jpg de înaltă rezoluţie.
Iată cum procedaţi pentru a afişa mai întâi versiunea în miniatură follow.jpg de
15x15 pixeli (mai puţin netă) în aşteptarea încărcării imaginii follow.jpg de
înaltă rezoluţie (283x212 pixeli).
318
1. Introduceţi în tag-ul <IMG> al imaginii de înaltă rezoluţie (follow.jpg)
atributul lowsrc=”?”, înlocuind semnul de întrebare (?) cu calea de
acces (follow.jpg) către imaginea de joasă rezoluţie (figura 7.62).
Figura 7.62
2. Introduceţi, în continuare height=”?” înlocuind semnul de întrebare

(?) prin valoarea în pixeli a înălţimii imaginii de înaltă rezoluţie (212
pixeli) şi apoi width=”?” înlocuind semnul de întrebare (?) prin
valoarea în pixeli a lungimii imaginii (283 pixeli), figura 7.63.
Figura 7.63

319
Figura 7.64
Remarcă. Navigatorul afişează imaginea de joasă rezoluţie în aşteptarea încărcării

imaginii de înaltă rezoluţie.
Propuneţi o versiune în miniatură a imaginii

XHTML
originale
Iată cum creăm o legătură către versiunea originală a imaginii (sigla.jpg)
pornind de la versiunea în miniatură (siglamin.jpg) a acesteia, utilizând
documentul HTML img12.htm creat anterior, pe care apoi îl convertim în
În figura 7.65 este prezentat documentul XHTML generat (automat).
Pentru afişarea icon-ului de conformitate s-a inserat codul

XHTML corespunzător.
320
Figura 7.65

figura 7.66.
Figura 7.66
321
Aplicaţie
Acceleraţi încărcarea imaginii follow.jpg (283x212 pixeli) afişând mai întâi

versiunea în miniatură a imaginii (15x15 pixeli) followmin.jpg.
Indicaţie. Utilizaţi atributul lowsrc care nu aparţine standardului oficial (X)HTML.
HTML Creaţi o imagine cu zone reactive

Puteţi crea o imagine cu zone reactive MAP, pe care apoi s-o împărţiţi în
forme (arii) diferite (dreptunghi, cerc, poligon) cu rolul de legături către
o pagină Web diferită.
O imagine cu zone reactive este o versiune extinsă a unei hiperlegături

imagine. În loc să avem o singură legătură posibilă, indiferent unde
executăm clic pe imagine, aceasta oferă mai multe legături diferite, în
funcţie de locul unde executaţi clic.
Aşadar, o singură imagine poate înlocui un meniu de tip text!
Pornind de la imaginea follow.jpg, iată cum procedăm la transformarea

acesteia într-o imagine cu zone (dreptunghiulare, circulare) reactive şi
nu … doar atât.
1. Inseraţi imaginea follow.jpg (figura 7.67).
Figura 7.67
322
2. Introduceţi în tag-ul <IMG> atributul usemap=”#?”, înlocuind
semnul de întrebare (?) cu numele (JOHNSON) pe care doriţi
să-l atribuiţi imaginii MAP (figura 7.68).
Figura 7.68
3. Executaţi clic în zona în care doriţi să introduceţi informaţii

despre imaginea MAP.
4. Introduceţi tag-ul <MAP name=”?”> înlocuind semnul de

întrebare (?) cu numele pe care l-aţi atribuit imaginii MAP (vezi
pasul 2), figura 7.69.
Figura 7.69
323
Remarci:
9 Primul lucru de care aveţi nevoie pentru o imagine cu zone reactive este,
bineînţeles, o imagine. Imaginea folosită este apoi introdusă în pagina HTML
ca oricare alta, dar cu o diferenţă importantă: usemap.
9 Atributul usemap este cel care face posibilă folosirea imaginii de referinţă ca
imagine cu zone reactive.
9 Tag-ul <MAP> are un singur atribut, name.
5. Introduceţi, în continuare tag-ul <AREA> în care urmează să

definim zona reactivă (figura 7.70).
Figura 7.70
6. Activaţi bara de spaţii şi introduceţi, în continuare, atributul

shape=”?”, înlocuind semnul de întrebare (?) cu forma zonei de
clic: rect pentru o zona dreptunghiulară, circle pentru o zonă
circulară, poly pentru o zonă de formă neregulată (figura 7.71).
Figura 7.71
324
7. Acţionaţi bara de spaţii şi introduceţi în continuare, atributul
coords=”?”, înlocuind semnul de întrebare (?) cu valorile celor
două perechi de coordonate (colţul din stânga-sus şi colţul din
dreapta-jos): 275, 97, 360, 182 (figura 7.72).
Figura 7.72
Remarci:
9 Cele două perechi de coordonate din atributul coords urmăresc poziţia
indicatorului mouse-ului faţă de colţul din stânga-sus al imaginii. Acest colţ
are coordonatele 0,0 în notaţia cu x şi y. Coordonata x, de la stânga la
dreapta, creşte pe măsură ce vă deplasaţi spre dreapta; coordonata x de sus
în jos, creşte pe măsură ce coborâţi (vezi figura 7.73).
x
9 Dreptunghiurile necesită două perechi de coordonate pentru
275, 97
colţul din stânga-sus şi colţul din dreapta-jos.
9 Cercurile necesită o pereche de coordonate pentru centrul

360, 182
cercului şi un al treilea număr pentru raza cercului.
y
9 Poligoanele necesită mai multe perechi de coordonate care
Figura 7.73 definesc puncte de-a lungul marginilor figurii.
9 Stabilirea coordonatelor reprezintă o etapă de mare importanţă. Puteţi folosi

programe de grafică dedicate care afişează coordonatele, dar pot fi introduse
erori. Soluţia este folosirea programelor dedicate pentru construirea imaginilor
cu zone reactive (programul freeware MapThis!).
325
8. Acţionaţi bara de spaţii şi introduceţi atributul href=”?”>,
înlocuind semnul de întrebare (?) cu adresa paginii Web către
care se realizează legătura, figura 7.74.
Figura 7.74
9. Repetaţi paşii 5 – 8 pentru fiecare zonă de clic.
Remarcă. Iată o listă cu instrumentele disponibile pe Web pentru crearea imaginilor cu

zone reactive:
9 http://www.mediatec.com/
9 http://www.download.com/PC/Result/TitleDetail/0,4,0–16965,501000.html
9 www.macromedia.com
9 http://members.tripod.com/-mharing/mapmaker.html
10. Introduceţi tag-ul final </MAP> (figura 7.75).
Figura 7.75
326
Remarcă. În browser, vizitatorul va trebui să execute clic pe una din zonele
reactive ale imaginii pentru a accesa pagina către care s-a realizat legătura.
Figura 7.76
Aplicaţie
Nu puţini sunt vizitatorii care dezactivează imaginile în browser-ele lor.

Pentru a reuşi să-i ţineţi aproape, propuneţi-le o versiune fără imagini, o pagină
Web numai cu text. Navigatoarele care recunosc tag-urile <LINK> vor încărca
în mod automat această pagină de substituţie.
327
Creaţi o legătură către o pagină Web care conţine numai text.
Indicaţie. Respectaţi următoarea procedură:
1. Deschideţi pagina în care doriţi să creaţi o versiune text.
2. Eliminaţi toate imaginile pe care le conţine pagina.
3. Salvaţi pagina sub un nou nume cu extensia .htm.
4. Deschideţi din nou pagina iniţială.
5. Sub tag-ul <HEAD> introduceţi <LINK rel=”versiune doar cu text”

href=”?.htm”>, înlocuind semnul de întrebare (?) cu calea de acces la
pagina de substituţie (text).
XHTML Creaţi o imagine cu zone reactive

Vizitaţi următoarele site-uri pentru a afla mai multe despre hărţile
imagine (image maps).
9 www.amazon.com;
9 www.cdnow.com;
9 http://www.org/region_info.htm1.
Pentru a crea în (X)HTML o imagine cu zone reactive numită şi imagine
interactivă (imagemap), definiţi mai întâi imaginea interactivă, atribuiţi-i
un nume (name şi id) şi divizaţi-o în zone. Definiţia imaginii interactive
se efectuează cu tag-urile <map> </map>, fiecare zonă reactivă fiind
introdusă cu un tag vid <area /> (figura 7.77).
Figura 7.77
328
Numele imaginii interactive permite navigatorului să o identifice fără
echivoc. Pentru a permite navigatorului să identifice imaginea care
aparţine fiecărei imagini interactive, transmiteţi-i numele imaginii cu
tag-ul <img /> şi cu ajutorul atributului usemap. Pentru a crea o
imagine interactivă va trebui să descompuneţi imaginea în mai multe
zone reactive cu ajutorul tag-ului <area />. Fiecare zonă reactivă
numită hotspot poate fi dreptunghiulară, circulară sau poligonală.
Indicaţi forma zonei reactive cu atributul shape. Cu atributul coords
definiţi coordonatele zonei care pot varia în funcţie de forma zonei. Nu
calculaţi singuri coordonatele zonelor reactive! Există programe
specializate care calculează automat aceste coordonate.
Iată cum procedăm pentru a transforma imaginea follow.jpg într-o

imagine cu zone reactive.
Figura 7.78
329
figura 7.79.
Figura 7.79
(X)HTML Temă
1. Descrieţi pe scurt formatele de imagine acceptate pe Web.
2. Descrieţi pe scurt procedura (X)HTML de creare a unei imagini cu
zone reactive.
330
Figura 7.80
Figura 7.81
9 www.freegraphics.com
9 www.screamdesign.com
9 www.iconbazaar.com
Conversaţia 8
Creaţi legături cu HTML 4 şi XHTML

•••••••••••••••••••••••••••••••••••••••••
f HTML 4, XHTML – Creaţi o legătură hipertext către o altă pagină Web
f HTML 4, XHTML – Creaţi legături în aceeaşi pagină Web
f HTML 4, XHTML – Creaţi o legătură externă către un site Web, având ca
suport o imagine
f HTML 4, XHTML – Creaţi o legătură hipertext (externă) către un alt site
Web
f HTML 4, XHTML – Creaţi o legătură hipertext externă către o adresă
e-mail
f HTML 4, XHTML – Modificaţi culoarea legăturilor hipertext
f HTML 4, XHTML – Creaţi o legătură hipertext către o pagină care se
deschide în propria sa fereastră
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
Creaţi o legătură hipertext către o altă

HTML
pagină Web
Hipertextul reprezintă esenţa unui site Web. Fără legături între pagini,
World Wide Web-ul nu ar putea exista.
Legătura hipertext poate fi un cuvânt, un grup de cuvinte, în general

colorate şi subliniate, pe care executaţi un clic pentru a naviga din
pagină în pagină, din site în site.
332
Legătura hipertext poate fi de asemenea şi o imagine. Atunci când
activaţi o legătură hipertext cursorul se transformă într-o mână iar bara
de stare indică adresa acestei legături.
Iată cum creaţi o legătură hipertext din pagina test.html către pagina
leg.html a aceluiaşi site. Creaţi mai întâi cele două pagini în folder-ul My
Documents. „Ziua lungă” este textul de legătură.
1. Creaţi în acelaşi folder (My Documents) cele două pagini Web:

test.html şi leg.html.
Remarci:
9 Test.html conţine următorul text: „Exemplu de legătură hipertext către o altă
pagină a site-ului”.
9 Leg.html conţine textul: „Ziua în care vin peştii” şi imaginea follow.jpg.
2. Introduceţi tag-ul <A> cu atributul <href=”?”>, înlocuind
semnul de întrebare (?) cu numele paginii (leg.html) către care
se face link-ul (figura 8.1).
Figura 8.1
333
Remarci:
9 Pentru a realiza o legătură hipertext utilizaţi tag-ul pereche <A> (anchor, în
limba engleză) cu atributul href (referinţă hypertext), absolut necesar într-o
legătură.
9 Nu includeţi direct elementul <A> în corpul documentului <BODY> ci într-un
alt element (<P>, <DIV>, <TD>, de exemplu).
9 Textul de legătură pe care se execută clic va fi afişat cu o culoare albastră şi
subliniat.
9 Atenţie la ghilimele (rotunjite sau nu) şi la apostrofuri (drepte şi nu rotunjite!)
9 Nu plasaţi două legături hipertext, una lângă cealaltă. Vizitatorii pot crede că
nu există decât o legătură şi nu două legături distincte.
9 Pentru accesarea paginilor Web ale aceluiaşi site puteţi folosi butoanele Back
(înapoi) şi Forward (înainte) ale browser-ului.
3. Introduceţi textul legăturii „Ziua lungă” (figura 8.2).
Figura 8.2
4. Introduceţi tag-ul de închidere </A> (figura 8.3).
Figura 8.3

334
Figura 8.4
8. Executaţi clic pe Ziua lunga. Se afişează pagina leg.htm (figura

8.5).
Figura 8.5
Remarci:
9 În browser, legătura hipertext (Ziua lungă) apare colorată şi subliniată.
Executaţi clic pe Ziua lungă pentru a accesa pagina leg.htm.
9 Organizarea paginilor Web depinde de tipul de informaţii pe care le conţin şi
de legăturile care le relaţionează.
9 Organizarea paginilor Web poate fi: centralizată (pagina de index este
dispecerul paginilor din structura site-ului); liniară sau secvenţială (principiul
de citire a unei cărţi); ierarhică (toate paginile sunt legate la pagina de index;
organizarea ierarhică este ideală pentru site-urile cu multe ramificaţii);
tentaculară (de evitat!).
9 Este important ca în faza de proiectare a site-ului să reflectaţi şi la sistemul de
navigare.
• Construiţi „story board-ul” pentru fiecare pagină a site-ului
dumneavoastră (story board-ul trebuie să descrie paginile site-ului şi
conţinutul acestora).
• Organizaţi navigarea în cadrul site-ului. Se impune ca fiecare pagină a
site-ului să fie prevăzută cu o legătură de retur către pagina de index
(pentru a nu vă „pierde” vizitatorii!).
335
Creaţi o legătură hipertext către o altă
XHTML pagină Web
Şi în XHTML tag-ul care creează o legătură hipertext către o altă pagină
Web este <a> (litera iniţială a cuvântului englezesc anchor) cu atributul
href (hypertext reference, în limba engleză). Nu uitaţi regula XHTML:
atributele se scriu cu minuscule iar valorile acestora trebuie să fie
încadrate între ghilimele.
Să trecem la treabă.
Iată cum creaţi o legătură hipertext din pagina test.html către pagina
leg.html a aceluiaşi site. Ziua lungă este textul de legătură. Cele două
pagini au fost create în folder-ul My Documents (vezi aplicaţia HTML).
În figura 8.6 se prezintă documentul XHTML creat manual.
Figura 8.6
Remarcă. Atribuirea unui stil paragrafului <p> (în aplicaţia noastră) cu ajutorul
atributului style este metoda cea mai rapidă şi cea mai puţin complicată (vezi
Conversaţia 3).
336

Figura 8.7
HTML Creaţi legături în aceeaşi pagină Web

Pentru a crea legături în cadrul aceleaşi pagini, trebuie mai întâi să
inseraţi un „reper” în locul dorit. Aceste repere se numesc ancore.
A crea o ancoră înseamnă a defini un text, un paragraf etc., ca pe un …

semn. Puteţi apoi propune o legătură către aceasta, astfel încât
vizitatorul să acceseze direct un subiect, o temă etc.
Aşadar, două sunt etapele pe care trebuie să le parcurgeţi:
9 Crearea ancorei (numite);
9 Crearea legăturii către ancoră.
Iată cum creăm ancora (numită) cu numele „LUMINA BLÂNDA” în cadrul

textului cunoscut din aplicaţiile precedente.
337
1. Introduceţi în locul indicat, în tag-ul <A> atributul name=”?”,
înlocuind semnul de întrebare (?) cu numele ancorei – „LUMINA
BLÂNDA” (figura 8.8).
Figura 8.8
2. Introduceţi tag-ul final </A> (figura 8.9).
Figura 8.9
.
338
Figura 8.10
Remarcă. În navigator, ancora nu se afişează.
Pentru a facilita navigarea, mai ales atunci când pagina dumneavoastră

Web este foarte lungă, realizaţi o legătură hipertext către ancora
corespunzătoare, din aceeaşi pagină sau din altă pagină.
Iată cum creăm o legătură „Bine” către ancora (numită) „LUMINA

BLÂNDA” pe care am creat-o anterior.
1. Introduceţi în locul indicat, tag-ul <A href=”#?”>, înlocuind

semnul de întrebare (?) cu numele ancorei „LUMINA BLÂNDA”
(figura 8.11).
Figura 8.11
339
2. Introduceţi tag-ul final </A> după cuvântul „Bine” (figura
8.12).
Figura 8.12
.
Figura 8.13 !
6. Executaţi clic pe textul de legătură. Rezultatul link-ului este

ilustrat în figura 8.14.
#_______________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
340
Figura 8.14
Remarcă. În navigator, legătura către o ancoră se afişează într-o culoare diferită de

legăturile hipertext clasice.
Aplicaţii
Creaţi o legătură către o ancoră situată în altă pagină.
Indicaţie. Utilizaţi tag-ul <A href=”?#X”>, înlocuind semnul de întrebare (?) cu

adresa paginii şi X-ul cu numele ancorei.
În următorul text sunt descrise serviciile oferite de Societatea LUMINA

BLÂNDA.
1. Servicii TURISM
2. Servicii ACADEMICE
3. Servicii INFORMATICE
unde,
9 Servicii TURISM: Valea Prahovei, Valea Oltului, Valea Domanului,

Valea Arieşului, Valea Cernei, Valea Loirei.
9 Servicii ACADEMICE: Organizare expoziţii, Organizare simpozioane
naţionale, Organizare simpozioane internaţionale, Organizare târg de
job-uri, Organizare work-shop-uri.
9 Servicii INFORMATICE: Training, Service reţele de calculatoare,
Service Video Conferinţe, Pagini Web.
Creaţi trei ancore: Secţiune 1, Secţiune 2, Secţiune 3 ce corespund celor trei
tipuri de servicii (Servicii TURISM, Servicii ACADEMICE, Servicii INFORMATICE).
Creaţi de asemenea legături către ancorele numite, textele de legătură fiind
341
denumirile serviciilor (Servicii TURISM, Servicii ACADEMICE, Servicii
INFORMATICE).
Iată cum creăm ancorele (numite) şi legăturile către acestea.
1. Introduceţi textul aplicaţiei (figura 8.15).
Figura 8.15
2. Creaţi trei ancore numite: Secţiune 1, Secţiune 2, Secţiune 3 ce

corespund celor trei tipuri de servicii - Servicii TURISM respectiv
Servicii ACADEMICE şi Servicii INFORMATICE.
2.1 Introduceţi înaintea cuvintelor Servicii TURISM, tag-ul <A

name=”?”>, înlocuind semnul de întrebare (?) cu numele
ancorei „Secţiune 1” (figura 8.16).
342
Figura 8.16
2.2 Introduceţi tag-ul final </A> (figura 8.17).
Figura 8.17
2.3 Introduceţi înaintea cuvintelor Servicii ACADEMICE, tag-ul <A

name=”?”>, cu numele ancorei „Secţiune 2”.
Figura 8.18

343
Figura 8.19
2.5 Introduceţi înaintea cuvintelor Servicii INFORMATICE, tag-ul

<A name=”?”>, înlocuind semnul de întrebare (?) cu numele
ancorei „Secţiune 3” (figura 8.20).
Figura 8.20
Figura 8.21
3. Creaţi ancora numită „START” la începutul documentului.
3.1 Introduceţi imediat după tag-ul <BODY>, tag-ul <A

name=”?”>, înlocuind semnul de întrebare (?) cu numele
ancorei „START” (figura 8.22).
#_________________________________________________________
___________________________________________________________
___________________________________________________________
344
Figura 8.22
Figura 8.23
4. Creaţi la începutul documentului, un meniu (o listă numerotată)

pentru serviciile oferite de societatea LUMINA BLÂNDĂ (figura 8.24).
Figura 8.24
5. Organizaţi textul, pentru fiecare din cele trei servicii (TURISM,

ACADEMICE, INFORMATICE) în liste cu simboluri (figura 8.25).
345
Figura 8.25
6. Creaţi legături către ancorele numite: Secţiune 1, Secţiune 2, Secţiune

3.
6.1 Introduceţi înaintea primului element al listei ordonate din

meniu, tag-ul <A href=”#?”>, înlocuind semnul de întrebare
(?) cu numele ancorei „Secţiune 1” (figura 8.26).
346
Figura 8.26
Remarcă. „Servicii TURISM” reprezintă textul de legătură către ancoră.
Figura 8.27
6.3 Introduceţi înaintea celui de-al doilea element al listei cu

simboluri din meniu, tag-ul <A href=”#?”>, înlocuind semnul
de întrebare (?) cu numele ancorei „Secţiune 2” (figura 8.28).
Figura 8.28
347
Remarcă. „Servicii ACADEMICE” reprezintă textul de legătură către ancoră.
Figura 8.29
6.5 Introduceţi înaintea celui de-al treilea element al listei cu

simboluri din meniu, tag-ul <A href=”#?”>, înlocuind semnul
de întrebare (?) cu numele ancorei „Secţiune 3” (figura 8.30).
Figura 8.30
Remarcă. „Servicii INFORMATICE” reprezintă textul de legătură către ancoră.
#_________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
348
Figura 8.31
7. Creaţi legături din fiecare secţiune către ancora „START”.
7.1 Introduceţi la finele primei secţiuni (Secţiune 1), tag-ul <A

href=”#?”>, înlocuind semnul de întrebare (?) cu numele
ancorei „Start” (figura 8.32).
Figura 8.32
Remarcă. „Revenire START” reprezintă textul de legătură către ancoră.
Figura 8.33
349
7.3 Introduceţi la finele celei de-a doua secţiuni (Secţiune 2),
tag-ul <A href=”#?”>, înlocuind semnul de întrebare (?) cu
numele ancorei „Start” (figura 8.34).
Figura 8.34
Figura 8.35
7.5 Introduceţi la finele celei de-a treia secţiuni (Secţiune 3), tag-ul
<A href=”#?”>, înlocuind semnul de întrebare (?) cu numele
ancorei „Start” (figura 8.36).
Figura 8.36
Figura 8.37
350
Figura 8.38
351
Remarci:
9 În navigator, ancora nu se afişează!
9 În navigator, legăturile către ancore se afişează într-o culoare diferită faţă de
legăturile hipertext clasice.
XHTML Creaţi legături în aceeaşi pagină Web

Conform noilor standarde XHTML şi XML (care vor înlocui probabil
HTML-ul!!) consorţiul W3 impune un nou atribut pentru tag-ul <a>
numit id în locul vechiului atribut name folosit pentru crearea ancorelor.
Pentru a vă asigura că sunteţi la curent cu noul standard, cel mai
inteligent lucru de făcut este să folosiţi ambele atribute în documentele
dumneavoastră.
Iată cum procedăm pentru a crea în XHTML ancora (numită) „LUMINA

BLÂNDĂ” şi legătura „BINE” către aceasta.
Figura 8.39
352
Remarcă. XHTML utilizează <a id=”Anchor Name”> </a> în loc de <a name=”Anchor
Name”> </a> pentru a crea o ancoră cu nume. Este singura contradicţie între HTML4
şi XHTML1 dar compatibilitatea cu cele două norme este uşor de conservat. Utilizaţi
pur şi simplu <a id=”Anchor Name” name=”Anchor Name”> </a> (Această repetiţie
este o sursă de erori!).

Figura 8.40
Aplicaţie
Creaţi trei ancore: Secţiune1, Secţiune2, Secţiune3 ce corespund celor trei

tipuri de servicii oferite de Societatea LUMINA BLANDA (vezi aplicaţia
precedentă). Creaţi de asemenea legături către ancorele numite, textele de
legătură fiind denumirile serviciilor (Servicii TURISM, Servicii ACADEMICE,
Servicii INFORMATICE).
Iată cum procedăm pentru a crea în XHTML cele trei ancore şi legăturile către
acestea, pornind de la documentul HTML link3.htm creat anterior, pe care apoi
îl convertim în XHTML cu programul utilitar HTML-TIDY.

353
Figura 8.41

Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura
8.42.
354
Figura 8.42
355
Creaţi o legătură externă către un site Web,
HTML
având ca suport o imagine
Puteţi folosi nu numai cuvinte pentru o legătură, ci şi imagini.
Iată cum plasăm o legătură grafică, către site-ul UPG din Ploieşti, în
imaginea, de-acum cunoscută follow.jpg.
1. Introduceţi în tag-ul <A> atributul href=”?”, înlocuind semnul

de întrebare (?) cu adresa site-ului UPG, www.upg-ploiesti.ro,
figura 8.43.
Figura 8.43
356
2. Introduceţi <IMG src=”?”>, înlocuind semnul de întrebare (?)
cu calea de acces spre imagine în care se plasează legătura
hipertext (figura 8.44).
Figura 8.44
Figura 8.45
.
357
Figura 8.46
Remarcă. În navigator, legătura hipertext (plasată în imagine) nu este vizibilă.

Atunci când se trece cu mouse-ul peste imagine, cursorul ia forma unei mâini
pentru a semnala prezenţa unei legături hipertext.
Aplicaţie
Dacă aţi creat o versiune în miniatură (micapoza.gif) a imaginii poza.gif,

realizaţi o legătură hipertext către versiunea originală; (poza.gif este creaţia
dumneavoastră!)
Iată cum realizăm legătura hipertext către versiunea originală a imaginii pe care
aţi creat-o la începutul conversaţiei, cu efort propriu.
1. Introduceţi tag-ul <A href=”?”>, înlocuind semnul de întrebare (?) cu

calea de acces către imaginea originală (poza.gif), figura 8.47.
358
Figura 8.47
2. Inseraţi imaginea în miniatură micapoza.gif.
Figura 8.48
359
3. Introduceţi tag-ul final </A>.
Figura 8.49
Figura 8.50
Remarcă. În navigator, vizitatorul nu va avea decât să execute clic pe imagina în

miniatură (sau text) pentru a accede la versiunea originală.
360
Creaţi o legătură externă către un site Web,
XHTML având ca suport o imagine
O imagine poate … ascunde o legătură hipertext. O legătură grafică este
ideală pentru navigarea pe Internet. Lăsaţi, aşadar imaginaţia
dumneavoastră să lucreze!
Iată cum procedăm pentru a crea o legătură grafică, către site-ul UPG
din Ploieşti, în imaginea follow.jpg, pornind de la documentul HTML
link4.htm creat anterior, pe care apoi îl convertim în XHTML cu
Figura 8.51

figura 8.52.
361
Figura 8.52
Aplicaţie
Creaţi în XHTML o legătură către poza.gif (creaţia dumneavoastră) utilizând

versiunea micapoza.gif.
Indicaţie. Utilizaţi secvenţa XHTML definită în figura 8.53 şi succes în

continuare!
Figura 8.53
Creaţi o legătură hipertext (externă) către un

HTML
alt site Web
Puteţi crea în pagina dumneavoastră Web o legătură hipertext externă,
către alt site care tratează în detaliu, subiectul pe care-l abordaţi.
362
Iată cum creaţi în pagina dumneavoastră Web o legătură hipertext
externă, către site-ul www.upg-ploiesti.ro pentru a obţine detalii despre
cele cinci facultăţi (şi nu doar atât!) ale Universităţii „Petrol-Gaze” din
Ploieşti. Textul de legătură este „UPG Ploieşti”.
1. Introduceţi în tag-ul <A> atributul href=”http://?” înlocuind

semnul de întrebare (?) cu adresa site-ului către care se face
link-ul – www.upg-ploiesti.ro (figura 8.54) .
Figura 8.54
2. Introduceţi textul de legătură „UPG Ploieşti” (figura 8.55).
Figura 8.55
363
Figura 8.56
Remarci:
9 Verificaţi legăturile (externe)!
9 Analizaţi timpii de încărcare pentru toate legăturile, astfel încât să nu vă
pierdeţi vizitatorii!
Figura 8.57
Remarcă. În browser, legătura hipertext externă apare colorată (în albastru) şi

subliniată.
364
Creaţi o legătură hipertext (externă) către un
XHTML
alt site Web
Principiul este exact acelaşi cu cel pe care l-am detaliat la HTML: utilizaţi
tag-ul <a> căruia îi transmiteţi atributul href cu URL-ul corespunzător.
Remarcă. Este posibil ca foarte curând, mai precis când XML se va impune ca
standard, un nou termen: URI (Uniform Resource Identifier) să ia locul …
bătrânului URL (Uniform Resource Locator).
Iată cum creaţi în pagina dumneavoastră Web o legătură hipertext
externă, către site-ul www.upg-ploiesti.ro pornind de la documentul
link1.htm creat anterior, pe care apoi îl convertim, în XHTML cu
Figura 8.58
365
figura 8.59.
Figura 8.59
Creaţi o legătură hipertext externă către o

HTML
adresă e-mail
Puteţi crea o legătură hipertext către propria adresă de e-mail.
Vizitatorul care doreşte să vă scrie, nu va avea decât să redacteze
mesajul iar apoi să-l expedieze.
Iată cum procedăm pentru a crea o legătură către adresa

ldumitrascu@mail.upg-ploiesti.ro. Textul legăturii este „Primiţi mesajul”.
1. Introduceţi în tag-ul <A> atributul href=”mailto:?”, înlocuind

semnul de întrebare (?) cu adresa de e-mail (figura 8.60).
366
Figura 8.60
2. Introduceţi textul legăturii: „Primiţi mesajul” (figura 8.61).
Figura 8.61
Figura 8.62
367
Figura 8.63
7. Activaţi legătura.
Figura 8.64
Remarci:
9 Navigatorul semnalează legătura către adresa e-mail.
9 Atunci când vizitatorul execută clic pe o astfel de legătură, aplicaţia sa de poştă
electronică se activează şi afişează în mod automat o fereastră pentru mesaje
(figura 8.64).
368
Aplicaţii
Creaţi o legătură hipertext către un grup de discuţii.
Indicaţie. Utilizaţi tag-ul <A href=”news://?”>, înlocuind semnul de întrebare

(?) cu adresa grupului de discuţii.
Creaţi o legătură hipertext către un site FTP (File Transfer Protocol).
Indicaţie. Utilizaţi tag-ul <A href=”ftp://?”>, înlocuind semnul de întrebare (?)

cu calea de acces către site.
Creaţi o legătură hipertext externă către o

XHTML
adresă e-mail
Iată cum procedăm pentru a crea o legătură către adresa e-mail
ldumitrascu@mail.upg-ploiesti.ro. Textul legăturii este „Primiţi mesajul”.
Figura 8.65
Remarci:
9 Ca alinierea textului să fie conformă normelor XHTML, utilizaţi atributul CSS
text-align în locul atributului align în tag-ul <p>.
9 Protocolul mailto nu este un standard XHTML dar … este popular şi
recunoscut.
369

Figura 8.66
Aplicaţii
Creaţi o legătură hipertext către un grup de discuţii.
Creaţi o legătură hipertext către un site FTP.
Remarcă. Cele mai utilizate protocoale pentru link-uri în interiorul documentelor XHTML
sunt: http://; file://; ftp://; gopher://; telnet://; wais://; mailto://; news://.
HTML Modificaţi culoarea legăturilor hipertext

În mod implicit legăturile hipertext se afişează în albastru. Puteţi
modifica această culoare, în armonia culorii background-ului.
Iată cum afişaţi în alb legătura hipertext „Primiţi mesajul” către adresa
e-mail ldumitrascu@mail.upg-ploiesti.ro.
1. Introduceţi în tag-ul <BODY> atributul link=?, înlocuind semnul

de întrebare (?) cu numele sau valoarea hexazecimală a culorii
(white), figura 8.67.
370
Figura 8.67
Figura 8.68
Remarcă. Navigatorul afişează legătura hipertext în culoarea definită (albă).
Aplicaţii
Schimbaţi culoarea legăturilor hipertext vizitate.

371
Indicaţie. Utilizaţi tag-ul <BODY vlink=”?”>, înlocuind semnul de întrebare (?)
cu numele sau valoarea hexazecimală a culorii preferate.
Schimbaţi culoarea legăturilor hipertext active (nevizitate). În mod implicit,

aceste legături sunt de culoare roşie.
Indicaţie. Utilizaţi tag-ul <BODY alink=”?”>, înlocuind semnul de întrebare (?)

cu numele sau valoarea hexazecimală a culorii preferate.
XHTML Modificaţi culoarea legăturilor hipertext

În XHTML ca şi în HTML aveţi posibilitatea de a schimba culoarea
legăturilor dacă … albastru şi violet nu vă mai convin!
Iată cum afişaţi în alb legătura hipertext „Primiţi mesajul” către adresa
e-mail: ldumitrascu@mail.upg-ploiesti.ro. Se vor utiliza stilurile link.
Figura 8.69
Remarci:
9 Selectorul a:link{color:…} stabileşte stilurile pentru link-urile nevizitate.
9 Selectorul a:visited{color:…} stabileşte stilurile pentru link-urile vizitate.
9 Selectorul a:active{color:…} stabileşte stilul pentru link-ul în timpul legăturii.
372
9 Selectorul a:hover{color:…} stabileşte stilul pentru link în timp ce mouse-ul
trece pe deasupra lui.
9 Selectorii a:link{color:…; text-decoration: none}; a:visited {color:…;
text-decoration: none}; a:active{color:…; text-decoration:none} dezactivează
sublinierea legăturilor pentru cele trei stări.

Figura 8.70
Aplicaţii:
Schimbaţi culoarea legăturilor hipertext vizitate.
Indicaţie. Utilizaţi pseudo-clasa (stilul link) a:visited{color: …}.
Schimbaţi culoarea legăturilor hipertext active (nevizitate).
Indicaţie. Utilizaţi pseudo-clasa a:active{color: …}.
Creaţi o legătură hipertext către o pagină

HTML
care se deschide în propria sa fereastră
Puteţi deschide în propria fereastră o pagină Web către care aţi prevăzut
o legătură.
Iată cum creaţi o legătură către o pagină care se deschide în propria

fereastră. Textul legăturii este „Fereastră proprie”.
373
1. Introduceţi tag-ul <A href=”?” target=X>, înlocuind semnul de
întrebare (?) cu calea de acces la pagină şi X-ul cu numele
paginii (figura 8.71).
Figura 8.71
2. Introduceţi textul legăturii „Fereastră proprie” (figura 8.72).
Figura 8.72

374
Figura 8.73
Figura 8.74
Remarcă. În navigator a doua fereastră (figura 8.75) se deschide atunci când legătura
este activată.
375
Figura 8.75
Creaţi o legătură hipertext către o pagină

XHTML
care se deschide în propria sa fereastră
Iată cum creaţi o legătură către o pagină Web care se deschide în
propria sa fereastră, pornind de la documentul HTML link8.htm creat
anterior, pe care apoi îl convertim, în XHTML cu programul utilitar
HTML-TIDY. Textul de legătură este „Fereastra proprie”.

376
Figura 8.76

figura 8.77.
Figura 8.77
Remarcă. În navigator a doua fereastră (figura 8.78) se deschide atunci când legătura
este activată.
377
Figura 8.78
(X)HTML Temă
1. Ce este o legătură hipertext? Funcţia Help din Windows este o
legătură hipertext?
2. Care sunt atributele tag-ului <A>?
3. Descrieţi pe scurt tipurile de legături studiate.
4. Creaţi o legătură hipertext externă către următoarele site-uri de
vacanţă: http://www.canada.com; http://www.greece.gr;
http://www.dolcevita.com; http://www.paris-france.org/parisweb/.
378
Figura 8.79
6. Comentaţi codul XHTML care inserează icon-ul de conformitate
9 http://www.tripod.fr
9 http://geocities.yahoo.com/home/
9 http://www.multimania.fr
Conversaţia 9
Creaţi tabele cu HTML 4 şi XHTML

•••••••••••••••••••••••••••••••••••••••••
f HTML 4, XHTML – Creaţi un tabel
f HTML 4, XHTML – Aliniaţi un tabel
f HTML 4, XHTML – Atribuiţi un titlu tabelului
f HTML 4, XHTML – Aplicaţi o bordură tabelului
f HTML 4, XHTML – Aliniaţi orizontal datele unui tabel
f HTML 4, XHTML – Aliniaţi vertical datele unui tabel
f HTML 4, XHTML – Modificaţi spaţiul dintre celulele unui tabel
f HTML 4, XHTML – Modificaţi dimensiunile liniilor unui tabel
f HTML 4, XHTML – Modificaţi marginile interioare ale celulelor unui tabel
f HTML 4, XHTML – Extindeţi o celulă pe mai multe coloane sau linii
f HTML 4, XHTML – Aplicaţi o culoare elementelor unui tabel
f HTML 4, XHTML – Aplicaţi o imagine de background unui tabel sau unei
celule a tabelului
f HTML 4, XHTML – Utilizaţi un tabel ca un instrument de punere în pagină
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
HTML Creaţi un tabel
Definiţi un tabel
Iniţial, tabelele au fost proiectate pentru afişarea simplă a informaţiilor
în linii şi coloane. La puţin timp după introducerea lor în HTML, tabelele
au devenit cel mai puternic şi util instrument pentru formatarea paginilor
380
Web (poziţionarea textului şi a imaginilor în pagină; crearea unei borduri
în 3D în jurul unui text sau imagini etc.).
Remarcă. Înainte de a începe să creaţi un tabel vă recomandăm următoarele:

9 listaţi toate datele înainte de a fi inserate în tabel;
9 definiţi structura tabelului – numărul de linii, coloane, antet etc.;
9 realizaţi un crochiu al viitorului tabel pentru a putea judeca aspectul
acestuia.
Iată cum procedăm pentru a defini în HTML, următorul tabel (Tabelul
9.1) cu patru linii şi trei coloane.
LISTA CURSURILOR DE INFORMATICĂ

Denumire curs Durata (în ore) Costuri (în $)
UTILIZARE PC-uri 50 60
TEHNOLOGII INTERNET 60 90
Tabelul 9.1 AUTOCAD 50 70
Remarci:
9 Tabelele sunt alcătuite din trei elemente de bază: linii, coloane şi celule.
Coloană
Celulă
Tabelul 9.2 Linie
9 Unitatea de bază a unui tabel este celula. Într-o celulă pot fi plasate: text,
cifre, imagini, link-uri etc.
9 Glumind puţin, celula mai poate fi definită şi ca … un loc răcoros!!
9 Organizarea tabelului este simplă: titlul tabelului; capul de tabel; celulele de
date.
1. Introduceţi datele din prima linie a tabelului (capul de tabel),

tastându-le pur şi simplu, imediat sub tag-ul <H2> (figura 9.1).
381
Figura 9.1
2. Acţionaţi de mai multe ori tasta ENTER după care introduceţi

următoarea linie (de date) a tabelului (figura 9.2).
Figura 9.2
3. Repetaţi pasul 2 până când aţi terminat de introdus toate liniile

de date (figura 9.3).
Figura 9.3
382
4. Introduceţi tag-ul <TABLE> înaintea primei linii a tabelului şi
tag-ul </TABLE> după ultima linie a tabelului (figura 9.4).
Figura 9.4
Remarci:
9 Un tabel este marcat, la începutul şi la sfârşitul său cu tag-urile <TABLE>
respectiv </TABLE>.
9 Tag-ul <TABLE> admite atribute.
5. Introduceţi tag-ul <TBODY> după tag-ul <TABLE> şi tag-ul
</TBODY> înaintea tag-ului </TABLE> (figura 9.5).
383
Figura 9.5
Remarcă. Elementul <TBODY> marchează corpul tabelului. Elementul <TABLE> trebuie

să conţină cel puţin un element <TBODY>.
Figura 9.6
384
Definiţi liniile tabelului
Pentru a putea crea linia de antet şi liniile de date ale tabelului va trebui,
mai întâi să le definim.
Iată cum definim în HTML toate cele patru linii pe care le-aţi introdus în
aplicaţia precedentă.
1. Introduceţi tag-ul <TR> înaintea primei linii a tabelului – linia

antet, imediat sub tag-ul <TBODY> (figura 9.7).
Figura 9.7
2. Introduceţi tag-ul <TR> înaintea celorlalte linii ale tabelului –

liniile de date (2,3 şi 4), figura 9.8.
Figura 9.8
385
3. Introduceţi tag-ul </TR> la sfârşitul fiecărei linii a tabelului
(figura 9.9).
Figura 9.9
Remarci:
9 Tag-ul <TR> admite atribute.
9 Tag-ul de închidere </TR> este opţional.
9 Tag-urile </TR> sunt închise în mod automat de un nou tag <TR> sau de
tag-ul de închidere </TABLE>.
9 Tag-urile </TR> sunt recomandate pentru depanări şi revizuiri ulterioare.

386
Figura 9.10
Definiţi celulele antet şi celulele de date

După ce am marcat începutul şi sfârşitul celor patru linii ale tabelului, cu
tag-urile <TR> respectiv </TR> urmează să definim celulele tabelului:
celulele antet şi celulele de date.
Iată cum definim cele trei celule antet din cadrul primei linii a tabelului –
linia de antet.
1. Introduceţi tag-urile <THEAD> şi </THEAD> înaintea primului

tag <TR>, respectiv după primul tag </TR> (figura 9.11).
387
Figura 9.11
Remarci:
9 Elementul <THEAD> marchează en-tet-ul tabelului.
9 Elementul <THEAD> se plasează întotdeauna după <TABLE> şi înainte de
elementele <TBODY>.
9 Pentru a crea un … „picior” de tabel înlocuiţi <THEAD> cu <TFOOT>. Cu
<TFOOT> puteţi crea totaluri la baza unei coloane. Elementul <TFOOT>
trebuie să urmeze elementului <THEAD> şi să preceadă elementul
<TBODY>.
2. Introduceţi tag-ul <TH> înaintea textului fiecărei celule antet.
Figura 9.12
388
Remarci:
9 Tag-ul de închidere </TH> este opţional.
9 Tag-ul <TH> admite atribute.
9 Tag-urile </TH> sunt recomandate pentru depanări şi revizuiri ulterioare.
Figura 9.13
Remarci:
9 Navigatorul afişează linia de antet pe ultimul rând deoarece nu recunoaşte
tipul liniilor cum sunt cele de sus.
9 Textul din cadrul unui tag <TH> este afişat cu aldine (bolduit) şi este centrat
orizontal în celulă.
Pentru a defini celulele de date, care reprezintă corpul tabelului – liniile

2,3 şi 4 (liniile de date), urmăriţi procedura descrisă în continuare.
1. Introduceţi tag-ul <TD> înaintea conţinutului fiecărei celule de

date care aparţin celor trei linii de date (figura 9.14).
389
Figura 9.14
Remarci:
9 Tag-ul <TD> admite atribute.
9 Tag-ul de închidere </TD> este opţional.
9 Tag-urile </TD> sunt închise în mod automat de un nou tag <TD> sau de
tag-ul de închidere </TABLE>.
9 Tag-urile </TD> sunt recomandate pentru depanări şi revizuiri ulterioare.
9 Folosind doar cele trei tag-uri: <TABLE>, <TR>, <TD> puteţi crea o gamă
larga de machete practice şi atractive pentru pagina dumneavoastră Web.
9 Netscape Navigator (de la versiunea 6 în sus), Internet Explorer (de la
versiunea 4 în sus) recunosc tabelele HTML 4.01.
9 Navigatorul Opera nu recunoaşte tabelele HTML 4.01.

390
Figura 9.15
Remarcă: Navigatorul afişează celulele de date ale tabelului.
XHTML Creaţi un tabel

Definiţi un tabel
Iată cum procedăm pentru a defini în XHTML tabelul „LISTA
CURSURILOR DE INFORMATICĂ” cu patru linii şi trei coloane (vezi
paragraful anterior).

391
Figura 9.16
Remarci:
9 În XHTML zona unui tabel este definită cu tag-urile <table> </table>.
9 Elementul <tbody> marchează corpul tabelului.
Validaţi documentul XHTML 1.0 cu aplicaţia validator. Rezultatele

392
Figura 9.17
Definiţi liniile tabelului

Iată cum definim în XHTML toate cele patru linii ale tabelului pe care
l-aţi introdus în aplicaţia precedentă.
În figura 9.18 este prezentat (parţial) documentul XHTML creat manual.
Figura 9.18
393
Remarci:
9 Pentru fiecare linie a tabelului, inseraţi tag-urile <tr> </tr> între tag-urile
<tbody></tbody>.
9 Pentru o mai bună lizibilitate, indentaţi cele trei nivele (minim) ale unui tabel:
tabelul extern, liniile şi celulele (figura 9.19).
Figura 9.19
Validaţi documentul XHTML 1.0 cu aplicaţia validator, iar apoi vizualizaţi

pagina Web în Internet Explorer.
Definiţi celulele antet si celulele de date

Iată cum definim cele trei celule antet şi celulele de date (liniile 2, 3 şi
4), care reprezintă corpul tabelului.
Figura 9.20
394
Remarci:
9 Utilizaţi caracteristicile tabelelor XHTML care dau mai multă siguranţă în
activitatea de formatare – thead (marchează secţiunea de header), tbody
(marchează corpul tabelului), tfoot (marchează secţiunea de picior a
tabelului), colgroup (identifică grupul de coloane ale tabelului), col (identifică
coloanele unui tabel în interiorul grupului de coloane; este un element vid).
9 O bună parte dintre noi uită tag-urile de închidere: </table>, </tbody>,
</thead>, </tr>, </td>, </th>, care sunt facultative în HTML 4 dar ele sunt
obligatorii în XHTML. Din acest motiv este bine să începeţi prin a crea
structura de bază a unui tabel (table, thead, tbody, tr, td, th) după care
adăugaţi textul corespunzător.
Validaţi documentul XHTML 1.0 cu aplicaţia validator. Rezultatele

Figura 9.21
HTML Aliniaţi un tabel

Centrând şi aliniind un tabel puteţi ameliora prezentarea generală a
paginii dumneavoastră Web.
Iată cum centraţi tabelul „LISTA CURSURILOR DE INFORMATICĂ” pe

care l-aţi creat în aplicaţia precedentă.
395
1. Introduceţi în tag-ul <TABLE> atributul align=”center”.
Figura 9.22
Remarci:
9 Pentru centrarea tabelului puteţi utiliza şi tag-ul <CENTER>. Procedura este
următoarea: introduceţi <CENTER> deasupra tag-ului <TABLE> şi
</CENTER> dedesubtul tag-ului </TABLE>.
9 Tag-ul <CENTER> continuă să fie recunoscut de browser-e dar, încet, încet
el va dispare.
9 Pentru centrarea tabelului puteţi utiliza şi tag-ul <TBODY align=”center”>.
Figura 9.23
396
Remarcă. În navigator, tabelul se afişează centrat.
Pentru a alinia la dreapta sau la stânga tabelul, urmăriţi procedura

descrisă în continuare.
1. Introduceţi în tag-ul <TABLE> sau <TBODY> atributul

align=”right” sau align=”left” pentru aliniere la stânga.
Figura 9.24
Figura 9.25
Remarcă. În navigator tabelul se afişează aliniat la dreapta.

397
XHTML Aliniaţi un tabel

După ce aţi definit un tabel, puteţi adăuga opţiunile de formatare
corespunzătoare (alinieri, borduri, culori etc.) astfel încât pagina
dumneavoastră Web să devină cât mai atractivă. Întrucât cea mai mare
parte a acestor opţiuni nu sunt opţiuni standard XHTML, se recomandă
utilizarea foilor de stiluri.
Iată cum procedăm pentru a centra şi a alinia (stânga/dreapta) tabelul

„LISTA CURSURILOR DE INFORMATICĂ”.
În figura 9.26 este prezentat documentul (parţial) XHTML (creat

manual) pentru centrarea tabelului menţionat – varianta 1.
Figura 9.26

398
Figura 9.27
În figura 9.28 este prezentat documentul (parţial) XHTML (creat

manual) pentru centrarea tabelului menţionat – varianta 2.
Figura 9.28
Remarci:
9 În XHTML atributul align nu este utilizat cu tag-ul <table>.
9 Pentru alinierea la stânga şi la dreapta utilizaţi text-align:left şi text-align:right
în <table> şi <div>.
9 Netscape aplică aliniamentul celulelor şi nu tabelului. În consecinţă, evitaţi
varianta 2, <div> cu atributul text-align; inseraţi tabelul între <div> </div> şi
utilizaţi atributele margin-left, margin-right, margin-top etc.

399
Figura 9.29
HTML Atribuiţi un titlu tabelului

Ori de câte ori realizaţi un tabel, nu uitaţi să-i atribuiţi un titlu.
Titlul pe care-l fixaţi trebuie să reprezinte sinteza informaţiilor găzduite

în tabelul respectiv.
Iată cum atribuim şi afişăm deasupra tabelului nostru titlul „CURSURI DE

INFORMATICĂ”.
1. Introduceţi după tag-ul <TABLE> tag-ul <CAPTION> cu

atributul align=”top” (figura 9.30).
Figura 9.30
400
Remarcă. Align este folosit puţin diferit faţă de alte tag-uri. El indică poziţia titlului faţă
de tabel: top, bottom, center, left, right.
2. Introduceţi, în continuare titlul tabelului: „CURSURI DE

INFORMATICĂ” (figura 9.31).
Figura 9.31
3. Introduceţi tag-ul final </CAPTION> (figura 9.32).
Figura 9.32
Remarcă. Plasaţi elementul <CAPTION> imediat după tag-ul de deschidere <TABLE>.

Într-un tabel este permis un singur element <CAPTION>.

401
Figura 9.33
Remarci:
9 Navigatorul afişează titlul menţionat deasupra tabelului.
9 <CAPTION> este pentru un tabel ceea ce este <TITLE> pentru un document
HTML, cu menţiunea că puteţi opta pentru plasarea titlului tabelului
(top/bottom).
Aplicaţii
Aliniaţi la dreapta titlul tabelului.
Indicaţie. Introduceţi în tag-ul <CAPTION> atributul align=”right”.
Figura 9.34
Pentru alte tipuri de aliniere, utilizaţi atributul align=”?” înlocuind semnul de

întrebare cu una din valorile: right, left, center.
Inseraţi titlul tabelului la baza acestuia, ca pe o legendă.
Indicaţie. Introduceţi în tag-ul <CAPTION> atributul align=”bottom”.

402
Figura 9.35
Plasaţi mesajul: „Acest text este poziţionat la dreapta tabelului” alături de

tabelul (la dreapta) din aplicaţia noastră.
Iată cum plasaţi mesajul indicat la dreapta tabelului, respectând totodată şi

alinierea impusă.
1. Introduceţi mesajul „Acest text este poziţionat la dreapta tabelului”

imediat după tag-ul </TABLE>.
Figura 9.36
2. Introduceţi, în vederea alinierii corespunzătoare a mesajului, tag-ul

<BR clear=all>, unde clear este un atribut.
Figura 9.37
.
403
Figura 9.38
Remarcă. În browser, mesajul se afişează la dreapta (sus) tabelului doar dacă tabelul
este aliniat la stânga (left).
XHTML Atribuiţi un titlu tabelului

Iată cum atribuim şi afişăm deasupra tabelului pe care l-aţi creat în
aplicaţiile precedente, titlul „CURSURI DE INFORMATICĂ”.
Figura 9.39
404

Figura 9.40
Aplicaţie
Plasaţi mesajul: „Acest text este poziţionat la dreapta tabelului” alături de

tabelul (la dreapta) CURSURI DE INFORMATICĂ.
Indicaţie. Folosiţi <pstyle=”clear:right”>.
HTML Aplicaţi o bordură tabelului

Aplicaţi o bordură exterioară
Pentru a mări lizibilitatea datelor structurate în tabele, puteţi aplica o
bordură, care are ca efect generarea unei zone umbrite în jurul tabelului
şi a unui caroiaj în interiorul acestuia.
405
Iată cum aplicaţi o bordură de 10 pixeli tabelului creat anterior, pe care
totodată îl vom centra şi dimensiona (300x500 pixeli). Procedura este
explicată în cele ce urmează.
1. Introduceţi în tag-ul <TABLE> atributul border=?, înlocuind

semnul întrebării (?) cu lăţimea bordurii exprimate în pixeli (10).
Figura 9.41
Remarci:
9 Atributul BORDER setează (în pixeli) lăţimea unui chenar în jurul tabelului.
9 Valoarea prestabilită variază, 2 sau 3 pixeli (în funcţie de browser!).
9 Dacă BORDER=0 atunci dispare chenarul şi se elimină caroiajul din interiorul
tabelului.
Figura 9.42
406
Remarcă. Navigatorul afişează tabelul cu bordură de 10 pixeli în jurul acestuia.
Centraţi şi dimensionaţi un tabel

Pentru a centra şi dimensiona (200x400 pixeli) tabelul cu chenar,
parcurgeţi paşii prezentaţi în continuare.
1. Introduceţi în tag-ul <TABLE> atributele: align=center, width=?,

height=? înlocuind semnele de întrebare cu valoarea în pixeli a
lungimii (width=400), respectiv valoarea în pixeli a lăţimii
(height=200) tabelului (figura 9.43).
Figura 9.43

407
Figura 9.44
Aplicaţii
Mascaţi toate bordurile exterioare ale tabelului.
Iată cum mascaţi conturul tabelului.
1. Introduceţi în tag-ul <TABLE> atributul border frame=void.
Figura 9.45

408
Figura 9.46
Remarcă. Navigatorul maschează conturul tabelului.
Afişaţi numai bordura superioară a tabelului.
Iată cum mascaţi bordurile laterale şi bordura inferioară a tabelului.
1. Introduceţi în tag-ul <TABLE> atributul border frame=? înlocuind

semnul de întrebare (?) cu una din valorile: above (afişează bordura
superioară – cazul nostru); below (afişează bordura inferioară); hsides
(afişează bordura superioară şi bordura inferioară); rhs (afişează
bordura din lateral dreapta); lhs (afişează bordura din lateral stânga);
vsides (afişează bordurile din lateral stânga şi lateral dreapta), figura
9.47.
409
Figura 9.47
Figura 9.48
Remarcă. Navigatorul nu afişează decât bordura superioară a tabelului.

410
Mascaţi toate bordurile interioare ale tabelului.
Remarcă. Alt nume pentru bordurile interioare este "gouttières" în limba franceză sau
„below” în limba engleză.
Iată cum mascaţi toate bordurile interioare ale tabelului.
1. Introduceţi în tag-ul <TABLE> atributul border rules=none.
Figura 9.49
.
Figura 9.50
Remarcă. Navigatorul maschează toate bordurile interioare ale tabelului.

411
Afişaţi numai bordurile interioare care separă liniile orizontale ale tabelului.
Iată cum afişăm numai bordurile interioare orizontale ale tabelului.
1. Introduceţi în tag-ul <TABLE> atributul border rules=? înlocuind

semnul întrebării (?) cu una din valorile: rows (afişează o linie
orizontală - cazul nostru), cols (afişează o linie verticală între fiecare
coloană), groups (afişează linii între coloanele şi liniile tabelului),
vsides (afişează o bordură la stânga şi la dreapta), rhs (afişează o
bordură la dreapta), lhs (afişează o bordură la stânga), figura 9.51.
Figura 9.51
.
Figura 9.52
412
Remarcă. Navigatorul nu afişează decât bordurile interioare care separă fiecare linie.
XHTML Aplicaţi o bordură tabelului

Aplicaţi o bordură exterioară
Iată cum aplicaţi o bordură de 10 pixeli tabelului „CURSURI DE
INFORMATICĂ”.
Figura 9.53
Remarci:
9 În HTML atributul border poate fi utilizat fără nici o valoare (<table border>)
pentru a afişa caroiajul (cu border) şi a-l masca (fără border).
9 În XHTML atributul border trebuie utilizat întotdeauna cu o valoare (table
border=”border”).

413
Figura 9.54
Dimensionaţi un tabel
Iată cum dimensionăm (200x400 pixeli) tabelul (centrat) cu chenar,
realizat în aplicaţia precedentă.
Figura 9.55
Remarcă. În XHTML dimensiunile unui tabel se definesc cu atributele width şi height ale
căror valori se plasează obligatoriu între ghilimele.
414

Figura 9.56
HTML Aliniaţi orizontal datele unui tabel

Pentru a îmbunătăţii lizibilitatea datelor într-un tabel, le puteţi alinia
orizontal, vertical în celulele lor.
Iată cum aliniaţi (centraţi) orizontal datele din toate celulele care aparţin
primei linii de date a tabelului „CURSURI DE INFORMATICĂ”.
1. Introduceţi în tag-ul <TR> al primei linii de date, atributul

align=? înlocuind semnul de întrebare (?) cu una din valorile
(care reprezintă tipul de aliniere): left, right, center (cazul
nostru), justify, char=”?” (aliniază textul pe caracterul introdus
în locul semnului de întrebare), figura 9.57.
415
Figura 9.57
Figura 9.58
Remarcă. Navigatorul afişează centrat datele din prima linie de date a tabelului.
416
Aplicaţie
Aliniaţi la dreapta datele dintr-o singură celulă: „UTILIZARE PC-uri” care

aparţine primei linii de date.
Indicaţie. Introduceţi în tag-ul <TD> al celulei de date „UTILIZARE PC-uri”

atributul align=? înlocuind semnul de întrebare cu una din valorile: left, right (la
dreapta), center, justify, char=”?” (aliniază textul pe caracterul introdus în locul
semnului de întrebare).
<TD align=right> UTILIZARE PC-URI </TD>
Remarci:
9 Dacă tabelul nu are o lăţime specificată, celula afectată se va extinde pe
orizontală pentru a permite textului să încapă.
9 Atunci când lăţimea tabelului este exprimată în procente, lăţimea tabelului se
extinde pentru a putea conţine celula de dimensiune mai mare.
XHTML Aliniaţi orizontal datele unui tabel

Dispuneţi de mai multe posibilităţi pentru a alinia conţinutul celulelor.
Soluţia cea mai simplă constă în a transmite aliniamentul orizontal
tag-ului de deschidere <td> (<th>) prin atributul XHTML align şi
aliniamentul vertical prin atributul XHTML valign. Ştiţi deja să utilizaţi
parametrii center, left, right şi justify pentru a defini aliniamentul
orizontal. Noutatea este de a putea alinia conţinutul celulelor în raport
cu un caracter specific. (Exemplu: <td align=”char” char=”,”>). Pentru
a alinia rapid celulele unei linii, indicaţi direct aliniamentul tag-ului <tr>.
Remarcă. Puteţi de asemenea utiliza un stil şi atributul text-align, dar mai

simplu este să folosiţi atributul XHTML align pentru elementele tabelului.
Iată cum aliniaţi (centraţi) orizontal datele din toate celulele care aparţin
primei linii de date a tabelului „CURSURI DE INFORMATICĂ”, utilizând
documentul HTML tabel.htm creat anterior, pe care apoi îl convertim cu
417
În figura 9.59 se prezintă documentul XHTML generat (automat).
Figura 9.59
Inseraţi codul HTML care afişează icon-ul de conformitate .

figura 9.60.
418
Figura 9.60
HTML Aliniaţi vertical datele unui tabel

Alinierea verticală a datelor structurate într-un tabel determină
amplasarea corespunzătoare a datelor în raport cu bordurile superioare
şi inferioare ale celulelor.
Iată cum aliniaţi vertical la baza celulelor (bottom), datele din toate
celulele care aparţin primei linii de date a tabelului „CURSURI DE
INFORMATICĂ”.
1. Introduceţi în tag-ul <TR> al primei linii de date, atributul

valign=? înlocuind semnul de întrebare (?) cu una din valorile
(care reprezintă tipul de aliniere): top (aliniază textul în partea
superioară a celulei), middle (aliniază textul în partea de mijloc
a celulei), bottom (aliniază textul în partea de jos a celulei -
cazul nostru), baseline (aliniază textul la linia de bază a celulei).
419
Figura 9.61
Figura 9.62
Remarcă. Datele care aparţin primei linii de date a tabelului se aliniază la baza celulelor.
420
Aplicaţie
Aliniaţi vertical (middle) datele dintr-o singură celulă de date: „UTILIZARE

PC-URI” ce aparţine tabelului „CURSURI DE INFORMATICĂ”.
Indicaţie. Introduceţi în tag-ul <TD> al celulei de date „UTILIZARE PC-URI”

atributul valign=? înlocuind semnul de întrebare cu valoarea middle care
reprezintă tipul de aliniere dorit.
<TD valign=middle> UTILIZARE PC-URI </TD>
XHTML Aliniaţi vertical datele unui tabel

Pentru alinierea conţinutului utilizaţi atributul XHTML valign în tag-urile
<tr> sau <td>. Asignaţi valorile: top, bottom, middle, baseline. Puteţi
de asemenea utiliza un stil şi atributul vertical-align.
Iată cum aliniaţi vertical, la baza celulelor (bottom), datele din toate
celulele care aparţin primei linii de date a tabelului „CURSURI DE
INFORMATICĂ”, utilizând documentul HTML tabel.htm creat anterior, pe
care apoi îl convertim cu programul utilitar HTML-TIDY.
În figura 9.63 se prezintă documentul XHTML generat (automat).

421
Figura 9.63
Inseraţi codul HTML care afişează icon-ul de conformitate .

figura 9.64.
422
Figura 9.64
HTML Modificaţi spaţiul dintre celulele unui tabel

Puteţi modifica dimensiunea bordurilor care separă celulele unui tabel.
Iată cum modificăm (10 pixeli) spaţiul dintre celulele tabelului „CURSURI
DE INFORMATICĂ”.
1. Introduceţi în tag-ul <TABLE> atributul cellspacing=? înlocuind

semnul de întrebare (?) cu valoarea exprimată în pixeli (10) a
bordurilor interioare (figura 9.65).
Figura 9.65
423
Figura 9.66
Remarcă. Navigatorul aplică spaţiul de 10 pixeli între celulele tabelului.
XHTML Modificaţi spaţiul dintre celulele unui tabel

Pentru a modifica distanţa dintre celule, creaţi clase şi utilizaţi atributele
CSS padding – padding-top, padding-bottom, padding-right, padding-left
(pentru margini interioare) şi atributele CSS margin – margin-top,
margin-bottom, margin-left, margin-right (pentru margini exterioare).
Puteţi de asemenea modifica distanţa dintre celulele unui tabel, utilizând

o mai … veche cunoştinţă a noastră – atributul cellspacing (vezi HTML)!
424
Acest atribut nu poate fi definit decât pentru toate celulele tabelului, în
tag-ul <table>.
Iată cum modificăm (10 pixeli) spaţiul dintre celulele tabelului „CURSURI
DE INFORMATICĂ”.
Figura 9.67
Aplicaţie
Utilizaţi atributul CSS margin pentru a modifica spaţiul (10 pixeli) dintre
celulele tabelului „CURSURI DE INFORMATICĂ”.
În figura 9.68 este prezentat documentul (parţial) XHTML.
Figura 9.68
425

Figura 9.69
HTML Modificaţi dimensiunile liniilor unui tabel

Puteţi modifica înălţimea, lungimea liniilor unui tabel, deci implicit şi
dimensiunile tabelului.
Iată cum modificăm, cu 60 respectiv 120 de pixeli înălţimea primelor

două linii ale tabelului „CURSURI DE INFORMATICĂ”.
1. Introduceţi în tag-ul <TR> al primei linii a tabelului, atributul

height=”?” înlocuind semnul de întrebare (?) cu valoarea în
pixeli (60) a înălţimii (figura 9.70).
426
Figura 9.70
2. Introduceţi în tag-ul <TR> al celei de-a doua linii a tabelului

atributul height=”120” (figura 9.71).
Figura 9.71

427
Figura 9.72
Remarcă. Navigatorul afişează înălţimea primelor două linii modificată şi în mod egal şi
pe cea a tabelului.
Pentru a modifica lungimea primei linii (100 pixeli) a tabelului (toate

liniile unui tabel au aceeaşi lungime!) urmăriţi procedura descrisă în
continuare.
1. Introduceţi în tag-ul <TR> al primei linii a tabelului, atributul

width=”?”, înlocuind semnul de întrebare cu valoarea în pixeli
(100) a lungimii (figura 9.73).
Figura 9.73
428
Remarci:
9 Valoarea introdusă (100) nu va fi prioritară celei definite în atributul width în
tag-ul <TABLE> (width=400).
9 Modificarea valorii lungimii unei singure linii a tabelului influenţează lungimea
celorlalte linii, deci şi a lungimii tabelului.
Figura 9.74
Remarcă. În navigator, toate liniile se vor afişa cu lungimea de 400 de pixeli.

Aplicaţii
Redimensionaţi tabelul „CURSURI DE INFORMATICĂ” cu valorile 550x350

pixeli.
Indicaţie. Introduceţi în tag-ul <TABLE> atributele width=”?” şi height=”?”

înlocuind semnele de întrebare cu 550 respective 350 pixeli.
429
<TABLE width=”550” height=”350”>
Modificaţi lungimea primei coloane (Denumire curs) a tabelului „CURSURI DE

INFORMATICĂ” cu valoarea 130 pixeli.
Indicaţie. Pentru a modifica lungimea unei coloane este suficient de a schimba

lungimea unei singure celule din coloana respectivă.
Introduceţi în tag-urile <TH> sau <TD> ale unei celule care aparţine primei
coloane atributul width=”?” înlocuind semnul de întrebare (?) cu valoarea dorită
(130) exprimată în pixeli.
<TH width=”130”>Denumire curs </TH>
Modificaţi înălţimea primei celule (Denumire curs) a tabelului „CURSURI DE

INFORMATICĂ” cu valoarea 150 pixeli.
Indicaţie. Introduceţi în tag-urile <TH> sau <TD> atributul height=”?”

înlocuind semnul de întrebare (?) cu valoarea dorită (150 pixeli).
<TH height=”150”>Denumire curs </TH>
Modificaţi lăţimea celei de-a treia celule de date (50$) a tabelului „CURSURI
DE INFORMATICĂ”, cu valoarea 120 pixeli.
Indicaţie. Introduceţi în tag-ul <TH> sau <TD> atributul width=”?” înlocuind

semnul de întrebare (?) cu valoarea dorită (120 pixeli).
<TD width=”120”>50$ </TD>
XHTML Modificaţi dimensiunile liniilor unui tabel

Puteţi modifica înălţimea sau lungimea liniilor unui tabel cu atributele
height respectiv width utilizând valori absolute sau relative.
Puteţi de asemenea modifica dimensiunile liniilor unui tabel utilizând

clase CSS (Cascading Style Sheets), metodă recomandată de W3C.
Iată cum modificăm, cu 60 respectiv 120 de pixeli înălţimea primelor

două linii ale tabelului „CURSURI DE INFORMATICĂ”.
430
Figura 9.75
Remarcă. Evitaţi pe cât posibil să definiţi coordonatele (lungime, lăţime) celulelor

tabelelor pe care le creaţi. De multe ori, datorită restricţiilor impuse, navigatorul este
tentat să reformateze tabelul iar rezultatele, în acest caz pot fi imprevizibile.

Figura 9.76
431
Aplicaţii
Modificaţi lungimea primei linii (100 pixeli) a tabelului.
Modificaţi lungimea primei coloane (130 pixeli) a tabelului.
Modificaţi marginile interioare ale celulelor

HTML
unui tabel
Puteţi modifica spaţiul dintre conţinutul şi marginile fiecărei celule a unui
tabel.
Iată cum aplicăm un spaţiu de 15 pixeli între conţinutul şi marginile

fiecărei celule din tabelul „CURSURI DE INFORMATICĂ”.
1. Introduceţi în tag-ul <TABLE> atributul cellpadding=? înlocuind

semnul de întrebare (?) cu valoarea în pixeli (15) a spaţiului din
jurul conţinutului fiecărei celule (figura 9.77).
Figura 9.77

432
Figura 9.78
Remarcă. Navigatorul aplică un spaţiul de 15 pixeli în jurul conţinutului fiecărei celule.
Modificaţi marginile interioare ale celulelor

XHTML
unui tabel
Pentru a modifica distanţa dintre conţinutul şi bordura unui tabel creaţi
clase şi utilizaţi atributele CSS padding. Puteţi de asemenea utiliza
atributul cellpadding dar, el trebuie definit pentru toate celulele
tabelului, în tag-ul <table>.
Iată cum aplicăm un spaţiu de 15 pixeli între conţinutul şi marginile

fiecărei celule din tabelul „CURSURI DE INFORMATICĂ”.

433
Figura 9.79

Figura 9.80
434
Aplicaţie
Utilizaţi atributul CSS padding pentru a aplica un spaţiu de 15 pixeli între

conţinutul şi marginile fiecărei celule din tabelul „CURSURI DE INFORMATICĂ”.
Figura 9.81

435
Figura 9.82
Extindeţi o celulă pe mai multe coloane sau

HTML
linii
Puteţi reuni două sau mai multe celule într-una singură. Metoda diferă
atunci când doriţi o extindere (fuziune) pe mai multe coloane (alipirea
coloanelor) sau pe mai multe linii (alipirea liniilor).
Iată cum adăugaţi în tabelul „CURSURI DE INFORMATICĂ” o nouă linie

de antet: „INFORMATICA”, care se extinde pe toate cele trei coloane ale
tabelului.
1. Introduceţi în tag-ul <TH> al noii linii atributul colspan=?,

înlocuind semnul de întrebare (?) cu numărul de coloane (3) pe
care doriţi extinderea celulei (figura 9.83).
436
Figura 9.83
2. Introduceţi titlul noii linii de antet (figura 9.84).
Figura 9.84
Remarci:
9 Atributul colspan=? este admis de tag-urile <TH> şi <TD>.
9 Valoarea implicită a atributului colspan este 1.
9 Atributul colspan este uşor de înţeles.

437
Figura 9.85
Remarci:
9 Navigatorul afişează noua linie de titlu (INFORMATICA) pe lungimea celor 3
coloane.
9 Pentru fuziunea tuturor celulelor unei linii, introduceţi atributul colspan=0.
Pentru a extinde prima celulă de date „UTILIZARE PC-URI” pe două linii,

aplicaţi procedura descrisă în continuare.
1. Introduceţi în tag-ul <TD> al primei celule de date, atributul

rowspan=?, înlocuind semnul de întrebare (?) cu numărul de
linii (2) pe care doriţi extinderea celulei (figura 9.86).
438
Figura 9.86
Remarci:
9 Atributul rowspan este admis de tag-urile <TH> şi <TD>.
9 Valoarea implicită a atributului rowspan este 1.
9 Atributul rowspan este … puţin mai dificil de înţeles.
Figura 9.87
439
Remarci:
9 Navigatorul afişează prima celulă de date extinsă pe două linii.
9 Pentru fuziunea tuturor celulelor unei coloane introduceţi atributul
rowspan=0.
Extindeţi o celulă pe mai multe coloane sau

XHTML
linii
Pentru fuzionarea celulelor unui tabel Web utilizaţi atributele colspan,
rowspan sau foile de stiluri CSS.
Iată cum adăugaţi în tabelul „CURSURI DE INFORMATICĂ” o nouă linie

de antet: „INFORMATICA”, care se extinde pe toate cele trei coloane ale
tabelului.
Figura 9.88
Aplicaţie
Extindeţi prima celulă de date „UTILIZARE PC-URI” pe două linii.
Indicaţie. Introduceţi în tag-ul <td> al primei celule de date, atributul

rowspan=”2”.
440
HTML Aplicaţi o culoare elementelor unui tabel

Puteţi colora o linie, o coloană sau o singură celulă ale unui tabel.
Atenţie, la simţul culorilor!
Iată cum aplicaţi o culoare (albastru deschis) primei linii a tabelului

„CURSURI DE INFORMATICĂ”.
1. Introduceţi în tag-ul <TR> al liniei de colorat (prima linie a

tabelului) atributul bgcolor=?, înlocuind semnul de întrebare (?)
cu numele (valoarea hexazecimală) culorii dorite (albastru
deschis), figura 9.89.
Figura 9.89

441
Figura 9.90
Remarcă. Navigatorul aplică primei linii a tabelului culoarea indicată (albastru

deschis).
Iată cum aplicaţi aceeaşi culoare (albastru deschis) primei coloane a
aceluiaşi tabel.
1. Introduceţi în tag-ul <TH> sau <TD> care precede celulele

primei coloane, atributul bgcolor=? înlocuind semnul de
întrebare (?) cu numele culorii (lightblue) sau valoarea în
hexazecimal a acesteia (figura 9.91).
442
Figura 9.91

443
Figura 9.92
Remarci:
9 Navigatorul afişează colorat (lightblue) celulele primei coloane a tabelului.
9 Puteţi aplica o culoare unei singure celule.
Aplicaţie
Coloraţi în cyan background-ul tabelului "CURSURI DE INFORMATICĂ".

Coloraţi în aqua linia de antet (prima linie a tabelului) şi în white a doua linie
(de date) a aceluiaşi tabel.
Indicaţie. Introduceţi în tag-ul <TABLE> atributul bgcolor=cyan.
<TABLE border=10 bordercolor="#0000FF" cellspacing="10" cellpadding="15"

align bgcolor=cyan>
444
XHTML Aplicaţi o culoare elementelor unui tabel
Iată cum aplicaţi o culoare (albastru deschis) primei linii a tabelului

„CURSURI DE INFORMATICĂ”.
Figura 9.93
445

Figura 9.94
Aplicaţie
Aplicaţi aceeaşi culoare (albastru deschis) primei coloane a aceluiaşi tabel.
Indicaţie. Aplicaţi clasa td.lightblue{background-color:lightblue} celor trei

tag-uri <td> şi tag-ului <th>Denumire curs</th>.
Aplicaţi o imagine de background unui tabel

HTML sau unei celule a tabelului
Aşa cum aţi plasat o imagine pe fundalul (background, în limba engleză;
arrière-plan, în limba franceză) paginii dumneavoastră Web, tot aşa veţi
446
putea plasa o imagine pe fundalul unui tabel sau al unei celule a
tabelului.
Iată cum plasaţi pe fundalul tabelului „CURSURI DE INFORMATICĂ”,

aceeaşi imagine, pe care aţi aplicat-o şi pe fundalul paginii Web.
1. Introduceţi în tag-ul <TABLE> atributul background="?",

înlocuind semnul de întrebare (?) cu adresa imaginii de
background: „Blue hills.jpg” (figura 9.95).
Figura 9.95
.
Figura 9.96
447
Remarcă. Navigatorul aplică tabelului imaginea de background specificată.
Pentru a plasa aceeaşi imagine de background în prima celulă de date a

tabelului, "UTILIZARE PC-uri" urmăriţi procedura descrisă în cele ce
urmează.
1. Introduceţi în tag-ul <TD> al celulei de date "UTILIZARE

PC-uri" atributul background="?", înlocuind semnul de
întrebare (?) cu adresa imaginii de background: „Blue hills.jpg”
(figura 9.97).
Figura 9.97
Figura 9.98
448
Remarcă. Navigatorul aplică celulei de date imaginea de background specificată.
Aplicaţi o imagine de background unui tabel

XHTML sau unei celule a tabelului
Pentru a aplica o imagine de background (în loc de a umple
background-ul celulelor cu o culoare) creaţi un stil căruia îi definiţi
imaginea cu atributul background-image.
Iată cum plasăm pe fundalul tabelului „CURSURI DE INFORMATICĂ”

aceeaşi imagine pe care aţi aplicat-o şi pe fundalul paginii Web.
Figura 9.99
Remarcă. Puteţi aplica (unui tabel / unei celule) o imagine de background,

utilizând atributul CSS, background-image.

449
Figura 9.100
Aplicaţie
Plasaţi aceeaşi imagine de background în prima celulă de date „Utilizare

PC-uri” a tabelului.
Utilizaţi un tabel ca un instrument de

HTML
punere în pagină
Puteţi utiliza un tabel pentru a defini structura globală a paginii
dumneavoastră Web.
Puteţi insera o imagine în celula unui tabel pentru a putea controla mai
uşor poziţia pe care aceasta o ocupă în pagina dumneavoastră Web.
Iată cum plasăm aceeaşi imagine în Tabelul 9.3.

450
Tabelul 9.3
1. Pentru a extinde celula care conţine imaginea specificată

utilizaţi metoda „alipirea liniilor”, introducând în tag-ul <TH>
atributul ROWSPAN=”5” şi înlocuind în tag-ul IMG SRC=”?”
semnul de întrebare (?) cu adresa imaginii pe care urmează
s-o inserăm (figura 9.101).
Figura 9.101

451
Figura 9.102
Remarcă. Navigatorul afişează imaginea în celula specificată.
XHTML Utilizaţi un tabel ca un instrument de

punere în pagină
Uitaţi-vă la codul sursă al paginilor dumneavoastră preferate şi veţi
descoperii (putem paria!) că acestea au fost create cu ajutorul tabelelor!
În continuare, vă prezint câteva din paginile mele preferate care sunt
create (parţial) cu ajutorul tabelelor:
9 www.yahoo.com
9 www.webdeveloper.com
9 www.microsoft.com
9 www.sun.com
452
Iată cum plasăm imaginea Blue hills.jpg în tabelul următor (vezi HTML,
utilizaţi un tabel ca un instrument de punere în pagină).
În figura 9.103 este prezentat documentul (parţial) XHTML creat
manual.
Figura 9.103

Figura 9.104
453
(X)HTML Temă
1. Precizaţi tag-urile (X)HTML cu care puteţi construi tabele.
2. Descrieţi pe scurt procedura (X)HTML de aliniere orizontală/verticală a
datelor structurate într-un tabel.
Figura 9.105
paginilor Web din figura 9.106.
454
Figura 9.106
9 www.yahoo.com
9 www.webdeveloper.com
9 www.sun.com
Conversaţia 10
Creaţi formulare cu HTML 4 şi XHTML

•••••••••••••••••••••••••••••••••••••••••
f Regulile de … aur ale formularelor
f HTML 4, XHTML – Creaţi un formular
f HTML 4, XHTML – Precizaţi metoda şi script-ul utilizate
f HTML 4, XHTML – Creaţi un buton pentru expedierea (submit) unui
formular
f HTML 4, XHTML – Creaţi un buton pentru resetarea (reset) unui formular
f HTML 4, XHTML – Inseraţi o zonă simplă de text
f HTML 4, XHTML – Definiţi mărimea unei zone (simple) de text
f HTML 4, XHTML – Inseraţi o zonă de text multilinie
f HTML 4, XHTML – Creaţi o casetă de validare
f HTML 4, XHTML – Creaţi un buton radio
f HTML 4, XHTML – Creaţi un meniu derulant
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
Regulile de … aur ale formularelor

Înainte de a începe proiectarea, realizarea unui formular în (X)HTML
este important să cunoaşteţi câteva din regulile de ... aur ale
formularelor, pe care apoi este bine să le şi aplicaţi.
456
Stabiliţi conţinutul formularului şi forma de prezentare.
Reguli:
9 Identificaţi informaţiile ce urmează a fi incorporate în formular şi

stabiliţi forma de prezentare a acestora.
9 Structuraţi aceste informaţii în mai multe întrebări elementare, uşor

de prelucrat. De exemplu, dacă aceste informaţii se referă la un client,
puteţi să le structuraţi în: nume, prenume, adresă, existând astfel
posibilitatea efectuării unor sortări pe anumite zone particulare ale
formularului.
9 O bună proiectare a formularului vă va scuti de posibile reveniri,

modificări! Un formular bine conceput nu poate decât să încurajeze
utilizatorii în a vă transmite informaţiile dorite.
9 Verificaţi dacă obiectivele propuse se verifică cu răspunsurile la

următoarele întrebări: ce informaţii doriţi să obţineţi de la utilizator?
Cât timp vor consuma utilizatorii pentru completarea formularului?
9 Încurajaţi utilizatorii să completeze şi apoi să expedieze formularele.

Dacă formularele dumneavoastră sunt dificil de completat, riscaţi de a
nu primi nici un răspuns! Oferiţi utilizatorilor dumneavoastră mici
bonusuri, chiar dacă valoarea acestora este nesemnificativă. Dacă aţi
şti cât contează!
9 Interesul vizual al formularului nu trebuie să minimizeze alte aspecte

ale paginii; o utilizare judicioasă a culorilor, a alinierilor, imaginile de
dimensiuni mici şi fonturile de caractere dau formularului mai mult ...
relief!
9 Utilizaţi header-e pentru a anunţa fiecare nou grup de informaţii. În

acest mod, utilizatorii se pot orienta mult mai uşor în formular.
9 Separaţi vizual grupurile de informaţii. În acest mod, utilizarea

formularului va fi mult uşurată, întrucât secţiunile vor deveni mai
scurte şi mai uşor de urmărit. Puteţi utiliza linii orizontale sau
elementul (X)HTML <fieldset> pentru a le realiza.
457
9 Scoateţi în relief, fără a exagera câteva cuvinte din pagină pentru a le
pune în evidenţă.
9 Specificaţi modul în care utilizatorii trebuie să se deplaseze în

formular.
9 Aveţi în vedere rezoluţia monitoarelor, coloanele multiple pe care le

propuneţi în sondajul dumneavoastră şi nu doar atât.
9 Folosiţi săgeţile pentru a ajuta utilizatorii să navigheze în pagină,

într-o anumită ordine.
9 Utilizaţi rupturile de linie şi spaţiile pentru a obţine o diferenţiere clară

a informaţiilor de descriere asociate anumitor butoane (de exemplu,
casetele de validare).
9 Specificaţi câmpurile care sunt opţionale şi cele care sunt obligatorii.

Plasaţi câmpurile opţionale după câmpurile obligatorii. Anumite
navigatoare şi aplicaţii de procesare rejectează formularele completate
în mod incorect.
9 Utilizaţi o imagine de background.
9 Plasaţi în stânga formularului zonele de date de aceeaşi lungime.

Textul se va alinia vertical şi va deveni mult mai agreabil.
9 Folosiţi următoarele câmpuri (controale) pentru colectarea datelor:

butoane de tip submit şi reset; câmpurile de text; câmpurile de text
multilinie; zonele de listă; butoanele radio; casetele de validare.
9 Butoanele submit şi reset trimit server-ului informaţiile colectate în

formular şi iniţializează formularul.
9 Câmpurile de text sunt zone simple de text. Utilizaţi-le pentru

răspunsuri scurte, ca de exemplu: nume, adrese etc.
9 Câmpurile de text multilinie sunt zone mai mari de text, cu mai multe
linii. În această zonă pot fi introduse comentarii, sugestii, instrucţiuni
de livrare etc.
458
9 Zonele de listă sunt câmpuri în care utilizatorii pot introduce o listă de
opţiuni. Folosiţi-le pentru a prezenta liste lungi (dar finite) de opţiuni.
9 Butoanele radio oferă utilizatorilor posibilitatea de a selecta o singură

opţiune (şi numai una!), de exemplu sexul (masculin sau feminin).
Butoanele radio se exclud reciproc.
9 Casetele de validare permit utilizatorilor de a selecta una, nici una sau

mai multe opţiuni din cadrul unei liste.
9 Atunci când alegeţi câmpurile pentru un formular reflectaţi cu atenţie

la informaţia pe care doriţi să o colectaţi. În general, butoanele radio,
casetele de validare şi zonele de listă sunt preferate zonelor de text.
Dacă utilizatorii aleg răspunsul lor dintr-o listă, nu veţi mai avea
greşeli de ortografie, răspunsuri incoerente sau răspunsuri în afară de
subiect. Această metodă este cea mai bună metodă atunci când este
posibil să propuneţi o listă utilizatorilor!
Creaţi formularele manual sau cu editoarele WYSIWYG.
Reguli:
9 Puteţi crea manual formularele – cu limbajele (X)HTML sau automat

cu editoarele WYSIWYG („What You See Is What You Get”).
9 Utilizaţi un editor WYSIWYG (de exemplu, Dreamweaver) atunci când

doriţi să creaţi mai multe formulare (de bază). Aceste editoare nu
generează întotdeauna rezultate satisfăcătoare, dar ele vă permit să
nu uitaţi nici un element sau atribut.
9 Utilizaţi (X)HTML (procedura manuală) atunci când creaţi unul sau

două formulare. În acest caz este mai bine să folosiţi procedura
manuală (X)HTML, decât să învăţaţi modul de utilizare a unui editor
WYSIWYG.
Semnaţi ... de primire!

459
Reguli:
9 Realizaţi o pagină de confirmare de primire (recepţie), un document

pe care îl returnaţi utilizatorului, precizându-i că formularul a fost bine
primit. Folosiţi un cod (X)HTML de forma:
<input type=”hidden” name=”succes” value=http://www.... />.
9 O pagină de confirmare de primire a unui formular poate conţine toate

ideile dumneavoastră! Puteţi lega această pagină de pagina de index a
site-ului dumneavostră. Nu uitaţi că utilizatorul a alocat un fond de
timp pentru a completa formularul dumneavoastră. Se impune o
formă de respect, în acest sens!
HTML Creaţi un formular

Formularele sunt ideale pentru a realiza o interactivitate între
dumneavoastră şi vizitatorii site-ului pe care l-aţi creat.
Formularele, structurate în câmpuri şi zone de date, vă permit să primiţi

în mod simplu mesaje de la vizitatorii site-ului dumneavoastră.
Înainte de toate, trebuie să precizaţi bătrânului Notepad că doriţi să

creaţi un formular.
Iată cum procedaţi pentru a crea un formular în HTML.
1. Creaţi o nouă pagină HTML (figura 10.1).
Figura 10.1
460
2. Introduceţi imediat sub tag-ul <BODY>, tag-ul <FORM> (figura
10.2).
Figura 10.2
3. Acţionaţi de mai multe ori tasta Enter şi introduceţi tag-ul final

</FORM>.
Figura 10.3
Remarcă. Elementul <FORM> constituie un bloc care poate fi inserat direct în corpul
documentului <BODY>.
4. Introduceţi elementul <FIELDSET> (figura 10.4).
Figura 10.4
461
Remarci:
9 Elementul <FORM> conţine unul sau mai multe elemente <FIELDSET> care
vor delimita fiecare, un subansamblu de componente active.
9 Prezenţa a cel mai puţin unui element <FIELDSET> este obligatorie, întrucât
componentele nu trebuie să fie incluse direct în <FORM>.
9 Grafic, fiecare subansamblu va fi delimitat în navigator printr-o bordură
subţire în care, pentru fiecare, se va integra un titlu particular. Acest titlu este
creat cu ajutorul elementului <LEGEND>.
9 Fiecare grup <FIELDSET> poate conţine paragrafe, titluri şi alte elemente.
9 Putem de asemenea structura un formular cu ajutorul unui tabel, elementul
<TABLE> fiind inclus direct în <FORM>.
5. Validaţi documentul HTML4 Strict cu aplicaţia validator.
Figura 10.5
Remarcă. În navigator, pentru moment, în afară de codul de conformitate nu se afişează

nici o informaţie.
XHTML Creaţi un formular

Nu uitaţi că XHTML funcţionează în două sensuri şi că puteţi utiliza
paginile dumneavoastră Web pentru a colecta informaţii de la cititorii …
pe care îi meritaţi.
Remarcă. Dacă aţi folosit un motor de căutare pe Internet, precum Hot Bot sau Yahoo,
aflaţi (dacă nu ştiaţi!) că acestea sunt formulare HTML.
462
În continuare, vreau să punctez câteva lucruri pe care să le aveţi în
vedere atunci când creaţi formulare XHTML.
9 Fiecare formular trebuie să înceapă cu tag-ul <form> şi să se termine

cu tag-ul de închidere </form>.
9 Obişnuiţi-vă să denumiţi fără echivoc fiecare formular cu ajutorul

atributelor name şi id (figura 10.6).
Figura 10.6
9 Indicaţi numele formularului prin atributul id pentru a asigura

compatibilitatea cu XHTML. Nu uitaţi regula XHTML: atributele se scriu
cu minuscule iar valorile acestora trebuie să fie încadrate între
ghilimele.
9 Standardul XHTML impune tag-ul <input /> pentru crearea zonelor de

text şi a altor elemente al căror tip îl puteţi defini cu atributul type.
Atributul type poate lua una din valorile: text, password, radio,
checkbox, submit, reset, button, hidden, image, file.
9 Fiecare linie a formularului <input type=”…”.. /> conţine slash-ul

terminal.
9 Creaţi (personalizaţi) un buton pentru expedierea formularului şi un

altul pentru resetarea formularului.
9 Fiecare câmp al formularului <input type=”tip” /> ar trebui să aibă şi

atributele name şi id.
9 Testaţi buna funcţionare a formularului Web prin Java Script.
Iată cum procedaţi pentru a crea un formular în XHTML.

463
Figura 10.7

Figura 10.8
HTML Precizaţi metoda şi script-ul utilizate

Formularele oferă vizitatorilor posibilitatea de a trimite administratorului
site-ului (dumneavoastră) întrebări, comentarii, pe scurt – mesaje.
464
Formularele au în structura sa două părţi elementare: partea vizibilă, alcătuită
din câmpuri pentru colectarea datelor (butoane, zone de text, meniuri
derulante) şi partea non vizibilă care precizează modul în care server-ul
prelucrează informaţiile. De partea non vizibilă a unui formular ne vom ocupa în
cele ce urmează.
Pentru relaţionarea între vizitator şi server-ul dumneavoastră trebuie să utilizaţi

script-uri CGI (Common Gateway Interface).
Script-ul CGI este, în câteva cuvinte, un canal care permite tranzitarea datelor
între vizitator şi server-ul dumneavoastră. Odată aflate pe server, datele
transmise sunt tratate cu un program specific (în limbajul PERL, în cea mai
mare parte a timpului). După cum veţi vedea în cele ce urmează, fiecare
element al unui formular conţine un nume şi o valoare.
Numele permite identificarea datelor transmise, în timp ce valoarea corespunde

datelor în sine. Atunci când vizitatorul expediază un formular, datele
nume-valoare sunt transmise server-ului. Script-ul CGI va extrage toate aceste
date şi le va aranja astfel încât ele să devină utilizabile.
Într-un formular se creează butoane, legături hipertext, cu scopul de a

transmite datele introduse de vizitator (partea vizibilă a formularului).
În moment ce vizitatorul a activat butonul sau legătura hipertext are loc

transmiterea datelor. Două metode sunt posibile: GET şi POST.
Iată cum precizăm metoda prin care datele sunt comunicate server-ului,
precum şi legătura către un script CGI.
1. Introduceţi în tag-ul <FORM> atributul method=”?”, înlocuind

semnul de întrebare (?) cu una din metodele POST/GET prin
care datele sunt comunicate server-ului (figura 10.9).
465
Figura 10.9
Remarci:
9 Atributul method defineşte metoda de transmitere a datelor între navigator
(client) şi server. Method poate lua două valori: get sau post. Metoda get
limitează volumul de date la 255 caractere. Noi vom utiliza, în mod constant
metoda post.
9 Consultaţi site-urile:
www.perl-gratuit.com;
www.cgis.fr.
2. Introduceţi în continuare atributul action=”?”, înlocuind semnul
de întrebare (?) cu calea de acces la script-ul CGI utilizat (figura
10.10).
Figura 10.10
Remarcă. Atributul action, a cărei prezenţă este obligatorie, conţine adresa URL (relativă
sau absolută) a script-ului CGI. Aceste script-uri sunt scrise în general în limbajul Perl
sau în PHP. Puteţi utiliza pentru atributul action, valoarea mailto:, urmată de adresa
dumneavoastră de e-mail.

466
Figura 10.11
Remarcă. În navigator, pagina începe să prindă contur!
XHTML Precizaţi metoda şi script-ul utilizate

În general, după ce aţi executat clic pe butonul de expediere al
formularului (buton de tip submit), informaţiile din formular sunt
transmise server-ului Web sau programului definit prin atributul action al
formularului. Programul va executa ceea ce dumneavoastră i-aţi spus să
facă! Serverul poate să realizeze următoarele acţiuni:
9 să expedieze informaţiile prin e-mail;
9 să expedieze informaţiile într-o bază de date;
9 să expedieze informaţiile unui newsgroup sau unei pagini Web;
9 să utilizeze informaţiile de intrare pentru a căuta într-o bază de date.

467
Independent de metodele de prelucrare a informaţiilor, dumneavoastră
puteţi adăuga atribute specifice în tag-ul de deschidere <form>, după
cum urmează:
9 action=”...”;
9 method=”...”.
În general, documentaţia script-ului de prelucrare a formularului sau cea

a server-ului Web indică ceea ce trebuie utilizat pentru metodele post şi
get.
Remarci:
9 Furnizorul de acces Internet (FAI) al ASR Outfitters (www.example.com)
publică pe site-ul său Web informaţii privind modul de completare a unui
formular şi de expediere a rezultatelor prin e-mail (cu scriptul CGI numit
cgiemail). În acest caz, elementul de descriere form este: <form
method=”post” action=”http://www.example.com/cgi-bin/cgiemail/user/user-
mail.txt”>.
9 Nu uitaţi să ... tăiaţi liniile foarte lungi, cum este cazul liniei precedente.
Numeroase servere Web au script-uri sau comenzi incorporate pentru a

trata informaţiile din formulare; alte servere, ca de exemplu Unix,
necesită programe suplimentare.
Remarci:
9 Pentru a cunoaşte opţiunile de prelucrare ale formularului, consultaţi
administratorul server-ului dumneavoastră sau vizitaţi site-ul Web al
furnizorului de acces Internet.
9 Este puţin probabil, cel puţin la început că veţi adopta soluţia e-mail. Se află
la dispoziţia dumneavoastră programul cgiemail realizat şi distribuit gratuit de
MIT, dar disponibil numai pentru serverele Unix. Consultaţi site-ul:
http://web.mit.edu/wwwdev/cgiemail/index.html pentru a obţine ultimele
informaţii privind cgiemail.
9 Un program comparabil cu cgiemail pentru Windows 95/98/NT/2000, Mailpost
pentru un server Web Windows pe 32 de biţi, este accesibil la adresa:
www.mcenter.com/mailpost.
Iată cum precizăm metoda prin care datele sunt comunicate server-ului.

468
Figura 10.12
Remarcă. Puteţi utiliza pentru atributul action, valoarea mailto:, urmată de adresa
dumneavoastră de e-mail.

Figura 10.13
469
Creaţi un buton pentru expedierea (submit)
HTML
unui formular
Pentru ca vizitatorii să-şi poată expedia formularele, trebuie să creaţi un
buton de tip (submit) care să le permită această operaţie.
Iată cum construim un buton de tip submit (expediază).
1. Introduceţi între <LEGEND><B> şi </B><LEGEND> eticheta

corespunzătoare butonului „Expediaţi formularul” (figura
10.14).
Figura 10.14
2. Introduceţi tag-ul <INPUT type=”submit” value=”?”>, înlocuind

semnul de întrebare (?) cu numele (Expediati) care trebuie să
figureze pe buton (figura 10.15).
470
Figura 10.15
Figura 10.16
Remarci:
9 În browser, vizitatorul va trebui să activeze butonul Expediati pentru a
transmite formularul serverului.
9 Nu puteţi controla direct dimensiunea butonului; numai lungimea textului
poate fi determinată.
471
Aplicaţie
Creaţi un buton imagine pentru expedierea unui formular.
Iată cum procedăm pentru a crea un buton imagine, în locul textului

EXPEDIAŢI.
1. Introduceţi eticheta corespunzătoare butonului „Expediaţi formularul”

(figura 10.17).
Figura 10.17
2. Introduceţi tag-ul <BUTTON name=”submit”>.

472
3. Introduceţi tag-ul <IMG src=”?”>, înlocuind semnul de întrebare (?)
cu calea de acces la imagine (C:\Windows\Web\Wallpaper\follow.jpg),
figura 10.18.
Figura 10.18
4. Introduceţi tag-ul final </BUTTON> (figura 10.19).
Figura 10.19

473
Figur10.20
Remarcă. În navigator, butonul pentru expedierea formularului are un aspect mult mai
simpatic!
Creaţi un buton pentru expedierea (submit)

XHTML
unui formular
Iată cum construim un buton de tip submit (expediază) în XHTML.

474
Figura 10.21
Remarci:
9 Pentru a crea un buton de tip submit utilizaţi elementul vid XHTML <input />
cu una din formele:
<input type=”submit” value=”...” />;
<input type=”image” name=”...” src=”url” />.
9 Atributele cele mai utilizate ale elementului vid <input /> sunt: accept=”...”;
maxlength=”...”; name=”...”; selected=”selected”; size=”n”; type=”...” (text,
password, checkbox, radio, file, hidden, image, submit, button, reset).
9 Personalizaţi butonul de expediere utilizând Java Script (figura 10.22).
Figura 10.22
XHTML care afişează icon-ul de conformitate .
În figura 10.23 este prezentat rezultatul vizualizării paginii Web în

Microsoft Internet Explorer.
475
Figura 10.23
Remarci:
9 Butoanele de tip submit grafice fac site-ul dumneavoastră mai interesant.
9 Pentru crearea unui buton de tip submit grafic utilizaţi codul XHTML:
<input type=”image” name=”point” src=”submit.gif” />, înlocuind propria
imagine cu submitbutton.gif.
Aplicaţie
Creaţi un buton imagine pentru expedierea unui formular.
Creaţi un buton pentru resetarea (reset) unui

HTML
formular
Pentru ca vizitatorii să-şi poată corecta eventualele erori, inerente în
completarea unui formular, trebuie să creaţi un buton care să le permită
această operaţie.
Iată cum construim un buton de tip reset (ştergere).
1. Introduceţi eticheta corespunzătoare butonului: „Resetaţi

formularul” (figura 10.24).
476
Figura 10.24
2. Introduceţi tag-ul <INPUT type=”reset” value=”?”>, înlocuind

semnul de întrebare (?) cu numele care trebuie să figureze pe
buton (STERGETI), figura 10.25.
Figura 10.25
.
477
Figura 10.26
Remarcă. În navigator, vizitatorul poate reseta formularul acţionând butonul STERGETI.
Creaţi un buton pentru resetarea (reset) unui

XHTML
formular
Iată cum construim un buton de tip reset (ştergere) în XHTML.
Figura 10.27
478
Remarci:
9 Puteţi ilustra butonul de expediere utilizând tag-ul <button> şi tipul reset.
9 Personalizaţi butonul de expediere utilizând Java Script (alert()).

Figura 10.28
Remarci:
9 Limbajul XHTML nu a fost prevăzut cu un buton de tip reset grafic.
9 Dacă utilizatorii folosesc navigatoare conforme cu specificaţiile HTML 4 şi de
versiuni recente, puteţi utiliza elementul button pentru a crea un buton care
va fi inclus în locul sau cu butoanle de tip submit sau reset. Butoanele create
cu elementul button nu au acţiuni specifice asociate, ca în cazul butoanelor
submit şi reset. Dacă totuşi doriţi acest lucru, puteţi lega butonul cu un script
Java Script.
9 Pentru a crea un buton submit cu elementul button utilizaţi un cod similar
celui prezentat în continuare: <button type=”submit” value=”submit”
name=”submit”>...</button>.
9 Pentru a crea un buton grafic reset folosind elementul button utilizaţi un cod
de forma: <button type=”reset” value=”reset” name=”reset”><img src=”...”
alt=”...” /></button>.
HTML Inseraţi o zonă simplă de text

Zonele simple de text sunt ideale pentru vizitatori. Ele permit acestora
introducerea unor informaţii scurte, precum numele, prenumele etc.
479
Iată cum inserăm în formular coordonatele unui vizitator; pentru
început, numele acestuia.
1. Introduceţi tag-ul <INPUT> (figura 10.29).
Figura 10.29
Remarci:
9 Tag-ul pereche <INPUT> este utilizat pentru specificarea câmpurilor (zonelor)
unui formular destinate introducerii datelor.
9 <INPUT> este prevăzut cu un foarte mare număr de atribute.
2. Introduceţi, în continuare, în tag-ul <INPUT> atributul

type=”text” pentru a preciza că zona (nume) va conţine text
(figura 10.30).
Figura 10.30
480
3. Introduceţi, în continuare, în tag-ul <INPUT> atributul
name=”?”, înlocuind semnul de întrebare (?) cu numele
simbolic al valorii zonei de text (nume). Această valoare permite
identificarea datelor în momentul recepţionării lor de către
server (figura 10.31).
Figura 10.31
4. Introduceţi, în continuare eticheta Nume (figura 10.32).
Figura 10.32

481
Figura 10.33
Remarcă. În navigator se afişează prima zonă simplă de text (Nume).
Aplicaţie
Inseraţi, în continuare, în formular, cea de a doua coordonată personală a

unui vizitator: prenumele respectând regula de aur a formularelor.
XHTML Inseraţi o zonă simplă de text

Iată cum inserăm în formular coordonatele unui vizitator: numele şi
prenumele.

482
Figura 10.34
Remarci:
9 Zona de text a unui formular poate fi de două tipuri:
o unilinie (o linie);
o multilinie.
9 Cea mai mare parte a controalelor unui formular sunt create cu ajutorul
tag-ului <input />.
9 Codul <input type=”text” /> generează aceeaşi zonă (simplă) de text ca şi
<input />.
9 Puteţi de asemenea modifica proprietăţile unei zone de text a unui formular
Web (în afara atributului type) utilizând atributele name/id, size, maxlenght,
value.
9 Utilizaţi atributul name pentru a identifica fără echivoc zona de text. Pentru a
asigura compatibilitatea cu XHTML utilizaţi atributul id cu aceeaşi valoare pe
care aţi atribuit-o lui name.
9 Valorile lui name trebuie să fie unice în interiorul unui formular.

483
Figura 10.35
HTML Definiţi mărimea unei zone (simple) de text

Puteţi mări sau micşora mărimea unei zone de text, indicând cu precizie
dimensiunea (numărul de caractere) zonei.
Iată cum definim mărimea celor două zone de text: nume, prenume.
Size-ul propus pentru cele două zone este '30', respectiv '20' caractere.
1. Introduceţi în tag-ul <INPUT> al primei zone simple de text

(nume) atributul size=”?”, înlocuind semnul de întrebare (?) cu
dimensiunea zonei (nume) exprimată în caractere (30), figura
10.36.
Figura 10.36
484
2. Introduceţi, în continuare, eticheta Nume (figura 10.37).
Figura 10.37
3. Introduceţi în tag-ul <INPUT> al celei de a doua zone simple

de text, atributul size=”?”, înlocuind semnul de întrebare (?) cu
dimensiunea zonei (prenume) exprimată în caractere (20),
figura 10.38.
Figura 10.38
Remarcă. Pentru a defini lungimea maximă a unei zone de text, introduceţi în tag-ul
<INPUT> atributul maxlength=”?”, înlocuind semnul de întrebare (?) cu numărul
maxim de caractere acceptat.
4. Introduceţi, în continuare, eticheta Prenume (figura 10.39).
Figura 10.39
485
Figura 10.40
Remarcă. În navigator, cele două zone simple de text nu au aceeaşi lungime.
XHTML Definiţi mărimea unei zone (simple) de text

Iată cum definim mărimea celor două zone de text: nume, prenume.
Size-ul propus pentru cele două zone este de 30, respectiv 20 de
caractere.

486
Figura 10.41
Remarcă. Atributul (facultativ) size indică dimensiunea zonei de introducere text. El este
calculat în caractere şi nu ţine cont de numărul de caractere introdus de utilizator.

Figura 10.42
487
HTML Inseraţi o zonă de text multilinie

Puteţi crea o zonă mai mare de text, cu mai multe linii. În această zonă
(fereastră) multilinie pot fi introduse comentarii, instrucţiuni de „livrare”,
sugestii, adresa vizitatorului etc. Dimensiunile zonei de text cu linii
multiple se specifică prin numărul de linii şi de coloane.
Iată cum inserăm, în continuare, cea de a treia coordonată personală a

unui vizitator: adresa.
1. Introduceţi tag-ul <TEXTAREA> cu atributul name=”?”,

înlocuind semnul de întrebare (?) cu valoarea zonei (adresa),
figura 10.43.
Figura 10.43
2. Introduceţi, în continuare, în tag-ul <TEXTAREA> atributele

rows=”?” şi cols=”x”, înlocuind semnul de întrebare (?) cu
numărul de linii (5) şi x-ul cu numărul de coloane (30) al zonei,
exprimat în caractere (figura 10.44).
Figura 10.44
488
3. Introduceţi tag-ul final </TEXTAREA> (figura 10.45).
Figura 10.45
4. Introduceţi eticheta zonei de text, Adresa (figura 10.46).
Figura 10.46
.
Figura 10.47
489
Remarcă. În navigator, vizitatorul dumneavoastră dispune de o fereastră (5 x 30) în care
poate să-şi introducă adresa.
Aplicaţie
Inseraţi în formular o zonă de text pentru password (parolă).
Indicaţie. Introduceţi în tag-ul <INPUT> atributul type=”password” pentru a

preciza că zona va conţine o parolă şi apoi atributul name=”?”, înlocuind
semnul de întrebare (?) cu valoarea zonei (parola).
XHTML Inseraţi o zonă de text multilinie

Iată cum inserăm cea de a treia coordonată personală a unui vizitator –
adresa, utilizând o zonă de text multilinie (5 x 30).
Figura 10.48
Remarci:
9 Tag-urile XHTML cu care puteţi crea o zonă de text multilinie sunt <textarea>
</textarea>. Cu atributele cols şi rows definiţi lăţimea şi lungimea zonei de
text multilinie.
9 Principalele atribute ale elementului <textarea> sunt: cols=”n”; rows=”n”;
name/id=”...”.
9 Nu confundaţi câmpul de text care conţine un text scurt cu zona de text care
conţine un text lung.
490

Figura 10.49
Aplicaţie
Inseraţi în formular o zonă de text pentru password.
HTML Creaţi o casetă de validare

Casetele de validare permit vizitatorului dumneavoastră de a selecta una
sau mai multe opţiuni pe care le propuneţi.
Iată cum creăm într-un formular patru casete de validare, cu numele a

patru cursuri de programare: Java, Pascal, Basic, C++, pe care vizitatorii
le pot urma la societatea LUMINA BLÂNDĂ.
491
1. Introduceţi patru tag-uri <INPUT type=”checkbox”> pentru a
preciza că zona va conţine o casetă de validare (figura 10.50).
Figura 10.50
2. Introduceţi, în continuare, în tag-ul <INPUT> al fiecărei casete

de validare atributul name=”?”, înlocuind semnul de întrebare
(?) cu numele simbolic al valorii fiecărei zone (C1, C2, C3, C4),
figura 10.51.
Figura 10.51
492
3. Introduceţi, în continuare, în tag-ul <INPUT> al fiecărei casete
de validare atributul value=”?”, înlocuind semnul de întrebare
(?) cu valoarea casetei (figura 10.52).
Figura 10.52
Remarci:
3 Informaţiile pe care trebuie să le specificaţi în momentul creării casetelor de
validare privesc atributele name şi value ale tag-ului <INPUT>. Indicaţi, de
asemenea, şi denumirile casetelor de validare.
3 Valoarea checkbox a atributului type este de tip boolean; ea poate fi activă
sau inactivă. Seamănă cu o casetă goală, care, o dată selectată, este umplută
cu un semn de bifare, pentru a sugera starea sa activă.
5. Introduceţi, în continuare etichetele: Java, Pascal, Basic, C++

pentru fiecare casetă de validare (figura 10.53).
Figura 10.53

493
Figura 10.54
Remarcă. În browser, vizitatorul poate opta pentru unul sau mai multe cursuri de
programare specificate.
XHTML Creaţi o casetă de validare

Iată cum creăm într-un formular patru casete de validare, cu numele a
patru cursuri de programare: Java, Pascal, Basic, C++, pe care vizitatorii
le pot urma la societatea LUMINA BLANDA.

494
Figura 10.55
Remarci:
9 Fiecare casetă de validare dispune de un nume specific.
9 Atributele utilizate în tag-ul <input> pentru definirea unei casete de
validare sunt: type – cu valoarea checkbox, name/id, value, checked –
cu valoarea checked.
495
Figura 10.56
HTML Creaţi un buton radio

Spre deosebire de casetele de validare, butoanele radio se exclud
reciproc.
Butoanele radio nu seamănă la aspect cu casetele de validare. În locul

unor casete goale sau bifate, utilizatorul vede un cerc gol sau unul cu un
punct mare în interiorul acestuia.
Iată cum definim într-un formular patru butoane radio pentru vizitatorii
(bărbaţi/femei) care vor să acorde un calificativ – Excelent, Foarte bine,
Bine, Nesatisfăcător site-ului pe care l-aţi realizat şi încă două butoane
radio pentru sex.
1. Introduceţi patru tag-uri <INPUT type=”radio”> pentru a

preciza că zona va conţine un buton radio (figura 10.57).
496
Figura 10.57
2. Introduceţi, în continuare, în tag-ul <INPUT> al fiecărui buton

radio atributul name=”?” înlocuind semnul de întrebare (?) cu
numele simbolic al valorii fiecărei zone (radio), figura 10.58.
497
Figura 10.58
Remarci:
3 Valoarea radio a atributului type este foarte asemănătoare cu valoarea
checkbox a aceluiaşi atribut, cu deosebirea că butoanele radio se exclud
reciproc.
3 Atributul checked este opţional.
3 În funcţie de obiectivul propus, atributul value nu trebuie folosit în mod
obligatoriu.
4. Introduceţi, în continuare etichetele: Excelent, Foarte bine,

Bine, Nesatisfăcător pentru fiecare buton radio (figura 10.59).
Figura 10.59
498
5. Introduceţi tag-ul <INPUT type=”radio”> pentru a preciza că
zona va conţine un buton radio, apoi atributul name=”?”,
înlocuind semnul de întrebare (?) cu numele simbolic al zonei
(sex).
Figura 10.60
6. Introduceţi tag-ul <INPUT type=”radio”> pentru a preciza că

zona va conţine un buton radio, apoi atributul name=”?”,
înlocuind semnul de întrebare (?) cu numele simbolic al zonei
(sex) şi apoi atributul value=”?”, înlocuind semnul de întrebare
(?) cu valoarea feminin (figura 10.61).
Figura 10.61
7. Introduceţi, în continuare eticheta Sex (figura 10.62).

499
Figura 10.62
Figura 10.63
Remarcă. În navigator, vizitatorul selectează opţiunea (una şi numai una!)

corespunzătoare.
500
XHTML Creaţi un buton radio

Iată cum definim într-un formular patru butoane radio pentru vizitatorii
(bărbaţi / femei) care doresc să acorde un calificativ – Excelent, Foarte
bine, Bine, Nesatisfăcător site-ului pe care l-aţi realizat şi încă două
butoane radio pentru sex.
Figura 10.64
501
Remarcă. Atributele utilizate în tag-ul <input /> pentru definirea unui buton radio sunt:
type – cu valoarea radio, name/id, value, checked – cu valoarea checked.

Figura 10.65
HTML Creaţi un meniu derulant

Meniurile derulante propun vizitatorilor o listă de opţiuni.
Iată cum creăm un meniu derulant ce conţine o listă (simplificată) a

profesiilor: economist, inginer, profesor universitar, profesor liceu,
profesor şcoală generală, avocat, contabil.
502
1. Introduceţi titlul meniului derulant „Care este profesia
dumneavoastră?” (figura 10.66).
Figura 10.66
2. Introduceţi tag-ul <SELECT size=”?” name=”x”>, înlocuind

semnul de întrebare (?) cu numărul de opţiuni (4) vizibile la
deschiderea formularului (în practică se optează pentru un
număr de opţiuni superior lui 3, în caz contrar se va opta pentru
butoane radio sau casete de validare) iar x-ul cu numele zonei:
profesie (figura 10.67).
Figura 10.67
503
Remarcă. Dacă nu indicaţi numărul de opţiuni, se afişează o bară de defilare urmând ca
vizitatorul să deruleze lista de opţiuni.
3. Introduceţi tag-ul <OPTION value=”?”>, înlocuind semnul de

întrebare (?) cu valoarea fiecărei opţiuni, iar apoi introduceţi
eticheta opţiunii (figura 10.68).
Figura 10.68
4. Introduceţi tag-ul final </SELECT>.
Figura 10.69
Remarci:
9 Pentru a efectua mai multe alegeri simultane în lista de opţiuni introduceţi în
elementul <SELECT> atributul multiple=”multiple”.
9 Elementul <SELECT> trebuie să conţină atâtea elemente <OPTION> câte
opţiuni conţine lista (de opţiuni).
9 Dacă doriţi să definiţi o opţiune implicită în listă, introduceţi în elementul
<OPTION> atributul selected=”selected” pentru opţiunea corespunzătoare.

504
Figura 10.70
Remarcă. În browser, vizitatorii pot selecta o opţiune din listă.
Aplicaţii
Puteţi propune vizitatorilor dumneavoastră să vă transmită, după caz, un

fişier de date.
Indicaţie. Urmaţi procedura descrisă în continuare.
1. Introduceţi eticheta corespunzătoare „Trimiteţi fişierul

dumneavoastră”.
2. Introduceţi tag-ul <INPUT type=”file” enctype=”multipart/form data”>

pentru a indica formatul.
3. Introduceţi în continuare name=”?”, înlocuind semnul de întrebare (?)

cu numele simbolic al valorii fişierului.
4. Introduceţi, în continuare, în mod opţional, size=”?”, înlocuind semnul

de întrebare (?) cu valoarea în caractere a câmpului în care vizitatorul
va introduce calea de acces către fişier.
505
Exemplu:
Figura 10.71
Introduceţi în formularul creat o secvenţă de tabulare.
Ca şi în cazul legăturilor hipertext, vizitatorul poate naviga într-un formular

utilizând tasta Tab.
Iată care este procedura pe care trebuie s-o urmaţi.
1. Introduceţi în tag-ul <INPUT> atributul tabindex=”?”, înlocuind semnul

de întrebare (?) cu secvenţa corespunzătoare (figura 10.72).
Figura 10.72
506
Figura 10.73
Remarcă. În browser, acţionaţi tasta Tab pentru a naviga din zonă în zonă conform
secvenţei declarate (definite).
XHTML Creaţi un meniu derulant

Iată cum creăm un meniu derulant ce conţine o listă (simplificată) a
profesiilor: economist, inginer, profesor universitar, profesor liceu,
profesor şcoală generală, avocat, contabil, pornind de la documentul
HTML meniu.htm creat anterior, pe care apoi îl convertim în XHTML cu
În figura 10.74 se prezintă documentul XHTML generat cu programul

utilitar HTML-TIDY.
507
Figura 10.74

Figura 10.75
508
Remarci:
9 Elementul <select> defineşte o zonă (în formular) pentru un câmp de
selecţie. Atributele elementului <select> sunt: name=”...”; size=”...”;
multiple=”multiple”. Cu atributul multiple, utilizatorul poate selecta una sau
mai multe opţiuni (Exemplu: <select name=”profesie” multiple=”multiple”>).
9 Elementul <option> marchează articolele incluse în câmpul de selecţie.
Atributele elementului <option> sunt: value=”...” selected=”selected”
(specifică selecţia implicită).
Aplicaţie
Cereţi vizitatorilor dumneavoastră să vă transmită un fişier de date fără a

recurge la e-mail sau protocolul FTP.
Indicaţie. Introduceţi codul:
<input type=”file” name=”filenew” size=”30” maxlength=”256” />
sau,
<input type=”file” name=”filenew” size=”30” maxlength=”256”

accept=”image/*” />.
Atributul accept=”image/*” este folosit pentru acceptarea tuturor tipurilor de

fişiere. Valorile atributului accept sunt de tip MIME (vezi ftp://ftp.isi.edu/
in-notes/iana/assignments/media-types).
(X)HTML Temă
1. Comentaţi următoarele reguli de … aur ale formularelor:
9 Plasaţi în stânga formularului zonele de date de aceeaşi lungime.
Textul se va alinia vertical şi va deveni mult mai agreabil.
9 Butoanele radio oferă utilizatorilor posibilitatea de a selecta o
singură opţiune (şi numai una!). Butoanele radio se exclud
reciproc.
9 Casetele de validare permit utilizatorilor de a selecta una, nici una
sau mai multe opţiuni din cadrul unei liste.
509
Web din figura 10.76.
Figura 10.76
Figura 10.77
9 http://web.mit.edu/wwwdev/cgiemail/index.html
9 www.123webmaster.com
Conversaţia 11
Inseraţi obiecte multimedia cu

HTML 4 şi XHTML
•••••••••••••••••••••••••••••••••••••••••
f Reguli pentru inserarea obiectelor multimedia
f HTML 4, XHTML – Inseraţi un fişier sunet pentru Internet Explorer
f HTML 4, XHTML – Inseraţi un fişier video
f HTML 4, XHTML – Inseraţi un fişier sunet extern sub forma unei legături
hipertext
f HTML 4, XHTML – Inseraţi un fişier video extern sub forma unei legături
hipertext
f HTML 4, XHTML – Inseraţi un applet Java
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
Reguli pentru inserarea obiectelor multimedia

Obiectele multimedia – imagini animate, sunete, video pot face ca
paginile dumneavoastră să devină mult mai vivante, cu singura
observaţie ca acestea să fie realizate corect. Obiectele multimedia pot da
paginilor dumneavoastră Web perfecţiunea vizuală.
Este destul de dificil de a obţine obiecte multimedia de calitate. Prima

soluţie este aceea de a crea dumneavoastră, cu forţe proprii efectele
multimedia; va trebui să cumpăraţi materiale brute (fotografii, sunete şi
clipuri video), software dedicat consacrând o mare parte din timpul
512
dumneavoastră acestei activităţi.
A doua soluţie constă în căutarea elementelor multimedia pe Web,

soluţie mai puţin costisitoare, mult mai rapidă dar foarte aleatoare. Pe
Web sunt disponibile cantităţi enorme de elemente multimedia, unele
fără … stăpân sau care nu fac parte din domeniul public.
Înainte de a le utiliza, analizaţi cu multă atenţie avantajele şi

dezavantajele pe care le oferă fiecare element multimedia în parte şi
numai după aceea decideţi! Începeţi prin a vă pune următoarele
întrebări:
9 Elementul multimedia contribuie în mod pozitiv la îmbunătăţirea

conţinutului paginii Web?
9 Elementul multimedia valorifică sau completează în mod evident

conţinutul paginii Web?
9 Navigatoarele utilizatorilor suportă toate aceste elemente

(multimedia)?
9 Utilizatorii dispun de o conexiune Internet rapidă?
9 Utilizatorii deţin cele mai bune plugin-uri? Dispun ei de timp şi de

mijloace tehnice pentru a le obţine şi a le instala?
9 Dumneavoastră, personal dispuneţi de timp şi de resurse pentru a

crea sau a căuta elemente multimedia?
Creatorii de multimedia oferă utilizatorilor programe gratuite (puteţi

cumpăra versiunile cu facilităţi complexe), care recunosc cea mai mare
parte a formatelor fişierelor multimedia disponibile pe Web.
9 RealPlayer (vezi www.real.com) recunoaşte RealAudio şi RealVideo;
9 QuickTime (vezi www.apple.com/quicktime) recunoaşte mai mult de

200 de tipuri de media digital (MP3, MIDI, AVI, AVR etc.);
9 Windows Media Player (vezi www.microsoft.com/windows/

windowsmedia/EN/default.asp) include 7 facilităţi într-o singură
513
aplicaţie: CD player, interpretor audio şi video, media jukebox, ghid
media, Internet radio, aparat portabil pentru transferul fişierelor care
conţin muzică, interpretor de CD audio. Windows Media Player este
disponibil pe PC-uri şi Macintosh.
Dacă v-aţi decis să inseraţi în pagina dumneavoastră Web un fişier

sunet, veţi obţine efecte … amuzante!
Sunetul are o utilizare mai puţin practică pe Web. Trei sunt situaţiile în
care intervin fişierele sunet: momentul accesării paginii Web de către
utilizator; momentul în care utilizatorul execută clic pe un obiect;
momentul în care utilizatorul deschide fişierele multimedia (animaţii
Flash sau fişiere video).
Dacă doriţi să ascultaţi muzică în timpul navigării, introduceţi pur şi

simplu un CD în unitatea CD-ROM! Dacă doriţi să inseraţi un fişier sunet
în pagina dumneavoastră Web, utilizaţi unul din formatele următoare:
9 MIDI (Musical Instrument Digital Interface);
9 AIFF (Audio Interchange File Format);
9 AU (sau basic AUdio);
9 WAV (ca în WAVe);
9 RAM sau RA (Real Media);
9 MP3 (Moving Picture Experts Group sau MPEG, Audio Layer 3).
Remarcă. Există o mulţime de surse pentru fişiere sunet pe Web. Căutaţi fişierele audio
pe site-ul www.yahoo.com sau utilizaţi motoare de căutare comparisonics pentru a
căuta efecte sonore pe site-ul www.findsounds.com.
Utilizaţi legăturile hipertext pentru inserarea unui fişier sunet extern.

Procedând astfel, lăsaţi utilizatorilor şansa de a decide singuri în privinţa
ascultării sau nu a fondului sonor. Puteţi oferi de asemenea utilizatorilor
dumneavoastră şi posibilitatea unui control suplimentar asupra sunetului
(volum, pauză, pornire) utilizând elementul object.
514
Remarcă. Elementul object poate fi utilizat pentru sunet, video şi fişiere text, dar nu
include atributele folosite în cadrul elementului embed, care nu este recunoscut de
XHTML1.
Elementele video, atunci când se găsesc într-o stare perfectă pot

reprezenta cel mai practic element multimedia. Într-un clip video scurt,
puteţi prezenta utilizatorului un concept sau un proces în locul unei
descrieri lungi, plicticoase cu paragrafe sau cu proceduri stufoase ce
conţin mult text.
Tehnologia video continuă să se dezvolte într-un ritm rapid iar clip-urile

video de dimensiuni rezonabile sunt disponibile pe foarte multe site-uri.
Creaţi propriile fişiere video sau căutaţi-le pe Web. Dacă doriţi să inseraţi
un fişier video în pagina dumneavoastră Web utilizaţi unul din formatele
următoare:
9 AVI (Audio Video Interleave);
9 Flash (vizitaţi site-ul www.macromedia.com);
9 MPEG (Moving Picture Experts Group);
9 QuickTime.
Pentru inserarea fişierelor video recomandăm utilizarea legăturilor

hipertext în locul inserării directe a acestora în paginile dumneavoastră
Web. Când fişierele video sunt inserate prin link-uri, utilizatorii pot
decide singuri dacă vor sau nu să le vizioneze.
Puteţi de asemenea anima, insera elemente interactive în pagina

dumneavoastră Web utilizând mini-programe Java, cunoscute sub
numele de applet-uri.
Remarci:
9 Pentru mai multe informaţii privind limbajul de programare Java, vizitaţi
site-ul www.sun.com.
9 Vizitaţi site-urile: www.shareware.com, http://gamelan.com care conţin
applet-uri pe care vă invităm să le apreciaţi singuri.
515
Inseraţi un fişier sunet pentru Internet

HTML
Explorer
De ce să nu vă întâmpinaţi vizitatorii cu un fond sonor agreabil?
„La musique avant ... toutes choses”, nu-i aşa?
Iată cum inseraţi în pagina dumneavoastră Web un fişier sunet din

folder-ul Windows\Media sau, de ce nu, un fişier sunet creat chiar de
dumneavoastră!
1. Introduceţi între tag-urile <BODY> ... </BODY> sau <HEAD> ...

</HEAD>, tag-ul <BGSOUND src=”?”>, înlocuind semnul de
întrebare (?) cu calea de acces către fişierul sunet (figura 11.1).
Figura 11.1
Remarci:
3 Înainte de a insera un fişier sunet în pagina dumneavoastră Web, trebuie să-l
creaţi. Fişierele sunet au extensia .WAV.
3 Puteţi insera fişiere sunet care provin şi din alte surse, dar, în acest caz, nu
uitaţi să respectaţi drepturile de autor, copyright-ul!
516
4. Vizualizaţi pagina Web într-un browser (figura 11.2). Cum vă

place?
Figura 11.2
Remarcă. Când vizitatorul va accesa pagina dumneavoastră, el va naviga pe un

fond sonor, cel pe care l-aţi prevăzut.
Aplicaţii
Definiţi opţiunile de sunet pentru Internet Explorer.
Indicaţie. Introduceţi în tag-ul <BGSOUND> atributul loop=”?”, înlocuind semnul

de întrebare (?) cu numărul de iteraţii pentru ... sunetul muzicii!
Inseraţi un fond sonor pentru Netscape Navigator.
Iată cum inserăm fişierul sunet pentru NETSCAPE NAVIGATOR.
1. Introduceţi între tag-urile <BODY> ... </BODY> sau <HEAD> ...

</HEAD> tag-ul <EMBED src=”?”>, înlocuind semnul de întrebare (?)
cu calea de acces către fişierul sunet (figura 11.3).
517
Figura 11.3
Figura 11.4
Remarci:
3 În navigator (NETSCAPE) se afişează numai o porţiune din consolă. Intră în
sarcina dumneavoastră de a o seta, astfel încât vizitatorul să poată controla
sunetul.
3 În INTERNET EXPLORER, tag-ul <EMBED> afişează o consolă care permite
START/STOP pentru fişierul sunet al paginii.
Setaţi forma şi dimensiunea consolei care se afişează în Netscape Navigator,
518
la începutul paginii Web, în care s-a inserat un fond sonor!
Indicaţie. Introduceţi în tag-ul <EMBED> atributul controls=”?”, înlocuind

semnul de întrebare (?) cu dimensiunea / tipul consolei, după cum urmează:
3 forme (afişează pe o suprafaţă foarte mică controlul sunetului).

3 console (afişează o consolă de dimensiuni normale).
3 smallconsole (afişează o consolă în miniatură).
Pentru a configura citirea fişierului sunet, folosiţi procedurile de la Internet
Explorer.
Inseraţi un fişier sunet pentru Internet

XHTML
Explorer
Salutaţi vizitatorii printr-un mesaj sonor sau oferiţi-le o melodie care să
evoce subiectul site-ului dumneavoastră. Creaţi dumneavoastră înşivă
fişierul sunet WAV!
Remarcă. Folosite corect, clipurile sunet sau video pot îmbunătăţi în mod
considerabil conţinutul paginilor Web. Tastaţi „sound clips” în motorul de
căutare preferat pentru a găsi fişierele sunet pe care apoi eventual să le
inseraţi în paginile dumneavoastră Web.
Iată cum inseraţi în pagina dumneavoastră Web un fişier sunet
(tada.wav) din folder-ul Windows\Media sau, de ce nu, un fişier sunet
creat chiar de dumneavoastră!

519
Figura 11.5
Remarci:
3 Reamintim încă o dată că tag-ul vid <bgsound/> (nu are tag de închidere,
căci el nu aparţine standardului XHTML) nu este interpretat decât de către
3 Tag-ul (vid XHTML) <bgsound/> acceptă atributele src şi loop.

Internet Explorer.
Figura 11.6
520
HTML Inseraţi un fişier video

Dacă aţi creat cu propriile forţe un fişier video sau dispuneţi de o sursă
care vă dă dreptul să utilizaţi în paginile dumneavoastră Web fişiere
video ce nu sunt proprietatea dumneavoastră (copyright-ul!) puteţi
insera în mod simplu aceste fişiere (video). Nu uitaţi că fişierele video
sunt mari consumatoare de octeţi şi încetinesc considerabil încărcarea
paginilor dumneavoastră!
Iată cum procedaţi pentru a insera în pagina dumneavoastră Web un

fişier video.
1. Introduceţi în interiorul tag-urilor <BODY> ... </BODY> tag-ul

<EMBED src=”?”>, înlocuind semnul de întrebare (?) cu calea
de acces către fişierul video (figura 11.7).
Figura 11.7
521
Remarci:
9 Extensiile pentru fişierele video sunt:
.avi (pentru fişiere AVI);
.mpg (pentru fişiere MPEG);
.mov sau .qt (pentru fişiere Quick Time).
9 Pentru a crea fişiere video pe PC, trebuie să aveţi o dotare minimă: MacAV,
PowerMac; o cartelă de achiziţie video etc.
2. Definiţi dimensiunea zonei de afişaj a fişierului video.
2.1 Introduceţi în continuare, în tag-ul <EMBED> atributele

width=”x”, height=”y”, înlocuind x-ul cu lungimea,
exprimată în pixeli şi y-ul cu înălţimea, exprimată în
pixeli (150 x 150), figura 11.8.
Figura 11.8
3. Definiţi numărul de iteraţii (2) pentru operaţia de citire a

fişierului video (figura 11.9).
Figura 11.9

522
.
6. Vizualizaţi pagina Web într-un browser (figura 11.10). Cum

vă place?
Figura 11.10
Remarcă. Când vizitatorul va accesa pagina, va vedea video-ul de două ori (loop=”2”) şi
va putea stopa/relansa operaţia de citire.
XHTML Inseraţi un fişier video

Animaţiile şi clipurile video sunt obiecte care dau viaţă unei pagini Web
statice. AVI este formatul video, dezvoltat special pentru mediul
Windows. Filmele Quick Time sau filmele Shockwave Flash sunt
independente de platformă. Formatul video influenţează considerabil
volumul fişierului.
Pentru a insera un clip video utilizaţi tag-ul Microsoft <img /> cu

atributul dynsrc, sau tag-urile <object></object> sau
<embed></embed> independente de navigator.
523
Iată cum procedaţi pentru a insera în pagina dumneavoastră Web un
fişier video (clock.avi) din folder-ul Windows.
Figura 11.11
Remarci:
9 Microsoft Internet Explorer şi Netscape Navigator interpretează tag-ul
<embed> începând cu versiunea 3.
9 Cu tag-ul <img/>, Microsoft Internet Explorer interpretează atributul dynsrc
care permite inserarea fişierelor video în pagina Web.
9 Cu tag-urile <object> sau <embed> incorporaţi secvenţe video care pot fi
afişate de Microsoft Internet Explorer şi Netscape Navigator.
9 Începând cu versiunea 4 a limbajului HTML, puteţi utiliza tag-ul <object>
pentru a incorpora fişiere multimedia, în mod independent de navigator.
Tag-ul <object> este interpretat de cele două navigatoare. Transmiteţi URL-ul
fişierului multimedia prin atributul data al tag-ului <object>.
9 Pentru a scrie un cod conform cu XHTML utilizând un navigator care nu
interpretează tag-ul <object>, inseraţi fişierul cu tag-ul <object> şi referiţi
încă o dată fişierul prin tag-ul <embed> între <object> şi </object>.

Internet Explorer.
524
Figura 11.12
Remarci:
9 Creaţi propriile fişiere video sau găsiţi-le pe Web, într-unul din formatele: AVI
(Audio Video Interleave); Flash; MPEG (Moving Picture Experts Group);
QuickTime.
9 Vizitaţi site-urile: www.cnn.com/videoselect şi www.comedycentral. com care
oferă clip-uri scurte pe care le puteţi încărca rapid.
Inseraţi un fişier sunet extern sub forma

HTML
unei legături hipertext
Este bine să-i lăsaţi pe vizitatorii dumneavoastră să decidă singuri
asupra inserării în pagină a unui fond sonor. Soluţia este de a insera un
fişier sunet extern, sub forma unei legături hipertext.
Iată cum creăm o legătură hipertext către un fişier sunet extern.
1. Introduceţi în interiorul tag-urilor <BODY> şi </BODY> tag-ul

<A href=”?.wav”>, înlocuind semnul de întrebare (?) cu calea
de acces către fişierul sunet (figura 11.13).
525
Figura 11.13
2. Introduceţi textul legăturii hipertext: „Ascultaţi sunetul muzicii!”

(figura 11.14).
Figura 11.14
Figura 11.15
526

place?
Figura 11.16
Remarcă. Pentru a asculta fondul sonor, vizitatorului nu-i rămâne decât să execute clic
pe „Ascultaţi sunetul muzicii!”, legătura hipertext către fişierul sunet extern.
Inseraţi un fişier sunet extern sub forma

XHTML
Cel mai simplu mod de a insera fişiere sunet extern este cel al utilizării
unei legături hipertext. Procedând astfel, puteţi decide dacă doriţi sau nu
doriţi să ascultaţi … sunetul muzicii.
Iată cum creăm o legătură hipertext către un fişier sunet extern

(tada.wav), pornind de la documentul HTML audio2.html, pe care apoi îl

527
Figura 11.17

Internet Explorer.
Figura 11.18
Inseraţi un fişier video extern sub forma

HTML
A insera un fişier video extern sau a nu insera? Aceasta este întrebarea!
528
Răspunsul este acelaşi ca la inserarea în pagina Web a unui fişier sunet
extern – inseraţi fişierul video extern sub forma unei legături hipertext.
Executaţi clic sau nu executaţi clic pe textul legăturii hipertext către
fişierul video extern.
Iată cum procedăm pentru a insera în pagina Web un fişier video extern
sub forma unei legături hipertext.
1. Introduceţi în interiorul tag-urilor <BODY> şi </BODY> tag-ul <A

href=”?”>, înlocuind semnul de întrebare (?) cu calea de acces
către fişierul video (figura 11.19).
Figura 11.19
2. Introduceţi textul legăturii hipertext „Vizionaţi secvenţa video”

(figura 11.20).
Figura 11.20
529
Figura 11.21

place?
Figura 11.22
Inseraţi un fişier video extern sub forma

XHTML
Ca şi în cazul fişierelor sunet externe, cel mai simplu mod de a insera
530
fişiere video externe este tot cel al utilizării unei legături hipertext. În
ceea ce ne priveşte recomandăm utilizarea legăturilor hipertext către
fişierele video, în locul inserării directe într-o pagină Web. Când fişierele
video conţin link-uri, utilizatorii pot decide singuri dacă vor sau nu să le
vizioneze.
Iată cum procedăm pentru a insera în pagina Web un fişier video extern
(clock.avi) sub forma unei legături hipertext, pornind de la documentul
HTML video.html, pe care apoi îl convertim în XHTML cu programul
utilitar HTML-TIDY.
Figura 11.23

Internet Explorer.
531
Figura 11.24
HTML Inseraţi un applet Java

Applet-urile Java sunt mici programe (în Java) pe care le puteţi insera în
paginile dumneavoastră Web, cu scopul de a realiza anumite funcţii.
Iată cum inserăm în pagina Web un applet Java care testează dacă
valoarea introdusă într-un câmp al unui formular este mai mare ca 50.
1. Introduceţi în interiorul tag-urilor <BODY> ... </BODY> tag-ul

<APPLET code=”?class”>, înlocuind semnul de întrebare (?) cu
calea de acces către applet-ul Java (figura 11.25).
Figura 11.25
532
2. Introduceţi tag-ul final </APPLET> (figura 11.26).
Figura 11.26
Figura 11.27
Remarcă. În navigator, vizitatorul va trebui să execute clic pe applet pentru a deschide

mini-programul din spatele ... butonului.
XHTML Inseraţi un applet Java

Applet-urile Java au extensia numelui de fişier .class. În cazurile cele mai
simple, pentru a utiliza un applet Java aveţi nevoie de numele
applet-ului, test.class de exemplu. Pentru applet-urile mai complexe
533
trebuie să furnizaţi parametrii.
Remarci:
9 Un program Java, creat pentru a fi afişat în fereastra navigatorului este numit
applet Java. Un applet Java serveşte în principiu pentru a insera în pagina
Web animaţii, jocuri, aplicaţii interactive.
9 Pentru a incorpora un applet Java în pagina dumneavoastră Web dispuneţi de
mai multe posibilităţi. Dacă codul este conform cu XHTML va trebui să utilizaţi
tag-ul <object>, care permite inserarea tuturor obiectelor în pagină. Alt tag,
specific, numit <applet> nu mai aparţine standardului oficial al limbajului, dar
este interpretat de cele două mari browser-e: Microsoft Internet Explorer şi
Netscape Navigator.
9 Va trebui să compilaţi applet-ul Jva pe care-l ataşaţi fişierului HTML; el va
avea extensia class.
9 Pentru a insera un applet Java ca un obiect, utilizaţi tag-ul <object> cu
atributele: classid, codebase şi codetype. Definiţi parametrii de programare ai
applet-ului Java între tag-urile <object> şi </object>. Un parametru de acest
tip se compune din două părţi: nume şi valoare. Documentele XHTML trebuie
să utilizeze atributul id. Pentru a asigura un maximum de compatibilitate
utilizaţi atributele id şi name cu valori identice.
9 Pentru a insera un applet Java cu tag-ul <applet> utilizaţi secvenţa
prezentată în figura 11.28.
Figura 11.28
Iată cum inserăm în pagina Web un applet Java (test.class) care

testează dacă valoarea introdusă într-un câmp al unui formular este mai
mare ca 50, pornind de la documentul HTML applet.html, pe care apoi îl
534
Figura 11.29

Internet Explorer.
Figura 11.30
Remarci:
9 Viitorul utilizării elementelor multimedia în paginile Web este evident. În locul
utilizării mai multor elemente şi atribute folosiţi mai simplu elementul
<object> cu atributele: align, archive, border, class, codebase, codetype,
classid, data, height, hspace, id/name, standby, style, title, type, vspace,
width.
9 Recomandarea XHTML se adaptează la toate tipurile de elemente multimedia
(sunet, video, applet etc.).
9 Utilizând elementul <object> cu atributele corespunzătoare nu mai este
nevoie să scrieţi coduri separate pentru Netscape Navigator şi Internet
Explorer pentru a utiliza fişiere multimedia.
535
Aplicaţie
Inseraţi în pagina dumneavoastră Web applet-ul Java TicTacToe.class.
În figura 11.31 se prezintă documentul sursă XHTML creat manual.
Figura 11.31
care afişează icon-ul de conformitate .

În figura 11.32 este afişat rezultatul vizualizării paginii Web în Microsoft Internet
Explorer.
536
Figura 11.32
Remarcă. Pentru a obţine mai multe informaţii privind elementele <object> vizitaţi
site-urile:
9 www.w3.org;
9 www.zvon.org/xxl/xhtmlReference/output/index.html.
(X)HTML Temă
1. Comentaţi următoarele reguli pentru inserarea obiectelor multimedia:
9 Elementul multimedia contribuie în mod pozitiv la îmbunătăţirea
conţinutului paginii Web?
9 Dumneavoastră, personal dispuneţi de timp şi resurse pentru a
crea sau a căuta elemente multimedia?
537
2. Precizaţi care sunt extensiile pentru fişierele sunet şi video.
3. Descrieţi pe scurt procedura (X)HTML de inserare a unui fişier
sunet/video extern sub forma unei legături hipertext.
4. Ce este un applet Java?
9 www.findsounds.com
9 www.cnn.com/videoselect
9 www.real.com
9 www.sun.com
9 www.shareware.com
9 http://gamelan.com
Conversaţia 12
Creaţi cadre cu HTML 4 şi XHTML

•••••••••••••••••••••••••••••••••••••••••
f Reguli pentru utilizarea cadrelor
f HTML 4, XHTML – Apreciaţi cadrele (X)HTML
f HTML 4, XHTML – Creaţi cadre care se afişează în coloane (fixe,
dinamice)
f HTML 4, XHTML – Introduceţi pagini Web într-un cadru
f HTML 4, XHTML – Creaţi cadre care se afişează în linii (fixe, dinamice)
f HTML 4, XHTML – Numiţi un cadru
f HTML 4, XHTML – Creaţi o legătură (link) către un cadru
f HTML 4, XHTML – Formataţi bordurile cadrelor
f HTML 4, XHTML – Controlaţi prezenţa sau absenţa barelor de defilare
f HTML 4, XHTML – Creaţi o alternativă pentru cadre
f (X)HTML – Temă
•••••••••••••••••••••••••••••••••••••••••
Reguli pentru utilizarea cadrelor

Cadrele constituie un tip de prezentare particulară a unei pagini Web
(sau a mai multor pagini Web) căci ele permit divizarea ferestrei
navigatorului în două sau mai multe zone, una mai mare pentru
conţinut, alta mai mică pentru logo, link-uri de navigare etc.
Decizia de a utiliza cadre vă aparţine! Analizaţi avantajele dar şi

dezavantajele pe care cadrele le oferă utilizatorilor şi numai după aceea
decideţi!
540
Avantaje:
9 cadrele sunt recunoscute de cea mai mare parte a navigatoarelor;
9 cadrele sunt mult utilizate pe Internet fiind percepute ca un semn
distinct al utilizării tehnologiilor avansate de creare a unui site;
9 cadrele reduc timpul de încărcare al paginilor; atunci când sunt
utilizate se încarcă numai conţinutul paginilor, elementele statice
(logo-urile, meniuri de navigare) fiind deja încărcate de către
utilizatori;
9 cadrele măresc gradul de funcţionalitate al site-ului. Navigarea
rămâne vizibilă în timp ce conţinutul este în curs de schimbare, într-un
cadru separat;
9 cadrele permit de o manieră simplă şi rapidă actualizarea paginilor şi
adăugarea unui nou conţinut.
Dezavantaje:
9 cadrele au reputaţia de a fi incoerente;
9 navigarea în interiorul cadrelor reprezintă încă un mister pentru mulţi
dintre noi;
9 cadrele pot ocupa mai mult spaţiu decât le este necesar;
9 o rezoluţie insuficientă a navigatorului poate face ... ravagii într-un
site care conţine cadre;
9 nu de puţine ori cadrele pot reprezenta un risc juridic. Drepturile de
autor pot fi încălcate atunci când se execută link-uri către
documentele (X)HTML – din exteriorul site-ului care nu vă aparţin.
Pentru a evita astfel de situaţii neplăcute este mult mai bine să
utilizaţi pagini care nu conţin cadre.
Alături de tabele, cadrele reprezintă de asemenea un foarte puternic

instrument de proiectare a site-urilor. Aşadar în faza de concepţie a unui
site, ce este mai bine să folosiţi: tabele sau cadre?
Să analizăm împreună ... oferta (avantaje, dezavantaje) şi apoi veţi

decide singuri.
541
Tabelele oferă următoarele avantaje:
9 pun mai puţine probleme de navigare în comparaţie cu cadrele;

9 sunt standarde pentru HTML 3.2 şi 4.
Cadrele oferă următoarele avantaje:
9 paginile care conţin cadre ocupă mai puţin spaţiu de memorie decât
tabelele şi se încarcă mai rapid;
9 sunt mai uşor de actualizat şi de întreţinut;
9 sunt standarde în HTML 4.
Remarci:
9 Cadrele trebuie să permită o navigare uşoară cu una din metodele:
utilizatorii pot executa clic pe un cadru şi vizualiza documentul obţinut în
alt cadru;
utilizatorii pot executa clic într-un cadru şi vizualiza documentul obţinut în
acelaşi cadru.
9 Pentru vizitatorii care folosesc navigatoare ce nu recunosc cadrele alegeţi o
alternativă cu ajutorul elementului <noframe>.
9 Pentru a realiza o pagină mai atractivă, creaţi cadre inline (flotante) cu
ajutorul elementului <iframe>.
HTML Apreciaţi cadrele HTML

Nimeni nu doreşte să fie … „încadrat”, în adevăratul sens al cuvântului.
Această noţiune dă impresia unui univers din care nu poţi niciodată ieşi.
Din acest motiv este necesar să apreciem corect această noţiune din
punct de vedere al iniţierii în activitatea de creare a cadrelor (cu HTML şi
XHTML).
Cadrele reprezintă un sistem de control al navigării, întrucât ele permit

afişarea paginilor HTML într-o singură fereastră a navigatorului şi un
control al conţinutului individual. Proiectanţii recurg în general la cadre
pentru a crea o pagină care conţine două sau trei cadre.
542
Teoretic nu există limitări în ceea ce priveşte numărul de cadre. Cinci
cadre sunt deja multe! Două cadre reprezintă numărul minim! Atenţie
însă, la gradul de lizibilitate al ecranului.
În concluzie, de ce să nu regrupăm mai multe pagini într-una singură,

într-un singur ecran, astfel încât vizitatorul să poată accesa mai multe
pagini în acelaşi timp.
Atunci când vizitatorul afişează un site care conţine cadre, el vede un

ansamblu de informaţii, organizate în dreptunghiuri ce se afişează pe
linii sau coloane. În cea mai mare parte a timpului, un sumar al site-ului
este afişat în cadrul din stânga ecranului, fiind suficient ca vizitatorul să
execute un clic pe unul din item-urile afişate pentru a vedea pagina
corespunzătoare într-unul din celelalte cadre ale ecranului.
Iată cum definim o pagină de cadre în HTML.
1. Creaţi o pagină nouă HTML, în care nu introduceţi text şi nici

tag-urile pereche <BODY> … </BODY>. Utilizaţi în declaraţia
<!DOCTYPE> DTD-ul specific – frameset (figura 12.1).
Figura 12.1
Remarcă. Spre deosebire de paginile clasice pe care le-am creat până în prezent, cadrele
nu fac parte din recomandările DTD/HTML 4 Strict. În consecinţă, va trebui să utilizaţi
în declaraţia <!DOCTYPE> DTD-ul specific, numit „frameset” caracterizat, în principal
prin dispariţia elementului <BODY> inclus de obicei în rădăcina <HTML> care va fi
înlocuit prin elementul <FRAMESET>.
543
2. Introduceţi tag-ul <FRAMESET> imediat sub tag-ul </HEAD>,
după care acţionaţi de mai multe ori tasta ENTER (figura 12.2).
Figura 12.2
3. Introduceţi tag-ul final </FRAMESET> (figura 12.3).
Figura 12.3
Remarcă. O pagină de cadre nu conţine tag-ul pereche <BODY> … </BODY>.
Figura 12.4
Remarcă. În navigator, pentru moment nu se afişează nici o informaţie, decât titlul

paginii: Pagina de cadre.
544
XHTML Apreciaţi cadrele XHTML

Dacă discutaţi problema cadrelor cu orice creator de site Web veţi avea
parte de o dispută. Bună sau proastă, oamenii au întotdeauna o opinie!
Remarcă. Jakob Nielsen, unul din cei mai respectaţi experţi Web are o pagină Web
intitulată Why Frames Suck unde dezbate unele din problemele pe care utilizatorii le au
cu cadrele. Puteţi citi articolul lui original din 1996 la adresa
www.useit.com/alertbox/9612.html care a fost actualizat în 1999
(http://ww.useit.com/alertbox/990502.html).
În continuare, vreau să punctez câteva elemente pe care să le aveţi în

vedere atunci când creaţi cadre XHTML.
9 Cadrele nu sunt de joacă (!); ele lucrează cel mai bine atunci când
sunt folosite ca instrumente de navigaţie sau când este nevoie să
afişaţi două sau mai multe elemente ale aceluiaşi document, în acelaşi
timp.
9 Pentru crearea cadrelor utilizaţi DTD frameset, rezervat documentelor
multifereastră (vă mai amintiţi desigur că există trei DTD XHTML!),
figura 12.5.
…
<! DOCTYPE html
PUBLIC ”-//W3C//DTD XHTML 1.0 Frameset//EN”
”DTD/xhtml1-frameset.dtd”>
Figura 12.5
…
9 Ca şi în HTML 4.0, tag-urile <frameset> </frameset> înlocuiesc tag-ul
<body>.
9 În XHTML tag-ul <frame />, înlocuitorul lui <frame> </frame> din

HTML 4.0 include name-ul, id-ul cadrului, URL-ul pentru conţinut (src)
cât şi atribute pentru a defini border şi scrolling.
9 Puteţi crea un cadru şi în alt mod, utilizând tag-ul <iframe>

</iframe> (cadru inserat dar, numai pentru Internet Explorer!).
9 Pentru persoanele care nu pot vedea cadrele includeţi tag-ul

<noframes> </noframes>.
545
9 Specificaţi întotdeauna atributul target ori de câte ori lucraţi cu cadre.
Dacă nu specificaţi cadrul ţintă, browser-ul va înlocui cadrul curent cu
documentul ţintă, ceea ce nu vă convine.
9 Înainte de a decide asupra utilizării cadrelor, trebuie să reflectaţi

asupra avantajelor şi dezavantajelor acestora. În concluzie, analizaţi şi
decideţi!
Iată cum definim o pagină de cadre în XHTML.
Figura 12.6
Remarcă. Pentru a defini pagina de cadre XHTML am utilizat al treilea tip de document:
frameset. Pentru a adapta codul este suficient de a schimba tipul transitional în
frameset (vezi figura 12.6).
Validaţi documentul XHTML 1.0 cu aplicaţia validator.

Internet Explorer.
Figura 12.7
546
Remarcă. În navigator, pentru moment nu se afişează nici o informaţie, decât titlul
paginii: Pagina de cadre.
Creaţi cadre care se afişează în coloane (fixe,

HTML
dinamice)
Pentru a crea cadre (X)HTML este necesar să parcurgeţi următoarele
etape:
9 creaţi un document multifereastră (frameset) cu ajutorul

DTD-ului de tip frameset;
9 adăugaţi cadrele şi conţinutul acestora;
9 formataţi cadrele;
9 creaţi o alternativă pentru vizitatorii care utilizează
navigatoarele ce nu recunosc cadrele.
Puteţi crea în HTML cadre, care împart fereastra unui navigator în

coloane fixe, dinamice (cadre în coloane).
Iată cum creăm două cadre care se afişează în coloane fixe: unul la
stânga şi altul la dreapta prin divizarea ferestrei unui navigator în
coloane fixe (cadre în coloane fixe).
1. Definiţi o pagină de cadre în HTML (figura 12.8).
Figura 12.8
547
2. Introduceţi în tag-ul <FRAMESET> atributul cols=”?,X”
înlocuind semnul de întrebare (?) cu lăţimea exprimată în pixeli
a primei coloane (250) şi X-ul cu lăţimea (exprimată în pixeli) a
celei de-a doua coloane (275), figura 12.9.
Figura 12.9
Figura 12.10
Remarci:
9 În navigator, cele două cadre sunt plasate în coloane fixe.
9 Atunci când unul din cadre nu poate fi afişat integral, o bară de defilare se
afişează în mod automat.
Iată cum procedăm pentru a afişa aceleaşi cadre în coloane dinamice.
1. Introduceţi în tag-ul <FRAMESET> atributul cols=”? înlocuind

semnul de întrebare (?) cu lăţimea exprimată în pixeli a primei
coloane (100), după care introduceţi în continuare ,*” pentru
a-i lăsa navigatorului posibilitatea de a decide asupra lăţimii
altor coloane (figura 12.11).
548
Figura 12.11
Remarcă. În elementul <FRAMESET> au fost inserate două elemente vide <FRAME>

care corespund celor două cadre verticale.
Figura 12.12
Remarcă. Navigatorul afişează cele două cadre în coloane. Prima coloană se afişează pe
lăţimea de 100 de pixeli, iar cea de-a doua se afişează pe o lăţime decisă de browser.
549
Creaţi cadre care se afişează în coloane (fixe,
XHTML
dinamice)
Iată cum creăm două cadre (unul la stânga şi altul la dreapta) care se
afişează în coloane fixe (250, 275 pixeli) prin divizarea ferestrei unui
navigator în coloane fixe (cadre în coloane fixe), pornind de la
documentul HTML frame.htm, pe care apoi îl convertim în XHTML cu
Frameset //EN”
frameset.dtd”>
Figura 12.13
Remarcă. Dacă sunteţi un perfecţionist, nu trebuie să lăsaţi browser-ul să calculeze

singur dimensiunea cadrelor dumneavoastră.

550
Figura 12.14
Iată cum creăm aceleaşi cadre în coloane dinamice, pornind de la

documentul HTML frame.html pe care apoi îl convertim în XHTML cu
Frameset //EN”
frameset.dtd”>
Figura 12.15
551
Figura 12.16
HTML Introduceţi pagini Web într-un cadru

Odată creată pagina de cadre, puteţi deschide un document HTML
existent pentru a-l afişa într-unul din cadrele definite.
Iată cum adăugăm în cele două cadre care se afişează în coloane (fixe,
dinamice) informaţiile din paginile: a.htm şi b.htm.
Remarci:
9 Creaţi toate paginile înainte de a fi inserate într-un site (figura 12.17).
Figura 12.17
552
9 Pagina a.html conţine textul „Pagina 1” şi icon-ul de conformitatea
.
9 Pagina b.html conţine textul „Pagina 2” şi icon-ul de conformitatea
1. Introduceţi în interiorul tag-urilor <FRAMESET> …

</FRAMESET> tag-ul <FRAME src=”?”>, înlocuind semnul de
întrebare (?) cu calea de acces către prima pagină care trebuie
să se încarce în pagina de cadre (figura 12.18).
Figura 12.18
2. Repetaţi pasul anterior pentru a încărca cea de-a doua pagină.
Figura 12.19

553
4. Vizualizaţi pagina Web într-un browser (12.20).
Figura 12.20
XHTML Introduceţi pagini Web într-un cadru

Iată cum adăugăm în cele două cadre care se afişează în coloane (fixe,
dinamice) informaţiile din paginile: a.htm şi b.htm, pornind de la
documentul HTML index.html, pe care apoi îl convertim în XHTML cu
Frameset
frameset.dtd”>
Figura 12.21
554
Remarci:
9 Ca şi în cazul tag-ului <img/>, tag-ul XHTML <frame />, care înlocuieşte
tag-ul <frame> </frame> din HTML foloseşte atributul src (source) pentru a
spune browser-ului unde să găsească documentul pe care urmează să-l
afişeze.
9 În XHTML tag-ul <frame /> este un tag vid (se termină cu o bară oblică).

Figura 12.22
Creaţi cadre care se afişează în linii (fixe,

HTML
dinamice)
În HTML puteţi crea de asemenea cadre care împart fereastra unui
navigator în linii fixe, dinamice (cadre în linii).
Iată cum creăm două cadre care se afişează în linii fixe: unul sus şi altul
jos prin divizarea ferestrei unui browser în linii fixe (cadre în linii fixe).
1. Definiţi o pagină de cadre în HTML (figura 12.23).

555
Figura 12.23
2. Introduceţi în tag-ul <FRAMESET> atributul rows=”X,Y”

înlocuind X-ul cu înălţimea (exprimată în pixeli) primei linii (60)
şi Y-ul cu înălţimea (exprimată în pixeli) a celei de-a doua linii
(85) ş.a.m.d. (figura 12.24).
Figura 12.24
3. Introduceţi în interiorul tag-urilor <FRAMESET> …

</FRAMESET> tag-urile: <FRAMESET src=”a.htm”>;
<FRAMESET src=”b.htm”> (figura 12.25).
556
Figura 12.25
Figura 12.26
Remarcă. În navigator, cele două cadre se afişează în linii fixe. Atunci când unui din
cadre nu se poate afişa integral, se afişează în mod automat o bară de defilare.
Iată cum procedăm pentru a afişa aceleaşi cadre în linii dinamice.

1. Introduceţi în tag-ul <FRAMESET> atributul rows=”?”, înlocuind
semnul de întrebare (?) cu înălţimea (exprimată în pixeli) primei
linii (70), după care introduceţi în continuare ,*” pentru a-i lăsa
557
navigatorului posibilitatea de a decide asupra înălţimii celeilalte
linii (figura 12.27).
Figura 12.27

Figura 12.28
Remarcă. Navigatorul afişează cele două cadre în linii, prima linie cu înălţimea de 70 de
pixeli, iar cea de-a doua cu înălţimea decisă de … navigator.
Aplicaţie
Afişaţi un cadru în linie (dinamică), iar celelalte două în coloane (dinamice).
Iată care este procedura pe care vă invităm s-o urmaţi.

558
1. Introduceţi în tag-ul <FRAMESET> atributul rows=”?,*”, înlocuind
semnul de întrebare (?) cu înălţimea (exprimată în pixeli) liniei (90).
2. Înaintea tag-urilor care definesc cele două cadre care urmează să se

afişeze în coloane (dinamice), introduceţi tag-ul <FRAMESET
cols=”?”>, înlocuind semnul de întrebare (?) cu înălţimea (exprimată
în pixeli) primei coloane (160).
3. Introduceţi tag-ul final </FRAMESET> (figura 12.29).
Figura 12.29
Figura 12.30
559
Creaţi cadre care se afişează în linii (fixe,
XHTML
dinamice)
Iată cum creăm două cadre (unul sus şi altul jos) care se afişează în linii
fixe (65, 85 pixeli) în care afişăm informaţiile din paginile a.htm şi b.htm,
pornind de la documentul HTML index.htm, pe care apoi îl convertim în
XHTML cu programul utilitar HTML – TIDY.
Frameset
frameset.dtd”>
Figura 12.31

Internet Explorer.
560
Figura 12.32
Iată cum procedăm pentru a crea aceleaşi cadre în linii dinamice, în care
afişăm informaţiile din paginile: a.htm şi b.htm, pornind de la
documentul HTML index.htm, pe care apoi îl convertim în XHTML cu
Frameset
frameset.dtd”>
Figura 12.33
561
Figura 12.34
Aplicaţie
Afişaţi un cadru în linie (dinamică), iar celelalte două în coloane (dinamice).
Indicaţie. Convertiţi documentul HTML index3.htm în XHTML cu programul

utilitar HTML – TIDY. În figura 12.35 se prezintă documentul XHTML generat iar
în figura 12.36 este afişat rezultatul vizualizării paginii Web în Microsoft Internet
Explorer.
562
Frameset //EN”
frameset.dtd”>
Figura 12.35
Figura 12.36
HTML Numiţi un cadru

Instabilitatea cadrelor este bine cunoscută celor care navighează pe
Internet. Pentru a garanta o bună stabilitate a diferitelor cadre trebuie
563
să stabiliţi link-urile corespunzătoare. Începeţi cu numirea în prealabil a
cadrelor. Fiecare cadru trebuie să poarte un nume. Numele cadrului este
folosit pentru a orienta încărcarea în cadru a fişierului desemnat de o
legătură hipertext. „Numiţi un cadru” diferă de „Numiţi fişierul care
identifică acel cadru”. Numele cadrului este un fel de pseudonim, care
vă permite să deosebiţi cadrele din aceeaşi pagină şi să le referiţi în mod
individual. Numele fişierului este adevăratul nume al fişierului HTML al
cadrului. Veţi înţelege mai bine aceste noţiuni trecând la paragraful
următor.
Iată cum atribuim un nume celor două cadre care se afişează în coloane
dinamice.
1. Introduceţi în tag-ul <FRAME> al fiecărui cadru, atributul

name=”?”, înlocuind semnul întrebării (?) cu numele
corespunzător al cadrului (figura 12.37).
Figura 12.37
2. Salvaţi fişierele.

564
Figura 12.38
Remarcă. În browser, pagina de cadre se afişează aşa cum aţi definit-o; numele celor
două pagini nu se afişează.
XHTML Numiţi un cadru

Iată cum atribuim un nume – cadru_stânga, cadru_dreapta celor două
cadre în care afişăm informaţiile din paginile a.htm şi b.htm (Pagina 1
respectiv Pagina 2).
Figura 12.39
Remarcă. Tag-ul <frame/> utilizează de asemenea atributele name şi id. Prin atributul
name transmiteţi tag-ului <frame/> numele cadrului. Pentru a realiza o compatibilitate
cu XHTML trebuie să realizaţi o identificare fără echivoc a cadrului cu ajutorul
atributului id.
565
Validaţi documentul XHTML 1.0 cu aplicaţia validator.

Internet Explorer.
Figura 12.40
HTML Creaţi o legătură (link) către un cadru

În majoritatea cazurilor, o pagină de cadre afişează un sumar care,
printr-o legătură hipertext permite accesul la toate paginile site-ului.
Fiecare pagină selectată se afişează în cadrul principal.
Iată cum creăm pentru elementele SUMAR-ului o legătură hipertext

către paginile care urmează să se afişeze în cadrul principal al paginii de
cadre.
1. Deschideţi (în Notepad) pagina de cadre şi stabiliţi pentru

fiecare element (item) din SUMAR legăturile hipertext
corespunzătoare (figura 12.41).
566
Figura 12.41
2. Introduceţi în faţa fiecărui text de legătură <A href=”?”>

înlocuind semnul de întrebare (?) cu calea de acces către
paginile care urmează să se afişeze în cadrul principal, apoi
apăsaţi de câteva ori pe bara de spaţii (figura 12.42).
Figura 12.42
3. Introduceţi în continuare, în tag-ul <A> al fiecărei legături

hipertext atributul target=”?”, înlocuind semnul de întrebare cu
numele cadrului în care doriţi să se afişeze pagina Web (figura
12.43).
567
Figura 12.43
4. Tastaţi </A> după fiecare legătură hipertext (figura 12.44).
Figura 12.44
7. Salvaţi modificările şi închideţi pagina de cadre.

568
Figura 12.45
9. Testaţi legăturile hipertext.
Remarci:
9 În mod implicit, fiecare legătură creată afişează pagina ţintă în cadrul
principal al paginii.
9 Instabilitatea cadrelor, bine cunoscută poate fi reglată definind ţinte precise
pentru fiecare legătură, după cum urmează: _blank (deschide legătura într-o
nouă fereastră a navigatorului); _self (deschide legătura în aceeaşi fereastră
cu aceea în care se găseşte legătura); _parent (deschide legătura în pagina
de cadre părinte a legăturii); _top (deschide legătura într-o fereastră fără
cadru).
9 Utilizarea atributelor target este un bun prilej de a vă testa şi aptitudinile de
creativitate.
Aplicaţie
Atribuiţi valorile predefinite _self, _blank legăturilor hipertext către paginile

a.html şi b.html.
Iată care este procedura pe care vă invităm s-o aplicaţi.
1. introduceţi în tag-ul <A> al primei legături atributul target=”?”,

înlocuind semnul întrebării (?) cu valoarea _self (figura 12.46).
569
Figura 12.46
2. Introduceţi în tag-ul <A> al celei de-a doua legături atributul

target=”?”, înlocuind semnul întrebării (?) cu valoarea _blank (figura
12.47).
Figura 12.47
.
Figura 12.48
6. Testaţi legăturile hipertext.

570
Remarcă. În navigator, fiecare legătură se afişează în concordanţă cu valoarea definită
(_self, _blank).
XHTML Creaţi o legătură (link) către un cadru

Iată cum creăm pentru elementele SUMAR-ului o legătură hipertext
către paginile care urmează să se afişeze în cadrul principal al paginii de
cadre (a.htm, b.htm, c.htm), pornind de la documentul HTML
sumar.htm, pe care apoi îl convertim în XHTML cu programul utilitar
HTML – TIDY.
În figura 12.49 se prezintă documentul XHTML generat cu programul

utilitar HTML – TIDY.
Frameset
frameset.dtd”>
Figura 12.49
Remarcă. (X)HTML recunoaşte patru nume de cadre rezervate:

9 target=”_blank”;
9 target=”_top”;
9 target=”_self”;
9 target=”_parent”.
Unul dintre cele patru nume trebuie în mod obligatoriu să fie specificat.
571

Internet Explorer.
Figura 12.50
Aplicaţie
Atribuiţi valorile predefinite _self, _blank legăturilor hipertext către paginile

a.html şi b.html.
Indicaţie. Convertiţi documentul HTML sumar.html în XHTML cu programul

utilitar HTML – TIDY. În figura 12.51 se prezintă documentul XHTML generat în
care s-a inserat codul XHTML care afişează icon-ul de conformitate

iar în figura 12.52 este afişat rezultatul vizualizării paginii Web în Microsoft
Internet Explorer.
572
Frameset
frameset.dtd”>
Figura 12.51
Figura 12.52
573
HTML Formataţi bordurile cadrelor

În mod implicit fiecare cadru se afişează cu o bordură. Dacă doriţi ca
bordura să nu apară, va trebui s-o mascaţi. Întrucât browser-ele nu
recunosc aceleaşi tag-uri, este câteodată necesar să afectăm mai multe
atribute pentru a masca bordurile.
Iată cum modificaţi grosimea şi culoarea chenarului setului de cadre din

aplicaţia „Creaţi cadre care se afişează în coloane”.
2. Introduceţi în tag-ul <FRAMESET> atributele: frameborder=”?”

şi bordercolor=”?” înlocuind semnele de întrebare (?) cu
valoarea (exprimată în pixeli) 10, respectiv cu valoarea Blue
(figura 12.53).
Figura 12.53
Remarci:
9 Formatarea unui cadru are în vedere bordurile şi marginile acestora.
9 Atributele de formatare a cadrelor se aplică doar cadrelor nu şi conţinutului
acestora. Conţinutul unui cadru este un document (X)HTML care trebuie
formatat corespunzător.

574
Figura 12.54
Aplicaţie
Suprimaţi bordurile cadrelor.
Indicaţie. Introduceţi în tag-ul <FRAMESET> atributul frameborder="0".
XHTML Formataţi bordurile cadrelor

Iată cum modificaţi grosimea (10 pixeli) şi culoarea (blue) chenarului
setului de cadre, pornind de la documentul HTML index6.html, pe care
apoi îl convertim în XHTML cu programul utilitar HTML – TIDY.

575
Figura 12.55
Remarci:
9 Elementul <frameset> recunoaşte următoarele atribute de formatare
a cadrelor: frameborder=”...”; border=”n”; noresize=”noresize”;
scrolling=”...”; marginheight=”n”; marginwidth=”n”;
bordercolor=”...”.
9 Pentru a suprima bordurile cadrelor, folosiţi atributul
frameborder=”0”.
9 Pentru a afişa bordurile, definiţi frameborder=”1” (pentru Internet
Explorer) şi border=”1” (pentru Netscape Navigator).
9 HTML 4 şi XHTML nu recunosc atributul border.
9 Pentru a aplica o culoare bordurilor unui cadru, adăugaţi atributul
bordercolor elementului <frameset>, sau cel mai bine elementului
<frame>.
Internet Explorer.
576
Figura 12.56
Controlaţi prezenţa sau absenţa barelor de

HTML
defilare
În mod implicit, navigatorul afişează în cadre o bară de defilare al căror
conţinut nu se poate afişa integral, dar puteţi împiedica această inserţie
automată.
Iată cum procedăm pentru a împiedica apariţia barelor de defilare ale

cadrului CadruDreapta din aplicaţia „Creaţi cadre care se afişează în
coloane (fixe, dinamice)”.
1. Introduceţi în tag-ul <Frame> al cadrului al cărui conţinut nu se

poate afişa integral, atributul scrolling=”no” (figura 12.57).
Figura 12.57
577
Figura 12.58
Remarcă. În navigator, barele de defilare au dispărut!
Aplicaţii
Împiedicaţi redimensionarea unui cadru.
Indicaţie. În tag-ul <FRAME> al cadrului căruia doriţi să-i blocaţi

redimensionarea, introduceţi atributul noresize.
Definiţi coordonatele spaţiului dintre bordura cadrului şi conţinutul acestuia.
Indicaţie. În tag-ul <FRAME> al cadrului căruia doriţi să-i definiţi marginile

introduceţi atributele marginheight=”?” şi marginwidth=”?” înlocuind semnele
de întrebare (?) cu valoarea (exprimată în pixeli) marginilor de sus, respectiv cu
valoarea (exprimată în pixeli) marginilor din stânga ale cadrului.
Remarci:
9 Pentru a defini spaţiul dintre cadre, introduceţi în tag-ul <FRAMESET>
atributul framespacing=”?” înlocuind semnul întrebării (?) cu valoarea
(exprimată în pixeli) a spaţiului dintre cadre.
9 Întrucât atributul framespacing este recunoscut numai de Internet Explorer nu
şi de Netscape, HTML 4 utilizarea acestuia nu este recomandată.
578
Controlaţi prezenţa sau absenţa barelor de
XHTML
defilare
Iată cum procedăm pentru a împiedica apariţia barelor de defilare ale
cadrului CadruDreapta, pornind de la documentul HTML index7.htm, pe
care apoi îl convertim în XHTML cu programul utilitar HTML – TIDY.
Figura 12.59
Remarcă. Prin atributul scrolling al tag-ului <frame /> transmiteţi valoarea no pentru a
dezactiva barele de defilare într-un cadru sau valoarea auto pentru a le afişa atunci
când ele sunt necesare. Nu definiţi scrolling=”no” decât în cazul în care cadrul va
conţine o imagine sau un obiect de dimensiuni cunoscute.
În figura 12. 60 este afişat rezultatul vizualizării paginii Web în Microsoft

Internet Explorer.
579
Figura 12.60
Aplicaţii
Împiedicaţi redimensionarea unui cadru.
Indicaţie. Utilizaţi în tag-ul <frame /> atributul noresize=”noresize”.
Definiţi coordonatele spaţiului dintre bordura cadrului şi conţinutul acestuia.
Indicaţie. Utilizaţi în tag-ul <frame /> atributele marginheight şi marginwidth.
HTML Creaţi o alternativă pentru cadre

Pentru vizitatorii care utilizează navigatoare ce nu recunosc cadrele este
preferabil să creaţi un mesaj de înlocuire.
Iată cum creăm mesajul: „Nu puteţi vizita site-ul nostru, deoarece
navigatorul dumneavoastră nu recunoaşte cadrele!” pentru vizitatorii
care utilizează navigatoare (mai puţin răspândite) ce nu recunosc
cadrele!
1. Introduceţi tag-ul <NOFRAMES> înainte de tag-ul final

</FRAMESET> (figura 12.61).
580
Figura 12.61
2. Introduceţi tag-ul pereche <BODY> … </BODY> (figura

12.62).
Figura 12.62
3. Introduceţi în interiorul tag-urilor pereche <BODY> …

</BODY> mesajul de înlocuire a cadrelor (figura 12.63).
Figura 12.63
581
4. Introduceţi tag-ul </NOFRAMES> după tag-ul </BODY>
(figura 12.64).
Figura 12.64
Remarcă. În navigatorul care nu recunoaşte cadrele, se va afişa textul de

înlocuire (figura 12.65).
Figura 12.65
XHTML Creaţi o alternativă pentru cadre

Iată cum creăm mesajul: „Nu puteţi vizita site-ul nostru, deoarece
navigatorul dumneavoastră nu recunoaşte cadrele!” pentru vizitatorii
care utilizează navigatoare (mai puţin răspândite) ce nu recunosc
cadrele, pornind de la documentul HTML index8.htm, pe care apoi îl
convertim în XHTML cu programul utilitar HTML – TIDY.
582
Figura 12.66
Remarcă. Pentru navigatoarele care nu recunosc cadrele sau în care cadrele sunt
dezactivate, creaţi o zonă de text de înlocuire cu ajutorul tag-urilor
<noframes></noframes>.

Internet Explorer.
Figura 12.67
583
Aplicaţie
Inseraţi în documentele dumneavoastră XHTML un cadru flotant.
Indicaţie. Pentru a adăuga un cadru flotant într-un document parcurgeţi

următoarele etape:
9 Adăugaţi o pereche de tag-uri iframe: <iframe></iframe>.

9 Adăugaţi atributele: name şi id elementului iframe.
9 Adăugaţi atributele: src, height, width şi opţional un atribut de aliniere
(stânga/dreapta) elementului <iframe>.
9 Adăugaţi un text alternativ pentru vizitatorii dumneavoastră, care nu
dispun de ultimele versiuni Internet Explorer. Este suficient să
introduceţi acest text între tag-urile <iframe> şi </iframe>.
(X)HTML Temă
1. Comentaţi următoarele reguli pentru utilizarea cadrelor:
9 Cadrele sunt mult utilizate pe Internet fiind percepute ca un semn
distinct al utilizării tehnologiilor avansate de creare a unui site;
9 Cadrele au reputaţia de a fi incoerente.
2. Descrieţi pe scurt procedura (X)HTML de creare a cadrelor care se
afişează în:
9 coloane (fixe, dinamice);
9 linii (fixe, dinamice).
584
Figura 12.68
9 www.louvre.fr
9 www.matnouttan.com-fr-sommaire-index.html
BIBLIOGRAFIE
1. Camille Gérard, L’Assistant Visuel HTML 4, Editions First Interactive, Paris,

2000
2. Deidre Hayes, HTML and XHTML in 10 Minutes, SAMS Teach Yourself,
Third Editions, 2002
3. Johan–Christian Hanke, GUIDEXPRESS, (X)HTML Facile, Micro
Application, 2001, Paris
4. Dick Oliver, HTML & XHTML, CampusPress, 2001, Paris
5. Jean-René Bad, HTML 4 strict, Créez du code conforme et normalisé, Aliss
Informatique, 2002, Paris
6. Mechtild Kaeufer, XHTML, Programmation, Micro Application, 2001, Paris
7. Ed Tittel, Chelsea Valentine, Lucinda Dykes, Mary Burmeister, XHTML
MASTERING, Editions ESKA, 2002, Paris
8. Sebastian Martin, HTML, Micro Application, 2002, Paris
586

Carte X-HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Carte X-HTML

Hochgeladen von

Copyright:

Verfügbare Formate

(X)HTML

Conversaţia 2. Structura unei pagini Web ..................................... 17

Conversaţia 2 (continuare). Convertiţi HTML în XHTML ................. 45

Conversaţia 3. Introduceţi şi formataţi caracterele cu HTML 4 şi

Conversaţia 4. Creaţi şi formataţi paragrafele cu HTML 4 şi

Conversaţia 5. Inseraţi şi personalizaţi o linie orizontală cu HTML 4

Conversaţia 6. Creaţi şi utilizaţi foi de stiluri cu HTML 4 şi

Conversaţia 7. Inseraţi imagini cu HTML 4 şi XHTML ................... 271

Conversaţia 8. Creaţi legături cu HTML 4 şi XHTML ..................... 331

Conversaţia 9. Creaţi tabele cu HTML 4 şi XHTML ....................... 379

Conversaţia 10. Creaţi formulare cu HTML 4 şi XHTML ................ 455

Conversaţia 11. Inseraţi obiecte multimedia cu HTML 4 şi

Conversaţia 12. Creaţi cadre cu HTML 4 şi XHTML ....................... 539

Bibliografie ....................................................................................... 585

HTML 4 , XHTML şi XML

HTML HTML 4 strict, XHTML sau XML?

Internetul, şi în particular World Wide Web, a bulversat complet viaţa

Standardizarea limbajului de descriere a paginilor HTML şi varianta sa

Companiile pot distribui informaţiile angajaţilor lor, clienţilor şi

Auzind acest strigăt de ajutor, Consorţiul W3 a dezvoltat limbajul XML ce

A începe astăzi să învăţaţi HTML 4 în conformitate cu „DTD HTML 4.01

În plus, după ce aţi creat paginile dumneavoastră în HTML 4, veţi simţi

HTML HyperText Markup Language

HTML este bazat la rândul său pe o definiţie formală utilizând un puternic

Adevărata mobilitate Internet s-a declanşat la finele anului 1994. Un grup

Vizitaţi site-ul consorţiului W3C la adresa: www.w3.org.

Mosaic şi apoi Netscape au fost primele navigatoare care au fost dotate cu o

<H1> Prima mea pagină Web </H1>

navigatorul nu va afişa decât textul „Prima mea pagină Web”, tag-ul

Există mai multe tipuri de tag-uri:

9 tag-uri care conţin metainformaţii;

<H1 ALIGN=”center”>Prima mea pagină Web</H1>

Care sunt instrumentele de care aveţi nevoie?

9 un editor de text simplu pentru crearea şi salvarea documentelor

9 editoare pe bază de text sau de cod;

XHTML eXtensible Hyper Text Markup Language

XHTML: un vocabular XML pentru Web

XHTML este un tip de limbaj de tranziţie care poate fi utilizat pentru a

În consecinţă, XHTML este HTML cu o structură strictă. În loc de

<bgsound src=”c:/Windows/Media/tada.wav” />

inserează în pagina dumneavoastră Web, din folder-ul Windows/Media,

Diferite elemente XHTML conţin atribute. De exemplu,

Ce puteţi realiza cu limbajul XHTML?

9 crearea site-urilor intranet sau extranet;

Care sunt instrumentele de care aveţi nevoie?

9 un editor de text simplu, pentru crearea şi salvarea

Editoare de text (X)HTML

Aplicaţia de validare W3C validator

Utilizarea acestui instrument de validare este foarte uşoară. Vizitaţi

Consultaţi regulat următoarea listă de site-uri:

XML eXtensible Markup Language

XML este acronimul de la eXtensible Markup Language (se traduce prin

Diferenţe majore între XML şi HTML

XML nu face nimic!

Iată un mic exemplu de document XML (figura 1.1), care … nu face

XML-ul este generator de noi limbaje:

9 WML (Wirelles Markup Language) – permite afişarea datelor pe

HTML, XHTML, XML Temă

Structura unei pagini Web

Regulile de … aur ale paginilor Web

 Este prima pagină a unui site.

 Fiecare pagină trebuie să înceapă cu informaţii importante, date

 Structuraţi textul utilizând titluri de nivele diferite.

 Fiţi curtenitori şi politicoşi, respectaţi eticheta.

Este prima pagină a unui site.

Fiecare pagină trebuie să înceapă cu informaţii importante, date

Structuraţi textul utilizând titluri de nivele diferite.

Fiţi curtenitori şi politicoşi, respectaţi eticheta.

Fiţi universal, evitaţi pe cât posibil instrucţiunile specifice unui

În figura 2.12 este prezentat un document care conţine toate elementele