curs html a5 - laurian.ro html_a5.pdf · 8 elemente html vide.....21 5. atribute html.....21

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 vedeţi 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 depăşite.......................................................................... 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 definiţii.......................................................................................... 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. ENTITĂŢILE DE TIP CARACTER...............................87

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

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

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

Informaţiile din elementul head................................................................ 88

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

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

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

Cuvinte cheie pentru motoarele de căutare ............................................... 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 procedaţi cu browserele vechi ........................................................... 94

Tagul <noscript> ................................................................................... 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 instalaţi IIS în Windows Vista........................................................... 98

Cum instalaţi IIS în Windows XP şi Windows 2000 .................................. 98

Testaţi paginile web.................................................................................... 99

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

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

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

3. DIFERENŢE ÎNTRE XHTML ŞI HTML ....................... 100

Cele mai importante diferenţe.................................................................. 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

Declaraţia <!DOCTYPE> 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

Declaraţia <!DOCTYPE>.......................................................................... 110

Tagul <a>................................................................................................. 112

Tagul <abbr> .......................................................................................... 114

Tagul <acronym> .................................................................................. 114

Tagul <address> ................................................................................... 115

Tagul <area> .......................................................................................... 115

Tagurile <tt> <i> <b> <big> <small> ........................................ 116

Tagul <base> .......................................................................................... 116

Tagul <bdo> ........................................................................................... 116

Tagul <blockquote> ........................................................................... 116

14

Tagul <body> .......................................................................................... 117

Tagul <br> ............................................................................................... 117

Tagul <button>...................................................................................... 118

Tagul <caption>.................................................................................... 118

Tagurile <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>..................................................................................................... 118

Tagul <col>............................................................................................ 119

Tagul <colgroup> ................................................................................. 120

Tagul <dd> ............................................................................................... 121

Tagul <del>............................................................................................. 121

Tagul <div>............................................................................................. 122

Tagul <dl> ............................................................................................... 122

Tagul <dt> ............................................................................................... 123

Tagul <fieldset> ................................................................................. 123

Tagul <form> .......................................................................................... 123

Tagul <frame> ........................................................................................ 125

Tagul <frameset> ................................................................................. 125

Tagul <head> .......................................................................................... 126

Tagurile <h1> ...<h6>.......................................................................... 126

Tagul <hr> ............................................................................................... 126

Tagul <html> .......................................................................................... 126

15

Tagul <iframe> ..................................................................................... 127

Tagul <img> ............................................................................................ 127

Tagul <input>........................................................................................ 128

Tagul <ins> ............................................................................................ 129

Tagul <label>........................................................................................ 130

Tagul <legend> ..................................................................................... 130

Tagul <li>............................................................................................... 130

Tagul <link> .......................................................................................... 131

Tagul <map> ............................................................................................ 132

Tagul <meta> .......................................................................................... 132

Tagul <noframes> ................................................................................. 133

Tagul <noscript> ................................................................................. 133

Tagul <object> ..................................................................................... 133

Tagul <ol>............................................................................................... 134

Tagul <optgroup> ................................................................................. 134

Tagul <option> ..................................................................................... 135

Tagul <p>................................................................................................. 135

Tagul <param>........................................................................................ 136

Tagul <pre> ............................................................................................ 136

Tagul <q>................................................................................................. 136

Tagul <script> ..................................................................................... 137

16

Tagul <select>...................................................................................... 137

Tagul <span> .......................................................................................... 138

Tagul <style> ........................................................................................ 138

Tagurile <sub> şi <sup> ........................................................................ 139

Tagul <table> ........................................................................................ 139

Tagurile <tbody>, <head> şi <tfoot> ............................................. 140

Tagurile <td> şi <th> .......................................................................... 141

Tagul <textarea> ................................................................................. 142

Tagul <title> ........................................................................................ 143

Tagul <tr> ............................................................................................... 143

Tagul <ul> ............................................................................................... 144

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

17

I. HTML

1. Introducere Exemplu <html> <body> <h1>Primul meu titlu</h1> <p>Primul meu paragraf.</p> </body> </html> 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 ascuţite, de exemplu <html>

În mod normal tagurile HTML sunt pereche ca <b> şi </b> Primul tag din pereche este tagul de început, al doilea de sfârşit

Documentele HTML = Pagini Web

Documentele HTML descriu paginile web Documentele HTML conţin 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 afişeze ca pagini web. Browser-ul nu afişează tagurile HTML, dar le utilizează ca să interpreteze conţinutul paginii. Exemplu: <html> <body>

18

<h1>Primul meu titlu</h1> <p>Primul meu paragraf</p> </body> </html> Explicaţii:

Textul dintre <html> şi </html> descrie pagina web Textul dintre <body> şi </body> este conţinutul vizibil al paginii Textul dintre <h1> şi </h1> este afişat ca un titlu Textul dintre <p> şi </p> este afişat ca un paragraf

2. HTML – Să începem Ce vă trebuie Nu vă trebuie nimic deosebit ca să învăţaţi HTML.

Nu aveţi nevoie de un editor HTML Nu aveţi nevoie de un server web Nu aveţi nevoie de un site web

Editarea documentelor HTML Puteţi utiliza utilitarul NotePad pentru a edita documentele HTML. Desigur, programatorii web profesionişti preferă deseori editoare HTML ca FrontPage sau Dreamweaver, în loc să scrie textul simplu. Când salvaţi un fişier HTML, puteţi folosi extensia .htm sau extensia .html.

3. Patru exemple simple Titluri Titlurile HTML sunt definite cu tagurile pereche <h1>...... <h6>. Exemplu: <html> <body> <h1>Acesta este titlul 1</h1> <h2>Acesta este titlul 2</h2> <h3>Acesta este titlul 3</h3> <h4>Acesta este titlul 4</h4> <h5>Acesta este titlul 5</h5> <h6>Acesta este titlul 6</h6>

19

</body> </html> Paragrafe Paragrafele HTML sunt definite cu tagul pereche <p>. <html> <body> <p>Acesta este un paragraf.</p> <p>Acesta este un paragraf.</p> <p>Acesta este un paragraf.</p> </body> </html> Link-uri Link-urile HTML sunt definite cu tagul pereche <a>. <html> <body> <a href="http://yahoo.com">Acesta este un link</a> </body> </html> Obs: Adresa de link este precizată ca atribut. Imagini Imaginile HTML sunt definite cu tagul <img> (nepereche). <html> <body> <img src="hills.jpg" width="104" height="142"/> </body> </html> 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 sfârşit.:

Tag de început Conţinutul elementului Tag de sfârşit

<p> Acesta este un paragraf </p>

<a href="default.htm" >

Acesta este un link </a>

<br /> Sintaxa unui element HTML

Un element HTML începe cu un tag de deschidere/început Un element HTML se încheie cu tag de închidere/sfârşit Conţinutul unui element este tot ce este scris între cele două taguri Unele elemente HTML au conţinutul 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 conţine alte elemente HTML). Documentele HTML sunt de fapt elemente HTML imbricate. Exemplu de document HTML <html> <body> <p>Acesta este primul meu paragraf</p> </body> </html> Acest exemplu conţine 3 elemente HTML: Elementul <p>: <p>Acesta este primul meu paragraf</p> Elementul <p> defineşte un paragraf într-un document HTML.

21

Elementul are tagul de început <p> şi tagul de sfârşit </p>. Conţinutul elementului este: Acesta este primul meu paragraf Elementul <body>: <body> <p> Acesta este primul meu paragraf </p> </body> Elementul <body> defineşte corpul unui document HTML. Elementul are tagul de început <body> şi tagul de sfârşit </body>. Acest element conţine un alt element HTML (un paragraf – elementul p) Elementul <html>: <html> <body> <p>Acesta este primul meu paragraf</p> </body> </html> Elementul <html> defineşte întregul document HTML. Elementul are tagul de început <html> şi tagul de sfârşit </html>. Elementul conţine un alt element HTML (corpul documentului – elementul body) Elemente HTML vide Elementele HTML care nu au conţinut se numesc elemente vide. Elementele vide pot fi închise în tagul de început. Spre exemplu <br> este un element vid fără tag de sfârşit (defineşte o întrerupere de linie). În XHTML, XML şi viitoarele versiuni de HTML, toate elementele trebuie închise. Adăugarea unui slash în tagul de început, ca <br />, este un mod potrivit de închidere a elementelor vide, acceptat de HTML, XHTML şi XML. Obs: HTML nu este case-sesitive, dar vă recomandăm să scrieţi cu litere mici pentru compatibilitate cu noile versiuni HTML.

5. Atribute HTML Atributele furnizează informaţii suplimentare despre elementele HTM. Atributele HTML

Elementele HTML pot avea atribute

22

Atributele furnizează informaţii 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 <a>. Adresa de link precizată este un atribut. Exemplu: <html> <body> <a href="http://www.yahoo.com">Acesta este un link</a> </body> </html> Obs. Valorile atributelor trebuie întotdeauna puse între ghilimele În rarele situaţii în care valoarea atributului conţine ea însăşi ghilimele, este necesar să scrieţi valoarea atributului între apostrofuri ca în exemplul următor: name='John "ShotGun" Nelson' Lista atributelor HTML Următoarea 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 definiţie de stil inline title tooltip_text Un text afişat când cursorul este

fixat pe element

6. Titluri HTML Titlurile sunt definite cu tagurile <h1> ..... <h6>. <h1> defineşte cel mai mare titlu. <h6> defineşte cel mai mic titlu. Exemplu: <html> <body> <h1>Acesta este un titlu 1</h1> <h2>Acesta este un titlu 2</h2>

23

<h3>Acesta este un titlu 3</h3> <h4>Acesta este un titlu 4</h4> <h5>Acesta este un titlu 5</h5> <h6>Acesta este un titlu 6</h6> </body> </html> Obs: Browserele adaugă automat o linie vidă înainte şi după un titlu. Titlurile sunt importante Utilizaţi titlurile HTML numai pentru scrierea titlurilor. Nu le utilizaţi pentru a face textul BIG sau bold. Motoarele de căutare folosesc titlurile pentru a indexa structura şi conţinutul paginilor web. Este important să utilizaţi 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 <hr/> este utilizat pentru a crea o linie orizontală. Exemplu: <html> <body> <p>Tagul hr defineste o linie orizontala:</p> <hr/> <p>Acesta este un paragraf</p> <hr/> <p>Acesta este un paragraf</p> <hr/> <p>Acesta este un paragraf</p> </body> </html> Comentarii HTML Comentariile pot fi inserate în codul HTML pentru a-l face mai uşor de citit şi înţeles. Comentariile sunt ignorate de către browsere şi nu sunt afişate. Comentariile se scriu astfel:

24

Cum vedeţi codul HTML sursă al unei pagini web Faceţi clic dreapta pe pagină şi selectaţi "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 împărţite în paragrafe. Paragrafele sunt definite cu tagul <p>. Obs: Browserele adaugă automat o linie vidă înainte şi după un paragraf. Nu uitaţi tagul de închidere. Exemplu: <html> <body> <p>Acesta este primul paragraf.</p> <p>Acesta al doilea paragraf.</p> <p>Acesta este al treilea paragraf.</p> <p>Nu uitati sa inchideti tagurile HTML!</p> </body> </html> Obs: Noile versiuni HTML nu vor permite omiterea tagurilor de încheiere. Obs. Utilizaţi tagul <br/> dacă doriţi o linie nouă fără să începeţi un nou paragraf. Exemplu: <p>Acesta este<br />un para<br />graf cu intrerupere de linie.</p> Obs: Nu contează câte linii şi câte spaţii inseraţi în documentele HTML. Browserele vor vedea un singur spaţiu şi o singură linie (dacă nu utilizaţi tagul <br/>).

8. Formatarea textului Taguri pentru formatarea textului Tag Descriere <b> Text îngroşat <big> Text mare <em> Text accentuat <i> Text înclinat (italic)

25

<small> Text mic <strong> Text îngroşat <sub> Textul subscript (indice) <sup> Text superscript (exponent) <ins> Text inserat <del> Text şters <pre> Text preformatat <code> Text tip cod de calculator <kbd> Text de la tastatură <abbr> Abreviere <acronym> Acronim <address> Adresă <blockquote> Citat lung <q> Citat scurt <cite> Citat <dfn> Definiţie Exemple Exemplul 1 Ilustrează cum puteţi formata textul într-un document HTML. <html> <body> <p><b>Acest text este bold</b></p> <p><strong>Acest text este strog</strong></p> <p><big>Acest text este big</big></p> <p><em>Acest text este emphasiz</em></p> <p><i>Acest text este italic</i></p> <p><small>Acest text este small</small></p> <p>Acesta este<sub> subscript</sub> si <sup>superscript</sup></p> </body> </html> Exemplul 2 Ilustrează cum puteţi controla întreruperile de linie şi spaţiul cu tagul <pre>. <html>

26

<body> <pre> Acesta este un text preformatat. Pastreaza spatiile Si intreruperile de linie. </pre> <p>Tagul pre poate fi folosit pentru a afisa coduri computer:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> Exemplul 3 Ilustrează utilizarea diferitelor taguri pentru coduri computer. <html> <body> <code>Computer code</code> <br/> <kbd>Keyboard input</kbd> <br/> <tt>Teletype text</tt> <br/> <samp>Sample text</samp> <br/> <var>Computer variable</var> <br/> <p> <b>Note:</b> Aceste taguri sunt uzual folosite pentru a afisa linii de program. </p> </body> </html> Exemplul 4 Ilustrează cum se scrie o adresă într-un document HTML.

27

<html> <body> <address> Amelia Popescu<br> Aleea Zorilor nr.156<br> Botosani<br> Romania </address> </body> </html Exemplul 5 Ilustrează cum se utilizează acronimele şi abrevierile. <html> <body> <abbr title="United Nations">UN</abbr><br/> <acronym title="World Wide Web">WWW</acronym> <p>Atributul titlu este folosit pentru a arata versiunea completa a acronimului sau abrevierii cand mouse-ul este pozitionat pe element. </p> </body> </html> Exemplul 6 Ilustrează cum poate fi schimbată direcţia unui text. <html> <body> <p> Daca browserul suporta tagul bdo,urmatoarea linie de text va fi scrisa de la dreapta la stanga( atributul rtl): </p> <bdo dir="rtl">Un text ebraic</bdo>

28

</body> </html> Exemplul 7 Ilustrează cum se folosesc citatele lungi şi scurte. <html> <body> Un citat lung: <blockquote> 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 </blockquote> <p><b>Browserul insereaza intreruperi de linie si margini pentru citat.</b> </p> Un citat scurt: <q>Acesta este un citat scurt.</q> <p><b>Acest text nu se evidentiaza prin nimic special.</b></p> </body> </html> Exemplul 8 Ilustrează cum se marchează un text care a fost şters sau inserat într-un document. <html> <body> <p> O duzina are <del>douazeci</del> <ins>douasprezece</ins> elemente </p>

29

<p>Cele mai multe browsere vor afisa textul sters ca taiat si textul inserat ca subliniat. </p> </body> </html>

