7

CUPRINS

I. HTML..............................................................................17

1. INTRODUCERE.............................................................17

Exemplu...................................................................................................... 17

Ce este HTML? .......................................................................................... 17

Tagurile HTML.......................................................................................... 17

Documentele HTML = Pagini Web............................................................ 17

2. HTML S NCEPEM...................................................18

Ce v trebuie .............................................................................................. 18

Editarea documentelor HTML .................................................................. 18

3. PATRU EXEMPLE SIMPLE ..........................................18

Titluri ......................................................................................................... 18

Paragrafe.................................................................................................... 19

Link-uri ...................................................................................................... 19

Imagini ....................................................................................................... 19

4. ELEMENTE HTML ........................................................20

Elementele HTML...................................................................................... 20

Sintaxa unui element HTML ..................................................................... 20

Elemente HTML imbricate (nested) .......................................................... 20

8

Elemente HTML vide ................................................................................. 21

5. ATRIBUTE HTML......................................................... 21

Atributele HTML ....................................................................................... 21

Exemple de atribute.................................................................................... 22

Lista atributelor HTML............................................................................. 22

6. TITLURI HTML ............................................................. 22

Liniile HTML ............................................................................................. 23

Comentarii HTML ..................................................................................... 23

Cum vedei codul HTML surs al unei pagini web.................................... 24

7. PARAGRAFE ............................................................... 24

8. FORMATAREA TEXTULUI .......................................... 24

Taguri pentru formatarea textului............................................................. 24

Exemple ...................................................................................................... 25

9. STILURI ........................................................................ 29

Taguri i atribute depite.......................................................................... 30

Exemple ...................................................................................................... 30

10. LINKURI ..................................................................... 31

Hiperlinkuri, ancore i linkuri ................................................................... 31

Atributul href ........................................................................................... 32

9

Atributul target ...................................................................................... 32

Atributul name........................................................................................... 32

Exemple ...................................................................................................... 33

11. IMAGINI.......................................................................36

Tagul imagine i atributul src .................................................................. 36

Atributul Alt ............................................................................................. 37

Taguri pentru imagini................................................................................ 37

Exemple ...................................................................................................... 37

12. TABELE ......................................................................41

Atributul border ...................................................................................... 42

Denumirea coloanelor ................................................................................ 42

Celule goale ................................................................................................ 42

Taguri pentru tabele .................................................................................. 43

Exemple ...................................................................................................... 43

13. LISTE...........................................................................57

Liste neordonate......................................................................................... 57

Liste ordonate............................................................................................. 57

Liste de definiii.......................................................................................... 58

Exemple ...................................................................................................... 58

14. FORMULARE..............................................................62

10

Tagul input............................................................................................... 62

Atributul action i butonul submit ......................................................... 63

Taguri pentru formulare ............................................................................ 64

Exemple ...................................................................................................... 64

15. CULORI ...................................................................... 71

Valorile culorilor ........................................................................................ 71

16. ASPECTUL UNEI PAGINI WEB (LAYOUT)............... 76

Layout cu tabele.......................................................................................... 76

Exemplu...................................................................................................... 77

17. CADRE (FRAMES)..................................................... 77

Tagul frameset........................................................................................ 77

Tagul frame............................................................................................... 78

Taguri pentru cadre ................................................................................... 78

Exemple ...................................................................................................... 78

18. FONTURI .................................................................... 82

Atribute pentru font................................................................................. 82

19. DE CE HTML 4.0?...................................................... 84

20. STILURI N HTML 4.0................................................. 84

Exemple ...................................................................................................... 84

11

Taguri pentru stil ....................................................................................... 87

21. ENTITILE DE TIP CARACTER...............................87

Non-breaking Space ................................................................................... 87

Simboluri uzuale ........................................................................................ 87

22. ELEMENTUL HEAD .....................................................88

Informaiile din elementul head................................................................ 88

Taguri permise n elementul head ............................................................ 89

Exemple ...................................................................................................... 89

23. ELEMENTUL META .....................................................90

Cuvinte cheie pentru motoarele de cutare ............................................... 90

Exemple ...................................................................................................... 91

24. URL .............................................................................92

Linkuri HTML........................................................................................... 92

URL - Uniform Resource Locator ............................................................. 93

Scheme URL............................................................................................... 93

25. SCRIPTURI .................................................................94

Inserarea unui script ntr-o pagin HTML ............................................... 94

Cum procedai cu browserele vechi ........................................................... 94

Tagul ................................................................................... 95

12

Taguri pentru scripturi .............................................................................. 95

Exemple ...................................................................................................... 95

26. ATRIBUTE EVENIMENT ............................................ 96

Evenimente pentru ferestre ........................................................................ 96

Evenimente pentru formulare .................................................................... 97

Evenimente pentru tastatur...................................................................... 97

Evenimente pentru mouse .......................................................................... 97

27. CALCULATORUL POATE FI SERVER WEB............ 98

IIS - Internet Information Server............................................................... 98

Cum instalai IIS n Windows Vista........................................................... 98

Cum instalai IIS n Windows XP i Windows 2000 .................................. 98

Testai paginile web.................................................................................... 99

II. XHTML.......................................................................... 99

1. CE ESTE XHTML? ....................................................... 99

2. DE CE XHTML?............................................................ 99

3. DIFERENE NTRE XHTML I HTML ....................... 100

Cele mai importante diferene.................................................................. 100

4. SINTAXA XHTML....................................................... 102

Reguli suplimentare privind sintaxa XHTML......................................... 102

13

Atributul lang......................................................................................... 103

Elemente XHTML obligatorii.................................................................. 103

5. DTD (DOCUMENT TYPE DEFINITIONS) XHTML ......104

Declaraia este obligatorie ................................................ 104

Un exemplu XHTML ............................................................................... 105

Document Type Definitions (DTD) .......................................................... 105

6. MODULARIZAREA XHTML........................................106

Modulele XHTML.................................................................................... 106

III. LISTA TAGURILOR HTML 4.01 / XHTML 1.0 ..........107

Tagul ................................................................................. 110

Declaraia .......................................................................... 110

Tagul ................................................................................................. 112

Tagul .......................................................................................... 114

Tagul .................................................................................. 114

Tagul ................................................................................... 115

Tagul .......................................................................................... 115

Tagurile ........................................ 116

Tagul .......................................................................................... 116

Tagul ........................................................................................... 116

Tagul ........................................................................... 116

14

Tagul .......................................................................................... 117

Tagul ............................................................................................... 117

Tagul ...................................................................................... 118

Tagul .................................................................................... 118

Tagurile ..................................................................................................... 118

Tagul ............................................................................................ 119

Tagul ................................................................................. 120

Tagul ............................................................................................... 121

Tagul ............................................................................................. 121

Tagul ............................................................................................. 122

Tagul ............................................................................................... 122

Tagul ............................................................................................... 123

Tagul ................................................................................. 123

Tagul .......................................................................................... 123

Tagul ........................................................................................ 125

Tagul ................................................................................. 125

Tagul .......................................................................................... 126

Tagurile ............................................................................. 126

Tagul ............................................................................................... 126

Tagul .......................................................................................... 126

15

Tagul ..................................................................................... 127

Tagul ............................................................................................ 127

Tagul ........................................................................................ 128

Tagul ............................................................................................ 129

Tagul ........................................................................................ 130

Tagul ..................................................................................... 130

Tagul ............................................................................................... 130

Tagul .......................................................................................... 131

Tagul ............................................................................................ 132

Tagul .......................................................................................... 132

Tagul ................................................................................. 133

Tagul ................................................................................. 133

Tagul ..................................................................................... 133

Tagul ............................................................................................... 134

Tagul ................................................................................. 134

Tagul ..................................................................................... 135

Tagul ................................................................................................. 135

Tagul ........................................................................................ 136

Tagul ............................................................................................ 136

Tagul ................................................................................................. 136

Tagul ..................................................................................... 137

16

Tagul ...................................................................................... 137

Tagul .......................................................................................... 138

Tagul ........................................................................................ 138

Tagurile i ........................................................................ 139

Tagul ........................................................................................ 139

Tagurile , i ............................................. 140

Tagurile i .......................................................................... 141

Tagul ................................................................................. 142

Tagul ........................................................................................ 143

Tagul ............................................................................................... 143

Tagul ............................................................................................... 144

BIBLIOGRAFIE .............................................................. 145

17

I. HTML

1. Introducere Exemplu Primul meu titlu Primul meu paragraf. Ce este HTML? HTML este un limbaj pentru descrierea paginilor web.

HTML este abrevierea pentru Hyper Text Markup Language HTML nu este un limbaj de programare, este un limbaj de marcare

(markup language) Un limbaj de marcare este un set de taguri de marcare (markup tags) HTML utilizeaz tagurile de marcare pentru a descrie paginile web

Tagurile HTML Tagurile de marcare HTML sunt numite uzual taguri HTML

Tagurile HTML sunt cuvinte cheie scrise ntre paranteze ascuite, de exemplu

n mod normal tagurile HTML sunt pereche ca i Primul tag din pereche este tagul de nceput, al doilea de sfrit

Documentele HTML = Pagini Web

Documentele HTML descriu paginile web Documentele HTML conin taguri HTML i text simplu Documentele HTML sunt numite i pagini web

Scopul unui browser web (ca Internet Explorer sau Firefox) este s citeasc documentele HTML i s le afieze ca pagini web. Browser-ul nu afieaz tagurile HTML, dar le utilizeaz ca s interpreteze coninutul paginii. Exemplu:

18

