(X) HTML

(X)HTML
CUPRINS
Conversaia 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
Conversaia 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
Conversaia 2 (continuare). Convertii HTML n XHTML ................. 45
De ce trebuie s convertii documentele HTML? 45 Convertii manual documentele HTML . 46 Convertii (automat) documentele HTML cu HTML Tidy 48 (X)HTML Tem . 51
Conversaia 3. Introducei i formatai caracterele cu HTML 4 i XHTML ..................................................................... 53

HTML4, XHTML HTML4, XHTML HTML4, XHTML HTML4, XHTML HTML4, XHTML HTML4 HTML4 HTML4 XHTML (X)HTML
Introducei text . 54 Inserai caractere speciale .. 66 Inserai caractere proprii (X)HTML . 69 Aplicai unui text formatele fizice i logice .. 71 Scriei un text cu exponent sau cu indice 93 Definii tipul de font 97 Definii dimensiunea fontului . 101 Definii culorile 106 Definii tipul de font, dimensiunea fontului i culorile .. 114 Tem .. 115
Conversaia 4. Creai i formatai paragrafele cu HTML 4 i XHTML ..................................................................... 117

HTML HTML HTML HTML 4, 4, 4, 4, XHTML XHTML XHTML XHTML
Creai un paragraf .. 117 Schimbai alinierea unui paragraf .. 121 ncepei o nou linie . 128 Indentai un paragraf 131
Definii un spaiu naintea unui paragraf 134 Comunicai browser-ului s afieze linii vide, spaiile suplimentare etc. 136 HTML 4, XHTML Creai un titlu 137 HTML 4, XHTML Creai liste. Aplicaii 141 (X)HTML Tem . 170 HTML 4 HTML 4
Conversaia 5. Inserai i personalizai o linie orizontal cu HTML 4 i XHTML ................................................................. 173

HTML 4, XHTML HTML 4, XHTML HTML 4, XHTML HTML 4, XHTML (X)HTML
Inserai o linie orizontal ... 173 Colorai o linie orizontal 177 Definii lungimea i nlimea unei linii 182 Aliniai o linie orizontal .. 187 Tem . 192
Conversaia 6. Creai i utilizai foi de stiluri cu HTML 4 i XHTML ..................................................................... 193
(X)HTML Foile de stiluri n cascad CSS1, CSS2, CSS3 193 (X)HTML Creai stiluri CSS . 195 (X)HTML Categorii de proprieti de stiluri ... 199 HTML 4, XHTML Creai i aplicai o foaie de stiluri (incorporate) intern .... 200 HTML 4, XHTML Creai i aplicai o clas 208 HTML 4, XHTML Incorporai o foaie de stiluri ntr-un document .. 215 HTML, XHTML Creai i aplicai o foaie de stiluri extern . 257 XHTML Controlai culorile legturilor (link-urilor) ntr-un document 264 XHTML Proprietile de bordur ale unei zone 265 XHTML Proprietile foilor de stiluri sonore 266 XHTML Proprietile de clasificare .. 267 XHTML Proprietile documentelor imprimate . 268 XHTML Proprietile de poziionare a unui element . 268 XHTML Viitorul foilor de stiluri n XHTML 268 (X)HTML Tem .. 270
Conversaia 7. Inserai imagini cu HTML 4 i XHTML ................... 271

Manipulai formatele de imagine Web . 271 HTML 4, XHTML Inserai o imagine .. 274 HTML 4, XHTML Centrai o imagine .. 283 HTML 4, XHTML Aplicai o bordur unei imagini 286 HTML 4, XHTML Folosii un text de nlocuire (substituie) pentru o imagine . 289 HTML 4, XHTML Aliniai vertical o imagine n raport cu un text ... 293
HTML 4, XHTML Plasai un text n jurul unei imagini .. 297 HTML 4, XHTML ntrerupei ... mbrcarea cu text a unei imagini 303 HTML 4, XHTML Adugai mai multe spaii n jurul unei imagini .. 307 HTML 4, XHTML Aplicai o imagine de background .. 311 HTML 4, XHTML Propunei o versiune n miniatur a imaginii originale. 315 HTML 4, XHTML Creai o imagine cu zone reactive . 321 (X)HTML Tem . 329
Conversaia 8. Creai legturi cu HTML 4 i XHTML ..................... 331
HTML 4, XHTML Creai o legtur hipertext ctre o alt pagin Web 331 HTML 4, XHTML Creai legturi n aceeai pagin Web . 363 HTML 4, XHTML Creai o legtur extern ctre un site Web, avnd ca suport o imagine 355 HTML 4, XHTML Creai o legtur hipertext (extern) ctre un alt site Web . 361 HTML 4, XHTML Creai o legtur hipertext extern ctre o adres e-mail . 365 HTML 4, XHTML Modificai culoarea legturilor hipertext . 369 HTML 4, XHTML Creai o legtur hipertext ctre o pagin care se deschide n propria sa fereastr .. 372 (X)HTML Tem .. 377
Conversaia 9. Creai tabele cu HTML 4 i XHTML ....................... 379

Creai un tabel .. 379 Aliniai un tabel ... 394 Atribuii un titlu tabelului 399 Aplicai o bordur tabelului 404 Aliniai orizontal datele unui tabel . 414 Aliniai vertical datele unui tabel . 418 Modificai spaiul dintre celulele unui tabel 422 Modificai dimensiunile liniilor unui tabel 425 Modificai marginile interioare ale celulelor unui tabel. 431 Extindei o celul pe mai multe coloane sau linii 435 Aplicai o culoare elementelor unui tabel .. 440 Aplicai o imagine de background unui tabel sau unei celule a tabelului .. 445 HTML 4, XHTML Utilizai un tabel ca un instrument de punere n pagin .. 449 (X)HTML Tem .... 453 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, XHTML XHTML XHTML XHTML XHTML XHTML XHTML XHTML XHTML XHTML XHTML XHTML
Conversaia 10. Creai formulare cu HTML 4 i XHTML ................ 455

Regulile de aur ale formularelor . 455 HTML 4, XHTML Creai un formular .. 459 HTML 4, XHTML Precizai metoda i script-ul utilizate 463
HTML 4, XHTML Creai un buton pentru expedierea (submit) unui formular .. 469 HTML 4, XHTML Creai un buton pentru resetarea (reset) unui formular .. 475 HTML 4, XHTML Inserai o zon simpl de text . 478 HTML 4, XHTML Definii mrimea unei zone (simple) de text 483 HTML 4, XHTML Inserai o zon de text multilinie 487 HTML 4, XHTML Creai o caset de validare 490 HTML 4, XHTML Creai un buton radio 495 HTML 4, XHTML Creai un meniu derulant 501 (X)HTML Tem .. 508
Conversaia 11. Inserai obiecte multimedia cu HTML 4 i XHTML .................................................................... 511

Reguli pentru inserarea obiectelor multimedia 511 HTML 4, XHTML Inserai un fiier sunet pentru Internet Explorer .. 515 HTML 4, XHTML Inserai un fiier video . 520 HTML 4, XHTML Inserai un fiier sunet extern sub forma unei legturi hipertext . 524 HTML 4, XHTML Inserai un fiier video extern sub forma unei legturi hipertext .. 527 HTML 4, XHTML Inserai un applet Java 531 (X)HTML Tem .. 536
Conversaia 12. Creai cadre cu HTML 4 i XHTML ....................... 539

Reguli pentru utilizarea cadrelor . 539 HTML 4, XHTML Apreciai cadrele (X)HTML . 541 HTML 4, XHTML Creai cadre care se afieaz n coloane (fixe, dinamice) 546 HTML 4, XHTML Introducei pagini Web ntr-un cadru .. 551 HTML 4, XHTML Creai cadre care se afieaz n linii (fixe, dinamice) .. 554 HTML 4, XHTML Numii un cadru 562 HTML 4, XHTML Creai o legtur (link) ctre un cadru 565 HTML 4, XHTML Formatai bordurile cadrelor . 573 HTML 4, XHTML Controlai prezena sau absena barelor de defilare 576 HTML 4, XHTML Creai o alternativ pentru cadre 579 (X)HTML Tem .. 583
Bibliografie ....................................................................................... 585
Conversaia 1
HTML 4 , XHTML i XML

n aceast conversaie:
f f f f f
HTML4 strict, XHTML sau XML? HTML HyperText Markup Language XHTML eXtensible HyperText Markup Language XML eXtensible Markup Language HTML, XHTML, XML Tem
HTML
HTML 4 strict, XHTML sau XML?
Din obligaie sau curiozitate am citit multe cri despre HTML, XHTML i XML. Mai era nevoie de nc o carte, m vei ntreba? Rspunsul este da. S m explic. Internetul, i n particular World Wide Web, a bulversat complet viaa privat i viaa profesional. Succesul fulminant i imediat al Web-ului se explic prin aspectul su intuitiv i prin independena 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 uor de nvat (HTML nu este un limbaj de programare!). Companiile pot distribui informaiile angajailor lor, clienilor i
partenerilor de afaceri repede i ieftin. Din pcate (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 informaiei. Auzind acest strigt de ajutor, Consoriul W3 a dezvoltat limbajul XML ce poate fi folosit de autorii de pagini Web ale cror nevoi depesc HTML-ul. A ncepe astzi s nvai HTML 4 n conformitate cu DTD HTML 4.01 strict este n final un avantaj, deoarece vei nva s evitai vechile obiceiuri n crearea paginilor Web. Vei nva s respectai reguli, principii, care n final v vor aduce nu numai satisfacia lucrului bine fcut dar i eticheta de calitate W3C, cum vei vedea n continuare. n plus, dup ce ai creat paginile dumneavoastr n HTML 4, vei simi cu siguran nevoia de a utiliza XHTML, XML pentru a le face mai atractive i nu doar att!
HTML
Puin istorie
HyperText Markup Language
Rdcinile HTML (Hypertext Markup Language) merg pn n anii 80 i debutul anilor 90. n anul 1989, Tim Berners Lee, membru CERN (Centrul European de Cercetare Nuclear cu sediul la Geneva, Elveia), a inventat un limbaj capabil de a structura datele i de a crea legturi hipertext permind schimbul de documente pe Internet. n acest mod, cercettorii de la CERN
5
aveau la dispoziie un instrument simplu pentru a putea schimba datele rezultate din rapoartele de cercetare. World Wide Web (www) i HTML se nscuser! HTML este bazat la rndul su pe o definiie formal utiliznd 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. ncepnd cu anul 1991, fizicienii de la CERN puteau utiliza acest sistem care funciona pe mainile NeXT sau n mod Linie. n anul 1993, NCSA (National Center for Supercomputing Applications) a creat primul navigator cu numele Mosaic. La sfritul anului 1993, 500 servere Web cunoscute reprezentau 1% din traficul Internet. Adevrata mobilitate Internet s-a declanat la finele anului 1994. Un grup internaional a fost nfiinat cu scopul de a crea norme astfel nct toi actorii (cercettori 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 ddea utilizatorilor din lumea ntreag posibilitatea de a citi i a scrie pagini Web. Aa a aprut versiunea HTML 2.0. Din pcate, evoluiile au depit rapid normele lui HTML 2.0. n anul 1996, un nou grup internaional de profesioniti, W3C (World Wide Web Consortium), a fost creat i condus de INRIA (Frana), MIT (SUA) i Universitatea KEYO (Asia). Scopul acestui grup a fost acela de a dezvolta facilitile 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. Aa a aprut n timpul anului 1997 versiunea HTML 3.2. Vizitai site-ul consoriului W3C la adresa: www.w3.org. Cteva luni mai trziu, 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 aprut XHTML, ca succesor al su. XHTML asociaz puterea limbajului HTML cu rigoarea limbajului XML.
6
Versiuni HTML
ntruct HTML este un limbaj nchis, el a cunoscut mai multe versiuni, ncepnd cu versiunea 1.0 i terminnd cu versiunea 4.01. n anul 1969, IBM a pus bazele limbajului SGML (Standard Generalized Markup Language) care a fost normalizat de ctre ISO n anul 1986. Principalele limbaje nscute din SGML sunt: HTML, DHTML i XML. HTML 1.0 a aprut n anul 1991. HTML era structurat de o manier elementar. Tag-urile limbajului HTML 1.0 erau uor de reinut, permiteau generarea de titluri, liste, imagini i, cel mai important, legturi hipertext. Dar, interfaa 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 trziu (1995) normele limbajului HTML 2.0. Numeroase standarde neoficiale vzuser deja lumina zilei. HTML 2.0 nu regrupa dect tag-uri de baz: structurarea documentului (titluri, antet, corpul documentului), formatri mai puternice, liste, tabele i alte componente. n acelai timp, editorii browser-elor continuau dezvoltarea propriului lor standard. Versiunea HTML 2.0 era depit. n anul 1996 (luna mai) a fost publicat versiunea HTML 3.2 la conferina World Wide Web de la Paris. Unele din tagurile 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 puine 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 su 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. Cte navigatoare exist? Exist zeci de navigatoare mai mult sau mai puin importante. Majoritatea sunt gratuite! Consultai 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 ctre un navigator (sau browser n limba englez). De exemplu, atunci cnd scriei: <H1> Prima mea pagin Web </H1> navigatorul nu va afia dect textul Prima mea pagin Web, tag-ul <H1> avnd rolul de a-i preciza c este vorba de un titlu de nivel 1 i c tot ceea ce urmeaz trebuie s fie afiat pe o nou linie i cu caractere ngroate (bolduite). Tot aa 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 alctuit din tag-ul de deschidere <H1>, coninutul 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 spaii 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 conin metainformaii; 9 tag-uri de formatare a paginii Web; 9 tag-uri pentru legturi 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. Gsii aceste specificaii la adresa: www.w3.org/TR/REChtml40 (n limba englez). 9 Putei scrie tag-urile HTML cu majuscule sau minuscule. 9 Este bine s le scriei 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 avei nevoie?

Pentru primele documente HTML nu avei nevoie dect de urmtoarele 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: obinei ceea ce vedei).
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 ai creat mai multe documente HTML i numai dup ce ai neles principiile de baz HTML putei trece la utilizarea unui editor WYSIWYG i a unui editor pe baz de cod. Putei ncepe, de exemplu, cu un editor WYSIWYG. 9 V recomandm s ncepei prin a scrie manual codul HTML cu un editor de text standard, Notepad de exemplu.
XHTML
eXtensible Hyper Text Markup Language
XHTML: un vocabular XML pentru Web

Limbajul XHTML, recomandare a consoriului W3, este o versiune HTML care respect sintaxa limbajului XML (eXtensible Markup Language) i n care sunt excluse toate impreciziile pe care le ntlnim n general n paginile Web. HTML permite afiarea datelor ntr-un navigator chiar dac sintaxa este aproximativ. Navigatoarele sunt foarte permisive, fapt care-i ncurajeaz pe foarte muli 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 afia. Utiliznd o sintax mult mai strict, XHTML acestora. XHTML este un tip de limbaj de tranziie care poate fi utilizat pentru a pregti trecerea la XML. n sfrit, XHTML este limbajul HTML integrat n XML. Dac trebuie s creai pagini XHTML, ncepei prin a v obinui cu regulile stricte XML pe care le adopt XHTML. Documentele XHTML pot fi afiate ca documente HTML, dar care pot fi n egal msur valide. n consecin, XHTML este HTML cu o structur strict. n loc de preocuparea privind asigurarea minimului necesar pentru afiarea documentului ntr-un navigator, este mai important s asigurm o mai mare atenie modului de utilizare a tag-urilor.
Remarc. XHTML permite crearea unui cod modern, perfect lizibil, construit cu claritate, care garanteaz afiarea perfect a paginilor Web pentru versiunile viitoare ale navigatoarelor. Reformularea HTML n XHTML este un mare pas nainte.
garanteaz
calitatea
documentelor
stabilitatea
afirii
10
Elemente i tag-uri
Ca i HTML, XHTML este alctuit din elemente, tag-uri i atribute. Elementele XHTML au n principal dou funciuni. Mai nti ele identific prile 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 puine sunt elementele XHTML care pot insera pointeri i legturi hipertext ctre alte documente, imagini, fiiere sunet, fiiere video, aplicaii multimedia, animaii, applet-uri etc. De exemplu, elementul: <bgsound src=c:/Windows/Media/tada.wav /> insereaz n pagina dumneavoastr Web, din folder-ul Windows/Media, fiierul 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 spaiu i o bar oblic (/ sau slash) nainte de simbolul >. Spaiul lsat (un mic truc!) permite vechilor navigatoare care nu recunosc XHTML de a trata aceste tag-uri ca i n HTML. Fr a lsa un spaiu 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 fiecrui tag de deschidere trebuie s-i corespund un tag de nchidere. 9 Nu includei spaii suplimentare n interiorul tag-urilor. Excepie de la aceast regul sunt elementele vide care necesit un spaiu naintea barei oblice de nchidere ( />).
Diferite elemente XHTML conin atribute. De exemplu, <h1 style=text-align:center> Prima mea pagin Web </h1> are aceeai semnificaie 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 nsui prin spaii. 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 condiia ca numele elementului s apar ntotdeauna pe prima poziie.
Ce putei realiza cu limbajul XHTML?

Cunoatei 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 fiierelor de help; 9 crearea aplicaiilor n reea; 9 crearea aplicaiilor de tip chioc; 9 publicarea documentelor (XHTML) pe ecranele portabilelor.
Care sunt instrumentele de care avei nevoie?

Pentru primele documente XHTML pe care urmeaz s le creai nu avei nevoie dect de urmtoarele instrumente de baz: 9 un editor de text simplu, documentelor XHTML; pentru crearea i salvarea
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

Dei exist numeroase editoare (X)HTML WYSIWYG (What You See Is What You Get) performante, nu v sftuim s renunai la crearea de cod (X)HTML cu un editor de text standard.
12
Cu Notepad, de exemplu, va trebui s scriei codul manual. Aceasta nseamn c dumneavoastr, nu Dreamweaver sau Front Page (editoare WYSIWYG), introducei tag-urile i atributele (X)HTML. Codificarea manual v ajut s nvai elementele (X)HTML, atributele i structurile i v permite totodat s identificai cu exactitate zonele n care au fost generate erori. Putei, de asemenea, s includei cu uurin n documentele dumneavoastr ultimele faciliti (X)HTML.
Remarci:
9 Exist editoare de text foarte bune Notepad (pentru toate versiunile

Windows), vi sau pico (pentru Unix) cu care s generai codul (X)HTML. WYSIWYG, este bine s utilizai metoda de codificare manual. crearea documentelor (X)HTML nu este recomandat!
9 ntruct noile versiuni XHTML nu sunt nc implementate n editoarele 9 Utilizarea procesoarelor de text Word, Wordperfect sau WordPad pentru
Aplicaia de validare W3C validator

Validarea trebuie s fie considerat ca o etap important n procesul de redactare al codului XHTML. n acest mod vei avea sigurana c cea mai mare parte a navigatoarelor va putea afia coninutul documentelor XHTML. Pentru a verifica dac este valid sau nu codul XHTML pe care l-ai creat manual, utilizai aplicaia de validare W3C W3C validator. Utilizarea acestui instrument de validare este foarte uoar. Vizitai site-ul: http://validator.w3.org/file-upload.html i vei constata singuri ct de simplu este n continuare.
Navigatoarele Web
Dac ai navigat pe Web, ai utilizat fr 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). Consultai regulat urmtoarea 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 Microsoft); www.htmlhelp.com (Web Design Group); www.wdvl.com (Web Develorers Library); www.hwg.org (HTML Writers Guild); www.builder.com (C\Nets Builder.com); www.zvon.org (zvon)
Remarc. Pn s finalizez redactarea acestei cri, 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 gsete pe site-ul: www.w3.org/TR/2001/REC-xhtml1.1-20010531. Specificaia XHTML 1.1 este practic aceeai cu versiunea XHTML 1.0. Versiunea XHTML 1.1 reprezint o versiune intermediar ntre HTML4 i XHTML 1.0.
(pentru
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 alctuit din tag-uri. Pus la punct de ctre XML Working Group sub direcia lui World Wide Web Consortium (W3C) din anul 1996, el este destinat structurrii documentelor. n anul 1998, specificaiile XML 1.0 au devenit recomandri (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 consoriul W3 (specializat n standarde Web). 9 Documentele i specificaiile XML sunt accesibile la adresele
http://www.w3c.org/MarkUp; www.w3.org/XML/; www.ibiblio.org/pub/suninfo/standards/xml/why/xmlapps.htm; www.xml.com.
Diferene majore ntre XML i HTML

Scopul XML-ului nu este n nici un caz nlocuirea XHTML-ului ntruct cele dou limbaje alctuite din tag-uri nu au deloc aceleai 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 afiarea datelor i nimic mai mult.
XML nu face nimic!

Poate surprinde acest titlu dar acesta este adevrul! 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 neles c XML nu nlocuiete HTML-ul. n dezvoltrile viitoare, XML-ul va fi utilizat pentru descrierea datelor, n timp ce HTML va fi utilizat pentru formatarea i afiarea datelor. XML este un instrument gramatical sau structural independent de toate platformele hard i soft care permit transmisia informaiilor 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 afiarea 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 ecuaiilor matematice, reprezentri algebrice, sisteme de sintez vocal.
Remarc. Pentru mai multe informaii, consultai lucrarea: Liviu Dumitracu, XML, Editura Universitii din Ploieti, 2003.
#__________________________________________________________
____________________________________________________________ ____________________________________________________________ ____________________________________________________________ ____________________________________________________________ ____________________________________________________________ ____________________________________________________________
16
HTML, XHTML, XML

Testai-v cunotinele
1. Ce putei realiza cu limbajul (X)HTML? 2. Cte navigatoare Web cunoatei? 3. Care este structura unui element (X)HTML? 4. Ce este un element vid? 5. Cum traducei: HTML (HyperText
Tem
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 avei nevoie pentru a crea documente (X)HTML?
#_______________________________________________________ __________________________________________________________ __________________________________________________________
Vizitai 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
Conversaia 2
Structura unei pagini Web

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

nainte de a ncepe crearea unei pagini este important s cunoatei cteva din regulile de aur ale paginilor Web pe care este bine s le respectai.
Reguli: 9 Pagina de primire Este prima pagin a unui site. Numii pagina de primire index.htm sau index.html. Ea trebuie s conin un rezumat dumneavoastr i/sau un sumar. succint al site-ului
n cazul ideal, ea trebuie s conin o prezentare scurt a proprietarului siteului (persoan, societate, asociaie etc.).
18
9 Alte pagini Fiecare pagin trebuie s nceap cu informaii importante, date eseniale. Formatul A4 nu are nici o semnificaie pe Web. Nu publicai o pagin n curs de realizare. Actualizai n mod regulat paginile (o pagin veche de doi ani nu este deloc atractiv). Gndii-v la persoanele care dezactiveaz afiarea imaginilor n navigatorul acestora. Pagina trebuie ca tot timpul s fie gritoare iar textul suficient de explicit fr imagini. Utilizai fiiere de dimensiune minimal pentru ca vizitatorul s nu atepte minute n ir apariia ntregii pagini pe ecran. 9 Textul Structurai textul utiliznd titluri de nivele diferite. Pentru a garanta o bun lizibilitate, utilizai cel mult dou sau trei fonturi diferite. Verificai corectitudinea tuturor informaiilor pe care le-ai menionat. 9 inei-v bine pe Web! Fii curtenitori i politicoi, respectai eticheta. Asigurai estetica paginilor dumneavoastr, evitai nfloriturile! Nu utilizai resurse pirat (imagini, text etc.) fr a fi obinut n prealabil copyrightul! 9 Privilegiai interactivitatea Fii universal, evitai pe ct posibil instruciunile specifice unui anumit tip de navigator. Creai o legtur (link) de tip mailto pentru ca vizitatorii s poat s v expedieze cu uurin un e-mail. Prevedei un FAQ (Frequently Asked Questions). Astfel, nu va trebui s rspundei de mai multe ori la ntrebri puse frecvent.
19
HTML
Structura unui document HTML4 strict
nainte de a ncepe lungul drum al programrii n HTML trebuie s facei cunotin cu structura general a unui document HTML conform specificaiilor HTML 4.01. Vom face un prim tur al elementelor care trebuie s se regseasc n mod obligatoriu n fiecare din paginile dumneavoastr Web. Iat cum se nfieaz codul surs (HTML 4.01) al primei
dumneavoastr pagini Web care afieaz mesajul Prima mea pagin Web. Putei s recopiai acest cod pe care-l gsii afiat n figura 2.1 ca pe un schelet comun tuturor documentelor pe care urmeaz s le creai.
Figura 2.1
Codul surs de mai sus nu va afia n navigatorul dumneavoastr dect o pagin (figura 2.2), care conine cuvintele Prima mea pagin Web (titlu de nivel 1, dup cum vom vedea mai trziu).
20
Figura 2.2
Remarc. 9 9 9 O pagin Web valid este alctuit din trei pri: tipul documentului; seciunea de en-tte; 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 (vedei bara de titlu a navigatorului figura 2.2).
Tag-urile de comentarii
Tag-ul  este tag-ul de nchidere pentru comentarii. Putei plasa orice text n interiorul acestora (vezi figura 2.3), care s v ajute n nelegerea codului (el nu va fi interpretat de navigator dac conine tag-uri HTML).
Figura 2.3
21
Remarc. Comentariile joac un rol particular n cadrul stil-urilor. Ele permit vechilor navigatoare s nu afieze definiia stilurilor, script-urile utilizate etc.
Declaraia DOCTYPE
Toate documentele HTML trebuie s nceap cu o declaraie DOCTYPE care precizeaz tipul de document ce va fi creat. Ultimele specificaii ale consoriului W3C au definit trei DTD-uri (Document Type Definition), dup cum urmeaz:
9 DTD HTML 4.01 strict, care definete versiunea cea mai corect a limbajului HTML 4, pentru care declaraia 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 declaraia 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 privete noi nu vom folosi acest DTD. Pentru informarea dumneavoastr, declaraia DOCTYPE va fi urmtoarea:
<! 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 rdcin n terminologia XML, este de nivelul cel mai nalt n cadrul unui document HTML. Observm c tag-urile <HTML> i </HTML> ncadreaz dou mari seciuni:
9 en-tte-ul documentului, introdus prin tag-urile <HEAD> i </HEAD>; 9 corpul documentului, introdus prin tag-urile <BODY> i </BODY>.
22
Elementul <HEAD>
Seciunea de en-tte <HEAD> poate conine 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-tte:
Figura 2.7
Elementul META
n en-tte-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 fr tag de nchidere. Numele informaiei coninute 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 acelai element <META>. Dac name nu este utilizat, trebuie folosit atributul http-equiv, care permite n plus fa de name adugarea perechilor nume/valoare n en-tte-ul http al documentului transmis prin server. Diferite valori ale atributului name sunt cuvinte cheie utilizate de motoarele de cutare pentru indexarea paginilor Web; altele nu au dect un caracter de informaie 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 DUMITRACU>
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.upgploieti.ro> <META http-equiv=reply-to; content=ldumitrascu@mail.upgploiesti.ro> <META http-equiv=content-type; content=text/html; charset=ISO8859-1> 9 Pentru mai multe detalii privind tag-urile <META> vizitai site-ul: http://vancouver-webpages.com/META/metatags.detail.html
Elementul <TITLE>
Elementul <TITLE> conine titlul paginii. Coninutul titlului nu trebuie s fie dect textul cuprins ntre tag-urile <TITLE> i </TITLE> (figura 2.8).
Figura 2.8
Remarc. Titlul paginii este prima informaie care se afieaz n bara de titlu a navigatorului (figura 2.9) i ofer o prim idee asupra coninutului paginii.
Figura 2.9
Dai un titlu semnificativ i nu prea lung (cel mult 100 de caractere!). Altfel, este neplcut s v ntmpinai vizitatorii cu mesajul untitled afiat n bara de titlu a navigatorului! i nc ceva! Titlul joac de asemenea un rol important n indexarea site-ului!
24
Remarc. Semnificaia celorlalte elemente HTML prezentate n figura 2.7 este urmtoarea: 9 Elementul <BASE> conine 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> conine definiia unei foi de stiluri. Ca i n cazul scripturilor, pentru navigatoarele care nu recunosc foile de stiluri (CSS) se recomand utilizarea comentariilor. 9 Elementul <LINK> stabilete o legtur 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-tte. Tag-ul urmtor (<H1>) permite afiarea 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 importana i mrimea titlului. Cu ct cifra este mai mic, cu att titlurile sunt mai importante se afieaz cu caractere mai mari! Cifrele variaz ntre 1 i 6 (vezi Conversaia 4).
Aplicaie n figura 2.12 este prezentat un document care conine toate elementele HTML conforme cu DTD 4 strict. Ele sunt afiate n ordine alfabetic i pot constitui baza pentru documentele dumneavoastr HTML.
Figura 2.12
26
(continuare)
Figura 2.12
27
n figura 2.13 este afiat rezultatul vizualizrii documentului n Microsoft Internet Explorer.
Figura 2.13
28
(continuare)
Figura 2.13
Validai documentele HTML 4 strict

Dac respectai regulile de redactare (scriere) a documentelor dumneavoastr care figureaz n DTD HTML 4 strict (sau DTD frameset pentru cadre, vedei conversaia 12), vei fi rspltii cu eticheta de conformitate W3C pe care putei s o afiai n paginile dumneavoastr (figura 2.14) Web.
29
Figura 2.14
Remarc. n afar de plcerea de a fi primit aceast recompens atribuit lucrului bine fcut, serviciul de validare v ofer avantajul unei verificri a paginilor dumneavoastr i a unei semnalri a eventualelor erori generate. Numrul de linie i tipul de eroare v vor fi semnalate, i dac ai utilizat HTML-Kit care numeroteaz liniile de cod, nu vei ntmpina nici-o dificultate n a identifica zona erorii de corectat.
Instrumentul de validare W3C - validator

Pentru a valida documentele dumneavoastr utilizai aplicaia (gratuit!) validator, care este disponibil pe site-ul: http://validator.w3.org. Vei obine un ecran (vezi figura 2.15) care conine un formular n care trebuie s introducei adresa complet a fiierului dumneavoastr, de exemplu: C:\Documents and Settings\Liviu\Desktop\imagini\debut.htm.
Figura 2.15
Remarci:
9 Interfaa aplicaiei validator nu este elegant dar este ns foarte practic. 9 n meniul derulant Document type alegei valoarea Specified Inline sau
selectai versiunea limbajului XHTML sau HTML pe care dorii s-o utilizai. Avei la dispoziie opt opiuni: 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, folosii 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 ntmpl s comitei i erori care violeaz regulile XML sau regulile de validare a DTD-urilor, aplicaia validator va afia mesaje de eroare. La prima vedere, mesajele par a fi impersonale! Dar v vei convinge singuri c este doar o simpl impresie!
Dac ai respectat modelul de baz conform modelului prezentat n aceast conversaie (debut.htm) nu va trebui s mai precizai nici DTD-ul, nici setul de caractere utilizat, ntruct ele vor fi detectate n mod automat.
Remarc. Executai clic pe butonul Validate this document (figura 2.16) pentru ca programul Validator s nceap analiza documentului dumneavoastr!
Figura 2.16
31
Dac ai respectat indicaiile din aceast conversaie, vei obine 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
Adugai icon-ul de conformitate HTML

Pentru a afia icon-ul de conformitate W3C pagina de rezultate W3C (figura 2.18). n pagina
dumneavoastr Web nu v rmne dect s recopiai codul indicat n
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 afiat rezultatul vizualizrii paginii Web n Microsoft Internet Explorer.
Figura 2.20
Remarc. Navigatorul a afiat icon-ul de conformitate W3C la baza paginii Web.
Atribute HTML comune

Cea mai mare parte a tag-urilor HTML conin atribute comune, dup cum urmeaz: 9 id=nume
Atribuie un nume unic unui element din interiorul documentului. Cnd un element conine de asemenea un atribut name este de dorit s utilizm simultan cele dou atribute (id i name) afectndu-le aceeai valoare. Exemplu: <P id=p1> Text paragraf </P>. 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>. Permite crearea unui stil local. Exemplu: <P style=background-color: red> Text paragraf </P>. Se aplic numai unui element dedicat i nu ntregului document. Exemplu: <P title=citii paragraful> Text paragraf </P>.
9 class=nume
9 style=stil
9 title=text
9 lang=cod 9 dir=ltr\rtl
Exemplu: <P lang=fr> Text paragraf </P>.

Precizeaz sensul de citire (left to right\ right to
Precizeaz codul ISO al limbii.
33
left) al unui text.
9 onclick, ondblclick,
onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
Atribute pentru gestionarea evenimentelor.
XHTML
Structura unui document XHTML 1.0
ntruct limbajul XHTML este o aplicaie 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 adugate unui document XHTML ntruct cele dou limbaje sunt vocabulare XML. Putei de asemenea aduga propriile elemente i atribute documentelor XHTML. Dac utilizai un DTD, va trebui s definii toate elementele i atributele utilizate n cadrul documentului dumneavoastr. Aceast regul semnific faptul c va trebui s extindei definiia proprie DTD a XHTML-ului. n consecin, trebuie s avei capacitatea de a citi i a scrie un DTD! Iat cum scriem manual codul surs (XHTML 1.0) al primei
dumneavoastr pagini Web, care afieaz 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 aceeai sintax ca n HTML. Comentariile cuprind informaii despre cod (ce face, cine este autorul), despre modificrile ce urmeaz a fi fcute etc. n conversaiile viitoare dedicate script-urilor, foilor de stiluri etc., vom descoperi i alte funcii pe care le ndeplinesc comentariile.
Declaraia DOCTYPE
Specificaia XHTML 1 are trei versiuni: strict, transitional i frameset. Versiunea strict nu accept dect limbajul XHTML curat; ea poate fi utilizat n situaia n care avei documente XHTML care nu utilizeaz elemente de formatare bazate pe foile de stiluri. Pentru a preciza c documentul dumneavoastr se conformeaz unui DTD strict, utilizai tag-ul prezentat n figura 2.22.
35
Figura 2.22
Remarc. Pentru versiunea XHTML Strict, putei folosi i declaraia DOCTYPE prescurtat (figura 2.23).
Figura 2.23
Pentru versiunea XHTML transitional utilizai tag-ul prezentat n figura 2.24.
Figura 2.24
Remarc. ntruct standardele XHTML evolueaz, aceast declaraie va fi modificat pentru a indica noile versiuni. De exemplu, ntr-un an declaraia 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 sfrit, pentru versiunea XHTML frameset utilizai 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 formatrii (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 adugai un spaiu de nume XHTML.
Remarc. Limbajul XML v permite s creai propriile elemente i atribute. Putei de asemenea combina mai multe tipuri de documente XML. Acelai document poate conine elemente care aparin mai multor vocabulare. Este de asemenea posibil ca acelai nume al unui element s fie utilizat n diferite vocabulare. Spaiul de nume permite realizarea unei legturi a unui element la un vocabular cu ajutorul prefixelor specifice. n exemplul nostru (figura 2.21) spaiul de nume XHTML a fost declarat n interiorul tag-ului <html> cu atributul xmlns a crei valoare este numele spaiului de nume (figura 2.26).
Figura 2.26
Elementul <head>
Prezent n toate documentele XHTML, elementul <head> conine informaii privind titlul, script-ul utilizat, definiia stilurilor i descrierile documentului. Elementul <head> trebuie inserat ntre tag-urile <html> i </html>.
Remarc. Nu confundai elementul <head> care este un element de structur cu elementul en-tte (h1, de exemplu) care creeaz un text de en-tte n corpul documentului.
37
n afar de elementele meta i title, elementul <head> poate conine de asemenea i urmtoarele 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 uitai s-l nchidei cu un spaiu urmat de o bar oblic naintea semnului > ( />).
Elementul <title>
Elementul <title>, obligatoriu ntr-un document XHTML1 conine titlul documentului. Pentru a utiliza elementul <title>, inserai-l ntre tag-urile <head> de nceput i de sfrit (figura 2.28).
Figura 2.28
38
Remarci:
9 Exemple de titluri corecte:

Exemplu de cod XHTML nvm XHTML Adrese de site-uri XHTML 9 Exemple de titluri mai puin utile: Capitolul 4 Aplicaii Exemple 9 Atenie la titlurile implicite generate de editoarele WYSIWYG. Dai propriul titlu documentului dumneavoastr. 9 Informaiile din elementul <title> sunt de asemenea utilizate de ctre motoarele de cutare i programele de indexare.
Ali fii ai elementului <head>

n afar de elementele <title> i <meta>, elementul <head> poate conine de asemenea urmtoarele 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> conine elementele, atributele i informaiile pe care dorii s le afiai n navigator. Pentru a utiliza elementul <body> inserai-l ntre tag-ul de nchidere </head> i tag-ul de nchidere </html> (figura 2.29).
Figura 2.29
39
Crearea unui en-tte. En-tte-urile divizeaz textul, anun subiectele care urmeaz i aranjeaz informaiile ntr-o ierarhie logic. Limbajul XHTML ca i limbajul HTML 4 Strict permite utilizarea a ase nivele de en-tte: <h1></h1>; <h2></h2>; <h3></h3>; <h4></h4>; <h5></h5>; <h6></h6> (vezi Conversaia 4). Tag-ul <h1></h1> utilizat n continuare (figura 2.30) a fost introdus cu rolul de a afia cu caractere mari i bolduite mesajul: Prima mea pagin Web.
Figura 2.30 Remarc. n general, este bine s utilizai elementele de en-tte numai pentru documentele de en-tte, altfel spus nu utilizai aceste elemente pentru legende sau pentru a accentua informaiile 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>. <title>, <script>, <param>, <base> i <basefont>.
9 Atributul title nu poate fi utilizat cu elementele: <html>, <head>, <meta>,
40
Elemente HTML depite n versiunea XHTML1
Unul din obiectivele principale ale limbajului XHTML l constituie separarea structurii documentului de forma de prezentare a sa. Urmtoarele elemente HTML, care sunt depite n versiunea XHTML1, dar mereu utilizate de diveri 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 lucrrii, vom prezenta pentru fiecare din elementele HTML depite o alternativ (acolo unde este posibil!).
Validai documentele XHTML 1.0

Pentru a valida un document XHTML v recomandm s folosii tot aplicaia W3C validator pe care ai utilizat-o i la validarea documentelor HTML 4 Strict. Dac documentul XHTML pe care l-ai creat (figura 2.21) este validat, vei primi mesajul: Congratulations, this document validates as XHTML
1.0 Transitional!, iar apoi putei aduga icon-ul de conformitate XHTML

n pagina dumneavoastr Web. n figura 2.31 este afiat rezultatul validrii:
41
Figura 2.31
Icon-ul XHTML (vezi figura 2.32) indic utilizatorilor c documentul dumneavoastr este conform specificaiilor limbajului XHTML. Felicitri!
Figura 2.32
Adugai icon-ul de conformitate XHTML

Pentru a aduga icon-ul n pagina dumneavoastr Web,
inserai n documentul XHTML urmtorul paragraf (figura 2.33):
Figura 2.33
42
Cred c v-ai 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 vizualizrii paginii Web n Microsoft Internet Explorer este prezentat n figura 2.35. Remarcai, la baza paginii, icon-ul de conformitate W3C.
Figura 2.35
43
(X)HTML
Testai-v cunotinele
Tem
1. Comentai pe scurt urmtoarele dou reguli de aur ale paginilor Web: 9 Nu publicai o pagin n curs de realizare. 9 Nu utilizai resurse pirat (imagini, text etc.) fr a fi obinut n prealabil copyright-ul! 2. Care sunt elementele comune (X)HTML ale paginilor Web? 3. Cum validai un document (X)HTML? 4. Ce este icon-ul de conformitate ?
Vizitai site-urile
9 http://validator.w3.org 9 www.w3.org/Markup 9 www.yahoo.com
Conversaia 2
(continuare)
Convertii HTML n XHTML

f f f f
A converti un document HTML n XHTML nu nseamn a relua totul de la zero! XHTML utilizeaz exact aceleai elemente i atribute ca HTML (mai puin spaiile de nume XHTML). Avei 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, utiliznd aplicaia HTML Tidy.
De ce trebuie s convertii documentele HTML? Convertii manual documentele HTML Convertii (automat) documentele HTML cu HTML Tidy (X)HTML Tem
De ce trebuie s convertii documentele HTML?

Pentru a nelege mai bine de ce trebuie s convertii documentele HTML n XHTML, trebuie s tii mai nti de unde provine XML i care este destinaia sa. (vezi Liviu Dumitracu, XML, Editura Universitii din Ploieti, 2003).
46
Prezentm n continuare cteva argumente, sperm convingtoare: 9 ntruct limbajul XHTML este o aplicaie 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 vocabular XML. Multimedia Integration Language), MathML (Mathematic Markup Language) sau de ce nu propriul dumneavoastr
9 XHTML ncurajeaz separarea stilului (documentului) de structura

documentului.
9 XHTML ofer un cod mai clar, mai uor de citit att pentru procesor
ct 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 ntrzia s atrag piaa.
9 W3C nu va mai dezvolta HTML, dect sub form de noi versiuni

XHTML.
Convertii manual documentele HTML

Numai dumneavoastr putei decide de a converti manual paginile HTML n XHTML. Pentru a fi oneti, trebuie s mrturisim c metoda manual de conversie este superflu! Avei la dispoziie un fantastic instrument gratuit HTML Tidy de care trebuie s profitai fr 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 generaiile mai vechi se limiteaz la conveniile de sintax. Din fericire, sintaxa XML
47
este suficient de apropiat de cea a limbajului SGML deci, i de HTML, ceea ce face ca diferenele sintactice s fie minime. Reguli de convertire manual: 9 Atunci cnd utilizai sintaxa elementului vid XML, inserai un spaiu
naintea barei oblice (/); exemplu: <br />.
9 Utilizai o foaie de stiluri extern sau documente de script n loc de a

le imbrica ntre <head> i </head> ale documentului XHTML. nainte de apariia XHTML, creatorii Web foloseau comentariile pentru a masca script-urile i foile de stiluri ale vechilor navigatoare. XHTML utilizeaz seciunile 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 putei utiliza script-uri sau foi de stiluri externe, asigurai-v c sintaxa intern nu conine <,&,]], sau >. La ora actual nici-un navigator nu este capabil de a se servi de seciunile CDATA ale limbajului XML.
9 Convertii toate numele de elemente i atribute (i valorile atributelor)

care sunt scrise cu majuscule, n minuscule.
9 Nu utilizai rupturi de linie pentru a mri lizibilitatea documentului;

inserai un spaiu alb numai ntre elemente.
9 Utilizai 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 utilizai n

acelai timp atributele lang i xml.
9 nchidei toate elementele, inclusiv elementele vide. 9 Plasai ntre ghilimele toate valorile atributelor. 9 Atribuii valori tuturor atributelor. Exemplu: <input type=checkbox
checked=checked />.
9 Imbricai corect elementele. 9 Utilizai declaraia DOCTYPE corespunztoare. 9 Introducei n tag-ul de deschidere <html> spaiul de nume XHTML:
<html xmlns=http://www.w3.org/1999/xhtml>.
48
Aplicnd regulile de convertire manual (HTML XHTML) documentului HTML 4 (Conversaia 2, figura 2.1) s-a obinut documentul XHTML 1.0 ilustrat n figura de mai jos (figura 2.36).
Figura 2.36
Remarc. Revedei Conversaia 2.
Convertii (automat) documentele HTML cu HTML Tidy

HTML Tidy, un instrument conceput de David Ragett este o veritabil providen pentru toi creatorii Web. Disponibil pe platformele Windows i Mac, Tidy convertete documentele HTML n XHTML de o manier precis, n cteva secunde. Destinat la nceput currii codului HTML el a sfrit prin a fi integrat ca plugin n cea mai mare parte a editoarelor HTML. n plus, Tidy posed i o versiune grafic, Tidy Gui. Prezentm n continuare cteva din virtuile 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 informaii suplimentare privind facilitile i opiunile aplicaiei HTML Tidy, vizitai site-ul www.w3.org/People/Ragett/Tidy. i-acum la treab! ncrcai HTML-Kit de pe site-ul www.chami.com/html-Kit/, deschidei-l i facei cunotin cu interfaa. Nu v emoionai. Nu este nimic complicat! Identificai documentul debut.htm. Deschidei fiierul (File Open). n HTML-Kit, selectai Actions / Tools / HTML Tidy / Convert to XHTML (figura 2.37).
Figura 2.37
n cteva minute vei obine un document (debut.htm) XHTML perfect! (vezi figura 2.38).
50
Figura 2.38
Nu v grbii! Mai exist i mai mult ca perfect!

Remarci:
9 Dac dorii s nlocuii vechiul document (debut.htm) HTML cu noul document

XHTML, executai un clic dreapta n fereastra din dreapta a ecranului i selectai Copy Output To Editor (figura 2.39).
Figura 2.39
51
9 Selectai File Save. 9 Executai apoi clic pe Editor situat la baza ferestrei pentru a continua
modificrile n documentul dumneavoastr sau pentru a vedea limbajul XHTML n toat splendoarea sa! (figura 2.40).
Figura 2.40
(X)HTML
Testai-v cunotinele
Tem
1. De ce trebuie s convertii documentele HTML n XHTML? 2. Care sunt virtuile aplicaiei HTML Tidy? 3. Comentai pe scurt urmtoarele dou reguli de convertire manual (HTML XHTML): 9 Convertii toate numele de elemente i atribute (i valorile atributelor) care sunt scrise cu majuscule, n minuscule. 9 nchidei toate elementele, inclusiv elementele vide.
52
Vizitai site-urile
9 www.altavista.com 9 www.news.com 9 www.multimania.fr 9 www.tripod.fr 9 www.zdnet.com/developer
Conversaia 3
Introducei i formatai caracterele cu HTML 4 i XHTML

f f f f f f f f f f
HTML4, XHTML Introducei text HTML4, XHTML Inserai caractere speciale HTML4, XHTML Inserai caractere proprii (X)HTML HTML4, XHTML Aplicai unui text formatele fizice i logice HTML4, XHTML Scriei un text cu exponent sau cu indice HTML4 Definii tipul de font HTML4 Definii dimensiunea fontului HTML4 Definii culorile XHTML Definii tipul de font, dimensiunea fontului i culorile (X)HTML Tem
Elementele cele mai des ntlnite n paginile Web sunt: textul i imaginile. ncepei s creai pagini Web cu HTML pentru a v familiariza cu introducerea textului i cu formatarea acestuia. Vei descoperi n cele ce urmeaz cum definii tipul i dimensiunea fontului, cum inserai caractere proprii HTML, cum dai ... ordin s clipeasc un text i ... nu doar att.
54
HTML
Introducei text
Desigur, una este s plasai cod HTML, i alta s introducei text ntr-o pagin Web. Pagina Web fr text este ca ... i irigaia fr ... ploaie! n consecin, v propunem s introducem un text n documentul HTML pe care lai creat. Iat cum procedai s introducei urmtorul text n pagina Web:
Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit!

1. Introducei declaraia DOCTYPE (figura 3.1).
Figura 3.1
2. Introducei textul propus ntre tagurile <BODY> i </BODY> (figura 3.2).
Figura 3.2
55
3. Salvai documentul (index.htm) cu extensia .htm sau .html (figura 3.3).
Figura 3.3
Remarci: 9 Dac n editorul de texte Notepad acionai tasta ENTER sau inserai mai multe spaii, aceasta nu v ajut dect la ... aerisirea documentului HTML neinfluennd n nici un fel modul de afiare a paginii ntr-un browser. 9 Salturile de linie, paragrafele sunt create cu taguri specializate (vezi paragrafele urmtoare ). Fr aceste taguri, un text se ntinde pe o singur linie atunci cnd se afieaz ntr-un browser.
56
4. Validai documentul HTML 4 strict cu aplicaia validator (http://validator.w3.org).
Figura 3.4
5. Inserai codul HTML care afieaz icon-ul de conformitate (figura 3.5).
Figura 3.5
57
6. Vizualizai pagina Web ntr-un navigator - Internet Explorer, via index.htm butonul Open (figura 3.6).
Figura 3.6
Remarc. Internet Explorer afieaz textul pe care l-ai introdus (pe o singur linie) i icon-ul de conformitate W3C la baza paginii (vezi figura 3.7).
Figura 3.7
Remarci: 9 Observai modul total diferit de afiare a textului de ctre editorul Notepad i browserul Internet Explorer.
58
9 Utilizai comanda SOURCE din meniul VIEW pentru a revedea codul surs HTML. 9 Activai butonul REFRESH de pe bara de instrumente a browserului pentru a actualiza documentul n cazul n care au fost operate modificri. 9 Dac textul pe care dorii s-l introducei se afl deja n alt document, utilizai tehnica COPY PASTE pentru a-l copia n Notepad. Ctigai, evident mult timp!
XHTML
Introducei 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 privete scrierea codului, XHTML este foarte exigent! Trebuie s trecei de nivelul nceptor i s respectai alte principii de codificare Web pentru a v conforma standardelor XHTML-ului. Iat cum creai manual un document XHTML care conine textul Bine ati venit! Felicitari pentru rabdarea de a ne fi descoperit!.
Metoda manual
1. Introducei n locul tag-ului <html> urmtoarele 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 definete setul de
caractere iso-8859-1. Atenie la majuscule i la minuscule! DEFINITION) utilizat. Noi utilizm pentru acest exemplu DTD transitional,
9 A doua linie (lung!) definete tipul de document (DOCUMENT TYPE
59
opiunea cea mai frecvent. <!DOCTYPE> identific fiierul ca document HTML conform cerinelor 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 opiunile: strict, transitional i frameset. 9 Opiunea Strict.dtd (figura 3.9) ofer mai puine avantaje i cere n schimb mai mult efort de codificare.
Figura 3.9 9 Opiunea transitional.dtd (figura 3.10) se folosete atunci cnd optai pentru
un DTD ... moderat. n cadrul acestei lucrri, opiunea transitional.dtd va fi folosit n majoritatea aplicaiilor.
Figura 3.10 9 Opiunea frameset.dtd (figura 3.11) se folosete atunci cnd lucrai cu cadre
(vezi Conversaia 12).
Figura 3.11 9 Nu intrai n panic! Un document DTD este redactat n limbajul de descriere a 9 Poate ai observat unele schimbri la tag-ul <html> din cea de-a treia linie
documentelor SGML. (figura 3.12). Tag-ul <html> are noi atribute: xmlns, xml:lang i lang. Cnd
60
utilizai HTML trebuie s introducei doar tag-ul <html> pentru a identifica documentul ca fiier HTML, dar la XHTML trebuie s folosii atributul xmlns pentru a lega documentul dumneavoastr la definiia Consoriului W3 a XHTML-ului, care exist nc! E puin neclar, dar este o ncercare pentru viitor. Mai multe despre aceste planuri de viitor n capitolele urmtoare.
Figura 3.12
Foarte complicat, nu-i aa! Putei renuna la primele trei linii pe care vi le-am recomandat s le integrai n documentele dumneavoastr HTML sau XHTML, reinnd numai tag-ul <html>. Legtura ctre DTD-ul din linia a doua poate fi considerat total inutil. De ce? Iat cteva dintre argumente.
9 Navigatoarele actuale (i viitoare) pot citi fr probleme
(X)HTML fr DTD, deoarece toate tag-urile sunt integrate n navigator, i sunt deci cunoscute.
9 Aceast informaie este, la ora actual, uor ignorat de ctre
navigatoarele curente.
9 Cele trei linii sunt puin utilizate n practic i de multe ori pot
dezorienta nceptorii.
Remarci:
9 Renunai la cele trei linii numai atunci cnd suntei siguri c ai redactat
documente XHTML valide, ntr-un stil perfect!
9 Pentru navigator este puin important dac la nceputul documentului

introducei cele trei linii sau numai tag-ul <html>. convertirea automat HTML XHTML.
9 Exist programe care convertesc n mod automat HTML n XHTML. 9 Utilizai programul utilitar (oferit gratuit de W3C) HTML-TIDY pentru
n continuare vom trece la urmtorul pas (2) necesar crerii primului nostru document XHTML.
61
2. Introducei 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 respectai regulile XML cu
urmtoarele adugiri: Opional, documentul poate ncepe cu o declaraie XML. O declaraie DOCTYPE trebuie s fie prezent, referind unul din documentele urmtoare: strict, transitional sau frameset. Un element rdcin trebuie s conin ntreg documentul. Tag-ul <html> trebuie s se gseasc naintea tuturor celorlalte elemente, dar dup declaraia 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 acelai 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 respectai aceste reguli simple, documentele dumneavoastr vor fi conforme cu standardul XHTML. Pentru verificare, putei valida aceste documente.
3. Introducei textul ntre tag-urile <body> i </body> (figura 3.14).
Figura 3.14
Remarc. Informaiile pe care dorii s le prezentai n pagina Web, trebuie s fie definite n corpul paginii, mai precis ntre tag-urile <body> i </body>.
4. Introducei 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 conin 9 9 9 9 9
informaii privind setul de caractere utilizat i tipul de document utilizat. Cele dou informaii permit navigatorului s identifice o pagin scris n XHTML. Tag-ul <html> trebuie s includ i atributele: xmlns, xml:lang, lang. Tag-urile <head> i </head> conin informaii despre document. Tag-urile <title> i </title> identific titlurile paginii. Tag-urile <body> i </body> delimiteaz corpul paginii. Toate tag-urile XHTML (cu excepia tag-ului <!DOCTYPE>) trebuie s fie tastate cu litere mici.
5. Salvai documentul (lumina.html), figura 3.16.
Figura 3.16
Remarc. Extensia fiierului este .html. Nu exist extensia .xhtml.
6. Validai documentul XHTML cu aplicaia validator.
63
Odat declaraia <!DOCTYPE> adugat, putei trece la validarea documentului XHTML n raport cu DTD-ul care figureaz pe site-ul consoriului W3. Dac validarea reuete, ai obinut un document XHTML.
Remarc. W3C propune o aplicaie 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 validrii obinut cu aplicaia validator.
Figura 3.17
7. Inserai codul XHTML care afieaz icon-ul de conformitate (figura 3.18).
64
Figura 3.18
8. Vizualizai pagina Web ntr-un navigator (figura 3.19).
Figura 3.19
Iat cum procedm pentru a crea acelai document XHTML n mod automat, convertind cu HTML Tidy documentul HTML lumina.html (creat anterior).
Metoda automat
1. Identificai fiierul lumina.html (File Open) 2. Executai clic pe Actions HTML Tidy Convert to XHTML (figura 3.20).
Figura 3.20
65
n cteva minute HTML Tidy afieaz un document XHTML mai mult ca perfect! (vezi figura 3.21).
Figura 3.21
Figura 3.22
Remarc. Analizai documentul XHTML pe care l-ai generat n mod automat i ncercai s nelegei regulile XHTML care au fost aplicate. Nu este nimic complicat.
66
HTML
Inserai caractere speciale
Dup cum cunoatei, diferite caractere nu figureaz pe tastaturile obinuite. Aceste caractere, pe care le numim speciale se insereaz n codul surs HTML n conformitate cu regulile prevzute 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 procedm pentru a insera la finele paginii Web textul: 2003 Lumina Blanda. 1. nlocuii caracterul special de copyright prin codul ©
Figura 3.23
sau,
utilizai mnemonicul © (figura 3.24).
Figura 3.24
67
Remarc. &COPY; sau © insereaz simbolul la poziia curent a cursorului.
2. Validai documentul HTML 4 Strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate
.
4. Vizualizai pagina Web ntr-un navigator.
Figura 3.25
Remarci: 9 n navigator simbolul apare explicit. 9 Reinei urmtoarele coduri: ® pentru caracterul ; @ pentru caracterul @; &#227 pentru caracterul ; &#226 pentru caracterul ; &#238 pentru caracterul ; Î pentru caracterul .
Aplicaie Introducei urmtorul text (n limba francez) care conine caractere accentuate (e cu accent grav): Ma premire page Web est O.K.! Indicaie. Pentru caracterul e cu accent grav folosii mnemonicul è.
XHTML
Inserai caractere speciale
Site-ul consoriului W3 (www.w3.org/TR/REC-html40/sgml/entities.htm) conine o list complet a tuturor caracterelor suportate de HTML. Vei vedea cum multe din aceste simboluri sunt uor de neles (Exemple:
68
© pentru simbolul de copyright (); ® pentru simbolul de marc nregistrat () etc.; folosit pentru inserarea unui spaiu ntr-un document HTML). Iat cum procedm pentru a crea acelai 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 vizualizrii paginii Web n Internet Explorer este ilustrat n figura 3.27.
Figura 3.27
69
HTML
Inserai caractere proprii HTML
n codul surs HTML putei include de asemenea i caractere proprii HTML, precum <, > sau &. Dac de exemplu, dorii s inserai ntr-un text de marketing eticheta C&A, navigatorul va considera simbolul & ca pe un cod! Ce facem? Soluia este de a utiliza norma ISO/IEG 10646 care prevede tag-uri speciale (entiti 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 inserai caracterul propriu HTML & n textul: Vizitai magazinele C&A!. 1. nlocuii caracterul & cu mnemonicul &
Figura 3.28
Remarci: 9 Prezentm n tabelul urmtor principalele simboluri i codul (mnemonicul) HTML asociat.
Simbol & < > Tabelul 1 "
Cod HTML & < > "
70
9 Entitatea de tip caracter special, care este utilizat frecvent n proiectarea paginilor Web i care nu se afieaz pe ecran este spaiul neutilizat (nonbreaking space) care are codul HTML (ampersand non breaking space punct i virgul).
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate
.
Figura 3.29
Remarc. Navigatorul afieaz simbolul &.
XHTML
Inserai caractere proprii XHTML
Pe site-ul www.w3.org/TR/REC-html40/sgml/entities.htm care aparine consoriului W3 vei gsi i caracterele proprii (X)HTML, care de asemenea sunt uor de neles i de aplicat: < (<); > (>); & (&). Iat cum procedm pentru a crea acelai document XHTML, n mod automat, convertind documentul HTML magazin.htm (creat anterior) cu HTML-TIDY. n figura 3.30 se prezint documentul XHTML generat.
71
Figura 3.30
Figura 3.31
HTML
Aplicai unui text formatele fizice i logice
Pn acum ai nvat cum s introducei text (numai text!). A sosit momentul s nvai i cum s-l formatai. HTML v permite s aplicai 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 dorii s-l formatai. Formatarea unui text poate fi pus n eviden cu dou tipuri de formate: formate logice i formate fizice. Cnd utilizai formatele logice trebuie s indicai tipul de date (Exemplu: definiii, adres) al seciunii. Afiarea depinde de navigator. Formatele fizice v dau libertatea s v definii 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 studiai n aceast conversaie sunt aplicate cu metoda veche, care n prezent este descurajat oficial de W3C. Foile de stiluri reprezint (vezi Conversaia 6) noua metod care este ncurajat oficial de W3C. 9 De ce nvm o metod depit? ntruct un numr mare, deloc neglijabil de utilizatori posed nc navigatoare Web care nu permit utilizarea foilor de stiluri.
Formatai un text cu caractere ngroate (bolduite) sau cursive (italice)

Contrar formatelor logice prin care afiajul este reglat de navigator, formatele fizice v permit definirea de ctre dumneavoastr niv a modului n care dorii formatarea unui text. n prelucrarea textelor, putei aplica rapid unui text formatul fizic bold i italic n funcie de scopul urmrit. Iat cum bolduim n HTML prima fraz din pagin "Bine ai venit!" i cum afim cu italice cea de-a doua fraz din pagin "Felicitri pentru rbdarea de a ne fi descoperit!". Vom utiliza formatul fizic <B> i formatul fizic <I>. 1. Plasai prima fraz ntre tag-urile <B> i </B>.
73
Figura 3.32
2. Plasai fraza "Felicitri pentru rbdarea 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. Admirai icon-ul de conformitate.
Barai sau subliniai un text

Putei bara (tia) un text pentru a semnala o schimbare de valori (a se vedea anunurile cu mari reduceri de preuri, preuri oc etc.!) sau n alte scopuri. Sublinierea este ideal pentru a pune un text n valoare, dar se recomand pruden ntruct se pot crea confuzii cu textul subliniat folosit ca link-uri. Iat cum barai n HTML prima fraz din pagin i cum o subliniai pe cea de-a doua. Vom utiliza formatul fizic <S> i <U>. 1. Plasai prima fraz ntre tag-urile <S> i </S> (figura 3.35).
75
Figura 3.35 Remarc. Pentru a bara un text putei utiliza de asemenea tag-ul pereche <STRIKE> ... </STRIKE>.
2. Plasai cea de-a doua fraz din pagin ntre tag-urile <U> i </U> (figura 3.36).
Figura 3.36
76
Figura 3.37
Mrii sau micorai un text

Pentru unii dintre dumneavoastr, utilizarea atributului size poate prea un pic complicat. HTML elimin i acest stres, propunndu-v dou tag-uri semnificative: <BIG> i <SMALL> (formate fizice) pentru mrirea, respectiv micorarea unui text. Iat cum mrii dimensiunea fontului pentru ultimul cuvnt (venit) din prima fraz, respectiv micorai dimensiunea fontului pentru cea de-a doua fraz. Vom utiliza formatul fizic <BIG> i <SMALL>. 1. Plasai cuvntul pe care dorii s-l mrii ntre tag-urile <BIG> i </BIG> (figura 3.38).
77
Figura 3.38
2. Plasai textul pe care dorii s-l micorai ntre tag-urile <SMALL> i </SMALL> (figura 3.39).
Figura 3.39
3. Validai documentul HTML4 strict cu aplicaia validator. 4. Inserai codul HTML care afieaz icon-ul de conformitate
78
Figura 3.40
Remarc. n browser, textele sunt reduse sau mrite n raport cu dimensiunea implicit a fontului: 3.
Aplicaie Forai browser-ul s afieze urmtorul text: Universitatea "Petrol-Gaze" din Ploieti, tradiie i dinamism, pe o singur linie. Pentru a interzice ruptura cuvintelor din text plasai textul care nu trebuie s fie ntrerupt ntre tag-urile <NOBR> i </NOBR> (figura 3.41).
Figura 3.41 n navigator, cuvntul sau fraza nu vor fi scindate (figura 3.42).
79
Figura 3.42
Utilizai fontul cu pas fix

Fontul cu pas fix produce acelai efect ca i maina de scris. Acest tip de font este practicat atunci cnd nu se dorete aplicarea fonturilor specifice. Iat cum formatm n HTML prima fraz din pagin utiliznd fontul cu pas fix. Vom utiliza formatul fizic <TT>. 1. Plasai prima fraz ntre tag-urile <TT> i </TT> (figura 3.43).
Figura 3.43
2. Validai documentul HTML4 strict cu aplicaia validator.
80
3. Inserai codul HTML care afieaz icon-ul de conformitate
.
Figura 3.44
Marcai definiiile
Pentru a nu v pierde cititorii, definii ori de cte ori este nevoie termenii pe care i utilizai. Numai aa vei reui s v facei neles! Este preferabil s separai definiiile de restul textului. Iat cum marcm n HTML definiia paragrafului (unitate de text care conine una sau mai multe linii). Vom utiliza formatul logic <DFN>. 1. Plasai textul definiiei ntre tag-urile <DFN> i </DFN> (figura 3.45).
81
Figura 3.45
.
Figura 3.46
Remarc. n navigator, definiia se repereaz cu uurin.
Semnalai citatele
Cunoatei cu siguran c nu putei folosi surse bibliografice ce nu v aparin fr 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. Plasai citatul ntre tag-urile <CITE> i </CITE> (figura 3.47).
Figura 3.47
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai pagina Web ntr-un navigator (figura 3.48).
Figura 3.48
83
Remarci: 9 Putei afia citatele lungi ntr-un bloc de text (indentat) cu scopul de a-l putea diferenia de restul textului din pagina Dvs. Web. 9 Pentru citate mai scurte se recomand ghilimelele sau tag-ul <Q> i s lsai textul n acelai rnd cu restul coninutului textului. 9 Dac mrimea textului citat depete cteva propoziii, utilizai tag-ul <BLOCKQUOTE>.
Indicai comenzi, coduri de program

Dac pagina Web pe care o realizai conine comenzi, enunuri program este bine s le difereniai de restul textului. Iat cum semnalm ntr-un text HTML prezena cunoscutelor comenzi Microsoft Office de copiere a unui text: Copy, Paste. Vom utiliza formatul logic <CODE>. 1. Plasai comenzile Microsoft Office de copiere a unui text ntre tag-urile <CODE> i </CODE> (figura 3.49).
Figura 3.49
Remarc. Putei de asemenea semnala comenzi sau enunuri (cod) program utiliznd tag-ul <SAMP>.
2. Validai documentul HTML 4 strict cu aplicaia validator (figura 3.50). 3. Inserai codul HTML care afieaz icon-ul de conformitate .
84
Figura 3.50
Remarc. n navigator, comenzile se formateaz cu un font specific.
Dai ordin ... s clipeasc un text n pagin

Dac pagina Web pe care o realizai nu necesit o formatare strict, este poate amuzant s inserai un text care ... clipete. Iat cum procedm ca textul din pagin din prima fraz s ... clipeasc! Vom utiliza formatul logic <BLINK>. 1. Plasai textul "Bine ai 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
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai pagina Web n browser-ul Netscape (figura 3.52).
Figura 3.52
XHTML
Aplicai unui text formatele fizice i logice
Tag-urile (X)HTML permit formatarea paginilor dar proprietile 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. Consoriul W3 a hotrt ca HTML-ul s fie folosit la identificarea tipurilor de informaie (text, titluri, tabele etc.) dar nu ar trebui s fie folosit la formatarea acestor informaii. Unele tag-uri HTML mai vechi, utilizate n special la formatare, au fost nlocuite cu foile de stiluri datorit capacitii lor de formatare. Dac dorii ca ntr-adevr codul din documentele dumneavoastr s fie conform cu XHTML, trebuie s renunai la cteva tag-uri, altdat larg
86
folosite. n tabelul 2 se prezint lista formatelor fizice (X)HTML n vigoare.
Format fizic <b> ... </b> <i> ... </i> <tt> ... </tt> <big> ... </big> <small> ... </small> <sup> ... </sup> <sub> ... </sub> Semnificaie Bold Italic Teletext Font mare Font mic Scriere cu exponent Scriere cu indice
Tabelul 2
n tabelul 3 se prezint lista formatelor logice (X)HTML n vigoare.

Format logic <em> ... </em> <strong> ... </strong> <code> ... </code> <samp> ... </samp> <kbd> ... </kbd> <var> ... </var> <cite> ... </cite> <dfn> ... </dfn> <acronym> ... </acronym> <abbr> ... </abbr> <address> ... </address> <blockquote> ... </blockquote> <q> ... </q> <del> ... </del> <ins> ... </ins> Semnificaie Emphasis Strong emphasis Cod Sample Keyboard Variable Citare cu URL Definiie Acronim Abreviere Adres Citare lung Citare scurt Text suprimat Text inserat
Tabelul 3
Remarc. Nu putei crea documentele XHTML convingtoare fr a apela la CSS (Cascading Style Sheets) metoda nou recomandat oficial de Consoriul W3. Principalul argument n utilizarea CSS-urilor l reprezint posibilitatea separrii datelor n tag-uri de formatare (vezi Conversaia 6).

Iat cum bolduim n XHTML prima fraz din pagin Bine ai venit i cum afim cu italice cea de-a doua fraz din pagin Felicitri pentru rbdarea 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. n figura 3.53 se prezint documentul XHTML generat.
Figura 3.53
Inserai codul XHTML care afieaz icon-ul de conformitate
Figura 3.54
88
Barai sau subliniai un text
n XHTML, renunai la utilizarea tag-urilor:
9 <s> i <strike> 9 <u>
- pentru bararea irurilor de caractere; - pentru subliniere.
Mrii sau micorai un text

Iat cum mrii n XHTML dimensiunea fontului pentru ultimul cuvnt (venit) din prima fraz, respectiv micorai 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 HTMLTIDY. n figura 3.55 se prezint documentul XHTML generat.
Figura 3.55
89
Figura 3.56
Utilizai fontul cu pas fix

Iat cum aplicm n XHTML formatul fizic <tt> primei fraze din pagin: Bine ai venit!, pornind de la documentul HTML lumina.html creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTMLTIDY. n figura 3.57 se prezint documentul XHTML generat.
Figura 3.57
90
Inserai codul XHTML care afieaz icon-ul de conformitate . Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n figura 3.58.
Figura 5.58
Marcai definiiile
Iat cum aplicm formatul logic <dfn> pentru a marca n XHTML definiia paragrafului (unitate de text care conine 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. n figura 3.59 se prezint documentul XHTML generat.
Figura 3.59
91
Figura 3.60
Semnalai citatele
Iat cum aplicm 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. n figura 3.61 se prezint documentul XHTML generat.
Figura 3.61
92
Figura 3.62
Indicai comenzi, coduri de program

Iat cum aplicm formatul logic <code> pentru a marca ntr-un text XHTML prezena 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. n figura 3.63 se prezint documentul XHTML generat.
Figura 3.63
93
Inserai codul XHTML care afieaz icon-ul de conformitate figura 3.64. . Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n
Figura 3.64
HTML
Scriei un text cu exponent sau cu indice
Nu puine sunt textele (formule, ecuaii matematice etc.) care utilizeaz indici sau exponeni. Iat cum scriem n HTML dou expresii ... ciudate: a) LUMINABLNDA2=LUMINABLNDA*LUMINABLNDA; b) LUMINABLNDA12= LUMINABLNDA1* LUMINABLNDA1. 1. Plasai exponentul primei expresii ntre tag-urile <SUP> i </SUP> (figura 3.65).
Figura 3.65
94
2. Plasai 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), utiliznd 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 afia ca pe un exponent (superscript), cu un font mai mic (comparativ cu textul normal). Tag-ul <SUP> nu permite atribute.
Aplicaie Scriei n HTML urmtoarele texte: a) Formula apei este: H2O; b) Formula energiei cinetice este: Ec =
mv 2 . 2
XHTML
Scriei un text cu exponent sau cu indice
Pentru a scrie n XHTML un text cu exponent sau cu indice utilizai formatul fizic <sup> respectiv <sub>. Iat cum aplicm 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) LUMINABLNDA2=LUMINABLNDA*LUMINABLNDA; b) LUMINABLNDA12= LUMINABLNDA1* LUMINABLNDA1. n figura 3.68 se prezint documentul XHTML generat.
96
Figura 3.68
Figura 3.69
Remarc. Dac dorii s scriei ecuaii, expresii matematice complicate trebuie s fii mai creativi! Exist produse comerciale disponibile pe care le putei utiliza pentru scrierea ecuaiilor i expresiilor matematice. Putei vedea lista acestora pe site-ul Consoriului W3 (www.w3.org/Math).
97
Aplicaie Scriei n XHTML: a3 i utiliznd entitile ³ respectiv ¾.
HTML
Definii tipul de font
Putei schimba tipul de font pentru un cuvnt, pentru o fraz (poriune de text) sau pentru ntreg textul din pagina Web cu singura observaie c metodele difer puin ntre ele.
Definii tipul de font pentru tot textul din pagin

Iat cum definii tipul de font pentru textul integral al paginii Web. 1. Tastai <BASEFONT imediat dup tagul <BODY> (figura 3.70).
Figura 3.70
2. Introducei n continuare face="?,?"> nlocuind semnele de ntrebare (?,?) prin numele fonturilor pe care dorii s le utilizai (figura 3.71).
Remarc: Va trebui s indicai mai multe fonturi pentru cazul n care primul nu va fi recunoscut de browser. ncercai: Arial, Times New Roman sau Courier New, Courier, Mono. Se utilizeaz ghilimelele atunci cnd numele fontului este compus din mai multe cuvinte. Lipsa ghilimelelor determin browserul s interpreteze lista de cuvinte pn la primul spaiu. Dac nici unul din fonturi nu este disponibil, atunci se utilizeaz fontul implicit.
98
Figura 3.71
3. Introducei tagul pereche </BASEFONT> naintea tagului </BODY>.
Figura 3.72
4. Validai documentul HTML 4 strict cu aplicaia validator.
99
5. Inserai codul HTML care afieaz icon-ul de conformitate . 6. Vizualizai pagina Web ntr-un navigator (figura 3.73).
Figura 3.73
Remarc. n browser (Internet Explorer) textul se afieaz ntr-unul din fonturile gsite.
Definii tipul de font pentru un cuvnt sau o fraz

Putei schimba n cadrul exemplului nostru tipul de font pentru prima sau a doua fraz sau orice cuvnt dorit. Iat cum definii pentru ultima fraz fontul Barmeno sau Courier n locul fontului Arial sau Times New Roman folosit iniial. 1. Tastai <FONT naintea celei de-a doua fraze.
Figura 3.74
100
2. Introducei, n continuare face="?,?" nlocuind semnele de ntrebare (?) prin numele fonturilor pe care dorii s le utilizai (de exemplu, Barmeno sau Courier), figura 3.75.
Figura 3.75
3. Introducei
tag-ul
pereche
</FONT>
la
finele
frazei
(cuvntului), figura 3.76.
Figura 3.76
101
Figura 3.77
HTML
Definii dimensiunea fontului
Putei schimba dimensiunea fontului pentru tot textul din pagin sau numai pentru un cuvnt sau o fraz, metodele fiind puin diferite.
Definii dimensiunea fontului pentru tot textul din pagin

Iat cum definii dimensiunea fontului pentru tot textul din pagin. 1. Tastai <BASEFONT imediat dup tag-ul <BODY> (figura 3.78).
102
Figura 3.78
2. Introducei, n continuare size="?"> nlocuind semnul de ntrebare (?) prin dimensiunea fontului pe care dorii s-o utilizai (4, n exemplul nostru), figura 3.79.
Figura 3.79
103
3. Introducei tag-ul pereche </BASEFONT> naintea tag-ului </BODY>, figura 3.80.
Figura 3.80
Remarci: 9 Atributul size definete mrimea (dimensiunea) fontului. 9 Dimensiunea fonturilor HTML variaz de la 1 la 7, n ordine cresctoare, 1 fiind cel mai mic, iar 7 cel mai mare. 9 Dimensiunea implicit a fontului este 3. 9 Dimensiunea fontului poate fi modificat utiliznd valori absolute i relative. 9 Modificrile relative nu pot reduce fontul sub size=1 sau peste size=7.
Figura 3.81
104
Remarc. Nu uitai c valorile pentru dimensiunea fontului nu sunt absolute; ele depind de cele definite n browser-ul vizitatorului.
Definii dimensiunea fontului pentru un cuvnt sau o fraz

Iat cum definii un font cu mrimea de 7 pentru fraza a doua din textul paginii. 1. Tastai <FONT naintea celei de-a doua fraze (figura 3.82).
Figura 3.82
2. Introducei, n continuare size="?"> nlocuind semnul de ntrebare (?) prin dimensiunea fontului pe care dorii s-o utilizai (7, n exemplul nostru), figura 3.83.
105
Figura 3.83
3. Introducei
tag-ul
pereche
</FONT>
la
sfritul
frazei
(cuvntului), figura 3.84.
Figura 3.84
106
5. Inserai codul HTML care afieaz icon-ul de conformitate . 6. Vizualizai pagina Web ntr-un navigator, figura 3.85.
Figura 3.85
HTML
Definii culorile
Trebuie s recunoatem c este o mare plcere pentru fiecare dintre noi s ne jucm cu ... culorile. Suntei sensibil la armonia culorilor, nu-i aa? Dac dorii s colorai tot textul din pagin sau numai un cuvnt, o liter ... este foarte simplu, metoda fiind puin diferit de la caz la caz.
Colorai toate textele paginii

Iat cum colorai n albastru toate cele trei fraze ale paginii. 1. Tastai <BASEFONT imediat dup tag-ul <BODY> (figura 3.86).
107
3
Figura 3.86
2. Introducei n continuare color=?> nlocuind semnul ntrebrii (?) cu numele culorii (blue), sau tastai color="#?>" nlocuind semnul ntrebrii (?) prin valoarea hexazecimal a culorii (0000FF), figura 3.87.
3
Figura 3.87
3. Introducei
tag-ul
</BASEFONT>
naintea
tagului
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, backgroundului etc. exist dou metode: utilizai numele culorilor; utilizai valorile RGB (rou, verde, albastru n limba romn; 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 (rou), YELLOW (galben). 9 Valorile RGB corespund la: Un numr de trei cifre pentru a defini cantitatea de rou (R) ; Un numr de trei cifre pentru a defini cantitatea de verde (G) ; Un numr de trei cifre pentru a defini cantitatea de albastru (B). De exemplu, culoarea roie se definete cu valorile: 255,0,0. n cod HTML, o culoare se definete cu #XXXXXX, unde: primele dou valorii X corespund definirii culorii roie, urmtoarele 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 utilizai 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 roie 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 dorii s colorai un text sau ntreaga pagin cu o culoare al crei nume nu-l cunoatei, va trebui s calculai valoarea sa hexazecimal. V sugerm s utilizai aplicaia Power Point (Format Font ) pentru a extrage RGB ul culorii. Folosii apoi aplicaia Calculator (accesoriu Windows) pentru a calcula valoarea n sistemul hexazecimal. Desigur, putei utiliza i tabelele dedicate de coresponden. 9 Pentru a defini o culoare tuturor textelor din pagin, putei utiliza de asemenea atributul text (<BODY text = nume culoare> sau <BODY text = # valoare hexazecimal culoare>).
Colorai un cuvnt sau o fraz

Iat cum coloraii n rou fraza de copyright din pagin: 2003 LUMINA BLNDA. 1. Introducei n faa frazei de copyright <FONT (figura 3.90).
110
Figura 3.90
2. Introducei n continuare color=?> nlocuind semnul ntrebrii (?) cu numele culorii (red), sau tastai color=#?> nlocuind semnul ntrebrii (?) cu valoarea hexazecimal a culorii (#FF0000), figura 3.91.
Figura 3.91
111
3. Introducei tagul final </FONT> la finele frazei (cuvntului), figura 3.92.
Figura 3.92
Figura 3.93
112
Remarc. n navigator tot textul apare n culoarea definit (albastru), cu excepia textului de copyright cruia i s-a atribuit o alt culoare (roie).
Aplicaii Dai ordin s defileze un text Bine paginii. Iat cum ordonai ca textul propus, s defileze, de la stnga la dreapta n partea superioar a paginii. 1. Plasai textul respectiv ntre tag-urile <MARQUEE> i </MARQUEE>. ai venit! n partea superioar a
Figura 3.94
Remarc. n mod implicit, textul defileaz de la stnga la dreapta. Pentru a modifica sensul de defilare, introducei n tag-ul <MARQUEE atributul directiva= ?>, nlocuind ? prin right (defilare de la dreapta la stnga) sau left (defilare de la stnga la dreapta).
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate 4. Vizualizai pagina Web ntr-un navigator (figura 3.95). .
113
Figura 3.95
Remarci: 9 n navigator, textul defileaz nedefinit. 9 Putei modifica viteza de defilare, utiliznd atributele: scrollamount (viteza n pixeli) sau scrolldelay (viteza n milisecunde) n tag-ul <MARQUEE>.
Dai ordin ca textul galben.
Bine ai venit! s defileze pe o band de culoare
Iat cum colorm n galben fondul pe care defileaz textul propus. 1. n tag-ul <MARQUEE> introducei atributul bgcolor=? nlocuind ? prin numele cu numele culorii (yellow) sau introducei atributul bgcolor=#? nlocuind semnul ntrebrii (?) prin valoarea hexazecimal a culorii galben (figura 3.96).
Figura 3.96 2. Validai documentul HTML 4 strict cu aplicaia validator.
114
3. Inserai codul . 4. Vizualizai pagina Web ntr-un navigator (figura 3.97). HTML care afieaz icon-ul de conformitate
Figura 3.97
Remarc. n navigator, textul colorat n albastru defileaz pe un fond galben.
XHTML
Definii tipul de font, dimensiunea fontului i culorile
n limbajul XHTML elementul <font> nu mai este deloc folosit! La fel i elementul <basefont>! n locul acestora au aprut foile de stiluri. Vei vedea cum atribuim un stil caracterelor de o manier mult mai ... modern. n consecin, vom renuna la abordarea celor dou subiecte (<font>, <basefont>) n cadrul acestei seciuni, din motive evidente.
Remarci: 9 Corpurile tag-ului <font> difer de corpurile definite n foile de stiluri. 9 n Conversaia 6 sunt prezentate atributele font-urilor CSS: font-family; font-size; color; font-weight; font-style; conform metodei noi recomandate oficial de consoriul W3.
115
(X)HTML
Testai-v cunotinele
Tem
1. Care este semnificaia urmtoarele entiti de tip caracter: © & < &quot. 2. Care sunt formatele fizice, logice (X)HTML n vigoare? 3. Precizai care este codul surs HTML care a stat la baza crerii paginii Web ilustrat n figura 3.98.
Figura 3.98 4. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web ilustrat n figura 3.99.
Figura 3.99
116
Vizitai site-urile
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
Conversaia 4
f f f f f f
Creai i formatai paragrafele cu HTML 4 i XHTML
HTML 4, XHTML Creai un paragraf HTML 4, XHTML Schimbai alinierea unui paragraf HTML 4, XHTML ncepei o nou linie HTML 4, XHTML Indentai un paragraf HTML 4 Definii un spaiu naintea unui paragraf HTML 4 Comunicai browser-ului s afieze linii vide, spaiile suplimentare etc. f HTML 4, XHTML Creai un titlu f HTML 4, XHTML Creai liste. Aplicaii f (X)HTML Tem
HTML
Creai un paragraf
Nu uitai c atunci cnd introducei text ntr-un editor (Notepad) i acionai tasta ENTER spaiul dintre linii nu influeneaz aezarea n pagin. Faptul c acionai ENTER dup fiecare linie nu afecteaz maniera n care liniile sunt separate atunci cnd fiierul HTML se afieaz ntr-un browser. Salturile de linie sunt create cu ajutorul unor tag-uri specifice. Fr a utiliza aceste tag-uri, un text se ntinde pe o singur linie, atunci cnd este afiat ntr-un browser.
118
n concluzie, ntr-un fiier HTML trebuie s specificai nceputul fiecrui paragraf. Iat cum structurm textul din aplicaia noastr n trei paragrafe:
9 Primul paragraf: "Bine ai venit! " 9 Al doilea paragraf: "Felicitri pentru rbdarea de a ne fi
descoperit!"
9 Al treilea paragraf: Dorim s
ne cunoatem i s rmnem
mpreun! LUMINA BLANDA este puternic i nu doar att! 1. Tastai <P> la nceputul fiecrui paragraf i </P> la sfritul fiecrui paragraf (figura 4.1).
Figura 4.1
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate .
Remarc: Pentru a crea un non-breaking space (spaiu nentrerupt) ntr-un paragraf, inserai entitatea de tip caracter n locul dorit.
4. Vizualizai pagina Web ntr-un browser.
119
Figura 4.2 Remarci: 9 9 9 9
Tag-ul <P> specific trecerea la un paragraf nou. Tag-ul </P> nu este obligatoriu. Se recomand ca toate tag-urile <P> s fie plasate pe linii distincte. Un paragraf nou ncalc orice setare a alinierii din paragraful anterior. Dac alinierea nu este specificat se folosete setarea prestabilit (la stnga). 9 Browser-ul separ cele trei paragrafe printr-o linie vid. 9 Lrgimea paragrafelor depinde de cea a ferestrei browser-ului. 9 Tag-ul <P> garanteaz vizualizarea ntregului text al paragrafelor.
XHTML
Creai un paragraf
n paginile urmtoare (pe care v invitm s le citii n ritmul Dumneavoastr obinuit) ale acestei seciuni, termenul HTML este sinonim cu XHTML! n consecin, nu ne rmne s ne ocupm dect de convertirea HTML t XHTML, utiliznd fie procedura automat (programul utilitar HTML TIDY) fie procedura manual (programul utilitar validator) sau ambele. Analizai i decidei!
120
Iat cum structurm n trei paragrafe textul aplicaiei, pornind de la documentul HTML paragraph.htm pe care apoi l convertim n XHTML cu programul utilitar HTML TIDY.
9 Primul paragraf: "Bine ai venit! " 9 Al doilea paragraf: "Felicitri pentru rbdarea de a ne fi
descoperit!"
9 Al treilea paragraf: "Dorim s ne cunoatem i s rmnem
mpreun! LUMINA BLND este puternic i nu doar att!" n figura 4.3 se prezint documentul XHTML generat.
Figura 4.3
121
Figura 4.4 Aplicaie Creai dou linii vide ntre paragrafele unui document XHTML. Indicaie. Adugai secvena XHTML: <p> </p> <p> </p>
Remarci: 9 Secvena XHTML <p></p> <p></p> nu este ceea ce v trebuie, ntruct navigatorul nu poate interpreta dect un singur paragraf vid o dat. 9 Cea mai bun soluie o reprezint totui utilizarea foilor de stiluri (atributele margin sau padding).
HTML
Schimbai alinierea unui paragraf
Pentru a asigura o mai buna structurare a textului dumneavoastr, definii poziia paragrafelor n pagin. Iat cum centrai primul paragraf,cum aliniai la dreapta , la stnga cel de-al doilea respectiv al treilea paragraf.
122
1. Introducei n tag-ul <P> al paragrafului pe care dorii s-l aliniai atributul align=? nlocuind semnul ntrebrii (?) prin tipul de aliniere dorit: center pentru centrarea unui paragraf, right pentru alinierea la dreapta, left pentru aliniere la stnga a paragrafului.
Figura 4.5 Remarci: 9 Tag-ul <P> admite atribute. 9 Pentru centrarea unui paragraf putei folosi i tag-ul <CENTER>. 9 <CENTER> este definit n HTML 4.0 ca un sinonim al tag-ului <DIV align=center>. 9 Evitai centrarea paragrafelor lungi ntruct riscai s fie citite cu dificultate. 9 Utilizarea atributului align n tag-ul <P> reprezint cel mai bun mod de aliniere a unui paragraf. 9 Utilizai <P align=justify> pentru alinierea ambelor margini ale unui paragraf.
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai pagina Web ntr-un browser.
123
Figura 4.6
Remarc: Navigatorul aliniaz paragrafele n mod diferit.
XHTML
Schimbai alinierea unui paragraf
Iat cum centrai primul paragraf al aplicaiei, cum aliniai la dreapta cel de-al doilea paragraf, cum aliniai la stnga 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. n figura 4.7 se prezint documentul XHTML generat.
124
Figura 4.7
Figura 4.8
125
Text-align i align
Atributul HTML align pe care l-am folosit pn n prezent (pentru a nu v zpci!) este complet depit! n XHTML utilizai mai degrab (n tag-ul <p>) style=text-align:center n loc de align=center. Procedai la fel i pentru celelalte valori ale atributului align: left, right, justify. Iat cum centrai primul paragraf al aplicaiei, cum aliniai la dreapta cel de-al doilea paragraf, cum aliniai la stnga cel de-al treilea paragraf utiliznd atributul style. 1. Introducei n tag-ul de nceput <p>, atributul style cu valoarea text-align: center (figura 4.9).
Figura 4.9
2. Introducei <p style=text-align:right> (figura 4.10).
Figura 4.10
126
3. Introducei linia de cod <p style=text-align:left> (figura 4.11).
Figura 4.11
4. Validai documentul HTML 4 strict cu aplicaia validator. 5. Inserai codul XHTML care afieaz icon-ul de conformitate . 6. Vizualizai pagina Web ntr-un browser (figura 4.12).
Figura 4.12
127
Remarci: 9 Atributul style permite adugarea instruciunilor de stil CSS tag-urilor HTML. Este forma cea mai simpl a extensiei HTML CSS (foi de stiluri n cascad). 9 n XHTML definii alinierea cu ajutorul atributului CSS text-align i nu utilizai atributul HTML align. 9 n XHTML tag-urile i atributele trebuie scrise cu minuscule. Valorile se vor plasa ntre ghilimele.
Aplicaie Vizualizai ntr-un browser urmtorul document XHTML (figura 4.13).
Figura 4.13 n figura 4.14 este ilustrat rezultatul pe care trebuie s-l obinei.
128
Figura 4.14
Remarci:
9 Pentru a manipula blocuri mari de date, descompunei-le n seciuni cu

ajutorul tag-urilor <div> </div>.
9 Coninutul paginii este afiat centrat, cu fontul Verdana:

<div style=font-family:Verdana, Arial; color:red; text-align:center> Atunci cnd fontul Verdana nu este disponibil, navigatorul l nlocuiete cu Arial. 9 Paragrafele se afieaz cu 8, 10 respectiv 12 puncte. <p style=font-size:8 pt> <p style=font-size:10 pt> <p style=font-size:12 pt>
9 Atributul CSS font-size semnific dimensiunea fontului. 9 Atributul CSS color precizeaz culoarea fontului.
HTML
ncepei o nou linie
Aa cum ntr-un fiier HTML trebuie s specificai nceputul fiecrui paragraf, tot aa cum trebuie s specificai i nceputul fiecrei noi linii. Iat cum forai trecerea la un rnd nou a frazei LUMINA BLND este puternic i nu doar att! din cel de-al treilea paragraf al paginii. 1. Introducei tag-ul <BR> la nceputul liniei menionate.
129
Figura 4.15 Remarci: 9 Ca orice tag HTML, <BR> poate aprea oriunde n text. 9 <BR> foreaz trecerea la o nou linie n cadrul paragrafului curent, dar nu ncepe un nou paragraf. 9 <BR> i <br>, <bR> i <Br> reprezint acelai lucru.
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai pagina Web ntr-un browser (figura 4.16).
Figura 4.16
Remarc: Browser-ul afieaz fraza menionat pe o nou linie.
130
XHTML
coninut) <br /> (break).
ncepei o linie nou
Pentru a insera un salt de linie n XHTML utilizai tag-ul vid (fr
Remarc. Tag-ul <br/> nu nglobeaz date (nu are coninut) precum <p> </p>. El indic amplasarea saltului de linie, ceea ce explic de ce se termin cu o bar oblic precedat , atenie (!), de un spaiu.
Iat cum forai trecerea la o nou linie a frazei LUMINA BLND este puternic i nu doar att 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. n figura 4.17 se prezint documentul XHTML generat.
Figura 4.17
131
Figura 4.18
HTML
Indentai un paragraf
Pentru a mri lizibilitatea textului, indentai, dup caz paragrafele. Iat cum indentm cel de-al doilea paragraf al textului Felicitri pentru rbdarea de a ne fi descoperit!. 1. Plasai paragraful menionat ntre tag-urile <BLOCKQUOTE> i </BLOCKQUOTE> (figura 4.19).
Figura 4.19
132
Figura 4.20 Remarci: 9 Navigatorul afieaz decalat cel de-al doilea paragraf. Nu toate navigatoarele trateaz n acelai mod <BLOCKQUOTE>, n special din punct de vedere al stilului caracterelor (italice/normale).
XHTML
Indentai un paragraf
Pentru a indenta un paragraf n XHTML, aplicai formatul logic <blockquote> </blockquote>. Iat cum indentm cel de-al doilea paragraf Felicitri pentru rbdarea 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. n figura 4.21 se prezint documentul XHTML generat.
133
Figura 4.21
Figura 4.22
HTML
Definii un spaiu naintea unui paragraf
134
Putei stabili singuri spaiul ntre paragrafele paginii dumneavoastr cu scopul de a mri lizibilitatea textului. Iat cum procedai pentru a lsa un spaiu de 25 de pixeli ntre paragrafele aplicaiei noastre. 1. Tastai <SPACER la nceputul primului paragraf (figura 4.23).
Figura 4.23
2. Tastai, n continuare atributul type=vertical (figura 4.24).
Figura 4.24
3. Tastai n continuare size =?> nlocuind semnul ntrebrii (?) prin mrimea n pixeli a indentrii (figura 4.25).
135
Figura 4.25
4. Validai documentul HTML 4 strict cu aplicaia validator. 5. Inserai codul HTML care afieaz icon-ul de conformitate . 6. Vizualizai pagina Web n Netscape Communicator (figura 4.26).
Figura 4.26
Remarci: 9 Numai Netscape Communicator recunoate tag-ul <SPACER>.
136
9 Pentru a defini un spaiu naintea unui paragraf cu Internet Explorer utilizai foile de stiluri.
HTML
Comunicai browser-ului s afieze liniile vide, spaiile suplimentare etc.
Dup cum ai putut constata, browser-ele Web ignor n general liniile vide i spaiile suplimentare dintr-un text. Iat cum remediai acest inconvenient. Etapele urmtoare explic procedura prin care ntre cuvintele ce aparin primei fraze din pagin (Bine ai venit!) lsm opt spaii. 1. Plasai textul (cu opt spaii 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> pstreaz formatarea original a documentului. Tag-ul <PRE> admite atribute (WIDTH definete limea textului formatat).
HTML
Creai 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 puin importante. Totui, nu folosii mai mult de trei nivele pe pagin. Iat cum punem n eviden ase nivele de titlu pentru paragraful
centrat: Bine ai venit!.

1. Plasai 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 Putei utiliza cel mult 6 nivele de titlu: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. 9 Utilizai <H1>, <H2>, <H3> pentru titluri i paragrafe. 9 Utilizai <H4> pentru textul principal. 9 Utilizai <H5> i <H6> pentru adres, copyright etc. 9 Dimensiunea cea mai mic a titlurilor se obine cu <H6>. 9 Dimensiunea cea mai mare a titlurilor se obine cu <H1>. 9 Pentru alinierea titlurilor, introducei n tag-ul <H> atributul align=?, nlocuind semnul ntrebrii (?) cu una din valorile: right, left, justify, center, care nu mai necesit comentarii.
139
Figura 4.30
Remarc. Navigatorul afieaz centrat titlurile cu nivelul indicat (1-6).
XHTML
Creai un titlu
XHTML recunoate 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 ai venit!, pornind de la documentul HTML h.html creat,

pe care apoi l convertim n XHTML cu programul utilitar HTML TIDY. n figura 4.31 se prezint documentul XHTML generat.
140
Figura 4.31
Remarc. n loc de align=center (atribut HTML) XHTML-ul utilizeaz style=textalign:center (vezi tag-urile <h1><h6>).
141
Figura 4.32
HTML
Creai liste. Aplicaii
Folosii (X)HTML pentru a crea urmtoarele tipuri de liste:

9 liste cu simboluri (liste neordonate); 9 liste numerotate (liste ordonate); 9 liste de definiii.
Creai o list cu simboluri

Listele HTML cu simboluri (liste neordonate) conin elemente (item-uri) precedate de un marcator (punct negru). Iat cum crem o list cu simboluri pentru serviciile oferite de firma LUMINA BLND: turism, training, service PC-uri.
142
1. Introducei tag-ul <UL> la nceputul listei (figura 4.33).
Figura 4.33
2. Introducei tag-ul <LI> naintea fiecrui element al listei (figura 4.34).
Figura 4.34
143
3. Introducei tag-ul </UL> la finele listei (figura 4.35).
Figura 4.35
Remarci:
9 9 9 9 9
<UL> creeaz o list cu simboluri. <LI> definete un articol din list. </LI> nu este obligatoriu. <UL> admite atributul TYPE, care stabilete stilul marcajului din list. <UL> trebuie s conin cel puin un element.
4. Validai documentul HTML 4 strict cu aplicaia validator. 5. Inserai codul HTML care afieaz icon-ul de conformitate . 6. Afiai pagina Web ntr-un browser (figura 4.36).
.
Figura 4.36
144
Remarci: 9 Browser-ul afieaz elementele listei cu un bumb n fa. 9 Dac doriii ca elementele s se afieze diferit fa de restul textului utilizai n tag-ul <UL> atributul compact.
Aplicaie Marcai elementele listei neordonate create anterior cu un ptrat (square). Iat cum schimbai stilul marcajului. 1. Introducei n tag-ul <UL> atributul type=? nlocuind semnul ntrebrii (?) cu una din valorile: circle pentru un mic cerc negru, disc pentru un mic cerc alb, square pentru un mic ptrat negru.
Figura 4.37 2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul . 4. Afiai pagina Web ntr-un browser. HTML care afieaz icon-ul de conformitate
145
.
Figura 4.38
Remarc. Browser-ul afieaz lista cu stilul specificat (ptrat).
Creai o list numerotat

Listele HTML numerotate (liste ordonate) conin elemente (item-uri) care se afieaz ntr-o ordine precis. Iat cum crem o list numerotat (1, 2, 3 etc.) pentru serviciile oferite de firma LUMINA BLND: turism, training, service PC-uri. 1. Introducei tag-ul <OL> la nceputul listei (figura 4.39).
.
Figura 4.39
146
2. Introducei tag-ul <LI> naintea fiecrui element al listei (figura 4.40).
Figura 4.40
3. Introducei tag-ul </OL> la finele listei (figura 4.41).
Figura 4.41
147
Remarci: 9 9 9 9 9 <OL> creeaz o list numerotat. <LI> depinde de tipul listei: cu simboluri/numerotat. <OL> admite atribute (type i start). </LI> nu este obligatoriu. Browser-ul plaseaz n mod automat n faa fiecrui element al listei un numr de ordine ntr-o secven cresctoare. 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 afieaz elementele listei cu 1, 2, 3, n fa. 9 Dac dorii ca elemente listei s se afieze diferit fa de restul textului, utilizai n tag-ul <OL> atributul compact.
Aplicaii Schimbai stilul de numerotare din lista ordonat creat anterior cu o numerotare cifre romane minuscule. 1. Introducei n tag-ul <OL> atributul type=? nlocuind semnul ntrebrii (?) 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 2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul . 4. Afiai pagina Web ntr-un browser. HTML care afieaz icon-ul de conformitate
.
Figura 4.44
149
Schimbai numrul de ordine de start (1) cu 7 n lista numerotat anterior. 1. Introducei n tag-ul <OL> atributul start=? nlocuind semnul de ntrebare (?) cu numrul de start dorit (7, n aplicaia noastr).
Figura 4.45 2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul . 4. Afiai pagina Web ntr-un browser (figura 4.46). HTML care afieaz icon-ul de conformitate
.
Figura 4.46
Remarc. n navigator lista numerotat ncepe cu 7.
150
Schimbai stilul de numerotare din lista ordonat creat anterior astfel nct fiecare item s fie marcat printr-o liter majuscul: A, B, C etc. 1. Introducei 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 2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate
.
4. Afiai pagina Web ntr-un browser (figura 4.48).
.
Figura 4.48
Remarc. n navigator fiecare element al listei este precedat de o majuscul (A,B,C).
151
Creai o list de definiii
O list de definiii conine unul sau mai muli termeni de definit ct i definiia acestora. Altfel spus, lista de definiii este un glosar de termeni. Iat cum crem o list de definiii (Glosar de termeni) pentru o parte din termenii folosii n acest capitol: list cu simboluri i list numerotat. 1. Introducei la nceputul listei tag-ul <DL> (figura 4.49).
Figura 4.49
2. Introducei naintea cuvintelor de definit (list cu simboluri, list numerotat) tag-ul <DT> (figura 4.50).
Figura 4.50
152
3. Introducei naintea definiiilor tag-ul <DD> (figura 4.51).
Figura 4.51
4. Introducei tag-ul </DL> la finele listei (figura 4.52).
Figura 4.52
153
Remarci: 9 <DL> creeaz o list de definiii. 9 <DL> trebuie s conin cel puin un element <DT> sau <DD> n orice ordine. 9 <DD> poate conine tag-uri la nivel de bloc, ca de exemplu tag-ul <P>.
Figura 4.53 Remarc. Navigatorul afieaz lista de definiii (indentat!).
Creai liste imbricate

Listele imbricate sau listele nested (cuib) permit dezvoltarea unui element din lista principal n subliste .a.m.d. Iat cum crem liste imbricate care conin structura iniial a crii pe care o lecturai: Partea nti cu capitolele 1 i 2; Partea a doua cu capitolele 3, 4 i 5; Partea a treia cu capitolele 6, 7, 8.
154
1. Introducei 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. Introducei <LI> naintea fiecrui item al listei principale (figura 4.55).
Figura 4.55
155
3. Introducei la finele listei principale tag-ul </OL> (figura 4.56).
Figura 4.56
Figura 4.57
156
Remarc. n navigator se afieaz lista principal.
7. Sub fiecare element al listei principale introducei tag-ul <OL type=?> nlocuind semnul ntrebrii (?) cu tipul de numerotare (A, B, C), figura 4.58.
Figura 4.58
8. Introducei tag-ul <LI> naintea tuturor item-urilor din subliste (figura 4.59).
157
Figura 4.59
9. Introducei la finele sublistelor tag-ul </OL> (figura 4.60).
158
Figura 4.60
159
Figura 4.61
Remarc. Browser-ul afieaz listele imbricate (indentate!) n cadrul listelor principale.
XHTML
Creai liste. Aplicaii
XHTML furnizeaz tag-uri, uor de utilizat pentru crearea listelor. Pe de alt parte, foile de stiluri CSS permit crearea listelor personalizate i a listelor precedate de simboluri grafice.
Creai 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
instruciuni de stil listei cu simboluri, este obligatoriu s utilizm tag-ul de nchidere </li> care n HTML este facultativ. Iat cum crem n XHTML o list cu simboluri pentru serviciile oferite de firma LUMINA BLND: turism, trening, service PC-uri pornind de la documentul HTML ul.html creat, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 4.62 se prezint documentul XHTML generat.
Figura 4.62
Inserai codul XHTML care afieaz icon-ul de conformitate Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n figura 4.63.
161
.
Figura 4.63
Formatai listele cu simboluri

Utilizai stilurile pentru formatarea listelor cu simboluri. Putei defini proprietile n mod diferit, utiliznd urmtoarele atribute: 9 list-style-type; 9 list-style-position; 9 list-style-image; 9 list-style.
Aplicaie Utilizai stilul list-style-image pentru a nlocui marcajele (dintr-o list cu simboluri) cu sigla societii LUMINA BLND.
Remarc. Vei nelege mai bine aceast aplicaie dup ce vei parcurge Conversaia referitoare la foile de stiluri (Conversaia 6). Succes!
n figura 4.64 se prezint documentul XHTML n care au fost evideniate liniile al cror coninut l vom explica puin mai trziu.
162
Figura 4.64
n figura 4.65 se prezint rezultatul vizualizrii paginii n Microsoft Internet Explorer.
163
Figura 4.65
Creai 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 instruciuni de stil listei numerotate, este obligatoriu s utilizm tag-ul de nchidere </li>, care n HTML este facultativ. Iat cum crem n XHTML o list numerotat (1, 2, 3) pentru serviciile oferite de firma LUMINA BLND: 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
n figura 4.66 se prezint documentul XHTML generat.
Figura 4.66
.
Figura 4.67
165
Formatai listele cu simboluri
Putei folosi foile de stiluri pentru formatarea listelor ordonate. CSS nu face deosebire ntre listele numerotate i listele cu simboluri. Putei defini proprietile n mod diferit, utiliznd atributele: list-style, list-styletype, list-style-position, list-style-image.
Aplicaie Utilizai foile de stiluri pentru a crea o list numerotat (ordonat) cu cifre romane mici (lower-roman).
Remarc. Vei nelege mai bine aceast aplicaie dup ce vei parcurge Conversaia 6 referitoare la foile de stiluri.
n figura 4.68 se prezint documentul XHTML n care au fost evideniate liniile al cror coninut l vom explica puin mai trziu.
Figura 4.68
166
Rezultatul vizualizrii documentului n Microsoft Internet Explorer este prezentat n figura 4.69.
Figura 4.69
Creai o list de definiii

n XHTML o list de definiii este delimitat de tag-urile <dl> </dl>. Inserai fiecare cuvnt cheie (cuvnt de definit) ntre tag-urile <dt> </dt> iar descrierea lor ntre tag-urilor <dd> </dd>. Indentai coninutul listei pentru a mri gradul de lizibilitate (figura 4.70).
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd>
Figura 4.70 </dl>
Iat cum crem n XHTML o list cu definiii pentru o parte din termenii folosii 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. n figura 4.71 se prezint documentul XHTML generat.
167
Figura 4.71
Figura 4.72
168
Remarci: 9 Utilizai stiluri pentru formatarea listelor de definiii. Creai stiluri pentru elementele <dl> <dd> i <dt>. 9 Creai un stil pentru elementul <dd> utiliznd atributele margin-top i margin-bottom. 9 Utilizai 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{}
Creai liste imbricate

O singur list nu produce ntotdeauna rezultatul scontat. n XHTML putei crea liste pe mai multe nivele, imbricnd dou liste, cea de-a doua list n prima (figura 4.73) .a.m.d.
<ol> <li></li> <ol> <li></li> </ol> Figura 4.73 </ol>
Iat cum crem n XHTML liste imbricate care conin structura iniial a crii pe care o lecturai: Partea nti 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 programul utilitar HTML-TIDY.
169
Figura 4.74
#_______________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________
170
Figura 4.75
Remarci:
9 Definii indentri profesioniste utiliznd foile de stiluri. 9 Construii clase pentru intrrile listelor i utilizai atributul CSS left-margin care
permite definirea ntr-un mod simplu a indentrii spre dreapta.
9 Suprimai tag-urile <ul> </ul> ale celui de-al doilea nivel i atribuirea tipului
(primul nivel). Inserai urmtoarele linii n zona style a header-ului: li{list-style-type:circle} li{list-style-type:square; margin-left:lem}
(X)HTML
Testai-v cunotinele
Tem
1. Descriei pe scurt procedura (X)HTML pentru crearea paragrafelor. 2. Care este semnificaia tag-urilor: <h1> <h6>? 3. Ce tipuri de liste putei crea cu (X)HTML?
171
4. Precizai care este codul surs HTML care a stat la baza crerii paginii Web din figura 4.76.
.
Figura 4.76 5. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web din figura 4.77.
.
Figura 4.77
Vizitai site-urile
9 www.efuse.com 9 www.ebookers.com 9 info.med.yale.edu/caim/manual
Conversaia 5
Inserai i personalizai o linie orizontal cu HTML 4 i XHTML

f f f f f
HTML 4, XHTML Inserai o linie orizontal HTML 4, XHTML Colorai o linie orizontal HTML 4, XHTML Definii lungimea i nlimea unei linii HTML 4, XHTML Aliniai o linie orizontal (X)HTML Tem
HTML
Inserai o linie orizontal
Pentru a deosebi vizual dou zone ale unei pagini Web se recomand inserarea unei linii orizontale. Iat cum separm printr-o linie orizontal, umbrit sau nu primele dou paragrafe ale paginii Web. 1. Introducei tag-ul <HR> ntre cele dou paragrafe (figura 5.1).
174
Figura 5.1 Remarc. Implicit, linia orizontal este puin umbrit!
2. Introducei n tag-ul <HR> atributul noshade pentru a suprima efectul umbririi (figura 5.2).
Figura 5.2
175
4. Inserai codul HTML care afieaz icon-ul de conformitate . 5. Vizualizai pagina Web ntr-un browser (figura 5.3).
Figura 5.3
Remarc. Navigatorul afieaz o linie orizontal umbrit sau nu n locurile indicate.
XHTML
Inserai o linie orizontal
Pentru a insera o linie (rigl) orizontal ntr-un document XHTML, care se ntinde pe spaiul orizontal disponibil utilizai tag-ul vid <hr />.
Remarci: 9 n XHTML <hr> este utilizat fr tag-ul </hr>. Pentru a v conforma cu noile norme XML i XHTML, inserai un / n tag-ul <hr />. 9 Ca i n cazul tag-ului <br /> normele XHTML nu prevd prezena unui spaiu nainte de bara oblic /. Lsai acest spaiu nainte de bara oblic /. Totui lsai acest spaiu dac dorii s asigurai compatibilitatea cu normele HTML. De exemplu, <hr/> nu este compatibil cu nici o versiune HTML. Spaiul este interpretat ca un separator. tiu, este puin enervant dar trebuie s v obinuii s fii meticuloi!
176
Iat cum separm 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. n figura 5.4 se prezint documentul XHTML generat.
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)
Inserai codul XHTML care afieaz icon-ul de conformitate figura 5.5.
Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n
177
Figura 5.5
HTML
Colorai o linie orizontal
n mod implicit, linia orizontal se afieaz n gri. Dac dorii, putei 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 studiai n aceast conversaie 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 Conversaia 6). 9 De ce nvm o metod depit? ntruct un numr deloc neglijabil de utilizatori posed nc navigatoare Web care nu permit utilizarea foilor de stiluri.
Iat cum aplicm o culoare (roie i albastr) liniilor orizontale care separ cele dou paragrafe ale paginii, utiliznd vechea metod, care n prezent este descurajat de W3C. 1. Introducei n tag-ul <HR> atributul color=? nlocuind semnul ntrebrii (?) 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 rou respectiv albastru. 9 Atunci cnd o linie este colorat, efectul de umbr dispare.
XHTML
Colorai o linie orizontal
Pentru a colora o linie orizontal n XHTML putei utiliza att metoda veche, care n prezent este descurajat oficial ct i metoda nou foile de stiluri (vezi Conversaia 6) ncurajat n prezent de W3C pentru avantajele pe care le ofer. Iat cum aplicm o culoare (albastr i rou) 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. n figura 5.8 se prezint documentul XHTML generat.
Figura 5.8
180
Figura 5.9
Iat cum aplicm o culoare (albastru i rou) liniilor orizontale care separ cele dou paragrafe ale paginii, utiliznd 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 aplicaia validator. Pentru afiarea 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
182
HTML
Definii lungimea i nlimea unei linii orizontale
n mod implicit, linia orizontal se afieaz pe toat lungimea paginii. Desigur, dumneavoastr putei decide i altfel! Iat cum definim n procente (75%) lungimea primei linii orizontale care separ cele dou paragrafe i n pixeli - lungimea (25) i nlimea (10) celei de-a doua linii orizontale, utiliznd metoda veche, care este descurajat de W3C. 1. Introducei n tag-ul <HR> atributul width=? pentru a defini lungimea liniei nlocuind semnul ntrebrii (?) prin dimensiunea n procente (75) sau n pixeli (figura 5.12).
Figura 5.12
2. Introducei n tag-ul <HR> atributul size=? pentru a defini grosimea liniei, nlocuind semnul ntrebrii (?) cu 10 i n continuare, atributul width=? pentru a defini lungimea liniei, nlocuind semnul ntrebrii (?) cu 25 (figura 5.13).
183
! </P>
Figura 5.13
Figura 5.14 Remarc. n navigator liniile se afieaz cu lungimea i grosimea specificate.
184
XHTML
Definii lungimea i nlimea unei linii orizontale
Pentru a defini lungimea i nlimea unei linii orizontale n XHTML putei utiliza att metoda veche care n prezent este descurajat oficial ct i metoda nou foile de stiluri (vezi Conversaia 6) ncurajat n prezent de W3C pentru avantajele pe care le ofer. Iat cum definim n procente (75%) lungimea primei linii orizontale care separ cele dou paragrafe i n pixeli lungimea (25) i nlimea (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! n figura 5.15 se prezint documentul XHTML generat.
Figura 5.15
185
Figura 5.16
Iat cum definim n procente (75%) lungimea primei linii orizontale care separ cele dou paragrafe i n pixeli lungimea (25) i nlimea (10) celei de-a doua linii orizontale, utiliznd noua metod recomandat oficial de W3C foile de stiluri. n figura 5.17 este prezentat documentul XHTML creat manual, n care s-au definit clasele hr.blue1 i hr.red1. Documentul a fost validat cu aplicaia validator. Pentru afiarea icon-ului de conformitate s-a inserat codul XHTML corespunztor.
186
Figura 5.17
Figura 5.18
187
HTML
Aliniai 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 indicm modul de aliniere (stnga, dreapta, centrat) al acesteia. Iat cum aliniem, la dreapta, linia orizontal care separ primele dou paragrafe ale paginii i cum centrm pe o lungime de 75 de pixeli linia care separ cel de-al doilea paragraf de restul textului, utiliznd metoda veche, care n prezent este descurajat oficial de W3C. 1. Introducei n tag-ul <HR> atributul align=? nlocuind semnul ntrebrii (?) 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 studiai n aceast conversaie reprezint vechea metod, care n prezent este descurajat oficial de W3C. Foile de stiluri reprezint noua metod care este ncurajat oficial de W3C (vezi Conversaia 6). 9 De ce nvm o metod depit? ntruct un numr deloc neglijabil de utilizatori posed nc navigatoare Web care nu permit utilizarea foilor de stiluri.
188
2. Introducei n tag-ul <HR> atributul align=center pentru a centra cea de-a doua linie orizontal (figura 5.20).
!</P>
Figura 5.20
Remarc. Observai diferena ntre width=75% (din limea 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
Aliniai o linie orizontal
Pentru a alinia o linie orizontal n XHTML putei utiliza att metoda veche, care n prezent este descurajat oficial ct i metoda nou foile de stiluri (vezi Conversaia 6) ncurajat n prezent de W3C pentru avantajele pe care le ofer. Iat cum aliniem, la dreapta, linia orizontal care separ primele dou paragrafe ale paginii i cum centrm pe o lungime de 75 de pixeli linia 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. n figura 5.22 se prezint documentul XHTML generat.
Figura 5.22
190
Figura 5.23
Iat cum aliniem, la dreapta, linia orizontal care separ primele dou paragrafe ale paginii i cum centrm pe o lungime de 75 de pixeli linia care separ cel de-al doilea paragraf de restul textului, utiliznd noua metod recomandat oficial de W3C foile de stiluri. n figura 5.24 este prezentat documentul XHTML creat manual, n care s-au definit clasele hr.red2 i hr.red3. Documentul a fost validat cu aplicaia validator. Pentru afiarea icon-ului de conformitate s-a inserat codul XHTML corespunztor.
191
Figura 5.24
Figura 5.25
192
(X)HTML
Testai-v cunotinele
Tem
1. Precizai care este semnificaia tag-urilor: <HR> i <hr />. 2. De ce inserm ntr-un document (X)HTML una sau mai multe linii orizontale? 3. Cum formatai o linie orizontal ntr-un document (X)HTML? 4. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web din figura 5.26.
Figura 5.26
Vizitai site-urile
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
Conversaia 6
Creai i utilizai foi de stiluri cu HTML 4 i XHTML

f f f f f f f f f f f f f f f
(X)HTML (X)HTML (X)HTML HTML 4, XHTML HTML 4, XHTML HTML 4, XHTML HTML, XHTML XHTML XHTML XHTML XHTML XHTML XHTML XHTML (X)HTML
Foile de stiluri n cascad CSS1, CSS2, CSS3 Creai stiluri CSS Categorii de proprieti de stiluri Creai i aplicai o foaie de stiluri (incorporate) intern Creai i aplicai o clas Incorporai o foaie de stiluri ntr-un document Creai i aplicai o foaie de stiluri extern Controlai culorile legturilor (link-urilor) ntr-un document Proprietile de bordur ale unei zone Proprietile foilor de stiluri sonore Proprietile de clasificare Proprietile documentelor imprimate Proprietile de poziionare a unui element Viitorul foilor de stiluri n XHTML 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, uor de formatare a documentelor (X)HTML.
194
Foile de stiluri constituie o etap capital ctre separarea coninutului 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 gndim c XHTML a nlocuit o parte din elementele i atributele de formatare HTML (elementul <font> i atributul align, de exemplu) depite cu foile de stiluri. n afar de controlul ridicat privind vizualizarea documentelor de ctre vizitatorii dumneavoastr, foile de stiluri permit i o gestiune mai uoar a documentelor (X)HTML atunci cnd acestea conin elemente de formatare. Cnd introducei 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, vei modifica simplu definiia stilului ntr-un singur loc, foaia de stiluri, iar ea este aplicat pentru toate paragrafele n documentul (X)HTML. Fr dezordine, fr stres! Totul este perfect! n sfrit, 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 cteva elemente CSS2.
Foile de stiluri CSS1 (Cascading Style Sheets Level 1) au aprut n anul 1996 ca o recomandare a Consoriului W3C (recomandarea a fost revizuit n ianuarie 1999). Caracteristicile (proprietile) stilului CSS1 cuprind: fonturi, aliniere, mrime, culoare, margini, borduri etc.
Remarc. Recomandarea W3C CSS1 este disponibil pe site-ul www.W3.org/TR/RECCSS1.
Foile de stiluri CSS2 (Cascading Style Sheets Level 2) au aprut n luna mai 1998 ca o recomandare a consoriului W3C. Aceast recomandare are la baz caracteristicile foilor de stiluri CSS1, la care se adaug noi proprieti, dup cum
195
urmeaz: tipuri de media (foi de stiluri sonore), poziionare (absolut, relativ i fix), fonturi telearjabile, 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/RECCSS2.
Foile de stiluri CSS3 (Cascading Style Sheets Level 3) sunt nc n curs de dezvoltare bazate pe concepia de module individuale. Modulele existente n foile de stiluri CSS3 cuprind proprieti de accesibilitate mai avansate, un suport multimedia mbuntit, capaciti dinamice i interactive superioare.
Remarc. Pentru mai multe informaii privind toate tipurile de foi de stiluri n limbaj XSL (Extensible Style Sheet Language), vizitai site-ul www.W3.org/Style.
(X)HTML
Creai stiluri CSS
Exist mai multe posibiliti 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 recomandm pentru a fi utilizat ct mai mult posibil. 9 n linie (inline), pentru un element particular al documentului. n acest caz stilul definit cu atributul style nu se aplic dect local, elementului precizat. Metoda numit i stiluri in-line nu trebuie s fie utilizat dect n caz de necesitate, avnd n vedere aciunea sa limitat, pentru un singur element. 9 ntr-un document extern documentului (X)HTML, care va fi salvat cu extensia .CSS. Acest fiier va conine toate definiiile de stil dorite i va fi legat la un document (X)HTML corespunztor prin elementul <LINK> plasat n header-ul documentului. Metoda cunoscut i sub numele de stiluri definite n fiiere externe prezint avantajul c poate utiliza aceeai foaie de stiluri pentru mai multe documente (X)HTML diferite, fr a fi nevoii de a le recopia n fiecare dintre ele. 9 ntr-un element <SPAN>, el nsui inclus ntr-un alt element.
196
Reguli generale
nainte de a aprofunda foile de stiluri (dedicate) interne privii cu atenie figura 6.1 care conine un eantion de cod XHTML al unei foi de stiluri.
Figura 6.1 Diferite zone ale foii de stiluri au funciuni proprii, dup cum urmeaz: 9 Blocul de stil include elementele de stil cu definiiile (regulile) de stil i tag-ul de comentarii (figura 6.2).
Figura 6.2 9 Selectorii sunt elemente (X)HTML. Selectorii definesc tag-ul cruia 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 Declaraiile sunt proprieti ale elementelor (X)HTML (culoarea, alinierile, font-ul etc.). Declaraiile sunt alctuite din dou pri: o proprietate i o valoare separate prin punct i virgul (figura 6.4). Combinaia proprietate/valoare este plasat ntre acolade ({}).
Figura 6.4 9 Clasele specific o definiie suplimentar a stilului asociat cu o anume apariie 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 fr a afecta un element anume. De
exemplu, stilul blanc. {background color: blue; color: white} creeaz

stilul identificat prin numele de clas blanc, care definete un fond bleu i un text alb. Pentru a o aplica unui element <P>, vom scrie: <P class=blanc> Viaa merge nainte! </P> textul urmnd s se afieze 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.rou {background color: green; color: red}
creeaz un stil particular (fond verde i text rou) ce se aplic paragrafelor cu codul: <P class= rou> Afar ninge linitit! </P>. 9 Pentru a defini acelai stil pentru mai multe elemente (X)HTML putem regrupa elementele indicnd o singur declaraie. De exemplu, H1,
H3, H5 {color: yellow;} permite afiarea coninutului titlurilor de nivel

1, 3 i 5 n culoare galben.
Reguli de prioritate acordate stilurilor

Dup cum ai 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 aprea conflicte. De exemplu, o foaie de stiluri extern specific culoarea roie pentru tot textul documentului, iar stilul incorporat precizeaz culoarea bleu pentru paragrafe. Ce face navigatorul n acest caz? Rspunsul 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 pn la cel mai sus este: 3. Foaia de stiluri extern; 2. Stilurile incorporate; 1. Stilurile in-line.
199
(X)HTML
Categorii de proprieti de stiluri
O definiie de stil sau regul de stil precizeaz caracteristicile de formatare. Putei alege oricare din cele opt categorii de proprieti de formatare, pe care le prezentm n continuare: 1. Proprietile fontului de caractere precizeaz formatarea la nivelul caracterelor (in-line) precum stilul de caractere. Dac fonturile pe care le specificai nu exist pe maina utilizatorului, navigatorul va afia textul cu un font disponibil. Pentru a fi siguri c unul din fonturile dumneavoastr preferate vor fi utilizate, selectai mai multe familii de fonturi i adugai mereu o familie generic de fonturi.
Remarc. Cele mai utilizate proprieti (X)HTML ale fontului de caractere sunt: font, font-family, fontsize, font-style, font-variant, font-weight.
Proprietile fontului de caractere sunt explicate n aceast conversaie. 2. Proprietile de text precizeaz caracteristicile de afiare pentru text precum alinierea sau spaierea caracterelor.
Remarc. Cele mai utilizate proprieti (X)HTML de text sunt: letterspacing, lineheight, textalign, textdecoration, textindent, texttransform, verticalalign, wordspacing.
Proprietile de text sunt explicate n aceast conversaie. 3. Proprietile de zon precizeaz caracteristicile pentru seciunile de text la nivel de paragraf.
Remarc. Cele mai utilizate proprieti (X)HTML de zon sunt: border, bordercolor, borderstyle, borderwidth, clear, float, height, margin, marginbottom, marginleft, marginright, margintop, width.
Proprietile de zon sunt explicate n aceast conversaie. 4. Proprietile de culoare i de background precizeaz culoarea, culoarea de background i imaginile la nivel in-line sau bloc.
Remarc. Cele mai utilizate proprieti (X)HTML de culoare i de background sunt: background, backgroundcolor, backgroundimage, backgroundrepeat, color.
200
Proprietile de culoare i de background sunt explicate n aceast conversaie. 5. Proprietile de clasificare precizeaz caracteristicile de afiare a listelor i elementelor (p sau h1) la nivel in-line sau bloc.
Remarc. Cele mai utilizate proprieti (X)HTML de clasificare sunt: display, liststyle image, liststyletype.
Proprietile de clasificare sunt explicate n aceast conversaie. 6. Proprietile foilor de stiluri sonore controleaz prezentarea
documentelor XHTML (numai foile de stiluri CSS2). Proprietile foilor de stiluri sonore sunt explicate n aceast conversaie. 7. Proprietile foilor de stiluri de imprimare controleaz imprimarea documentelor XHTML (numai foile de stiluri CSS2). Proprietile foilor de stiluri de imprimare sunt explicate n aceast conversaie. 8. Proprietile de poziionare controleaz de o manier precis plasarea elementelor ce urmeaz a fi afiate (numai foile de stiluri CSS2). Proprietile de poziionare sunt explicate n aceast conversaie.
HTML
Creai i aplicai o foaie de stiluri (incorporate) intern
Iat cum crem o foaie de stiluri (incorporate) intern, care conine selectorii H1 i P cu proprietile: 9 H1 {textalign:center; fontsize:24pt; color:red}. 9 P {textalign:center; fontsize:18pt; color:blue}. 1. Introducei 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 definiiile stilurilor; reinei utilizarea atributului type, care precizeaz c este vorba de stiluri CSS.
2. Introducei selectorul H1 (figura 6.7).
Figura 6.7
3. Tastai n continuare, { pentru a ncepe definiia caracteristicilor stilului (figura 6.8).
Figura 6.8
202
4. Introducei n continuare caracteristicile stilului: aliniere, mrime i culoare (separate prin punct i virgul) cu ajutorul proprietilor: textalign, fontsize i color (figura 6.9).
Figura 6.9 Remarci: 9 Proprietatea textalign permite alinierea textului la stnga (left), la dreapta (right), n centru (center) sau justify. 9 Proprietatea fontsize 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 (atenie, ele sunt n englez, nu trebuie traduse!); cu coduri RGB (Red, Green Blue) hexazecimale (precedate de simbolul #); cu funcia Rgb(R,G,B) fie un numr zecimal de la 0 la 255 (echivalentul 0 la FF); fie un procent pentru fiecare culoare de baz (de la 0 la 100%).
5. Tastai } pentru a termina declaraiile (figura 6.10).
Figura 6.10
203
6. Repetai paii 2 4 pentru definirea celui de-al doilea selector, P (figura 6.11).
Figura 6.11
7. Introducei tag-ul pereche </STYLE> (figura 6.12).
Figura 6.12
8. Validai documentul HTML 4 Strict cu aplicaia validator.
204
Figura 6.13
Aplicaie Creai o foaie de stiluri (dedicate) intern, utiliznd selectorii H1, H2 i P cu proprietile: 9 9 9 H1 {textalign:center; fontsize:24pt; color:red}. H2 {textalign:left; fontsize:18pt; color:purple}. P {textalign:left; fontsize:14 pt; color:blue}. 1. n zona <HEAD> </HEAD>, ntre tag-urile <STYLE> </STYLE> introducei selectorii H1, H2 i P (figura 6.14).
205
Figura 6.14 2. Validai documentul HTML 4 Strict cu aplicaia validator. 3. Inserai codul . 4. Vizualizai pagina Web ntr-un browser (figura 6.15). HTML care afieaz icon-ul de conformitate
Figura 6.15
206
Remarci: 9 n navigator stilurile definite sunt active. 9 Atunci cnd pagina dumneavoastr conine mult text, utilizarea unei foi de stiluri (incorporate) intern este ideal pentru a-i aplica n mod rapid o formatare omogen.
XHTML
Creai i aplicai o foaie de stiluri (incorporate) intern
Iat cum definim o foaie de stiluri (dedicate) intern, care conine selectorii h1 i p cu proprietile: 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. n figura 6.16 se prezint documentul XHTML generat.
Figura 6.16
207
Figura 6.17
Remarci: 9 Pentru a evita situaii neplcute atunci cnd navigatoarele de generaie mai veche genereaz mesaje de eroare la ntlnirea unei zone <style> </style>, definii zona de stil ca un comentariu prin  (figura 6.18).
Figura 6.18
9 Putei nchide ultima pereche de valori prin punct i virgul: color: blue;, dar este facultativ! 9 Cnd o foaie de stiluri conine caracterele: <, &, ]] i > salvai-le ntr-un fiier extern (nu le definii n header!) 9 Tag-ul <style> include ntotdeauna atributul type=text/css, deci ar trebui s v obinuii s-l adugai!
Aplicaie Creai o foaie de stiluri (dedicate) intern, care conine 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} Aplicai aceast foaie de stiluri unei pagini Web. Nu confundai bgcolor (n HTML) cu background-color (n CSS).
HTML
Creai i aplicai o clas
Pn acum ai vzut cum se aplic foile de stiluri documentelor (X)HTML ntregi. Stilurile unei foi de stiluri pot fi aplicate de asemenea i unor pri specifice documentelor (X)HTML. Aceast categorie este numit o aplicaie de clase de stil. Putei crea o clas, n vederea aplicrii unui stil unic elementelor din pagina dumneavoastr Web marcate printr-un tag particular sau celor care aparin unei categorii speciale de informaie. Iat cum procedm pentru a crea dou clase: avantaje, dezavantaje cu scopul de a le aplica urmtoarelor paragrafe: 9 Avantaje: Se ctig mult timp n activitatea de formatare. 9 Dezavantaje: Nu toate navigatoarele recunosc foile de stil. Cele dou clase au urmtoarele proprieti: 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> introducei P.?{proprietate:valoare;;}, nlocuind semnul ntrebrii (?) cu numele primei clase pe care dorim s-o crem, avantaje (figura 6.19).
209
Figura 6.19
2. Introducei cea de-a doua clas, dezavantaje (figura 6.20).
Figura 6.20
3. Introducei n tag-ul <P> al primului paragraf, atributul CLASS=?, nlocuind semnul ntrebrii (?) cu numele clasei, avantaje (figura 6.21).
210
Figura 6.21
4. Introducei n tag-ul <P> al celui de-al doilea paragraf, atributul CLASS=?, nlocuind semnul ntrebrii (?) cu numele clasei, dezavantaje (figura 6.22).
Figura 6.22
5. Validai documentul HTML 4 Strict cu aplicaia validator. 6. Inserai codul HTML care afieaz icon-ul de conformitate .
211
7. Vizualizai pagina Web ntr-un browser (figura 6.23).
Figura 6.23 Remarc. Navigatorul aplic formatrile specificate elementelor celor dou clase. Aplicaii Creai clasa: P.parag{font-family: Georgia, Times New Roman, Times, Serif; font-size:24pt; font-weight:bold; color: #00FF00}. Aplicai acest stil paragrafului: LUMINA BLNDA este puternic i nu doar att! Creai clasa: paragmod{font-family: Times New Roman, Times, Serif; fontsize: 24pt; color: #0000FF}. Aplicai acest stil modificat paragrafului: LUMINA BLNDA este puternic i nu doar att!.
Remarc. Putei crea de asemenea o clas generic, fr un selector anume. (Exemplu: <STYLE TYPE= text/CSS>. RED {COLOR:#FF0000} </STYLE>). Dac specificai un element cu o clas (P.RED, de exemplu) nu putei utiliza aceast clas dect cu elementele P.
212
XHTML
Creai i aplicai o clas
Iat cum procedm pentru a crea dou clase: avantaje, dezavantaje cu scopul de a le aplica urmtoarele paragrafe: 9 Avantaje: Se ctig 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. n figura 6.24 se prezint documentul XHTML generat.
Figura 6.24
213
Figura 6.25
Remarci: 9 Elementele i atributele XHTML utilizate pentru crearea i aplicarea unei clase sunt: div, span, class=, id=. 9 Utilizai elementele div i span pentru a aplica o clas (clase) anumitor pri ce aparin unui document XHTML. Exemple: <div class= margine> <p> DEMO </p> <blockquote> De ce nu eti ca-n prima zi! <blockquote> </div>; <p> Acesta este un <span class=prima> DEMOSPAN </span> foarte simplu </p>. 9 Putei crea i aplica o clas elementelor unui tabel XHTML. 9 Putei crea i aplica clase generice (vezi HTML 4.01).
Aplicaie Creai clasa principal pentru titlul principal (36 px) al unui document i clasa
secundar pentru sub-titlurile (14 pt) unui document. Atribuii cele dou stiluri
diferite paragrafelor documentului, n funcie de coninutul acestora. n figura 6.26 este prezentat documentul (parial) XHTML creat manual.
214
</head>
Figura 6.26 Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate . Rezultatul vizualizrii paginii
Web n Internet Explorer este ilustrat n figura 6.27.
Figura 6.27
215
HTML
Incorporai o foaie de stiluri ntr-un document
Aceasta este metoda cea mai simpl pe care v-o recomandm pentru asocierea unei foi de stiluri documentelor dumneavoastr (X)HTML. Pentru a ncorpora o foaie de stiluri, utilizai elementul STYLE (cu informaiile de stil corespunztoare) pe care-l plasai ntre tag-urile de nceput i de sfrit ale elementului HEAD.
Definii fontul pentru toat pagina

Putei aplica acelai font textului integral al unei pagini. Iat cum definim stilul body {font-family: arial, helvetica, sans-serif} pentru toat pagina Web, care conine text. 1. n interiorul tag-urilor: <STYLE> ...</STYLE>, introducei 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
2. Validai documentul HTML 4 Strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai pagina Web ntr-un browser (figura 6.29).
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. Aplicaie Afiai H1, H2 cu un tip de font i paragrafele cu alt tip de font. Iat cum afim un text cu diferite fonturi, dar nu mai mult de trei pe pagin. 1. n interiorul tag-urilor <STYLE> ... </STYLE> introducei ?{font-
family:X,Y}, nlocuind semnul ntrebrii (?) cu selectorul cruia dorii s-i aplicai fontul, X-ul cu numele primului font i Y-ul cu numele celui de-al doilea font.
218
Figura 6.30
2. Validai documentul HTML 4 Strict cu aplicaia validator. 3. Inserai codul . 4. Vizualizai pagina Web ntr-un browser (figura 6.31). HTML care afieaz icon-ul de conformitate
219
Figura 6.31
Remarc. n navigator, fiecare tip de text (H1, H2 i paragraf) se afieaz cu primul font. Dac numele de familie al fontului conine un spaiu atunci plasai numele ntre ghilimele, altfel ghilimelele sunt opionale.
Formatai un text cu caractere ngroate (bolduite) sau italice (cursive)

Putei scrie ngroat 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. Introducei 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, introducei n interiorul tag-urilor pereche <STYLE>...</STYLE>, ?{font-style: italic;}, nlocuind semnul ntrebrii (?) cu selectorul corespunztor. Exemplu: H1{font-style: italic}.
!
!
Figura 6.33
Remarc. Navigatorul afieaz cu italice tot textul paginii.
221
Aplicaii Afiai cu bold tot textul paginii. Iat cum scriem ngroat (bolduit) tot textul unei pagini Web. 1. Introducei body{font-weight:bold} n interiorul tag-urilor
<STYLE>...</STYLE> (figura 6.34).
Figura 6.34
Remarc. Pentru a scrie cu caractere ngroate un tip de text particular utilizai ?{fontweight:bold;}, nlocuind semnul ntrebrii (?) cu selectorul corespunztor.
2. Validai documentul HTML 4 Strict cu aplicaia validator. 3. Inserai codul . 4. Vizualizai pagina Web ntr-un browser (figura 6.35). HTML care afieaz icon-ul de conformitate
!
!
Figura 6.35
222
Remarc. Navigatorul afieaz cu caractere ngroate , tot textul paginii.
Anulai formatarea cu bold aplicat ntregului text al paginii din ntreaga pagin. Indicaie. Introducei body{font-weight:normal}.

Ai vzut ct de simplu putem defini tipul de font cu ajutorul foilor de stiluri! Vei vedea n cele ce urmeaz c la fel de simpl este i procedura de definire a dimensiunii fontului. Iat cum aplicm un font (times new roman) de 30 de puncte, ntregului text al paginii dumneavoastr Web. 1. Introducei (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 aceeai dimensiune unui tip de text precis, introducei (n interiorul tag-urilor <STYLE>...</STYLE>) ?{font-size: X pt}, nlocuind semnul ntrebrii (?) cu selectorul corespunztor i X-ul cu dimensiunea dorit.
223
Figura 6.37 Remarc. n navigator tot textul se afieaz cu dimensiunea specificat (30 puncte).
Definii dimensiunea fontului cu ajutorul cuvintelor cheie

Pentru definirea dimensiunii fontului, putei utiliza, n locul (vezi paragraful precedent) cuvinte cheie. Iat cum definim cu ajutorul cuvntului cheie small, dimensiunea fontului pentru paragraful "LUMINA BLANDA este puternic i nu doar att!". 1. Introducei (n interiorul tag-urilor <STYLE>...</STYLE>) punctelor
?{font-size:X}, nlocuind semnul ntrebrii (?) cu selectorul P i
224
X-ul cu Small, cuvnt cheie care are semnificaia "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 mrimii absolute sunt: xx-small, xsmall, small, medium, large, x-large, xx-large. 9 Cuvintele cheie utilizate pentru definirea mrimii relative sunt: smaller, larger.
Figura 6.39
225
Schimbai culoarea unui text
Putei schimba culoarea ntregului text al unei pagini Web sau numai a anumitor cuvinte, fraze marcate printr-un tag particular. Iat cum colorm n rou, primele dou titluri "Bine ai venit!", "Felicitri pentru rbdarea de a ne fi descoperit!" i cum colorm n albastru paragraful "LUMINA BLANDA este puternic i nu doar att!" din cadrul aceleiai pagini. 1. Introducei (n interiorul tag-urilor <STYLE>...</STYLE>)
X{color:?} sau X{color:rgb(0,0,0)}, nlocuind X-ul cu selectorul corespunztor (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. Introducei X{color:?} sau X{color:rgb(0,0,0)} nlocuind X-ul cu selectorul corespunztor (P) i semnul ntrebrii (?) 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 introducei (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.
Schimbai spaiul dintre liniile unui paragraf

Dac dorii s mbuntii lizibilitatea unui paragraf putei schimba spaierea dintre liniile acestuia din urm. Iat cum aplicai o interlinie de 25 de puncte paragrafului Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! LUMINA BLND este puternic i nu doar att! Dorim s ne cunoatem i s rmnem mpreun! 1. Introducei (n interiorul tag-urilor <STYLE> ... </STYLE>) ?{line-height:X pt}, nlocuind semnul ntrebrii (?) 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, introducei (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.
Colorai fundalul (background-ul) unui text sau al unei pagini

Avei posibilitatea de a colora fundalul unui text sau al unei pagini Web. Iat cum colorai n purpur background-ul unei pagini Web i n alb background-ul paragrafului LUMINA BLANDA este puternic i nu doar att! din cadrul aceleiai pagini. 1. Introducei (n interiorul sau tag-urilor <STYLE></STYLE>)
body{background:?}
body{background:rgb(0,0,0)}
nlocuind semnul ntrebrii (?) cu numele culorii (purple) sau
229
0-urile cu valoarea culorii (purple) n sistem zecimal (figura 6.45).
Remarc. n HTML 4.01 putei utiliza pentru definirea culorilor cu cuvinte cheie, cu coduri RGB hexazecimale, cu funcia rgb(R,G,B) proprietatea background-color. Succes!
Figura 6.45
2. Introducei
(n
interiorul
tag-urilor
<STYLE></STYLE>)
X{background:?} sau X{background:rgb(0,0,0)}, nlocuind X-ul cu selectorul corespunztor (P) i semnul ntrebrii (?) 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.
Aplicai o imagine pe fundalul paginii

Dac dorii s aplicai o imagine de background unui text, asigurai-v c ea nu altereaz lizibilitatea. Aplicaia 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 proprieti 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), backgroundattachement (pentru definirea imaginii cu ajutorul cuvintelor cheie scroll sau fixed).
231
Iat cum atribuim o imagine de background paginii Web. 1. Introducei (n interiorul tag-urilor <STYLE></STYLE>)
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 afieaz pe fundalul paginii.
Controlai spaierea caracterelor

Foile de stiluri permit definirea cu precizie a spaiului care s figureze ntre cuvinte sau ntre fiecare liter a unui cuvnt. Iat cum spaiai cu 30 de pixeli literele paragrafului LUMINA BLND este puternic i nu doar att!. 1. Introducei (n interiorul tag-urilor <STYLE></STYLE>)
X{letter-spacing:?}, nlocuind X-ul cu selectorul corespunztor (P) i semnul ntrebrii (?) cu spaiul dorit (30) exprimat n pixeli (figura 6.50).
Figura 6.50
Remarc. Pentru a defini spaiul ntre cuvinte, introducei (ntre tag-urile <STYLE></STYLE>) X{word-spacing:?}, nlocuind X-ul cu selectorul corespunztor i semnul ntrebrii (?) cu spaiul dorit, exprimat n pixeli.
233
Figura 6.51 Remarc. Navigatorul spaiaz literele paragrafului cu 30 de pixeli.
Aliniai textul
Putei utiliza foile de stiluri pentru alinierea unui text, folosind o procedur deloc complicat. Iat cum procedai pentru a centra textul Bine ai venit!, pentru a alinia la stnga textul Felicitri pentru rbdarea de a ne fii descoperit! i pentru a alinia la dreapta textul LUMINA BLND este puternic i doar att!.
234
1. Introducei (n interiorul tag-urilor <STYLE></STYLE>) X{text-align:?}, nlocuind X-ul cu selectorul H1 respectiv P i semnul ntrebri (?) cu valoarea center respectiv right (figura 6.52).
Figura 6.52 Remarc. Pentru a atribui un aliniament ntregului text, introducei (n interiorul tag-urilor <STYLE></STYLE>) body{text-align:?}, nlocuind semnul ntrebrii (?) 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 stnga.
Dai ordin s clipeasc un text!

Creai un text care clipete! Cu siguran vizitatorii dumneavoastr se vor amuza! Din nefericire, numai Netscape-ul v poate oferi aceast bucurie! Iat cum procedm ca textul Bine ai venit! s ... clipeasc! 1. Introducei (n interiorul tag-urilor <STYLE></STYLE>)
?{text-decoration: blink}, nlocuind semnul ntrebrii (?) cu selectorul corespunztor (H1), figura 6.54.
236
Figura 6.54
Remarc. Pentru a da ordin s clipeasc toate textele, introducei (n interiorul tag-urilor <STYLE></STYLE>) body{text-decoration: blink}.
2. Validai documentul HTML 4 Strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai 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 clipete.
Aplicaii Trasai o linie deasupra textului Bine ai venit!. Indicaie. Introducei (n interiorul tag-urilor <STYLE></STYLE>) X{textdecoration:?}, nlocuind X-ul cu selectorul corespunztor (H1) i semnul ntrebrii (?) cu valoarea overline. H1{text-decoration:overline} Trasai o linie dedesubtul textului Bine ai venit!. Indicaie. nlocuii n underline. H1{text-decoration:underline}
Remarc. Proprietatea text-decoration poate avea una din valorile: overline, linethrough, none, underline.
codul surs anterior valoarea overline cu valoarea
238
XHTML
Incorporai o foaie de stiluri ntr-un document
Definii fontul pentru toat pagina

Pentru a crea documente XHTML valide, utilizai 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 conine text, pornind de la documentul HTML stil4.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.56 se prezint documentul XHTML generat.
Figura 6.56
239
Remarc. Utilizai DTD Strict ntr-un document XHTML care conine foi de stiluri, ntruct DTD Transitional permite formatarea elementelor, iar obiectivul foilor de stiluri este de a nu le utiliza.
Figura 6.57
Remarc. n afar de font-urile serif i sans-serif noile navigatoare recunosc trei familii de fonturi adiionale: cursive, fantasy i monospace.

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 XHTML cu programul utilitar HTML-TIDY. n figura 6.58 se prezint documentul XHTML generat.
240
!<h1> !<h2>
Figura 6.58
Remarc. Proprietatea font-style poate avea urmtoarele valori: normal, italic, oblique.
!
!
Figura 6.59
241
Aplicaie Scriei ngroat (bolduit) tot textul unei pagini Web. Indicaie. Introducei body{font-weight: bold} n interiorul tag-urilor <style> </style>.
Remarc. n HTML pentru afiarea cu caractere ngroate (bold) a unui text avei la dispoziie numai tag-ul <b>. Atributul CSS font-weight v ofer urmtoarele formate: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Iat cum aplicm 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 programul utilitar HTML-TIDY. n figura 6.60 se prezint documentul XHTML generat.
Figura 6.60
242
Figura 6.61
Definii dimensiunea fontului cu ajutorul cuvintelor cheie

Iat cum definim cu ajutorul cuvntului cheie small, dimensiunea fontului pentru paragraful Felicitri pentru rbdarea de a ne fi descoperit! LUMINA BLND este puternic i nu doar att!, pornind de la documentul HTML stil9.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.62 se prezint documentul XHTML generat.
243
Figura 6.62
Figura 6.63
Remarc. Pentru a regla cu precizie dimensiunea fontului, utilizai 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).
Schimbai culoarea unui text

Iat cum colorm n rou, primele dou titluri Bine ai venit!, Felicitri pentru rbdarea de a ne fi descoperit i cum colorm n albastru paragraful LUMINA BLANDA este puternic i nu doar att! din cadrul aceleiai pagini, pornind de la documentul HTML stil10.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTMLTIDY. n figura 6.64 se prezint documentul XHTML generat.
Figura 6.64
Remarci:
245
9 Cu ajutorul atributului CSS color definii culoarea primului plan sau culoarea textului. 9 Nu confundai: 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 cuvnt se afieaz n culoarea afectat i nu n culoarea de fond a paragrafului etc. 9 Pentru a colora n rou primul titlu (h1), mai putei defini culoarea, cu una din metodele: h1 (color: #ff0000); h1 (color: rgb (255, 0, 0); h1 (color: rgb (100%, 0%, 0%). Recomandm utilizarea metodei #rrggbb. Ea v va deveni familiar cci corespunde declaraiilor de culoare ale limbajului XHTML.
Figura 6.65
Schimbai spaiul dintre liniile unui paragraf

Proprietile de text controleaz aranjarea sau afiarea liniilor i a cuvintelor n cadrul unei pagini i n interiorul unui element text. Cele mai des utilizate proprieti de text sunt: line-height, letter-spacing, text-align, text-decoration, text-indent, text-transform, vertical-align, word-spacing. Cu unele dintre ele ai fcut deja cunotin (text-align).
246
Iat cum aplicai o interlinie de 25 de puncte paragrafului Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! LUMINA BLND este puternic i nu doar att!, pornind de la documentul HTML stil11.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.66 se prezint documentul XHTML generat.
Figura 6.66
247
Figura 6.67
Colorai fundalul (background-ul) unui text sau al unei pagini Web

Iat cum colorai 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 att! din cadrul aceleiai pagini, pornind de la documentul HTML stil12.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.68 se prezint documentul XHTML generat.
248
Figura 6.68
Figura 6.69
249
Remarci: 9 n XHTML atribuirea culorilor se efectueaz prin numele lor standard sau prin codul hexazecimal (RGB). 9 Utilizai tag-ul <body> i atributul CSS background-color pentru a atribui culoarea de background paginii. 9 Utilizai atributul color pentru a atribui o culoare unui text. Afectai atributul color tag-ului <body> pentru a defini culoarea de baz a fontului sau fiecrui tag distinct pentru a defini culoarea acestuia.
Aplicai 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 anterior, pe care apoi l convertim n XHTML cu programul utilitar HTMLTIDY. n figura 6.70 se prezint documentul XHTML generat.
Figura 6.70
250
Figura 6.71 Aplicaie: Creai un efect de mozaic, n direcia axei X, pentru imaginea de background. Inserai culoarea de fundal #ffffcc (galben deschis). Indicaie. Folosii proprietile: 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 urmtoarele 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 urmtoarele 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).
Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate. Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n figura 6.73.
Figura 6.73
Controlai spaierea caracterelor

Iat cum spaiai cu 30 de pixeli literele paragrafului LUMINA BLANDA este puternic i nu doar att!, pornind de la documentul HTML stil14.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.74 se prezint documentul XHTML generat.
252
Figura 6.74
Figura 6.75
253
Remarc. Pentru a mri spaiul ntre caracterele unui text utilizai atributul CSS letterspacing.
Aliniai textul
Iat cum procedai pentru a centra textul Bine ai venit!, pentru a alinia la stnga textul Felicitri pentru rbdarea de a ne fi descoperit i pentru a alinia la dreapta textul LUMINA BLANDA este puternic i nu doar att, pornind de la documentul HTML stil15.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.76 se prezint documentul XHTML generat.
Figura 6.76
254
Figura 6.77
Remarc. Utilizai atributul CSS text-align pentru a defini tipul de aliniere, cu una din valorile: left, right, center, justify.
Dai ordin s clipeasc un text

Iat cum procedm ca textul Bine ai venit! s clipeasc!, pornind de la documentul HTML stil16.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.78 se prezint documentul XHTML generat.
255
Figura 6.78
Figura 6.79
256
Utilizai combinaia special a proprietii font
Dac utilizai combinaia special a proprietii font pentru a defini o dat diferitele proprieti ale fontului, atunci proprietile trebuie s fie specificate ntr-o ordine anume, altfel afiarea acestora nu se va face corect n navigator. 9 Primele proprieti sunt: font-style, font-weight i font-variant. Ele pot fi plasate n orice ordine dar trebuie s vin naintea oricrei alte proprieti a fontului. Dac omitei una din aceste proprieti, vor fi utilizate valorile implicite. 9 A doua proprietate este font-size; ea este obligatorie dac utilizai combinaia proprietii font. 9 Putei plasa dup font-size o bar oblic i o valoare line-height, specificnd spaierea liniilor ntr-un paragraf (Exemplu: p{font-
size:13pt/15.4pt}). nlimea 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 utilizai combinaia proprietii font. n figura 6.80 este prezentat un exemplu n care fiecare proprietate a fontului este prezentat separat.
257
em; em;
Figura 6.80
Utiliznd combinaia special a proprietii font, proprietile 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
Creai i aplicai o foaie de stiluri extern
Foaia de stiluri extern este foarte practic atunci cnd dorii s dai acelai aspect mai multor pagini Web. n aceast situaie, creai o singur foaie de stiluri (extern) pe care apoi o aplicai tuturor paginilor dorite.
258
Iat cum crem o foaie de stiluri extern utiliznd selectorii H1, H2 i P, cu urmtoarele proprieti: 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. Creai un nou document text. 2. Introducei selectorul H1 pentru care dorii s definii stilul (figura 6.82).
Figura 6.82
3. Plasai proprietile stilului ntre acolade ({}), figura 6.83.
Figura 6.83
4. Repetai paii 2 i 3 pentru fiecare selector (H2 i P), figura 6.84.
259
Figura 6.84
5. Salvai documentul n format text cu extensia .css (figura 6.85).
Figura 6.85
Acum, dup ce ai creat foaia de stiluri extern trebuie s-o ... legai la fiecare din paginile crora dorii s le aplicai definiiile de stil. Procedura este descris n cele ce urmeaz.
260
1. Creai pagina dumneavoastr HTML fr a efectua nici o formatare. 2. Introducei n interiorul tag-urilor <HEAD>...</HEAD> tag-ul <LINK rel=stylesheet type =text/css href=?.css>, nlocuind semnul ntrebrii (?) 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
Creai i aplicai o foaie de stiluri extern
Iat cum crem o foaie de stiluri extern utiliznd selectorii H1, H2 i P, pornind de la documentul HTML stil19.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 6.88 se prezint documentul XHTML generat.
Figura 6.88
262
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 inserai declaraia @import url (...) n elementul style. Declaraia @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 utilizai elementul vid <link/>. Aceast metod va fi prezentat n cadrul lucrrii.
Iat cum legai foaia de stiluri extern pe care ai creat-o la fiecare din paginile crora dorii s le aplicai definiiile de stil, pornind de la documentul HTML stil19.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY.
263
Figura 6.90
Figura 6.91
264
Remarc. Legai foile CSS la paginile Web introducnd tag-ul <link> cu atributele rel, type i href (<link rel="stylesheet" type="text/css" href="stil.css" />), nainte de tag-ul </head>.
XHTML
Controlai culorile legturilor (link-urilor) ntr-un document
Pentru a controla culorile link-urilor din cadrul unui document, utilizai trei clase de stiluri speciale (pseudo-clase), dup cum urmeaz: 9 a: link; 9 a: active; 9 a: visited. Utilizai aceste clase n interiorul definiiilor 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 roie) i a link-urilor vizitate (culoare magenta).
Figura 6.92
265
XHTML
Proprietile de bordur ale unei zone
n mod implicit bordurile nu au nici un stil definit (nu sunt vizibile); fr elemente de culoare i de mrime. Valoarea implicit a unei borduri este o linie de grosime medie. Proprietile de bordur ale unei zone servesc la crearea unor concepte de zon, o caracteristic care nu este nc disponibil n limbajul XHTML standard. Putei crea zone de text de tip avertisment, putei ajusta marginile pentru a regla distana dintre text i bordur, i n fine pentru a crea un text flotant. Cele mai folosite proprieti 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 proprietilor de bordur unei zone.
Figura 6.93 Remarc. Utilizarea zonelor este un excelent mod de a atrage atenia!
266
XHTML
Proprietile de clasificare
Acest grup de proprieti controleaz prezentarea (afiarea) unui anumit numr de elemente standard, ca de exemplu i, b, p, h etc. Acest grup de proprieti controleaz de asemenea afiarea listelor, a elementelor listelor etc. Cele mai des folosite proprieti de clasificare sunt: display (modific valorile de afiare ale unui element), list-style-image (nlocuiete caracterul standard-bumb cu o imagine), list-style-type (indic un stil pentru afiarea 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 afiarea elementelor (item-urilor) este un ptrat, utilizai secvena XHTML prezentat n figura 6.94.
Figura 6.94
Putei folosi de asemenea o imagine, n locul bumbilor, utiliznd proprietatea list-style-image (figura 6.95).
Figura 6.95
267
Remarc. Dac specificai o proprietate list-style-image este recomandabil s includei i proprietatea list-style-type n cazul n care imaginea nu va putea fi afiat.
Modificnd proprietatea display, putei schimba o list cu tipul de afiaj vertical ntr-o list in-line, n care fiecare element va aprea 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
Proprietile foilor de stiluri sonore
Foile de stiluri sonore au fost introduse n foile de stiluri CSS2. Ele v permit instalarea proprietilor necesare pentru o citire sonor utiliznd un periferic. Utilizatorii care au probleme cu vederea folosesc frecvent acest tip de foi. Foile de stiluri sonore pot fi folosite de asemenea pentru prezentri vizuale sau n situaii speciale (de exemplu, ntr-o main n micare). Proprietile 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 opiuni de audiie. De exemplu, pentru a preciza c documentul trebuie s fie citit cu voce nalt i rapid (pentru eficien!) utilizai secvena XHTML listat n figura
268
6.97 n care s-au definit proprietile: volume i speech-rate cu valoarea fast.
Figura 6.97
Remarci: 9 Foile de stiluri sonore au aprut recent i nu sunt recunoscute de toate navigatoarele. 9 Pentru mai multe informaii consultai site-urile: www.w3.org/TR/CSS-acces www.webreview.com/style/index.shtml
XHTML
Aceste
Proprietile documentelor imprimate

proprieti servesc nevoilor utilizatorilor care imprim
documentele n loc ca acestea s fie citite. Aceste proprieti CSS2 permit definirea coordonatelor pentru zona de imprimare. Cele mai des utilizate proprieti pentru documentele imprimate sunt: margin, marks, orphans, page-break-after, page-break-before, pagebreak-inside, size, windows.
Remarc. Ca i foile de stiluri sonore, aceste proprieti fac parte din specificaia CSS2 i nu sunt nc recunoscute curent de ctre navigatoare.
XHTML
Proprietile de poziionare a unui element
Pentru a controla poziionarea elementelor n cadrul unui document XHTML utilizai urmtoarele proprieti: 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 nelegem cum funcioneaz proprietile de poziionare.
Figura 6.98 Remarci: 9 Proprietile de poziionare fac parte din specificaia CSS2 care este suportat de noile navigatoare. 9 Poziionarea relativ este mult mai bine recunoscut dect cea absolut.
XHTML
Viitorul foilor de stiluri n XHTML
n viitor, foile de stiluri externe vor fi probabil cel mai folosite. Opiunile 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 dect cu foile de stiluri externe.
Remarc. Dac dorii s nvai XML, v sunt necesare noiuni de XSL (Extensible Stylesheet Language) i de XSLT (vezi Liviu Dumitracu, XML, Editura Universitii din Ploieti, 2003).
270
(X)HTML
Testai-v cunotinele
Tem
1. Ce sunt foile de stiluri n cascad: CSS1, CSS2, CSS3? 2. Cum aplicai stilurile CSS? 3. Descriei pe scurt procedura (X)HTML de creare a unei foi de stiluri (incorporate) intern. 4. Descriei pe scurt procedura (X)HTML de creare i aplicare a unei clase. 5. Descriei pe scurt procedura (X)HTML de creare i aplicare a unei foi de stiluri extern. 6. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web din figura 6.99.
Figura 6.99
Vizitai site-urile
9 www.w3.org/TR/REC-CSS1 9 www.w3.org/TR/REC-CSS2 9 www.webpreview.com/style/index.shtml
Conversaia 7
Inserai imagini cu HTML 4 i XHTML

f f f f f f f f f f f f f
Manipulai formatele de imagine Web HTML 4, XHTML Inserai o imagine HTML 4, XHTML Centrai o imagine HTML 4, XHTML Aplicai o bordur unei imagini HTML 4, XHTML Folosii un text de nlocuire (substituie) pentru o imagine HTML 4, XHTML Aliniai vertical o imagine n raport cu un text HTML 4, XHTML Plasai un text n jurul unei imagini HTML 4, XHTML ntrerupei ... mbrcarea cu text a unei imagini HTML 4, XHTML Adugai mai multe spaii n jurul unei imagini HTML 4, XHTML Aplicai o imagine de background HTML 4, XHTML Propunei o versiune n miniatur a imaginii originale HTML 4, XHTML Creai o imagine cu zone reactive (X)HTML Tem
Manipulai formatele de imagine Web

Am alocat destul timp pentru formatarea caracterelor, paragrafelor, a textului n general. Ori de cte ori este posibil ar trebui s adugm i imagini n paginile Web pentru a le face mai atractive i pentru a facilita comunicarea! O pagin Web fr imagini este trist i deprimant!
272
Regulile de aur pentru inserarea imaginilor
nainte de a insera imagini ntr-o pagin Web, trebuie s avei n vedere mai multe aspecte.
De unde procurm 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 (fr drept de copyright!). Nu ezitai s le folosii! 3 Folosii motoarele de cutare! Introducei tipul de imagine pe care l cutai. Tastai search. Se va afia o list consistent de imagini, adaptat cererii dumneavoastr. 3 Scanai: fotografii (de familie, ale copiilor, ale animalelor etc.), ilustraii (o imagine poate ilustra uneori un concept mai greu de explicat n cuvinte!), logo-uri etc. 3 Creai propriile imagini cu programe dedicate. Copyright nainte de a insera n pagina dumneavoastr Web imagini care nu v aparin, trebuie s avei n vedere copyright-ul. Nu folosii imagini fr acordul proprietarului! Respectai legea dreptului de autor! Gestiunea imaginilor 3 Atunci cnd creai o pagin Web trebuie s trecei de o important barier tehnic gestiunea imaginilor! Imaginile sunt mari consumatoare de ... octei! Dac nu ne punem n gard, imaginile pot multiplica dimensiunea fiierelor de 10 ori, de 100 de ori! Din acest moment site-ul devine inutilizabil! (Multe din site-urile profesionale afieaz 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 afia mai ncet pe ecran. Putei retua imaginea folosind una din aplicaiile: Paint Shop Pro (www.jasc.com/psp.html); LviewPro (www.lview.com); Graphic Converter (www.lemkesoft.de); Macromedia Fireworks (www.macromedia.com) etc. 3 Asigurai-v c paginile dumneavoastr Web rmn inteligibile i atractive i n absena imaginilor! O parte din vizitatori, fie nu pot, fie opteaz s nu descarce imagini grafice atunci cnd viziteaz paginile Web. n consecin, n locul imaginilor adugai un text explicativ. 3 Refolosii imaginile ori de cte ori este posibil.
273
3 Realizai o versiune simplificat a imaginii pe care apoi vizitatorul s o mreasc la dimensiunile reale. Rezoluia imaginilor 3 Majoritatea monitoarelor afieaz imaginile cu o rezoluie de 72 dpi. n consecin, nu depii aceast valoare pentru imaginile pe care urmeaz s le plasai n paginile dumneavoastr Web! 3 Ecranele monitoarelor, nu depesc n general 620 pixeli pe lime. Este deci preferabil s nu depii aceast valoare i din respect pentru vizitatorii dumneavoastr. Creai propriile imagini 3 Creai un folder special (dedicat) n care s plasai toate imaginile pe care dorii s le utilizai n site-ul dumneavoastr. 3 Creai propriile imagini cu una din aplicaiile: Macromedia Fireworks, Photoshop, Illustrator, Paint Shop Pro etc.
GIF, JPEG sau PNG?

nainte de a avansa cu HTML-ul, s ne oprim puin 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 fiierelor, formatul .GIF este ideal pentru butoane, panouri publicitare. Exist i GIF-uri animate pe care le putei obine de pe Internet (www.netmechanic.com). Utiliznd formatul .GIF putei reduce paleta de culori pn la minimul necesar, ceea ce conduce la o scdere considerabil a dimensiunii. 3 Formatul .JPEG (Joint Photographic Experts Group). n acest format imaginile pot utiliza milioane de culori. Putei obine, deci o imagine foarte apropiat de original. Formatul .JPEG este ideal pentru fotografii, desene cu multe detalii i nuane 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 nuane i se aplic mult mai uor pe fundalul (background-ul) unei pagini Web. n curnd, formatul .PNG va deveni standardul Web-ului. Din pcate, el nu este mereu recunoscut de ctre browser-e.
Remarci: 9 Web nu suport alt format de imagine dect: .GIF, .JPEG sau .PNG; 9 Dac imaginea dumneavoastr este n alt format, .BMP, de exemplu va trebui s-o convertii ntr-unul din cele trei formate imagine suportate de Web.
274
Aplicaii
Creai o imagine sugestiv poza.jpg cu una din aplicaiile (puternice)

existente pe calculatorul dumneavoastr.
Convertii imaginea poza.jpg n format .gif (desen.gif). Definii mrimea imaginii desen.gif. Vei introduce (ntr-o aplicaie viitoare)
aceste valori (lungime, lime) n tag-ul <IMG> (atributele width i height) pentru a accelera ncrcarea paginilor dumneavoastr Web (browser-ul nu va mai avea nevoie s calculeze dimensiunile imaginii!).
Mrii imaginea desen.gif, atribuind o nou valoarea lungimii i limii

acesteia. Evitai de a mri foarte mult imaginile, ntruct riscai s pierdei din acuratee.
Reducei (cu pruden) numrul de culori al imaginii poza.jpg. (Imaginile

RGB admit 256 de culori. Pe Web, numrul de culori este limitat la 251!)
Aplicai un efect de transparen imaginii poza.jpg. ntr-o aplicaie viitoare

vom plasa aceast imagine pe fundalul unei pagini Web.
Diminuai rezoluia imaginii poza.jpg, pentru a obine o versiune n miniatur

a imaginii. Vei folosi aceast aplicaie atunci cnd dorii s ncrcai n pagina dumneavoastr Web poza.jpg real, de nalt rezoluie. Cum operaia dureaz (timpii de ncrcare sunt mari), vei ncrca, la nceput aceeai imagine, dar n miniatur!
HTML
.JPEG sau .PNG.
Inserai o imagine
Putei s v mpodobii pagina Web cu imagini sugestive, n format .GIF,
Iat cum inserai imaginea Smokey Light (Lumin ... mai puin blnd!) din folder-ul My Pictures, n colul din stnga sus al paginii Web. Imaginea Smokey Light, n format .JPEG (.JPG) se va afia ntr-o caset de 85 x 85 pixeli.
275
1. Introducei 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. Neputnd 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. Introducei, n continuare, n tag-ul <IMG> atributul align=left (aliniere la stnga) (figura 7.2).
Figura 7.2
3. Introducei, height=85
n i
continuare, width=85
tag-ul a
<IMG> preciza
atributele (n pixeli)
pentru
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 prevzut pentru o singur surs!). 9 <IMG> admite atribute. 9 Atributul SRC (Source, n limba englez) identific adresa relativ sau absolut a imaginii. 9 Prezena atributului src este obligatorie. 9 Atributele WIDTH i HEIGHT definesc limea, respectiv nlimea imaginii. Ele pot fi exprimate n pixeli sau n procente. 9 Atunci cnd imaginea se afl n aceeai folder cu pagina Web n care urmeaz s fie inserat, este suficient s specificai doar numele: Smokey Light.jpg.
Figura 7.4
277
Remarc. Navigatorul afieaz imaginea n colul din stnga sus al paginii.
Aplicaii
Nu reinventai roata! Folosii imaginile din alte site-uri Web (atenie la

copyright!) ca punct de plecare pentru crearea propriilor dumneavoastr pagini Web. n bibliotecile de imagini, n special cele dedicate webmaster-ilor gsii fotografii, logo-uri, pictograme, gif-uri animate.
Vizitai site-urile:
3 www.arttoday.com 3 www.clipart.com 3 www.yahoo.com 3 www.animfactory.com
Desenai sigla societii LUMINA BLND, un bec ... de 10W! Folosii

aplicaia Macromedia Fireworks.
Remarc. Putei gsi o sigl mai inspirat dect cea pe care v-o propunem noi! De asemenea, putei utiliza orice alt aplicaie pentru crearea imaginilor proprii. Utilizai, de exemplu PhotoShop (prsii Paint-ul din Windows! Avei nevoie de instrumente mai puternice!). Atenie la dimensiunea fiierului!
Iat cum folosim aplicaia Macromedia Fireworks pentru desenarea unui bec de 10 W, sigla Societii LUMINA BLND, de 85x85 pixeli. 1. Deschidei aplicaia Macromedia Fireworks 4. 1.1 Executai clic pe Start t All Programs t Macromedia Fireworks 4 t Fireworks 4 (figura 7.5).
278
Figura 7.5 2. Setai dimensiunile 85 x 85 n fereastra New Document ( via File -> New), figura 7.6.
Figura 7.6 3. Desenai becul (de 10 W) utiliznd instrumentele de desenare din panoul cu instrumente; folosii paletele de culori.
279
Figura 7.7 4. Salvai fiierul cu numele sigla.jpg, n My Documents. 4.1. Selectai Jpeg-Better Quality din meniul derulant Settings panoul Optimize.
Figura 7.8 4.2. 4.3. Selectai File t Export (din bara de meniuri). Introducei numele n zona File name (din caseta de dialog Export) fiierului, sigla.jpg (figura 7.9).
Figura 7.9
280
4.4. Selectai Images Only din meniul derulant Save as type, figura 7.10.
Figura 7.10 4.5. Alegei n Save in directorul corespunztor My Documents (figura 7.11).
Figura 7.11 4.6. Executai clic pe butonul Save (figura 7.12).
Figura 7.12
281
Remarci: 3 3 3 Sigla societii LUMINA BLANDA un bec de 10 W! a fost salvat n directorul My Documents, cu numele sigla.jpg. Sigla este numele fiierului imagine, iar .jpg este extensia. Dimensiunea siglei este de 85 x 85 pixeli.
Inserai imaginea sigla.jpg, sigla societii LUMINA BLND n colul din stnga sus al paginii Web. Vizualizai pagina Web ntr-un browser (figura 7.13).
Figura 7.13
XHTML
Inserai 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 utilizai atributele CSS pentru a defini bordura, distana i textul din jurul unei imagini.
Remarc. Consoriul W3 are n plan s nlocuiasc tag-ul <img /> cu un tag mult mai generic <object>. Orientrile W3C sunt pentru a trata toate elementele multimedia (imagini, sunete, animaii Flash etc.) cu ajutorul aceluiai element <object>. Elementul <object> cu atributele data (conine adresa relativ/absolut a fiierului imagine), type, height i width trebuie s fie inclus (vezi elementul <img>) ntr-un alt element (<p>, <div> de exemplu).
Iat cum inserai imaginea Smokey Light din folder-ul My Pictures, n colul din stnga sus al paginii Web. Imaginea Smokey Light, n format .JPEG (.JPG) se va afia 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=locaie /> insereaz o imagine n documentul dumneavoastr. Nu uitai s adugai bara / la sfritul tag-ului de deschidere <img />. 9 n XHTML utilizai style=text-align:left n loc de align=left; altfel spus, n XHTML definii alinierea cu ajutorul atributului CSS text-align i nu mai utilizai atributul HTML align.
Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate . Rezultatul
vizualizrii paginii Web n Internet Explorer este ilustrat n figura 7.15.
Figura 7.15
283
HTML
prezentrii acesteia din urm.
Centrai o imagine
Centrarea unei imagini ntr-o pagin Web are ca efect ameliorarea
Iat cum centrai sigla societii LUMINA BLND, sigla.jpg n pagina dumneavoastr Web. 1. ncadrai tag-ul <IMG> ntre <CENTER> i </CENTER>, figura 7.16.
Figura 7.16
Remarci: 9 Tag-ul <CENTER> (vi-l amintii de pe vremea cnd centrai entitile 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 putei folosi atributul align cu valoarea center n tag-ul <P>, <P align=center>.
284
Figura 7.17
Remarc. Navigatorul centreaz imaginea.
Aplicaie Centrai n pagina dumneavoastr Web imaginea diagonal.jpg
redimensionnd-o (width=150, height=175).
XHTML
dumneavoastr Web.
Centrai o imagine
Iat cum centrai sigla societii LUMINA BLND, sigla.jpg n pagina
285
Figura 7.18
Remarc. Pentru centrarea imaginii putei folosi de asemenea tag-ul <div> cu atributul style (figura 7.19).
Figura 7.19
286
Figura 7.20
HTML
Aplicai o bordur unei imagini
Putei aplica o bordur imaginilor din pagina dumneavoastr Web, pentru a le scoate i mai mult n eviden. Iat cum aplicai o bordur (un chenar) de 13 pixeli siglei Societii LUMINA BLND din pagina dumneavoastr Web. Dac nu ai creat nc aceast imagine (sigla.jpg), aplicai aceeai bordur imaginii sample.jpg din folder-ul My Pictures. 1. Introducei n tag-ul <IMG> atributul border=? nlocuind
semnul de ntrebare (?) cu valoarea n pixeli (13) a limii bordurii (chenarului), figura 7.21.
287
Figura 7.21
Remarci: 9 <IMG border=?> definete limea bordurii unei imagini. 9 <IMG border=0> anuleaz bordura existent. 9 Cnd o imagine apare ca parte dintr-o legtur hipertext, browser-ul deseneaz de obicei, n jurul imaginii un chenar colorat. Limea acestui chenar este fixat prin atributul border.
Figura 7.22
288
Remarc. n browser, imaginea este ncadrat de o bordur de 13 pixeli.
XHTML
Aplicai o bordur unei imagini
Iat cum aplicai o bordur de 13 pixeli siglei Societii LUMINA BLND pe care v invitm s-o centrai n pagina dumneavoastr Web. n figura 7.23 este prezentat documentul XHTML creat manual.
Figura 7.23
Remarci: 9 n XHTML atributul border se folosete din ce n ce mai puin, chiar deloc! Pentru a afia o bordur n jurul unei imagini utilizai 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
HTML
Folosii un text de nlocuire (substituie) pentru o imagine
Muli dintre vizitatorii site-urilor dezactiveaz afiarea imaginilor pentru a reduce timpii de ncrcare ai paginilor Web. Este important ca n acest caz, s le propunem un text alternativ care s descrie imaginea invizibil pentru acetia. Iat cum folosim textul Sigla LUMINA BLND ca alternativ pentru imaginea sigla.jpg, n cazul n care aceasta nu se poate ncrca n pagina dumneavoastr Web. 1. Introducei n tag-ul <IMG> atributul alt=? nlocuind semnul de ntrebare (?) cu un text alternativ, "Sigla LUMINA BLND" (figura 7.25).
Remarc. Prezena atributului alt este obligatorie. Textul alternativ apare la MOUSE OVER pe imagine, n browser.
290
Figura 7.25
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Dezactivai afiajul 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 afiajul imaginilor a fost dezactivat, browser-ul listeaz numai textul de nlocuire a imaginii (figura 7.27). 9 Dac nu dezactivai afiajul imaginilor n browser, ns scriei greit numele fiierului imagine sigra.jpg, de exemplu, n loc de sigla.jpg, efectul este acelai - se afieaz textul alternativ (se poart alternativele!). O greeal de acest tip, reprezint un alt motiv pentru a testa paginile dumneavoastr Web, nainte de a fi vizitate.
292 Folosii un text de nlocuire (substituie) pentru o imagine
XHTML
Iat cum folosim textul Sigla LUMINA BLANDA ca alternativ pentru imaginea sigla.jpg, n cazul n care aceasta nu se poate ncrca n pagina dumneavoastr Web. n figura 7.28 este prezentat documentul XHTML creat manual.
Figura 7.28
Remarc. Pentru a folosi un text ca alternativ pentru o imagine care nu se poate ncrca ntr-o pagin Web, utilizai tag-ul <img /> cu atributul alt (prezena sa este obligatorie!).
293
Figura 7.29
HTML
Aliniai vertical o imagine n raport cu un text
Putei s aliniai n mod simplu o imagine n raport cu un text. Dar, n acest caz nu mai putei plasa text n jurul imaginii! Iat cum aliniem vertical - top, middle, bottom sigla Societii "LUMINA BLANDA". Dac nu ai creat nc sigla Societii "LUMINA BLND" (Un bec de 10W!) aliniai n mod vertical imaginea follow.jpg (din folder-ul c:\Windows\Web\Walpaper) n raport cu acelai text. 1. Introducei 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
2. Introducei n tag-ul <IMG> atributul align="?" nlocuind semnul de ntrebare (?) prin tipul vertical de aliniere dorit middle (aliniere la mijloc), figura 7.31.
Figura 7.31
3. Introducei n tag-ul <IMG> atributul align="?" nlocuind 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 ieire. 9 Bottom este valoarea prestabilit atunci cnd 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 BLND".
296
XHTML
Aliniai vertical o imagine n raport cu un text
Iat cum aliniem vertical top, middle, bottom sigla Societii LUMINA BLANDA. n figura 7.34 este prezentat documentul XHTML creat manual.
Figura 7.34
297
Figura 7.35
HTML
Plasai un text n jurul unei imagini
Atunci cnd dorii s plasai text n jurul unei imagini, putei realiza acest lucru utiliznd opiuni suplimentare de aliniere a imaginii, astfel nct pagina dumneavoastr s capete un aspect profesional. Noile atribute de aliniere - la stnga (mbrcarea colului drept al imaginii), la dreapta (mbrcarea colului stng al imaginii) sunt de efect! Preferm s le exemplificm dect s le teoretizm! Iat cum mbrcm colul drept al imaginii sigla.jpg (aliniere la stnga a imaginii) cu textul introdus n pagina Web: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun. LUMINA BLANDA este puternic i nu doar att!. Dac nu ai creat nc sigla.jpg folosii imaginea follow.jpg sau o alt imagine.
298
1. Introducei n tag-ul <IMG> atributul align=? nlocuind semnul de ntrebare (?) prin tipul de aliniere dorit: left (alinierea imaginii la stnga textului), right (alinierea imaginii la dreapta textului), figura 7.36.
Figura 7.36
Remarc. Dac ai aliniat (top, middle, bottom) o imagine n raport cu un text, nu putei face ca textul s curg pe ecran, n jurul imaginii, fie la dreapta, fie la stnga.
299
Figura 7.37
Remarc. Navigatorul mbrac imaginea cu text.
Aplicaii mbrcai colul stng al imaginii sigla.jpg (aliniere la dreapta a imaginii) cu textul introdus n pagina Web. Indicaie. Introducei n tag-ul <IMG> atributul align="right" (figura 7.38).
Figura 7.38 Plasai textul ZIUA N CARE VIN PETII ntre dou imagini: follow.jpg. Iat cum procedai pentru a mbrca textul ZIUA N CARE VIN PETII n raport cu cele dou imagini (aliniate stnga, dreapta) follow.jpg. 1. Introducei n tag-ul <IMG> al imaginii care va figura la stnga textului, atributul align=left (figura 7.39).
300
Figura 7.39 2. Introducei ntre cele dou tag-uri <IMG> textul care se va poziiona ntre cele dou imagini: ZIUA N CARE VIN PETII (figura 7.40).
Figura 7.40 3. Introducei n tag-ul <IMG> al imaginii care va figura la dreapta textului atributul align=right (figura 7.41).
301
Figura 7.41
4. Validai documentul HTML 4 strict cu aplicaia validator. 5. Inserai codul . 6. Vizualizai pagina Web ntr-un browser (figura 7.42). HTML care afieaz icon-ul de conformitate
Figura 7.42
Remarc. n navigator, cele dou imagini se afieaz n jurul textului impus.
302
XHTML
Plasai un text n jurul unei imagini
Iat cum mbrcm colul drept al imaginii sigla.jpg (aliniere la stnga a imaginii) cu textul introdus n pagina Web: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun. LUMINA BLND este puternic i nu doar att!. n figura 7.43 este prezentat documentul XHTML creat manual.
Figura 7.43 Remarc. Cu ajutorul atributului float putei preciza unde i cum textul trebuie s ncadreze imaginea. Float poate lua una din valorile: none (fr text n jurul imaginii); left (text la dreapta) i right (text la stnga).
303
Figura 7.44
HTML
ntrerupei mbrcarea cu text a unei imagini
Putei ntrerupe linia de text din jurul unei imagini i muta textul de dup ntreruperea de linie, dincolo de imagine. Tag-ul <BR> (fr atribute) i tag-ul <P> provoac trecerea la linia urmtoare din zona curgtoare a textului, dar acest efect nu reprezint ntotdeauna ceea ce v-ai dorit! Iat cum ntrerupei linia de text Bine ai venit! care mbrac imaginea sigla.jpg i mutai dincolo de sigl, ctre marginea stng a ecranului, restul textului: Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLND este puternic i nu doar att!. Textul mbrac colul drept al imaginii (aliniere la stnga).
304
1. Executai clic n locul n care dorii s oprii mbrcarea cu text a imaginii. Introducei <BR clear=?> nlocuind semnul de ntrebare (?) cu valoarea de aliniere (left) definit n imagine left (stnga), right (dreapta), all (dac textul este plasat ntre dou imagini), figura 7.45.
Figura 7.45
Remarci: 9 Atributul clear stabilete locul pe ecran left, right, all de unde ncepe urmtoarea linie dup imagine. 9 <BR clear=left> mut textul de dup ntreruperea de linie dincolo de imagine, ctre marginea stng a ecranului. 9 <BR clear=right> mut textul de dup ntreruperea de linie dincolo de imagine, pn cnd marginea din dreapta este liber. 9 <BR clear=all> mut textul de dup ntreruperea de linie dincolo de imagine, pn cnd ambele margini sunt libere.
305
3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai pagina Web ntr-un navigator (figura 7.46).
Figura 7.46
Remarc. Browser-ul ntrerupe mbrcarea cu text a imaginii n locul indicat.
XHTML
ntrerupei mbrcarea cu text a unei imagini
Iat cum ntrerupei linia de text Bine ai venit! care mbrac imaginea sigla.jpg i mutai dedesubtul siglei, ctre marginea stng a ecranului, restul textului: Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun. LUMINA BLND este puternic i nu doar att!. Textul mbrac colul drept al imaginii (aliniere la stnga).
306
Figura 7.47
Remarc. Cu atributul clear, dezactivai afiarea textului primului paragraf sub imagine. Clear poate lua una din valorile: none (valoare implicit), left, right i both (dezactiveaz textul pe ambele pri stnga, dreapta).
307
Figura 7.48
HTML
Adugai mai multe spaii n jurul unei imagini
Un text lipit pe o imagine risc s nu poat fi citit! Dou imagini care nu sunt separate printr-un spaiu dau impresia c formeaz o singur entitate. Putei remedia aceste neajunsuri adugnd spaii albe n imediata apropiere a imaginilor. Iat cum lsai un spaiu orizontal i vertical de 20 de pixeli ntre imaginea sigla.jpg i textul adiacent. 1. Introducei n tag-ul <IMG> atributele: hspace=?, nlocuind semnul de ntrebare (?) prin valoarea n pixeli a spaiului orizontal (20) care separ imaginea de textul adiacent i vspace=? nlocuind semnul de ntrebare (?) prin valoarea n
308
pixeli a spaiului vertical (20) care separ imaginea de textul adiacent (figura 7.49).
Figura 7.49
Remarci: 9 Spaiul alb este un termen mprumutat din design pentru spaiul care nu conine nimic. 9 Spaiul 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 att spaiu alb ct este necesar pentru ca imaginea s nu ating textul adiacent.
309
Figura 7.50
Remarc. n navigator, textul se afieaz decalat cu 20 de pixeli (orizontal i vertical) fa de imagine.
XHTML
Adugai mai multe spaii n jurul unei imagini
Cum am stabilit i mai nainte, atributele HTML hspace i vspace sunt atribute declarate ca depite sau interzise n XHTML. Pentru a defini distana pe care dorii s o lsai n jurul unei imagini, utilizai atributele margin sau margin-left, margin-right, margin-top i margin-bottom. Iat cum lsai un spaiu orizontal i vertical de 20 de pixeli ntre imaginea sigla.jpg i textul adiacent.
310
Figura 7.51
Remarci: 9 Utilizai atributele CSS: background-color, color. Primul corespunde culorii de fond (background) iar cel de-al doilea corespunde culorii textului. Nu confundai 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 lsa un spaiu de 20 de pixeli ntre margine i textul adiacent (orizontal i vertical).
311
Figura 7.52
HTML
Aplicai o imagine de background
Dei 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 fcut deja obiectul analizei noastre. Ceea ce v propunem n continuare este o nou provocare aplicarea imaginilor pe fundalul (background-ul) paginilor Web. Iat cum aplicai pe fundalul paginii Web imaginea follow.jpg din folder-ul C:\Windows\Web\Wallpaper. 1. Introducei 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
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Afiai pagina Web ntr-un browser.
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
Aplicaie Urmtoarele site-uri pun la dispoziia 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, folosii-le.
XHTML
Aplicai o imagine de background
Pentru a aplica o imagine pe fundalul paginilor Web definii un stil i utilizai atributul CSS background-image. Iat cum aplicai pe fundalul paginii Web imaginea follow.jpg care se afl n folder-ul C:\Windows\Web\Wallpaper. n figura 7.55 este prezentat documentul XHTML creat manual.
Figura 7.55
314
Remarci: 9 Declaraia de stil din tag-ul <body> se compune din proprietatea backgroundimage i din valoarea url creia trebuie s-i transmitei, ntre paranteze, numele i calea ctre fiierul imagine. Indicai numele fiierului ntre caracterele , ntruct ghilimelele servesc la definirea valorii stilului. 9 CSS va permite de asemenea s precizai cum dorii s se repete imaginea. n principiu, navigatoarele repet imaginea de background orizontal i vertical pn cnd background-ul va fi umplut. Contrar HTML-ului, proprietatea background-repeat a CSS-ului v permite s precizai modul n care dumneavoastr dorii s se repete imaginea de background. Imaginai-v pagina Web ca o histogram unde axa X reprezint repetiia vertical i axa Y repetiia orizontal. Prin valoarea repeat-x cerei numai o repetiie vertical i interzicei repetiia orizontal. Dac dezactivai complet repetiia prin norepeat, imaginea de background se afieaz o singur dat n partea superioar stng. 9 CSS furnizeaz de asemenea alte posibiliti pentru plasarea imaginii de background. Dac nu dorii s umplei ntreg background-ul cu o imagine, utilizai atributul background-position pentru a defini cu precizie modul de aliniere i de poziionare 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). Utilizai de asemenea: top center bottom i left center right. 9 Combinai imaginea i culoarea de background. Aceast combinaie nu este posibil dect n CSS. HTML nu permite aceast combinaie. Definii n tag-ul <body> culoarea de background cu atributul background-color.
Figura 7.56
315
HTML
Propunei o versiune n miniatur a imaginii originale
O soluie practic pentru reducerea timpilor de ncrcare a unei imagini este aceea de a crea o versiune n miniatur a imaginii i de a propune o legtur ctre versiunea original a imaginii. Executnd clic pe versiunea n miniatur a imaginii, imaginea se va afia n mrimea sa natural. Iat cum crem o legtur ctre versiunea original a imaginii (sigla.jpg) pornind de la versiunea n miniatur (siglamin.jpg) a acesteia. 1. Creai siglamin.jpg, o versiune n miniatur (15 x 15 pixeli) a imaginii sigla.jpg (sigla Societii LUMINA BLND) folosind, de exemplu, Macromedia Fireworks (figura 7.57).
Figura 7.57
2. Introducei tag-ul <A href=?>, nlocuind semnul de ntrebare (?) cu calea de acces la imaginea original (figura 7.58).
316
. .
Figura 7.58
3. Introducei, n continuare <IMG src=?>, nlocuind semnul de ntrebare (?) cu calea de acces la versiunea miniatur a siglei (figura 7.59).
Figura 7.59
4. Introducei, n continuare </A> (figura 7.60).
Figura 7.60
317
Figura 7.61
Remarc. Versiunea miniatur a siglei se afieaz n browser. Vizitatorul va trebui s execute clic pe aceast imagine pentru a se afia versiunea original a imaginii.
Aplicaie
Creai versiunea n miniatur a imaginii follow.jpg
(c:\Windows\Web\Wallpaper\follow.jpg) 15x15 pixeli. Utilizai atributul lowscr n tag-ul <IMG> indicnd calea de acces ctre imaginea follow.jpg de nalt rezoluie, 283x212 pixeli, dimensiunile exacte ale imaginii. Navigatorul va afia versiunea n miniatur a imaginii pe care se va executa un clic pentru a fi ncrcat imaginea follow.jpg de nalt rezoluie. Iat cum procedai pentru a afia mai nti versiunea n miniatur follow.jpg de 15x15 pixeli (mai puin net) n ateptarea ncrcrii imaginii follow.jpg de nalt rezoluie (283x212 pixeli).
318
1. Introducei n tag-ul <IMG> al imaginii de nalt rezoluie (follow.jpg) atributul lowsrc=?, nlocuind semnul de ntrebare (?) cu calea de acces (follow.jpg) ctre imaginea de joas rezoluie (figura 7.62).
Figura 7.62 2. Introducei, n continuare height=? nlocuind semnul de ntrebare (?) prin valoarea n pixeli a nlimii imaginii de nalt rezoluie (212 pixeli) i apoi width=? nlocuind semnul de ntrebare (?) prin valoarea n pixeli a lungimii imaginii (283 pixeli), figura 7.63.
Figura 7.63 3. Validai documentul HTML 4 strict cu aplicaia validator. 4. Inserai codul . 5. Vizualizai pagina Web ntr-un browser (figura 7.64). HTML care afieaz icon-ul de conformitate
319
Figura 7.64
Remarc. Navigatorul afieaz imaginea de joas rezoluie n ateptarea ncrcrii imaginii de nalt rezoluie.
XHTML
Propunei o versiune n miniatur a imaginii originale
Iat cum crem o legtur ctre versiunea original a imaginii (sigla.jpg) pornind de la versiunea n miniatur (siglamin.jpg) a acesteia, utiliznd documentul HTML img12.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 7.65 este prezentat documentul XHTML generat (automat). Pentru afiarea icon-ului de conformitate XHTML corespunztor. s-a inserat codul
320
Figura 7.65
Figura 7.66
321
Aplicaie Accelerai ncrcarea imaginii follow.jpg (283x212 pixeli) afind mai nti versiunea n miniatur a imaginii (15x15 pixeli) followmin.jpg. Indicaie. Utilizai atributul lowsrc care nu aparine standardului oficial (X)HTML.
HTML
Creai o imagine cu zone reactive
Putei crea o imagine cu zone reactive MAP, pe care apoi s-o mprii n forme (arii) diferite (dreptunghi, cerc, poligon) cu rolul de legturi ctre o pagin Web diferit. O imagine cu zone reactive este o versiune extins a unei hiperlegturi imagine. n loc s avem o singur legtur posibil, indiferent unde executm clic pe imagine, aceasta ofer mai multe legturi diferite, n funcie de locul unde executai clic. Aadar, o singur imagine poate nlocui un meniu de tip text! Pornind de la imaginea follow.jpg, iat cum procedm la transformarea acesteia ntr-o imagine cu zone (dreptunghiulare, circulare) reactive i nu doar att. 1. Inserai imaginea follow.jpg (figura 7.67).
Figura 7.67
322
2. Introducei n tag-ul <IMG> atributul usemap=#?, nlocuind semnul de ntrebare (?) cu numele (JOHNSON) pe care dorii s-l atribuii imaginii MAP (figura 7.68).
Figura 7.68
3. Executai clic n zona n care dorii s introducei informaii despre imaginea MAP. 4. Introducei tag-ul <MAP name=?> nlocuind semnul de ntrebare (?) cu numele pe care l-ai atribuit imaginii MAP (vezi pasul 2), figura 7.69.
Figura 7.69
323
Remarci: 9 Primul lucru de care avei nevoie pentru o imagine cu zone reactive este, bineneles, 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. Introducei, n continuare tag-ul <AREA> n care urmeaz s definim zona reactiv (figura 7.70).
Figura 7.70
6. Activai bara de spaii i introducei, 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. Acionai bara de spaii i introducei n continuare, atributul coords=?, nlocuind semnul de ntrebare (?) cu valorile celor dou perechi de coordonate (colul din stnga-sus i colul din dreapta-jos): 275, 97, 360, 182 (figura 7.72).
Figura 7.72
Remarci: 9 Cele dou perechi de coordonate din atributul coords urmresc poziia indicatorului mouse-ului fa de colul din stnga-sus al imaginii. Acest col are coordonatele 0,0 n notaia cu x i y. Coordonata x, de la stnga la dreapta, crete pe msur ce v deplasai spre dreapta; coordonata x de sus n jos, crete pe msur ce cobori (vezi figura 7.73).
x 9 Dreptunghiurile necesit dou perechi de coordonate pentru 275, 97 colul din stnga-sus i colul din dreapta-jos. 9 Cercurile necesit o pereche de coordonate pentru centrul 360, 182 cercului i un al treilea numr pentru raza cercului. y
Figura 7.73
9 Poligoanele necesit mai multe perechi de coordonate care definesc puncte de-a lungul marginilor figurii.
9 Stabilirea coordonatelor reprezint o etap de mare importan. Putei folosi programe de grafic dedicate care afieaz coordonatele, dar pot fi introduse erori. Soluia este folosirea programelor dedicate pentru construirea imaginilor cu zone reactive (programul freeware MapThis!).
325
8. Acionai bara de spaii i introducei atributul href=?>, nlocuind semnul de ntrebare (?) cu adresa paginii Web ctre care se realizeaz legtura, figura 7.74.
Figura 7.74
9. Repetai paii 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,016965,501000.html 9 www.macromedia.com 9 http://members.tripod.com/-mharing/mapmaker.html
10. Introducei 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 ctre care s-a realizat legtura.
Figura 7.76 Aplicaie Nu puini sunt vizitatorii care dezactiveaz imaginile n browser-ele lor. Pentru a reui s-i inei aproape, propunei-le o versiune fr imagini, o pagin Web numai cu text. Navigatoarele care recunosc n mod automat aceast pagin de substituie. tag-urile <LINK> vor ncrca
327
Creai o legtur ctre o pagin Web care conine numai text. Indicaie. Respectai urmtoarea procedur: 1. Deschidei pagina n care dorii s creai o versiune text. 2. Eliminai toate imaginile pe care le conine pagina. 3. Salvai pagina sub un nou nume cu extensia .htm. 4. Deschidei din nou pagina iniial. 5. Sub tag-ul <HEAD> introducei <LINK rel=versiune doar cu text href=?.htm>, nlocuind semnul de ntrebare (?) cu calea de acces la pagina de substituie (text).
XHTML
Creai o imagine cu zone reactive
Vizitai urmtoarele site-uri pentru a afla mai multe despre hrile 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), definii mai nti imaginea interactiv, atribuii-i un nume (name i id) i divizai-o n zone. Definiia 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 fr echivoc. Pentru a permite navigatorului s identifice imaginea care aparine fiecrei imagini interactive, transmitei-i numele imaginii cu tag-ul <img /> i cu ajutorul atributului usemap. Pentru a crea o imagine interactiv va trebui s descompunei imaginea n mai multe zone reactive cu ajutorul tag-ului <area />. Fiecare zon reactiv numit hotspot poate fi dreptunghiular, circular sau poligonal. Indicai forma zonei reactive cu atributul shape. Cu atributul coords definii coordonatele zonei care pot varia n funcie de forma zonei. Nu calculai singuri coordonatele zonelor reactive! Exist programe specializate care calculeaz automat aceste coordonate. Iat cum procedm pentru a transforma imaginea follow.jpg ntr-o imagine cu zone reactive. n figura 7.78 este prezentat documentul XHTML creat manual.
Figura 7.78
329
Figura 7.79
(X)HTML
Testai-v cunotinele
Tem
1. Descriei pe scurt formatele de imagine acceptate pe Web. 2. Descriei pe scurt procedura (X)HTML de creare a unei imagini cu zone reactive. 3. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web din figura 7.80.
330
Figura 7.81
Vizitai site-urile
9 www.freegraphics.com 9 www.screamdesign.com 9 www.iconbazaar.com
Conversaia 8
Creai legturi cu HTML 4 i XHTML

f HTML 4, XHTML Creai o legtur hipertext ctre o alt pagin Web f HTML 4, XHTML Creai legturi n aceeai pagin Web f HTML 4, XHTML Creai o legtur extern ctre un site Web, avnd ca f HTML 4, XHTML Creai o legtur hipertext (extern) ctre un alt site f HTML 4, XHTML Creai o legtur hipertext extern ctre o adres
suport o imagine
Web
e-mail f HTML 4, XHTML Modificai culoarea legturilor hipertext f HTML 4, XHTML Creai o legtur hipertext ctre o pagin care se deschide n propria sa fereastr f (X)HTML Tem
HTML
Creai o legtur hipertext ctre o alt pagin Web
Hipertextul reprezint esena unui site Web. Fr legturi ntre pagini, World Wide Web-ul nu ar putea exista. Legtura hipertext poate fi un cuvnt, un grup de cuvinte, n general colorate i subliniate, pe care executai un clic pentru a naviga din pagin n pagin, din site n site.
332
Legtura hipertext poate fi de asemenea i o imagine. de stare indic adresa acestei legturi. Iat cum creai o legtur hipertext din pagina test.html ctre pagina leg.html a aceluiai site. Creai mai nti cele dou pagini n folder-ul My Documents. Ziua lung este textul de legtur. 1. Creai n acelai folder (My Documents) cele dou pagini Web: test.html i leg.html.
Remarci:
Atunci cnd
activai o legtur hipertext cursorul se transform ntr-o mn iar bara
9 Test.html conine urmtorul text: Exemplu de legtur hipertext ctre o alt

pagin a site-ului.
9 Leg.html conine textul: Ziua n care vin petii i imaginea follow.jpg.
2. Introducei tag-ul <A> cu atributul <href=?>, nlocuind semnul de ntrebare (?) cu numele paginii (leg.html) ctre care se face link-ul (figura 8.1).
Figura 8.1
333
Remarci:
9 Pentru a realiza o legtur hipertext utilizai tag-ul pereche <A> (anchor, n 9 9 9 9 9

limba englez) cu atributul href (referin hypertext), absolut necesar ntr-o legtur. Nu includei direct elementul <A> n corpul documentului <BODY> ci ntr-un alt element (<P>, <DIV>, <TD>, de exemplu). Textul de legtur pe care se execut clic va fi afiat cu o culoare albastr i subliniat. Atenie la ghilimele (rotunjite sau nu) i la apostrofuri (drepte i nu rotunjite!) Nu plasai dou legturi hipertext, una lng cealalt. Vizitatorii pot crede c nu exist dect o legtur i nu dou legturi distincte. Pentru accesarea paginilor Web ale aceluiai site putei folosi butoanele Back (napoi) i Forward (nainte) ale browser-ului.
3. Introducei textul legturii Ziua lung (figura 8.2).
Figura 8.2
4. Introducei tag-ul de nchidere </A> (figura 8.3).
Figura 8.3
334
Figura 8.4
8. Executai clic pe Ziua lunga. Se afieaz pagina leg.htm (figura 8.5).
Figura 8.5
Remarci:
9 n browser, legtura hipertext (Ziua lung) apare colorat i subliniat.

Executai clic pe Ziua lung pentru a accesa pagina leg.htm.
9 Organizarea paginilor Web depinde de tipul de informaii pe care le conin i

de legturile care le relaioneaz.
9 Organizarea paginilor Web poate fi: centralizat (pagina de index este

dispecerul paginilor din structura site-ului); liniar sau secvenial (principiul de citire a unei cri); ierarhic (toate paginile sunt legate la pagina de index; organizarea ierarhic este ideal pentru site-urile cu multe ramificaii); tentacular (de evitat!). 9 Este important ca n faza de proiectare a site-ului s reflectai i la sistemul de navigare. Construii story board-ul pentru fiecare pagin a site-ului dumneavoastr (story board-ul trebuie s descrie paginile site-ului i coninutul acestora). Organizai navigarea n cadrul site-ului. Se impune ca fiecare pagin a site-ului s fie prevzut cu o legtur de retur ctre pagina de index (pentru a nu v pierde vizitatorii!).
335 Creai o legtur hipertext ctre o alt
XHTML
pagin Web
i n XHTML tag-ul care creeaz o legtur hipertext ctre o alt pagin Web este <a> (litera iniial a cuvntului englezesc anchor) cu atributul href (hypertext reference, n limba englez). Nu uitai regula XHTML:
atributele se scriu cu minuscule iar valorile acestora trebuie s fie ncadrate ntre ghilimele.
S trecem la treab. Iat cum creai o legtur hipertext din pagina test.html ctre pagina leg.html a aceluiai site. Ziua lung este textul de legtur. Cele dou pagini au fost create n folder-ul My Documents (vezi aplicaia HTML). n figura 8.6 se prezint documentul XHTML creat manual.
Figura 8.6
Remarc. Atribuirea unui stil paragrafului <p> (n aplicaia noastr) cu ajutorul atributului style este metoda cea mai rapid i cea mai puin complicat (vezi Conversaia 3).
336
Figura 8.7
HTML
Creai legturi n aceeai pagin Web
Pentru a crea legturi n cadrul aceleai pagini, trebuie mai nti s inserai 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. Putei apoi propune o legtur ctre aceasta, astfel nct vizitatorul s acceseze direct un subiect, o tem etc. Aadar, dou sunt etapele pe care trebuie s le parcurgei:
9 9
Crearea ancorei (numite); Crearea legturii ctre ancor.
Iat cum crem ancora (numit) cu numele LUMINA BLNDA n cadrul textului cunoscut din aplicaiile precedente.
337
1. Introducei n locul indicat, n tag-ul <A> atributul name=?, nlocuind semnul de ntrebare (?) cu numele ancorei LUMINA BLNDA (figura 8.8).
Figura 8.8
2. Introducei tag-ul final </A> (figura 8.9).
Figura 8.9
338
Figura 8.10
Remarc. n navigator, ancora nu se afieaz.
Pentru a facilita navigarea, mai ales atunci cnd pagina dumneavoastr Web este foarte lung, realizai o legtur hipertext ctre ancora corespunztoare, din aceeai pagin sau din alt pagin. Iat cum crem o legtur Bine ctre ancora (numit) LUMINA BLNDA pe care am creat-o anterior. 1. Introducei n locul indicat, tag-ul <A href=#?>, nlocuind semnul de ntrebare (?) cu numele ancorei LUMINA BLNDA (figura 8.11).
Figura 8.11
339
2. Introducei tag-ul final </A> dup cuvntul Bine (figura 8.12).
Figura 8.12
Figura 8.13
6. Executai clic pe textul de legtur. Rezultatul link-ului este ilustrat n figura 8.14.
#_______________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________
340
Figura 8.14
Remarc. n navigator, legtura ctre o ancor se afieaz ntr-o culoare diferit de legturile hipertext clasice.
Aplicaii Creai o legtur ctre o ancor situat n alt pagin. Indicaie. Utilizai tag-ul <A href=?#X>, nlocuind semnul de ntrebare (?) cu adresa paginii i X-ul cu numele ancorei. n urmtorul text sunt descrise serviciile oferite de Societatea LUMINA BLNDA. 1. Servicii TURISM 2. Servicii ACADEMICE 3. Servicii INFORMATICE
unde,
9 Servicii TURISM: Valea Prahovei, Valea Oltului, Valea Domanului, Valea Arieului, Valea Cernei, Valea Loirei. 9 Servicii ACADEMICE: Organizare expoziii, Organizare simpozioane naionale, Organizare simpozioane internaionale, Organizare trg de job-uri, Organizare work-shop-uri. 9 Servicii INFORMATICE: Training, Service reele de calculatoare, Service Video Conferine, Pagini Web. Creai trei ancore: Seciune 1, Seciune 2, Seciune 3 ce corespund celor trei tipuri de servicii (Servicii TURISM, Servicii ACADEMICE, Servicii INFORMATICE). Creai de asemenea legturi ctre ancorele numite, textele de legtur fiind
341
denumirile serviciilor (Servicii TURISM, Servicii ACADEMICE, Servicii INFORMATICE). Iat cum crem ancorele (numite) i legturile ctre acestea. 1. Introducei textul aplicaiei (figura 8.15).
Figura 8.15 2. Creai trei ancore numite: Seciune 1, Seciune 2, Seciune 3 ce corespund celor trei tipuri de servicii - Servicii TURISM respectiv Servicii ACADEMICE i Servicii INFORMATICE. 2.1 Introducei naintea cuvintelor Servicii TURISM, tag-ul <A name=?>, nlocuind semnul de ntrebare (?) cu numele ancorei Seciune 1 (figura 8.16).
342
Figura 8.16 2.2 Introducei tag-ul final </A> (figura 8.17).
Figura 8.17 2.3 Introducei naintea cuvintelor Servicii ACADEMICE, tag-ul <A name=?>, cu numele ancorei Seciune 2.
343
Figura 8.19 2.5 Introducei naintea cuvintelor Servicii INFORMATICE, tag-ul <A name=?>, nlocuind semnul de ntrebare (?) cu numele ancorei Seciune 3 (figura 8.20).
Figura 8.21 3. Creai ancora numit START la nceputul documentului. 3.1 Introducei imediat dup tag-ul <BODY>, tag-ul <A
name=?>, nlocuind semnul de ntrebare (?) cu numele ancorei START (figura 8.22).
#_________________________________________________________ ___________________________________________________________ ___________________________________________________________
344
Figura 8.23 4. Creai la nceputul documentului, un meniu (o list numerotat) pentru serviciile oferite de societatea LUMINA BLND (figura 8.24).
Figura 8.24 5. Organizai textul, pentru fiecare din cele trei servicii (TURISM, ACADEMICE, INFORMATICE) n liste cu simboluri (figura 8.25).
345
Figura 8.25 6. Creai legturi ctre ancorele numite: Seciune 1, Seciune 2, Seciune 3. 6.1 Introducei naintea primului element al listei ordonate din
meniu, tag-ul <A href=#?>, nlocuind semnul de ntrebare (?) cu numele ancorei Seciune 1 (figura 8.26).
346
Figura 8.26
Remarc. Servicii TURISM reprezint textul de legtur ctre ancor.
6.2 Introducei tag-ul final </A> (figura 8.27).
Figura 8.27 6.3 Introducei naintea celui de-al doilea element al listei cu simboluri din meniu, tag-ul <A href=#?>, nlocuind semnul de ntrebare (?) cu numele ancorei Seciune 2 (figura 8.28).
Figura 8.28
347
Remarc. Servicii ACADEMICE reprezint textul de legtur ctre ancor.
Figura 8.29 6.5 Introducei naintea celui de-al treilea element al listei cu simboluri din meniu, tag-ul <A href=#?>, nlocuind semnul de ntrebare (?) cu numele ancorei Seciune 3 (figura 8.30).
Figura 8.30
Remarc. Servicii INFORMATICE reprezint textul de legtur ctre ancor.
#_________________________________________________________ ___________________________________________________________ ___________________________________________________________ ___________________________________________________________
348
Figura 8.31 7. Creai legturi din fiecare seciune ctre ancora START. 7.1 Introducei la finele primei seciuni (Seciune 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 legtur ctre ancor.
Figura 8.33
349
7.3 Introducei la finele celei de-a doua seciuni (Seciune 2), tag-ul <A href=#?>, nlocuind semnul de ntrebare (?) cu numele ancorei Start (figura 8.34).
Figura 8.34
Figura 8.35 7.5 Introducei la finele celei de-a treia seciuni (Seciune 3), tag-ul <A href=#?>, nlocuind semnul de ntrebare (?) cu numele ancorei Start (figura 8.36).
Figura 8.36
Figura 8.37
350
8. Validai documentul HTML 4 strict cu aplicaia validator. 9. Inserai codul . 10. Vizualizai pagina Web ntr-un browser (figura 8.38). HTML care afieaz icon-ul de conformitate
Figura 8.38
351
Remarci: 9 n navigator, ancora nu se afieaz! 9 n navigator, legturile ctre ancore se afieaz ntr-o culoare diferit fa de legturile hipertext clasice.
XHTML
Creai legturi n aceeai pagin Web
Conform noilor standarde XHTML i XML (care vor nlocui probabil HTML-ul!!) consoriul 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 suntei la curent cu noul standard, cel mai inteligent lucru de fcut este s folosii ambele atribute n documentele dumneavoastr. Iat cum procedm pentru a crea n XHTML ancora (numit) LUMINA BLND i legtura BINE ctre aceasta. n figura 8.39 este prezentat documentul XHTML creat manual.
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 contradicie ntre HTML4 i XHTML1 dar compatibilitatea cu cele dou norme este uor de conservat. Utilizai pur i simplu <a id=Anchor Name name=Anchor Name> </a> (Aceast repetiie este o surs de erori!).
Figura 8.40 Aplicaie Creai trei ancore: Seciune1, Seciune2, Seciune3 ce corespund celor trei tipuri de servicii oferite de Societatea LUMINA BLANDA (vezi aplicaia precedent). Creai de asemenea legturi ctre ancorele numite, textele de legtur fiind denumirile serviciilor (Servicii TURISM, Servicii ACADEMICE, Servicii INFORMATICE). Iat cum procedm pentru a crea n XHTML cele trei ancore i legturile ctre acestea, pornind de la documentul HTML link3.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 8.41 se prezint documentul XHTML generat.
353
Figura 8.41
Inserai codul XHTML care afieaz icon-ul de conformitate 8.42.
Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n figura
354
Figura 8.42
355
HTML
Creai o legtur extern ctre un site Web, avnd ca suport o imagine
Putei folosi nu numai cuvinte pentru o legtur, ci i imagini. Iat cum plasm o legtur grafic, ctre site-ul UPG din Ploieti, n imaginea, de-acum cunoscut follow.jpg. 1. Introducei 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. Introducei <IMG src=?>, nlocuind semnul de ntrebare (?) cu calea de acces spre imagine n care se plaseaz legtura hipertext (figura 8.44).
Figura 8.44
Figura 8.45
357
Figura 8.46
Remarc. n navigator, legtura hipertext (plasat n imagine) nu este vizibil. Atunci cnd se trece cu mouse-ul peste imagine, cursorul ia forma unei mini pentru a semnala prezena unei legturi hipertext.
Aplicaie Dac ai creat o versiune n miniatur (micapoza.gif) a imaginii poza.gif, realizai o legtur hipertext ctre versiunea original; (poza.gif este creaia dumneavoastr!) Iat cum realizm legtura hipertext ctre versiunea original a imaginii pe care ai creat-o la nceputul conversaiei, cu efort propriu. 1. Introducei tag-ul <A href=?>, nlocuind semnul de ntrebare (?) cu calea de acces ctre imaginea original (poza.gif), figura 8.47.
358
Figura 8.47 2. Inserai imaginea n miniatur micapoza.gif.
Figura 8.48
359
3. Introducei tag-ul final </A>.
Figura 8.50
Remarc. n navigator, vizitatorul nu va avea dect s execute clic pe imagina n miniatur (sau text) pentru a accede la versiunea original.
360
XHTML
ideal pentru
Creai o legtur extern ctre un site Web, avnd ca suport o imagine

navigarea pe Internet. Lsai, aadar imaginaia
O imagine poate ascunde o legtur hipertext. O legtur grafic este dumneavoastr s lucreze! Iat cum procedm pentru a crea o legtur grafic, ctre site-ul UPG din Ploieti, n imaginea follow.jpg, pornind de la documentul HTML link4.htm creat anterior, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 8.51 se prezint documentul XHTML generat.
Figura 8.51
361
Figura 8.52 Aplicaie Creai n XHTML o legtur ctre poza.gif (creaia dumneavoastr) utiliznd versiunea micapoza.gif. Indicaie. Utilizai secvena XHTML definit n figura 8.53 i succes n continuare!
Figura 8.53
HTML
Creai o legtur hipertext (extern) ctre un alt site Web
Putei crea n pagina dumneavoastr Web o legtur hipertext extern, ctre alt site care trateaz n detaliu, subiectul pe care-l abordai.
362
Iat cum creai n pagina dumneavoastr Web o legtur hipertext extern, ctre site-ul www.upg-ploiesti.ro pentru a obine detalii despre cele cinci faculti (i nu doar att!) ale Universitii Petrol-Gaze din Ploieti. Textul de legtur este UPG Ploieti. 1. Introducei n tag-ul <A> atributul href=http://? nlocuind semnul de ntrebare (?) cu adresa site-ului ctre care se face link-ul www.upg-ploiesti.ro (figura 8.54) .
Figura 8.54
2. Introducei textul de legtur UPG Ploieti (figura 8.55).
Figura 8.55
363
Figura 8.56
Remarci: 9 Verificai legturile (externe)! 9 Analizai timpii de ncrcare pentru toate legturile, astfel nct s nu v pierdei vizitatorii!
Figura 8.57
Remarc. n browser, legtura hipertext extern apare colorat (n albastru) i subliniat.
364
XHTML
Creai o legtur hipertext (extern) ctre un alt site Web
Principiul este exact acelai cu cel pe care l-am detaliat la HTML: utilizai tag-ul <a> cruia i transmitei atributul href cu URL-ul corespunztor.
Remarc. Este posibil ca foarte curnd, mai precis cnd XML se va impune ca standard, un nou termen: URI (Uniform Resource Identifier) s ia locul btrnului URL (Uniform Resource Locator).
Iat cum creai n pagina dumneavoastr Web o legtur hipertext extern, ctre site-ul www.upg-ploiesti.ro pornind de la documentul link1.htm creat anterior, pe care apoi l convertim, n XHTML cu programul utilitar HTML-TIDY. n figura 8.58 se prezint documentul XHTML generat.
Figura 8.58
365
Figura 8.59
HTML
Creai o legtur hipertext extern ctre o adres e-mail
Putei crea o legtur hipertext ctre propria adres de e-mail. Vizitatorul care dorete s v scrie, nu va avea dect s redacteze mesajul iar apoi s-l expedieze. Iat cum procedm pentru a crea o legtur ctre adresa
ldumitrascu@mail.upg-ploiesti.ro. Textul legturii este Primii mesajul. 1. Introducei n tag-ul <A> atributul href=mailto:?, nlocuind semnul de ntrebare (?) cu adresa de e-mail (figura 8.60).
366
Figura 8.60
2. Introducei textul legturii: Primii mesajul (figura 8.61).
Figura 8.61
Figura 8.62
367
Figura 8.63
7. Activai legtura.
Figura 8.64
Remarci: 9 Navigatorul semnaleaz legtura ctre adresa e-mail. 9 Atunci cnd vizitatorul execut clic pe o astfel de legtur, aplicaia sa de pot electronic se activeaz i afieaz n mod automat o fereastr pentru mesaje (figura 8.64).
368
Aplicaii Creai o legtur hipertext ctre un grup de discuii. Indicaie. Utilizai tag-ul <A href=news://?>, nlocuind semnul de ntrebare (?) cu adresa grupului de discuii. Creai o legtur hipertext ctre un site FTP (File Transfer Protocol). Indicaie. Utilizai tag-ul <A href=ftp://?>, nlocuind semnul de ntrebare (?) cu calea de acces ctre site.
XHTML
Creai o legtur hipertext extern ctre o adres e-mail
Iat cum procedm pentru a crea o legtur ctre adresa e-mail ldumitrascu@mail.upg-ploiesti.ro. Textul legturii este Primii mesajul. n figura 8.65 este prezentat documentul XHTML creat manual.
Figura 8.65
Remarci: 9 Ca alinierea textului s fie conform normelor XHTML, utilizai 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 Aplicaii Creai o legtur hipertext ctre un grup de discuii. Creai o legtur hipertext ctre 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
Modificai culoarea legturilor hipertext
n mod implicit legturile hipertext se afieaz n albastru. Putei modifica aceast culoare, n armonia culorii background-ului. Iat cum afiai n alb legtura hipertext Primii mesajul ctre adresa e-mail ldumitrascu@mail.upg-ploiesti.ro. 1. Introducei 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 afieaz legtura hipertext n culoarea definit (alb).
Aplicaii Schimbai culoarea legturilor hipertext vizitate.
371
Indicaie. Utilizai tag-ul <BODY vlink=?>, nlocuind semnul de ntrebare (?) cu numele sau valoarea hexazecimal a culorii preferate. Schimbai culoarea legturilor hipertext active (nevizitate). n mod implicit, aceste legturi sunt de culoare roie. Indicaie. Utilizai tag-ul <BODY alink=?>, nlocuind semnul de ntrebare (?) cu numele sau valoarea hexazecimal a culorii preferate.
XHTML
Modificai culoarea legturilor hipertext
n XHTML ca i n HTML avei posibilitatea de a schimba culoarea legturilor dac albastru i violet nu v mai convin! Iat cum afiai n alb legtura hipertext Primii mesajul ctre adresa e-mail: ldumitrascu@mail.upg-ploiesti.ro. Se vor utiliza stilurile link. n figura 8.69 este prezentat documentul XHTML creat manual.
Figura 8.69
Remarci: 9 Selectorul a:link{color:} stabilete stilurile pentru link-urile nevizitate. 9 Selectorul a:visited{color:} stabilete stilurile pentru link-urile vizitate. 9 Selectorul a:active{color:} stabilete stilul pentru link-ul n timpul legturii.
372
9 Selectorul a:hover{color:} stabilete 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 legturilor pentru cele trei stri.
Figura 8.70 Aplicaii: Schimbai culoarea legturilor hipertext vizitate. Indicaie. Utilizai pseudo-clasa (stilul link) a:visited{color: }. Schimbai culoarea legturilor hipertext active (nevizitate). Indicaie. Utilizai pseudo-clasa a:active{color: }.
HTML
o legtur.
Creai o legtur hipertext ctre o pagin care se deschide n propria sa fereastr
Putei deschide n propria fereastr o pagin Web ctre care ai prevzut
Iat cum creai o legtur ctre o pagin care se deschide n propria fereastr. Textul legturii este Fereastr proprie.
373
1. Introducei 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. Introducei textul legturii 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 cnd legtura este activat.
375
Figura 8.75
XHTML
Creai o legtur hipertext ctre o pagin care se deschide n propria sa fereastr
Iat cum creai o legtur ctre 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 legtur este Fereastra proprie. n figura 8.76 se prezint documentul XHTML generat.
376
Figura 8.76
Figura 8.77
Remarc. n navigator a doua fereastr (figura 8.78) se deschide atunci cnd legtura este activat.
377
Figura 8.78
(X)HTML
Testai-v cunotinele
Tem
1. Ce este o legtur hipertext? Funcia Help din Windows este o legtur hipertext? 2. Care sunt atributele tag-ului <A>? 3. Descriei pe scurt tipurile de legturi studiate. 4. Creai o legtur hipertext extern ctre urmtoarele site-uri de vacan: http://www.canada.com; http://www.greece.gr; http://www.dolcevita.com; http://www.paris-france.org/parisweb/. 5. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web din figura 8.79.
378
Figura 8.79 6. Comentai codul XHTML care insereaz icon-ul de conformitate .
Vizitai site-urile
9 http://www.tripod.fr 9 http://geocities.yahoo.com/home/ 9 http://www.multimania.fr
Conversaia 9
Creai tabele cu HTML 4 i XHTML

HTML 4, XHTML Creai un tabel HTML 4, XHTML Aliniai un tabel HTML 4, XHTML Atribuii un titlu tabelului HTML 4, XHTML Aplicai o bordur tabelului HTML 4, XHTML Aliniai orizontal datele unui tabel HTML 4, XHTML Aliniai vertical datele unui tabel HTML 4, XHTML Modificai spaiul dintre celulele unui tabel HTML 4, XHTML Modificai dimensiunile liniilor unui tabel HTML 4, XHTML Modificai marginile interioare ale celulelor unui tabel HTML 4, XHTML Extindei o celul pe mai multe coloane sau linii HTML 4, XHTML Aplicai o culoare elementelor unui tabel HTML 4, XHTML Aplicai o imagine de background unui tabel sau unei celule a tabelului f HTML 4, XHTML Utilizai un tabel ca un instrument de punere n pagin f (X)HTML Tem
f f f f f f f f f f f f
HTML
Definii un tabel
Creai un tabel
Iniial, tabelele au fost proiectate pentru afiarea simpl a informaiilor n linii i coloane. La puin timp dup introducerea lor n HTML, tabelele au devenit cel mai puternic i util instrument pentru formatarea paginilor
380
Web (poziionarea textului i a imaginilor n pagin; crearea unei borduri n 3D n jurul unui text sau imagini etc.).
Remarc. nainte de a ncepe s creai un tabel v recomandm urmtoarele: 9 listai toate datele nainte de a fi inserate n tabel; 9 definii structura tabelului numrul de linii, coloane, antet etc.; 9 realizai un crochiu al viitorului tabel pentru a putea judeca aspectul acestuia.
Iat cum procedm pentru a defini n HTML, urmtorul tabel (Tabelul 9.1) cu patru linii i trei coloane. LISTA CURSURILOR DE INFORMATIC Denumire curs UTILIZARE PC-uri TEHNOLOGII INTERNET
Tabelul 9.1
Durata (n ore) 50 60 50
Costuri (n $) 60 90 70
AUTOCAD
Remarci: 9 Tabelele sunt alctuite 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 puin, celula mai poate fi definit i ca un loc rcoros!! 9 Organizarea tabelului este simpl: titlul tabelului; capul de tabel; celulele de date.
1. Introducei datele din prima linie a tabelului (capul de tabel), tastndu-le pur i simplu, imediat sub tag-ul <H2> (figura 9.1).
381
Figura 9.1
2. Acionai de mai multe ori tasta ENTER dup care introducei urmtoarea linie (de date) a tabelului (figura 9.2).
Figura 9.2
3. Repetai pasul 2 pn cnd ai terminat de introdus toate liniile de date (figura 9.3).
Figura 9.3
382
4. Introducei 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 sfritul su cu tag-urile <TABLE>

respectiv </TABLE>.
9 Tag-ul <TABLE> admite atribute.
5. Introducei 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 conin cel puin un element <TBODY>.
6. Validai documentul HTML 4 strict cu aplicaia validator. 7. Vizualizai pagina Web ntr-un browser (figura 9.6).
Figura 9.6
384
Definii liniile tabelului
Pentru a putea crea linia de antet i liniile de date ale tabelului va trebui, mai nti s le definim. Iat cum definim n HTML toate cele patru linii pe care le-ai introdus n aplicaia precedent. 1. Introducei tag-ul <TR> naintea primei linii a tabelului linia antet, imediat sub tag-ul <TBODY> (figura 9.7).
Figura 9.7
2. Introducei tag-ul <TR> naintea celorlalte linii ale tabelului liniile de date (2,3 i 4), figura 9.8.
Figura 9.8
385
3. Introducei tag-ul </TR> la sfritul fiecrei linii a tabelului (figura 9.9).
Figura 9.9
Remarci: 9 Tag-ul <TR> admite atribute. 9 Tag-ul de nchidere </TR> este opional. 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 depanri i revizuiri ulterioare.
386
Figura 9.10
Definii celulele antet i celulele de date

Dup ce am marcat nceputul i sfritul 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. Introducei 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 nlocuii <THEAD> cu <TFOOT>. Cu
<TFOOT> putei crea totaluri la baza unei coloane. Elementul <TFOOT> trebuie s urmeze elementului <THEAD> i s precead elementul <TBODY>.
2. Introducei tag-ul <TH> naintea textului fiecrei celule antet.
Figura 9.12
388
Remarci: 9 Tag-ul de nchidere </TH> este opional. 9 Tag-ul <TH> admite atribute. 9 Tag-urile </TH> sunt recomandate pentru depanri i revizuiri ulterioare.
Figura 9.13
Remarci:
9 Navigatorul afieaz linia de antet pe ultimul rnd deoarece nu recunoate

tipul liniilor cum sunt cele de sus. orizontal n celul.
9 Textul din cadrul unui tag <TH> este afiat cu aldine (bolduit) i este centrat
Pentru a defini celulele de date, care reprezint corpul tabelului liniile 2,3 i 4 (liniile de date), urmrii procedura descris n continuare. 1. Introducei tag-ul <TD> naintea coninutului fiecrei celule de date care aparin 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 opional. 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 depanri i revizuiri ulterioare. 9 Folosind doar cele trei tag-uri: <TABLE>, <TR>, <TD> putei 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 recunoate tabelele HTML 4.01.
390
Figura 9.15
Remarc: Navigatorul afieaz celulele de date ale tabelului.
XHTML
Definii un tabel
Creai un tabel
Iat cum procedm pentru a defini n XHTML tabelul LISTA CURSURILOR DE INFORMATIC cu patru linii i trei coloane (vezi paragraful anterior). n figura 9.16 este prezentat documentul XHTML creat manual.
391
Figura 9.16
Remarci: 9 n XHTML zona unui tabel este definit cu tag-urile <table> </table>. 9 Elementul <tbody> marcheaz corpul tabelului.
Validai documentul XHTML 1.0 cu aplicaia validator. Rezultatele vizualizrii paginii Web n Internet Explorer este ilustrat n figura 9.17.
392
Figura 9.17
Definii liniile tabelului

Iat cum definim n XHTML toate cele patru linii ale tabelului pe care l-ai introdus n aplicaia precedent. n figura 9.18 este prezentat (parial) documentul XHTML creat manual.
Figura 9.18
393
Remarci: 9 Pentru fiecare linie a tabelului, inserai tag-urile <tr> </tr> ntre tag-urile <tbody></tbody>. 9 Pentru o mai bun lizibilitate, indentai cele trei nivele (minim) ale unui tabel: tabelul extern, liniile i celulele (figura 9.19).
Figura 9.19
Validai documentul XHTML 1.0 cu aplicaia validator, iar apoi vizualizai pagina Web n Internet Explorer.
Definii 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. n figura 9.20 este prezentat documentul (parial) XHTML creat manual.
Figura 9.20
394
Remarci: 9 Utilizai caracteristicile tabelelor XHTML care dau mai mult siguran n activitatea de formatare thead (marcheaz seciunea de header), tbody (marcheaz corpul tabelului), tfoot (marcheaz seciunea 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 ncepei prin a crea structura de baz a unui tabel (table, thead, tbody, tr, td, th) dup care adugai textul corespunztor.
Validai documentul XHTML 1.0 cu aplicaia validator. Rezultatele vizualizrii paginii Web n Internet Explorer este ilustrat n figura 9.21.
Figura 9.21
HTML
paginii dumneavoastr Web.
Aliniai un tabel
Centrnd i aliniind un tabel putei ameliora prezentarea general a
Iat cum centrai tabelul LISTA CURSURILOR DE INFORMATIC pe care l-ai creat n aplicaia precedent.
395
1. Introducei n tag-ul <TABLE> atributul align=center.
Figura 9.22
Remarci: 9 Pentru centrarea tabelului putei utiliza i tag-ul <CENTER>. Procedura este urmtoarea: introducei <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 putei utiliza i tag-ul <TBODY align=center>.
Figura 9.23
396
Remarc. n navigator, tabelul se afieaz centrat.
Pentru a alinia la dreapta sau la stnga tabelul, urmrii procedura descris n continuare. 1. Introducei n tag-ul <TABLE> sau <TBODY> atributul
align=right sau align=left pentru aliniere la stnga.
Figura 9.24
Figura 9.25
Remarc. n navigator tabelul se afieaz aliniat la dreapta.
397
XHTML
Aliniai un tabel
Dup ce ai definit un tabel, putei aduga opiunile de formatare corespunztoare (alinieri, borduri, culori etc.) astfel nct pagina dumneavoastr Web s devin ct mai atractiv. ntruct cea mai mare parte a acestor opiuni nu sunt opiuni standard XHTML, se recomand utilizarea foilor de stiluri. Iat cum procedm pentru a centra i a alinia (stnga/dreapta) tabelul LISTA CURSURILOR DE INFORMATIC. n figura 9.26 este prezentat documentul (parial) XHTML (creat
manual) pentru centrarea tabelului menionat varianta 1.
Figura 9.26
398
Figura 9.27
n figura 9.28 este prezentat documentul (parial) XHTML (creat
manual) pentru centrarea tabelului menionat varianta 2.
Figura 9.28
Remarci: 9 n XHTML atributul align nu este utilizat cu tag-ul <table>. 9 Pentru alinierea la stnga i la dreapta utilizai text-align:left i text-align:right n <table> i <div>. 9 Netscape aplic aliniamentul celulelor i nu tabelului. n consecin, evitai varianta 2, <div> cu atributul text-align; inserai tabelul ntre <div> </div> i utilizai atributele margin-left, margin-right, margin-top etc.
Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate
. Rezultatul
399
Figura 9.29
HTML
Atribuii un titlu tabelului
Ori de cte ori realizai un tabel, nu uitai s-i atribuii un titlu. Titlul pe care-l fixai trebuie s reprezinte sinteza informaiilor gzduite n tabelul respectiv. Iat cum atribuim i afim deasupra tabelului nostru titlul CURSURI DE INFORMATIC. 1. Introducei dup tag-ul <TABLE> tag-ul <CAPTION> cu atributul align=top (figura 9.30).
Figura 9.30
400
Remarc. Align este folosit puin diferit fa de alte tag-uri. El indic poziia titlului fa de tabel: top, bottom, center, left, right.
2. Introducei,
continuare
titlul
tabelului:
CURSURI
DE
INFORMATIC (figura 9.31).
Figura 9.31
3. Introducei tag-ul final </CAPTION> (figura 9.32).
Figura 9.32
Remarc. Plasai 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 afieaz titlul menionat deasupra tabelului. 9 <CAPTION> este pentru un tabel ceea ce este <TITLE> pentru un document HTML, cu meniunea c putei opta pentru plasarea titlului tabelului (top/bottom).
Aplicaii Aliniai la dreapta titlul tabelului. Indicaie. Introducei n tag-ul <CAPTION> atributul align=right.
Figura 9.34 Pentru alte tipuri de aliniere, utilizai atributul align=? nlocuind semnul de ntrebare cu una din valorile: right, left, center. Inserai titlul tabelului la baza acestuia, ca pe o legend. Indicaie. Introducei n tag-ul <CAPTION> atributul align=bottom.
402
Figura 9.35 Plasai mesajul: Acest text este poziionat la dreapta tabelului alturi de tabelul (la dreapta) din aplicaia noastr. Iat cum plasai mesajul indicat la dreapta tabelului, respectnd totodat i alinierea impus. 1. Introducei mesajul Acest text este poziionat la dreapta tabelului imediat dup tag-ul </TABLE>.
Figura 9.36 2. Introducei, n vederea alinierii corespunztoare a mesajului, tag-ul <BR clear=all>, unde clear este un atribut.
Figura 9.37
3. Validai documentul HTML 4 strict cu aplicaia validator. 4. Inserai codul . HTML care afieaz icon-ul de conformitate
403
Figura 9.38
Remarc. n browser, mesajul se afieaz la dreapta (sus) tabelului doar dac tabelul este aliniat la stnga (left).
XHTML
Atribuii un titlu tabelului
Iat cum atribuim i afim deasupra tabelului pe care l-ai creat n aplicaiile precedente, titlul CURSURI DE INFORMATIC. n figura 9.39 este prezentat documentul (parial) XHTML creat manual.
Figura 9.39
404
. Rezultatul
Figura 9.40 Aplicaie Plasai mesajul: Acest text este poziionat la dreapta tabelului alturi de tabelul (la dreapta) CURSURI DE INFORMATIC. Indicaie. Folosii <pstyle=clear:right>.
HTML
Aplicai o bordur tabelului
Aplicai o bordur exterioar

Pentru a mri lizibilitatea datelor structurate n tabele, putei aplica o bordur, care are ca efect generarea unei zone umbrite n jurul tabelului i a unui caroiaj n interiorul acestuia.
405
Iat cum aplicai 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. Introducei n tag-ul <TABLE> atributul border=?, nlocuind semnul ntrebrii (?) cu limea bordurii exprimate n pixeli (10).
Figura 9.41
Remarci: 9 Atributul BORDER seteaz (n pixeli) limea unui chenar n jurul tabelului. 9 Valoarea prestabilit variaz, 2 sau 3 pixeli (n funcie de browser!). 9 Dac BORDER=0 atunci dispare chenarul i se elimin caroiajul din interiorul tabelului.
Figura 9.42
406
Remarc. Navigatorul afieaz tabelul cu bordur de 10 pixeli n jurul acestuia.
Centrai i dimensionai un tabel

Pentru a centra i dimensiona (200x400 pixeli) tabelul cu chenar, parcurgei paii prezentai n continuare. 1. Introducei 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 limii (height=200) tabelului (figura 9.43).
Figura 9.43
407
Figura 9.44
Aplicaii Mascai toate bordurile exterioare ale tabelului. Iat cum mascai conturul tabelului. 1. Introducei n tag-ul <TABLE> atributul border frame=void.
Figura 9.45 2. Validai documentul HTML 4 strict cu aplicaia validator.
408
3. Inserai codul . 4. Vizualizai pagina Web ntr-un browser (figura 9.46). HTML care afieaz icon-ul de conformitate
Figura 9.46
Remarc. Navigatorul mascheaz conturul tabelului.
Afiai numai bordura superioar a tabelului. Iat cum mascai bordurile laterale i bordura inferioar a tabelului. 1. Introducei n tag-ul <TABLE> atributul border frame=? nlocuind semnul de ntrebare (?) cu una din valorile: above (afieaz bordura superioar cazul nostru); below (afieaz bordura inferioar); hsides (afieaz bordura superioar i bordura inferioar); rhs (afieaz bordura din lateral dreapta); lhs (afieaz bordura din lateral stnga); vsides (afieaz bordurile din lateral stnga i lateral dreapta), figura 9.47.
409
Figura 9.48
Remarc. Navigatorul nu afieaz dect bordura superioar a tabelului.
410
Mascai toate bordurile interioare ale tabelului.
Remarc. Alt nume pentru bordurile interioare este "gouttires" n limba francez sau below n limba englez.
Iat cum mascai toate bordurile interioare ale tabelului. 1. Introducei n tag-ul <TABLE> atributul border rules=none.
Figura 9.50
Remarc. Navigatorul mascheaz toate bordurile interioare ale tabelului.
411
Afiai numai bordurile interioare care separ liniile orizontale ale tabelului. Iat cum afim numai bordurile interioare orizontale ale tabelului. 1. Introducei n tag-ul <TABLE> atributul border rules=? nlocuind semnul ntrebrii (?) cu una din valorile: rows (afieaz o linie orizontal - cazul nostru), cols (afieaz o linie vertical ntre fiecare coloan), groups (afieaz linii ntre coloanele i liniile tabelului), vsides (afieaz o bordur la stnga i la dreapta), rhs (afieaz o bordur la dreapta), lhs (afieaz o bordur la stnga), figura 9.51.
Figura 9.52
412
Remarc. Navigatorul nu afieaz dect bordurile interioare care separ fiecare linie.
XHTML
Aplicai o bordur tabelului
Aplicai o bordur exterioar

Iat cum aplicai o bordur de 10 pixeli tabelului CURSURI DE INFORMATIC. n figura 9.53 este prezentat documentul (parial) XHTML creat manual.
Figura 9.53
Remarci: 9 n HTML atributul border poate fi utilizat fr nici o valoare (<table border>) pentru a afia caroiajul (cu border) i a-l masca (fr border). 9 n XHTML atributul border trebuie utilizat ntotdeauna cu o valoare (table border=border).
. Rezultatul
413
Figura 9.54
Dimensionai un tabel
Iat cum dimensionm (200x400 pixeli) tabelul (centrat) cu chenar, realizat n aplicaia precedent. n figura 9.55 este prezentat documentul (parial) XHTML creat manual.
Figura 9.55
Remarc. n XHTML dimensiunile unui tabel se definesc cu atributele width i height ale cror valori se plaseaz obligatoriu ntre ghilimele.
414
. Rezultatul
Figura 9.56
HTML
Aliniai orizontal datele unui tabel
Pentru a mbuntii lizibilitatea datelor ntr-un tabel, le putei alinia orizontal, vertical n celulele lor. Iat cum aliniai (centrai) orizontal datele din toate celulele care aparin primei linii de date a tabelului CURSURI DE INFORMATIC. 1. Introducei 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 afieaz centrat datele din prima linie de date a tabelului.
416
Aplicaie Aliniai la dreapta datele dintr-o singur celul: UTILIZARE PC-uri care aparine primei linii de date. Indicaie. Introducei 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 lime specificat, celula afectat se va extinde pe orizontal pentru a permite textului s ncap. 9 Atunci cnd limea tabelului este exprimat n procente, limea tabelului se extinde pentru a putea conine celula de dimensiune mai mare.
XHTML
Aliniai orizontal datele unui tabel
Dispunei de mai multe posibiliti pentru a alinia coninutul celulelor. Soluia 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. tii deja s utilizai parametrii center, left, right i justify pentru a defini aliniamentul orizontal. Noutatea este de a putea alinia coninutul celulelor n raport cu un caracter specific. (Exemplu: <td align=char char=,>). Pentru a alinia rapid celulele unei linii, indicai direct aliniamentul tag-ului <tr>.
Remarc. Putei de asemenea utiliza un stil i atributul text-align, dar mai simplu este s folosii atributul XHTML align pentru elementele tabelului.
Iat cum aliniai (centrai) orizontal datele din toate celulele care aparin primei linii de date a tabelului CURSURI DE INFORMATIC, utiliznd documentul HTML tabel.htm creat anterior, pe care apoi l convertim cu programul utilitar HTML-TIDY.
417
n figura 9.59 se prezint documentul XHTML generat (automat).
Figura 9.59
Inserai codul HTML care afieaz icon-ul de conformitate figura 9.60.
418
Figura 9.60
HTML
Aliniai vertical datele unui tabel
Alinierea vertical a datelor structurate ntr-un tabel determin amplasarea corespunztoare a datelor n raport cu bordurile superioare i inferioare ale celulelor. Iat cum aliniai vertical la baza celulelor (bottom), datele din toate celulele care aparin primei linii de date a tabelului CURSURI DE INFORMATIC. 1. Introducei 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 aparin primei linii de date a tabelului se aliniaz la baza celulelor.
420
Aplicaie Aliniai vertical (middle) datele dintr-o singur celul de date: UTILIZARE PC-URI ce aparine tabelului CURSURI DE INFORMATIC. Indicaie. Introducei n tag-ul <TD> al celulei de date UTILIZARE reprezint tipul de aliniere dorit. <TD valign=middle> UTILIZARE PC-URI </TD> PC-URI
atributul valign=? nlocuind semnul de ntrebare cu valoarea middle care
XHTML
Aliniai vertical datele unui tabel
Pentru alinierea coninutului utilizai atributul XHTML valign n tag-urile <tr> sau <td>. Asignai valorile: top, bottom, middle, baseline. Putei de asemenea utiliza un stil i atributul vertical-align. Iat cum aliniai vertical, la baza celulelor (bottom), datele din toate celulele care aparin primei linii de date a tabelului CURSURI DE INFORMATIC, utiliznd 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
Inserai codul HTML care afieaz icon-ul de conformitate figura 9.64.
422
Figura 9.64
HTML
Modificai spaiul dintre celulele unui tabel
Putei modifica dimensiunea bordurilor care separ celulele unui tabel. Iat cum modificm (10 pixeli) spaiul dintre celulele tabelului CURSURI DE INFORMATIC. 1. Introducei 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 spaiul de 10 pixeli ntre celulele tabelului.
XHTML
Modificai spaiul dintre celulele unui tabel
Pentru a modifica distana dintre celule, creai clase i utilizai 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). Putei de asemenea modifica distana dintre celulele unui tabel, utiliznd o mai veche cunotin a noastr atributul cellspacing (vezi HTML)!
424
Acest atribut nu poate fi definit dect pentru toate celulele tabelului, n tag-ul <table>. Iat cum modificm (10 pixeli) spaiul dintre celulele tabelului CURSURI DE INFORMATIC. n figura 9.67 este prezentat documentul (parial) XHTML creat manual.
Figura 9.67 Aplicaie Utilizai atributul CSS margin pentru a modifica spaiul (10 pixeli) dintre celulele tabelului CURSURI DE INFORMATIC. n figura 9.68 este prezentat documentul (parial) XHTML.
Figura 9.68
425
. Rezultatul vizualizrii paginii
Figura 9.69
HTML
Modificai dimensiunile liniilor unui tabel
Putei modifica nlimea, lungimea liniilor unui tabel, deci implicit i dimensiunile tabelului. Iat cum modificm, cu 60 respectiv 120 de pixeli nlimea primelor dou linii ale tabelului CURSURI DE INFORMATIC. 1. Introducei n tag-ul <TR> al primei linii a tabelului, atributul height=? nlocuind semnul de ntrebare (?) cu valoarea n pixeli (60) a nlimii (figura 9.70).
426
Figura 9.70
2. Introducei 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 afieaz nlimea 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 aceeai lungime!) urmrii procedura descris n continuare. 1. Introducei 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 influeneaz lungimea celorlalte linii, deci i a lungimii tabelului.
Figura 9.74
Remarc. n navigator, toate liniile se vor afia cu lungimea de 400 de pixeli.
Aplicaii Redimensionai tabelul CURSURI DE INFORMATIC cu valorile 550x350 pixeli. Indicaie. Introducei n tag-ul <TABLE> atributele width=? i height=? nlocuind semnele de ntrebare cu 550 respective 350 pixeli.
429
<TABLE width=550 height=350> Modificai lungimea primei coloane (Denumire curs) a tabelului CURSURI DE INFORMATIC cu valoarea 130 pixeli. Indicaie. Pentru a modifica lungimea unei coloane este suficient de a schimba lungimea unei singure celule din coloana respectiv. Introducei n tag-urile <TH> sau <TD> ale unei celule care aparine primei coloane atributul width=? nlocuind semnul de ntrebare (?) cu valoarea dorit (130) exprimat n pixeli. <TH width=130>Denumire curs </TH> Modificai nlimea primei celule (Denumire curs) a tabelului CURSURI DE INFORMATIC cu valoarea 150 pixeli. Indicaie. Introducei n tag-urile <TH> sau <TD> atributul height=? nlocuind semnul de ntrebare (?) cu valoarea dorit (150 pixeli). <TH height=150>Denumire curs </TH> Modificai limea celei de-a treia celule de date (50$) a tabelului CURSURI DE INFORMATIC, cu valoarea 120 pixeli. Indicaie. Introducei n tag-ul <TH> sau <TD> atributul width=? nlocuind semnul de ntrebare (?) cu valoarea dorit (120 pixeli). <TD width=120>50$ </TD>
XHTML
Modificai dimensiunile liniilor unui tabel
Putei modifica nlimea sau lungimea liniilor unui tabel cu atributele height respectiv width utiliznd valori absolute sau relative. Putei de asemenea modifica dimensiunile liniilor unui tabel utiliznd clase CSS (Cascading Style Sheets), metod recomandat de W3C. Iat cum modificm, cu 60 respectiv 120 de pixeli nlimea primelor dou linii ale tabelului CURSURI DE INFORMATIC.
430
n figura 9.75 este prezentat documentul (parial) XHTML creat manual.
Figura 9.75
Remarc. Evitai pe ct posibil s definii coordonatele (lungime, lime) celulelor tabelelor pe care le creai. De multe ori, datorit restriciilor impuse, navigatorul este tentat s reformateze tabelul iar rezultatele, n acest caz pot fi imprevizibile.
. Rezultatul
Figura 9.76
431
Aplicaii Modificai lungimea primei linii (100 pixeli) a tabelului. Modificai lungimea primei coloane (130 pixeli) a tabelului.
HTML
tabel.
Modificai marginile interioare ale celulelor unui tabel
Putei modifica spaiul dintre coninutul i marginile fiecrei celule a unui
Iat cum aplicm un spaiu de 15 pixeli ntre coninutul i marginile fiecrei celule din tabelul CURSURI DE INFORMATIC. 1. Introducei n tag-ul <TABLE> atributul cellpadding=? nlocuind semnul de ntrebare (?) cu valoarea n pixeli (15) a spaiului din jurul coninutului fiecrei celule (figura 9.77).
Figura 9.77
432
Figura 9.78
Remarc. Navigatorul aplic un spaiul de 15 pixeli n jurul coninutului fiecrei celule.
XHTML
Modificai marginile interioare ale celulelor unui tabel
Pentru a modifica distana dintre coninutul i bordura unui tabel creai clase i utilizai atributele CSS padding. Putei de asemenea utiliza atributul cellpadding dar, el trebuie definit pentru toate celulele tabelului, n tag-ul <table>. Iat cum aplicm un spaiu de 15 pixeli ntre coninutul i marginile fiecrei celule din tabelul CURSURI DE INFORMATIC. n figura 9.79 este prezentat documentul (parial) XHTML creat manual.
433
Figura 9.79
. Rezultatul
Figura 9.80
434
Aplicaie Utilizai atributul CSS padding pentru a aplica un spaiu de 15 pixeli ntre coninutul i marginile fiecrei celule din tabelul CURSURI DE INFORMATIC. n figura 9.81 este prezentat documentul (parial) XHTML creat manual.
Figura 9.81 Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate
. Rezultatul vizualizrii paginii
435
Figura 9.82
HTML
Extindei o celul pe mai multe coloane sau linii
Putei reuni dou sau mai multe celule ntr-una singur. Metoda difer atunci cnd dorii o extindere (fuziune) pe mai multe coloane (alipirea coloanelor) sau pe mai multe linii (alipirea liniilor). Iat cum adugai n tabelul CURSURI DE INFORMATIC o nou linie de antet: INFORMATICA, care se extinde pe toate cele trei coloane ale tabelului. 1. Introducei n tag-ul <TH> al noii linii atributul colspan=?, nlocuind semnul de ntrebare (?) cu numrul de coloane (3) pe care dorii extinderea celulei (figura 9.83).
436
Figura 9.83
2. Introducei 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 uor de neles.
437
Figura 9.85
Remarci: 9 Navigatorul afieaz noua linie de titlu (INFORMATICA) pe lungimea celor 3 coloane. 9 Pentru fuziunea tuturor celulelor unei linii, introducei atributul colspan=0.
Pentru a extinde prima celul de date UTILIZARE PC-URI pe dou linii, aplicai procedura descris n continuare. 1. Introducei n tag-ul <TD> al primei celule de date, atributul rowspan=?, nlocuind semnul de ntrebare (?) cu numrul de linii (2) pe care dorii 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 puin mai dificil de neles.
Figura 9.87
439
Remarci: 9 Navigatorul afieaz prima celul de date extins pe dou linii. 9 Pentru fuziunea tuturor celulelor unei coloane introducei rowspan=0. atributul
XHTML
Extindei o celul pe mai multe coloane sau linii
Pentru fuzionarea celulelor unui tabel Web utilizai atributele colspan, rowspan sau foile de stiluri CSS. Iat cum adugai n tabelul CURSURI DE INFORMATIC o nou linie de antet: INFORMATICA, care se extinde pe toate cele trei coloane ale tabelului. n figura 9.88 este prezentat documentul (parial) XHTML creat manual.
Figura 9.88 Aplicaie Extindei prima celul de date UTILIZARE PC-URI pe dou linii. Indicaie. Introducei n tag-ul <td> al primei celule de date, atributul rowspan=2.
440
HTML
Aplicai o culoare elementelor unui tabel
Putei colora o linie, o coloan sau o singur celul ale unui tabel. Atenie, la simul culorilor! Iat cum aplicai o culoare (albastru deschis) primei linii a tabelului CURSURI DE INFORMATIC. 1. Introducei 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 aplicai aceeai culoare (albastru deschis) primei coloane a aceluiai tabel. 1. Introducei 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 afieaz colorat (lightblue) celulele primei coloane a tabelului. 9 Putei aplica o culoare unei singure celule.
Aplicaie Colorai n cyan background-ul tabelului "CURSURI DE INFORMATIC". Colorai n aqua linia de antet (prima linie a tabelului) i n white a doua linie (de date) a aceluiai tabel. Indicaie. Introducei n tag-ul <TABLE> atributul bgcolor=cyan. <TABLE border=10 bordercolor="#0000FF" cellspacing="10" cellpadding="15" align bgcolor=cyan>
444
XHTML
Aplicai o culoare elementelor unui tabel
Iat cum aplicai o culoare (albastru deschis) primei linii a tabelului CURSURI DE INFORMATIC. n figura 9.93 este prezentat documentul XHTML creat manual.
Figura 9.93
445
. Rezultatul
Figura 9.94 Aplicaie Aplicai aceeai culoare (albastru deschis) primei coloane a aceluiai tabel. Indicaie. Aplicai clasa td.lightblue{background-color:lightblue} celor trei tag-uri <td> i tag-ului <th>Denumire curs</th>.
Aplicai o imagine de background unui tabel
HTML
sau unei celule a tabelului
Aa cum ai plasat o imagine pe fundalul (background, n limba englez; arrire-plan, n limba francez) paginii dumneavoastr Web, tot aa vei
446
putea plasa o imagine pe fundalul unui tabel sau al unei celule a tabelului. Iat cum plasai pe fundalul tabelului CURSURI DE INFORMATIC, aceeai imagine, pe care ai aplicat-o i pe fundalul paginii Web. 1. Introducei 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 aceeai imagine de background n prima celul de date a tabelului, "UTILIZARE PC-uri" urmrii procedura descris n cele ce urmeaz. 1. Introducei n tag-ul <TD> PC-uri" atributul al celulei de date "UTILIZARE nlocuind semnul de
background="?",
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.
XHTML
Aplicai o imagine de background unui tabel sau unei celule a tabelului
Pentru a aplica o imagine de background (n loc de a umple background-ul celulelor cu o culoare) creai un stil cruia i definii imaginea cu atributul background-image. Iat cum plasm pe fundalul tabelului CURSURI DE INFORMATIC aceeai imagine pe care ai aplicat-o i pe fundalul paginii Web. n figura 9.99 este prezentat documentul (parial) XHTML creat manual.
Figura 9.99 Remarc. Putei aplica (unui tabel / unei celule) o imagine de background, utiliznd atributul CSS, background-image.
. Rezultatul
449
Figura 9.100 Aplicaie Plasai aceeai imagine de background n prima celul de date Utilizare PC-uri a tabelului.
HTML
Utilizai un tabel ca un instrument de punere n pagin
Putei utiliza un tabel pentru a defini structura global a paginii dumneavoastr Web. Putei insera o imagine n celula unui tabel pentru a putea controla mai uor poziia pe care aceasta o ocup n pagina dumneavoastr Web. Iat cum plasm aceeai imagine n Tabelul 9.3.
450
Tabelul 9.3
1. Pentru a extinde celula care conine imaginea specificat utilizai metoda alipirea liniilor, introducnd 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 inserm (figura 9.101).
Figura 9.101
451
Figura 9.102 Remarc. Navigatorul afieaz imaginea n celula specificat.
XHTML
Utilizai un tabel ca un instrument de punere n pagin
Uitai-v la codul surs al paginilor dumneavoastr preferate i vei descoperii (putem paria!) c acestea au fost create cu ajutorul tabelelor! n continuare, v prezint cteva din paginile mele preferate care sunt create (parial) cu ajutorul tabelelor: 9 9 9 9 www.yahoo.com www.webdeveloper.com www.microsoft.com www.sun.com
452
Iat cum plasm imaginea Blue hills.jpg n tabelul urmtor (vezi HTML, utilizai un tabel ca un instrument de punere n pagin). n figura 9.103 este prezentat documentul (parial) XHTML creat
manual.
Figura 9.103
. Rezultatul
Figura 9.104
453
(X)HTML
Testai-v cunotinele
Tem
1. Precizai tag-urile (X)HTML cu care putei construi tabele. 2. Descriei pe scurt procedura (X)HTML de aliniere orizontal/vertical a datelor structurate ntr-un tabel. 3. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web din figura 9.105.
Figura 9.105
4. Precizai care este codul surs XHTML care a stat la baza crerii paginilor Web din figura 9.106.
454
Figura 9.106
Vizitai site-urile
9 www.yahoo.com 9 www.webdeveloper.com 9 www.sun.com
Conversaia 10
Creai formulare cu HTML 4 i XHTML

f f f f f f f f f f f f
Regulile de aur ale formularelor HTML 4, XHTML Creai un formular HTML 4, XHTML Precizai metoda i script-ul utilizate HTML 4, XHTML Creai un buton pentru expedierea (submit) unui formular HTML 4, XHTML Creai un buton pentru resetarea (reset) unui formular HTML 4, XHTML Inserai o zon simpl de text HTML 4, XHTML Definii mrimea unei zone (simple) de text HTML 4, XHTML Inserai o zon de text multilinie HTML 4, XHTML Creai o caset de validare HTML 4, XHTML Creai un buton radio HTML 4, XHTML Creai un meniu derulant (X)HTML Tem
Regulile de aur ale formularelor

nainte de a ncepe proiectarea, realizarea unui formular n (X)HTML este important s cunoatei cteva din regulile de ... aur ale formularelor, pe care apoi este bine s le i aplicai.
456
Stabilii coninutul formularului i forma de prezentare.
Reguli: 9 Identificai informaiile ce urmeaz a fi incorporate n formular i stabilii forma de prezentare a acestora. 9 Structurai aceste informaii n mai multe ntrebri elementare, uor de prelucrat. De exemplu, dac aceste informaii se refer la un client,
putei s le structurai n: nume, prenume, adres, existnd astfel posibilitatea efecturii unor sortri pe anumite zone particulare ale formularului.
9 O bun proiectare a formularului v va scuti de posibile reveniri, modificri! Un formular bine conceput nu poate dect s ncurajeze utilizatorii n a v transmite informaiile dorite. 9 Verificai dac obiectivele propuse se verific cu rspunsurile la urmtoarele ntrebri: ce informaii dorii s obinei de la utilizator? Ct timp vor consuma utilizatorii pentru completarea formularului? 9 ncurajai utilizatorii s completeze i apoi s expedieze formularele. Dac formularele dumneavoastr sunt dificil de completat, riscai de a nu primi nici un rspuns! Oferii utilizatorilor dumneavoastr mici bonusuri, chiar dac valoarea acestora este nesemnificativ. Dac ai ti ct 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 Utilizai header-e pentru a anuna fiecare nou grup de informaii. n acest mod, utilizatorii se pot orienta mult mai uor n formular. 9 Separai vizual grupurile de informaii. n acest mod, utilizarea formularului va fi mult uurat, ntruct seciunile vor deveni mai scurte i mai uor de urmrit. Putei utiliza linii orizontale sau elementul (X)HTML <fieldset> pentru a le realiza.
457
9 Scoatei n relief, fr a exagera cteva cuvinte din pagin pentru a le pune n eviden. 9 Specificai modul n care utilizatorii trebuie s se deplaseze n formular. 9 Avei n vedere rezoluia monitoarelor, coloanele multiple pe care le propunei n sondajul dumneavoastr i nu doar att. 9 Folosii sgeile pentru a ajuta utilizatorii s navigheze n pagin, ntr-o anumit ordine. 9 Utilizai rupturile de linie i spaiile pentru a obine o difereniere clar a informaiilor de descriere asociate anumitor butoane (de exemplu,
casetele de validare).
9 Specificai cmpurile care sunt opionale i cele care sunt obligatorii. Plasai cmpurile opionale dup cmpurile obligatorii. Anumite navigatoare i aplicaii de procesare rejecteaz formularele completate n mod incorect. 9 Utilizai o imagine de background. 9 Plasai n stnga formularului zonele de date de aceeai lungime. Textul se va alinia vertical i va deveni mult mai agreabil. 9 Folosii urmtoarele cmpuri (controale) pentru colectarea datelor: butoane de tip submit i reset; cmpurile de text; cmpurile de text multilinie; zonele de list; butoanele radio; casetele de validare. 9 Butoanele submit i reset trimit server-ului informaiile colectate n formular i iniializeaz formularul. 9 Cmpurile de text sunt zone simple de text. Utilizai-le pentru rspunsuri scurte, ca de exemplu: nume, adrese etc. 9 Cmpurile de text multilinie sunt zone mai mari de text, cu mai multe linii. n aceast zon pot fi introduse comentarii, sugestii, instruciuni de livrare etc.
458
9 Zonele de list sunt cmpuri n care utilizatorii pot introduce o list de opiuni. Folosii-le pentru a prezenta liste lungi (dar finite) de opiuni. 9 Butoanele radio ofer utilizatorilor posibilitatea de a selecta o singur opiune (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 opiuni din cadrul unei liste. 9 Atunci cnd alegei cmpurile pentru un formular reflectai cu atenie la informaia pe care dorii s o colectai. n general, butoanele radio, casetele de validare i zonele de list sunt preferate zonelor de text. Dac utilizatorii aleg rspunsul lor dintr-o list, nu vei mai avea greeli de ortografie, rspunsuri incoerente sau rspunsuri n afar de subiect. Aceast metod este cea mai bun metod atunci cnd este posibil s propunei o list utilizatorilor!
Creai formularele manual sau cu editoarele WYSIWYG.

Reguli: 9 Putei crea manual formularele cu limbajele (X)HTML sau automat cu editoarele WYSIWYG (What You See Is What You Get). 9 Utilizai un editor WYSIWYG (de exemplu, Dreamweaver) atunci cnd dorii s creai mai multe formulare (de baz). Aceste editoare nu genereaz ntotdeauna rezultate satisfctoare, dar ele v permit s nu uitai nici un element sau atribut. 9 Utilizai (X)HTML (procedura manual) atunci cnd creai unul sau dou formulare. n acest caz este mai bine s folosii procedura manual (X)HTML, dect s nvai modul de utilizare a unui editor WYSIWYG.
Semnai ... de primire!
459
Reguli: 9 Realizai o pagin de confirmare de primire (recepie), un document pe care l returnai utilizatorului, precizndu-i c formularul a fost bine primit. Folosii 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 conine toate ideile dumneavoastr! Putei lega aceast pagin de pagina de index a site-ului dumneavostr. Nu uitai c utilizatorul a alocat un fond de timp pentru a completa formularul dumneavoastr. Se impune o form de respect, n acest sens!
HTML
Creai un formular
Formularele sunt ideale pentru a realiza o interactivitate ntre dumneavoastr i vizitatorii site-ului pe care l-ai creat. Formularele, structurate n cmpuri i zone de date, v permit s primii n mod simplu mesaje de la vizitatorii site-ului dumneavoastr. nainte de toate, trebuie s precizai btrnului Notepad c dorii s creai un formular. Iat cum procedai pentru a crea un formular n HTML. 1. Creai o nou pagin HTML (figura 10.1).
Figura 10.1
460
2. Introducei imediat sub tag-ul <BODY>, tag-ul <FORM> (figura 10.2).
Figura 10.2
3. Acionai de mai multe ori tasta Enter i introducei tag-ul final </FORM>.
Figura 10.3
Remarc. Elementul <FORM> constituie un bloc care poate fi inserat direct n corpul documentului <BODY>.
4. Introducei elementul <FIELDSET> (figura 10.4).
Figura 10.4
461
Remarci: 9 Elementul <FORM> conine unul sau mai multe elemente <FIELDSET> care vor delimita fiecare, un subansamblu de componente active. 9 Prezena a cel mai puin unui element <FIELDSET> este obligatorie, ntruct componentele nu trebuie s fie incluse direct n <FORM>. 9 Grafic, fiecare subansamblu va fi delimitat n navigator printr-o bordur subire n care, pentru fiecare, se va integra un titlu particular. Acest titlu este creat cu ajutorul elementului <LEGEND>. 9 Fiecare grup <FIELDSET> poate conine paragrafe, titluri i alte elemente. 9 Putem de asemenea structura un formular cu ajutorul unui tabel, elementul <TABLE> fiind inclus direct n <FORM>.
5. Validai documentul HTML4 Strict cu aplicaia validator. 6. Inserai codul HTML care afieaz icon-ul de conformitate . 7. Vizualizai pagina Web ntr-un browser (figura 10.5).
Figura 10.5
Remarc. n navigator, pentru moment, n afar de codul de conformitate nu se afieaz nici o informaie.
XHTML
Creai un formular
Nu uitai c XHTML funcioneaz n dou sensuri i c putei utiliza paginile dumneavoastr Web pentru a colecta informaii de la cititorii pe care i meritai.
Remarc. Dac ai folosit un motor de cutare pe Internet, precum Hot Bot sau Yahoo, aflai (dac nu tiai!) c acestea sunt formulare HTML.
462
n continuare, vreau s punctez cteva lucruri pe care s le avei n vedere atunci cnd creai formulare XHTML.
9 Fiecare formular trebuie s nceap cu tag-ul <form> i s se termine cu tag-ul de nchidere </form>. 9 Obinuii-v s denumii fr echivoc fiecare formular cu ajutorul atributelor name i id (figura 10.6).
Figura 10.6 9 Indicai numele formularului prin atributul id pentru a asigura compatibilitatea cu XHTML. Nu uitai 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 cror tip l putei 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=.. /> conine slash-ul terminal. 9 Creai (personalizai) un buton pentru expedierea formularului i un altul pentru resetarea formularului. 9 Fiecare cmp al formularului <input type=tip /> ar trebui s aib i atributele name i id. 9 Testai buna funcionare a formularului Web prin Java Script.
Iat cum procedai pentru a crea un formular n XHTML.
463
Figura 10.7
Figura 10.8
HTML
Precizai metoda i script-ul utilizate
Formularele ofer vizitatorilor posibilitatea de a trimite administratorului site-ului (dumneavoastr) ntrebri, comentarii, pe scurt mesaje.
464
Formularele au n structura sa dou pri elementare: partea vizibil, alctuit din cmpuri pentru colectarea datelor (butoane, zone de text, meniuri derulante) i partea non vizibil care precizeaz modul n care server-ul prelucreaz informaiile. De partea non vizibil a unui formular ne vom ocupa n cele ce urmeaz. Pentru relaionarea ntre vizitator i server-ul dumneavoastr trebuie s utilizai script-uri CGI (Common Gateway Interface). Script-ul CGI este, n cteva 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 vei vedea n cele ce urmeaz, fiecare element al unui formular conine un nume i o valoare.
Numele permite identificarea datelor transmise, n timp ce valoarea corespunde

datelor n sine. Atunci cnd vizitatorul expediaz un formular, datele
nume-valoare sunt transmise server-ului. Script-ul CGI va extrage toate aceste

date i le va aranja astfel nct ele s devin utilizabile. ntr-un formular se creeaz butoane, legturi hipertext, cu scopul de a transmite datele introduse de vizitator (partea vizibil a formularului). n moment ce vizitatorul a activat butonul sau legtura hipertext are loc transmiterea datelor. Dou metode sunt posibile: GET i POST.
Iat cum precizm metoda prin care datele sunt comunicate server-ului, precum i legtura ctre un script CGI. 1. Introducei 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 definete 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 Consultai site-urile: www.perl-gratuit.com; www.cgis.fr.
2. Introducei 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 crei prezen este obligatorie, conine adresa URL (relativ sau absolut) a script-ului CGI. Aceste script-uri sunt scrise n general n limbajul Perl sau n PHP. Putei utiliza pentru atributul action, valoarea mailto:, urmat de adresa dumneavoastr de e-mail.
3. Validai documentul HTML4 strict cu aplicaia validator.
466
4. Inserai codul HTML care afieaz icon-ul de conformitate
.
Figura 10.11
Remarc. n navigator, pagina ncepe s prind contur!
XHTML
Precizai metoda i script-ul utilizate
n general, dup ce ai executat clic pe butonul de expediere al formularului (buton de tip submit), informaiile din formular sunt transmise server-ului Web sau programului definit prin atributul action al formularului. Programul va executa ceea ce dumneavoastr i-ai spus s fac! Serverul poate s realizeze urmtoarele aciuni:
9 s expedieze informaiile prin e-mail; 9 s expedieze informaiile ntr-o baz de date; 9 s expedieze informaiile unui newsgroup sau unei pagini Web; 9 s utilizeze informaiile de intrare pentru a cuta ntr-o baz de date.
467
Independent de metodele de prelucrare a informaiilor, dumneavoastr putei aduga atribute specifice n tag-ul de deschidere <form>, dup cum urmeaz: 9 action=...; 9 method=.... n general, documentaia 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 su Web informaii 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/usermail.txt>. 9 Nu uitai s ... tiai liniile foarte lungi, cum este cazul liniei precedente.
Numeroase servere Web au script-uri sau comenzi incorporate pentru a trata informaiile din formulare; alte servere, ca de exemplu Unix, necesit programe suplimentare.
Remarci: 9 Pentru a cunoate opiunile de prelucrare ale formularului, consultai administratorul server-ului dumneavoastr sau vizitai site-ul Web al furnizorului de acces Internet. 9 Este puin probabil, cel puin la nceput c vei adopta soluia e-mail. Se afl la dispoziia dumneavoastr programul cgiemail realizat i distribuit gratuit de MIT, dar disponibil numai pentru serverele Unix. Consultai site-ul: http://web.mit.edu/wwwdev/cgiemail/index.html pentru a obine ultimele informaii privind cgiemail. 9 Un program comparabil cu cgiemail pentru Windows 95/98/NT/2000, Mailpost pentru un server Web Windows pe 32 de bii, este accesibil la adresa: www.mcenter.com/mailpost.
Iat cum precizm metoda prin care datele sunt comunicate server-ului. n figura 10.12 este prezentat documentul XHTML creat manual.
468
Figura 10.12
Remarc. Putei utiliza pentru atributul action, valoarea mailto:, urmat de adresa dumneavoastr de e-mail.
Figura 10.13
469
HTML
Creai un buton pentru expedierea (submit) unui formular
Pentru ca vizitatorii s-i poat expedia formularele, trebuie s creai un buton de tip (submit) care s le permit aceast operaie. Iat cum construim un buton de tip submit (expediaz). 1. Introducei ntre <LEGEND><B> i </B><LEGEND> eticheta corespunztoare 10.14). butonului Expediai formularul (figura
Figura 10.14
2. Introducei 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 putei controla direct dimensiunea butonului; numai lungimea textului poate fi determinat.
471
Aplicaie Creai un buton imagine pentru expedierea unui formular. Iat cum procedm pentru a crea un buton imagine, n locul textului EXPEDIAI. 1. Introducei eticheta corespunztoare butonului Expediai formularul (figura 10.17).
Figura 10.17 2. Introducei tag-ul <BUTTON name=submit>.
472
3. Introducei 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. Introducei tag-ul final </BUTTON> (figura 10.19).
473
Figur10.20
Remarc. n navigator, butonul pentru expedierea formularului are un aspect mult mai simpatic!
XHTML
Creai un buton pentru expedierea (submit) unui formular
Iat cum construim un buton de tip submit (expediaz) n XHTML. n figura 10.21 este prezentat documentul XHTML creat manual.
474
Figura 10.21
Remarci: 9 Pentru a crea un buton de tip submit utilizai 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 Personalizai butonul de expediere utiliznd Java Script (figura 10.22).
Figura 10.22
Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate .
n figura 10.23 este prezentat rezultatul vizualizrii 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 utilizai codul XHTML: <input type=image name=point src=submit.gif />, nlocuind propria imagine cu submitbutton.gif.
Aplicaie Creai un buton imagine pentru expedierea unui formular.
HTML
Creai un buton pentru resetarea (reset) unui formular
Pentru ca vizitatorii s-i poat corecta eventualele erori, inerente n completarea unui formular, trebuie s creai un buton care s le permit aceast operaie. Iat cum construim un buton de tip reset (tergere). 1. Introducei eticheta corespunztoare butonului: Resetai
formularul (figura 10.24).
476
Figura 10.24
2. Introducei 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 acionnd butonul STERGETI.
XHTML
Creai un buton pentru resetarea (reset) unui formular
Iat cum construim un buton de tip reset (tergere) n XHTML. n figura 10.27 este prezentat documentul XHTML creat manual.
Figura 10.27
478
Remarci: 9 Putei ilustra butonul de expediere utiliznd tag-ul <button> i tipul reset. 9 Personalizai butonul de expediere utiliznd Java Script (alert()).
Figura 10.28
Remarci: 9 Limbajul XHTML nu a fost prevzut cu un buton de tip reset grafic. 9 Dac utilizatorii folosesc navigatoare conforme cu specificaiile HTML 4 i de versiuni recente, putei 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 aciuni specifice asociate, ca n cazul butoanelor submit i reset. Dac totui dorii acest lucru, putei lega butonul cu un script Java Script. 9 Pentru a crea un buton submit cu elementul button utilizai 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 utilizai un cod de forma: <button type=reset value=reset name=reset><img src=... alt=... /></button>.
HTML
Inserai o zon simpl de text
Zonele simple de text sunt ideale pentru vizitatori. Ele permit acestora introducerea unor informaii scurte, precum numele, prenumele etc.
479
Iat cum inserm n formular coordonatele unui vizitator; pentru nceput, numele acestuia. 1. Introducei tag-ul <INPUT> (figura 10.29).
Figura 10.29
Remarci: 9 Tag-ul pereche <INPUT> este utilizat pentru specificarea cmpurilor (zonelor) unui formular destinate introducerii datelor. 9 <INPUT> este prevzut cu un foarte mare numr de atribute.
2. Introducei,
continuare,
tag-ul
<INPUT>
atributul
type=text pentru a preciza c zona (nume) va conine text (figura 10.30).
Figura 10.30
480
3. Introducei, 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 recepionrii lor de ctre server (figura 10.31).
Figura 10.31
4. Introducei, n continuare eticheta Nume (figura 10.32).
Figura 10.32
481
Figura 10.33 Remarc. n navigator se afieaz prima zon simpl de text (Nume). Aplicaie Inserai, n continuare, n formular, cea de a doua coordonat personal a unui vizitator: prenumele respectnd regula de aur a formularelor.
XHTML
prenumele.
Inserai o zon simpl de text
Iat cum inserm n formular coordonatele unui vizitator: numele i
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 aceeai zon (simpl) de text ca i <input />. 9 Putei de asemenea modifica proprietile unei zone de text a unui formular Web (n afara atributului type) utiliznd atributele name/id, size, maxlenght, value. 9 Utilizai atributul name pentru a identifica fr echivoc zona de text. Pentru a asigura compatibilitatea cu XHTML utilizai atributul id cu aceeai valoare pe care ai atribuit-o lui name. 9 Valorile lui name trebuie s fie unice n interiorul unui formular.
483
Figura 10.35
HTML
Definii mrimea unei zone (simple) de text
Putei mri sau micora mrimea unei zone de text, indicnd cu precizie dimensiunea (numrul de caractere) zonei. Iat cum definim mrimea celor dou zone de text: nume, prenume.
Size-ul propus pentru cele dou zone este '30', respectiv '20' caractere.
1. Introducei 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. Introducei, n continuare, eticheta Nume (figura 10.37).
Figura 10.37
3. Introducei 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, introducei n tag-ul <INPUT> atributul maxlength=?, nlocuind semnul de ntrebare (?) cu numrul maxim de caractere acceptat.
4. Introducei, 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 aceeai lungime.
XHTML
Definii mrimea unei zone (simple) de text
Iat cum definim mrimea celor dou zone de text: nume, prenume. Size-ul propus pentru cele dou zone este de 30, respectiv 20 de caractere. n figura 10.41 este prezentat documentul XHTML creat manual.
486
Figura 10.41
Remarc. Atributul (facultativ) size indic dimensiunea zonei de introducere text. El este calculat n caractere i nu ine cont de numrul de caractere introdus de utilizator.
Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate Microsoft Internet Explorer. .
n figura 10.42 este prezentat rezultatul vizualizrii paginii Web n
Figura 10.42
487
HTML
Inserai o zon de text multilinie
Putei crea o zon mai mare de text, cu mai multe linii. n aceast zon (fereastr) multilinie pot fi introduse comentarii, instruciuni de livrare, sugestii, adresa vizitatorului etc. Dimensiunile zonei de text cu linii multiple se specific prin numrul de linii i de coloane. Iat cum inserm, n continuare, cea de a treia coordonat personal a unui vizitator: adresa. 1. Introducei figura 10.43. tag-ul <TEXTAREA> cu atributul name=?,
nlocuind semnul de ntrebare (?) cu valoarea zonei (adresa),
Figura 10.43
2. Introducei, n continuare, n tag-ul <TEXTAREA> atributele rows=? i cols=x, nlocuind semnul de ntrebare (?) cu numrul de linii (5) i x-ul cu numrul de coloane (30) al zonei, exprimat n caractere (figura 10.44).
Figura 10.44
488
3. Introducei tag-ul final </TEXTAREA> (figura 10.45).
Figura 10.45
4. Introducei 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.
Aplicaie Inserai n formular o zon de text pentru password (parol). Indicaie. Introducei n tag-ul <INPUT> atributul type=password pentru a preciza c zona va conine o parol i apoi atributul name=?, nlocuind semnul de ntrebare (?) cu valoarea zonei (parola).
XHTML
Inserai o zon de text multilinie
Iat cum inserm cea de a treia coordonat personal a unui vizitator adresa, utiliznd o zon de text multilinie (5 x 30). n figura 10.48 este prezentat documentul XHTML creat manual.
Figura 10.48
Remarci: 9 Tag-urile XHTML cu care putei crea o zon de text multilinie sunt <textarea> </textarea>. Cu atributele cols i rows definii limea i lungimea zonei de text multilinie. 9 Principalele atribute ale elementului <textarea> sunt: cols=n; rows=n; name/id=.... 9 Nu confundai cmpul de text care conine un text scurt cu zona de text care conine un text lung.
490
Figura 10.49 Aplicaie Inserai n formular o zon de text pentru password.
HTML
Creai o caset de validare
Casetele de validare permit vizitatorului dumneavoastr de a selecta una sau mai multe opiuni pe care le propunei. Iat cum crem 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 BLND.
491
1. Introducei patru tag-uri <INPUT type=checkbox> pentru a preciza c zona va conine o caset de validare (figura 10.50).
Figura 10.50
2. Introducei, n continuare, n tag-ul <INPUT> al fiecrei casete de validare atributul name=?, nlocuind semnul de ntrebare (?) cu numele simbolic al valorii fiecrei zone (C1, C2, C3, C4), figura 10.51.
Figura 10.51
492
3. Introducei, n continuare, n tag-ul <INPUT> al fiecrei casete de validare atributul value=?, nlocuind semnul de ntrebare (?) cu valoarea casetei (figura 10.52).
Figura 10.52
Remarci: 3 Informaiile pe care trebuie s le specificai n momentul crerii casetelor de validare privesc atributele name i value ale tag-ului <INPUT>. Indicai, de asemenea, i denumirile casetelor de validare. 3 Valoarea checkbox a atributului type este de tip boolean; ea poate fi activ sau inactiv. Seamn cu o caset goal, care, o dat selectat, este umplut cu un semn de bifare, pentru a sugera starea sa activ.
5. Introducei, 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
Creai o caset de validare
Iat cum crem 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. n figura 10.55 este prezentat documentul XHTML creat manual.
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
reciproc.
Creai un buton radio
Spre deosebire de casetele de validare, butoanele radio se exclud
Butoanele radio nu seamn 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 (brbai/femei) care vor s acorde un calificativ Excelent, Foarte bine, Bine, Nesatisfctor site-ului pe care l-ai realizat i nc dou butoane radio pentru sex. 1. Introducei patru tag-uri <INPUT type=radio> pentru a preciza c zona va conine un buton radio (figura 10.57).
496
Figura 10.57
2. Introducei, n continuare, n tag-ul <INPUT> al fiecrui buton radio atributul name=? nlocuind semnul de ntrebare (?) cu numele simbolic al valorii fiecrei zone (radio), figura 10.58.
497
Figura 10.58
Remarci: 3 Valoarea radio a atributului type este foarte asemntoare cu valoarea checkbox a aceluiai atribut, cu deosebirea c butoanele radio se exclud reciproc. 3 Atributul checked este opional. 3 n funcie de obiectivul propus, atributul value nu trebuie folosit n mod obligatoriu.
4. Introducei, n continuare etichetele: Excelent, Foarte bine, Bine, Nesatisfctor pentru fiecare buton radio (figura 10.59).
Figura 10.59
498
5. Introducei tag-ul <INPUT type=radio> pentru a preciza c zona va conine un buton radio, apoi atributul name=?, nlocuind semnul de ntrebare (?) cu numele simbolic al zonei (sex).
Figura 10.60
6. Introducei tag-ul <INPUT type=radio> pentru a preciza c zona va conine 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. Introducei, n continuare eticheta Sex (figura 10.62).
499
Figura 10.62
8. Validai documentul HTML 4 strict cu aplicaia validator. 9. Inserai codul HTML care afieaz icon-ul de conformitate . 10. Vizualizai pagina Web ntr-un browser.
Figura 10.63
Remarc. n navigator, corespunztoare. vizitatorul selecteaz opiunea (una i numai una!)
500
XHTML
Creai un buton radio
Iat cum definim ntr-un formular patru butoane radio pentru vizitatorii (brbai / femei) care doresc s acorde un calificativ Excelent, Foarte bine, Bine, Nesatisfctor site-ului pe care l-ai realizat i nc dou butoane radio pentru sex. n figura 10.64 este prezentat documentul XHTML creat manual.
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
Creai un meniu derulant
Meniurile derulante propun vizitatorilor o list de opiuni. Iat cum crem un meniu derulant ce conine o list (simplificat) a profesiilor: economist, inginer, profesor universitar, profesor liceu, profesor coal general, avocat, contabil.
502
1. Introducei titlul meniului derulant Care este profesia dumneavoastr? (figura 10.66).
Figura 10.66
2. Introducei tag-ul <SELECT size=? name=x>, nlocuind semnul de ntrebare (?) cu numrul de opiuni (4) vizibile la deschiderea formularului (n practic se opteaz pentru un numr de opiuni 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 indicai numrul de opiuni, se afieaz o bar de defilare urmnd ca vizitatorul s deruleze lista de opiuni.
3. Introducei tag-ul <OPTION value=?>, nlocuind semnul de ntrebare (?) cu valoarea fiecrei opiuni, iar apoi introducei eticheta opiunii (figura 10.68).
Figura 10.68
4. Introducei tag-ul final </SELECT>.
Figura 10.69
Remarci: 9 Pentru a efectua mai multe alegeri simultane n lista de opiuni introducei n elementul <SELECT> atributul multiple=multiple. 9 Elementul <SELECT> trebuie s conin attea elemente <OPTION> cte opiuni conine lista (de opiuni). 9 Dac dorii s definii o opiune implicit n list, introducei n elementul <OPTION> atributul selected=selected pentru opiunea corespunztoare.
504
Figura 10.70
Remarc. n browser, vizitatorii pot selecta o opiune din list.
Aplicaii Putei propune vizitatorilor dumneavoastr s v transmit, dup caz, un fiier de date. Indicaie. Urmai procedura descris n continuare. 1. Introducei eticheta corespunztoare Trimitei fiierul
dumneavoastr. 2. Introducei tag-ul <INPUT type=file enctype=multipart/form data> pentru a indica formatul. 3. Introducei n continuare name=?, nlocuind semnul de ntrebare (?) cu numele simbolic al valorii fiierului. 4. Introducei, n continuare, n mod opional, size=?, nlocuind semnul de ntrebare (?) cu valoarea n caractere a cmpului n care vizitatorul va introduce calea de acces ctre fiier.
505
Exemplu:
Figura 10.71 Introducei n formularul creat o secven de tabulare. Ca i n cazul legturilor hipertext, vizitatorul poate naviga ntr-un formular utiliznd tasta Tab. Iat care este procedura pe care trebuie s-o urmai. 1. Introducei n tag-ul <INPUT> atributul tabindex=?, nlocuind semnul de ntrebare (?) cu secvena corespunztoare (figura 10.72).
Figura 10.72
506
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul . 4. Vizualizai pagina Web ntr-un navigator (figura 10.73). HTML care afieaz icon-ul de conformitate
1 3 2
Figura 10.73
Remarc. n browser, acionai tasta Tab pentru a naviga din zon n zon conform secvenei declarate (definite).
XHTML
Creai un meniu derulant
Iat cum crem un meniu derulant ce conine 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 programul utilitar HTML-TIDY. 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> definete o zon (n formular) pentru un cmp de selecie. Atributele elementului <select> sunt: name=...; size=...; multiple=multiple. Cu atributul multiple, utilizatorul poate selecta una sau mai multe opiuni (Exemplu: <select name=profesie multiple=multiple>). 9 Elementul <option> marcheaz articolele incluse n cmpul de selecie. Atributele elementului <option> sunt: value=... selected=selected (specific selecia implicit).
Aplicaie Cerei vizitatorilor dumneavoastr s v transmit un fiier de date fr a recurge la e-mail sau protocolul FTP. Indicaie. Introducei 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 fiiere. Valorile atributului accept sunt de tip MIME (vezi ftp://ftp.isi.edu/ in-notes/iana/assignments/media-types).
(X)HTML
Testai-v cunotinele
Tem
1. Comentai urmtoarele reguli de aur ale formularelor: 9 Plasai n stnga formularului zonele de date de aceeai lungime. Textul se va alinia vertical i va deveni mult mai agreabil. 9 Butoanele radio ofer utilizatorilor posibilitatea de a selecta o singur opiune (i numai una!). Butoanele radio se exclud reciproc. 9 Casetele de validare permit utilizatorilor de a selecta una, nici una sau mai multe opiuni din cadrul unei liste.
509
2. Precizai care este codul surs HTML care a stat la baza crerii paginii Web din figura 10.76.
Figura 10.77
Vizitai site-urile
9 http://web.mit.edu/wwwdev/cgiemail/index.html 9 www.123webmaster.com
Conversaia 11
Inserai obiecte multimedia cu HTML 4 i XHTML

Reguli pentru inserarea obiectelor multimedia HTML 4, XHTML Inserai un fiier sunet pentru Internet Explorer HTML 4, XHTML Inserai un fiier video HTML 4, XHTML Inserai un fiier sunet extern sub forma unei legturi hipertext f HTML 4, XHTML Inserai un fiier video extern sub forma unei legturi hipertext f HTML 4, XHTML Inserai un applet Java f (X)HTML Tem
f f f f
Reguli pentru inserarea obiectelor multimedia

Obiectele multimedia imagini animate, sunete, video pot face ca paginile dumneavoastr s devin mult mai vivante, cu singura observaie ca acestea s fie realizate corect. Obiectele multimedia pot da paginilor dumneavoastr Web perfeciunea vizual. Este destul de dificil de a obine obiecte multimedia de calitate. Prima
soluie este aceea de a crea dumneavoastr, cu fore proprii efectele

multimedia; va trebui s cumprai materiale brute (fotografii, sunete i clipuri video), software dedicat consacrnd o mare parte din timpul
512
dumneavoastr acestei activiti.
A doua soluie const n cutarea elementelor multimedia pe Web,

soluie mai puin costisitoare, mult mai rapid dar foarte aleatoare. Pe Web sunt disponibile cantiti enorme de elemente multimedia, unele fr stpn sau care nu fac parte din domeniul public. nainte de a le utiliza, analizai cu mult atenie avantajele i dezavantajele pe care le ofer fiecare element multimedia n parte i numai dup aceea decidei! ncepei prin a v pune urmtoarele ntrebri:
9 Elementul multimedia contribuie n mod pozitiv la mbuntirea coninutului paginii Web? 9 Elementul multimedia valorific sau completeaz n mod evident coninutul paginii Web? 9 Navigatoarele (multimedia)? 9 Utilizatorii dispun de o conexiune Internet rapid? 9 Utilizatorii dein cele mai bune plugin-uri? Dispun ei de timp i de mijloace tehnice pentru a le obine i a le instala? 9 Dumneavoastr, personal dispunei de timp i de resurse pentru a crea sau a cuta elemente multimedia? utilizatorilor suport toate aceste elemente
Creatorii de multimedia ofer utilizatorilor programe gratuite (putei cumpra versiunile cu faciliti complexe), care recunosc cea mai mare parte a formatelor fiierelor multimedia disponibile pe Web.
9 RealPlayer (vezi www.real.com) recunoate RealAudio i RealVideo; 9 QuickTime (vezi www.apple.com/quicktime) recunoate 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 faciliti ntr-o singur
513
aplicaie: CD player, interpretor audio i video, media jukebox, ghid media, Internet radio, aparat portabil pentru transferul fiierelor care conin muzic, interpretor de CD audio. Windows Media Player este disponibil pe PC-uri i Macintosh.
Dac v-ai decis s inserai n pagina dumneavoastr Web un fiier sunet, vei obine efecte amuzante! Sunetul are o utilizare mai puin practic pe Web. Trei sunt situaiile n care intervin fiierele sunet: momentul accesrii paginii Web de ctre utilizator; momentul n care utilizatorul execut clic pe un obiect; momentul n care utilizatorul deschide fiierele multimedia (animaii Flash sau fiiere video). Dac dorii s ascultai muzic n timpul navigrii, introducei pur i simplu un CD n unitatea CD-ROM! Dac dorii s inserai un fiier sunet n pagina dumneavoastr Web, utilizai unul din formatele urmtoare:
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 mulime de surse pentru fiiere sunet pe Web. Cutai fiierele audio pe site-ul www.yahoo.com sau utilizai motoare de cutare comparisonics pentru a cuta efecte sonore pe site-ul www.findsounds.com.
Utilizai legturile hipertext pentru inserarea unui fiier sunet extern. Procednd astfel, lsai utilizatorilor ansa de a decide singuri n privina ascultrii sau nu a fondului sonor. Putei oferi de asemenea utilizatorilor dumneavoastr i posibilitatea unui control suplimentar asupra sunetului (volum, pauz, pornire) utiliznd elementul object.
514
Remarc. Elementul object poate fi utilizat pentru sunet, video i fiiere text, dar nu include atributele folosite n cadrul elementului embed, care nu este recunoscut de XHTML1.
Elementele video, atunci cnd se gsesc ntr-o stare perfect pot reprezenta cel mai practic element multimedia. ntr-un clip video scurt, putei prezenta utilizatorului un concept sau un proces n locul unei descrieri lungi, plicticoase cu paragrafe sau cu proceduri stufoase ce conin 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. Creai propriile fiiere video sau cutai-le pe Web. Dac dorii s inserai un fiier video n pagina dumneavoastr Web utilizai unul din formatele urmtoare: 9 AVI (Audio Video Interleave); 9 Flash (vizitai site-ul www.macromedia.com); 9 MPEG (Moving Picture Experts Group); 9 QuickTime. Pentru inserarea fiierelor video recomandm utilizarea legturilor hipertext n locul inserrii directe a acestora n paginile dumneavoastr Web. Cnd fiierele video sunt inserate prin link-uri, utilizatorii pot decide singuri dac vor sau nu s le vizioneze. Putei de asemenea anima, insera elemente interactive n pagina dumneavoastr Web utiliznd mini-programe Java, cunoscute sub numele de applet-uri.
Remarci:
9 Pentru mai multe informaii privind limbajul de programare Java, vizitai

site-ul www.sun.com.
9 Vizitai site-urile: www.shareware.com, http://gamelan.com care conin

applet-uri pe care v invitm s le apreciai singuri.
515
HTML
Inserai un fiier sunet pentru Internet Explorer
De ce s nu v ntmpinai vizitatorii cu un fond sonor agreabil? La musique avant ... toutes choses, nu-i aa? Iat cum inserai n pagina dumneavoastr Web un fiier sunet din folder-ul Windows\Media sau, de ce nu, un fiier sunet creat chiar de dumneavoastr! 1. Introducei ntre tag-urile <BODY> ... </BODY> sau <HEAD> ... </HEAD>, tag-ul <BGSOUND src=?>, nlocuind semnul de ntrebare (?) cu calea de acces ctre fiierul sunet (figura 11.1).
Figura 11.1
Remarci: 3 nainte de a insera un fiier sunet n pagina dumneavoastr Web, trebuie s-l creai. Fiierele sunet au extensia .WAV. 3 Putei insera fiiere sunet care provin i din alte surse, dar, n acest caz, nu uitai s respectai drepturile de autor, copyright-ul!
516
2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul HTML care afieaz icon-ul de conformitate . 4. Vizualizai pagina Web ntr-un browser (figura 11.2). Cum v place?
Figura 11.2 Remarc. Cnd vizitatorul va accesa pagina dumneavoastr, el va naviga pe un fond sonor, cel pe care l-ai prevzut. Aplicaii Definii opiunile de sunet pentru Internet Explorer. Indicaie. Introducei n tag-ul <BGSOUND> atributul loop=?, nlocuind semnul de ntrebare (?) cu numrul de iteraii pentru ... sunetul muzicii! Inserai un fond sonor pentru Netscape Navigator. Iat cum inserm fiierul sunet pentru NETSCAPE NAVIGATOR. 1. Introducei ntre tag-urile <BODY> ... </BODY> sau <HEAD> ...
</HEAD> tag-ul <EMBED src=?>, nlocuind semnul de ntrebare (?) cu calea de acces ctre fiierul sunet (figura 11.3).
517
Figura 11.3 2. Validai documentul HTML 4 strict cu aplicaia validator. 3. Inserai codul . 4. Vizualizai pagina Web ntr-un browser. HTML care afieaz icon-ul de conformitate
Figura 11.4
Remarci: 3 n navigator (NETSCAPE) se afieaz numai o poriune din consol. Intr n sarcina dumneavoastr de a o seta, astfel nct vizitatorul s poat controla sunetul. 3 n INTERNET EXPLORER, tag-ul <EMBED> afieaz o consol care permite START/STOP pentru fiierul sunet al paginii.
Setai forma i dimensiunea consolei care se afieaz n Netscape Navigator,
518
la nceputul paginii Web, n care s-a inserat un fond sonor! Indicaie. Introducei n tag-ul <EMBED> atributul controls=?, nlocuind semnul de ntrebare (?) cu dimensiunea / tipul consolei, dup cum urmeaz: 3 forme (afieaz pe o suprafa foarte mic controlul sunetului). 3 console (afieaz o consol de dimensiuni normale). 3 smallconsole (afieaz o consol n miniatur). Pentru a configura citirea fiierului sunet, folosii procedurile de la Internet Explorer.
XHTML
Inserai un fiier sunet pentru Internet Explorer
Salutai vizitatorii printr-un mesaj sonor sau oferii-le o melodie care s evoce subiectul site-ului dumneavoastr. Creai dumneavoastr niv fiierul sunet WAV!
Remarc. Folosite corect, clipurile sunet sau video pot mbunti n mod considerabil coninutul paginilor Web. Tastai sound clips n motorul de cutare preferat pentru a gsi fiierele sunet pe care apoi eventual s le inserai n paginile dumneavoastr Web.
Iat cum inserai n pagina dumneavoastr Web un fiier sunet (tada.wav) din folder-ul Windows\Media sau, de ce nu, un fiier sunet creat chiar de dumneavoastr! n figura 11.5 este prezentat documentul XHTML creat manual.
519
Figura 11.5
Remarci: 3 Reamintim nc o dat c tag-ul vid <bgsound/> (nu are tag de nchidere, cci el nu aparine standardului XHTML) nu este interpretat dect de ctre Microsoft Internet Explorer. 3 Tag-ul (vid XHTML) <bgsound/> accept atributele src i loop.
Figura 11.6
520
HTML
Inserai un fiier video
Dac ai creat cu propriile fore un fiier video sau dispunei de o surs care v d dreptul s utilizai n paginile dumneavoastr Web fiiere video ce nu sunt proprietatea dumneavoastr (copyright-ul!) putei insera n mod simplu aceste fiiere (video). Nu uitai c fiierele video sunt mari consumatoare de octei i ncetinesc considerabil ncrcarea paginilor dumneavoastr! Iat cum procedai pentru a insera n pagina dumneavoastr Web un fiier video. 1. Introducei n interiorul tag-urilor <BODY> ... </BODY> tag-ul <EMBED src=?>, nlocuind semnul de ntrebare (?) cu calea de acces ctre fiierul video (figura 11.7).
Figura 11.7
521
Remarci: 9 Extensiile pentru fiierele video sunt: .avi (pentru fiiere AVI); .mpg (pentru fiiere MPEG); .mov sau .qt (pentru fiiere Quick Time). 9 Pentru a crea fiiere video pe PC, trebuie s avei o dotare minim: MacAV, PowerMac; o cartel de achiziie video etc.
2. Definii dimensiunea zonei de afiaj a fiierului video. 2.1 Introducei n continuare, n tag-ul <EMBED> atributele width=x, height=y, nlocuind x-ul cu lungimea, exprimat n pixeli i y-ul cu nlimea, exprimat n pixeli (150 x 150), figura 11.8.
Figura 11.8
3. Definii numrul de iteraii (2) pentru operaia de citire a fiierului video (figura 11.9).
Figura 11.9
522
. 6. Vizualizai pagina Web ntr-un browser (figura 11.10). Cum v place?
Figura 11.10
Remarc. Cnd vizitatorul va accesa pagina, va vedea video-ul de dou ori (loop=2) i va putea stopa/relansa operaia de citire.
XHTML
Inserai un fiier video
Animaiile 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 influeneaz considerabil volumul fiierului. Pentru a insera un clip video utilizai tag-ul Microsoft <img /> cu atributul dynsrc, sau tag-urile <object></object> sau <embed></embed> independente de navigator.
523
Iat cum procedai pentru a insera n pagina dumneavoastr Web un fiier video (clock.avi) din folder-ul Windows. n figura 11.11 este prezentat documentul XHTML creat manual.
Figura 11.11
Remarci: 9 Microsoft Internet Explorer i Netscape Navigator interpreteaz tag-ul <embed> ncepnd cu versiunea 3. 9 Cu tag-ul <img/>, Microsoft Internet Explorer interpreteaz atributul dynsrc care permite inserarea fiierelor video n pagina Web. 9 Cu tag-urile <object> sau <embed> incorporai secvene video care pot fi afiate de Microsoft Internet Explorer i Netscape Navigator. 9 ncepnd cu versiunea 4 a limbajului HTML, putei utiliza tag-ul <object> pentru a incorpora fiiere multimedia, n mod independent de navigator. Tag-ul <object> este interpretat de cele dou navigatoare. Transmitei URL-ul fiierului multimedia prin atributul data al tag-ului <object>. 9 Pentru a scrie un cod conform cu XHTML utiliznd un navigator care nu interpreteaz tag-ul <object>, inserai fiierul cu tag-ul <object> i referii nc o dat fiierul prin tag-ul <embed> ntre <object> i </object>.
524
Figura 11.12
Remarci: 9 Creai propriile fiiere video sau gsii-le pe Web, ntr-unul din formatele: AVI (Audio Video Interleave); Flash; MPEG (Moving Picture Experts Group); QuickTime. 9 Vizitai site-urile: www.cnn.com/videoselect i www.comedycentral. com care ofer clip-uri scurte pe care le putei ncrca rapid.
HTML
Inserai un fiier sunet extern sub forma unei legturi hipertext
Este bine s-i lsai pe vizitatorii dumneavoastr s decid singuri asupra inserrii n pagin a unui fond sonor. Soluia este de a insera un fiier sunet extern, sub forma unei legturi hipertext. Iat cum crem o legtur hipertext ctre un fiier sunet extern. 1. Introducei n interiorul tag-urilor <BODY> i </BODY> tag-ul <A href=?.wav>, nlocuind semnul de ntrebare (?) cu calea de acces ctre fiierul sunet (figura 11.13).
525
Figura 11.13
2. Introducei textul legturii hipertext: Ascultai sunetul muzicii! (figura 11.14).
Figura 11.14
Figura 11.15
526
Figura 11.16
Remarc. Pentru a asculta fondul sonor, vizitatorului nu-i rmne dect s execute clic pe Ascultai sunetul muzicii!, legtura hipertext ctre fiierul sunet extern.
XHTML
Inserai un fiier sunet extern sub forma unei legturi hipertext
Cel mai simplu mod de a insera fiiere sunet extern este cel al utilizrii unei legturi hipertext. Procednd astfel, putei decide dac dorii sau nu dorii s ascultai sunetul muzicii. Iat cum crem o legtur hipertext ctre un fiier sunet extern (tada.wav), pornind de la documentul HTML audio2.html, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 11.17 se prezint documentul XHTML generat.
527
Figura 11.17
Figura 11.18
HTML
Inserai un fiier video extern sub forma unei legturi hipertext
A insera un fiier video extern sau a nu insera? Aceasta este ntrebarea!
528
Rspunsul este acelai ca la inserarea n pagina Web a unui fiier sunet extern inserai fiierul video extern sub forma unei legturi hipertext. Executai clic sau nu executai clic pe textul legturii hipertext ctre fiierul video extern. Iat cum procedm pentru a insera n pagina Web un fiier video extern sub forma unei legturi hipertext. 1. Introducei n interiorul tag-urilor <BODY> i </BODY> tag-ul <A href=?>, nlocuind semnul de ntrebare (?) cu calea de acces ctre fiierul video (figura 11.19).
Figura 11.19
2. Introducei textul legturii hipertext Vizionai secvena video (figura 11.20).
Figura 11.20
529
Figura 11.21
Figura 11.22
XHTML
Inserai un fiier video extern sub forma unei legturi hipertext
Ca i n cazul fiierelor sunet externe, cel mai simplu mod de a insera
530
fiiere video externe este tot cel al utilizrii unei legturi hipertext. n ceea ce ne privete recomandm utilizarea legturilor hipertext ctre fiierele video, n locul inserrii directe ntr-o pagin Web. Cnd fiierele video conin link-uri, utilizatorii pot decide singuri dac vor sau nu s le vizioneze. Iat cum procedm pentru a insera n pagina Web un fiier video extern (clock.avi) sub forma unei legturi hipertext, pornind de la documentul HTML video.html, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY. n figura 11.23 se prezint documentul XHTML generat.
Figura 11.23
531
Figura 11.24
HTML
Inserai un applet Java
Applet-urile Java sunt mici programe (n Java) pe care le putei insera n paginile dumneavoastr Web, cu scopul de a realiza anumite funcii. Iat cum inserm n pagina Web un applet Java care testeaz dac valoarea introdus ntr-un cmp al unui formular este mai mare ca 50. 1. Introducei n interiorul tag-urilor <BODY> ... </BODY> tag-ul <APPLET code=?class>, nlocuind semnul de ntrebare (?) cu calea de acces ctre applet-ul Java (figura 11.25).
Figura 11.25
532
2. Introducei 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
Inserai un applet Java
Applet-urile Java au extensia numelui de fiier .class. n cazurile cele mai simple, pentru a utiliza un applet Java avei nevoie de numele applet-ului, test.class de exemplu. Pentru applet-urile mai complexe
533
trebuie s furnizai parametrii.
Remarci: 9 Un program Java, creat pentru a fi afiat n fereastra navigatorului este numit applet Java. Un applet Java servete n principiu pentru a insera n pagina Web animaii, jocuri, aplicaii interactive. 9 Pentru a incorpora un applet Java n pagina dumneavoastr Web dispunei de mai multe posibiliti. Dac codul este conform cu XHTML va trebui s utilizai tag-ul <object>, care permite inserarea tuturor obiectelor n pagin. Alt tag, specific, numit <applet> nu mai aparine standardului oficial al limbajului, dar este interpretat de cele dou mari browser-e: Microsoft Internet Explorer i Netscape Navigator. 9 Va trebui s compilai applet-ul Jva pe care-l ataai fiierului HTML; el va avea extensia class. 9 Pentru a insera un applet Java ca un obiect, utilizai tag-ul <object> cu atributele: classid, codebase i codetype. Definii parametrii de programare ai applet-ului Java ntre tag-urile <object> i </object>. Un parametru de acest tip se compune din dou pri: nume i valoare. Documentele XHTML trebuie s utilizeze atributul id. Pentru a asigura un maximum de compatibilitate utilizai atributele id i name cu valori identice. 9 Pentru a insera un applet Java cu tag-ul <applet> utilizai secvena prezentat n figura 11.28.
Figura 11.28
Iat cum inserm n pagina Web un applet Java (test.class) care testeaz dac valoarea introdus ntr-un cmp al unui formular este mai mare ca 50, pornind de la documentul HTML applet.html, pe care apoi l convertim n XHTML cu programul utilitar HTML-TIDY.
534
Figura 11.29
Figura 11.30
Remarci: 9 Viitorul utilizrii elementelor multimedia n paginile Web este evident. n locul utilizrii mai multor elemente i atribute folosii 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 Utiliznd elementul <object> cu atributele corespunztoare nu mai este nevoie s scriei coduri separate pentru Netscape Navigator i Internet Explorer pentru a utiliza fiiere multimedia.
535
Aplicaie Inserai n pagina dumneavoastr Web applet-ul Java TicTacToe.class. n figura 11.31 se prezint documentul surs XHTML creat manual.
Figura 11.31 Validai documentul XHTML 1.0 cu aplicaia validator i inserai codul XHTML care afieaz icon-ul de conformitate Explorer.
n figura 11.32 este afiat rezultatul vizualizrii paginii Web n Microsoft Internet
536
Figura 11.32
Remarc. Pentru a obine mai multe informaii privind elementele <object> vizitai site-urile: 9 www.w3.org; 9 www.zvon.org/xxl/xhtmlReference/output/index.html.
(X)HTML
Testai-v cunotinele
Tem
1. Comentai urmtoarele reguli pentru inserarea obiectelor multimedia: 9 Elementul multimedia contribuie n mod pozitiv la mbuntirea coninutului paginii Web? 9 Dumneavoastr, personal dispunei de timp i resurse pentru a crea sau a cuta elemente multimedia?
537
2. Precizai care sunt extensiile pentru fiierele sunet i video. 3. Descriei pe scurt procedura (X)HTML de inserare a unui fiier sunet/video extern sub forma unei legturi hipertext. 4. Ce este un applet Java?
Vizitai site-urile
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
Conversaia 12
Creai cadre cu HTML 4 i XHTML

f Reguli pentru utilizarea cadrelor f HTML 4, XHTML Apreciai cadrele (X)HTML f HTML 4, XHTML Creai cadre care se afieaz n coloane (fixe, f f f f f f f f
dinamice) HTML 4, XHTML Introducei pagini Web ntr-un cadru HTML 4, XHTML Creai cadre care se afieaz n linii (fixe, dinamice) HTML 4, XHTML Numii un cadru HTML 4, XHTML Creai o legtur (link) ctre un cadru HTML 4, XHTML Formatai bordurile cadrelor HTML 4, XHTML Controlai prezena sau absena barelor de defilare HTML 4, XHTML Creai o alternativ pentru cadre (X)HTML Tem
Reguli pentru utilizarea cadrelor

Cadrele constituie un tip de prezentare particular a unei pagini Web (sau a mai multor pagini Web) cci ele permit divizarea ferestrei navigatorului n dou sau mai multe zone, una mai mare pentru coninut, alta mai mic pentru logo, link-uri de navigare etc. Decizia de a utiliza cadre v aparine! Analizai avantajele dar i dezavantajele pe care cadrele le ofer utilizatorilor i numai dup aceea decidei!
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 utilizrii tehnologiilor avansate de creare a unui site; 9 cadrele reduc timpul de ncrcare al paginilor; atunci cnd sunt utilizate se ncarc numai coninutul paginilor, elementele statice (logo-urile, meniuri de navigare) fiind deja ncrcate de ctre utilizatori; 9 cadrele mresc gradul de funcionalitate al site-ului. Navigarea rmne vizibil n timp ce coninutul este n curs de schimbare, ntr-un cadru separat; 9 cadrele permit de o manier simpl i rapid actualizarea paginilor i adugarea unui nou coninut.
Dezavantaje:
9 cadrele au reputaia de a fi incoerente; 9 navigarea n interiorul cadrelor reprezint nc un mister pentru muli dintre noi; 9 cadrele pot ocupa mai mult spaiu dect le este necesar; 9 o rezoluie insuficient a navigatorului poate face ... ravagii ntr-un site care conine cadre; 9 nu de puine ori cadrele pot reprezenta un risc juridic. Drepturile de autor pot fi nclcate atunci cnd se execut link-uri ctre documentele (X)HTML din exteriorul site-ului care nu v aparin. Pentru a evita astfel de situaii neplcute este mult mai bine s utilizai pagini care nu conin cadre.
Alturi de tabele, cadrele reprezint de asemenea un foarte puternic instrument de proiectare a site-urilor. Aadar n faza de concepie a unui site, ce este mai bine s folosii: tabele sau cadre? S analizm mpreun ... oferta (avantaje, dezavantaje) i apoi vei decide singuri.
541
Tabelele ofer urmtoarele avantaje:
9 pun mai puine probleme de navigare n comparaie cu cadrele; 9 sunt standarde pentru HTML 3.2 i 4.
Cadrele ofer urmtoarele avantaje:

9 paginile care conin cadre ocup mai puin spaiu de memorie dect tabelele i se ncarc mai rapid; 9 sunt mai uor de actualizat i de ntreinut; 9 sunt standarde n HTML 4.
Remarci: 9 Cadrele trebuie s permit o navigare uoar cu una din metodele: utilizatorii pot executa clic pe un cadru i vizualiza documentul obinut n alt cadru; utilizatorii pot executa clic ntr-un cadru i vizualiza documentul obinut n acelai cadru. 9 Pentru vizitatorii care folosesc navigatoare ce nu recunosc cadrele alegei o alternativ cu ajutorul elementului <noframe>. 9 Pentru a realiza o pagin mai atractiv, creai cadre inline (flotante) cu ajutorul elementului <iframe>.
HTML
Apreciai cadrele HTML
Nimeni nu dorete s fie ncadrat, n adevratul sens al cuvntului. Aceast noiune d impresia unui univers din care nu poi niciodat iei. Din acest motiv este necesar s apreciem corect aceast noiune din punct de vedere al iniierii n activitatea de creare a cadrelor (cu HTML i XHTML). Cadrele reprezint un sistem de control al navigrii, ntruct ele permit afiarea paginilor HTML ntr-o singur fereastr a navigatorului i un control al coninutului individual. Proiectanii recurg n general la cadre pentru a crea o pagin care conine dou sau trei cadre.
542
Teoretic nu exist limitri n ceea ce privete numrul de cadre. Cinci cadre sunt deja multe! Dou cadre reprezint numrul minim! Atenie ns, la gradul de lizibilitate al ecranului. n concluzie, de ce s nu regrupm mai multe pagini ntr-una singur, ntr-un singur ecran, astfel nct vizitatorul s poat accesa mai multe pagini n acelai timp. Atunci cnd vizitatorul afieaz un site care conine cadre, el vede un ansamblu de informaii, organizate n dreptunghiuri ce se afieaz pe linii sau coloane. n cea mai mare parte a timpului, un sumar al site-ului este afiat n cadrul din stnga ecranului, fiind suficient ca vizitatorul s execute un clic pe unul din item-urile afiate pentru a vedea pagina corespunztoare ntr-unul din celelalte cadre ale ecranului. Iat cum definim o pagin de cadre n HTML. 1. Creai o pagin nou HTML, n care nu introducei text i nici tag-urile pereche <BODY> </BODY>. Utilizai n declaraia <!DOCTYPE> DTD-ul specific frameset (figura 12.1).
Figura 12.1
Remarc. Spre deosebire de paginile clasice pe care le-am creat pn n prezent, cadrele nu fac parte din recomandrile DTD/HTML 4 Strict. n consecin, va trebui s utilizai n declaraia <!DOCTYPE> DTD-ul specific, numit frameset caracterizat, n principal prin dispariia elementului <BODY> inclus de obicei n rdcina <HTML> care va fi nlocuit prin elementul <FRAMESET>.
543
2. Introducei tag-ul <FRAMESET> imediat sub tag-ul </HEAD>, dup care acionai de mai multe ori tasta ENTER (figura 12.2).
Figura 12.2
3. Introducei tag-ul final </FRAMESET> (figura 12.3).
Figura 12.3
Remarc. O pagin de cadre nu conine tag-ul pereche <BODY> </BODY>.
Figura 12.4
Remarc. n navigator, pentru moment nu se afieaz nici o informaie, dect titlul paginii: Pagina de cadre.
544
XHTML
Apreciai cadrele XHTML
Dac discutai problema cadrelor cu orice creator de site Web vei avea parte de o disput. Bun sau proast, oamenii au ntotdeauna o opinie!
Remarc. Jakob Nielsen, unul din cei mai respectai experi Web are o pagin Web intitulat Why Frames Suck unde dezbate unele din problemele pe care utilizatorii le au cu cadrele. Putei 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 cteva elemente pe care s le avei n vedere atunci cnd creai cadre XHTML.
9 Cadrele nu sunt de joac (!); ele lucreaz cel mai bine atunci cnd sunt folosite ca instrumente de navigaie sau cnd este nevoie s afiai dou sau mai multe elemente ale aceluiai document, n acelai timp. 9 Pentru crearea cadrelor utilizai DTD frameset, rezervat documentelor multifereastr (v mai amintii 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 coninut (src) ct i atribute pentru a defini border i scrolling. 9 Putei crea un cadru i n alt mod, utiliznd tag-ul <iframe> </iframe> (cadru inserat dar, numai pentru Internet Explorer!). 9 Pentru persoanele care nu pot vedea cadrele includei tag-ul <noframes> </noframes>.
545
9 Specificai ntotdeauna atributul target ori de cte ori lucrai cu cadre. Dac nu specificai cadrul int, browser-ul va nlocui cadrul curent cu documentul int, ceea ce nu v convine. 9 nainte de a decide asupra utilizrii cadrelor, trebuie s reflectai asupra avantajelor i dezavantajelor acestora. n concluzie, analizai i decidei!
Iat cum definim o pagin de cadre n XHTML. n figura 12.6 este prezentat documentul XHTML creat manual.
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).
Validai documentul XHTML 1.0 cu aplicaia validator. n figura 12.7 este afiat rezultatul vizualizrii paginii Web n Microsoft Internet Explorer.
Figura 12.7
546
Remarc. n navigator, pentru moment nu se afieaz nici o informaie, dect titlul paginii: Pagina de cadre.
HTML
etape:
Creai cadre care se afieaz n coloane (fixe, dinamice)
Pentru a crea cadre (X)HTML este necesar s parcurgei urmtoarele
9 creai un document multifereastr (frameset) cu ajutorul DTD-ului de tip frameset; 9 adugai cadrele i coninutul acestora; 9 formatai cadrele; 9 creai o alternativ pentru vizitatorii care utilizeaz navigatoarele ce nu recunosc cadrele. Putei crea n HTML cadre, care mpart fereastra unui navigator n coloane fixe, dinamice (cadre n coloane). Iat cum crem dou cadre care se afieaz n coloane fixe: unul la stnga i altul la dreapta prin divizarea ferestrei unui navigator n coloane fixe (cadre n coloane fixe). 1. Definii o pagin de cadre n HTML (figura 12.8).
Figura 12.8
547
2. Introducei n tag-ul <FRAMESET> atributul cols=?,X nlocuind semnul de ntrebare (?) cu limea exprimat n pixeli a primei coloane (250) i X-ul cu limea (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 cnd unul din cadre nu poate fi afiat integral, o bar de defilare se afieaz n mod automat.
Iat cum procedm pentru a afia aceleai cadre n coloane dinamice. 1. Introducei n tag-ul <FRAMESET> atributul cols=? nlocuind semnul de ntrebare (?) cu limea exprimat n pixeli a primei coloane (100), dup care introducei n continuare ,* pentru a-i lsa navigatorului posibilitatea de a decide asupra limii 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 afieaz cele dou cadre n coloane. Prima coloan se afieaz pe limea de 100 de pixeli, iar cea de-a doua se afieaz pe o lime decis de browser.
549
XHTML
Creai cadre care se afieaz n coloane (fixe, dinamice)
Iat cum crem dou cadre (unul la stnga i altul la dreapta) care se afieaz 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 programul utilitar HTML TIDY. n figura 12.13 se prezint documentul XHTML generat.
Frameset //EN frameset.dtd>
Figura 12.13
Remarc. Dac suntei un perfecionist, nu trebuie s lsai browser-ul s calculeze singur dimensiunea cadrelor dumneavoastr.
550
Figura 12.14
Iat cum crem aceleai cadre n coloane dinamice, pornind de la documentul HTML frame.html pe care apoi l convertim n XHTML cu programul utilitar HTML TIDY. n figura 12.15 se prezint documentul XHTML generat.
Figura 12.15
551
Figura 12.16
HTML
Introducei pagini Web ntr-un cadru
Odat creat pagina de cadre, putei deschide un document HTML existent pentru a-l afia ntr-unul din cadrele definite. Iat cum adugm n cele dou cadre care se afieaz n coloane (fixe, dinamice) informaiile din paginile: a.htm i b.htm.
Remarci: 9 Creai toate paginile nainte de a fi inserate ntr-un site (figura 12.17).
Figura 12.17
552
9 Pagina a.html conine textul Pagina 1 i icon-ul de conformitatea . 9 Pagina b.html conine textul Pagina 2 i icon-ul de conformitatea .
1. Introducei
interiorul
tag-urilor
<FRAMESET>
</FRAMESET> tag-ul <FRAME src=?>, nlocuind semnul de ntrebare (?) cu calea de acces ctre prima pagin care trebuie s se ncarce n pagina de cadre (figura 12.18).
Figura 12.18
2. Repetai pasul anterior pentru a ncrca cea de-a doua pagin.
Figura 12.19
553
4. Vizualizai pagina Web ntr-un browser (12.20).
Figura 12.20
XHTML
Introducei pagini Web ntr-un cadru
Iat cum adugm n cele dou cadre care se afieaz n coloane (fixe, dinamice) informaiile din paginile: a.htm i b.htm, pornind de la documentul HTML index.html, pe care apoi l convertim n XHTML cu programul utilitar HTML TIDY. n figura 12.21 se prezint documentul XHTML generat.
Frameset frameset.dtd>
Figura 12.21
554
Remarci: 9 Ca i n cazul tag-ului <img/>, tag-ul XHTML <frame />, care nlocuiete tag-ul <frame> </frame> din HTML folosete atributul src (source) pentru a spune browser-ului unde s gseasc documentul pe care urmeaz s-l afieze. 9 n XHTML tag-ul <frame /> este un tag vid (se termin cu o bar oblic).
Figura 12.22
HTML
Creai cadre care se afieaz n linii (fixe, dinamice)
n HTML putei crea de asemenea cadre care mpart fereastra unui navigator n linii fixe, dinamice (cadre n linii). Iat cum crem dou cadre care se afieaz n linii fixe: unul sus i altul jos prin divizarea ferestrei unui browser n linii fixe (cadre n linii fixe). 1. Definii o pagin de cadre n HTML (figura 12.23).
555
Figura 12.23
2. Introducei
tag-ul
<FRAMESET>
atributul
rows=X,Y
nlocuind X-ul cu nlimea (exprimat n pixeli) primei linii (60) i Y-ul cu nlimea (exprimat n pixeli) a celei de-a doua linii (85) .a.m.d. (figura 12.24).
Figura 12.24
3. Introducei
interiorul tag-urile:
tag-urilor
<FRAMESET>
</FRAMESET>
<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 afieaz n linii fixe. Atunci cnd unui din cadre nu se poate afia integral, se afieaz n mod automat o bar de defilare.
Iat cum procedm pentru a afia aceleai cadre n linii dinamice. 1. Introducei n tag-ul <FRAMESET> atributul rows=?, nlocuind semnul de ntrebare (?) cu nlimea (exprimat n pixeli) primei linii (70), dup care introducei n continuare ,* pentru a-i lsa
557
navigatorului posibilitatea de a decide asupra nlimii celeilalte linii (figura 12.27).
Figura 12.27
Figura 12.28
Remarc. Navigatorul afieaz cele dou cadre n linii, prima linie cu nlimea de 70 de pixeli, iar cea de-a doua cu nlimea decis de navigator.
Aplicaie Afiai un cadru n linie (dinamic), iar celelalte dou n coloane (dinamice). Iat care este procedura pe care v invitm s-o urmai.
558
1. Introducei n tag-ul <FRAMESET> atributul rows=?,*, nlocuind
semnul de ntrebare (?) cu nlimea (exprimat n pixeli) liniei (90).
2. naintea tag-urilor care definesc cele dou cadre care urmeaz s se

afieze n coloane (dinamice), introducei tag-ul <FRAMESET cols=?>, nlocuind semnul de ntrebare (?) cu nlimea (exprimat n pixeli) primei coloane (160).
3. Introducei tag-ul final </FRAMESET> (figura 12.29).
Figura 12.29
Figura 12.30
559
XHTML
Creai cadre care se afieaz n linii (fixe, dinamice)
Iat cum crem dou cadre (unul sus i altul jos) care se afieaz n linii fixe (65, 85 pixeli) n care afim informaiile 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. n figura 12.31 se prezint documentul XHTML generat.
Figura 12.31
560
Figura 12.32
Iat cum procedm pentru a crea aceleai cadre n linii dinamice, n care afim informaiile 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. n figura 12.33 se prezint documentul XHTML generat.
Figura 12.33
561
Figura 12.34 Aplicaie Afiai un cadru n linie (dinamic), iar celelalte dou n coloane (dinamice). Indicaie. Convertii 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 afiat rezultatul vizualizrii paginii Web n Microsoft Internet Explorer.
562
Figura 12.35
Figura 12.36
HTML
Numii un cadru
Instabilitatea cadrelor este bine cunoscut celor care navigheaz pe Internet. Pentru a garanta o bun stabilitate a diferitelor cadre trebuie
563
s stabilii link-urile corespunztoare. ncepei cu numirea n prealabil a cadrelor. Fiecare cadru trebuie s poarte un nume. Numele cadrului este folosit pentru a orienta ncrcarea n cadru a fiierului desemnat de o legtur hipertext. Numii un cadru difer de Numii fiierul care
identific acel cadru. Numele cadrului este un fel de pseudonim, care

v permite s deosebii cadrele din aceeai pagin i s le referii n mod individual. Numele fiierului este adevratul nume al fiierului HTML al cadrului. Vei nelege mai bine aceste noiuni trecnd la paragraful urmtor. Iat cum atribuim un nume celor dou cadre care se afieaz n coloane dinamice. 1. Introducei n tag-ul <FRAME> al fiecrui cadru, atributul name=?, nlocuind semnul ntrebrii (?) cu numele corespunztor al cadrului (figura 12.37).
Figura 12.37
2. Salvai fiierele. 3. Validai documentul HTML 4 strict cu aplicaia validator. 4. Vizualizai pagina Web ntr-un browser (figura 12.38).
564
Figura 12.38
Remarc. n browser, pagina de cadre se afieaz aa cum ai definit-o; numele celor dou pagini nu se afieaz.
XHTML
Numii un cadru
Iat cum atribuim un nume cadru_stnga, cadru_dreapta celor dou cadre n care afim informaiile din paginile a.htm i b.htm (Pagina 1 respectiv Pagina 2). n figura 12.39 este prezentat documentul XHTML creat manual.
Figura 12.39
Remarc. Tag-ul <frame/> utilizeaz de asemenea atributele name i id. Prin atributul name transmitei tag-ului <frame/> numele cadrului. Pentru a realiza o compatibilitate cu XHTML trebuie s realizai o identificare fr echivoc a cadrului cu ajutorul atributului id.
565
Validai documentul XHTML 1.0 cu aplicaia validator. n figura 12.40 este afiat rezultatul vizualizrii paginii Web n Microsoft Internet Explorer.
Figura 12.40
HTML
Creai o legtur (link) ctre un cadru
n majoritatea cazurilor, o pagin de cadre afieaz un sumar care, printr-o legtur hipertext permite accesul la toate paginile site-ului. Fiecare pagin selectat se afieaz n cadrul principal. Iat cum crem pentru elementele SUMAR-ului o legtur hipertext ctre paginile care urmeaz s se afieze n cadrul principal al paginii de cadre. 1. Deschidei (n Notepad) pagina de cadre i stabilii pentru fiecare element (item) din
SUMAR
legturile
hipertext
corespunztoare (figura 12.41).
566
Figura 12.41
2. Introducei n faa fiecrui text de legtur <A href=?> nlocuind semnul de ntrebare (?) cu calea de acces ctre paginile care urmeaz s se afieze n cadrul principal, apoi apsai de cteva ori pe bara de spaii (figura 12.42).
Figura 12.42
3. Introducei n continuare, n tag-ul <A> al fiecrei legturi hipertext atributul target=?, nlocuind semnul de ntrebare cu numele cadrului n care dorii s se afieze pagina Web (figura 12.43).
567
Figura 12.43
4. Tastai </A> dup fiecare legtur hipertext (figura 12.44).
Figura 12.44
5. Validai documentul HTML 4 strict cu aplicaia validator. 6. Inserai codul HTML care afieaz icon-ul de conformitate . 7. Salvai modificrile i nchidei pagina de cadre.
568
Figura 12.45
9. Testai legturile hipertext.

Remarci:
9 n mod implicit, fiecare legtur creat afieaz pagina int n cadrul

principal al paginii.
9 Instabilitatea cadrelor, bine cunoscut poate fi reglat definind inte precise
pentru fiecare legtur, dup cum urmeaz: _blank (deschide legtura ntr-o nou fereastr a navigatorului); _self (deschide legtura n aceeai fereastr cu aceea n care se gsete legtura); _parent (deschide legtura n pagina de cadre printe a legturii); _top (deschide legtura ntr-o fereastr fr cadru). 9 Utilizarea atributelor target este un bun prilej de a v testa i aptitudinile de creativitate.
Aplicaie Atribuii valorile predefinite _self, _blank legturilor hipertext ctre paginile a.html i b.html. Iat care este procedura pe care v invitm s-o aplicai.
1. introducei n tag-ul <A> al primei legturi atributul target=?,

nlocuind semnul ntrebrii (?) cu valoarea _self (figura 12.46).
569
Figura 12.46
2. Introducei n tag-ul <A> al celei de-a doua legturi atributul

target=?, nlocuind semnul ntrebrii (?) cu valoarea _blank (figura 12.47).
Figura 12.47
3. Validai documentul HTML 4 strict cu aplicaia validator. 4. Inserai

codul . HTML care afieaz icon-ul de conformitate
Figura 12.48
6. Testai legturile hipertext.
570
Remarc. n navigator, fiecare legtur se afieaz n concordan cu valoarea definit (_self, _blank).
XHTML
Creai o legtur (link) ctre un cadru
Iat cum crem pentru elementele SUMAR-ului o legtur hipertext ctre paginile care urmeaz s se afieze 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.
Figura 12.49
Remarc. (X)HTML recunoate 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
Inserai codul XHTML care afieaz icon-ul de conformitate . n figura 12.50 este afiat rezultatul vizualizrii paginii Web n Microsoft Internet Explorer.
Figura 12.50 Aplicaie Atribuii valorile predefinite _self, _blank legturilor hipertext ctre paginile a.html i b.html. Indicaie. Convertii 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 afieaz icon-ul de conformitate iar n figura 12.52 este afiat rezultatul vizualizrii paginii Web n Microsoft Internet Explorer.
572
Figura 12.51
Figura 12.52
573
HTML
Formatai bordurile cadrelor
n mod implicit fiecare cadru se afieaz cu o bordur. Dac dorii ca bordura s nu apar, va trebui s-o mascai. ntruct browser-ele nu recunosc aceleai tag-uri, este cteodat necesar s afectm mai multe atribute pentru a masca bordurile. Iat cum modificai grosimea i culoarea chenarului setului de cadre din aplicaia Creai cadre care se afieaz n coloane. 2. Introducei 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 coninutului acestora. Coninutul unui cadru este un document (X)HTML care trebuie formatat corespunztor.
574
Figura 12.54 Aplicaie Suprimai bordurile cadrelor. Indicaie. Introducei n tag-ul <FRAMESET> atributul frameborder="0".
XHTML
Formatai bordurile cadrelor
Iat cum modificai 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. n figura 12.55 se prezint documentul XHTML generat.
575
Figura 12.55 Remarci: 9 Elementul <frameset> recunoate urmtoarele atribute de formatare a cadrelor: frameborder=...; border=n; noresize=noresize; scrolling=...; marginheight=n; marginwidth=n; bordercolor=.... 9 Pentru a suprima bordurile cadrelor, folosii atributul frameborder=0. 9 Pentru a afia bordurile, definii 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, adugai atributul bordercolor elementului <frameset>, sau cel mai bine elementului <frame>.
576
Figura 12.56
HTML
Controlai prezena sau absena barelor de defilare
n mod implicit, navigatorul afieaz n cadre o bar de defilare al cror coninut nu se poate afia integral, dar putei mpiedica aceast inserie automat. Iat cum procedm pentru a mpiedica apariia barelor de defilare ale cadrului CadruDreapta din aplicaia Creai cadre care se afieaz n coloane (fixe, dinamice). 1. Introducei n tag-ul <Frame> al cadrului al crui coninut nu se poate afia integral, atributul scrolling=no (figura 12.57).
Figura 12.57
577
Figura 12.58
Remarc. n navigator, barele de defilare au disprut!
Aplicaii mpiedicai redimensionarea unui cadru. Indicaie. n tag-ul <FRAME> al cadrului cruia dorii s-i blocai
redimensionarea, introducei atributul noresize. Definii coordonatele spaiului dintre bordura cadrului i coninutul acestuia. Indicaie. n tag-ul <FRAME> al cadrului cruia dorii s-i definii marginile
introducei atributele marginheight=? i marginwidth=? nlocuind semnele de ntrebare (?) cu valoarea (exprimat n pixeli) marginilor de sus, respectiv cu valoarea (exprimat n pixeli) marginilor din stnga ale cadrului.
Remarci: 9 Pentru a defini spaiul dintre cadre, introducei n tag-ul <FRAMESET> atributul framespacing=? nlocuind semnul ntrebrii (?) cu valoarea (exprimat n pixeli) a spaiului dintre cadre. 9 ntruct atributul framespacing este recunoscut numai de Internet Explorer nu i de Netscape, HTML 4 utilizarea acestuia nu este recomandat.
578
XHTML
Controlai prezena sau absena barelor de defilare
Iat cum procedm pentru a mpiedica apariia 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. n figura 12.59 se prezint documentul XHTML generat.
Figura 12.59
Remarc. Prin atributul scrolling al tag-ului <frame /> transmitei valoarea no pentru a dezactiva barele de defilare ntr-un cadru sau valoarea auto pentru a le afia atunci cnd ele sunt necesare. Nu definii scrolling=no dect n cazul n care cadrul va conine o imagine sau un obiect de dimensiuni cunoscute.
n figura 12. 60 este afiat rezultatul vizualizrii paginii Web n Microsoft Internet Explorer.
579
Figura 12.60 Aplicaii mpiedicai redimensionarea unui cadru. Indicaie. Utilizai n tag-ul <frame /> atributul noresize=noresize. Definii coordonatele spaiului dintre bordura cadrului i coninutul acestuia. Indicaie. Utilizai n tag-ul <frame /> atributele marginheight i marginwidth.
HTML
Creai o alternativ pentru cadre
Pentru vizitatorii care utilizeaz navigatoare ce nu recunosc cadrele este preferabil s creai un mesaj de nlocuire. Iat cum crem mesajul: Nu putei vizita site-ul nostru, deoarece
navigatorul dumneavoastr nu recunoate cadrele! pentru vizitatorii

care utilizeaz navigatoare (mai puin rspndite) ce nu recunosc cadrele! 1. Introducei tag-ul <NOFRAMES> nainte de tag-ul final
</FRAMESET> (figura 12.61).
580
Figura 12.61
2. Introducei tag-ul pereche <BODY> </BODY> (figura 12.62).
Figura 12.62
3. Introducei
interiorul
tag-urilor
pereche
<BODY>
</BODY> mesajul de nlocuire a cadrelor (figura 12.63).
Figura 12.63
581
4. Introducei tag-ul </NOFRAMES> dup tag-ul (figura 12.64). </BODY>
Figura 12.64
Remarc. n navigatorul care nu recunoate cadrele, se va afia textul de nlocuire (figura 12.65).
Figura 12.65
XHTML
Creai o alternativ pentru cadre
Iat cum crem mesajul: Nu putei vizita site-ul nostru, deoarece
navigatorul dumneavoastr nu recunoate cadrele! pentru vizitatorii

care utilizeaz navigatoare (mai puin rspndite) 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, creai o zon de text de nlocuire cu ajutorul tag-urilor <noframes></noframes>.
Figura 12.67
583
Aplicaie Inserai n documentele dumneavoastr XHTML un cadru flotant. Indicaie. Pentru a aduga un cadru flotant ntr-un document parcurgei urmtoarele etape: 9 Adugai o pereche de tag-uri iframe: <iframe></iframe>. 9 Adugai atributele: name i id elementului iframe. 9 Adugai atributele: src, height, width i opional un atribut de aliniere (stnga/dreapta) elementului <iframe>. 9 Adugai un text alternativ pentru vizitatorii dumneavoastr, care nu dispun de ultimele versiuni Internet Explorer. Este suficient s introducei acest text ntre tag-urile <iframe> i </iframe>.
(X)HTML
Testai-v cunotinele
Tem
1. Comentai urmtoarele reguli pentru utilizarea cadrelor: 9 Cadrele sunt mult utilizate pe Internet fiind percepute ca un semn distinct al utilizrii tehnologiilor avansate de creare a unui site; 9 Cadrele au reputaia de a fi incoerente. 2. Descriei pe scurt procedura (X)HTML de creare a cadrelor care se afieaz n: 9 coloane (fixe, dinamice); 9 linii (fixe, dinamice). 3. Precizai care este codul surs XHTML care a stat la baza crerii paginii Web din figura 12.68.
584
Figura 12.68
Vizitai site-urile
9 www.louvre.fr 9 www.matnouttan.com-fr-sommaire-index.html
BIBLIOGRAFIE
1. Camille Grard, LAssistant Visuel HTML 4, Editions First Interactive, Paris, 2000 2. Deidre Hayes, HTML and XHTML in 10 Minutes, SAMS Teach Yourself, Third Editions, 2002 3. JohanChristian Hanke, GUIDEXPRESS,
(X)HTML
Facile,
Micro
Application, 2001, Paris 4. Dick Oliver, HTML & XHTML, CampusPress, 2001, Paris 5. Jean-Ren Bad, HTML 4 strict, Crez 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

(X) HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

(X) HTML

Încărcat de

Drepturi de autor:

Formate disponibile

(X)HTML

Conversaia 2. Structura unei pagini Web ..................................... 17

Conversaia 2 (continuare). Convertii HTML n XHTML ................. 45

Conversaia 3. Introducei i formatai caracterele cu HTML 4 i XHTML ..................................................................... 53

Conversaia 4. Creai i formatai paragrafele cu HTML 4 i XHTML ..................................................................... 117

Conversaia 5. Inserai i personalizai o linie orizontal cu HTML 4 i XHTML ................................................................. 173

Conversaia 6. Creai i utilizai foi de stiluri cu HTML 4 i XHTML ..................................................................... 193

Conversaia 7. Inserai imagini cu HTML 4 i XHTML ................... 271

Conversaia 8. Creai legturi cu HTML 4 i XHTML ..................... 331

Conversaia 9. Creai tabele cu HTML 4 i XHTML ....................... 379

Conversaia 10. Creai formulare cu HTML 4 i XHTML ................ 455

Conversaia 11. Inserai obiecte multimedia cu HTML 4 i XHTML .................................................................... 511

Conversaia 12. Creai cadre cu HTML 4 i XHTML ....................... 539

Bibliografie ....................................................................................... 585

HTML 4 , XHTML i XML

HTML 4 strict, XHTML sau XML?

HyperText Markup Language

9 Versiunea HTML utilizat n aceast lucrare corespunde limbajului HTML 4.01,

Care sunt instrumentele de care avei nevoie?

9 Editoarele WYSIWYG, precum DREAMWEAVER, NETSCAPE COMPOSER i

eXtensible Hyper Text Markup Language

XHTML: un vocabular XML pentru Web

Ce putei realiza cu limbajul XHTML?

Care sunt instrumentele de care avei nevoie?

Editoare de text (X)HTML

9 Exist editoare de text foarte bune Notepad (pentru toate versiunile

Aplicaia de validare W3C validator

eXtensible Markup Language

9 XML nu vine de la HyperText Markup Language! XML deriv din Standard

Diferene majore ntre XML i HTML

XML nu face nimic!

HTML, XHTML, XML

#_______________________________________________________ __________________________________________________________ __________________________________________________________

Structura unei pagini Web

Regulile de aur ale paginilor Web

Structura unui document HTML4 strict

Elementele comune (HTML) ale paginilor Web

<! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

<! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN

<! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 //EN

Corpul documentului. Elementul <BODY>

Validai documentele HTML 4 strict

Instrumentul de validare W3C - validator

document validates as HTML 4.01 strict!

Adugai icon-ul de conformitate HTML

dumneavoastr Web nu v rmne dect s recopiai codul indicat n

Atribute HTML comune

Exemplu: <P lang=fr> Text paragraf </P>.

Precizeaz codul ISO al limbii.

Atribute pentru gestionarea evenimentelor.

Structura unui document XHTML 1.0

Elementele comune (XHTML) ale paginilor Web

Pentru versiunea XHTML transitional utilizai tag-ul prezentat n figura 2.24.

9 Versiunea XHTML1 strict este utilizat numai pentru documentele XHTML

9 Versiunea XHTML1 transitional suport elementele necesare formatrii (CSS).

9 Exemple de titluri corecte:

Ali fii ai elementului <head>

Corpul documentului. Elementul <body>

Atribute XHTML1 comune

9 Atributul style nu poate fi utilizat cu elementele: <html>, <head>, <title>,

9 Atributul title nu poate fi utilizat cu elementele: <html>, <head>, <meta>,

Validai documentele XHTML 1.0

1.0 Transitional!, iar apoi putei aduga icon-ul de conformitate XHTML

#_ ______

Cod HTML & < > "