9. Stiluri Atributul style este nou în HTML şi introduce CSS –ul în HTML. Exemplu de utilizare a atributului style. <html> <body style="background-color:PowderBlue;"> <h1>Folositi stiluri si culori!</h1> <p style="font-family:verdana;color:red"> Acest text este scris cu Verdana si este rosu</p> <p style="font-family:times;color:green"> Acest text este scris cu Times si este verde</p> <p style="font-size:30px">Acest text are 30 pixeli inaltime</p> </body> </html> 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 adăugate elementelor HTML fie direct, utilizând atributul style, fie indirect prin foi separate de stiluri (fişiere 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 depăşite În HTML 4, anumite taguri şi atribute sunt definite ca depăşite. Asta înseamnă că ele nu vor mai fi acceptate în următoarele versiuni HTML şi XHTML. Mesajul este clar: nu mai folosiţi aceste taguri şi atribute. Aceste taguri şi atribute nu mai trebuiesc folosite: Taguri Descriere <center> Element centrat <font> şi <basefont> Fonturi HTML <s> şi <strike> Text tăiat <u> Text subliniat Atribute Descriere align Alinierea textului bgcolor Culoarea fundalului (background) color Culoarea textului În locul lor folosiţi stiluri. Exemple Culoare background: Atributul style defineşte un stil pentru elementul <body>. <html> <body style="background-color:yellow"> <h2>Acesta este un fundal colorat cu atributul style</h2> </body> </html> Familia de fonturi, culoare şi mărime: Atributul style defineşte un stil pentru elementul <p>. <html> <body> <h1 style="font-family:verdana">Un titlu</h1> <p style="font-family:courier new; color:red; font-size:20px;">

31

Acesta este un paragraf stilizat cu atributul style</p> </body> </html> Alinierea textului: Atributul style defineşte un stil pentru elementul <h1>. <html> <body> <h1 style="text-align:center">Acesta este titlu 1</h1> <p>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. </p> </body> </html>

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 fişier de sunet, un film, etc. O ancoră este o destinaţia unui hiperlink în interiorul unui document. Elementul <a> este utilizat pentru a defini hiperlegăturile şi ancorele. Folosim termenul link când elementul <a> indică o resursă web şi termenul ancoră când elementul <a> defineşte o adresă din interiorul documentului. Sintaxa unui link HTML este: <a href="url">Textul afisat</a> Tagul de început conţine atribute despre link. Elementul de conţinut defineşte textul ce va fi afişat.

32

Obs: Elementul conţinut nu trebuie să fie neapărat text. Puteţi folosi o imagine sau orice alt element HTML. Atributul href Defineşte „adresa” legăturii. Elementul <a> următor defineşte o legătură către Gmail: <a href="http://www.gmail.com/">Serviciul e-mail Google!</a> Codul de mai sus va fi afişat de browser astfel: Serviciul e-mail Google! Atributul target Atributul defineşte unde se va deschide documentul referit de link. Codul următor va deschide documentul într-o nouă fereastră: <html> <body> <a href="lastpage.htm" target="_blank">Ultima Pagina</a> <p> Dacă atributul target este "_blank",documentul referit va fi deschis intr-o noua fereastra. </p> </body> </html> Atributul name Când este folosit atributul name, elementul <a> defineşte o ancoră în interiorul unui document HTML. Ancorele nu sunt afişate într-un mod special, ele sunt invizibile pentru cititor. Sintaxa de definire a unei ancore este: <a name="label">Orice continut</a> Sintaxa legăturii către o ancoră este: <a href="#label">Orice conţinut</a> Simbolul # din atributul href defineşte o legătură către o ancoră. Exemple: O ancoră în interiorul unui document HTML:

33

<a name="tips">Sectiunea de Sfaturi Utile</a> O legătură către Secţiunea de Sfaturi Utile din interiorul aceluiaşi document: <a href="#tips"> Mergeti la Sectiunea de Sfaturi Utile</a> O legătură către Sectiunea de Sfaturi Utile dintr-un alt document HTML: <a href="http://www.MyPage.com/Tutorial#tips"> Mergeti la Sectiunea de Sfaturi Utile </a> Ancorele sunt folosite frecvent pentru a crea "table of contents" (cuprins) la începutul unui document mare. Fiecărui capitol din document îi este atribuită o ancoră şi linkurile către aceste ancore sunt amplasate la începutul documentului. Dacă browserul nu găseşte 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. <html> <body> <p>Crearea unei imagini drept link: <a href="mypage.htm"> <img src="smiley.gif" alt="Tutoriale" width="32" height="32" /> </a> </p> <p>Imaginea nu are bordura, dar este un link: <a href="mypage.htm"> <img border="0" src="smiley.gif" alt="Tutoriale" width="32" height="32" /> </a> </p> </body> </html>

34

Exemplul 2 Ilustrează cum se folosesc linkurile şi ancorele pentru a sări în altă parte a documentului. <html> <body> <p><a href="#C4">Vezi Capitolul 4.</a></p> <p><a href="#C10">Vezi Capitolul 10.</a></p> <h2>Capitolul 1</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 2</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 3</h2> <p>Acest capitol explica ............</p> <h2><a name="C4">Capitolul 4</a></h2> <p>Acest capitol explica ............</p> <h2>Capitolul 5</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 6</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 7</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 8</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 9</h2> <p>Acest capitol explica ............</p> <h2><a name="C10">Capitolul 10</a></h2> <p>Acest capitol explica ............</p> <h2>Capitolul 11</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 12</h2> <p>Acest capitol explica ............</p>

35

<h2>Capitolul 13</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 14</h2> <p>Acest capitol explica ............</p> <h2>Capitolul 15</h2> <p>Acest capitol explica ............</p> </body> </html> Exemplul 3 Ilustrează cum puteţi ieşi dacă pagina se blochează într-un cadru. <html> <body> <p>Cadrul este blocat?</p> <a href="http://www.yahoo.com/" target="_top">Apasati aici!</a> </body> </html> Exemplul 4 Ilustrează cum să faceţi link către utilitarul de e-mail (va funcţiona numai dacă serviciul e-mail este instalat). <html> <body> <p> Acesta este un link către e-mail: <a href="mailto:[email protected]?subject=Buna%20ziua"> Send Mail</a> </p> <p> <b>Nota:</b> Spatiile dintre cuvinte ar trebui înlocuite cu %20

36

pentru <b>a fi siguri</b> ca browserul va afisa textul corect. </p> </body> </html> Exemplul 5 Ilustrează crearea un link de e-mail mai complicat. <html> <body> <p> Acesta este un link către e-mail: <a href="mailto:[email protected]?cc= [email protected]&bcc [email protected]&subject =Orarul%20Seminariilor&body= Noul%20orar%20al%20seminariilor%20se%20va%20afisa%20vineri!"> Send mail! </a> </p> <p> <b>Nota:</b> Spatiile dintre cuvinte ar trebui înlocuite cu %20 pentru <b>a fi siguri</b> ca browserul va afisa textul corect. </p> </body> </html>

11. Imagini Tagul imagine şi atributul src În HTML imaginile sunt definite cu tagul <img>. Tagul <img> este vid, aceasta înseamnă că el conţine numai atribute şi nu are tag de închidere.

37

Pentru a afişa o imagine pe o pagină trebuie să folosiţi atributul src care reprezintă sursa imaginii. Valoarea atributului src este URL-ul imaginii pe care doriţi să o afişaţi în pagină. Sintaxa de definire a unei imagini este: <img src="url" /> 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 afişează imaginea în locul în care tagul de imagine apare în document. Dacă puneţi tagul imagine între două paragrafe, browserul afişează 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: <img src="boat.gif" alt="O barca mare" /> Atributul alt informează cititorul ce lipseşte din pagină dacă browserul nu poate încarca imaginea. Browserul va afişa în loc de imagine textul alternativ. Este indicat să introduceţi atributul alt pentru orice imagine de pe pagină pentru a îmbunătăţi afişarea paginii pentru cei care au browsere text-only. Dacă pagina conţine multe imagini, durează mult pentru a fi încărcată aşa că folosiţi cu atenţie imaginile. Taguri pentru imagini Tag Descriere <img> Defineşte o imagine <map> Defineşte o imagine mapată <area> Defineşte o zonă de hiperlink în interiorul unei imagini mapate Exemple Exemplul 1 Ilustrează cum se inserează într-o pagină web imagini situate în acelaşi director. <html> <body> <p> O imagine statica: <img src="constr4.gif" width="144" height="50" />

38

</p> <p> O imagine animata: <img src="hackanm.gif" width="48" height="48" /> </p> <p> Observati ca sintaxa de inserare a unei imagini animate nu este diferita de cea pentru o imagine statica. </p> </body> </html> Exemplul 2 Ilustrează cum se inserează imagini din alt director sau alt server. <html> <body> <p>O imagine din alt director:</p> <img src="/images/chrome.gif" width="33" height="32" /> <p>O imagine de pe alt server:</p> <img src="http://www.mirror.com/images/green.jpg" width="104" height="142" /> </body> </html> Exemplul 3 Ilustrează cum se adăugă o imagine de fundal (background) unei pagini HTML. <html> <body background="background.jpg"> <h3>Uite: O imagine de fundal!</h3> <p>Pentru fundal puteti folosi fisiere gif si jpg.</p> <p>Daca imaginea este mai mica decat pagina, se va repeta.</p>

39

</body> </html> Exemplul 4 Ilustrează cum se aliniază imaginile cu textul . <html> <body> <p>O imagine <img src="hackanm.gif" align="bottom" width="48" height="48" /> in text.</p> <p>O imagine <img src="hackanm.gif" align="middle" width="48" height="48" /> in text.</p> <p>O imagine <img src="hackanm.gif" align="top" width="48" height="48" /> in text.</p> <p><b>Nota:</b> Alinierea bottom (la baza) este implicita!</p> <p>O imagine <img src="hackanm.gif" width="48" height="48" /> in text.</p> <p><img src="hackanm.gif" width="48" height="48" /> O imagine inaintea textului.</p> <p>O imagine dupa text. <img src="hackanm.gif" width="48" height="48" /></p> </body> </html> Exemplul 5 Ilustrează cum se aliniază o imagine la stânga sau la dreapta unui paragraf. <html> <body>

40

<p> <img src="hackanm.gif" align="left" width="48" height="48" /> Un paragraf cu o imagine. Atributul align este "left". Imaginea se va afisa la stanga acestui text. </p> <p> <img src="hackanm.gif" align="right" width="48" height="48" /> Un paragraf cu o imagine. Atributul align este "right". Imaginea se va afisa la dreapta acestui text </p> </body> </html> Exemplul 6 Ilustrează cum se stabilesc dimensiunile unei imagini. <html> <body> <p> <img src="hackanm.gif" width="20" height="20" /> </p> <p> <img src="hackanm.gif" width="45" height="45" /> </p> <p> <img src="hackanm.gif" width="70" height="70" /> </p> <p>Puteti mari sau micsora o imagine modificand atributele "height" si "width".</p> </body> </html> Exemplul 7 Ilustrează cum se foloseşte o imagine drept link.

41

<html> <body> <p>Crearea unui link pentru o imagine: <a href="mypage.htm"> <img src="smiley.gif" alt="HTML tutoriale" width="32" height="32" /> </a></p> </body> </html> Exemplul 8 Ilustrează cum se creează o imagine mapată în care fiecare zonă este un hiperlink. <html> <body> <p>Pentru a mari imaginea, faceti clic pe soare sau una dintre planete:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Soarele" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="Mercur" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" /> </map> </body> </html>

12. Tabele Tabelele se definesc cu tagul <table>. Un tabel este împărţit în linii (cu tagul <tr>), şi fiecare linie este împărţită în celule de date (cu tagul <td>). Notaţia td înseamnă "table data", conţinutul unei celule din tabel. O celulă poate conţine text, imagini, liste, paragrafe, formulare, linii orizontale, alt tabel , etc.

42

Exemplu: <table border="1"> <tr> <td>linia 1, celula 1</td> <td>linia 1, celula 2</td> </tr> <tr> <td>linia 2, celula 1</td> <td>linia 2, celula 2</td> </tr> </table> Atributul border Dacă atributul border nu este specificat, tabelul va fi afişat fără chenare (borduri). Pentru a afişa un tabel cu chenare trebuie utilizat atributul border. Denumirea coloanelor Crearea unei celule de titlu se face cu tagul <th>. Textul dintr-o celulă de titlu este îngroşat şi centrat. Exemplu: <table border="1"> <tr> <th>Un titlu</th> <th>Alt titlu</th> </tr> <tr> <td>linia 1, celula 1</td> <td>linia 1, celula 2</td> </tr> <tr> <td>linia 2, celula 1</td> <td>linia 2, celula 2</td> </tr> </table> Celule goale Cele mai multe browsere nu afişează prea bine celulele din tabel care nu au conţinut. Pentru a corecta acest lucru, adăugaţi un non-breaking space ( ) în celula vidă şi chenarul se va afişa corect. Exemplu: <table border="1"> <tr>

43

<td>linia 1, celula 1</td> <td>linia 1, celula 2</td> </tr> <tr> <td>linia 2, celula 1</td> <td> </td> </tr> </table> Taguri pentru tabele Tag Descriere <table> Defineşte un tabel <th> Defineşte o celulă de titlu <tr> Defineşte o linie din tabel <td> Defineşte o celulă de date <caption> Defineşte titlul unui tabel (table caption) <colgroup> Defineşte un grup de coloane din tabel

<col> Defineşte valorile atributelor pentru una sau mai multe coloane din tabel.

<thead> Defineşte capul tabelului <tbody> Defineşte corpul tabelului <tfoot> Defineşte subsolul tabelului Exemple Exemplul 1 Ilustrează cum se defineşte un tabel într-un document HTML. <html> <body> <p> Fiecare tabel incepe cu tagul <b>table</b>. Fiecare linie incepe cu tagul <b>tr</b>. Fiecare celula de date incepe cu tagul <b>td</b>. </p> <h4>Tabel cu o coloana:</h4> <table border="1"> <tr> <td>100</td> </tr>

44

</table> <h4>Tabel cu o linie si trei coloane:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Tabel cu doua linii si trei coloane:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Exemplul 2 Ilustrează utilizarea diferitelor tipuri de borduri. <html> <body> <h4>Cu un chenar normal:</h4> <table border="1"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table>

45

<h4>Cu un chenar gros:</h4> <table border="8"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Cu un chenar foarte gros:</h4> <table border="15"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> </body> </html> Exemplul 3 Ilustrează cum se creează un tabel fără borduri. <html> <body> <h4>Acest tabel nu are chenar pentru ca lipseste atributul border</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td>

46

<td>600</td> </tr> </table> <h4>Acest tabel nu are chenar pentru ca atributul border are valoarea 0:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Exemplul 4 Ilustrează cum se afişează titlurile coloanelor şi ale liniilor. <html> <body> <h4>Titlurile coloanelor (table headers):</h4> <table border="1"> <tr> <th>Nume</th> <th>Telefon</th> <th>Telefon</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Titlurile liniilor (vertical headers):</h4> <table border="1"> <tr>

47

<th>Nume:</th> <td>Bill Gates</td> </tr> <tr> <th>Telefon:</th> <td>555 77 854</td> </tr> <tr> <th>Telefon:</th> <td>555 77 855</td> </tr> </table> </body> </html> Exemplul 5 Ilustrează folosirea caracterului " " pentru celulele care nu au conţinut. <html> <body> <table border="1"> <tr> <td>Un text</td> <td>Alt text</td> </tr> <tr> <td></td> <td>Alt text</td> </tr> </table> <p> O celula vida din tabel nu are bordura chiar daca inserati in celula un spatiu. </p> <p> Solutia este sa inserati in celula un caracter non-breaking space. </p>

48

<p>Caracterul non-breaking space incepe cu un ampersand ("&"), Apoi literele "nbsp", si se termina cu pnct si virgula (";") </p> <p> </p> </body> </html> Exemplul 6 Ilustrează utilizarea unui tabel care are titlu (caption). <html> <body> <h4> Acest tabel are titlu si o bordura groasa </h4> <table border="6"> <caption>Titlul meu</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Exemplul 7 Ilustrează cum se definesc celulele care se întind (span) pe mai multe linii sau mai multe coloane. <html> <body>

49

<h4>O celula care se intinde pe doua coloane:</h4> <table border="1"> <tr> <th>Nume</th> <th colspan="2">Telefon</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>O celula care se intinde pe doua linii:</h4> <table border="1"> <tr> <th>Nume:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telefon:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> Exemplul 8 Ilustrează cum se pot defini alte elemente în interiorul unor tabele. <html> <body> <table border="1"> <tr> <td> <p>Un paragraf</p> <p>Alt paragraf</p> </td> <td>Aceasta celula contine un tabel:

50

<table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Aceasta celula contine o lista <ul> <li>mere</li> <li>banane</li> <li>ananas</li> </ul> </td> <td>Buna Ziua</td> </tr> </table> </body> </html> Exemplul 9 Ilustrează folosirea atributului cellpadding pentru a crea mai mult spaţiu între conţinutul celulei şi chenarul ei. <html> <body> <h4>Fara cellpadding:</h4> <table border="1"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr>

51

</table> <h4>Cu cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> </body> </html> Exemplul 10 Ilustrează utilizarea atributului cellspacing pentru a creşte spaţiul dintre celulele tabelului. <html> <body> <h4>Tabel fara atributul cellspacing:</h4> <table border="1"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>Prima</td> <td>Linie</td> </tr>

52

<tr> <td>A doua</td> <td>Linie</td> </tr> </table> </body> </html> Exemplul 11 Ilustrează cum se adaugă un fundal (background) unui tabel. <html> <body> <h4>Un fundal colorat:</h4> <table border="1" bgcolor="red"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>O imagine de fundal:</h4> <table border="1" background="hills.jpg"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> </body> </html>

53

Exemplul 12 Ilustrează cum se adaugă un fundal uneia sau mai multor celule din tabel. <html> <body> <h4>Fundaluri pentru o celula:</h4> <table border="1"> <tr> <td bgcolor="red">Prima</td> <td>Linie</td> </tr> <tr> <td background="background.jpg">A doua</td> <td>Linie</td> </tr> </table> </body> </html> Exemplul 13 Ilustrează utilizarea atributului "align" pentru a alinia conţinutul celulelor tabelului. <html> <body> <table width="400" border="1"> <tr> <th align="left">Bani cheltuiti in....</th> <th align="right">Ianuarie</th> <th align="right">Februarie</th> </tr> <tr> <td align="left">Haine</td> <td align="right">241.10 RON</td> <td align="right">50.20 RON</td> </tr> <tr> <td align="left">Cosmetice</td> <td align="right">30.00 RON</td> <td align="right">44.45 RON</td> </tr> <tr>

54

<td align="left">Mancare</td> <td align="right">730.40 RON</td> <td align="right">650.00 RON</td> </tr> <tr> <th align="left">Total</th> <th align="right">1001.50 RON</th> <th align="right">744.65 RON</th> </tr> </table> </body> </html> Exemplul 14 Ilustrează utilizarea atributului "frame" pentru a controla chenarul exterior al tabelului. <html> <body> <h4>Tabel cu atributul frame="border":</h4> <table frame="border"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul frame="box":</h4> <table frame="box"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table>

55

<h4>Tabel cu atributul frame="void":</h4> <table frame="void"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul ="above":</h4> <table frame="above"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul frame="below":</h4> <table frame="below"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul frame="hsides":</h4> <table frame="hsides"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr>

56

<td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul frame="vsides":</h4> <table frame="vsides"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul frame="lhs":</h4> <table frame="lhs"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> <h4>Tabel cu atributul frame="rhs":</h4> <table frame="rhs"> <tr> <td>Prima</td> <td>Linie</td> </tr> <tr> <td>A doua</td> <td>Linie</td> </tr> </table> </body> </html>

57

Exemplul 15 Ilustrează cum se folosesc atributele "frame" şi "border" pentru a controla chenarul exterior al tabelului. <html> <body> <table frame="hsides" border="3"> <tr> <td>Prima linie</td> </tr> </table> <br /> <table frame="vsides" border="3"> <tr> <td>Prima linie</td> </tr> </table> </body> </html>

13. Liste HTML acceptă liste neordonate, liste ordonate şi liste de definiţii.. Liste neordonate O listă neordonată este o listă de itemi marcaţi cu simboluri (cercuri, pătrate, puncte). O listă neordonată începe cu tagul <ul>. Fiecare item din listă începe cu tagul <li>. Exemplu: <ul> <li>Cafea</li> <li>Lapte</li> </ul> Browserul afişează lista de mai sus astfel:

Cafea Lapte

Liste ordonate O listă ordonată este o listă de itemi marcaţi cu numere sau litere.

58

O listă ordonată începe cu tagul <ol>. Fiecare item din listă începe cu tagul <li>. Exemplu: <ol> <li>Cafea</li> <li>Lapte</li> </ol> Browserul afişează 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 definiţii O listă de definiţii este o listă de termeni împreună cu descrierea lor. O listă de definiţii începe cu tagul <dl> (definition list). Fiecare termen din listă începe cu tagul <dt> (definition term). Fiecare descriere începe cu tagul <dd> (definition description). Exemplu: <dl> <dt>Cafea</dt> <dd>Bautura neagra fierbinte</dd> <dt>Lapte</dt> <dd>Bautura alba rece</dd> </dl> Browserul afişează lista de mai sus astfel: Cafea

Bautura neagra fierbinte Lapte

Bautura alba rece În tagul <dd> pot apare paragrafe, întreruperi de linie (line break), imagini, linkuri, alte liste, etc. Exemple Exemplul 1 Ilustrează utilizarea diferitelor tipuri de liste ordonate. <html> <body> <h4>Lista numerotată cu cifre (implicit):</h4> <ol>

59

<li>Mere</li> <li>Banane</li> <li>Lamai</li> <li>Portocale</li> </ol> <h4>Lista numerotata cu litere mari:</h4> <ol type="A"> <li>Apa</li> <li>Ceai</li> <li>Cafea</li> <li>Suc</li> </ol> <h4>Lista numerotata cu litere mici:</h4> <ol type="a"> <li>Blues</li> <li>Rock-and-roll</li> <li>Rap</li> <li>Jazz</li> </ol> <h4>Lista numerotata cu cifre romane mari:</h4> <ol type="I"> <li>Caiete</li> <li>Carti</li> <li>Creioane</li> <li>Stilouri</li> </ol> <h4>Lista numerotata cu cifre romane mici:</h4> <ol type="i"> <li>Copii</li> <li>Adolescenti</li> <li>Adulti</li> <li>Batrani</li> </ol> </body> </html> Exemplul 2 Ilustrează utilizarea diferitelor tipuri de liste neordonate. <html> <body>

60

<h4>Itemi marcati cu cercuri pline (implicit):</h4> <ul type="disc"> <li>Mere</li> <li>Banane</li> <li>Lamai</li> <li>Portocale</li> </ul> <h4>Itemi marcaţi cu cercuri goale:</h4> <ul type="circle"> <li>Apa</li> <li>Lapte</li> <li>Ceai</li> <li>Cafea</li> </ul> <h4>Itemi marcati cu patrate:</h4> <ul type="square"> <li>Carti</li> <li>Caiete</li> <li>Creioane</li> <li>Pixuri</li> </ul> </body> </html> Exemplul 3 Ilustrează cum pot fi create liste imbricate (nested lists). <html> <body> <h4>O lista imbricata:</h4> <ul> <li>Cafea</li> <li>Ceai <ul> <li>Ceai negru</li> <li>Ceai verde</li> </ul> </li> <li>Lapte</li> </ul>

61

</body> </html> Exemplul 4 Un alt exemplu de listă imbricată. <html> <body> <h4>O listă imbricata:</h4> <ul> <li>Cafea</li> <li>Ceai <ul> <li>Ceai negru</li> <li>Ceai verde <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Lapte</li> </ul> </body> </html> Exemplul 5 Ilustrează utilizarea unei liste de definiţii. <html> <body> <h4>O lista de definitii:</h4> <dl> <dt>Cafea</dt> <dd>Bautura fierbinte de culoare neagra</dd> <dt>Lapte</dt> <dd>Bautura rece de culoare alba</dd> </dl> </body>

62

</html>

14. Formulare Formularele HTML sunt utilizate pentru a selecta diferitele tipuri de informaţii introduse de utilizator. Un formular este o zonă care conţine elemente de formular. Elementele unui formular (câmpuri de text, meniuri drop-down, butoane radio, căsuţe de validare, etc.) permit utilizatorului să introducă informaţii în formular. Un formular este definit cu tagul <form> conform sintaxei: <form> . elemente de intrare . </form> Tagul input Cel mai utilizat tag de formulare este tagul <input>. Tipul intrării este specificat prin atributul type. Cele mai folosite tipuri de input sunt prezentate în continuare. Câmpuri de text (text fields) Câmpurile de text sunt folosite atunci când vrem ca utilizatorul să introducă în formular litere, numere, etc. Exemplu: <form> Nume: <input type="text" name="nume" /> <br /> Prenume: <input type="text" name="prenume" /> </form> În browser formularul arată astfel:

Nume:

Prenume: Observaţi că formularul propriu-zis nu este vizibil. În majoritatea browserelor, lungimea unui câmp de text este implicit setată la 20 de caractere.

63

Butoane radio Butoanele radio se folosesc când dorim ca utilizatorul să selecteze o singură opţiune dintr-o listă posibilă. Exemplu: <form> <input type="radio" name="sex" value="barbat"/>Masculin <br /> <input type="radio" name="sex" value="femeie"/>Feminin </form> În browser formularul arată astfel:

Masculin

Feminin Observaţi că numai o opţiune poate fi selectată la un moment dat. Căsuţe de validare Căsuţele de validare se folosesc atunci când utilizatorul poate să selecteze una sau mai multe opţiuni dintr-o listă posibilă. Exemplu: <form> Am pisica: <input type="checkbox" name="pet" value="Pisica" /> <br /> Am caine: <input type="checkbox" name="pet" value="Caine" /> <br /> Am papagal: <input type="checkbox" name="pet" value="Papagal" /> </form> În browser formularul arată astfel:

Am pisica:

Am caine:

Am papagal: Atributul action şi butonul submit

64

Când utilizatorul apasă butonul "Submit", conţinutul formularului este trimis către server. Atributul action al tagului form defineşte numele fişierului în care se trimite conţinutul formularului. Informaţiile din acest fişier sunt uzual prelucrate cu scripturi. Exemplu: <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> În browser formularul arată astfel:

Username: Submit

Dacă tastaţi nişte caractere în câmpul de text de mai sus şi apăsaţi butonul "Submit", browserul va trimite informaţia tastată unei pagini numite "html_form_submit.asp". Pagina vă va arăta informaţia primită. Taguri pentru formulare Tag Descriere <form> Defineşte un formular pentru informaţiile introduse de utilizator <input> Defineşte un câmp de intrare <textarea> Defineşte o zonă de text multi-linie <label> Defineşte eticheta unui control <fieldset> Defineşte un set de câmpuri <legend> Defineşte denumirea unui set de câmpuri (fieldset) <select> Defineşte o listă selectabilă (o listă drop-down ) <optgroup> Defineşte un grup de opţiuni <option> Defineşte o opţiune dintr-o listă drop-down <button> Defineşte un buton ce poate fi apăsat Exemple Exemplul 1 Ilustrează cum pot fi create câmpuri de text într-o pagină HTM. <html> <body>

65

<form action=""> Prenumele: <input type="text" name="prenume"> <br> Numele: <input type="text" name="nume"> </form> </body> </html> Exemplul 2 Ilustrează cum pot fi create câmpuri pentru parole. <html> <body> <form action=""> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form> <p> Cand tastati caractere intr-un camp de parola, browserul afiseaza astericsuri in locul caracterelor. </p> </body> </html> Exemplul 3 Ilustrează cum pot fi create căsuţe de validare pe care utilizatorul le poate selecta sau deselecta. <html> <body> <form action=""> Am pisica: <input type="checkbox" name="pet" value="Pisica"> <br /> Am caine: <input type="checkbox" name="pet" value="Caine">

66

<br /> Am papagal: <input type="checkbox" name="pet" value="Papagal"> </form> </body> </html> Exemplul 4 Ilustrează cum se creează butoane radio într-o pagină HTML. <html> <body> <form action=""> Masculin: <input type="radio" checked="checked" name="Sex" value="barbat"> <br> Feminin: <input type="radio" name="Sex" value="femeie"> </form> <p> Butonul Masculin este preselectat. Un singur buton radio din lista poate fi selectat la un moment dat. </p> </body> </html> Exemplul 5 Ilustrează cum se poate crea o listă drop-down simplă (o listă selectabilă). <html> <body> <form action=""> <select name="masini"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

67

</form> </body> </html> Exemplul 6 Ilustrează cum se poate crea o listă drop-down simplă (o listă selectabilă) cu o opţiune preselectată. <html> <body> <form action=""> <select name="masini"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> Exemplul 7 Ilustrează cum se poate crea o zonă de text multi-linie (text area) în care user-ul poate scrie un număr nelimitat de caractere. <html> <body> <textarea rows="10" cols="30"> Pisica se joaca in gradina. </textarea> </body> </html> Exemplul 8 Ilustrează cum se creează un buton într-o pagină HTML. <html> <body> <form action=""> <input type="button" value="Apasati!"> </form>

68

</body> </html> Exemplul 9 Ilustrează cum se poate desena o bordură cu un titlul în jurul unui grup de elemente folosind tagul fieldset. <html> <body> <fieldset> <legend> Informatii despre sanatate: </legend> <form action=""> Inaltime <input type="text" size="3"> Greutate <input type="text" size="3"> </form> </fieldset> </body> </html> Exemplul 10 Ilustrează cum se adaugă două câmpuri de text şi un buton de submit pe o pagină HTML. <html> <body> <form name="input" action="html_form_action.asp" method="get"> Introduceti prenumele: <input type="text" name="prenume" size="20"> <br> Introduceti numele: <input type="text" name="nume" size="20"> <br> <input type="submit" value="Trimite"> </form> <p>

69

Daca apasati butonul „Trimite", veti trimite informaţia catre o pagina numita html_form_action.asp. </p> </body> </html> Exemplul 11 Acest formular conţine trei căsuţe de validare şi un buton de trimitere (submit). <html> <body> <form name="input" action="html_form_action.asp" method="get"> Am pisica: <input type="checkbox" name="pet" value="Pisica" checked="checked" /> <br /> Am caine: <input type="checkbox" name="pet" value="Caine" /> <br /> Am papagal: <input type="checkbox" name="pet" value="Papagal" /> <br /><br /> <input type="submit" value="Trimite" /> </form> <p> Daca apasati butonul"Trimite", informaţia va fi trimisa catre pagina html_form_action.asp. </p> </body> </html> Exemplul 12 Acest formular conţine două butoane radio şi un buton de trimitere (submit). <html> <body> <form name="input" action="html_form_action.asp" method="get"> Masculin:

70

<input type="radio" name="Sex" value="Masculin" checked="checked"> <br> Feminin: <input type="radio" name="Sex" value="Feminin"> <br> <input type ="submit" value ="Trimite"> </form> <p> Daca apasati butonul "Trimite", Informatia va fi trimisa catre pagina html_form_action.asp. </p> </body> </html> Exemplul 13 Ilustrează cum se trimite un e-mail dintr-un formular. <html> <body> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> <h3>Acest formular trimite un e-mail catre GMAIL.</h3> Nume:<br> <input type="text" name="nume" value="numele tau" size="20"> <br> E-mail:<br> <input type="text" name="mail" value="emailul tau" size="20"> <br> Comentariu:<br> <input type="text" name="comentariu" value="comentariul tau" size="40"> <br><br> <input type="submit" value="Trimite"> <input type="reset" value="Anuleaza"> </form> </body>

71

</html>

15. Culori Valorile culorilor Culorile HTML sunt definite utilizând notaţia hexazecimală (hex) pentru combinarea valorilor culorilor de bază Red, Green, şi Blue (RGB – roşu, verde, albastru). Fiecare culoare de bază este reprezentată prin două cifre hexazecimale având 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: <html> <body> <p style="background-color:#FFFF00"> Culoare setata folosind valoarea hexazecimala </p> <p style="background-color:rgb(255,255,0)"> Culoare setata utilizand valoarea rgb </p> <p style="background-color:yellow">

72

Culoare setata folosind numele culorii </p> </body> </html> 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ă afişeze cel puţin 6384 de culori diferite. Aproape 150 de nume de culori sunt recunoscute de majoritatea browserelor. Consorţiul 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ă doriţi să folosiţi alte culori, va trebui să specificaţi valoarea lor hexazecimală. Acum câţiva ani, când calculatoarele recunoşteau maxim 255 de culori diferite, a fost stabilită o listă de 216 culori „sigure pentru web” care sunt afişate 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ă doriţi documente HTML sau CSS valide, folosiţi în loc de numele culorii valoarea ei hexazecimală.

16. Aspectul unei pagini web (layout) Pretutindeni pe web veţi găsi pagini formatate ca paginile de ziar utilizând coloanele HTML. Layout cu tabele O practică uzuală este folosirea tabelelor (table) pentru a stabili aspectul unei pagini HTML.

Această porţiune de pagină este organizată în două coloane, ca o pagină de ziar.

Aşa cum puteţi observa, există coloana stângă şi coloana dreaptă.

Un tabel HTML (<table>) este utilizat pentru a împărţi această porţiune de pagină în două coloane.

Secretul este să folosiţi tabele fără chenar (border) şi poate ceva mai multă spaţiere (cell-padding).

Oricât de mult text aţi adăuga în această porţiune de pagină, el va rămâne în interiorul celor două

77

Acest text este afişat în coloana din stânga.

coloane.

Exemplu <html> <body> <table border="0" width="100%" cellpadding="10"> <tr> <td width="50%" valign="top"> Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. </td> <td width="50%" valign="top"> Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. Alt text. </td> </tr> </table> </body> </html>

17. Cadre (frames) Cu ajutorul cadrelor puteţi afişa mai multe documente HTML în aceeaşi fereastră de browser. Fiecare document HTML este numit cadru (frame) şi este independent de celelalte documente deschise în fereastră. Dezavantajele utilizării cadrelor:

Programatorul paginii trebuie să ţină evidenţa mai multor documente HTML

Este dificil de listat întreaga pagină Tagul frameset

Tagul <frameset> defineşte cum este împărţită fereastra în cadre Fiecare frameset defineşte un set de linii sau un set de coloane Valoarea liniilor/coloanelor reprezintă porţiunea de ecran pe care o va

ocupa fiecare linie/coloană.

78

Tagul frame

Tagul <frame> defineşte ce document HTML va fi afişat în fiecare cadru

În exemplul următor este definit un frameset cu două coloane. Prima coloană este setată la 25% din lăţimea ferestrei, iar a doua coloană la 75% din lăţimea ferestre. Documentul "frame_a.htm" va fi deschis în prima coloană, iar "frame_b.htm" în a doua coloană: <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> Obs: Dimensiunea unei coloane din frameset poate fi dată în pixeli (cols="200,500"), şi una dintre coloane poate fi setată la spaţiul rămas (cols="25%,*"). Dacă un cadru are borduri vizibile, utilizatorul poate redimensiona cadrul trăgând cu mouse-ul de acestea. Pentru a împiedica acest lucru, puteţi adăuga atributul noresize="noresize" în tagul <frame>. Pentru browserele care nu recunosc cadrele, adăugaţi tagul <noframes>. Taguri pentru cadre Tag Descriere <frameset> Defineşte un set de cadre <frame> Defineşte un cadru

<noframes> Defineşte o secţiune fără cadre pentru browserele care nu recunosc cadrele

<iframe> Defineşte un cadru inline Exemple Exemplul 1 Ilustrează proiectarea unui frameset vertical cu trei documente diferite. <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm">

79

<frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html> Exemplul 2 Ilustrează proiectarea unui frameset orizontal cu trei documente. <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html> Exemplul 3 Ilustrează utilizarea tagului <noframes> pentru browserele care nu recunosc cadrele. <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <noframes> <body>Browserul dvs. nu recunoaste cadrele!</body> </noframes> </frameset> </html> Exemplul 4 Ilustrează proiectarea unui frameset cu trei documente şi cum se combină liniile şi coloanele.

80

<html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset> </html> Exemplul 5 Ilustrează utilizarea atributului noresize astfel încât utilizatorul să nu poată redimensiona cadrele. <html> <frameset rows="50%,50%"> <frame noresize="noresize" src="frame_a.htm"> <frameset cols="25%,75%"> <frame noresize="noresize" src="frame_b.htm"> <frame noresize="noresize" src="frame_c.htm"> </frameset> </frameset> </html> Exemplul 6 Ilustrează cum se proiectează un cadru de navigare. Cadrul de navigare conţine o listă de linkuri care au al doilea cadru drept target. Fişierul numit "nav_frame.htm" conţine trei link-uri care au următorul cod sursă: <a href ="frame_a.htm" target ="showframe">Cadrul a</a><br> <a href ="frame_b.htm" target ="showframe">Cadrul b</a><br> <a href ="frame_c.htm" target ="showframe">Cadrul

81

c</a> Al doilea cadru va afişa documentul corespunzător link-ului activ. <html> <frameset cols="120,*"> <frame src="nav_frame.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html> Exemplul 7 Ilustrează cum se creează un cadru inline (un cadru în interiorul unei pagini HTML). <html> <body> <iframe src="mypage.htm"></iframe> <p>Unele browsere nu recunosc cadrele inline.</p> <p>In acest caz, iframe-ul nu este vizibil.</p> </body> </html> Exemplul 8 Acest exemplu conţine două cadre. Unul din cadre se deschide la o anumită secţiune dintr-un fişier specificată prin <a name="C10"> în pagina "link.htm". <html> <frameset cols="20%,80%"> <frame src="frame_a.htm"> <frame src="link.htm#C10"> </frameset> </html

82

Exemplul 9 Acest exemplu conţine două cadre. Cadrul de navigare (content.htm) din stânga ferestrei conţine o listă de linkuri care au drept target al doilea cadru (link.htm). Al doilea cadru afişează documentul selectat. Unul din linkurile din cadrul de navigare este către o anumită secţiune din fişierul destinaţie. Codul din fişierul "content.htm" arată astfel: <a href ="link.htm" target ="showframe">Link fara ancora</a><br> <a href ="link.htm#C10" target ="showframe">Link cu ancora</a>. Codul HTML al paginii care conţine cele două cadre este: <html> <frameset cols="180,*"> <frame src="content.htm"> <frame src="link.htm" name="showframe"> </frameset> </html>

18. Fonturi Tagul <font> din HTML este depăşit şi va fi înlăturat în viitoarele versiuni. Deşi este încă folosit frecvent, ar trebui să-l evitaţi şi să folosiţi în locul lui stiluri. Codul HTML următor precizează dimensiune şi tipul fontului pentru textul afişat de browser : <p> <font size="2" face="Verdana"> Acesta este un paragraf.</font> </p> <p> <font size="3" face="Times"> Acesta este un alt paragraf. </font> </p> Atribute pentru font

83

Atribut Exemplu Descriere

size="number" size="2" Defineşte dimensiunea fontului

size="+number" size="+1" Măreşte cu 1 dimensiunea fontului

size="-number" size="-1" Micşorează cu 1 dimensiunea fontului

face="face-name" face="Times" Defineşte numele fontului color="color-value" color="#eeff00" Defineşte culoarea fontului

color="color-name" color="red" Defineşte culoarea fontului

Tagul <font> nu ar trebui folosit Tagul <font> este depăşit în ultimele versiuni HTML (HTML 4 şi XHTML). Consorţiul World Wide Web (W3C) a înlăturat tagul <font> din recomandări. În viitoarele versiuni HTML, vor fi folosite foile de stiluri (CSS) pentru a defini aspectul şi a afişa proprietăţile unui element HTML. Modul corect este să utilizaţi stilurile. Exemplul 1 Ilustrează cum se stabileşte fontul unui text. <html> <body> <h1 style="font-family:verdana">Un titlu</h1> <p style="font-family:courier">Un paragraf</p> </body> </html> Exemplul 2 Ilustrează cum se stabileşte dimensiunea fontului unui text. <html> <body> <h1 style="font-size:150%">Un titlu</h1> <p style="font-size:80%">Un paragraf</p> </body> </html> Exemplul 3 Ilustrează cum se stabileşte culoarea unui text. <html>

84

<body> <h1 style="color:blue">Un titlu</h1> <p style="color:red">Un paragraf</p> </body> </html> Exemplul 4 Ilustrează cum se stabileşte fontul, dimensiunea şi culoarea unui text. <html> <body> <p style="font-family:verdana;font-size:80%;color:green"> Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. </p> </body> </html>

19. De ce HTML 4.0? Limbajul HTML original nu a fost conceput să conţină taguri pentru formatarea documentului. Tagurile au fost concepute să definească conţinutul unui document, ca în exemplul următor: <p>Acesta este un paragraf</p> <h1>Acesta este un titlu</h1> Când taguri ca <font> şi atributele de culoare au fost adăugate în versiunea HTML 3.2, a început coşmarul pentru proiectanţii web. Proiectarea unor site-uri web mari în care informaţiile despre font şi culoare trebuiau adăugate pe fiecare pagină web, a devenit o activitate costisitoare şi plictisitoare. În HTML 4.0 toate formatările sunt înlăturate din document şi memorate într-o foaie separată de stiluri. Deoarece HTML 4.0 separă prezentarea de structura documentului, obţinem controlul complet al aspectului documentului fără a interfera în mod nefericit cu conţinutul acestuia.

20. Stiluri în HTML 4.0 Exemple Exemplul 1

85

Ilustrează cum se formatează un document HTML cu ajutorul informaţiilor de stil adăugate în secţiunea <head>. <html> <head> <style type="text/css"> h1 {color: red} h3 {color: blue} </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h3>Acesta este un titlu 3</h3> </body> </html> Exemplul 2 Ilustrează crearea unui link nesubliniat folosind atributul style. <html> <body> <a href="last.htm" style="text-decoration:none"> Este un LINK! </a> </body> </html> Exemplul 3 Ilustrează cum se foloseşte tagul <link> pentru a accesa o foaie externă de stiluri. <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" > </head> <body> <h1>Text formatat cu o foaie externa de stiluri</h1>

86

<p>La fel!</p> </body> </html>

Cum folosim stilurile Când browserul citeşte o foaie de stiluri, va formata documentul conform precizărilor din foaie. Sunt trei modalităţi de a insera o foaie de stiluri într-un document HTML: Foaie de stiluri externă Este ideală când stilul respectiv trebuie aplicat mai multor pagini. Cu o foaie de stil externă, puteţi modifica conţinutul întregului site web modificând un singur fişier. Fiecare pagină din site trebuie să se lege la foaia de stiluri cu tagul <link> plasat în secţiunea head ca în exemplul următor: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

Foaie de stiluri internă Se foloseşte când un singur document are un anumit stil. Stilul intern respectiv se defineşte în secţiunea head cu ajutorul tagului <style> ca în exemplul următor: <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

Stiluri inline Stilul inline se foloseşte când 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 conţine orice proprietăţi CSS. Exemplul următor ilustrează cum se schimbă culoarea şi marginea stângă pentru un paragraf: <p style="color: red; margin-left: 20px"> Acesta este un paragraf. </p>

87

Taguri pentru stil Tag Descriere <style> Defineşte un stil <link> Defineşte referinţa la o resursă <div> Defineşte o secţiune din document <span> Defineşte o secţiune din document

21. Entităţile de tip caracter Unele caractere sunt rezervate în HTML. Spre exemplu, nu puteţi folosi simbolurile mai mic şi mai mare deoarece fac parte din sintaxa unui tag şi browserul le poate interpreta eronat. Dacă doriţi ca browserul să afişeze corect aceste caractere trebuie să inseraţi simbolurile corespunzătoare în codul HTML. O entitate de tip caracter (simbol) are următoarea sintaxă: &entity_name; sau &#entity_code; Pentru a afişa semnul mai mic trebuie să scrieţi: < sau < Deşi denumirile simbolurilor sunt mai uşor de reţinut, nu toate browserele recunosc denumirile entităţilor ci codul asociat entităţii.. Non-breaking Space Cel mai utilizat simbol din HTML este non-breaking space (spaţiu neîntrerupt). În mod normal HTML va trunchia spaţiile din textul paginii, reducând spaţiile succesive la unul singur. Pentru a adăuga mai multe spaţii în pagină, folosiţi simbolul . Exemplu <html> <body> <p>Entitati de tip caracter</p> <p>&</p> <p>©</p> </body> </html>

Simboluri uzuale Obs. Denumirile simbolurilor sunt case-sensitive!

88

Caracter Descriere Nume Cod non-breaking space < mai mic decât < < > mai mare decât > > & ampersand & & ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € § section § § © copyright © © ® marcă înregistrată ® ® Codurile pentru diacriticele din limba română sunt: valoare cod ă ă Ă Ă â â Â Â î î Î Î ş ş Ş Ş ţ ţ Ţ Ţ

22. Elementul head Elementul head conţine informaţii generale despre document, numite şi meta-informaţii. Meta înseamnă „informaţii despre”. Informaţiile din elementul head Informaţiile din interiorul elementului head nu ar trebui afişate de către browser.

89

Conform standardului HTML, numai câteva taguri sunt permise în elementul head şi anume:<base>, <link>, <meta>, <title>, <style> şi <script>. Evitaţi să inseraţi în elementul head alte taguri în afara celor de mai sus. Taguri permise în elementul head Tag Descriere <head> Defineşte informaţii despre document <title> Defineşte titlul documentului <base> Defineşte un URL de bază pentru toate linkurile din pagină <link> Defineşte referinţa unei resurse <meta> Defineşte meta informaţii Exemple Exemplul 1 Informaţia title din elementul head nu este afişată în fereastra browserului. <html> <head> <title>Acest titlu nu este afisat</title> </head> <body> <p>Acest text este afisat.</p> </body> </html> Exemplul 2 Ilustrează cu se foloseşte tagul base astfel încât toate linkurile din pagină să se deschidă într-o fereastră nouă. <html> <head> <base target="_blank"> </head> <body> <p> <a href="http://www.yahoo.com" target="_blank">Acest link</a>

90

se va deschide intr-o fereastra noua pentru ca atributul target este "_blank". </p> <p> <a href="http://www.gmail.com"> Acest link</a> se va deschide tot intr-o fereastra noua desi nu are atributul target. </p> </body> </html>

23. Elementul meta Aşa cum am văzut în capitolul anterior, elementul head conţine informaţii generale (meta informaţii) despre document. Cel mai adesea, elementul meta furnizează informaţii relevante pentru browsere sau motoarele de căutare, cum ar fi descrierea conţinutului documentului. Cuvinte cheie pentru motoarele de căutare Unele motoare de căutare folosesc numele şi atributele de conţinut din tagul meta pentru a indexa paginile dumneavoastră. Spre exemplu, elementul meta următor poate oferi o descriere a paginii: <meta name="description" content="Tutoriale pentru HTML si CSS"/> Acest element meta defineşte cuvintele cheie pentru pagină: <meta name="keywords" content="HTML, CSS, JavaScript"/> Scopul atributelor name şi content este să descrie conţinutul paginii. Totuşi, pentru că unii webmasteri utilizează tagurile meta pentru spam, spre exemplu repetarea cuvintelor cheie pentru a obţine o poziţie mai bună la indexare, unele motoare de căutare nu mai folosesc în întregime cuvintele cheie din meta.

91

Exemple Exemplul 1 Informaţiile din elementul meta descriu documentul. <html> <head> <meta name="author" content="Cosmin Petrescu"> <meta name="revised" content="Cosmin Petrescu,9/07/09"> <meta name="generator" content="Microsoft FrontPage 4.0"> </head> <body> <p> Atributele meta din acest document identifica autorul si editorul utilizat pentru crearea paginii. </p> </body> </html> Exemplul 2 Informaţiile din elementul meta descriu cuvintele cheie. <html> <head> <meta name="description" content="Exemple HTML"> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> </head>

92

<body> <p> Atributele meta din acest document descriu documentul si cuvintele cheie. </p> </body> </html> Exemplul 3 Ilustrează cum se redirectează un user dacă adresa site-ului s-a schimbat. <html> <head> <meta http-equiv="Refresh" content="5;url=http://www.mysite.com"> </head> <body> <p> Scuze! Ne-am mutat! Noul URL este: <a href="http://www.mysite.com">http://www.mysite.com</a> </p> <p> Veţi fi redirectat catre noua adresa in cinci secunde. </p> <p> Daca vedeti acest mesaj pentru mai mult de 5 secunde, va rog apasati linkul de mai sus! </p> </body> </html>

24. URL Linkuri HTML

93

Când apăsaţi un link dintr-un document HTML, tagul <a> indică către o adresă web cu o valoare a atributului href ca aceasta: <a href="mypage.htm">O pagina</a>. Plecând 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ă următoarele reguli de sintaxă: schema://host.domain:port/path/filename schema defineşte tipul de serviciu de Internet. Tipul cel mai comun este http. domain defineşte numele domeniului Internet yahoo.com. Construcţia host defineşte domeniul gazdă. Dacă este omis, gazda implicită pentru http este www. Construcţia :port defineşte numărul de port pentru gazdă şi este în mod normal omis. Portul implicit pentru http este 80. Construcţia path defineşte o cale (un subdirector) de pe server. Dacă calea este omisă, resursa (documentul) trebuie să se găsească în directorul rădăcină al site-ului web. Construcţia filename defineşte numele documentului. Numele implicit poate fi default.asp, sau index.html sau altceva, în funcţie de setările serverului web. Scheme URL În tabelul următor puteţi găsi cele mai folosite scheme URL: Schema Ce accesează file un fişier de pe calculatorul local ftp un fişier de pe un server FTP http un fişier de pe un server World Wide Web gopher un fişier de pe un server Gopher news un grup de ştiri Usenet telnet o conexiune Telnet WAIS un fişier de pe un server WAIS Accesarea unui newsgroup Următorul cod HTML: <a href="news:alt.html">HTML Newsgroup</a> creează un link către un newsgroup ca acesta HTML Newsgroup.

94

Descărcarea cu FTP Următorul cod HTML: <a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a> Creează un link pentru a descărca un fişier, ca acesta: Download WinZip. (Linkul nu funcţionează dacă sursa nu posedă un director ftp.) Link către propriul e-mail Următorul cod HTML: <a href="mailto:[email protected]">[email protected]</a> creează un link către propriul e-mail ca acesta [email protected]

25. Scripturi Pentru a face paginile HTML mai dinamice şi mai interactive, puteţi adăuga scripturi. Inserarea unui script într-o pagină HTML În HTML un script este definit cu tagul <script>. Trebuie să utilizaţi atributul type pentru a specifica limbajul scriptului. Exemplu: <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> Acest script determină afişarea următorului mesaj: Hello World! Cum procedaţi cu browserele vechi Un browser care nu recunoaşte tagul <script>, va afişa conţinutul scriptului ca text pe pagină. Pentru a evita acest lucru, ar trebui să ascundeţi scriptul în taguri tip comentariu. Un browser care nu recunoaşte tagul <script> va ignora acest comentariu şi nu va mai afişa conţinutul tagului, în timp ce un

95

browser nou va înţelege că scriptul trebuie executat, chiar dacă este inclus în taguri de comentariu. Exemplu: <script type="text/javascript">  </script>

Tagul <noscript> Acest tag este utilizat pentru a defini un text alternativ dacă scriptul nu poate fi executat. Se foloseşte pentru browserele care recunosc tagul <script>, dar nu acceptă limbajul în care este scris. În această situaţie, browserele vor afişa textul din tagul <noscript>. Tagul va fi ignorat de browserele care pot executa scriptul. Exemplu: <script type="text/javascript">  </script> <noscript>Browserul dvs. nu poate executa JavaScript!</noscript> Taguri pentru scripturi Tag Descriere <script> Defineşte un script <noscript> Defineşte un text alternativ dacă scriptul nu poate fi executat <object> Defineşte un obiect (embedded) <param> Defineşte un set de parametri de execuţie pentru obiect Exemple Exemplul 1 Ilustrează cum inseraţi un script Java într-un document HTML. <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>")

96

</script> </body> </html> Exemplul 2 Ilustrează cum trebuie procedat cu browserele care nu recunosc scripturile. <html> <body> <script type="text/javascript">  </script> <noscript>Browserul nu accepta JavaScript!</noscript> <p> Un browser care nu accepta JavaScript va afisa textul din elementul noscript. </p> </body> </html>

26. Atribute eveniment Nou în HTML 4.0 este posibilitatea de a declanşa evenimente în browser, spre exemplu, executarea unui script Java când 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 când documentul se încarcă

onunload script Scriptul va fi executat când documentul nu se încarcă

Evenimente pentru formulare Pot apărea numai în elementele unui formular. Atribut Valoare Descriere onchange script Scriptul va fi executat când elementul se

modifică onsubmit script Scriptul va fi executat când formularul este

trimis (cu butonul submit) onreset script Scriptul va fi executat când formularul este

resetat (cu butonul reset) onselect script Scriptul va fi executat când elementul este

selectat onblur script Scriptul va fi executat când utilizatorul face

click în afara elementului onfocus script Scriptul va fi executat când 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 când este apăsată o tastă onkeypress script Scriptul va fi executat când o tastă este apăsată

şi eliberată onkeyup script Scriptul va fi executat când 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 când se face click cu

mouse-ul

98

ondblclick script Scriptul va fi executat când se face dublu click cu mouse-ul

onmousedown script Scriptul va fi executat când un buton de mouse este apăsat

onmousemove script Scriptul va fi executat când cursorul mouse-ului se mişcă

onmouseout script Scriptul va fi executat când cursorul mouse-ului părăseşte elementul

onmouseover script Scriptul va fi executat când cursorul mouse-ului se mişcă peste element

onmouseup script Scriptul va fi executat când butonul mouse-ului este eliberat

27. Calculatorul poate fi server WEB Dacă vreţi ca alţii să poată vedea paginile dvs. trebuie să le publicaţi pe web. Pentru a vă publica paginile, trebuie să le salvaţi pe un server web. Calculatorul dvs. poate funcţiona ca un server web dacă instalaţi 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 uşor de instalat şi este ideal pentru proiectarea şi testarea aplicaţiilor web. IIS include Active Server Pages (ASP), un standard de scripturi orientate pe server care poate fi utilizat pentru a crea aplicaţii web dinamice şi interactive. Cum instalaţi IIS în Windows Vista Parcurgeţi următorii paşi:

1. Deschideţi Control Panel din Start menu 2. Deschideţi cu dublu click Programs and Features 3. Click pe "Turn Windows features on or off" 4. Selectaţi căsuţa pentru Internet Information Services (IIS), şi click OK

După ce aţi instalat IIS, rulaţi Run Windows Update. Cum instalaţi IIS în Windows XP şi Windows 2000 Parcurgeţi următorii paşi:

1. În Start menu, click Settings şi selectaţi 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. Selectaţi căsuţa pentru World Wide Web Service, şi click OK 7. În secţiunea Windows Component , click Next pentru a instala IIS

După ce aţi instalat IIS, rulaţi Run Windows Update. Testaţi paginile web După ce aţi instalat IIS parcurgeţi următorii paşi:

1. Căutaţi în C: un folder nou numit Inetpub 2. Deschideţi folderul Inetpub şi căutaţi folderul wwwroot 3. Creaţi un nou folder, ca "MyWeb", în wwwroot 4. Scrieţi un cod ASP şi salvaţi-l ca "test1.asp" în folderul creat anterior 5. Deschideţi browserul şi tastaţi "http://localhost/MyWeb/test1.asp",

pentru a vedea pagina web pe care aţi creat-o.

II. XHTML

1. Ce este XHTML? Pentru a putea înţelege XHTML, trebuie să aveţi cunoştinţe 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 aplicaţie XML XHTML este o recomandare a consorţiului W3C Toate browserele recunosc XHTML

2. De ce XHTML? XHTML este o combinaţie î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 conţin cod HTML „rău”. Următorul cod va funcţiona corect într-un browser, chiar dacă nu respectă regulile HTML:

100

<html> <head> <title>Acesta este un cod HTML incorect</title> <body> <h1>Incorect HTML <p>Acesta este un paragraf </body> 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 informaţia, iar HTML este proiectat să afişeze informaţia. Astăzi, piaţa este formată din diferite tehnologii de browser, unele rulând pe calculatoare, altele pe telefoane mobile şi alte dispozitive de mic gabarit. Ultimele menţionate, nu au resursele sau puterea de a interpreta un limbaj de marcare „rău”. Combinând punctele tari din HTML şi XML, a rezultat XHTML, un limbaj de marcare util acum şi în viitor.

3. Diferenţe între XHTML şi HTML Cele mai importante diferenţe

Elementele XHTML trebuie imbricate corect Elementele XHTML trebuie întotdeauna închise Elementele XHTML trebuie scrise cu litere mici Documentele XHTML trebuie să aibă un element rădăcină

Elementele XHTML trebuie imbricate corect În HTML, unele elemente pot fi imbricate incorect, ca în exemplul următor: <b><i>Acest text este bold si italic.</b></i> În XHTML, toate elementele trebuie imbricate corect, ca în exemplul următor: <b><i>Acest text este bold si italic.</i></b> Obs: O greşeală comună la definirea listele imbricate este că se uită că elementele listei interioare trebuie să fie între tagurile <li> şi </li>. Acest cod este greşit: <ul> <li>Cafea</li> <li>Ceai <ul> <li>Ceai negru</li> <li>Ceai verde</li> </ul>

101

<li>Lapte</li> </ul> Codul corect este: <ul> <li>Cafea</li> <li>Ceai <ul> <li>Ceai negru</li> <li>Ceai verde</li> </ul> </li> <li>Lapte</li> </ul> Elementele XHTML trebuie închise întotdeauna Elementele care nu sunt vide trebuie să aibă un tag de închidere. Acest cod este greşit: <p>Acesta este un paragraf <p>Acesta este alt paragraf Modul corect de scriere este: <p>Acesta este un paragraf</p> <p>Acesta este alt paragraf</p> Elementele vide trebuie de asemenea închise. Acest cod este greşit: O intrerupere de linie: <br> O linie orizontala: <hr> O imagine: <img src="happy.gif" alt="Happy face"> Modul corect de scriere este: O intrerupere de linie: <br /> O linie orizontala: <hr /> O imagine: <img src="happy.gif" alt="Happy face" /> Elementele XHTML trebuie scrise cu litere mici Tagurile şi atributele trebuie scrise cu litere mici. Acest cod este greşit: <BODY> <P>Acesta este un paragraf</P>

102

</BODY> Modul corect de scriere este: <body> <p>Acesta este un paragraf</p> </body> Documentele XHTML trebuie să aibă un element rădăcină Toate elementele XHTML trebuie să fie incluse în elementul rădăcină <html>. Elementele descendente (descendenţii) trebuie să fie în perechi şi incluse corect în elementul părinte. Structura de bază a unui document este: <html> <head> ... </head> <body> ... </body> </html>

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 înlocuieşte numele atributului Declaraţia DOCTYPE este obligatorie

Numele atributele trebuie scrise cu litere mici Acest cod este greşit: <table WIDTH="100%"> Modul corect de scriere este: <table width="100%"> Valorile atributelor trebuie scrise între ghilimele Acest cod este greşit: <table width=100%> Modul corect de scriere este: <table width="100%">

103

Minimizarea atributelor este interzisă Acest cod este greşit: <input checked> <input readonly> <input disabled> <option selected> <frame noresize> Modul corect de scriere este: <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" /> 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 fiecărui element XHTML. El specifică limba în care este scris conţinutul unui element. Dacă utilizaţi atributul lang într-un element, trebuie să adăugaţi şi atributul xml:lang, ca în exemplul următor: <div lang="it" xml:lang="it">Ciao bella!</div> Elemente XHTML obligatorii

104

Toate documentele XHTML trebuie să aibă o declaraţie DOCTYPE. Elementele html, head, title, şi body nu pot lipsi. Un exemplu de document XHTML cu numărul minim de taguri obligatorii: <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Aici este titlul</title> </head> <body> </body> </html> Obs: Declaraţia DOCTYPE nu face parte din documentul XHTML propriu-zis. Nu este un element XHTML. Obs: Atributul xmlns din <html>, specifică spaţiul de nume xml pentru un document şi este necesar în documentele XHTML. Totuşi, validatorul HTML de la w3.org ignoră absenţa atributului xmlns deoarece spaţiul de nume "xmlns=http://www.w3.org/1999/xhtml" este implicit şi va fi adăugat automat în tagul <html> al documentului, chiar dacă l-aţi omis.

5. DTD (Document Type Definitions) XHTML Cel mai întâlnit DTD este XHTML Transitional. Declaraţia <!DOCTYPE> este obligatorie Un document XHTML este format din trei părţi principale:

declaraţia DOCTYPE Secţiunea <head> Secţiunea <body>

Structura de bază a unui document este: <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>

105

Un exemplu XHTML Acesta este un document XHTML simplu (minimal): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Un document simplu</title> </head> <body> <p>Un paragraf</p> </body> </html> Declaraţia DOCTYPE defineşte tipul documentului. În rest documentul arată ca în HTML. Document Type Definitions (DTD)

O declaraţie DTD specifică sintaxa unei pagini web în SGML DTD-urile sunt utilizate de aplicaţiile SGML, cum este HTML, pentru

a specifica regulile pentru documentele de un anumit tip, inclusiv un set de declaraţii de elemente şi entităţi

În XHTML, DTD descrie într-un limbaj precis, înţeles de calculator, sintaxa acceptată pentru marcajul XHTML

În XHTML sunt trei tipuri de DTD: STRICT TRANSITIONAL FRAMESET

XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Folosiţi această declaraţie DOCTYPE când doriţi un marcaj curat, independent de elementele de prezentare. Utilizaţi-l împreună cu CSS. XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

106

Folosiţi această declaraţie DOCTYPE când doriţi să folosiţi facilităţile HTML de prezentare. XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Folosiţi această declaraţie DOCTYPE când doriţi să utilizaţi cadre (frames) HTML. Un document XHTML poate fi validat cu validatorul W3C. Înainte de a valida documentulXHTML, inseraţi declaraţia DTD potrivită din cele trei declaraţii prezentate anterior.

6. Modularizarea XHTML Modelul de modularizare XHTML defineşte modulele XHTML. XHTML conţine majoritatea facilităţilor necesare unui proiectant web. Pentru unele aplicaţii, XHTML este prea mare şi prea complex, pentru altele este prea simplu. Prin împărţirea XHTML în module, comsorţiul 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 aplicaţii mult mai complexe. Cu un XHTML modularizat, proiectaţii pot:

Alege elemente suportate de un dispozitiv Simplifica XHTML-ul pentru dispozitive mici Extinde XHTML-ul pentru aplicaţii complexe prin adăugarea de noi

funcţionalităţi XML (ca MathML, SVG, Voice şi Multimedia) Defini profiluri XHTML ca XHTML Basic (un subset XHTML pentru

dispozitive mobile) Modulele XHTML Consorţiul W3C a împărţit definiţiile XHTML în 28 de module: Numele modulului Descriere Applet Module Defineşte elementul applet* (depăşit) Base Module Defineşte elementele de bază Basic Forms Module Defineşte elementele de bază pentru formulare Basic Tables Module Defineşte elementele de bază pentru tabele Bi-directional Text Module Defineşte elementul bdo Client Image Map Module Defineşte elementele de mapare a imaginilor pentru

browser

107

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

onchange Legacy Module Defineşte elementele şi atributele depăşite* Link Module Defineşte elementul link List Module Defineşte elementele pentru liste ol, li, ul, dd, dt, şi

dl Metainformation Module Defineşte elementul meta Name Identification Module

Defineşte atributul depăşit* name

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

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

h1 * Elementele depăşite 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  Defineşte un comentariu STF <!DOCTYPE> Defineşte tipul documentului STF

108

<a> Defineşte o ancoră STF <abbr> Defineşte o abreviere STF <acronym> Defineşte un acronim STF <address> Defineşte informaţiile de contact pentru

autorul documentului STF

<area /> Defineşte o zonă în interiorul unei imagini mapate

STF

<b> Defineşte un text îngroşat STF <base /> Defineşte o adresă implicită sau o

destinaţie implicită pentru toate linkurile dintr-o pagină

STF

<bdo> Defineşte direcţia textului STF <big> Defineşte un text mare STF <blockquote> Defineşte un citat lung STF <body> Defineşte corpul documentului STF <br /> Defineşte o întrerupere de linie STF <button> Defineşte un buton ce poate fi apăsat STF <caption> Defineşte titlul unui tabel STF <cite> Defineşte un citat STF <code> Defineşte un text tip cod de calculator STF <col /> Defineşte valorile atributelor pentru una

sau mai multe coloane dintr-un tabel STF

<colgroup> Defineşte un grup de coloane dintr-un tabel pentru formatare

STF

<dd> Defineşte descrierea unui termen dintr-o listă de definiţii

STF

<del> Defineşte un text şters STF <dfn> Defineşte o termen de definiţie STF <div> Defineşte o secţiune dintr-un document STF <dl> Defineşte o listă de definiţii STF <dt> Defineşte un element dintr-o listă de

definiţii STF

<em> Defineşte un text emphasized (accentuat) STF <fieldset> Defineşte un chenar în jurul elementelor

unui formular STF

<form> Defineşte un formular HTML pentru utilizator

STF

<frame /> Defineşte o fereastră (un cadru) dintr-un frameset

F

<frameset> Defineşte un set de cadre F <h1> to <h6> Definesc titlurile HTML STF

109

<head> Defineşte informaţiile despre document STF <hr /> Defineşte o linie orizontală STF <html> Defineşte un document HTML STF <i> Defineşte un text italic STF <iframe> Defineşte un cadru inline TF <img /> Defineşte o imagine STF <input /> Defineşte un control de intrare STF <ins> Defineşte un text inserat STF <kbd> Defineşte un text de la tastatură STF <label> Defineşte eticheta unui element de intrare STF <legend> Defineşte un titlu pentru un element

fieldset STF

<li> Defineşte un item dintr-o listă STF <link /> Defineşte relaţia dintre un document şi o

resursă externă STF

<map> Defineşte o imagine mapată STF <meta /> Defineşte meta-datele despre un document

HTML STF

<noframes> Defineşte un conţinut alternativ pentru utilizatorii care nu acceptă cadrele

TF

<noscript> Defineşte un conţinut alternativ pentru utilizatorii care nu acceptă scripturile de server

STF

<object> Defineşte un obiect împachetat STF <ol> Defineşte o listă ordonată STF <optgroup> Defineşte un grup de opţiuni înrudite dintr-

o listă de selecţie STF

<option> Defineşte o opţiune dintr-o listă de selecţie STF <p> Defineşte un paragraf STF <param /> Defineşte un parametru pentru un obiect STF <pre> Defineşte un text preformatat STF <q> Defineşte un citat scurt STF <samp> Defineşte un model de cod de calculator STF <script> Defineşte un script pentru client STF <select> Defineşte o listă de selecţie (o listă drop-

down) STF

<small> Defineşte un text mic STF <span> Defineşte o secţiune dintr-un document STF <strong> Defineşte un text îngroşat STF <style> Defineşte informaţiile de stil pentru un STF

110

document <sub> Defineşte un text de tip indice STF <sup> Defineşte un text de tip exponent STF <table> Defineşte un tabel STF <tbody> Grupează conţinutul corpului unui tabel STF <td> Defineşte o celulă dintr-un tabel STF <textarea> Defineşte un control de intrare multi-linie STF <tfoot> Grupează conţinutul subsolului unui tabel STF <th> Defineşte o celulă de tip titlu într-un tabel STF <thead> Grupează conţinutul de tip titlu dintr-un

tabel STF

<title> Defineşte titlul unui document STF <tr> Defineşte o linie dintr-un tabel STF <tt> Defineşte un text tip teletype STF <ul> Defineşte o listă neordonată STF <var> Defineşte o variabilă STF Tagul  Exemplu: <!—Acesta este un comentariu si nu va fi afisat de browser--> <p>Acest paragraf va fi afisat de browser.</p> Tagul de comentariu este utilizat pentru a insera în codul sursă un comentariu care va fi ignorat de browser. Puteţi folosi comentariile pentru a explica codul sau pentru a stoca informaţii specifice, cum ar fi scripturile şi elementele de stil (pentru browserele vechi). Acest tag nu are atribute standard sau atribute de evenimente. Declaraţia <!DOCTYPE> Exemplu de document cu o declaraţie de XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Title of the document</title> </head> <body>

111

The content of the document...... </body> </html> Declaraţia doctype ar trebui să fie prima dintr-un document HTML, înainte de tagul <html>. Declaraţia doctype nu este un tag HTML; este o indicaţie pentru browserele web referitoare la versiunea de limbaj de marcare utilizat în scrierea paginii. Declaraţia doctype se referă la DTD (Document Type Definition ). Declaraţii doctype disponibile în recomandările W3C HTML 4.01 Strict Documentul poate conţine toate elementele şi atributele HTML, dar nu poate conţine elemente de prezentare sau elemente depăşite (ca font). Nu sunt permise elemente frameset. Sintaxa declaraţiei este: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional Documentul poate conţine toate elementele şi atributele HTML, inclusiv elementele de prezentare şi cele depăşite (ca font), dar nu sunt permise elementele frameset. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset Este la fel ca HTML 4.01 Transitional, dar este permisă utilizarea elementelor frameset. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict Este la fel ca HTML 4.01 Strict, dar marcajele trebuie să respecte regulile XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

112

Este la fel ca HTML 4.01 Transitional, dar marcajele trebuie să respecte regulile XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset Este la fel ca XHTML 1.0 Transitional, dar este permisă utilizarea elementelor frameset. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 Este la fel ca XHTML 1.0 Strict, dar pot fi adăugate module pentru anumite limbi. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Tagul <a> Exemplu: <a href="http://www.yahoo.com">Yahoo!</a> Tagul <a> defineşte o ancoră care poate fi folosită în două moduri:

1. Pentru a crea un link către alt document, folosind atributul href 2. Pentru a crea o etichetă în interiorul unui document, folosind atributul

name Elementul a este numit uzual link sau hiperlink. Cel mai important atribut al elementului este href care indică destinaţia link-ului. În mod predefinit, link-urile sunt afişate în browsere astfel :

un link nevizitat este subliniat şi are culoarea albastră un link vizitat este subliniat şi are culoare violet un link activ este subliniat şi are culoarea roşie

Linkurile pot fi stilizate cu CSS. Atribute opţionale Coloana DTD indică în care HTML 4.01/XHTML 1.0 DTD este permis atributul. S=Strict, T=Transitional, and F=Frameset. Atribut Valoare Descriere DTD charset char_encoding Specifică setul de caractere al

documentului referit STF

113

coords coordinates Specifică coordonatele unui link STF href URL Specifică destinaţia unui link STF hreflang language_code Specifică limba documentului referit STF name section_name Specifică numele unei ancore STF rel text Specifică relaţia dintre documentul curent

şi documentul referit STF

rev text Specifică relaţia dintre documentul referit şi documentul curent document

STF

shape default rect circle poly

Specifică forma unui link STF

target _blank _parent _self _top framename

Specifică unde se va deschide documentul referit

TF

Atribute standard Atribut Valoare Descriere DTD accesskey character Specifică o tastă (shortcut) pentru a accesa

elementul STF

class classname Specifică numele clasei unui element STF dir rtl

ltr Specifică direcţia textului pentru conţinutul unui element

STF

id id Specifică un id unic pentru un element STF lang language_code Specifică limba pentru conţinutul unui

element STF

style style_definition Specifică stilul inline a unui element STF tabindex number Specifică ordinea tab a unui element STF title text Specifică informaţii suplimentare despre

un element STF

xml:lang language_code Specifică limba pentru conţinutul unui element, în documentele XHTML

STF

Atribute pentru evenimente Atribut Valoare Descriere DTD onblur script Script executat când se face click cu

mouse-ul în afara elementului STF

onclick script Script executat la un click de mouse STF ondblclick script Script executat la un dublu-click de mouse STF onfocus script Script executat când mouse-ul vizitează

elementul STF

114

onmousedown script Script executat când butonul mouse-ului este apăsat

STF

onmousemove script Script executat când cursorul mouse-ului se mişcă

STF

onmouseout script Script executat când cursorul mouse-ului părăseşte un element

STF

onmouseover script Script executat când cursorul mouse-ului se mişcă peste un element

STF

onmouseup script Script executat când butonul mouse-ului este eliberat

STF

onkeydown script Script executat când este apăsată o tastă STF onkeypress script Script executat când o tastă este apăsată şi

eliberată STF

onkeyup script Script executat când o tastă este eliberată STF Tagul <abbr> Exemplu: <abbr title="Organizatia Natiunilor Unite">ONU</abbr> a fost fondata in 1945. Tagul <abbr> descrie o frază abreviată. Marcând abrevierile, puteţi furniza informaţii utile browserelor şi motoarelor de căutare. Obs: Atributul title este utilizat pentru a afişa versiunea completă a expresiei abreviate, atunci când mouse-ul se mişcă peste abreviere. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup

Tagul <acronym> Exemplu: Sistemele de operare Windows se bazeaza pe <acronym title="Grafic User Interface">GUI</acronym>. Tagul defineşte un acronim, adică un text care poate fi pronunţat ca şi cum ar fi un cuvânt (NATO, NASA, GUI). Marcând acronimele, puteţi furniza informaţii utile browserelor şi motoarelor de căutare. Obs: Atributul title este utilizat pentru a afişa versiunea completă a acronimului, atunci când mouse-ul se mişcă peste el. Atribute standard: class, dir, id, lang, style, title, xml:lang

115

Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <address> Exemplu: <address> Proiectat de Web Design co.<br /> <a href="mailto:[email protected]">Contact</a><br /> Adresa: Bucuresti, Aleea Viilor nr.156<br /> Tel: 021.335.1237 </address> Tagul defineşte informaţiile de contact pentru autorul sau posesorul documentului, pentru ca acesta să poată fi contactat de utilizator. Uzual, acest element se adaugă în antetul sau subsolul paginii web. Obs. În toate browserele, conţinutul elementului este afişat în italic şi, uzual, browserul va adăuga o întrerupere de linie înainte şi după elementul adresă. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <area> Tagul defineşte o zonă dintr-o imagine mapată (o imagine cu zone ce pot fi acţionate cu un click de mouse). Elementul este scris întotdeauna în interiorul tagului <map>. Obs: Atributul usemap din tagul <img> este asociat cu atributul name al elementului map şi creează o relaţie între imagine şi hartă. Obs. În HTML <area> nu are tag de închidere, dar în HTML tagul <area> trebuie închis corect. În XHTML tagul trebuie să aibă neapărat atributul alt care specifică un text alternativ pentru zona definită. Atribute opţionale Atribut Valoare Descriere DTD coords coordinates Specifică coordonatele zonei STF href URL Specifică destinaţia unui link din zonă STF nohref nohref Specifică faptul că zona nu are un link

asociat STF

shape default rect circle poly

Specifică forma zonei STF

116

target _blank _parent _self _top

Specifică unde se va deschide pagina precizată în atributul href

TF

Atribute standard: accesskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onblur, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagurile <tt> <i> <b> <big> <small> Sunt taguri pentru stilul fontului. Ele nu sunt depăşite, dar e posibil să obţineţi rezultate mai bune cu CSS. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <base> Tagul specifică o adresă sau o destinaţie implicită pentru toate linkurile dintr-o pagină şi trebuie scris în interiorul elementului <head>. În HTML <base> nu are tag de închidere, dar în XHTML trebuie închis corect. Atribute Atribut Valoare Descriere DTD href URL Specifică un URL de bază pentru toate URL-urile

relative din pagină STF

target _blank _parent _self _top framename

Specifică unde se vor deschide toate linkurile din pagină

TF

Tagul nu are atribute standard sau de evenimente. Tagul <bdo> Tagul permite specificarea direcţiei textului şi suprascrie algoritmul bidirecţional. Are obligatoriu atributul dir care specifică direcţia textului din interiorul elementului, cu valorile posibile ltr şi rtl. Atribute standard: class, dir, id, lang, style, title, xml:lang Tagul nu are atribute de evenimente.

Tagul <blockquote>

117

Tagul defineşte un citat lung. Browserul inserează spaţiu alb înainte şi după acest element şi o margine. Obs: Pentru a marca citatele scurte folosiţi elementul q. Tagul poate avea atributul opţional cite, un URL care specifică sursa citatului. Atribute standard: class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <body> Tagul defineşte corpul documentului. Atribute standard: class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente Attribute Value Description DTD onclick script Script executat pentru un click de mouse STF ondblclick script Script executat pentru un dublu click de

mouse STF

onload script Script executat când documentul se încarcă

onmousedown script Script executat când butonul mouse-ului este apăsat

STF

onmousemove script Script executat când cursorul mouse-ului se mişcă

STF

onmouseout script Script executat când cursorul mouse-ului părăseşte un element

STF

onmouseover script Script executat când cursorul mouse-ului se mişcă peste un element

STF

onmouseup script Script executat când butonul mouse-ului este eliberat

STF

onkeydown script Script executat când o tastă este apăsată STF onkeypress script Script executat când o tastă este apăsată şi

eliberată STF

onkeyup script Script executat când o tastă este eliberată STF onunload script Script executat când documentul nu se

încarcă

Tagul <br>

118

Tagul inserează o întrerupere de linie şi este un tag vid, fără tag de închidere. În XHTML tagul trebuie închis corect astfel: <br />. Obs: Nu folosiţi tagul pentru a crea paragrafe. Atribute standard: class, id, style, title Tagul nu are atribute pentru evenimente.

Tagul <button> Tagul defineşte un buton ce poate fi apăsat de utilizator. În interiorul elementului puteţi avea text sau imagini. Aceasta este diferenţa dintre acest buton şi cel creat cu un element input. Specificaţi întotdeauna atributul type. Pentru IE tipul implicit este "button", în timp ce în alte browsere (şi în specificaţia W3C) este "submit". Atribute opţionale Atribut Valoare Descriere DTD disabled disabled Specifică că butonul este dezactivat STF name name Specifică numele butonului STF type button

reset submit

Specifică tipul butonului STF

value text Specifică valoarea care va trimisă de browser

STF

Atribute standard: accesskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onblur, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <caption> Tagul defineşte titlul unui tabel şi trebuie inserat în document imediat după tagul <table>. Puteţi specifica un singur titlu pentru un tabel. Uzual titlul va fi centrat în raport cu tabelul. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagurile <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> Sunt taguri pentru formatarea unei porţiuni de text. Ele nu sunt depăşite, dar se pot obţine rezultate mai bune cu CSS.

119

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <col> Exemplu: <html> <body> <table width="100%" border="1"> <col align="left" /> <col align="left" /> <col align="right" /> <tr> <th>ISBN</th> <th>Titlu</th> <th>Autor</th> </tr> <tr> <td>3476896</td> <td>Ion</td> <td>Liviu Rebreanu</td> </tr> <tr> <td>2489604</td> <td>Morometii</td> <td>Marin Preda</td> </tr> </table> </body> </html> Tagul defineşte valorile atributelor pentru una sau mai multe coloane dintr-un tabel. Tagul este util pentru a aplica un stil întregii coloane, în loc de a repeta stilul pentru fiecare linie şi celulă. Tagul poate fi utilizat numai în interiorul unui element table sau colgroup. Deşi în HTML <col> nu are tag de închidere, în XHTML tagul trebuie închis corect. Obs: Dacă adăugaţi atributul class în tagul <col>, atunci puteţi formata coloanele cu CSS.

120

Atribute opţionale Attribute Value Description DTD align left

right center justify char

Specifică alinierea conţinutului coloanei STF

char character Specifică alinierea conţinutului coloanei la un caracter

STF

charoff number Specifică numărul de caractere cu care va fi aliniat conţinutul faţă de caracterul specificat cu atributul char

STF

span number Specifică numărul de coloane pe care se va întinde elementul col

STF

valign top middle bottom baseline

Specifică alinierea verticală a conţinutului relativ la un element col

STF

width % pixels relative_length

Specifică lăţimea elementului col STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <colgroup> Exemplu: <html> <body> <table width="100%" border="1"> <colgroup span="2" align="left"></colgroup> <colgroup align="right" style="color:#0000FF;"></colgroup> <tr> <th>ISBN</th> <th>Titlu</th> <th>Autor</th> </tr> <tr> <td>3476896</td>

121

<td>Ion</td> <td>Liviu Rebreanu</td> </tr> <tr> <td>2489604</td> <td>Morometii</td> <td>Marin Preda</td> </tr> </table> </body> </html> Tagul este utilizat pentru formata un grup de coloane dintr-un tabel. Tagul este util pentru a aplica un stil întregii coloane, în loc de a repeta stilul pentru fiecare linie şi celulă. Tagul poate fi utilizat numai în interiorul unui element table. Obs: Dacă adăugaţi atributul class în tagul <colgroup>, atunci puteţi formata coloanele cu CSS. Atribute opţionale: aceleaşi ca la tagul <col> Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <dd> Tagul descrie un element (item) dintr-o listă de definiţii. Tagul este utilizat împreună cu <dl> (care declară o listă de definiţii) şi <dt> (care defineşte un termen din listă). În interiorul tagului <dd> pot să apară paragrafe, întreruperi de linie, imagini, liste, etc. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <del> Tagul defineşte un text care a fost şters dintr-un document. Obs: Folosiţi acest tag împreună cu tagul <ins> pentru a descrie actualizările şi modificările făcute în document. Atribute opţionale

122

Atribut Valoare Descriere DTD cite URL Specifică URL-ul unui document care

explică de ce a fost şters textul STF

datetime YYYY-MM-DDThh:mm:ssTZD

Specifică data şi ora la care a fost şters textul

STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <div> Exemplu: <html> <body> <h3>Acesta este un titlu</h3> <p>Acesta este un paragraf.</p> <div style="color:#00FF00"> <h3>Acesta este un titlu dintr-o sectiune div</h3> <p>Acesta este un paragraf dintr-o secţiune div.</p> </div> </body> </html> Tagul defineşte o secţiune dintr-un document HTML şi este deseori utilizat pentru a grupa elemente ce vor fi formatate cu stiluri. Obs: Elementul div este utilizat frecvent împreună cu CSS pentru a formata aspectul (layout) unei pagini web. În mod normal, browserele afişează o întrerupere de linie înainte şi după un element div. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <dl> Tagul declară o listă de definiţii şi este utilizat împreună cu tagurile <dt> şi <dd>. Atribute standard: class, dir, id, lang, style, title, xml:lang

123

Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <dt> Tagul defineşte un item dintr-o listă de definiţii şi este utilizat împreună cu tagurile <dl> şi <dd>. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <fieldset> Exemplu: <html> <body> <form> <fieldset> <legend>Date personale:</legend> Nume: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br /> Data nasterii: <input type="text" size="10" /> </fieldset> </form> </body> </html> Tagul este utilizat pentru a grupa logic elementele unui formular. Tagul desenează o casetă în jurul elementelor de formular grupate. Tagul <legend> defineşte un titlu pentru elementul fieldset. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <form> Tagul este utilizat pentru a crea formulare HTML pentru intrările utilizatorului. Un formular poate conţine elemente de intrare, cum ar fi: câmpuri de text, căsuţe de validare (checkbox), butoane radio, butoane de trimitere (submit) etc.

124

Un formular poate conţine şi meniuri de selectare, precum şi elemente textarea, fieldset, legend, şi label. Formularele sunt folosite pentru a trimite date către server.. Obs: Elementul form este un element la nivel de bloc şi creează o întrerupere de linie, înainte şi după el însuşi. Atribute obligatorii Atribut Valoare Descriere DTD action URL Specifică unde se trimit datele din formular

când acesta este submis (submit) STF

Atribute opţionale Atribut Valoare Descriere DTD accept MIME_type Specifică tipurile de fişiere ce pot fi

uploadate prin intermediul formularului STF

accept-charset

charset Specifică seturile de caractere din datele formularului pe care serverul le poate manevra

STF

enctype application/x-www-form-urlencoded multipart/form-data text/plain

Specifică cum trebuie codate datele din formular înainte de a fi trimise la server

STF

method get post

Specifică cum se trimit datele din formular STF

name name Specifică numele formularului TF Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup la care se adaugă atributele: onreset script Script executat când formularul este resetat onsubmit script Script executat când formularul este trimis (submit)

125

Tagul <frame> Tagul defineşte o fereastră (un cadru) particular dintr-un frameset. Fiecare cadru din frameset poate avea atribute diferite, cum ar fi margini, bare de derulare, posibilitatea de redimensionare, etc. În HTML <frame> nu are tag de închidere, dar în XHML tagul trebuie închis corect. Obs: Dacă doriţi să validaţi o pagină care conţine cadre, fiţi siguri că doctype este setat pe "Frameset DTD". Important: Nu puteţi folosi elementul body împreună cu un element frameset. Totuşi, dacă adăugaţi tagul <noframes> pentru browserele care nu recunosc cadrele, va trebui să includeţi textul în elementul body. Atribute opţionale Atribut Valoare Descriere DTD frameborder 0

1 Specifică dacă se afişează sau nu un chenar în jurul cadrului

F

longdesc URL Specifică o pagină care conţine descrierea extinsă a conţinutului cadrului

F

marginheight pixels Specifică marginile de sus şi de jos ale cadrului

F

marginwidth pixels Specifică marginile din dreapta şi din stânga ale cadrului

F

name name Specifică numele cadrului F noresize noresize Specifică faptul că nu se poate

redimensiona cadrul F

scrolling yes no auto

Specifică dacă se afişează sau nu bare de derulare în cadru

F

src URL Specifică URL-ul documentului afişat în cadru

F

Atribute standard: class, id, style, title Tagul nu acceptă atribute de evenimente.

Tagul <frameset> Elementul frameset păstrează două sau mai multe cadre (elemente frame). Fiecare cadru păstrează un document separat. Elementul frameset arată doar câte linii sau câte coloane for fi în frameset. Atribute opţionale Atribut Valoare Descriere DTD cols pixels

% Specifică numărul şi dimensiunea coloanelor din frameset

F

126

* rows pixels

% *

Specifică numărul şi dimensiunea liniilor din frameset

F

Atribute standard: class, id, style, title Atribute pentru evenimente: onload, onunload

Tagul <head> Acest element este un container pentru toate elementele care se plasează aici: scripturi, informaţii despre foile de stil, meta informaţii etc. În secţiunea head pot fi adăugate următoarele taguri: <base>, <link>, <meta>, <script>, <style> şi <title>. Tagul <title> defineşte titlul documentului şi este singurul obligatoriu din această secţiune. Atribute standard: dir, lang, xml:lang Tagul nu are atribute eveniment. Tagurile <h1> ...<h6> Aceste taguri definesc titlurile HTML. Tagul <h1> defineşte cel mai mare titlu şi <h6> defineşte cel mai mic titlu. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <hr> Tagul creează o linie orizontală într-o pagină web care poate fi folosită pentru a separa conţinutul. Deşi în HTML <hr> nu are tag de închidere, în XHTML tagul se închide astfel: <hr />. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <html> Tagul spune browserului că acesta este un document HTML. Este cel mai exterior tag în HTML şi XHTML şi se mai numeşte element rădăcină. Elementul doctype trebuie plasat în document înaintea elementului html.

127

Atribute standard: dir, lang, xml:lang Tagul nu are atribute eveniment. Tagul <iframe> Tagul defineşte un cadru inline care conţine un alt document. Obs: Pentru browserele care nu recunosc acest tag, plasaţi textul dorit între tagurile <iframe> şi </iframe>. Atribute opţionale Atribut Valoare Descriere DTD frameborder 1

0 Specifică dacă se afişează un chenar sau nu în jurul elementului

TF

height pixels %

Specifică înălţimea elementului TF

longdesc URL Specifică o pagină care conţine o descriere extinsă a conţinutului cadrului

TF

marginheight pixels Specifică marginile de sus şi de jos ale cadrului

TF

marginwidth pixels Specifică marginile din stânga şi din dreapta cadrului

TF

name name Specifică numele cadrului TF scrolling yes

no auto

Specifică dacă se afişează sau nu bare de derulare în cadru

TF

src URL Specifică URL-ul documentului ce trebuie afişat în cadru

TF

width pixels %

Specifică lăţimea cadrului TF

Atribute standard: class, id, style, title Tagul nu are atribute eveniment. Tagul <img> Tagul împachetează o imagine într-o pagină HTML. Practic, imaginea nu este efectiv inserată în document, ci legată la pagina respectivă. Tagul <img> creează un loc de stocare pentru imaginea referită. Tagul are două atribute obligatorii: src şi alt. În HTML <img> nu are tag de închidere, dar în XHTML el trebuie închis corect. Obs: Atributul alt este conceput să afişeze un text alternativ dacă imaginea nu poate fi încărcată, nu un text afişat când mouse-ul trece peste imagine. Pentru a afişa un text când mouse-ul trece peste o imagine sau peste o imagine mapată, utilizaţi atributul title, ca în exemplul următor:

128

<img src="smiley.gif" alt="Smiley face" title="Smiley face" /> Obs: Când o pagină web este încărcată în browser, acesta ia imaginea de pe un server web şi o inserează în pagină. De aceea, asiguraţi-vă că imaginea se găseşte în acelaşi loc relativ la pagina web, altfel utilizatorii vor primi un simbol de link rupt. Acest simbol este afişat atunci când browserul nu găseşte o imagine. Atribute obligatorii Atribut Valoare Descriere DTD alt text Specifică un text alternativ pentru imagine STF src URL Specifică URL-ul imaginii STF Atribute opţionale Atribut Valoare Descriere DTD height pixels

% Specifică înălţimea unei imagini STF

longdesc URL Specifică URL-ul unui document care conţine o descriere extinsă a imaginii

STF

usemap #mapname Specifică o imagine ca imagine mapată pentru client

STF

width pixels %

Specifică lăţimea unei imagini STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup, onabort(script executat când încărcarea imaginii este întreruptă) Tagul <input> Tagul este utilizat pentru a selecta informaţia introdusă de utilizator. Un câmp de intrare (input) poate fi un câmp de text, o căsuţă de validare, un câmp de parolă, un buton radio, un buton etc. În HTML <input> nu are tag de închidere, dar în XHTML tagul trebuie închis astfel: <input/>. Obs: Pentru a defini etichetele elementelor de intrare, utilizaţi tagul <label>. Atribute opţionale Atribut Valoare Descriere DTD accept MIME_type Specifică tipul fişierelor care pot fi submise

(numai pentru type="file") STF

alt text Specifică un text alternativ pentru o imagine (numai pentru type="image")

STF

checked checked Specifică că elementul de intrare trebuie să fie STF

129

preselectat când pagina se încarcă (pentru type="checkbox" sau type="radio")

disabled disabled Specifică că elementul de intrare trebuie dezactivat când pagina se încarcă

STF

maxlength number Specifică lungimea maximă (în caractere) a unui câmp de intrare (pentru type="text" sau type="password")

STF

name name Specifică un nume pentru un element de intrare STF readonly readonly Specifică că un câmp de intrare este read-only

(pentru type="text" sau type="password") STF

size number Specifică lăţimea unui câmp de intrare STF src URL Specifică URL-ul unei imagini afişată ca buton

de submitere STF

type button checkbox file hidden image password radio reset submit text

Specifică tipul unui element de intrare STF

value value Specifică valoarea unui element de intrare STF Atribute standard: acceskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onblur, onchange (script executat când elementul se modifică), onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup, onselect(script executat când elementul este selectat) Tagul <ins> Tagul defineşte textul care a fost inserat într-un document. Obs: Folosiţi-l împreună cu tagul <del> pentru a descrie actualizările şi modificările făcute în document. Atribute opţionale Atribut Valoare Descriere DTD cite URL Specifică URL-ul unui document care

explică de ce textul a fost inserat/modificat

STF

130

datetime YYYY-MM-DDThh:mm:ssTZD

Specifică data şi ora la care a fost inserat/schimbat textul

STF

Atribute standard: class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup

Tagul <label> Defineşte eticheta unui element de intrare dintr-un formular. Eticheta nu are un efect deosebit pentru utilizator, dar îmbunătăţeşte accesibilitatea utilizatorilor de mouse. Dacă faceţi clic pe textul etichetei, elementul respectiv este selectat. Atribute opţionale Atribut Valoare Descriere DTD for element_id Specifică cărui element din formular îi

corespunde eticheta. STF

Atribute standard: acceskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onblur, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <legend> Tagul defineşte titlul unui element fieldset. Atribute standard: acceskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup

Tagul <li> Tagul defineşte un item dintr-o listă ordonată sau neordonată. Obs: Utilizaţi CSS pentru a defini tipul listei şi a elementelor din listă. Atribute standard: acceskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup

131

Tagul <link> Tagul defineşte relaţia dintre document şi o resursă externă. Este frecvent utilizat pentru a lega foile de stil la document. Deşi în HTML <link> nu are tag de închidere, în XHTML el trebuie închis corect. Obs: Elementul link trebuie inclus în secţiunea head, şi poate să apară de mai multe ori. Atribute opţionale Atribut Valoare Descriere DTD charset char_encoding Specifică tipul de codare a caracterelor pentru

documentul referit STF

href URL Specifică locaţia documentului referit STF hreflang language_code Specifică limba textului din documentul

referit STF

media screen tty tv projection handheld print braille aural all

Specifică pe ce dispozitiv va fi afişat documentul referit

STF

rel alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection

Specifică relaţia dintre documentul curent şi documentul referit

STF

rev alternate appendix bookmark

Specifică relaţia dintre documentul referit şi documentul curent

STF

132

chapter contents copyright glossary help home index next prev section start stylesheet subsection

target _blank _self _top _parent frame_name

Specifică unde se va încărca documentul referit

TF

type MIME_type Specifică tipul MIME al documentului referit STF Atribute standard: acceskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <map> Tagul defineşte o imagine mapată (image-map) pentru client. Atributul name este obligatoriu în elementul map. Acest atribut este asociat cu atributul usemap al elementului <img> şi creează o relaţie între imagine şi hartă (map). Elementul map conţine un anumit număr de elemente area, care definesc zonele din imaginea mapată ce pot fi activate cu mouse-ul. Atribute standard: acceskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <meta> Metadata este informaţia despre date..

133

Tagul <meta> furnizează metadatele despre documentul HTML. Metadata nu va fi afişată în browser. Elementele meta specifică uzual descrierea paginii, cuvintele cheie, autorul documentului, ultima modificare şi alte metadate. În HTML <meta> nu are tag de închidere, dar în XHTML tagul trebuie închis corect. Atribute obligatorii Atribut Valoare Descriere DTD content text Specifică conţinutul meta-informaţiei STF Atribute standard: dir, lang, xml:lang Tagul nu are atribute eveniment Tagul <noframes> Tagul este utilizat pentru browserele care nu recunosc cadrele. Elementul noframes poate conţine toate elementele care apar uzual în elementul body al unei pagini HTML. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <noscript> Tagul este utilizat pentru a furniza un conţinut alternativ pentru utilizatorii care au dezactivat scripturile în browser sau care au un browser care nu recunoaşte scripturile client. Elementul noscript poate conţine toate elementele care apar uzual în elementul body al unei pagini HTML. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <object> Exemplu: <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" />

134

<param name="Max" value="10" /> </object> Tagul este utilizat pentru a include obiecte ca imaginile, fişiere audio, video, apleturi Java, ActiveX, PDF şi Flash. Elementul object a fost introdus pentru a înlocui elementele img şi applet. Din păcate, acceptarea elementului object în browsere depinde de tipul obiectului şi browserele importante folosesc coduri diferite pentru a încărca un obiect de acelaşi tip. Din fericire, elementul object oferă o soluţie: dacă elementul nu este afişat, codul dintre tagurile <object> şi </object> va fi executat. În acest fel, pot fi mai multe elemente object imbricate (câte unul pentru fiecare browser). Obs: Tagul <param> defineşte setările pentru execuţia (run-time) obiectului. Important: Nu folosiţi tagul <object> pentru imagini, ci tagul <img>! Atribute standard: class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <ol> Tagul este utilizat pentru a crea o listă ordonată. Obs: Utilizaţi CSS pentru a defini tipul listei.. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <optgroup> Exemplu: <html> <body> <select> <optgroup label="Masini suedeze"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="Masini germane"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup>

135

</select> </body> </html> Tagul este utilizat pentru a grupa opţiunile înrudite dintr-o listă de selecţie. Dacă aveţi o listă de opţiuni lungă, gruparea opţiunilor înrudite uşurează utilizarea ei. Atribute obligatorii Atribut Valoare Descriere DTD label text Specifică o descriere pentru grupul de opţiuni STF Atribute opţionale Atribut Valoare Descriere DTD disabled disabled Specifică că un grup de opţiuni este dezactivat STF Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <option> Tagul defineşte o opţiune dintr-o listă de selecţie. Elementul option se scrie în interiorul elementului select. În HTML <option> nu are tag de închidere, dar în XTML tagul trebuie închis corect. Atribute opţionale Atribut Valoare Descriere DTD disabled disabled Specifică o opţiune dezactivată STF label text Specifică o etichetă scurtă pentru o opţiune STF selected selected Specifică că opţiunea este implicit selectată STF value text Specifică valoarea care se trimite serverului când

formularul este submis. STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <p> Tagul defineşte un paragraf. Elementul creează în mod automat un spaţiu înainte şi după paragraf. Spaţiul este aplicat automat de browser sau îl puteţi specifica într-o foaie de stil

136

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <param> Tagul este utilizat pentru a defini parametrii sau variabilele pentru un element object sau applet. În HTML elementul nu are tag de închidere, dar în XHTML trebuie închis corect. Atribute obligatorii Atribut Valoare Descriere DTD name name Defineşte numele parametrului (pentru a fi

utilizat în script) STF

Atribute opţionale Atribut Valoare Descriere DTD type MIME_type Specifică tipul MIME al parametrului STF value value Specifică valoarea parametrului STF valuetype data

ref object

Specifică tipul valorii STF

Tagul suportă numai atributul standard id şi nici-un atribut pentru evenimente.

Tagul <pre> Tagul defineşte un text pre-formatat. Textul din elementul pre este afişat cu un font cu pas fix (uzual Courier), şi păstrează spaţiile şi întreruperile de linie. Obs: Utilizaţi elementul pre pentru a afişa coduri de calculator (cum ar fi secvenţe de programe). Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <q> Tagul defineşte un citat scurt. Browserul va afişa citatul între ghilimele.. Atribute opţionale Atribut Valoare Descriere DTD cite URL Specifică sursa citatului STF

137

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <script> Tagul este utilizat pentru a defini un script client, cum ar JavaScript. Elementul script fie conţine instrucţiunile scriptului, fie adresează un script dintr-un fişier extern cu atributul src. Atributul obligatoriu type specifică tipul MIME al scriptului. În general, JavaScript se foloseşte pentru gestionarea imaginilor, validarea formularelor şi schimbări dinamice ale conţinutului. Atribute opţionale Atribut Valoare Descriere DTD charset charset Specifică tipul de codare utilizat în fişierul extern

de script STF

defer defer Specifică că execuţia scriptului va fi amânată până când pagina este încărcată

STF

src URL Specifică URL-ul fişierului script extern STF xml:space preserve Specifică care spaţii albe din cod trebuie păstrate Tagul nu suportă atribute standard sau pentru evenimente. Tagul <select> Tagul este utilizat pentru a crea o listă de selecţie (o listă drop-down). Tagul <option> din elementul select defineşte opţiunile disponibile din listă. Obs: Elementul select este un control pentru formulare şi poate fi utilizat într-un formular pentru a colecta informaţiile furnizate de utilizator. Atribute opţionale Atribut Valoare Descriere DTD disabled disabled Specifică dacă lista drop-down este dezactivată STF multiple multiple Specifică că pot fi selectate opţiuni multiple STF name name Specifică numele listei STF size number Specifică numărul de opţiuni vizibile în listă STF Atribute standard: class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onblur, onchange, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup

138

Tagul <span> Exemplu: <html> <head> <style type="text/css"> span.blue {color:lightskyblue;font-weight:bold} span.green {color:darkolivegreen;font-weight:bold} </style> </head> <body> <p>Cerul este <span class="blue">albastru</span> si lanurile sunt <span class="green">verzi</span> si bogate.</p> </body> </html> Tagul permite selectarea unei porţiuni de text sau de document în vederea formatării cu ajutorul stilurilor sau în vederea manipulării conţinutului cu JavaScript. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <style> Tagul defineşte informaţii de stil pentru un document HTML. Elementul style specifică cum vor arăta elementele HTML în browser. Atributul obligatoriu type defineşte conţinutul elementului style. Singura valoare posibilă este "text/css". Elementul style se scrie întotdeauna în secţiunea head. Tip: Pentru a utiliza o foaie externă de stiluri, utilizaţi tagul <link>. Atribute opţionale Atribut Valoare Descriere DTD media screen

tty tv projection handheld print braille

Specifică stiluri pentru diferite tipuri de media STF

139

aural all

Atribute standard: dir, lang, title, xml:lang Tagul nu are atribute pentru evenimente. Tagurile <sub> şi <sup> Tagul <sub> defineşte textul subscript care apare ca jumătate de caracter sub linia de bază a textului (util pentru formule chimice). Tagul <sup> defineşte textul superscript care apare ca jumătate de caracter deasupra liniei textului (util pentru note de subsol). Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <table> Tagul defineşte un tabel HTML. Un tabel HTML simplu constă în elementul table şi unul sau mai multe elemente tr, th, şi td. Elementul tr defineşte o linie din tabel, elementul th defineşte un cap de tabel şi elementul td defineşte o celulă din tabel. Tabelele mai complexe pot include elementele caption, col, colgroup, thead, tfoot şi tbody. Atribute opţionale Atribut Valoare Descriere DTD border pixels Specifică lăţimea chenarului din jurul tabelului STF cellpadding pixels Specifică spaţiul dintre chenarul celulei şi

conţinutul celulei STF

cellspacing pixels Specifică spaţiul dintre celule STF frame void

above below hsides lhs rhs vsides box border

Specifică care parte a chenarului exterior va fi vizibilă

STF

rules none groups rows

Specifică care parte a chenarului interior va fi vizibilă

STF

140

cols all

summary text Specifică un sumar pentru conţinutul tabelului STF width pixels

% Specifică lăţimea unui tabel STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagurile <tbody>, <head> şi <tfoot> Exemplu: <html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1"> <thead> <tr> <th>Luna</th> <th>Economii</th> </tr> </thead> <tfoot> <tr> <td>Total</td> <td>340RON</td> </tr> </tfoot> <tbody> <tr> <td>Februarie</td> <td>180RON</td> </tr> <tr> <td>Martie</td>

141

<td>160RON</td> </tr> </tbody> </table> </body> </html> Tagul tbody este utilizat pentru a grupa conţinutul din corpul unui tabel. Elementul tbody trebuie utilizat împreună cu elementele thead şi tfoot. Elementul thead este utilizat pentru a grupa conţinutul din capul de tabel, iar elementul tfoot este utilizat pentru a grupa conţinutul din subsolul unui tabel HTML. Obs: Elementul <tfoot> trebuie să apară în descrierea tabelului înaintea elementului <tbody>, astfel încât browserul să poată reda subsolul înainte de a primi toate liniile de date. Atribute opţionale Atribut Valoare Descriere DTD align right

left center justify char

Aliniază conţinutul din elementul tbody STF

char character Aliniază conţinutul din tbody la un caracter STF charoff number Specifică numărul de caractere cu care conţinutul

elementului tbody va fi aliniat faţă de caracterul specificat cu atributul char

STF


Aliniază vertical conţinutul din elementul tbody STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagurile <td> şi <th> Tagul <td> defineşte o celulă standard dintr-un tabel HTML. Tagul <th> defineşte o celulă de titlu dintr-un tabel HTML. Un tabel HTML are două tipuri de celule:

Celule de titlu – conţin informaţiile din capul tabelului (create cu elementul th)

142

Celule standard – conţin date (create cu elementul td) Textul dintr-o celulă de titlu este îngroşat şi centrat. Textul dintr-o celulă standard este normal şi aliniat la stânga. Obs: Utilizaţi atribute colspan şi rowspan pentru a lăsa conţinutul să se întindă pe mai multe coloane sau linii. Atribute opţionale Atribut Valoare Descriere DTD abbr text Specifică o versiune abreviată pentru

conţinutul unei celule STF

align left right center justify char

Aliniază conţinutul unei celule STF

axis category_name Încadrează celula într-o categorie STF char character Aliniază conţinutul celulei la un caracter STF charoff number Specifică numărul de caractere cu care

conţinutul celulei va fi aliniat faţă de caracterul specificat cu atributul char

STF

colspan number Specifică numărul de coloane pe care se întinde o celulă

STF

headers headercells'_id Specifică titlurile din tabel relaţionate cu o celulă

STF

rowspan number Specifică numărul de linii pe care se întinde o celulă

STF

scope col colgroup row rowgroup

Defineşte un mod de asociere între celule de titlu şi celulele de date

STF


Aliniază vertical conţinutul unei celule STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <textarea> Tagul defineşte o zonă de text multi-linie pentru informaţia introdusă de utilizator.

143

O zonă de text poate păstra un număr nelimitat de caractere şi textul este afişat cu un font cu pas fix (uzual Courier). Mărimea elementului textarea poate fi specificată cu atributele cols şi rows, sau cu proprietăţile CSS height şi width. Atribute obligatorii Atribut Valoare Descriere DTD cols number Specifică lăţimea vizibilă a elementului STF rows number Specifică numărul vizibil de linii din element STF Atribute opţionale Atribut Valoare Descriere DTD disabled disabled Specifică că elementul textarea este

dezactivat STF

name name_of_textarea Specifică numele elementului STF readonly readonly Specifică că elementul este read-only STF Atribute standard: accesskey, class, dir, id, lang, style, tabindex, title, xml:lang Atribute pentru evenimente: onblur, onchange, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <title> Tagul defineşte titlul unui document. Elementul title este obligatoriu în documentele HTML/XHTML. Elementul title:

Defineşte un titlu în bara de instrumente (toolbar-ul) browserului Furnizează un titlu pentru pagină când este adăugată în favorite Afişează un titlu pentru pagină în rezultatele furnizate de motoarele de

căutare Atribute standard: dir, lang, xml:lang Tagul nu are atribute pentru evenimente.

Tagul <tr> Tagul defineşte o linie într-un tabel HTML. Un element tr conţine unul sau mai multe elemente th sau td. Atribute opţionale Atribut Valoare Descriere DTD align right

left center

Aliniază conţinutul liniei STF

144

justify char

char character Aliniază conţinutul liniei la un caracter STF charoff number Stabileşte numărul de caractere cu care va fi

aliniat conţinutul liniei faţă de caracterul precizat cu atributul char

STF


Aliniază vertical conţinutul liniei STF

Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup Tagul <ul> Tagul defineşte o listă neordonată. Obs: Utilizaţi CSS pentru a defini tipul unei liste. Atribute standard: class, dir, id, lang, style, title, xml:lang Atribute pentru evenimente: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup

145

Bibliografie

Teodoru Gugoiu - HTML, XHTML, CSS si XML prin exemple - ghid practic, Editura Teora, 2005

Sabin Buraga - Prezentari multimedia pe Web. Limbajele XHTML+TIME si SMIL, Editura Polirom, 2004

Zeid Ibrahim - Mastering the internet, xhtml and java script , Editura Prentice Hall, 2004

Rick Darnel - Totul despre HTML 4, Editura Teora, 2000

Traian Anghel - Dezvoltarea aplicatiilor WEB folosind XHTML, PHP si MySQL, Editura Polirom, 2005

Margareta Dina Draghici - Situri Web In HTML 4, Editura Tehnica, 2003

Tudor Sorin, Vlad Huţanu – Crearea şi programarea paginilor WEB, Editura L&S Soft, 2006

http://www.ecursuri.ro

http://www.w3schools.com

http://www.tutorialehtml.com

curs html a5 - laurian.ro html_a5.pdf · 8 elemente html vide.....21 5. atribute html.....21

Documents