Primul meu titlu Primul meu paragraf

Explicaii: Textul dintre i descrie pagina web Textul dintre i este coninutul vizibil al paginii Textul dintre i este afiat ca un titlu Textul dintre i este afiat ca un paragraf

2. HTML S ncepem Ce v trebuie Nu v trebuie nimic deosebit ca s nvai HTML.

Nu avei nevoie de un editor HTML Nu avei nevoie de un server web Nu avei nevoie de un site web

Editarea documentelor HTML Putei utiliza utilitarul NotePad pentru a edita documentele HTML. Desigur, programatorii web profesioniti prefer deseori editoare HTML ca FrontPage sau Dreamweaver, n loc s scrie textul simplu. Cnd salvai un fiier HTML, putei folosi extensia .htm sau extensia .html.

3. Patru exemple simple Titluri Titlurile HTML sunt definite cu tagurile pereche ...... . Exemplu: Acesta este titlul 1 Acesta este titlul 2 Acesta este titlul 3 Acesta este titlul 4 Acesta este titlul 5 Acesta este titlul 6

19

Paragrafe Paragrafele HTML sunt definite cu tagul pereche . Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Link-uri Link-urile HTML sunt definite cu tagul pereche . Acesta este un link Obs: Adresa de link este precizat ca atribut. Imagini Imaginile HTML sunt definite cu tagul (nepereche). Obs: Numele i dimensiunile imaginii sunt precizate ca atribute.

20

4. Elemente HTML Documentele HTML sunt definite de elementele HTML. Elementele HTML Un element HTML este tot ce este scris ntre un tag de nceput i un tag de sfrit.:

Tag de nceput Coninutul elementului Tag de sfrit

Acesta este un paragraf

Acesta este un link

Sintaxa unui element HTML

Un element HTML ncepe cu un tag de deschidere/nceput Un element HTML se ncheie cu tag de nchidere/sfrit Coninutul unui element este tot ce este scris ntre cele dou taguri Unele elemente HTML au coninutul vid Elementele vide sunt nchise n tagul de nceput Majoritatea elementelor HTML pot avea atribute

Elemente HTML imbricate (nested) Majoritatea elementelor HTML pot fi imbricate (pot conine alte elemente HTML). Documentele HTML sunt de fapt elemente HTML imbricate. Exemplu de document HTML Acesta este primul meu paragraf Acest exemplu conine 3 elemente HTML: Elementul : Acesta este primul meu paragraf

Elementul definete un paragraf ntr-un document HTML.

21

Elementul are tagul de nceput i tagul de sfrit . Coninutul elementului este: Acesta este primul meu paragraf Elementul : Acesta este primul meu paragraf Elementul definete corpul unui document HTML. Elementul are tagul de nceput i tagul de sfrit . Acest element conine un alt element HTML (un paragraf elementul p) Elementul : Acesta este primul meu paragraf Elementul definete ntregul document HTML. Elementul are tagul de nceput i tagul de sfrit . Elementul conine un alt element HTML (corpul documentului elementul body) Elemente HTML vide Elementele HTML care nu au coninut se numesc elemente vide. Elementele vide pot fi nchise n tagul de nceput. Spre exemplu este un element vid fr tag de sfrit (definete o ntrerupere de linie). n XHTML, XML i viitoarele versiuni de HTML, toate elementele trebuie nchise. Adugarea unui slash n tagul de nceput, ca , este un mod potrivit de nchidere a elementelor vide, acceptat de HTML, XHTML i XML. Obs: HTML nu este case-sesitive, dar v recomandm s scriei cu litere mici pentru compatibilitate cu noile versiuni HTML.

5. Atribute HTML Atributele furnizeaz informaii suplimentare despre elementele HTM. Atributele HTML

Elementele HTML pot avea atribute

22

Atributele furnizeaz informaii suplimentare despre un element Atributele sunt specificate numai n tagul de nceput Atributele vin n perechi nume/valoare ca: name="value"

Exemple de atribute Linkurile HTML sunt definite cu tagul . Adresa de link precizat este un atribut. Exemplu: Acesta este un link Obs. Valorile atributelor trebuie ntotdeauna puse ntre ghilimele n rarele situaii n care valoarea atributului conine ea nsi ghilimele, este necesar s scriei valoarea atributului ntre apostrofuri ca n exemplul urmtor: name='John "ShotGun" Nelson'

Lista atributelor HTML Urmtoarea list prezint atributele standard pentru majoritatea elementelor HTML: Atribut Valoare Descriere class class_rule sau style_rule Clasa elementului id id_name Un id unic pentru element style style_definition O definiie de stil inline title tooltip_text Un text afiat cnd cursorul este

fixat pe element

6. Titluri HTML Titlurile sunt definite cu tagurile ..... . definete cel mai mare titlu. definete cel mai mic titlu. Exemplu: Acesta este un titlu 1 Acesta este un titlu 2

23

Acesta este un titlu 3 Acesta este un titlu 4 Acesta este un titlu 5 Acesta este un titlu 6 Obs: Browserele adaug automat o linie vid nainte i dup un titlu. Titlurile sunt importante Utilizai titlurile HTML numai pentru scrierea titlurilor. Nu le utilizai pentru a face textul BIG sau bold. Motoarele de cutare folosesc titlurile pentru a indexa structura i coninutul paginilor web. Este important s utilizai titlurile pentru a pune n eviden structura documentului HTML. Titlurile h1 ar trebui folosite ca titluri principale, urmate de titlurile h2 amd. Liniile HTML Tagul este utilizat pentru a crea o linie orizontal. Exemplu: Tagul hr defineste o linie orizontala: Acesta este un paragraf Acesta este un paragraf Acesta este un paragraf Comentarii HTML Comentariile pot fi inserate n codul HTML pentru a-l face mai uor de citit i neles. Comentariile sunt ignorate de ctre browsere i nu sunt afiate. Comentariile se scriu astfel:

24

Cum vedei codul HTML surs al unei pagini web Facei clic dreapta pe pagin i selectai "View Source" (IE) sau "View Page Source" (Firefox) sau similar pentru alte browsere. Se va deschide o fereastr cu codul HTML al paginii.

7. Paragrafe Documentele HTML sunt mprite n paragrafe. Paragrafele sunt definite cu tagul . Obs: Browserele adaug automat o linie vid nainte i dup un paragraf. Nu uitai tagul de nchidere. Exemplu: Acesta este primul paragraf. Acesta al doilea paragraf. Acesta este al treilea paragraf. Nu uitati sa inchideti tagurile HTML! Obs: Noile versiuni HTML nu vor permite omiterea tagurilor de ncheiere. Obs. Utilizai tagul dac dorii o linie nou fr s ncepei un nou paragraf. Exemplu: Acesta esteun paragraf cu intrerupere de linie. Obs: Nu conteaz cte linii i cte spaii inserai n documentele HTML. Browserele vor vedea un singur spaiu i o singur linie (dac nu utilizai tagul ).

8. Formatarea textului Taguri pentru formatarea textului Tag Descriere Text ngroat Text mare Text accentuat Text nclinat (italic)

25

Text mic Text ngroat Textul subscript (indice) Text superscript (exponent) Text inserat Text ters Text preformatat Text tip cod de calculator Text de la tastatur Abreviere Acronim Adres Citat lung Citat scurt Citat Definiie

Exemple Exemplul 1 Ilustreaz cum putei formata textul ntr-un document HTML. Acest text este bold Acest text este strog Acest text este big Acest text este emphasiz Acest text este italic Acest text este small Acesta este subscript si superscript

Exemplul 2 Ilustreaz cum putei controla ntreruperile de linie i spaiul cu tagul .

26

Acesta este un text preformatat. Pastreaza spatiile Si intreruperile de linie. Tagul pre poate fi folosit pentru a afisa coduri computer: for i = 1 to 10 print i next i

Exemplul 3 Ilustreaz utilizarea diferitelor taguri pentru coduri computer. Computer code Keyboard input Teletype text Sample text Computer variable Note: Aceste taguri sunt uzual folosite pentru a afisa linii de program.

Exemplul 4 Ilustreaz cum se scrie o adres ntr-un document HTML.

27

Amelia Popescu Aleea Zorilor nr.156 Botosani Romania

28

Exemplul 7 Ilustreaz cum se folosesc citatele lungi i scurte. Un citat lung: Acesta este un citat lung. Acesta este un citat lung. Acesta este un citat lung. Acesta este un citat lung. Acesta este un citat lung Browserul insereaza intreruperi de linie si margini pentru citat. Un citat scurt: Acesta este un citat scurt. Acest text nu se evidentiaza prin nimic special.

Exemplul 8 Ilustreaz cum se marcheaz un text care a fost ters sau inserat ntr-un document. O duzina are douazeci douasprezece elemente

29

Cele mai multe browsere vor afisa textul sters ca taiat si textul inserat ca subliniat.

9. Stiluri Atributul style este nou n HTML i introduce CSS ul n HTML. Exemplu de utilizare a atributului style. Folositi stiluri si culori! Acest text este scris cu Verdana si este rosu Acest text este scris cu Times si este verde Acest text are 30 pixeli inaltime

Scopul atributului style este de a furniza un stil uniform elementelor HTML. Stilurile au fost introduse n HTML 4.0, ca o metod nou i preferat de stilizare a elementelor HTML. n acest fel, stilurile pot fi adugate elementelor HTML fie direct, utiliznd atributul style, fie indirect prin foi separate de stiluri (fiiere CSS). n acest material vom folosi atributul style pentru a introduce stilurile HTML.. Exemple de utilizare a atributului style style="background-color:yellow" style="font-size:10px" style="font-family:Times"

