Carte X-HTML

8/7/2019 Carte X-HTML

1/584

(X)HTML


2/584

CUPRINS

Conversaia 1. HTML 4 , XHTML i XML.......................................... 3HTML4 strict, XHTML sau XML?...............................................................HTML HyperText Markup Language .XHTML eXtensible HyperText Markup Language XML eXtensible Markup Language .HTML, XHTML, XML Tem .

3

4

9

13

16

Conversaia 2. Structura unei pagini Web ..................................... 17Regulile de aur ale paginilor Web .HTML Structura unui document HTML4 strict .XHTML Structura unui document XHTML 1.0 ..(X)HTML Tem ....

1719

33

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

De ce trebuie s convertii documentele HTML? Convertii manual documentele HTML .Convertii (automat) documentele HTML cu HTML Tidy (X)HTML Tem .

45

46

48

51

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

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 ..

54

66

69

71

93

97

101

106

114115

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

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

117

121

128

131


3/584

HTML 4 Definii un spaiu naintea unui paragraf HTML 4 Comunicai browser-ului s afieze linii vide, spaiile

suplimentare etc. HTML 4, XHTML Creai un titlu HTML 4, XHTML Creai liste. Aplicaii (X)HTML Tem .

134

136

137

141

170

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

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 .

173

177

182

187192

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

(X)HTML Foile de stiluri n cascad CSS1, CSS2, CSS3 (X)HTML Creai stiluri CSS .(X)HTML Categorii de proprieti de stiluri ...HTML 4, XHTML Creai i aplicai o foaie de stiluri (incorporate)

intern ....HTML 4, XHTML Creai i aplicai o clas HTML 4, XHTML Incorporai o foaie de stiluri ntr-un document ..HTML, XHTML Creai i aplicai o foaie de stiluri extern .XHTML Controlai culorile legturilor (link-urilor) ntr-un

document XHTML Proprietile de bordur ale unei zone XHTML Proprietile foilor de stiluri sonore XHTML Proprietile de clasificare ..XHTML Proprietile documentelor imprimate .XHTML Proprietile de poziionare a unui element .XHTML Viitorul foilor de stiluri n XHTML (X)HTML Tem ..

193

195

199

200

208

215

257

264

265

266

267

268

268

268

270

Conversaia 7. Inserai imagini cu HTML 4 i XHTML ................... 271Manipulai 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 ...

271

274

283

286

289

293


4/584

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 .

297

303

307

311

315

321

329

Conversaia 8. Creai legturi cu HTML 4 i XHTML ..................... 331HTML 4, XHTML Creai o legtur hipertext ctre o alt pagin Web HTML 4, XHTML Creai legturi n aceeai pagin Web .HTML 4, XHTML Creai o legtur extern ctre un site Web, avnd

ca suport o imagine HTML 4, XHTML Creai o legtur hipertext (extern) ctre un alt siteWeb .

HTML 4, XHTML Creai o legtur hipertext extern ctre o adrese-mail .

HTML 4, XHTML Modificai culoarea legturilor hipertext .HTML 4, XHTML Creai o legtur hipertext ctre o pagin care se

deschide n propria sa fereastr ..(X)HTML Tem ..

331

363

355

361

365

369

372

377

Conversaia 9. Creai tabele cu HTML 4 i XHTML ....................... 379HTML 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 ..HTML 4, XHTML Utilizai un tabel ca un instrument de punere

n pagin ..(X)HTML Tem ....

379

394

399

404

414

418

422

425

431

435

440

445

449

453

Conversaia 10. Creai formulare cu HTML 4 i XHTML ................ 455Regulile de aur ale formularelor .HTML 4, XHTML Creai un formular ..HTML 4, XHTML Precizai metoda i script-ul utilizate

455459

463


5/584

HTML 4, XHTML Creai un buton pentru expedierea (submit) unuiformular ..

HTML 4, XHTML Creai un buton pentru resetarea (reset) unuiformular ..

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 ..

469

475

478

483

487

490

495

501

508

Conversaia 11. Inserai obiecte multimedia cu HTML 4

i

XHTML .................................................................... 511Reguli 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 .HTML 4, XHTML Inserai un fiier video extern sub forma unei legturi

hipertext ..HTML 4, XHTML Inserai un applet Java (X)HTML Tem ..

511

515

520

524

527

531

536