30

style="text-align:center"

Taguri i atribute depite n HTML 4, anumite taguri i atribute sunt definite ca depite. Asta nseamn c ele nu vor mai fi acceptate n urmtoarele versiuni HTML i XHTML. Mesajul este clar: nu mai folosii aceste taguri i atribute. Aceste taguri i atribute nu mai trebuiesc folosite: Taguri Descriere Element centrat i Fonturi HTML

i Text tiat Text subliniat Atribute Descriere align Alinierea textului bgcolor Culoarea fundalului (background) color Culoarea textului n locul lor folosii stiluri.

Exemple Culoare background: Atributul style definete un stil pentru elementul . Acesta este un fundal colorat cu atributul style

Familia de fonturi, culoare i mrime: Atributul style definete un stil pentru elementul . Un titlu

31

Acesta este un paragraf stilizat cu atributul style

Alinierea textului: Atributul style definete un stil pentru elementul . Acesta este titlu 1 Titlul anterior este aliniat la centrul acestei pagini cu atributul style. Titlul anterior este aliniat la centrul acestei pagini cu atributul style. Titlul anterior este aliniat la centrul acestei pagini cu atributul style.

10. Linkuri Un link este adresa unui document sau resurse de pe web. Hiperlinkuri, ancore i linkuri n termeni web, un hiperlink este o referin (o adres) a unei resurse de pe web. Un hiperlink poate referi orice resurs de pe web: o pagin HML, o imagine, un fiier de sunet, un film, etc. O ancor este o destinaia unui hiperlink n interiorul unui document. Elementul este utilizat pentru a defini hiperlegturile i ancorele. Folosim termenul link cnd elementul indic o resurs web i termenul ancor cnd elementul definete o adres din interiorul documentului. Sintaxa unui link HTML este: Textul afisat Tagul de nceput conine atribute despre link. Elementul de coninut definete textul ce va fi afiat.

32

Obs: Elementul coninut nu trebuie s fie neaprat text. Putei folosi o imagine sau orice alt element HTML. Atributul href Definete adresa legturii. Elementul urmtor definete o legtur ctre Gmail: Serviciul e-mail Google! Codul de mai sus va fi afiat de browser astfel: Serviciul e-mail Google! Atributul target Atributul definete unde se va deschide documentul referit de link. Codul urmtor va deschide documentul ntr-o nou fereastr: Ultima Pagina Dac atributul target este "_blank",documentul referit va fi deschis intr-o noua fereastra. Atributul name Cnd este folosit atributul name, elementul definete o ancor n interiorul unui document HTML. Ancorele nu sunt afiate ntr-un mod special, ele sunt invizibile pentru cititor. Sintaxa de definire a unei ancore este: Orice continut Sintaxa legturii ctre o ancor este: Orice coninut

Simbolul # din atributul href definete o legtur ctre o ancor. Exemple: O ancor n interiorul unui document HTML:

33

Sectiunea de Sfaturi Utile O legtur ctre Seciunea de Sfaturi Utile din interiorul aceluiai document: Mergeti la Sectiunea de Sfaturi Utile O legtur ctre Sectiunea de Sfaturi Utile dintr-un alt document HTML: Mergeti la Sectiunea de Sfaturi Utile Ancorele sunt folosite frecvent pentru a crea "table of contents" (cuprins) la nceputul unui document mare. Fiecrui capitol din document i este atribuit o ancor i linkurile ctre aceste ancore sunt amplasate la nceputul documentului. Dac browserul nu gsete o anumit ancor, merge la nceputul documentulu i nu se genereaz nici-o eroare. Exemple Exemplul 1 Ilustreaz cum putem folosi o imagine ca link. Crearea unei imagini drept link: Imaginea nu are bordura, dar este un link:

34

Exemplul 2 Ilustreaz cum se folosesc linkurile i ancorele pentru a sri n alt parte a documentului. Vezi Capitolul 4. Vezi Capitolul 10. Capitolul 1 Acest capitol explica ............ Capitolul 2 Acest capitol explica ............ Capitolul 3 Acest capitol explica ............ Capitolul 4 Acest capitol explica ............ Capitolul 5 Acest capitol explica ............ Capitolul 6 Acest capitol explica ............ Capitolul 7 Acest capitol explica ............ Capitolul 8 Acest capitol explica ............ Capitolul 9 Acest capitol explica ............ Capitolul 10 Acest capitol explica ............ Capitolul 11 Acest capitol explica ............ Capitolul 12 Acest capitol explica ............

35

Capitolul 13 Acest capitol explica ............ Capitolul 14 Acest capitol explica ............ Capitolul 15 Acest capitol explica ............

Exemplul 3 Ilustreaz cum putei iei dac pagina se blocheaz ntr-un cadru. Cadrul este blocat? Apasati aici!

Exemplul 4 Ilustreaz cum s facei link ctre utilitarul de e-mail (va funciona numai dac serviciul e-mail este instalat). Acesta este un link ctre e-mail: Send Mail Nota: Spatiile dintre cuvinte ar trebui nlocuite cu %20

36

pentru a fi siguri ca browserul va afisa textul corect.

Exemplul 5 Ilustreaz crearea un link de e-mail mai complicat. Acesta este un link ctre e-mail: Send mail! Nota: Spatiile dintre cuvinte ar trebui nlocuite cu %20 pentru a fi siguri ca browserul va afisa textul corect.

11. Imagini Tagul imagine i atributul src n HTML imaginile sunt definite cu tagul . Tagul este vid, aceasta nseamn c el conine numai atribute i nu are tag de nchidere.

37

Pentru a afia o imagine pe o pagin trebuie s folosii atributul src care reprezint sursa imaginii. Valoarea atributului src este URL-ul imaginii pe care dorii s o afiai n pagin. Sintaxa de definire a unei imagini este: URL indic locul n care este stocat imaginea. O imagine cu numele "boat.gif" localizat n directorul "images" pe situl "www.msn.com" are URL-ul: http://www.msn.com/images/boat.gif. Browserul afieaz imaginea n locul n care tagul de imagine apare n document. Dac punei tagul imagine ntre dou paragrafe, browserul afieaz primul paragraf, apoi imaginea, apoi al doilea paragraf. Atributul Alt Atributul alt este folosit pentru a defini un text alternativ pentru imagine. Valoarea atributului alt este un text definit de autor:

Atributul alt informeaz cititorul ce lipsete din pagin dac browserul nu poate ncarca imaginea. Browserul va afia n loc de imagine textul alternativ. Este indicat s introducei atributul alt pentru orice imagine de pe pagin pentru a mbunti afiarea paginii pentru cei care au browsere text-only. Dac pagina conine multe imagini, dureaz mult pentru a fi ncrcat aa c folosii cu atenie imaginile. Taguri pentru imagini Tag Descriere Definete o imagine Definete o imagine mapat Definete o zon de hiperlink n interiorul unei imagini mapate

Exemple Exemplul 1 Ilustreaz cum se insereaz ntr-o pagin web imagini situate n acelai director. O imagine statica:

38

O imagine animata: Observati ca sintaxa de inserare a unei imagini animate nu este diferita de cea pentru o imagine statica.

Exemplul 2 Ilustreaz cum se insereaz imagini din alt director sau alt server. O imagine din alt director: O imagine de pe alt server:

Exemplul 3 Ilustreaz cum se adug o imagine de fundal (background) unei pagini HTML. Uite: O imagine de fundal! Pentru fundal puteti folosi fisiere gif si jpg. Daca imaginea este mai mica decat pagina, se va repeta.

39

Exemplul 4 Ilustreaz cum se aliniaz imaginile cu textul . O imagine in text. O imagine in text. O imagine in text. Nota: Alinierea bottom (la baza) este implicita! O imagine in text. O imagine inaintea textului. O imagine dupa text.

Exemplul 5 Ilustreaz cum se aliniaz o imagine la stnga sau la dreapta unui paragraf.

40

Un paragraf cu o imagine. Atributul align este "left". Imaginea se va afisa la stanga acestui text. Un paragraf cu o imagine. Atributul align este "right". Imaginea se va afisa la dreapta acestui text

Exemplul 6 Ilustreaz cum se stabilesc dimensiunile unei imagini. Puteti mari sau micsora o imagine modificand atributele "height" si "width".

Exemplul 7 Ilustreaz cum se folosete o imagine drept link.

41

Crearea unui link pentru o imagine:

Exemplul 8 Ilustreaz cum se creeaz o imagine mapat n care fiecare zon este un hiperlink. Pentru a mari imaginea, faceti clic pe soare sau una dintre planete:

12. Tabele Tabelele se definesc cu tagul . Un tabel este mprit n linii (cu tagul ), i fiecare linie este mprit n celule de date (cu tagul ). Notaia td nseamn "table data", coninutul unei celule din tabel. O celul poate conine text, imagini, liste, paragrafe, formulare, linii orizontale, alt tabel , etc.

42

Exemplu: linia 1, celula 1 linia 1, celula 2 linia 2, celula 1 linia 2, celula 2 Atributul border Dac atributul border nu este specificat, tabelul va fi afiat fr chenare (borduri). Pentru a afia un tabel cu chenare trebuie utilizat atributul border. Denumirea coloanelor Crearea unei celule de titlu se face cu tagul . Textul dintr-o celul de titlu este ngroat i centrat. Exemplu: Un titlu Alt titlu linia 1, celula 1 linia 1, celula 2 linia 2, celula 1 linia 2, celula 2

Celule goale Cele mai multe browsere nu afieaz prea bine celulele din tabel care nu au coninut. Pentru a corecta acest lucru, adugai un non-breaking space () n celula vid i chenarul se va afia corect. Exemplu:

43

linia 1, celula 1 linia 1, celula 2 linia 2, celula 1 Taguri pentru tabele Tag Descriere Definete un tabel Definete o celul de titlu Definete o linie din tabel Definete o celul de date Definete titlul unui tabel (table caption) Definete un grup de coloane din tabel

Definete valorile atributelor pentru una sau mai multe coloane din tabel.

Definete capul tabelului Definete corpul tabelului Definete subsolul tabelului

Exemple Exemplul 1 Ilustreaz cum se definete un tabel ntr-un document HTML. Fiecare tabel incepe cu tagul table. Fiecare linie incepe cu tagul tr. Fiecare celula de date incepe cu tagul td. Tabel cu o coloana: 100

44

Tabel cu o linie si trei coloane: 100 200 300 Tabel cu doua linii si trei coloane: 100 200 300 400 500 600

Exemplul 2 Ilustreaz utilizarea diferitelor tipuri de borduri. Cu un chenar normal: Prima Linie A doua Linie

45

Cu un chenar gros: Prima Linie A doua Linie Cu un chenar foarte gros: Prima Linie A doua Linie

Exemplul 3 Ilustreaz cum se creeaz un tabel fr borduri. Acest tabel nu are chenar pentru ca lipseste atributul border 100 200 300 400 500

46

600 Acest tabel nu are chenar pentru ca atributul border are valoarea 0: 100 200 300 400 500 600

Exemplul 4 Ilustreaz cum se afieaz titlurile coloanelor i ale liniilor. Titlurile coloanelor (table headers): Nume Telefon Telefon Bill Gates 555 77 854 555 77 855 Titlurile liniilor (vertical headers):

47

Nume: Bill Gates Telefon: 555 77 854 Telefon: 555 77 855

Exemplul 5 Ilustreaz folosirea caracterului "" pentru celulele care nu au coninut. Un text Alt text Alt text O celula vida din tabel nu are bordura chiar daca inserati in celula un spatiu. Solutia este sa inserati in celula un caracter non-breaking space.

48

Caracterul non-breaking space incepe cu un ampersand ("&"), Apoi literele "nbsp", si se termina cu pnct si virgula (";")

Exemplul 6 Ilustreaz utilizarea unui tabel care are titlu (caption). Acest tabel are titlu si o bordura groasa Titlul meu 100 200 300 400 500 600

Exemplul 7 Ilustreaz cum se definesc celulele care se ntind (span) pe mai multe linii sau mai multe coloane.

49

O celula care se intinde pe doua coloane: Nume Telefon Bill Gates 555 77 854 555 77 855 O celula care se intinde pe doua linii: Nume: Bill Gates Telefon: 555 77 854 555 77 855

Exemplul 8 Ilustreaz cum se pot defini alte elemente n interiorul unor tabele. Un paragraf Alt paragraf Aceasta celula contine un tabel:

50

A B C D Aceasta celula contine o lista mere banane ananas Buna Ziua

Exemplul 9 Ilustreaz folosirea atributului cellpadding pentru a crea mai mult spaiu ntre coninutul celulei i chenarul ei. Fara cellpadding: Prima Linie A doua Linie

51

Cu cellpadding: Prima Linie A doua Linie

Exemplul 10 Ilustreaz utilizarea atributului cellspacing pentru a crete spaiul dintre celulele tabelului. Tabel fara atributul cellspacing: Prima Linie A doua Linie Tabel cu atributul cellspacing: Prima Linie

52

A doua Linie

Exemplul 11 Ilustreaz cum se adaug un fundal (background) unui tabel. Un fundal colorat: Prima Linie A doua Linie O imagine de fundal: Prima Linie A doua Linie

53

Exemplul 12 Ilustreaz cum se adaug un fundal uneia sau mai multor celule din tabel. Fundaluri pentru o celula: Prima Linie A doua Linie

Exemplul 13 Ilustreaz utilizarea atributului "align" pentru a alinia coninutul celulelor tabelului. Bani cheltuiti in.... Ianuarie Februarie Haine 241.10 RON 50.20 RON Cosmetice 30.00 RON 44.45 RON

54

Mancare 730.40 RON 650.00 RON Total 1001.50 RON 744.65 RON

Exemplul 14 Ilustreaz utilizarea atributului "frame" pentru a controla chenarul exterior al tabelului. Tabel cu atributul frame="border": Prima Linie A doua Linie Tabel cu atributul frame="box": Prima Linie A doua Linie

55

Tabel cu atributul frame="void": Prima Linie A doua Linie Tabel cu atributul ="above": Prima Linie A doua Linie Tabel cu atributul frame="below": Prima Linie A doua Linie Tabel cu atributul frame="hsides": Prima Linie

56

A doua Linie Tabel cu atributul frame="vsides": Prima Linie A doua Linie Tabel cu atributul frame="lhs": Prima Linie A doua Linie Tabel cu atributul frame="rhs": Prima Linie A doua Linie

57

Exemplul 15 Ilustreaz cum se folosesc atributele "frame" i "border" pentru a controla chenarul exterior al tabelului. Prima linie Prima linie

13. Liste HTML accept liste neordonate, liste ordonate i liste de definiii.. Liste neordonate O list neordonat este o list de itemi marcai cu simboluri (cercuri, ptrate, puncte). O list neordonat ncepe cu tagul . Fiecare item din list ncepe cu tagul . Exemplu: Cafea Lapte Browserul afieaz lista de mai sus astfel:

Cafea Lapte

Liste ordonate O list ordonat este o list de itemi marcai cu numere sau litere.

58

O list ordonat ncepe cu tagul . Fiecare item din list ncepe cu tagul . Exemplu: Cafea Lapte Browserul afieaz lista de mai sus astfel:

1. Cafea 2. Lapte

ntr-o list ordonat sau neordonat pot s apar paragrafe, ntreruperi de linie (line break), imagini, linkuri, alte liste, etc. Liste de definiii O list de definiii este o list de termeni mpreun cu descrierea lor. O list de definiii ncepe cu tagul (definition list). Fiecare termen din list ncepe cu tagul (definition term). Fiecare descriere ncepe cu tagul (definition description). Exemplu: Cafea Bautura neagra fierbinte Lapte Bautura alba rece Browserul afieaz lista de mai sus astfel: Cafea

Bautura neagra fierbinte Lapte

Bautura alba rece n tagul pot apare paragrafe, ntreruperi de linie (line break), imagini, linkuri, alte liste, etc. Exemple Exemplul 1 Ilustreaz utilizarea diferitelor tipuri de liste ordonate. Lista numerotat cu cifre (implicit):

59

Mere Banane Lamai Portocale Lista numerotata cu litere mari: Apa Ceai Cafea Suc Lista numerotata cu litere mici: Blues Rock-and-roll Rap Jazz Lista numerotata cu cifre romane mari: Caiete Carti Creioane Stilouri Lista numerotata cu cifre romane mici: Copii Adolescenti Adulti Batrani

Exemplul 2 Ilustreaz utilizarea diferitelor tipuri de liste neordonate.

60

Itemi marcati cu cercuri pline (implicit): Mere Banane Lamai Portocale Itemi marcai cu cercuri goale: Apa Lapte Ceai Cafea Itemi marcati cu patrate: Carti Caiete Creioane Pixuri

Exemplul 3 Ilustreaz cum pot fi create liste imbricate (nested lists). O lista imbricata: Cafea Ceai Ceai negru Ceai verde Lapte

61

Exemplul 4 Un alt exemplu de list imbricat. O list imbricata: Cafea Ceai Ceai negru Ceai verde China Africa Lapte

Exemplul 5 Ilustreaz utilizarea unei liste de definiii. O lista de definitii: Cafea Bautura fierbinte de culoare neagra Lapte Bautura rece de culoare alba

62

14. Formulare Formularele HTML sunt utilizate pentru a selecta diferitele tipuri de informaii introduse de utilizator. Un formular este o zon care conine elemente de formular. Elementele unui formular (cmpuri de text, meniuri drop-down, butoane radio, csue de validare, etc.) permit utilizatorului s introduc informaii n formular. Un formular este definit cu tagul conform sintaxei: . elemente de intrare .

Tagul input Cel mai utilizat tag de formulare este tagul . Tipul intrrii este specificat prin atributul type. Cele mai folosite tipuri de input sunt prezentate n continuare. Cmpuri de text (text fields) Cmpurile de text sunt folosite atunci cnd vrem ca utilizatorul s introduc n formular litere, numere, etc. Exemplu: Nume: Prenume: n browser formularul arat astfel:

Nume:

Prenume: Observai c formularul propriu-zis nu este vizibil. n majoritatea browserelor, lungimea unui cmp de text este implicit setat la 20 de caractere.

63

Butoane radio Butoanele radio se folosesc cnd dorim ca utilizatorul s selecteze o singur opiune dintr-o list posibil. Exemplu: Masculin Feminin n browser formularul arat astfel:

Masculin

Feminin Observai c numai o opiune poate fi selectat la un moment dat. Csue de validare Csuele de validare se folosesc atunci cnd utilizatorul poate s selecteze una sau mai multe opiuni dintr-o list posibil. Exemplu: Am pisica: Am caine: Am papagal: n browser formularul arat astfel:

Am pisica:

Am caine:

Am papagal: Atributul action i butonul submit

64