Conversaia 12. Creai cadre cu HTML 4 i XHTML....................... 539Reguli pentru utilizarea cadrelor .HTML 4, XHTML Apreciai cadrele (X)HTML .HTML 4, XHTML Creai cadre care se afieaz n coloane (fixe,

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 ..

539

541

546

551

554

562

565

573

576579

583

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


6/584

r

Conversaia 1

HTML 4 , XHTML i XML

n aceastconversaie:

HTML4 strict, XHTML sau XML?HTML HypeTextMarkupLanguageXHTML eXtensibleHyperTextMarkupLanguageXML eXtensibleMarkupLanguageHTML, 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

privati viaa profesional. Succesul fulminant i imediat al Web-ului seexplic 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.


7/584

4

Progresul extraordinar al Internetului de la nceputul anilor 90 a avut

loc datorit faptului c HTML este foarte uor de nvat (HTML nu esteun 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 cepoate 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 HyperTextMarkupLanguagePuinistorie

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


8/584

5

aveau la dispoziie un instrument simplu pentru a putea schimba datele

rezultate din rapoartele de cercetare. World Wide Web (www) i HTML senscuser!

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. Lasfritul 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 W ide 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.


9/584

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, interfaagrafic 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 publicatversiunea HTML 3.2 la conferina World Wide Web de la Paris. Unele din tag-

urile vechi au primit noi atribute iar noi tag-uri au fost create. Microsoft i

Netscape au continuat dezvoltarea propriilor navigatoare n afara acestor

norme. Foarte puine pagini sunt nc realizate n HTML 3.2.

W3C revine n fori 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 puinimportante. Majoritatea sunt gratuite! Consultai ghidul:http://browserwatch.internet.com/browsers.html.


10/584

7

Elementei 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:

Prima mea pagin Web

navigatorul nu va afia dect textul Prima mea pagin Web, tag-ul 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 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 Prima mea pagin Web un element HTML care

este alctuit din tag-ul de deschidere , coninutul propriu-zis,

textul titlului dumneavoastr (Prima mea pagin Web) i tag-ul de

nchidere . Toate tag-urile HTML trebuie s fie scrise ntre

simbolurile 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


11/584

8

Majoritatea tag-urilor HTML posed atribute. De exemplu, pentru

centrarea unui titlu n atributul este ALIGN:

Prima mea pagin Web

Remarci:Versiunea HTML utilizat n aceast lucrare corespunde limbajului HTML 4.01,

cel definit de W3C. Gsii aceste specificaii la adresa: www.w3.org/TR/REC-html40 (n limba englez).

Putei scrie tag-urile HTML cu majuscule sau minuscule. Este bine s le scriei cu minuscule pentru a facilita conversia n XHTML. 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:

un editor de text simplu pentru crearea i salvarea documentelorHTML;

un instrument de validare (X)HTML (vezi XHTML); un navigator Web pentru vizualizarea i testarea documentelor

HTML (vezi XHTML).

Editoare HTML

n general, exist dou categorii de editoare:

editoare pe baz de text sau de cod; editoare WYSIWYG (What You See Is What You Get, n

traducere: obinei ceea ce vedei).

Remarci: Editoarele WYSIWYG, precum DREAMWEAVER, NETSCAPE COMPOSER i

MICROSOFT FRONTPAGE, creeaz n mod rapid documentele HTML. Acesteeditoare v ofer numai o metod aproximativ de punere n pagin, deproiectare, de definire a culorilor etc.

Numai dup ce ai creat mai multe documente HTML i numai dup ce aineles principiile de baz HTML putei trece la utilizarea unui editor WYSIWYGi a unui editor pe baz de cod. Putei ncepe, de exemplu, cu un editorWYSIWYG.

V recomandm s ncepei prin a scrie manual codul HTML cu un editor detext standard, Notepad de exemplu.


12/584

9

XHTML eXtensibleHyperTextMarkupLanguageXHTML: 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 garanteaz calitatea documentelor i stabilitatea afirii

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 depreocuparea 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 alenavigatoarelor. Reformularea HTML n XHTML este un mare pas nainte.


13/584

10

Elementei 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:

insereaz n pagina dumneavoastr Web, din folder-ul Windows/Media,

fiierul sunet tada.wav.

Remarci: Toate tag-urile XHTML se scriu cu minuscule. Tag-urile XHTML pot avea dou forme:

o pereche de tag-uri, precum , etc. un tag unic, precum
, , sau numit i

element vid. n XHTML astfel de tag-uri trebuie s se termine cu unspaiu i o bar oblic (/ sau slash) nainte de simbolul >. Spaiullsat (un mic truc!) permite vechilor navigatoare care nu recunoscXHTML de a trata aceste tag-uri ca i n HTML. Fr a lsa un spaiu naintea caracterului /, vechile navigatoare pot s le ignore pur isimplu.

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.

Nu includei spaii suplimentare n interiorul tag-urilor. Excepie de la aceastregul sunt elementele vide care necesit un spaiu naintea barei oblice denchidere ( />).

Diferite elemente XHTML conin atribute. De exemplu,

Prima mea pagin Web

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.


14/584

11Remarci:

Toate atributele sunt separate de alte atribute i de tag-ul nsui prin spaii. n XHTML toate valorile atributelor se plaseaz ntre ghilimele. n interiorul tag-urilor de deschidere sau tag-urilor care corespund

elementelor vide, atributele se pot plasa n orice ordine, dup numeleelementului, cu condiia ca numele elementului s apar ntotdeauna pe primapoziie.

Ce putei realiza cu limbajul XHTML?

Cunoatei desigur c limbajele HTML i XHTML permit crearea paginilor

Web, dar fiecare dintre ele pot servi la:

crearea site-urilor intranet sau extranet; crearea fiierelor de help; crearea aplicaiilor n reea; crearea aplicaiilor de tip chioc; 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:

un editor de text simplu, pentru crearea i salvareadocumentelor XHTML;

un instrument de validare XHTML, pentru verificarea sintaxei istructurii documentelor XHTML;

un navigator Web, pentru vizualizarea i testarea documentelorXHTML.

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.


15/584

12

Cu Notepad, de exemplu, va trebui s scrie i codul manual. Aceasta

nseamn c dumneavoastr, nu Dreamweaver sau Front Page (editoareWYSIWYG), 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: Exist editoare de text foarte bune Notepad (pentru toate versiunile

Windows), vi sau pico (pentru Unix) cu care s generai codul (X)HTML. ntruct noile versiuni XHTML nu sunt nc implementate n editoareleWYSIWYG, este bine s utilizai metoda de codificare manual.

Utilizarea procesoarelor de text Word, Wordperfect sau WordPad pentrucrearea documentelor (X)HTML nu este recomandat!

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


16/584

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 (pentruMicrosoft);

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 versiuneaXHTML 1.1 cu titlul de recomandare, ceea ce nseamn c aceast nou versiune adevenit 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 practicaceeai cu versiunea XHTML 1.0. Versiunea XHTML 1.1 reprezint o versiuneintermediar ntre HTML4 i XHTML 1.0.

eXtensibleMarkupLanguageXMLXML 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.0au devenit recomandri (XML a fost oficial definit i recunoscut ca

standard).

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

Generalized Markup Language sau SGML definit n anul 1986 prin standardulISO 8879.


17/584

14 XML (eXtensible Markup Language) este cel mai nou limbaj dezvoltat

de consoriul W3 (specializat n standarde Web). Documentele i specificaiile XML sunt accesibile la adresele

http://www.w3c.org/MarkUp; www.w3.org/XML/; www.ibiblio.org/pub/sun-info/standards/xml/why/xmlapps.htm; www.xml.com.

Diferene majore ntre XMLi 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.

ADAM VASILE

EVA TATIANA

1 septembrie 2002

scripturi Trimite urgent script-urile

Figura 1.1


18/584

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:

WML (Wirelles Markup Language) permite afiarea datelor petelefoanele mobile;

HR XML (Human Ressources XML) permite descriereadomeniului de resurse umane;

SVG (Scalable Vector Graphics) permite crearea imaginilor ndou dimensiuni XML;

SMIL (Synchronized Multimedia Integration Language) permite crearea obiectelor multimedia (sunet, video etc.);

MathML permite definirea ecuaiilor matematice, reprezentrialgebrice, sisteme de sintez vocal.

Remarc. Pentru mai multe informaii, consultai lucrarea: Liviu Dumitracu, XML,Editura Universitii din Ploieti, 2003.

__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________


19/584

16

Tem

Testai-vcunotinele

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 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

www.w3.org www.w3.org/XML www.microsoft.com www.netscape.com www.operasoftware.com www.djtracyyoung.com

HTML, XHTML, XML


20/584

t

Conversaia 2

Structura unei pagini Web

n aceastconversaie:

Regulile de aur ale paginilor WebHTML Structura unui document HTML4 strictXHTML Structura unui documen XHTML 1.0 (X)HTML Tem

Regulile de aur ale paginilor Webnainte 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:

Pagina de primire Este prima pagin a unui site. Numii pagina de primire index.htm sau index.html. Ea trebuie s conin un rezumat succint al site-ului

dumneavoastri/sau un sumar.

n cazul ideal, ea trebuie s conin o prezentare scurt aproprietarului siteului (persoan, societate, asociaie etc.).


21/584

18

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 nnavigatorul acestora. Pagina trebuie ca tot timpul s fie gritoareiar textul suficient de explicit fr imagini.

Utilizai fiiere de dimensiune minimal pentru ca vizitatorul snu atepte minute n ir apariia ntregii pagini pe ecran.

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-aimenionat.

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!

Privilegiai interactivitatea Fii universal, evitai pe ct posibil instruciunile specifice unui

anumit tip de navigator.

Creai o legtur (link) de tip mailtopentru ca vizitatorii s poats v expedieze cu uurin un e-mail.

Prevedei un FAQ (Frequently Asked Questions). Astfel, nu vatrebui s rspundei de mai multe ori la ntrebri puse frecvent.


22/584

19

Structura unui document HTML4 strictHTMLnainte 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).


23/584

20

Remarc. O pagin Web valid este alctuit din trei pri: tipul documentului; seciunea de en-tte; corpul paginii Web.

Figura 2.2

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


24/584

21

Remarc. Comentariile joac un rol particular n cadrul stil-urilor. Ele permitvechilor 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:

DTD HTML 4.01 strict, care definete versiunea cea mai corect alimbajului HTML 4, pentru care declaraia DOCTYPE va fi (figura 2.4):


25/584

22

Elementul

Seciunea de en-tte poate conine diferite elemente:

, , , , i , dintre

care numai utilizarea elementului este obligatorie.

n figura 2.7 este prezentat structura posibil a unui en-tte:

Elementul META

n en-tte-ul documentului HTML 4 strict (figura 2.7) s-a introdus tag-ul

pentru a preciza cuvintele cheie ale paginii.

Remarci:

Figura 2.7

Elementul este un element vid, deci fr tag de nchidere. Numeleinformaiei coninute de tag-ul poate fi definit n dou moduridiferite cu atributele name sau http-equiv, dar numai unul singur trebuie sfie utilizat n acelai element . Dac name nu este utilizat, trebuiefolosit atributul http-equiv, care permite n plus fa de name adugareaperechilor nume/valoare n en-tte-ul http al documentului transmis prinserver. Diferite valori ale atributului name sunt cuvinte cheie utilizate demotoarele de cutare pentru indexarea paginilor Web; altele nu au dect uncaracter de informaie intern.

Exemple de tag-uri :


26/584

23

Pentru mai multe detalii privind tag-urile vizitai site-ul:

http://vancouver-webpages.com/META/metatags.detail.html

Elementul

Elementul conine titlul paginii. Coninutul titlului nu trebuie s

fie dect textul cuprins ntre tag-urile i (figura 2.8).

Figura 2.8

Remarc. Titlul paginii este prima informaie care se afieaz n bara de titlu anavigatorului (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!


27/584

24

Remarc. Semnificaia celorlalte elemente HTML prezentate n figura 2.7 esteurmtoarea:

Elementul conine valoarea atributului href (pentru URL-uri relative). este un element vid.

Elementul este folosit pentru inserarea codului JavaScript ntr-opagin HTML. Codul JavaScript trebuie s fie plasat ntre tag-urile i . Pentru navigatoarele care nu recunosc script-urilese recomand includerea codului JavaScript n comentarii. Codul va fi n acestcaz ignorat i considerat ca un text de comentariu ordinar.

Elementul conine definiia unei foi de stiluri. Ca i n cazul script-urilor, pentru navigatoarele care nu recunosc foile de stiluri (CSS) serecomand utilizarea comentariilor.

Elementul stabilete o legtur ntre pagina HTML curent i altdocument (este un element vid!). poate fi folosit de asemeneapentru a lega un document de o foaie de stiluri extern.

Corpul documentului. Elementul

Tag-urile i definesc corpul documentului (figura

2.10).

Figura 2.10

Remarc. Toate tag-urile (de nivel 1) imbricate n elementul trebuie s fieconforme cu DTD HTML 4 strict.

Crearea unui en-tte. Tag-ul urmtor () permite afiarea cu

caractere mari i bolduite a mesajului Prima mea pagin Web (figura

2.11).

Figura 2.11


28/584

25

Tag-ul este utilizat pentru crearea unui titlu (H de la header, n

limba englez). Cifra care urmeaz lui H indic importana i mrimeatitlului. 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


29/584

26

Figura 2.12(continuare)


30/584

27

n figura 2.13 este afiat rezultatul vizualizrii documentului n Microsoft

Internet Explorer.

Figura 2.13


31/584

28

Figura 2.13(continuare)

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.


32/584

29

Remarc. n afar de plcerea de a fi primit aceast recompens atribuit lucrului binefcut, serviciul de validare v ofer avantajul unei verificri a paginilor dumneavoastri a unei semnalri a eventualelor erori generate. Numrul de linie i tipul de eroare vvor fi semnalate, i dac ai utilizat HTML-Kit care numeroteaz liniile de cod, nu veintmpina 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. Veiobine 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.

Remarci: Interfaa aplicaiei validator nu este elegant dar este ns foarte practic. 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;

Figura 2.14

Figura 2.15


33/584

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.

Dup caz, folosii i cele patru butoane de validare (auto explicite): Showsource input, Show parce tree, Show an outline of this document, excludeattributes from the parce tree.

Dac se ntmpl s comitei i erori care violeaz regulile XML sau regulile devalidare a DTD-urilor, aplicaia validator va afia mesaje de eroare. La primavedere, mesajele par a fi impersonale! Dar v vei convinge singuri c estedoar 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


34/584

31

Dac ai respectat indicaiile din aceast conversaie, vei obine textul

prezentat n a doua parte a figurii 2.17 care v precizeaz cdocumentul dumneavoastr este conform i valid: Congratulation, this

documen validates as HTML 4.01 strict!t

Adugai icon-ul de conformitate HTML

Pentru a afia icon-ul de conformitate W3C n pagina

dumneavoastr Web nu v rmne dect s recopiai codul indicat n

pagina de rezultate W3C (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.17

Figura 2.18

Figura 2.19


35/584

32

n figura 2.20 este afiat rezultatul vizualizrii paginii Web n Microsoft

Internet Explorer.

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:

id=nume Atribuie un nume unic unui element din interioruldocumentului. Cnd un element conine deasemenea un atribut name este de dorit sutilizm simultan cele dou atribute (id i name)afectndu-le aceeai valoare.Exemplu:

Text paragraf
.
class=nume Atribuie o clas sau un element de clas unuielement. Acest atribut este frecvent utilizat cufoile de stiluri CSS.Exemplu:

Text paragraf
.
style=stil Permite crearea unui stil local.Exemplu:

Text paragraf
.
title=text Se aplic numai unui element dedicat i nuntregului document.Exemplu:

Textparagraf
.
lang=cod Precizeaz codul ISO al limbii.Exemplu:

Text paragraf
.
dir=ltr\rtl Precizeaz sensul de citire (left to right\ right to

Figura 2.20


36/584

33

left) al unui text.

onclick, ondblclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup

Atribute pentru gestionarea evenimentelor.

XHTML Structura unui document XHTML 1.0ntruct 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 paginWeb (vezi figura 2.21).


37/584

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 dedicatescript-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.


38/584

35

Figura 2.22

Remarc. Pentru versiunea XHTML Strict, putei folosi i declaraia DOCTYPE prescurtat (figura 2.23).

Pentru versiunea XHTML transitional utilizai tag-ul prezentat n figura

2.24.

Remarc. ntruct standardele XHTML evolueaz, aceast declaraie va fi modificatpentru a indica noile versiuni. De exemplu, ntr-un an declaraia DOCTYPE ar puteaavea forma:

n sfrit, pentru versiunea XHTML frameset utilizai tag-ul prezentat n

figura 2.25.

Figura 2.23

Figura 2.24

Figura 2.25


39/584

36

Remarci:Versiunea XHTML1 strict este utilizat numai pentru documentele XHTML

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

Elementul

Elementul 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 deasemenea combina mai multe tipuri de documente XML. Acelai document poateconine elemente care aparin mai multor vocabulare. Este de asemenea posibil caacelai nume al unui element s fie utilizat n diferite vocabulare. Spaiul de numepermite realizarea unei legturi a unui element la un vocabular cu ajutorul prefixelorspecifice. n exemplul nostru (figura 2.21) spaiul de nume XHTML a fost declarat ninteriorul tag-ului cu atributul xmlns a crei valoare este numele spaiului denume (figura 2.26).

Elementul

Prezent n toate documentele XHTML, elementul conine

informaii privind titlul, script-ul utilizat, definiia stilurilor i descrierile

documentului.Elementul trebuie inserat ntre tag-urile i .

Remarc. Nu confundai elementul care este un element de structur cuelementul en-tte (h1, de exemplu) care creeaz un text de en-tte n corpuldocumentului.

Figura 2.26


40/584

37

n afar de elementele meta i title, elementul poate conine de

asemenea i urmtoarele elemente (fiu): script, style, link, isindex (estenlocuit de elementul input), base.

Elementul

Elementul este un element fiu al elementului (poate fi

imbricat n ); este de asemenea un element vid (figura 2.27).

Figura 2.27

Remarc. Deoarece elementul este un element vid, nu uitai s-l nchidei cu un

spaiu urmat de o bar oblic naintea semnului > ( />).

Elementul

Elementul , obligatoriu ntr-un document XHTML1 conine titlul

documentului. Pentru a utiliza elementul , inserai-l ntre tag-urile

de nceput i de sfrit (figura 2.28).

Figura 2.28


41/584

38

Remarci: Exemple de titluri corecte:

Exemplu de cod XHTML nvm XHTML Adrese de site-uri XHTML

Exemple de titluri mai puin utile: Capitolul 4 Aplicaii Exemple

Atenie la titlurile implicite generate de editoarele WYSIWYG. Dai propriultitlu documentului dumneavoastr.

Informaiile din elementul sunt de asemenea utilizate de ctremotoarele de cutare i programele de indexare.

Ali fii ai elementului

n afar de elementele i , elementul 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

Elementul conine elementele, atributele i informaiile pe care

dorii s le afiai n navigator. Pentru a utiliza elementul

inserai-l ntre tag-ul de nchidere i tag-ul de nchidere

(figura 2.29).

Figura 2.29


42/584

39

Crearea unui en-tte. En-tte-urile divizeaz textul, anun subiectele

care urmeaz i aranjeaz informaiile ntr-o ierarhie logic. LimbajulXHTML ca i limbajul HTML 4 Strict permite utilizarea a ase nivele de

en-tte: ; ; ; ;

; (vezi Conversaia 4).

Tag-ul utilizat n continuare (figura 2.30) a fost introdus

cu rolul de a afia cu caractere mari i bolduite mesajul: Prima mea

pagin Web.

Remarc. n general, este bine s utilizai elementele de en-tte numai pentrudocumentele de en-tte, altfel spus nu utilizai aceste elemente pentrulegende 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:Atributul style nu poate fi utilizat cu elementele: , , ,

, , , , i .Atributul title nu poate fi utilizat cu elementele: , , ,

, , , i .

Figura 2.30


43/584

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.

applet, nlocuit de elementul object; basefont, nlocuit de CSS; center, nlocuit de CSS; dir, nlocuit de elementul ul; font, nlocuit de CSS; isindex, nlocuit de elementul input; menu, nlocuit de elementul ul; s sau strike, nlocuit de CSS; u, nlocuit de CSS.

Remarc. n cadrul lucrrii, vom prezenta pentru fiecare din elementele HTML depite oalternativ (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:


44/584

41

Icon-ul XHTML (vezi figura 2.32) indic utilizatorilor c documentul

dumneavoastr este conform specificaiilor limbajului XHTML. Felicitri!

Figura 2.31

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


45/584

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

Figura 2.35

Rezultatul vizualizrii paginii Web n Microsoft Internet Explorer este

prezentat n figura 2.35. Remarcai, la baza paginii, icon-ul de

conformitate W3C.


46/584

43

Tem

Testai-vcunotinele

1. Comentai pe scurt urmtoarele dou reguli de aur ale paginilorWeb:

Nu publicai o pagin n curs de realizare. 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

http://validator.w3.org www.w3.org/Markup www.yahoo.com

(X)HTML


47/584

t

t

Conversaia 2(continuare)

Convertii HTML n XHTML

n aceastconversaie:

De ce trebuie sconver ii documentele HTML?Converti i manual documentele HTMLConverti i (automa ) documentele HTML cu HTML Tidy (X)HTML Tem

A converti un document HTML n XHTML nu nseamn a relua totul de la

zero! XHTML utilizeaz exact aceleai elemente i atribute ca HTML (maipuin 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:

convertire n mod manual; convertire n mod automat, utiliznd aplicaia HTML Tidy.

De ce trebuie sconvertii 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).


48/584

46

Prezentm n continuare cteva argumente, sperm convingtoare:

ntruct limbajul XHTML este o aplicaie XML, un procesor XML poateprelucra XHTML.

XHTML poate fi extins pentru a integra alte modele de documente(vocabulare) ca de exemplu, SVG (Scalable Vector Graphics), SMIL

(Synchronized Multimedia Integration Language), MathML

(Mathematic Markup Language) sau de ce nu propriul dumneavoastr

vocabular XML.

XHTML ncurajeaz separarea stilului (documentului) de structuradocumentului.

XHTML ofer un cod mai clar, mai uor de citit att pentru procesorct i pentru ochiul uman.

Furnizorii de telefoane mobile au ales XHTML ca limbaj privilegiat. 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.

W3C nu va mai dezvolta HTML, dect sub form de noi versiuniXHTML.

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 ametodei 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


49/584

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:

Atunci cnd utilizai sintaxa elementului vid XML, inserai un spaiunaintea barei oblice (/); exemplu:
.

Utilizai o foaie de stiluri extern sau documente de script n loc de ale imbrica ntre i 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 . La

ora actual nici-un navigator nu este capabil de a se servi de

seciunile CDATA ale limbajului XML.

Convertii toate numele de elemente i atribute (i valorile atributelor)care sunt scrise cu majuscule, n minuscule.

Nu utilizai rupturi de linie pentru a mri lizibilitatea documentului;inserai un spaiu alb numai ntre elemente.

Utilizai mpreun atributele name i id pentru a asigura ocompatibilitate perfect cu navigatoarele! Exemplu: .

Pentru a asigura o compatibilitate n aval i n amonte utilizai nacelai timp atributele lang i xml.

nchidei toate elementele, inclusiv elementele vide. Plasai ntre ghilimele toate valorile atributelor.Atribuii valori tuturor atributelor. Exemplu:.

Imbricai corect elementele. Utilizai declaraia DOCTYPE corespunztoare. Introducei n tag-ul de deschidere spaiul de nume XHTML:

.


50/584

48

Aplicnd regulile de convertire manual (HTML XHTML) documentului

HTML 4 (Conversaia 2, figura 2.1) s-a obinut documentul XHTML 1.0ilustrat n figura de mai jos (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, Tidyposedi o versiune grafic, Tidy Gui.Prezentm n continuare cteva din virtuile acestui instrument:

Figura 2.36

corecteaz tag-urile finale desperecheate; corecteaz erorile de imbricare;


51/584

49

localizeaz elementele prost plasate (exemplu: elementul td esteplasat n interiorul elementului form);

modific n mod automat toate numele de elemente i atribute careau fost scrise cu majuscule;

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-li 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).


52/584

50

Nu v grbii! Mai existi mai mult ca perfect!

Remarci: 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.38

Figura 2.39


53/584

51

Selectai File Save. Executai apoi clic pe Editor situat la baza ferestrei pentru a continua

modificrile n documentul dumneavoastr sau pentru a vedea limbajulXHTML n toat splendoarea sa! (figura 2.40).

Figura 2.40

Tem

Testai-vcunotinele

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):

Convertii toate numele de elemente i atribute (i valorileatributelor) care sunt scrise cu majuscule, n minuscule.

nchidei toate elementele, inclusiv elementele vide.

(X)HTML


54/584

52

Vizitai site-urile

www.altavista.com www.news.com www.multimania.fr www.tripod.fr www.zdnet.com/developer


55/584

Conversaia 3

Introducei i formatai caracterele cu

HTML 4 i XHTML

n aceastconversaie:

HTML4, XHTML Introduce i text

t

t

HTML4, XHTML Insera i caractere specialeHTML4, XHTML Insera i caractere proprii (X)HTMLHTML4, XHTML Aplica i unui text formatele fizicei logiceHTML4, XHTML Scrie i un text cu exponent sau cu indiceHTML4 Defini i tipul de fonHTML4 Defini i dimensiunea fontuluiHTML4 Defini i culorileXHTML Defini i tipul de font, dimensiunea fon uluii culorile (X)HTML Tem

Elementele cele mai des ntlnite n paginile Web sunt: textul iimaginile. 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.


56/584

54

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).

HTML

Figura 3.1

2.Introducei textul propus ntre tagurile i (figura 3.2).

Figura 3.2


57/584

553.Salvai documentul (index.htm) cu extensia .htm sau .html

(figura 3.3).

Remarci:

Figura 3.3

Dac n editorul de texte Notepad acionai tasta ENTER sau inserai maimulte spaii, aceasta nu v ajut dect la ... aerisirea documentului HTMLneinfluennd n nici un fel modul de afiare a paginii ntr-un browser.

Salturile de linie, paragrafele sunt create cu taguri specializate (veziparagrafele urmtoare ). Fr aceste taguri, un text se ntinde pe o singurlinie atunci cnd se afieaz ntr-un browser.


58/584

564.Validai documentul HTML 4 strict cu aplicaia validator

(http://validator.w3.org).

Figura 3.4

Figura 3.5

5.Inserai codul HTML care afieaz icon-ul de conformitate(figura 3.5).


59/584

576.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) iicon-ul de conformitate W3C la baza paginii (vezi figura 3.7).

Remarci: Observai modul total diferit de afiare a textului de ctre editorul Notepad i

browserul Internet Explorer.

Figura 3.7


60/584

58 Utilizai comanda SOURCE din meniul VIEW pentru a revedea codul surs

HTML.

Activai butonul REFRESH de pe bara de instrumente a browserului pentru aactualiza documentul n cazul n care au fost operate modificri.

Dac textul pe care dorii s-l introducei se afl deja n alt document, utilizaitehnica COPY PASTE pentru a-l copia n Notepad. Ctigai, evident multtimp!

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 manualun document XHTML care conine textul Bine

ati venit! Felicitari pentru rabdarea de a ne fi descoperit!.

XHTML

Metoda manual

1.Introducei n locul tag-ului urmtoarele trei linii (figura3.8): ; i .

Figura 3.8

Remarci: Prima linieeste prologul XML HTML integrat n XML. Ea definete setul de

caractere iso-8859-1. Atenie la majuscule i la minuscule! A doua linie(lung!) definete tipul de document (DOCUMENT TYPE

DEFINITION) utilizat. Noi utilizm pentru acest exemplu DTD transitional,


61/584

59opiunea cea mai frecvent. identific fiierul ca documentHTML conform cerinelor XML.

Tag-ul este singurul tag scris cu litere mari. Celelalte tag-uriHTML trebuie s fie scrise cu litere mici. poate fi utilizat cu una din opiunile: strict, transitional i

frameset. Opiunea Strict.dtd (figura 3.9) ofer mai puine avantaje i cere n schimb

mai mult efort de codificare.

Opiunea transitional.dtd (figura 3.10) se folosete atunci cnd optai pentruun DTD ... moderat. n cadrul acestei lucrri, opiunea transitional.dtd va fifolosit n majoritatea aplicaiilor.

Opiunea frameset.dtd (figura 3.11) se folosete atunci cnd lucrai cu cadre(vezi Conversaia 12).

Figura 3.9

Figura 3.10

Figura 3.11

Nu intrai n panic! Un document DTD este redactat n limbajul de descriere adocumentelor SGML.

Poate ai observat unele schimbri la tag-ul din cea de-a eia linie(figura 3.12). Tag-ul are noi atribute: xmlns, xml:lang i lang. Cnd

tr


62/584

60utilizai HTML trebuie s introducei doar tag-ul pentru a identificadocumentul ca fiier HTML, dar la XHTML trebuie s folosii atributul xmlns

pentru a lega documentul dumneavoastr la definiia Consoriului W3 aXHTML-ului, care exist nc! E puin neclar, dar este o ncercare pentru viitor.Mai multe despre aceste planuri de viitor n capitolele urmtoare.

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 . Legtura ctre DTD-ul din

linia a doua poate fi considerat total inutil. De ce? Iat cteva dintre

argumente.

Navigatoarele actuale (i viitoare) pot citi fr probleme(X)HTML fr DTD, deoarece toate tag-urile sunt integrate nnavigator, i sunt deci cunoscute.

Aceast informaie este, la ora actual, uor ignorat de ctrenavigatoarele curente.

Cele trei linii sunt puin utilizate n practici de multe ori potdezorienta nceptorii.

Remarci:

Renunai la cele trei linii numai atunci cnd suntei siguri c ai redactatdocumente XHTML valide, ntr-un stil perfect! Pentru navigator este puin important dac la nceputul documentului

introducei cele trei linii sau numai tag-ul . Exist programe care convertesc n mod automat HTML n XHTML. Utilizai programul utilitar (oferit gratuit de W3C) HTML-TIDY pentru

convertirea automat HTML XHTML.

n continuare vom trece la urmtorul pas (2) necesar crerii primului

nostru document XHTML.

Figura 3.12


63/584

612.Introducei cu litere mici, tag-urile , , i

(figura 3.13).

Figura 3.13

Remarci: 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

trebuie s se gseasc naintea tuturor celorlalte elemente, dardup declaraia XML.

Pot fi utilizate toate tag-urile HTML dar numele lor trebuie s fieintroduse cu litere mici ( nu , nu ).

Toate tag-urile de deschidere trebuie s corespund unui tag denchidere cu acelai nume, scris cu minuscule.

Toate tag-urile elementelor vide trebuie s se termine cu o bar oblic(Exemplu:
sau
).

Atributele trebuie s aib un nume i o valoare. Valorile atributelor trebuie s fie cuprinse ntre ghilimele.

Dac respectai aceste reguli simple, documentele dumneavoastr vor ficonforme cu standardul XHTML. Pentru verificare, putei valida acestedocumente.

3.Introducei textul ntre tag-urile i (figura3.14).

Figura 3.14

Remarc. Informaiile pe care dorii s le prezentai n pagina Web, trebuie s fie definiten corpul paginii, mai precis ntre tag-urile i .

4.Introducei tag-ul de nchidere (figura 3.15).


64/584

62

Remarci: Un document XHTML se compune din elementele: antet i corpul

documentului. Ele sunt delimitate prin tag-urile i . Un document XHTML ncepe cu tag-urile i , care conin

informaii privind setul de caractere utilizat i tipul de document utilizat. Celedou informaii permit navigatorului s identifice o pagin scris n XHTML.

Tag-ul trebuie s includi atributele: xmlns, xml:lang, lang. Tag-urile i conin informaii despre document. Tag-urile i identific titlurile paginii. Tag-urile i delimiteaz corpul paginii. Toate tag-urile XHTML (cu excepia tag-ului ) trebuie s fie

tastate cu litere mici.

5.Salvai documentul (lumina.html), figura 3.16.

Remarc. Extensia fiierului este .html. Nu exist extensia .xhtml.

6.Validai documentul XHTML cu aplicaia validator.

Figura 3.15

Figura 3.16


65/584

63Odat declaraia adugat, putei trece la validarea

documentului XHTML n raport cu DTD-ul care figureaz pe site-ulconsoriului W3. Dac validarea reuete, ai obinut un document

XHTML.

Remarc. W3C propune o aplicaie de validare validator (http://validator.w3.org) care vpoate 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).


66/584

64

Figura 3.18

8.Vizualizai pagina Web ntr-un navigator (figura 3.19).

Iat cum procedm pentru a crea acelai document XHTML n modautomat, convertind cu HTML Tidy documentul HTML lumina.html (creat

anterior).

Figura 3.19

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


67/584

65n cteva minute HTML Tidy afieaz un document XHTML mai mult

ca perfect! (vezi figura 3.21).

n figura 3.22 este afiat rezultatul vizualizrii paginii Web n Microsoft

Internet Explorer.

Remarc. Analizai documentul XHTML pe care l-ai generat n mod automat i ncercais nelegei regulile XHTML care au fost aplicate. Nu este nimic complicat.

Figura 3.21

Figura 3.22


68/584

66

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

sau,

utilizai mnemonicul (figura 3.24).

HTML

Figura 3.23

Figura 3.24


69/584

67Remarc. &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.

Remarci: n navigator simbolul apare explicit. Reinei urmtoarele coduri: pentru caracterul ; @ pentru

caracterul @; pentru caracterul ; pentru caracterul ; 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

Figura 3.25

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:


70/584

68 pentru simbolul de copyright (); pentru simbolul de

marc nregistrat () etc.; folosit pentru inserarea unui spaiuntr-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.

Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n

figura 3.27.

Figura 3.26

Figura 3.27

3


71/584

69

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 unampersand (&) 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 &

Remarci: Prezentm n tabelul urmtor principalele simboluri i codul (mnemonicul)

HTML asociat.

Simbol Cod HTML

&

"

&

"

HTML

Figura 3.28

Tabelul 1


72/584

70 Entitatea de tip caracter special, care este utilizat frecvent n proiectarea

paginilor Web i care nu se afieaz pe ecran este spaiul neutilizat (non-

breaking space) care are codul HTML (ampersand non breakingspace punct i virgul).

2.Validai documentul HTML 4 strict cu aplicaia validator.3.Inserai codul HTML care afieaz icon-ul de conformitate

.


Remarc. Navigatorul afieaz simbolul &.

Figura 3.29

XHTML Inserai caractere proprii XHTMLPe 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.



73/584

71

Figura 3.30


figura 3.31.

Figura 3.31

HTML Aplicai unui text formatele fizicei logicePn 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


74/584

72care dorii s-l formatai. Formatarea unui text poate fi pus n eviden

cu dou tipuri de formate: formate logicei 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: HTML 4 propune dou metode (metoda veche i metoda nou) total

diferite pentru aplicarea formatelor fizice i logice. Tag-urile pe care le studiai n aceast conversaie sunt aplicate cu metoda

veche, care n prezent este descurajat oficial de W3C. Foile de stilurireprezint (vezi Conversaia 6) noua metod care este ncurajat oficial deW3C.

De ce nvm o metod depit? ntruct un numr mare, deloc neglijabilde utilizatori posed nc navigatoare Web care nu permit utilizarea foilor destiluri.

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 i

formatul fizic .

1.Plasai prima fraz ntre tag-urile i .


75/584

73

Figura 3.32

Figura 3.33

2.Plasai fraza "Felicitri pentru rbdarea de a ne fi descoperit"ntre tag-urile i .


.



76/584

74

Figura 3.34

Remarc. n browser, textele definite sunt bolduite, respectiv cursive. Admiraiicon-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 pagini cum o subliniai pe

cea de-a doua. Vom utiliza formatul fizic i .

1. Plasai prima fraz ntre tag-urile i (figura 3.35).


77/584

75

Remarc. Pentru a bara un text putei utiliza de asemenea tag-ul pereche ... .

2. Plasai cea de-a doua fraz din pagin ntre tag-urile i (figura 3.36).

Figura 3.35

Figura 3.36

3.Validai documentul HTML 4 strict cu aplicaia validator.4. Inserai codul HTML care afieaz icon-ul de conformitate

.


78/584


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: i (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 i .

1.Plasai cuvntul pe care dorii s-l mrii ntre tag-urile i (figura 3.38).


79/584

77

Figura 3.38

Figura 3.39

2.Plasai textul pe care dorii s-l micorai ntre tag-urile i (figura 3.39).

3.Validai documentul HTML4 strict cu aplicaia validator.4.Inserai codul HTML care afieaz icon-ul de conformitate

.


80/584


Remarc. n browser, textele sunt reduse sau mrite n raport cu dimensiunea implicit afontului: 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 i (figura 3.41).

Figura 3.40

Figura 3.41

n navigator, cuvntul sau fraza nu vor fi scindate (figura 3.42).


81/584

79

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 .1.Plasai prima fraz ntre tag-urile i (figura 3.43).

Figura 3.42

Figura 3.43

2.Validai documentul HTML4 strict cu aplicaia validator.


82/584

803.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 .

1.Plasai textul definiiei ntre tag-urile i (figura3.45).


83/584

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!).


84/584

82Iat cum definim n HTML citatul: "Patria este norodul, nu tagma

jefuitorilor" a spus Tudor Vladimirescu. Vom utiliza formatul logic.

1.Plasai citatul ntre tag-urile i (figura 3.47).


.


Figura 3.47

Figura 3.48


85/584

83Remarci:

Putei afia citatele lungi ntr-un bloc de text (indentat) cu scopul de a-l puteadiferenia de restul textului din pagina Dvs. Web.

Pentru citate mai scurte se recomand ghilimelele sau tag-ul i s lsaitextul n acelai rnd cu restul coninutului textului.

Dac mrimea textului citat depete cteva propoziii, utilizai tag-ul.

Indicai comenzi, coduri de program

Dac pagina Web pe care o realizai conine comenzi enun uri 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 .

1.Plasai comenzile Microsoft Office de copiere a unui text ntretag-urile i (figura 3.49).

Remarc. Putei de asemenea semnala comenzi sau enunuri (cod) programutiliznd tag-ul .

Figura 3.49

2.Validai documentul HTML 4 strict cu aplicaia validator (figura3.50).

3.Inserai codul HTML care afieaz icon-ul de conformitate.


86/584


Remarc. n navigator, comenzile se formateaz cu un font specific.

Dai ordin ... sclipeascun 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 .

1.Plasai textul "Bine ai venit!", care urmeaz s clipeasc, ntretag-urile i .

Remarc. Tag-ul este recunoscut numai de browser-ul Netscape.

Figura 3.50

Figura 3.51


87/584


.

4.Vizualizai pagina Web n browser-ul Netscape (figura 3.52).

XHTML

Figura 3.52

Aplicai unui text formatele fizicei logiceTag-urile (X)HTML permit formatarea paginilor dar proprietile lor nu

sunt destul de puternice pentru a realiza pagini estetice.

Existi 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


88/584

86folosite. n tabelul 2 se prezint lista formatelor fizice (X)HTML n

vigoare.

Format fizic Semnificaie

... Bold ... Italic ... Teletext ... Font mare ... Font mic ... Scriere cu exponent ... Scriere cu indice

n tabelul 3 se prezint lista formatelor logice (X)HTML n vigoare.

Format logic Semnificaie

... Emphasis ... Strong emphasis ... Cod ... Sample ... Keyboard ... Variable ... Citare cu URL ... Definiie ... Acronim ... Abreviere ... Adres ... Citare lung ... Citare scurt ... Text suprimat ... Text inserat

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 datelorn tag-uri de formatare (vezi Conversaia 6).

Tabelul 2

Tabelul 3

Formatai un text cu caractere ngroate (bolduite) sau cursive(italice)

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


89/584

87index.html creat anterior, pe care apoi l convertim n XHTML cu

programul utilitar HTML-TIDY.


Inserai codul XHTML care afieaz icon-ul de conformitate .


figura 3.54.

Figura 3.53

Figura 3.54


90/584

88

Barai sau subliniai un text

n XHTML, renunai la utilizarea tag-urilor:

i - 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 HTML-

TIDY.


Figura 3.55



91/584

89Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n

figura 3.56.

Utilizai fontul cu pas fix

Iat cum aplicm n XHTML formatul fizic 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 HTML-

TIDY.


Figura 3.57

Figura 3.56


92/584

90


Rezultatul vizualizrii paginii Web n I