Cnd utilizatorul apas butonul "Submit", coninutul formularului este trimis ctre server. Atributul action al tagului form definete numele fiierului n care se trimite coninutul formularului. Informaiile din acest fiier sunt uzual prelucrate cu scripturi. Exemplu: Username: n browser formularul arat astfel:

Username: Submit

Dac tastai nite caractere n cmpul de text de mai sus i apsai butonul "Submit", browserul va trimite informaia tastat unei pagini numite "html_form_submit.asp". Pagina v va arta informaia primit.

Taguri pentru formulare Tag Descriere Definete un formular pentru informaiile introduse de utilizator Definete un cmp de intrare Definete o zon de text multi-linie Definete eticheta unui control Definete un set de cmpuri Definete denumirea unui set de cmpuri (fieldset) Definete o list selectabil (o list drop-down ) Definete un grup de opiuni Definete o opiune dintr-o list drop-down Definete un buton ce poate fi apsat

Exemple Exemplul 1 Ilustreaz cum pot fi create cmpuri de text ntr-o pagin HTM.

65

Prenumele: Numele:

Exemplul 2 Ilustreaz cum pot fi create cmpuri pentru parole. Username: Password: Cand tastati caractere intr-un camp de parola, browserul afiseaza astericsuri in locul caracterelor.

Exemplul 3 Ilustreaz cum pot fi create csue de validare pe care utilizatorul le poate selecta sau deselecta. Am pisica: Am caine:

66

Am papagal:

Exemplul 4 Ilustreaz cum se creeaz butoane radio ntr-o pagin HTML. Masculin: Feminin: Butonul Masculin este preselectat. Un singur buton radio din lista poate fi selectat la un moment dat.

Exemplul 5 Ilustreaz cum se poate crea o list drop-down simpl (o list selectabil). Volvo Saab Fiat Audi

67

Exemplul 6 Ilustreaz cum se poate crea o list drop-down simpl (o list selectabil) cu o opiune preselectat. Volvo Saab Fiat Audi

Exemplul 7 Ilustreaz cum se poate crea o zon de text multi-linie (text area) n care user-ul poate scrie un numr nelimitat de caractere. Pisica se joaca in gradina.

Exemplul 8 Ilustreaz cum se creeaz un buton ntr-o pagin HTML.

68

Exemplul 9 Ilustreaz cum se poate desena o bordur cu un titlul n jurul unui grup de elemente folosind tagul fieldset. Informatii despre sanatate: Inaltime Greutate

Exemplul 10 Ilustreaz cum se adaug dou cmpuri de text i un buton de submit pe o pagin HTML. Introduceti prenumele: Introduceti numele:

69

Daca apasati butonul Trimite", veti trimite informaia catre o pagina numita html_form_action.asp.

Exemplul 11 Acest formular conine trei csue de validare i un buton de trimitere (submit). Am pisica: Am caine: Am papagal: Daca apasati butonul"Trimite", informaia va fi trimisa catre pagina html_form_action.asp.

Exemplul 12 Acest formular conine dou butoane radio i un buton de trimitere (submit). Masculin:

70

Feminin: Daca apasati butonul "Trimite", Informatia va fi trimisa catre pagina html_form_action.asp.

Exemplul 13 Ilustreaz cum se trimite un e-mail dintr-un formular. Acest formular trimite un e-mail catre GMAIL. Nume: E-mail: Comentariu:

71

15. Culori Valorile culorilor Culorile HTML sunt definite utiliznd notaia hexazecimal (hex) pentru combinarea valorilor culorilor de baz Red, Green, i Blue (RGB rou, verde, albastru). Fiecare culoare de baz este reprezentat prin dou cifre hexazecimale avnd valori cuprinse ntre 00 i FF, adic ntre 0 i 255 n baza zece. Cele ase cifre hexazecimale care reprezint culoarea sunt precedate de caracterul #.

Valoare hexazecimala

Valoare RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Exemplu: Culoare setata folosind valoarea hexazecimala Culoare setata utilizand valoarea rgb

72

Culoare setata folosind numele culorii Combinarea valorilor rgb de la 0 la 255 ofer mai mult de 16 milioane de culori diferite (256 x 256 x 256). Majoritatea monitoarelor moderne sunt capabile s afieze cel puin 6384 de culori diferite. Aproape 150 de nume de culori sunt recunoscute de majoritatea browserelor. Consoriul World Wide Web Consortium (W3C) a stabilit 16 nume de culori valide pentru HTML i CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Dac dorii s folosii alte culori, va trebui s specificai valoarea lor hexazecimal. Acum civa ani, cnd calculatoarele recunoteau maxim 255 de culori diferite, a fost stabilit o list de 216 culori sigure pentru web care sunt afiate corect de toate calculatoarele care utilizeaz o palet de 255 de culori. Lista de mai jos prezint lista complet a culorilor recunoscute de majoritatea browserelor, n ordine alfabetic. Numele culorii HEX AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC

73

Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DodgerBlue #1E90FF FireBrick #B22222 FloralWhite #FFFAF0 ForestGreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC GhostWhite #F8F8FF Gold #FFD700 GoldenRod #DAA520 Gray #808080 Green #008000 GreenYellow #ADFF2F HoneyDew #F0FFF0

74

HotPink #FF69B4 IndianRed #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA LavenderBlush #FFF0F5 LawnGreen #7CFC00 LemonChiffon #FFFACD LightBlue #ADD8E6 LightCoral #F08080 LightCyan #E0FFFF LightGoldenRodYellow #FAFAD2 LightGrey #D3D3D3 LightGreen #90EE90 LightPink #FFB6C1 LightSalmon #FFA07A LightSeaGreen #20B2AA LightSkyBlue #87CEFA LightSlateGray #778899 LightSteelBlue #B0C4DE LightYellow #FFFFE0 Lime #00FF00 LimeGreen #32CD32 Linen #FAF0E6 Magenta #FF00FF Maroon #800000 MediumAquaMarine #66CDAA MediumBlue #0000CD MediumOrchid #BA55D3 MediumPurple #9370D8 MediumSeaGreen #3CB371 MediumSlateBlue #7B68EE MediumSpringGreen #00FA9A MediumTurquoise #48D1CC

75

MediumVioletRed #C71585 MidnightBlue #191970 MintCream #F5FFFA MistyRose #FFE4E1 Moccasin #FFE4B5 NavajoWhite #FFDEAD Navy #000080 OldLace #FDF5E6 Olive #808000 OliveDrab #6B8E23 Orange #FFA500 OrangeRed #FF4500 Orchid #DA70D6 PaleGoldenRod #EEE8AA PaleGreen #98FB98 PaleTurquoise #AFEEEE PaleVioletRed #D87093 PapayaWhip #FFEFD5 PeachPuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD PowderBlue #B0E0E6 Purple #800080 Red #FF0000 RosyBrown #BC8F8F RoyalBlue #4169E1 SaddleBrown #8B4513 Salmon #FA8072 SandyBrown #F4A460 SeaGreen #2E8B57 SeaShell #FFF5EE Sienna #A0522D Silver #C0C0C0 SkyBlue #87CEEB

76

SlateBlue #6A5ACD SlateGray #708090 Snow #FFFAFA SpringGreen #00FF7F SteelBlue #4682B4 Tan #D2B48C Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE Wheat #F5DEB3 White #FFFFFF WhiteSmoke #F5F5F5 Yellow #FFFF00 YellowGreen #9ACD32 Deoarece aceast list nu este recunoscut de W3C, dac dorii documente HTML sau CSS valide, folosii n loc de numele culorii valoarea ei hexazecimal.

16. Aspectul unei pagini web (layout) Pretutindeni pe web vei gsi pagini formatate ca paginile de ziar utiliznd coloanele HTML. Layout cu tabele

O practic uzual este folosirea tabelelor (table) pentru a stabili aspectul unei pagini HTML.

Aceast poriune de pagin este organizat n dou coloane, ca o pagin de ziar.

Aa cum putei observa, exist coloana stng i coloana dreapt.

Un tabel HTML () este utilizat pentru a mpri aceast poriune de pagin n dou coloane.

Secretul este s folosii tabele fr chenar (border) i poate ceva mai mult spaiere (cell-padding).

Orict de mult text ai aduga n aceast poriune de pagin, el va rmne n interiorul celor dou

77

Acest text este afiat n coloana din stnga.

coloane.

Exemplu Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text.

17. Cadre (frames) Cu ajutorul cadrelor putei afia mai multe documente HTML n aceeai fereastr de browser. Fiecare document HTML este numit cadru (frame) i este independent de celelalte documente deschise n fereastr. Dezavantajele utilizrii cadrelor:

Programatorul paginii trebuie s in evidena mai multor documente HTML

Este dificil de listat ntreaga pagin Tagul frameset

Tagul definete cum este mprit fereastra n cadre Fiecare frameset definete un set de linii sau un set de coloane Valoarea liniilor/coloanelor reprezint poriunea de ecran pe care o va

ocupa fiecare linie/coloan.

78

Tagul frame

Tagul definete ce document HTML va fi afiat n fiecare cadru

n exemplul urmtor este definit un frameset cu dou coloane. Prima coloan este setat la 25% din limea ferestrei, iar a doua coloan la 75% din limea ferestre. Documentul "frame_a.htm" va fi deschis n prima coloan, iar "frame_b.htm" n a doua coloan:

Obs: Dimensiunea unei coloane din frameset poate fi dat n pixeli (cols="200,500"), i una dintre coloane poate fi setat la spaiul rmas (cols="25%,*"). Dac un cadru are borduri vizibile, utilizatorul poate redimensiona cadrul trgnd cu mouse-ul de acestea. Pentru a mpiedica acest lucru, putei aduga atributul noresize="noresize" n tagul . Pentru browserele care nu recunosc cadrele, adugai tagul . Taguri pentru cadre Tag Descriere Definete un set de cadre Definete un cadru

Definete o seciune fr cadre pentru browserele care nu recunosc cadrele

Definete un cadru inline

Exemple Exemplul 1 Ilustreaz proiectarea unui frameset vertical cu trei documente diferite.

79

Exemplul 2 Ilustreaz proiectarea unui frameset orizontal cu trei documente.

Exemplul 3 Ilustreaz utilizarea tagului pentru browserele care nu recunosc cadrele. Browserul dvs. nu recunoaste cadrele!

Exemplul 4 Ilustreaz proiectarea unui frameset cu trei documente i cum se combin liniile i coloanele.

80

Exemplul 5 Ilustreaz utilizarea atributului noresize astfel nct utilizatorul s nu poat redimensiona cadrele.

Exemplul 6 Ilustreaz cum se proiecteaz un cadru de navigare. Cadrul de navigare conine o list de linkuri care au al doilea cadru drept target. Fiierul numit "nav_frame.htm" conine trei link-uri care au urmtorul cod surs: Cadrul a Cadrul b Cadrul

81

c Al doilea cadru va afia documentul corespunztor link-ului activ.

Exemplul 7 Ilustreaz cum se creeaz un cadru inline (un cadru n interiorul unei pagini HTML). Unele browsere nu recunosc cadrele inline. In acest caz, iframe-ul nu este vizibil.

Exemplul 8 Acest exemplu conine dou cadre. Unul din cadre se deschide la o anumit seciune dintr-un fiier specificat prin n pagina "link.htm".

82

Exemplul 9 Acest exemplu conine dou cadre. Cadrul de navigare (content.htm) din stnga ferestrei conine o list de linkuri care au drept target al doilea cadru (link.htm). Al doilea cadru afieaz documentul selectat. Unul din linkurile din cadrul de navigare este ctre o anumit seciune din fiierul destinaie. Codul din fiierul "content.htm" arat astfel: Link fara ancora Link cu ancora. Codul HTML al paginii care conine cele dou cadre este:

18. Fonturi Tagul din HTML este depit i va fi nlturat n viitoarele versiuni. Dei este nc folosit frecvent, ar trebui s-l evitai i s folosii n locul lui stiluri. Codul HTML urmtor precizeaz dimensiune i tipul fontului pentru textul afiat de browser : Acesta este un paragraf. Acesta este un alt paragraf.

Atribute pentru font

83

Atribut Exemplu Descriere

size="number" size="2" Definete dimensiunea fontului

size="+number" size="+1" Mrete cu 1 dimensiunea fontului

size="-number" size="-1" Micoreaz cu 1 dimensiunea fontului

face="face-name" face="Times" Definete numele fontului color="color-value"

color="#eeff00" Definete culoarea fontului

color="color-name"

color="red" Definete culoarea fontului

Tagul nu ar trebui folosit Tagul este depit n ultimele versiuni HTML (HTML 4 i XHTML). Consoriul World Wide Web (W3C) a nlturat tagul din recomandri. n viitoarele versiuni HTML, vor fi folosite foile de stiluri (CSS) pentru a defini aspectul i a afia proprietile unui element HTML. Modul corect este s utilizai stilurile. Exemplul 1 Ilustreaz cum se stabilete fontul unui text. Un titlu Un paragraf

Exemplul 2 Ilustreaz cum se stabilete dimensiunea fontului unui text. Un titlu Un paragraf

Exemplul 3 Ilustreaz cum se stabilete culoarea unui text.

84

Un titlu Un paragraf

Exemplul 4 Ilustreaz cum se stabilete fontul, dimensiunea i culoarea unui text. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf.

19. De ce HTML 4.0? Limbajul HTML original nu a fost conceput s conin taguri pentru formatarea documentului. Tagurile au fost concepute s defineasc coninutul unui document, ca n exemplul urmtor: Acesta este un paragraf Acesta este un titlu Cnd taguri ca i atributele de culoare au fost adugate n versiunea HTML 3.2, a nceput comarul pentru proiectanii web. Proiectarea unor site-uri web mari n care informaiile despre font i culoare trebuiau adugate pe fiecare pagin web, a devenit o activitate costisitoare i plictisitoare. n HTML 4.0 toate formatrile sunt nlturate din document i memorate ntr-o foaie separat de stiluri. Deoarece HTML 4.0 separ prezentarea de structura documentului, obinem controlul complet al aspectului documentului fr a interfera n mod nefericit cu coninutul acestuia.

20. Stiluri n HTML 4.0 Exemple Exemplul 1

85

Ilustreaz cum se formateaz un document HTML cu ajutorul informaiilor de stil adugate n seciunea . h1 {color: red} h3 {color: blue} Acesta este un titlu 1 Acesta este un titlu 3

Exemplul 2 Ilustreaz crearea unui link nesubliniat folosind atributul style. Este un LINK!

Exemplul 3 Ilustreaz cum se folosete tagul pentru a accesa o foaie extern de stiluri. Text formatat cu o foaie externa de stiluri

86

La fel!

Cum folosim stilurile Cnd browserul citete o foaie de stiluri, va formata documentul conform precizrilor din foaie. Sunt trei modaliti de a insera o foaie de stiluri ntr-un document HTML: Foaie de stiluri extern Este ideal cnd stilul respectiv trebuie aplicat mai multor pagini. Cu o foaie de stil extern, putei modifica coninutul ntregului site web modificnd un singur fiier. Fiecare pagin din site trebuie s se lege la foaia de stiluri cu tagul plasat n seciunea head ca n exemplul urmtor:

Foaie de stiluri intern Se folosete cnd un singur document are un anumit stil. Stilul intern respectiv se definete n seciunea head cu ajutorul tagului ca n exemplul urmtor: body {background-color: red} p {margin-left: 20px}

Stiluri inline Stilul inline se folosete cnd un anumit stil se aplic unui element care apare o singur dat n document. n acest caz, atributul style se aplic n tagul elementului respectiv i poate conine orice proprieti CSS. Exemplul urmtor ilustreaz cum se schimb culoarea i marginea stng pentru un paragraf: Acesta este un paragraf.

87

Taguri pentru stil Tag Descriere Definete un stil Definete referina la o resurs Definete o seciune din document Definete o seciune din document

21. Entitile de tip caracter Unele caractere sunt rezervate n HTML. Spre exemplu, nu putei folosi simbolurile mai mic i mai mare deoarece fac parte din sintaxa unui tag i browserul le poate interpreta eronat. Dac dorii ca browserul s afieze corect aceste caractere trebuie s inserai simbolurile corespunztoare n codul HTML. O entitate de tip caracter (simbol) are urmtoarea sintax: &entity_name; sau entity_code; Pentru a afia semnul mai mic trebuie s scriei: < sau < Dei denumirile simbolurilor sunt mai uor de reinut, nu toate browserele recunosc denumirile entitilor ci codul asociat entitii.. Non-breaking Space Cel mai utilizat simbol din HTML este non-breaking space (spaiu nentrerupt). n mod normal HTML va trunchia spaiile din textul paginii, reducnd spaiile succesive la unul singur. Pentru a aduga mai multe spaii n pagin, folosii simbolul . Exemplu Entitati de tip caracter &

Simboluri uzuale Obs. Denumirile simbolurilor sunt case-sensitive!

88

Caracter Descriere Nume Cod non-breaking space

< mai mic dect < <

> mai mare dect > >

& ampersand & &

cent

pound

yen

euro

section

copyright

marc nregistrat Codurile pentru diacriticele din limba romn sunt:

valoare cod

22. Elementul head Elementul head conine informaii generale despre document, numite i meta-informaii. Meta nseamn informaii despre. Informaiile din elementul head Informaiile din interiorul elementului head nu ar trebui afiate de ctre browser.

89

Conform standardului HTML, numai cteva taguri sunt permise n elementul head i anume:, , , , i . Evitai s inserai n elementul head alte taguri n afara celor de mai sus. Taguri permise n elementul head Tag Descriere Definete informaii despre document Definete titlul documentului Definete un URL de baz pentru toate linkurile din pagin Definete referina unei resurse Definete meta informaii

Exemple Exemplul 1 Informaia title din elementul head nu este afiat n fereastra browserului. Acest titlu nu este afisat Acest text este afisat.

Exemplul 2 Ilustreaz cu se folosete tagul base astfel nct toate linkurile din pagin s se deschid ntr-o fereastr nou. Acest link

90

se va deschide intr-o fereastra noua pentru ca atributul target este "_blank". Acest link se va deschide tot intr-o fereastra noua desi nu are atributul target.

23. Elementul meta Aa cum am vzut n capitolul anterior, elementul head conine informaii generale (meta informaii) despre document. Cel mai adesea, elementul meta furnizeaz informaii relevante pentru browsere sau motoarele de cutare, cum ar fi descrierea coninutului documentului. Cuvinte cheie pentru motoarele de cutare Unele motoare de cutare folosesc numele i atributele de coninut din tagul meta pentru a indexa paginile dumneavoastr. Spre exemplu, elementul meta urmtor poate oferi o descriere a paginii:

Acest element meta definete cuvintele cheie pentru pagin:

Scopul atributelor name i content este s descrie coninutul paginii. Totui, pentru c unii webmasteri utilizeaz tagurile meta pentru spam, spre exemplu repetarea cuvintelor cheie pentru a obine o poziie mai bun la indexare, unele motoare de cutare nu mai folosesc n ntregime cuvintele cheie din meta.

91

Exemple Exemplul 1 Informaiile din elementul meta descriu documentul. Atributele meta din acest document identifica autorul si editorul utilizat pentru crearea paginii.

Exemplul 2 Informaiile din elementul meta descriu cuvintele cheie.

92

Atributele meta din acest document descriu documentul si cuvintele cheie.

Exemplul 3 Ilustreaz cum se redirecteaz un user dac adresa site-ului s-a schimbat. Scuze! Ne-am mutat! Noul URL este: http://www.mysite.com Vei fi redirectat catre noua adresa in cinci secunde. Daca vedeti acest mesaj pentru mai mult de 5 secunde, va rog apasati linkul de mai sus!

24. URL Linkuri HTML

93

Cnd apsai un link dintr-un document HTML, tagul indic ctre o adres web cu o valoare a atributului href ca aceasta: O pagina. Plecnd de la acest tag, browserul va construi o adresa web completa ca aceasta: http://www.mysite.com/html/mypage.htm pentru a accesa pagina. URL - Uniform Resource Locator Uniform Resource Locator (URL) este utilizat pentru a adresa orice resurs de pe web. O adres web complet ca aceasta : http://www.mysite.com/html/mypage.htm respect urmtoarele reguli de sintax: schema://host.domain:port/path/filename schema definete tipul de serviciu de Internet. Tipul cel mai comun este http. domain definete numele domeniului Internet yahoo.com. Construcia host definete domeniul gazd. Dac este omis, gazda implicit pentru http este www. Construcia :port definete numrul de port pentru gazd i este n mod normal omis. Portul implicit pentru http este 80. Construcia path definete o cale (un subdirector) de pe server. Dac calea este omis, resursa (documentul) trebuie s se gseasc n directorul rdcin al site-ului web. Construcia filename definete numele documentului. Numele implicit poate fi default.asp, sau index.html sau altceva, n funcie de setrile serverului web. Scheme URL n tabelul urmtor putei gsi cele mai folosite scheme URL: Schema Ce acceseaz file un fiier de pe calculatorul local ftp un fiier de pe un server FTP http un fiier de pe un server World Wide Web gopher un fiier de pe un server Gopher news un grup de tiri Usenet telnet o conexiune Telnet WAIS un fiier de pe un server WAIS

Accesarea unui newsgroup Urmtorul cod HTML: HTML Newsgroup creeaz un link ctre un newsgroup ca acesta HTML Newsgroup.

94

Descrcarea cu FTP Urmtorul cod HTML: Download WinZip Creeaz un link pentru a descrca un fiier, ca acesta: Download WinZip. (Linkul nu funcioneaz dac sursa nu posed un director ftp.) Link ctre propriul e-mail Urmtorul cod HTML: someone@yahoo.com creeaz un link ctre propriul e-mail ca acesta someone@yahoo.com

25. Scripturi Pentru a face paginile HTML mai dinamice i mai interactive, putei aduga scripturi. Inserarea unui script ntr-o pagin HTML n HTML un script este definit cu tagul . Trebuie s utilizai atributul type pentru a specifica limbajul scriptului. Exemplu: document.write("Hello World!")

Acest script determin afiarea urmtorului mesaj: Hello World! Cum procedai cu browserele vechi Un browser care nu recunoate tagul , va afia coninutul scriptului ca text pe pagin. Pentru a evita acest lucru, ar trebui s ascundei scriptul n taguri tip comentariu. Un browser care nu recunoate tagul va ignora acest comentariu i nu va mai afia coninutul tagului, n timp ce un

95

browser nou va nelege c scriptul trebuie executat, chiar dac este inclus n taguri de comentariu. Exemplu:

Tagul Acest tag este utilizat pentru a defini un text alternativ dac scriptul nu poate fi executat. Se folosete pentru browserele care recunosc tagul , dar nu accept limbajul n care este scris. n aceast situaie, browserele vor afia textul din tagul . Tagul va fi ignorat de browserele care pot executa scriptul. Exemplu: Browserul dvs. nu poate executa JavaScript!

Taguri pentru scripturi Tag Descriere Definete un script Definete un text alternativ dac scriptul nu poate fi executat Definete un obiect (embedded) Definete un set de parametri de execuie pentru obiect

Exemple Exemplul 1 Ilustreaz cum inserai un script Java ntr-un document HTML. document.write("Hello World!")

96

Exemplul 2 Ilustreaz cum trebuie procedat cu browserele care nu recunosc scripturile. Browserul nu accepta JavaScript! Un browser care nu accepta JavaScript va afisa textul din elementul noscript.

26. Atribute eveniment Nou n HTML 4.0 este posibilitatea de a declana evenimente n browser, spre exemplu, executarea unui script Java cnd un utilizator face click pe un element HTML. n continuare este prezentat o list de atribute care pot fi inserate n tagurile HTML pentru a defini evenimente. Evenimente pentru ferestre Pot s apar numai n elementule body i frameset. Atribut Valoare Descriere

97

onload script Scriptul va fi executat cnd documentul se ncarc

onunload script Scriptul va fi executat cnd documentul nu se ncarc

Evenimente pentru formulare Pot aprea numai n elementele unui formular. Atribut Valoare Descriere onchange script Scriptul va fi executat cnd elementul se

modific onsubmit script Scriptul va fi executat cnd formularul este

trimis (cu butonul submit) onreset script Scriptul va fi executat cnd formularul este

resetat (cu butonul reset) onselect script Scriptul va fi executat cnd elementul este

selectat onblur script Scriptul va fi executat cnd utilizatorul face

click n afara elementului onfocus script Scriptul va fi executat cnd utilizatorul face

click pe element (focus) Evenimente pentru tastatur Nu pot s apar n elementele base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style i title. Atribut Valoare Descriere onkeydown script Scriptul va fi executat cnd este apsat o tast onkeypress script Scriptul va fi executat cnd o tast este apsat

i eliberat onkeyup script Scriptul va fi executat cnd o tast este

eliberat

Evenimente pentru mouse Nu pot s apar n elementele base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title. Atribut Valoare Descriere onclick script Scriptul va fi executat cnd se face click cu

mouse-ul

98

ondblclick script Scriptul va fi executat cnd se face dublu click cu mouse-ul

onmousedown script Scriptul va fi executat cnd un buton de mouse este apsat

onmousemove script Scriptul va fi executat cnd cursorul mouse-ului se mic

onmouseout script Scriptul va fi executat cnd cursorul mouse-ului prsete elementul

onmouseover script Scriptul va fi executat cnd cursorul mouse-ului se mic peste element

onmouseup script Scriptul va fi executat cnd butonul mouse-ului este eliberat

27. Calculatorul poate fi server WEB Dac vrei ca alii s poat vedea paginile dvs. trebuie s le publicai pe web. Pentru a v publica paginile, trebuie s le salvai pe un server web. Calculatorul dvs. poate funciona ca un server web dac instalai IIS. Microsoft IIS este o component gratuit de server web. IIS - Internet Information Server IIS este un set de servicii bazate pe Internet pentru servere creat de Microsoft pentru a fi utilizat cu Microsoft Windows. IIS este disponibil pentru Windows 2000, XP, Vista i Windows NT. IIS este uor de instalat i este ideal pentru proiectarea i testarea aplicaiilor web. IIS include Active Server Pages (ASP), un standard de scripturi orientate pe server care poate fi utilizat pentru a crea aplicaii web dinamice i interactive. Cum instalai IIS n Windows Vista Parcurgei urmtorii pai:

1. Deschidei Control Panel din Start menu 2. Deschidei cu dublu click Programs and Features 3. Click pe "Turn Windows features on or off" 4. Selectai csua pentru Internet Information Services (IIS), i click OK

Dup ce ai instalat IIS, rulai Run Windows Update. Cum instalai IIS n Windows XP i Windows 2000 Parcurgei urmtorii pai:

1. n Start menu, click Settings i selectai Control Panel 2. Dublu click pe Add or Remove Programs

99

3. Click Add/Remove Windows Components 4. Click Internet Information Services (IIS) 5. Click Details 6. Selectai csua pentru World Wide Web Service, i click OK 7. n seciunea Windows Component , click Next pentru a instala IIS

Dup ce ai instalat IIS, rulai Run Windows Update. Testai paginile web Dup ce ai instalat IIS parcurgei urmtorii pai:

1. Cutai n C: un folder nou numit Inetpub 2. Deschidei folderul Inetpub i cutai folderul wwwroot 3. Creai un nou folder, ca "MyWeb", n wwwroot 4. Scriei un cod ASP i salvai-l ca "test1.asp" n folderul creat anterior 5. Deschidei browserul i tastai "http://localhost/MyWeb/test1.asp",

pentru a vedea pagina web pe care ai creat-o.

II. XHTML

1. Ce este XHTML? Pentru a putea nelege XHTML, trebuie s avei cunotine elementare despre HTML i proiectarea paginilor web.

XHTML este abrevierea pentru EXtensible HyperText Markup Language

XHTML este aproape identic cu HTML 4.01 XHTML este o versiune mai strict i mai curat a HTML-ului XHTML este HTML definit ca o aplicaie XML XHTML este o recomandare a consoriului W3C Toate browserele recunosc XHTML

2. De ce XHTML? XHTML este o combinaie ntre HTML i XML (EXtensible Markup Language). XHTML const n toate elementele din HTML 4.01, combinate cu sintaxa strict din XML. Multe pagini internet conin cod HTML ru. Urmtorul cod va funciona corect ntr-un browser, chiar dac nu respect regulile HTML:

100

Acesta este un cod HTML incorect Incorect HTML Acesta este un paragraf XML este un limbaj de marcare n care orice element trebuie marcat corect, ceea ce conduce la documente bine-formate. XML este proiectat s descrie informaia, iar HTML este proiectat s afieze informaia. Astzi, piaa este format din diferite tehnologii de browser, unele rulnd pe calculatoare, altele pe telefoane mobile i alte dispozitive de mic gabarit. Ultimele menionate, nu au resursele sau puterea de a interpreta un limbaj de marcare ru. Combinnd punctele tari din HTML i XML, a rezultat XHTML, un limbaj de marcare util acum i n viitor.

3. Diferene ntre XHTML i HTML Cele mai importante diferene

Elementele XHTML trebuie imbricate corect Elementele XHTML trebuie ntotdeauna nchise Elementele XHTML trebuie scrise cu litere mici Documentele XHTML trebuie s aib un element rdcin

Elementele XHTML trebuie imbricate corect n HTML, unele elemente pot fi imbricate incorect, ca n exemplul urmtor: Acest text este bold si italic. n XHTML, toate elementele trebuie imbricate corect, ca n exemplul urmtor: Acest text este bold si italic. Obs: O greeal comun la definirea listele imbricate este c se uit c elementele listei interioare trebuie s fie ntre tagurile i . Acest cod este greit: Cafea Ceai Ceai negru Ceai verde

101

Lapte

Codul corect este: Cafea Ceai Ceai negru Ceai verde Lapte

Elementele XHTML trebuie nchise ntotdeauna Elementele care nu sunt vide trebuie s aib un tag de nchidere. Acest cod este greit: Acesta este un paragraf Acesta este alt paragraf Modul corect de scriere este: Acesta este un paragraf Acesta este alt paragraf

Elementele vide trebuie de asemenea nchise. Acest cod este greit: O intrerupere de linie: O linie orizontala: O imagine: Modul corect de scriere este: O intrerupere de linie: O linie orizontala: O imagine:

Elementele XHTML trebuie scrise cu litere mici Tagurile i atributele trebuie scrise cu litere mici. Acest cod este greit: Acesta este un paragraf

102

Modul corect de scriere este: Acesta este un paragraf

Documentele XHTML trebuie s aib un element rdcin Toate elementele XHTML trebuie s fie incluse n elementul rdcin . Elementele descendente (descendenii) trebuie s fie n perechi i incluse corect n elementul printe. Structura de baz a unui document este: ... ...

4. Sintaxa XHTML Reguli suplimentare privind sintaxa XHTML

Atributele trebuie scrise cu litere mici Valorile atributelor trebuie scrise ntre ghilimele Minimizarea atributelor este interzis Atributul id nlocuiete numele atributului Declaraia DOCTYPE este obligatorie

Numele atributele trebuie scrise cu litere mici Acest cod este greit: Modul corect de scriere este:

Valorile atributelor trebuie scrise ntre ghilimele Acest cod este greit: Modul corect de scriere este:

103

Minimizarea atributelor este interzis Acest cod este greit: Modul corect de scriere este: Aceasta este o list cu atribute minimizate n HTML i cum ar trebui ele scrise n XHTML: HTML XHTML compact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" noshade noshade="noshade" nowrap nowrap="nowrap" multiple multiple="multiple" noresize noresize="noresize"

Atributul lang Acest atribut se aplic aproape fiecrui element XHTML. El specific limba n care este scris coninutul unui element. Dac utilizai atributul lang ntr-un element, trebuie s adugai i atributul xml:lang, ca n exemplul urmtor: Ciao bella!

Elemente XHTML obligatorii

104

Toate documentele XHTML trebuie s aib o declaraie DOCTYPE. Elementele html, head, title, i body nu pot lipsi. Un exemplu de document XHTML cu numrul minim de taguri obligatorii: Aici este titlul Obs: Declaraia DOCTYPE nu face parte din documentul XHTML propriu-zis. Nu este un element XHTML. Obs: Atributul xmlns din , specific spaiul de nume xml pentru un document i este necesar n documentele XHTML. Totui, validatorul HTML de la w3.org ignor absena atributului xmlns deoarece spaiul de nume "xmlns=http://www.w3.org/1999/xhtml" este implicit i va fi adugat automat n tagul al documentului, chiar dac l-ai omis.

5. DTD (Document Type Definitions) XHTML Cel mai ntlnit DTD este XHTML Transitional. Declaraia este obligatorie Un document XHTML este format din trei pri principale:

declaraia DOCTYPE Seciunea Seciunea

Structura de baz a unui document este: ... ...

105

Un exemplu XHTML Acesta este un document XHTML simplu (minimal): Un document simplu Un paragraf

Declaraia DOCTYPE definete tipul documentului. n rest documentul arat ca n HTML. Document Type Definitions (DTD)

O declaraie DTD specific sintaxa unei pagini web n SGML DTD-urile sunt utilizate de aplicaiile SGML, cum este HTML, pentru

a specifica regulile pentru documentele de un anumit tip, inclusiv un set de declaraii de elemente i entiti

n XHTML, DTD descrie ntr-un limbaj precis, neles de calculator, sintaxa acceptat pentru marcajul XHTML

n XHTML sunt trei tipuri de DTD: STRICT TRANSITIONAL FRAMESET

XHTML 1.0 Strict Folosii aceast declaraie DOCTYPE cnd dorii un marcaj curat, independent de elementele de prezentare. Utilizai-l mpreun cu CSS. XHTML 1.0 Transitional

106

Folosii aceast declaraie DOCTYPE cnd dorii s folosii facilitile HTML de prezentare. XHTML 1.0 Frameset

Folosii aceast declaraie DOCTYPE cnd dorii s utilizai cadre (frames) HTML. Un document XHTML poate fi validat cu validatorul W3C. nainte de a valida documentulXHTML, inserai declaraia DTD potrivit din cele trei declaraii prezentate anterior.

6. Modularizarea XHTML Modelul de modularizare XHTML definete modulele XHTML. XHTML conine majoritatea facilitilor necesare unui proiectant web. Pentru unele aplicaii, XHTML este prea mare i prea complex, pentru altele este prea simplu. Prin mprirea XHTML n module, comsoriul W3C a creat seturi mici i bine definite de elemente XHTML care pot fi folosite separat pentru dispozitivele mici, sau pot fi combinate cu alte standarde XML n aplicaii mult mai complexe. Cu un XHTML modularizat, proiectaii pot:

Alege elemente suportate de un dispozitiv Simplifica XHTML-ul pentru dispozitive mici Extinde XHTML-ul pentru aplicaii complexe prin adugarea de noi

funcionaliti XML (ca MathML, SVG, Voice i Multimedia) Defini profiluri XHTML ca XHTML Basic (un subset XHTML pentru

dispozitive mobile) Modulele XHTML Consoriul W3C a mprit definiiile XHTML n 28 de module: Numele modulului Descriere Applet Module Definete elementul applet* (depit) Base Module Definete elementele de baz Basic Forms Module Definete elementele de baz pentru formulare Basic Tables Module Definete elementele de baz pentru tabele Bi-directional Text Module Definete elementul bdo Client Image Map Module Definete elementele de mapare a imaginilor pentru

browser

107

Edit Module Definete elementele de editare del i ins Forms Module Definete toate elementele folosite n formulare Frames Module Definete elementele pentru frameset Hypertext Module Definete elementul a Iframe Module Definete elementul iframe Image Module Definete elementul img Intrinsic Events Module Definete atributele evenimentelor, ca onblur i

onchange Legacy Module Definete elementele i atributele depite* Link Module Definete elementul link List Module Definete elementele pentru liste ol, li, ul, dd, dt, i

dl Metainformation Module Definete elementul meta Name Identification Module

Definete atributul depit* name

Object Module Definete elementele object i param Presentation Module Definete elementele de prezentare, ca b i i Scripting Module Definete elementele script i noscript Server Image Map Module Definete elementele de mapare a imaginii pentru

server Structure Module Definete elementele html, head, title i body Style Attribute Module Definete atributul style Style Sheet Module Definete elementul style Tables Module Definete elementele utilizate n tabele Target Module Definete atributul target Text Module Definete elementele container pentru text, ca p i

h1 * Elementele depite nu ar trebui folosite n XHTML.

III. LISTA TAGURILOR HTML 4.01 / XHTML 1.0

Coloana DTD indic n care HTML 4.01 / XHTML 1.0 DTD este permis tagul respectiv: S=Strict, T=Transitional, i F=Frameset Tag Descriere DTD Definete un comentariu STF Definete tipul documentului STF

108

Definete o ancor STF Definete o abreviere STF Definete un acronim STF Definete informaiile de contact pentru

autorul documentului STF

Definete o zon n interiorul unei imagini mapate

STF

Definete un text ngroat STF Definete o adres implicit sau o

destinaie implicit pentru toate linkurile dintr-o pagin

STF

Definete direcia textului STF Definete un text mare STF Definete un citat lung STF Definete corpul documentului STF Definete o ntrerupere de linie STF Definete un buton ce poate fi apsat STF Definete titlul unui tabel STF Definete un citat STF Definete un text tip cod de calculator STF Definete valorile atributelor pentru una

sau mai multe coloane dintr-un tabel STF

Definete un grup de coloane dintr-un tabel pentru formatare

STF

Definete des